From e72a40683218b060dd8393f0ef05473584b133d6 Mon Sep 17 00:00:00 2001
From: JannisX11 <jannis4236@gmail.com>
Date: Thu, 18 Apr 2024 17:56:21 +0200
Subject: [PATCH] Add play/pause button for reference videos Fix reference
 videos not syncing with timeline when taking too long to load

---
 js/preview/reference_images.js | 28 +++++++++++++++++++++-------
 lang/en.json                   |  1 +
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/js/preview/reference_images.js b/js/preview/reference_images.js
index 620e3fbc..d482d35e 100644
--- a/js/preview/reference_images.js
+++ b/js/preview/reference_images.js
@@ -672,8 +672,22 @@ class ReferenceImage {
 	static image_extensions = ['png', 'jpg', 'jpeg', 'bmp', 'tiff', 'tif', 'gif'];
 	static video_extensions = ['mp4', 'wmv', 'mov'];
 }
-ReferenceImage.supported_extensions = ['png', 'jpg', 'jpeg', 'webp', 'bmp', 'tiff', 'tif', 'gif'];
 ReferenceImage.prototype.menu = new Menu([
+	new MenuSeparator('media_controls'),
+	{
+		id: 'toggle_playback',
+		name: 'reference_image.toggle_playback',
+		condition: (ref) => ref.is_video,
+		icon: (ref) => ref.video.paused ? 'play_arrow' : 'pause',
+		click(ref) {
+			if (ref.video.paused) {
+				ref.video._loading = false;
+				ref.video.play();
+			} else {
+				ref.video.pause();
+			}
+		}
+	},
 	new MenuSeparator('settings'),
 	{
 		id: 'visibility',
@@ -830,18 +844,18 @@ SharedActions.add('delete', {
 	}
 })
 
-let reference_image_playback_cooldown;
 Blockbench.on('display_animation_frame', () => {
-	if (reference_image_playback_cooldown) return;
 	ReferenceImage.active.forEach(ref => {
-		if (ref.is_video && ref.visibility) {
+		if (ref.is_video && ref.visibility && !ref.video._loading) {
+			ref.video._loading = true;
+			ref.video.ontimeupdate = () => {
+				ref.video._loading = false;
+			}
 			ref.video.currentTime = Timeline.time;
+
 			if (!ref.video.paused) ref.video.pause();
 		}
 	})
-	reference_image_playback_cooldown = setTimeout(() => {
-		reference_image_playback_cooldown = null;
-	}, 30)
 })
 
 const ReferenceImageMode = {
diff --git a/lang/en.json b/lang/en.json
index 3185f8bc..8089b605 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -2118,6 +2118,7 @@
 	"reference_image.scope.project": "Just this project",
 	"reference_image.scope.global": "All projects",
 	"reference_image.enabled_modes": "Enabled in Modes",
+	"reference_image.toggle_playback": "Play/Pause",
 
 	"codec.common.encoding": "Encoding",
 	"codec.common.armature": "Export Groups as Armature",