Movie Popup Enhancements

Add remove request button and improve torrent search UX

- Remove emoji from 'Already available' text
- Add 'Remove request' button visible only to admins on requested items with IconTombstone
- Replace torrent search icon from IconBinoculars to IconHelm
- Add helm spin animation that rotates clockwise when opening torrent search
- Add helm spin animation that rotates counter-clockwise when closing torrent search
- Add helmKey reactive ref to trigger animation on every state change

src/components/popup/Movie.vue

@@ -32,9 +32,7 @@
             <IconThumbsUp v-if="media?.exists_in_plex" />
             <IconThumbsDown v-else />
             {{
-              !media?.exists_in_plex
+              !media?.exists_in_plex ? "Not yet available" : "Already available"
-                ? "Not yet available"
-                : "Already available 🎉"
             }}
           </action-button>
 
@@ -46,6 +44,11 @@
             {{ !requested ? `Request ${type}?` : "Already requested" }}
           </action-button>
 
+          <action-button v-if="admin && requested" :active="false">
+            <IconTombstone />
+            Remove request
+          </action-button>
+
           <action-button
             v-if="plexUserId && media?.exists_in_plex"
             @click="openInPlex"
@@ -66,9 +69,15 @@
           <action-button
             v-if="admin === true"
             :active="showTorrents"
-            @click="showTorrents = !showTorrents"
+            @click="
+              showTorrents = !showTorrents;
+              helmKey++;
+            "
           >
-            <IconBinoculars />
+            <IconHelm
+              :key="helmKey"
+              :class="showTorrents ? 'helm-spin-forward' : 'helm-spin-reverse'"
+            />
             Search for torrents
             <span v-if="numberOfTorrentResults" class="meta">{{
               numberOfTorrentResults
@@ -176,8 +185,9 @@
   import IconInfo from "../../icons/IconInfo.vue";
   import IconRequest from "../../icons/IconRequest.vue";
   import IconRequested from "../../icons/IconRequested.vue";
-  import IconBinoculars from "../../icons/IconBinoculars.vue";
+  import IconHelm from "../../icons/IconHelm.vue";
   import IconPlay from "../../icons/IconPlay.vue";
+  import IconTombstone from "../../icons/IconTombstone.vue";
   import TorrentList from "../torrent/TruncatedTorrentResults.vue";
   import CastList from "../CastList.vue";
   import Detail from "./Detail.vue";
@@ -226,6 +236,7 @@
   const compact: Ref<boolean> = ref();
   const loading: Ref<boolean> = ref();
   const backdropElement: Ref<HTMLElement> = ref();
+  const helmKey: Ref<number> = ref(0);
 
   const store = useStore();
 
@@ -590,4 +601,30 @@
   .fade-leave-to {
     opacity: 0;
   }
+
+  .helm-spin-forward {
+    animation: helm-spin-forward 0.6s ease-in-out;
+  }
+
+  .helm-spin-reverse {
+    animation: helm-spin-reverse 0.6s ease-in-out;
+  }
+
+  @keyframes helm-spin-forward {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(270deg);
+    }
+  }
+
+  @keyframes helm-spin-reverse {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(-270deg);
+    }
+  }
 </style>

src/icons/IconHelm.vue

@@ -0,0 +1,7 @@
+<template>
+<!-- generated by icomoon.io - licensed Lindua icon -->
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
+    <path d="M12 8c-2.2062 0-4 1.7937-4 4s1.7937 4 4 4c2.2062 0 4-1.7937 4-4s-1.7937-4-4-4zM12 14c-1.1031 0-2-0.8969-2-2s0.8969-2 2-2 2 0.8969 2 2-0.8969 2-2 2z" />
+    <path d="M24 13v-2h-3.0531C20.7594 9.3031 20.1 7.7125 19.0344 6.3813l2.1593-2.1594-1.4156-1.4156-2.1594 2.1625C16.2875 3.9 14.6969 3.2407 13 3.0563V0h-2v3.0532C9.3031 3.2407 7.7125 3.9 6.3812 4.9657L4.2219 2.8063 2.8062 4.2219 4.9656 6.3813C3.8969 7.7125 3.2375 9.3032 3.0531 11H0v2h3.0531c0.1875 1.6969 0.8469 3.2875 1.9125 4.6188l-2.1594 2.1594 1.4157 1.4156 2.1593-2.1594C7.7125 20.1032 9.3031 20.7625 11 20.9469V24h2v-3.0531c1.6969-0.1875 3.2875-0.8469 4.6187-1.9125l2.1594 2.1594 1.4156-1.4156-2.1625-2.1594C20.1 16.2875 20.7593 14.6969 20.9437 13zM19.9375 11h-2.0219c-0.1531-0.9094-0.5125-1.7531-1.0281-2.475l1.4281-1.4281C19.1781 8.2031 19.7562 9.5406 19.9375 11zM12 17c-2.7563 0-5-2.2438-5-5s2.2438-5 5-5c2.7563 0 5 2.2438 5 5s-2.2438 5-5 5zM16.9031 5.6813 15.475 7.1094C14.7531 6.5937 13.9094 6.2344 13 6.0812V4.0625c1.4594 0.1812 2.7969 0.7594 3.9031 1.6188zM11 4.0625v2.0219c-0.9094 0.1531-1.7531 0.5125-2.475 1.0281L7.0969 5.6844C8.2031 4.8219 9.5406 4.2438 11 4.0625zM5.6813 7.0969 7.1094 8.525C6.5937 9.2469 6.2344 10.0906 6.0812 11H4.0625c0.1812-1.4594 0.7594-2.7969 1.6188-3.9031zM4.0625 13h2.0219c0.1531 0.9094 0.5125 1.7531 1.0281 2.475l-1.4281 1.4281C4.8219 15.7969 4.2438 14.4594 4.0625 13zM7.0969 18.3188 8.525 16.8906c0.7219 0.5157 1.5656 0.875 2.475 1.0282v2.0187c-1.4594-0.1812-2.7969-0.7594-3.9031-1.6187zM13 19.9375v-2.0219c0.9094-0.1531 1.7531-0.5125 2.475-1.0281l1.4281 1.4281c-1.1062 0.8625-2.4437 1.4406-3.9031 1.6219zM18.3188 16.9031 16.8906 15.475c0.5157-0.7219 0.875-1.5656 1.0282-2.475h2.0187c-0.1812 1.4594-0.7594 2.7969-1.6187 3.9031z" />
+</svg>
+</template>