Blur explicit videos + GIF auto-play option

This commit is contained in:
Noah Petherbridge 2023-09-24 11:41:19 -07:00
parent 3bc678185e
commit a856b9d01b
7 changed files with 127 additions and 88 deletions

View File

@ -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)

View File

@ -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");
}
});
});
});

View File

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

View File

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

View File

@ -271,6 +271,9 @@
</div>
</div>
</div>
</div>
{{end}}
{{define "scripts"}}
<!-- Script for photo upload on photo boards -->
{{if .Forum.PermitPhotos}}
@ -352,9 +355,6 @@
</script>
{{end}}
</div>
{{end}}
{{define "scripts"}}
<script type="text/javascript">
const { createApp } = Vue;

View File

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

View File

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