From 6eeb073e9e4f117b7078eacdc843c783d3e7f60c Mon Sep 17 00:00:00 2001
From: JannisX11 <jannis4236@gmail.com>
Date: Thu, 18 Apr 2024 18:12:17 +0200
Subject: [PATCH] Reference image video options and tweaks

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

diff --git a/js/preview/reference_images.js b/js/preview/reference_images.js
index d482d35e..a5f1c180 100644
--- a/js/preview/reference_images.js
+++ b/js/preview/reference_images.js
@@ -11,6 +11,7 @@ class ReferenceImage {
 		this.rotation = 0;
 		this.opacity = 0;
 		this.visibility = true;
+		this.sync_to_timeline = true;
 		this.clear_mode = false;
 		this.attached_side = 0;
 		this.source = '';
@@ -32,7 +33,6 @@ class ReferenceImage {
 		this.image_is_loaded = false;
 		this.auto_aspect_ratio = true;
 
-		// todo: Add video properties: autoplay, animation sync
 		this.is_video = false;
 		if (data.source && ['mp4', 'wmv', 'mov'].includes(pathToExtension(data.source))) {
 			this.is_video = true;
@@ -424,6 +424,20 @@ class ReferenceImage {
 				name: tl(name),
 				node: node
 			})
+			return node;
+		}
+		
+		if (this.is_video) {
+			console.log(this.video, this.video.paused)
+			let toggle = addButton('toggle_playback', 'reference_image.toggle_playback', this.video.paused ? 'play_arrow' : 'pause', () => {
+				if (this.video.paused) {
+					this.video._loading = false;
+					this.video.play();
+				} else {
+					this.video.pause();
+				}
+				toggle.querySelector('.icon').replaceWith(Blockbench.getIconNode(this.video.paused ? 'play_arrow' : 'pause'))
+			});
 		}
 
 		addButton('layer', 'reference_image.layer', 'flip_to_front', (event) => {
@@ -643,6 +657,7 @@ class ReferenceImage {
 				rotation: {type: 'number', label: 'reference_image.rotation', value: this.rotation},
 				opacity: {type: 'range', label: 'reference_image.opacity', editable_range_label: true, value: this.opacity * 100, min: 0, max: 100, step: 1},
 				visibility: {type: 'checkbox', label: 'reference_image.visibility', value: this.visibility},
+				sync_to_timeline: {type: 'checkbox', label: 'reference_image.sync_to_timeline', value: this.sync_to_timeline, condition: this.is_video && Format.animation_mode},
 				clear_mode: {type: 'checkbox', label: 'reference_image.clear_mode', value: this.clear_mode},
 			},
 			onConfirm: (result) => {
@@ -655,6 +670,7 @@ class ReferenceImage {
 					rotation: result.rotation,
 					opacity: result.opacity / 100,
 					visibility: result.visibility,
+					sync_to_timeline: result.sync_to_timeline,
 					clear_mode: result.clear_mode,
 				});
 				this.changeLayer(result.layer);
@@ -698,6 +714,16 @@ ReferenceImage.prototype.menu = new Menu([
 			ref.update().save();
 		}
 	},
+	{
+		id: 'sync_to_timeline',
+		name: 'reference_image.sync_to_timeline',
+		condition: () => Format.animation_mode,
+		icon: (ref) => ref.sync_to_timeline,
+		click(ref) {
+			ref.sync_to_timeline = !ref.sync_to_timeline;
+			ref.update().save();
+		}
+	},
 	{
 		id: 'clear_mode',
 		name: 'reference_image.clear_mode',
@@ -802,6 +828,7 @@ new Property(ReferenceImage, 'boolean', 'flip_y');
 new Property(ReferenceImage, 'number', 'rotation');
 new Property(ReferenceImage, 'number', 'opacity', {default: 1});
 new Property(ReferenceImage, 'boolean', 'visibility', {default: true});
+new Property(ReferenceImage, 'boolean', 'sync_to_timeline', {default: true});
 new Property(ReferenceImage, 'boolean', 'clear_mode');
 new Property(ReferenceImage, 'string', 'attached_side', {default: 'north'});
 new Property(ReferenceImage, 'string', 'source');
@@ -846,7 +873,7 @@ SharedActions.add('delete', {
 
 Blockbench.on('display_animation_frame', () => {
 	ReferenceImage.active.forEach(ref => {
-		if (ref.is_video && ref.visibility && !ref.video._loading) {
+		if (ref.is_video && ref.visibility && ref.sync_to_timeline && !ref.video._loading) {
 			ref.video._loading = true;
 			ref.video.ontimeupdate = () => {
 				ref.video._loading = false;
diff --git a/lang/en.json b/lang/en.json
index 8089b605..1e726fbf 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.sync_to_timeline": "Sync To Timeline",
 	"reference_image.toggle_playback": "Play/Pause",
 
 	"codec.common.encoding": "Encoding",