Added SFW mode with NSFW warning to releases.

assets/components/releases/banner.vue

@@ -7,7 +7,7 @@
             <video
                 v-if="release.trailer"
                 :src="`/media/${release.trailer.path}`"
-                :poster="`/media/${(release.poster && release.poster.thumbnail)}`"
+                :poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
                 :alt="release.title"
                 class="item trailer-video"
                 controls
@@ -18,7 +18,7 @@
             <video
                 v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
                 :src="`/media/${release.teaser.path}`"
-                :poster="`/media/${(release.poster && release.poster.thumbnail)}`"
+                :poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
                 :alt="release.title"
                 class="item trailer-video"
                 controls
@@ -28,7 +28,7 @@
 
             <img
                 v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
-                :src="`/media/${release.teaser.path}`"
+                :src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
                 :alt="release.title"
                 class="item trailer-video"
             >
@@ -41,6 +41,13 @@
                 rel="noopener noreferrer"
                 class="poster-link"
             ><Icon icon="image" /></a>
+
+            <span
+                v-if="sfw && !playing"
+                class="warning"
+            >
+                <Icon icon="warning2" />NSFW
+            </span>
         </div>
 
         <template v-if="release.covers && release.covers.length > 0">
@@ -62,19 +69,32 @@
             v-for="photo in photos"
             :key="`banner-${photo.index}`"
             :href="`/media/${photo.path}`"
+            :class="{ sfw }"
+            class="item-link"
             target="_blank"
             rel="noopener noreferrer"
         >
             <img
-                :src="`/media/${photo.thumbnail}`"
+                :src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
                 :alt="`Photo ${photo.index + 1}`"
                 class="item"
             >
+
+            <span
+                v-if="sfw"
+                class="warning"
+            >
+                <Icon icon="warning2" />NSFW
+            </span>
         </a>
     </div>
 </template>
 
 <script>
+function sfw() {
+    return this.$store.state.ui.sfw;
+}
+
 function photos() {
     if (this.release.trailer || this.release.teaser) {
         // poster will be on trailer video
@@ -106,6 +126,7 @@ export default {
     },
     computed: {
         photos,
+        sfw,
     },
     methods: {
         scrollBanner,
@@ -130,17 +151,6 @@ export default {
     }
 }
 
-.trailer {
-    display: inline-block;
-    position: relative;
-    max-width: 100vw;
-}
-
-.trailer-video {
-    max-width: 100%;
-    object-fit: cover;
-}
-
 .poster-link {
     position: absolute;
     top: .5rem;
@@ -150,7 +160,8 @@ export default {
     .icon {
         width: 1.5rem;
         height: 1.5rem;
-        fill: var(--lighten);
+        fill: var(--lighten-strong);
+        filter: drop-shadow(0 0 1px var(--darken-weak));
     }
 
     &.playing {
@@ -162,16 +173,74 @@ export default {
         opacity: 1;
 
         .icon {
-            fill: var(--lighten-strong);
+            fill: var(--text-light);
         }
     }
 }
 
+.item-link,
+.trailer {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    .warning {
+        display: none;
+        width: 100%;
+        height: 100%;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        background: var(--darken-weak);
+        color: var(--text-light);
+        font-size: 1.2rem;
+        font-weight: bold;
+        text-shadow: 0 0 3px var(--shadow-strong);
+        pointer-events: none;
+        animation: alert .5s ease infinite .1s;
+
+        .icon {
+            display: block;
+            fill: var(--text-light);
+            width: 3rem;
+            height: 3rem;
+            margin: 0 0 .25rem 0;
+            animation: alert .5s ease infinite .1s;
+        }
+    }
+
+    &:hover .warning {
+        display: inline-flex;
+    }
+}
+
 .item {
     height: 18rem;
     vertical-align: middle;
 }
 
+.trailer {
+    max-width: 100vw;
+}
+
+.trailer-video {
+    max-width: 100%;
+    object-fit: cover;
+}
+
+@keyframes alert {
+    0% {
+        color: var(--text-light);
+        fill: var(--text-light);
+    }
+    50% {
+        color: var(--alert);
+        fill: var(--alert);
+    }
+}
+
 @media(max-width: $breakpoint2) {
     .trailer-video {
         object-fit: contain;