From baaa7012492702bd10d60cc509988d16137fb0da Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Thu, 2 Apr 2020 02:02:03 +0200
Subject: [PATCH] Added SFW mode with NSFW warning to releases.

---
 assets/components/releases/banner.vue | 103 +++++++++++++++++++++-----
 assets/components/tile/release.vue    |  16 ++--
 assets/css/_theme.scss                |   3 +
 assets/img/warning.svg                |   7 ++
 assets/img/warning2.svg               |   5 ++
 assets/js/fragments.js                |  18 +++++
 6 files changed, 127 insertions(+), 25 deletions(-)
 create mode 100644 assets/img/warning.svg
 create mode 100644 assets/img/warning2.svg

diff --git a/assets/components/releases/banner.vue b/assets/components/releases/banner.vue
index bf187a11..3ff062c8 100644
--- a/assets/components/releases/banner.vue
+++ b/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;
diff --git a/assets/components/tile/release.vue b/assets/components/tile/release.vue
index bd7d11d0..62cdf8fa 100644
--- a/assets/components/tile/release.vue
+++ b/assets/components/tile/release.vue
@@ -69,7 +69,7 @@
             >
                 <img
                     v-if="release.poster"
-                    :src="`/${release.batch === 'dummy' ? 'img' : 'media'}/${release.poster.thumbnail}`"
+                    :src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
                     :alt="release.title"
                     class="thumbnail"
                 >
@@ -87,13 +87,6 @@
                     >
                 </span>
 
-                <img
-                    v-else-if="release.covers && release.covers.length > 0"
-                    :src="`/${release.batch === 'dummy' ? 'img' : 'media'}/${release.covers[0].thumbnail}`"
-                    :alt="release.title"
-                    class="thumbnail"
-                >
-
                 <div
                     v-else
                     :title="release.title"
@@ -156,6 +149,10 @@
 </template>
 
 <script>
+function sfw() {
+    return this.$store.state.ui.sfw;
+}
+
 export default {
     props: {
         release: {
@@ -176,6 +173,9 @@ export default {
             isUpcoming: this.isAfter(this.release.date, new Date()),
         };
     },
+    computed: {
+        sfw,
+    },
 };
 </script>
 
diff --git a/assets/css/_theme.scss b/assets/css/_theme.scss
index 3806357b..b4592055 100644
--- a/assets/css/_theme.scss
+++ b/assets/css/_theme.scss
@@ -55,6 +55,9 @@ $female: #f0a;
 
     --logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
     --logo-highlight: drop-shadow(0 0 1px $highlight);
+
+    --alert: #f00;
+    --warn: #fa0;
 }
 
 .light {
diff --git a/assets/img/warning.svg b/assets/img/warning.svg
new file mode 100644
index 00000000..421e17b2
--- /dev/null
+++ b/assets/img/warning.svg
@@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>warning</title>
+<path d="M8 1.45l6.705 13.363h-13.409l6.705-13.363zM8 0c-0.345 0-0.69 0.233-0.951 0.698l-6.829 13.611c-0.523 0.93-0.078 1.691 0.989 1.691h13.583c1.067 0 1.512-0.761 0.989-1.691h0l-6.829-13.611c-0.262-0.465-0.606-0.698-0.951-0.698v0z"></path>
+<path d="M9 13c0 0.552-0.448 1-1 1s-1-0.448-1-1c0-0.552 0.448-1 1-1s1 0.448 1 1z"></path>
+<path d="M8 11c-0.552 0-1-0.448-1-1v-3c0-0.552 0.448-1 1-1s1 0.448 1 1v3c0 0.552-0.448 1-1 1z"></path>
+</svg>
diff --git a/assets/img/warning2.svg b/assets/img/warning2.svg
new file mode 100644
index 00000000..da6e9b95
--- /dev/null
+++ b/assets/img/warning2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>warning2</title>
+<path d="M15.781 14.309v0l-6.829-13.611c-0.262-0.465-0.606-0.698-0.951-0.698s-0.69 0.233-0.951 0.698l-6.829 13.611c-0.523 0.93-0.078 1.691 0.989 1.691h13.583c1.067 0 1.512-0.761 0.989-1.691zM8 14c-0.552 0-1-0.448-1-1s0.448-1 1-1c0.552 0 1 0.448 1 1s-0.448 1-1 1zM9 10c0 0.552-0.448 1-1 1s-1-0.448-1-1v-3c0-0.552 0.448-1 1-1s1 0.448 1 1v3z"></path>
+</svg>
diff --git a/assets/js/fragments.js b/assets/js/fragments.js
index 79351efc..86f3f40c 100644
--- a/assets/js/fragments.js
+++ b/assets/js/fragments.js
@@ -80,6 +80,12 @@ const releasePosterFragment = `
             path
             thumbnail
             comment
+            sfw: sfwMedia {
+                id
+                thumbnail
+                path
+                comment
+            }
         }
     }
 `;
@@ -91,6 +97,12 @@ const releaseCoversFragment = `
             path
             thumbnail
             comment
+            sfw: sfwMedia {
+                id
+                thumbnail
+                path
+                comment
+            }
         }
     }
 `;
@@ -102,6 +114,12 @@ const releasePhotosFragment = `
             path
             thumbnail
             comment
+            sfw: sfwMedia {
+                id
+                thumbnail
+                path
+                comment
+            }
         }
     }
 `;