Blur explicit videos + GIF auto-play option

pkg/controller/account/settings.go

@@ -124,12 +124,17 @@ func Settings() http.HandlerFunc {
 				var (
 					explicit     = r.PostFormValue("explicit") == "true"
 					blurExplicit = r.PostFormValue("blur_explicit")
+					autoplayGif  = r.PostFormValue("autoplay_gif")
 				)
 
 				user.Explicit = explicit
 
 				// Set profile field prefs.
 				user.SetProfileField("blur_explicit", blurExplicit)
+				if autoplayGif != "true" {
+					autoplayGif = "false"
+				}
+				user.SetProfileField("autoplay_gif", autoplayGif)
 
 				if err := user.Save(); err != nil {
 					session.FlashError(w, r, "Failed to save user to database: %s", err)

web/static/js/bulma.js

@@ -137,5 +137,13 @@ document.addEventListener('DOMContentLoaded', () => {
             e.stopPropagation();
         }
     });
+
+    // Video tag: autoplay is disabled when blurred, onClick doesn't fire,
+    // set the handler for onPlay.
+    node.addEventListener("play", e => {
+        if (node.classList.contains("blurred-explicit")) {
+            node.classList.remove("blurred-explicit");
+        }
+    });
   });
 });

web/templates/account/dashboard.html

@@ -491,10 +491,13 @@
 
                                             <!-- Attached photo? -->
                                             {{if $Body.PhotoID}}
-                                            <div class="column is-one-quarter">
+                                            <div class="column is-one-quarter is-clipped">
                                                 <!-- GIF video? -->
                                                 {{if HasSuffix $Body.Photo.Filename ".mp4"}}
-                                                <video autoplay loop controls>
+                                                <video loop controls
+                                                    {{if BlurExplicit $Body.Photo}}class="blurred-explicit"
+                                                    {{else if (not (eq ($Root.CurrentUser.GetProfileField "autoplay_gif") "false"))}}autoplay
+                                                    {{end}}>
                                                     <source src="{{PhotoURL $Body.Photo.Filename}}" type="video/mp4">
                                                 </video>
                                                 <div>
@@ -504,7 +507,7 @@
                                                 </div>
                                                 {{else}}
                                                 <a href="/photo/view?id={{$Body.Photo.ID}}">
-                                                    <img src="{{PhotoURL $Body.Photo.Filename}}">
+                                                    <img src="{{PhotoURL $Body.Photo.Filename}}"{{if BlurExplicit $Body.Photo}} class="blurred-explicit"{{end}}>
                                                 </a>
                                                 {{end}}
 

web/templates/account/settings.html

@@ -347,6 +347,20 @@
                             </p>
                         </div>
 
+                        <div class="field">
+                            <label class="label">Display Settings</label>
+                            <label class="checkbox">
+                                <input type="checkbox"
+                                    name="autoplay_gif"
+                                    value="true"
+                                    {{if not (eq (.CurrentUser.GetProfileField "autoplay_gif") "false")}}checked{{end}}>
+                                Automatically play animated GIFs
+                            </label>
+                            <p class="help">
+                                Uncheck this box to disable auto-play on GIFs.
+                            </p>
+                        </div>
+
                         <div class="field">
                             <button type="submit" class="button is-primary">
                                 <i class="fa fa-save mr-2"></i> Save Website Preferences

web/templates/forum/new_post.html

@@ -271,90 +271,90 @@
             </div>
         </div>
     </div>
-
-    <!-- Script for photo upload on photo boards -->
-    {{if .Forum.PermitPhotos}}
-    <script type="text/javascript">
-        window.addEventListener("DOMContentLoaded", (event) => {
-            let $file = document.querySelector("#file"),
-                $fileName = document.querySelector("#fileName"),
-                $hiddenPreview = document.querySelector("#imagePreview"),
-                $previewImage = document.querySelector("#previewImage"),
-                $dropArea = document.querySelector("#drop-modal"),
-                $removePhoto = document.querySelector("#removePhoto"),
-                $photoIntent = document.querySelector("#photoIntent"),
-                $body = document.querySelector("body");
-
-            // Common handler for file selection (file input or drag/drop)
-            let onFile = (file) => {
-                $photoIntent.value = "{{if .CommentPhoto}}replace{{else}}upload{{end}}";
-                $fileName.innerHTML = file.name;
-
-                // Read the image to show the preview on-page.
-                const reader = new FileReader();
-                reader.addEventListener("load", () => {
-                    const uploadedImg = reader.result;
-                    $hiddenPreview.style.display = "block";
-
-                    $previewImage.src = uploadedImg;
-                    $previewImage.style.display = "block";
-                    $previewImage.style.maxWidth = "100%";
-                    $previewImage.style.height = "auto";
-                });
-                reader.readAsDataURL(file);
-            };
-
-            // Set up drag/drop file upload events.
-            $body.addEventListener("dragenter", function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                $dropArea.classList.add("is-active");
-            });
-            $body.addEventListener("dragover", function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                $dropArea.classList.add("is-active");
-            });
-            $body.addEventListener("dragleave", function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                $dropArea.classList.remove("is-active");
-            });
-            $body.addEventListener("drop", function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                $dropArea.classList.remove("is-active");
-
-                // Grab the file.
-                let dt = e.dataTransfer;
-                let file = dt.files[0];
-
-                // Set the file on the input field too.
-                $file.files = dt.files;
-
-                onFile(file);
-            });
-
-            // File input handler.
-            $file.addEventListener("change", function() {
-                let file = this.files[0];
-                onFile(file);
-            });
-
-            // Removal button.
-            $removePhoto.addEventListener("click", function() {
-                $photoIntent.value = "remove";
-                $fileName.innerHTML = "Select a file";
-                $file.value = '';
-                $hiddenPreview.style.display = 'none';
-            });
-        });
-    </script>
-    {{end}}
-
 </div>
 {{end}}
 {{define "scripts"}}
+
+<!-- Script for photo upload on photo boards -->
+{{if .Forum.PermitPhotos}}
+<script type="text/javascript">
+    window.addEventListener("DOMContentLoaded", (event) => {
+        let $file = document.querySelector("#file"),
+            $fileName = document.querySelector("#fileName"),
+            $hiddenPreview = document.querySelector("#imagePreview"),
+            $previewImage = document.querySelector("#previewImage"),
+            $dropArea = document.querySelector("#drop-modal"),
+            $removePhoto = document.querySelector("#removePhoto"),
+            $photoIntent = document.querySelector("#photoIntent"),
+            $body = document.querySelector("body");
+
+        // Common handler for file selection (file input or drag/drop)
+        let onFile = (file) => {
+            $photoIntent.value = "{{if .CommentPhoto}}replace{{else}}upload{{end}}";
+            $fileName.innerHTML = file.name;
+
+            // Read the image to show the preview on-page.
+            const reader = new FileReader();
+            reader.addEventListener("load", () => {
+                const uploadedImg = reader.result;
+                $hiddenPreview.style.display = "block";
+
+                $previewImage.src = uploadedImg;
+                $previewImage.style.display = "block";
+                $previewImage.style.maxWidth = "100%";
+                $previewImage.style.height = "auto";
+            });
+            reader.readAsDataURL(file);
+        };
+
+        // Set up drag/drop file upload events.
+        $body.addEventListener("dragenter", function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            $dropArea.classList.add("is-active");
+        });
+        $body.addEventListener("dragover", function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            $dropArea.classList.add("is-active");
+        });
+        $body.addEventListener("dragleave", function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            $dropArea.classList.remove("is-active");
+        });
+        $body.addEventListener("drop", function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            $dropArea.classList.remove("is-active");
+
+            // Grab the file.
+            let dt = e.dataTransfer;
+            let file = dt.files[0];
+
+            // Set the file on the input field too.
+            $file.files = dt.files;
+
+            onFile(file);
+        });
+
+        // File input handler.
+        $file.addEventListener("change", function() {
+            let file = this.files[0];
+            onFile(file);
+        });
+
+        // Removal button.
+        $removePhoto.addEventListener("click", function() {
+            $photoIntent.value = "remove";
+            $fileName.innerHTML = "Select a file";
+            $file.value = '';
+            $hiddenPreview.style.display = 'none';
+        });
+    });
+</script>
+{{end}}
+
 <script type="text/javascript">
     const { createApp } = Vue;
 
@@ -413,4 +413,4 @@
     });
     app.mount("#app");
 </script>
-{{end}}
+{{end}}

web/templates/photo/gallery.html

@@ -403,7 +403,10 @@
                     <div class="card-image has-text-centered is-clipped">
                         <!-- GIF video? -->
                         {{if HasSuffix .Filename ".mp4"}}
-                        <video autoplay loop controls>
+                        <video loop controls
+                            {{if BlurExplicit .}}class="blurred-explicit"
+                            {{else if (not (eq ($Root.CurrentUser.GetProfileField "autoplay_gif") "false"))}}autoplay
+                            {{end}}>
                             <source src="{{PhotoURL .Filename}}" type="video/mp4">
                         </video>
                         {{else}}
@@ -509,7 +512,10 @@
                             <div class="card-image has-text-centered is-clipped">
                                 <!-- GIF video? -->
                                 {{if HasSuffix .Filename ".mp4"}}
-                                <video autoplay loop controls>
+                                <video loop controls
+                                    {{if BlurExplicit .}}class="blurred-explicit"
+                                    {{else if (not (eq ($Root.CurrentUser.GetProfileField "autoplay_gif") "false"))}}autoplay
+                                    {{end}}>
                                     <source src="{{PhotoURL .Filename}}" type="video/mp4">
                                 </video>
                                 {{else}}

web/templates/photo/permalink.html

@@ -71,7 +71,10 @@
             <div class="card-image has-text-centered is-clipped">
                 <!-- GIF video? -->
                 {{if HasSuffix .Photo.Filename ".mp4"}}
-                <video autoplay loop controls>
+                <video loop controls
+                    {{if BlurExplicit .Photo}}class="blurred-explicit"
+                    {{else if (not (eq ($Root.CurrentUser.GetProfileField "autoplay_gif") "false"))}}autoplay
+                    {{end}}>
                     <source src="{{PhotoURL .Photo.Filename}}" type="video/mp4">
                 </video>
                 {{else}}