From b19cfee7aefbc42bdba8f45d5fb99feb2c2385fe Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Thu, 8 Aug 2024 10:12:16 +0200
Subject: [PATCH] [feature] Use gifv type for short soundless mp4 videos
(#3182)
---
internal/gtsmodel/mediaattachment.go | 3 +++
internal/media/ffmpeg.go | 10 +++++++++-
internal/media/processingmedia.go | 3 ++-
web/source/frontend/index.js | 28 +++++++++++++++++++++++++---
web/template/status_attachments.tmpl | 13 ++++++++++---
5 files changed, 49 insertions(+), 8 deletions(-)
diff --git a/internal/gtsmodel/mediaattachment.go b/internal/gtsmodel/mediaattachment.go
index eb792ae3b..f4bfb5929 100644
--- a/internal/gtsmodel/mediaattachment.go
+++ b/internal/gtsmodel/mediaattachment.go
@@ -91,6 +91,7 @@ const (
FileTypeImage FileType = 1 // FileTypeImage is for jpegs, pngs, and standard gifs
FileTypeAudio FileType = 2 // FileTypeAudio is for audio-only files (no video)
FileTypeVideo FileType = 3 // FileTypeVideo is for files with audio + visual
+ FileTypeGifv FileType = 4 // FileTypeGifv is for short video-only files (20s or less, mp4, no audio).
)
// String returns a stringified, frontend API compatible form of FileType.
@@ -104,6 +105,8 @@ func (t FileType) String() string {
return "audio"
case FileTypeVideo:
return "video"
+ case FileTypeGifv:
+ return "gifv"
default:
panic("invalid filetype")
}
diff --git a/internal/media/ffmpeg.go b/internal/media/ffmpeg.go
index 72ee1bc33..eb6dd9263 100644
--- a/internal/media/ffmpeg.go
+++ b/internal/media/ffmpeg.go
@@ -305,7 +305,15 @@ func (res *result) GetFileType() (gtsmodel.FileType, string) {
case "mov,mp4,m4a,3gp,3g2,mj2":
switch {
case len(res.video) > 0:
- return gtsmodel.FileTypeVideo, "mp4"
+ if len(res.audio) == 0 &&
+ res.duration <= 30 {
+ // Short, soundless
+ // video file aka gifv.
+ return gtsmodel.FileTypeGifv, "mp4"
+ } else {
+ // Video file (with or without audio).
+ return gtsmodel.FileTypeVideo, "mp4"
+ }
case len(res.audio) > 0 &&
res.audio[0].codec == "aac":
// m4a only supports [aac] audio.
diff --git a/internal/media/processingmedia.go b/internal/media/processingmedia.go
index 504cda11e..1d286bda7 100644
--- a/internal/media/processingmedia.go
+++ b/internal/media/processingmedia.go
@@ -202,7 +202,8 @@ func (p *ProcessingMedia) store(ctx context.Context) error {
switch p.media.Type {
case gtsmodel.FileTypeImage,
- gtsmodel.FileTypeVideo:
+ gtsmodel.FileTypeVideo,
+ gtsmodel.FileTypeGifv:
// Attempt to clean as metadata from file as possible.
if err := clearMetadata(ctx, temppath); err != nil {
return gtserror.Newf("error cleaning metadata: %w", err)
diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js
index 74cb28460..b88c64680 100644
--- a/web/source/frontend/index.js
+++ b/web/source/frontend/index.js
@@ -26,6 +26,8 @@ const Prism = require("./prism.js");
Prism.manual = true;
Prism.highlightAll();
+const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+
let [_, _user, type, id] = window.location.pathname.split("/");
if (type == "statuses") {
let firstStatus = document.getElementsByClassName("thread")[0].children[0];
@@ -49,9 +51,12 @@ new PhotoswipeCaptionPlugin(lightbox, {
lightbox.addFilter('itemData', (item) => {
const el = item.element;
- if (el && el.classList.contains("plyr-video")) {
+ if (
+ el &&
+ el.classList.contains("plyr-video") &&
+ el._plyrContainer !== undefined
+ ) {
const parentNode = el._plyrContainer.parentNode;
-
return {
alt: el.getAttribute("alt"),
_video: {
@@ -118,13 +123,14 @@ dynamicSpoiler("text-spoiler", (spoiler) => {
dynamicSpoiler("media-spoiler", (spoiler) => {
const eye = spoiler.querySelector(".eye.button");
const video = spoiler.querySelector(".plyr-video");
+ const loopingAuto = !reduceMotion.matches && video != null && video.classList.contains("gifv");
return () => {
if (spoiler.open) {
eye.setAttribute("aria-label", "Hide media");
} else {
eye.setAttribute("aria-label", "Show media");
- if (video) {
+ if (video && !loopingAuto) {
video.pause();
}
}
@@ -132,6 +138,22 @@ dynamicSpoiler("media-spoiler", (spoiler) => {
});
Array.from(document.getElementsByClassName("plyr-video")).forEach((video) => {
+ const loopingAuto = !reduceMotion.matches && video.classList.contains("gifv");
+
+ if (loopingAuto) {
+ // If we're able to play this as a
+ // looping gifv, then do so, else fall
+ // back to user-controllable video player.
+ video.draggable = false;
+ video.autoplay = true;
+ video.loop = true;
+ video.classList.remove("photoswipe-slide");
+ video.classList.remove("plry-video");
+ video.load();
+ video.play();
+ return;
+ }
+
let player = new Plyr(video, {
title: video.title,
settings: ["loop"],
diff --git a/web/template/status_attachments.tmpl b/web/template/status_attachments.tmpl
index 8e05aafd8..ee564d934 100644
--- a/web/template/status_attachments.tmpl
+++ b/web/template/status_attachments.tmpl
@@ -99,7 +99,7 @@ media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{
- {{- if eq .Type "video" }}
+ {{- if or (eq .Type "video") (eq .Type "gifv") }}
{{- include "videoPreview" $media | indent 4 }}
{{- else if eq .Type "image" }}
{{- include "imagePreview" $media | indent 4 }}
@@ -107,11 +107,17 @@ media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{
{{- include "audioPreview" $media | indent 4 }}
{{- end }}
- {{- if eq .Type "video" }}
+ {{- if or (eq .Type "video") (eq .Type "gifv") }}