Added Amateur Allure.

assets/components/releases/banner.vue

@@ -26,6 +26,8 @@
                 :alt="release.title"
                 class="item trailer-video"
                 controls
+                @playing="playing = true"
+                @pause="playing = false"
             >Sorry, the tailer cannot be played in your browser</video>
 
             <video
@@ -35,6 +37,8 @@
                 :alt="release.title"
                 class="item trailer-video"
                 controls
+                @playing="playing = true"
+                @pause="playing = false"
             >Sorry, the tailer cannot be played in your browser</video>
 
             <img
@@ -43,6 +47,15 @@
                 :alt="release.title"
                 class="item trailer-video"
             >
+
+            <a
+                v-if="release.poster"
+                :href="`/media/${release.poster.path}`"
+                :class="{ playing }"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="poster-link"
+            ><Icon icon="image" /></a>
         </div>
 
         <a
@@ -86,6 +99,11 @@ export default {
             default: null,
         },
     },
+    data() {
+        return {
+            playing: false,
+        };
+    },
     computed: {
         photos,
     },
@@ -114,6 +132,7 @@ export default {
 
 .trailer {
     display: inline-block;
+    position: relative;
     max-width: 100vw;
 }
 
@@ -122,6 +141,32 @@ export default {
     object-fit: cover;
 }
 
+.poster-link {
+    position: absolute;
+    top: .5rem;
+    right: .5rem;
+    transition: opacity .1s ease;
+
+    .icon {
+        width: 1.5rem;
+        height: 1.5rem;
+        fill: $highlight;
+    }
+
+    &.playing {
+        opacity: 0;
+    }
+
+    &:hover {
+        cursor: pointer;
+        opacity: 1;
+
+        .icon {
+            fill: $highlight-strong;
+        }
+    }
+}
+
 .item {
     height: 18rem;
     vertical-align: middle;