[feature] Use gifv type for short soundless mp4 videos (#3182)

2 files changed, 35 insertions, 6 deletions

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{{
                     <i class="hide fa fa-fw fa-eye-slash" aria-hidden="true"></i>
                     <i class="show fa fa-fw fa-eye" aria-hidden="true"></i>
                 </span>
-                {{- 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 }}
             </summary>
-            {{- if eq .Type "video" }}
+            {{- if or (eq .Type "video") (eq .Type "gifv") }}
             <video
+                {{- if eq .Type "video" }}
                 preload="none"
-                class="plyr-video photoswipe-slide"
+                {{- else }}
+                preload="auto"
+                muted
+                {{- end }}
+                class="plyr-video photoswipe-slide{{- if eq .Type "gifv" }} gifv{{ end }}"
                 controls
+                playsinline
                 data-pswp-index="{{- $index -}}"
                 poster="{{- .PreviewURL -}}"
                 data-pswp-width="{{- $media.Meta.Small.Width -}}px"
@@ -128,6 +134,7 @@ media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{
                 preload="none"
                 class="plyr-video photoswipe-slide"
                 controls
+                playsinline
                 data-pswp-index="{{- $index -}}"
                 {{- if and $media.PreviewURL $media.Meta.Small.Width }}
                 poster="{{- .PreviewURL -}}"