nonshy/website
nonshy/website
1
0
Fork 0
Code Issues 20 Pull Requests 1 Packages Projects Releases Wiki Activity

Blur explicit videos + GIF auto-play option

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pkg/controller/account/settings.go
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)

8
web/static/js/bulma.js
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");
}
});
});
});

9
web/templates/account/dashboard.html
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}}

14
web/templates/account/settings.html
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

164
web/templates/forum/new_post.html
View File

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

10
web/templates/photo/gallery.html
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}}

5
web/templates/photo/permalink.html
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}}