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,10 +271,13 @@
             </div>
         </div>
     </div>
+</div>
+{{end}}
+{{define "scripts"}}
 
-    <!-- Script for photo upload on photo boards -->
+<!-- Script for photo upload on photo boards -->
-    {{if .Forum.PermitPhotos}}
+{{if .Forum.PermitPhotos}}
-    <script type="text/javascript">
+<script type="text/javascript">
     window.addEventListener("DOMContentLoaded", (event) => {
         let $file = document.querySelector("#file"),
             $fileName = document.querySelector("#fileName"),
@@ -349,12 +352,9 @@
             $hiddenPreview.style.display = 'none';
         });
     });
-    </script>
+</script>
-    {{end}}
-
-</div>
 {{end}}
-{{define "scripts"}}
+
 <script type="text/javascript">
     const { createApp } = Vue;
 

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}}