mirror/blockbench
2
0
Fork 0
mirror of https://github.com/JannisX11/blockbench.git synced 2025-01-30 15:42:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Reference image video options and tweaks

Browse Source
This commit is contained in:
JannisX11 2024-04-18 18:12:17 +02:00
parent e72a406832
commit 6eeb073e9e
2 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
js/preview/reference_images.js
View File

@ -11,6 +11,7 @@ class ReferenceImage {
this.rotation = 0; this.rotation = 0;
this.opacity = 0; this.opacity = 0;
this.visibility = true; this.visibility = true;
this.sync_to_timeline = true;
this.clear_mode = false; this.clear_mode = false;
this.attached_side = 0; this.attached_side = 0;
this.source = ''; this.source = '';
@ -32,7 +33,6 @@ class ReferenceImage {
this.image_is_loaded = false; this.image_is_loaded = false;
this.auto_aspect_ratio = true; this.auto_aspect_ratio = true;
// todo: Add video properties: autoplay, animation sync
this.is_video = false; this.is_video = false;
if (data.source && ['mp4', 'wmv', 'mov'].includes(pathToExtension(data.source))) { if (data.source && ['mp4', 'wmv', 'mov'].includes(pathToExtension(data.source))) {
this.is_video = true; this.is_video = true;
@ -424,6 +424,20 @@ class ReferenceImage {
name: tl(name), name: tl(name),
node: node 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) => { 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}, 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}, 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}, 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}, clear_mode: {type: 'checkbox', label: 'reference_image.clear_mode', value: this.clear_mode},
}, },
onConfirm: (result) => { onConfirm: (result) => {
@ -655,6 +670,7 @@ class ReferenceImage {
rotation: result.rotation, rotation: result.rotation,
opacity: result.opacity / 100, opacity: result.opacity / 100,
visibility: result.visibility, visibility: result.visibility,
sync_to_timeline: result.sync_to_timeline,
clear_mode: result.clear_mode, clear_mode: result.clear_mode,
}); });
this.changeLayer(result.layer); this.changeLayer(result.layer);
@ -698,6 +714,16 @@ ReferenceImage.prototype.menu = new Menu([
ref.update().save(); 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', id: 'clear_mode',
name: 'reference_image.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', 'rotation');
new Property(ReferenceImage, 'number', 'opacity', {default: 1}); new Property(ReferenceImage, 'number', 'opacity', {default: 1});
new Property(ReferenceImage, 'boolean', 'visibility', {default: true}); 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, 'boolean', 'clear_mode');
new Property(ReferenceImage, 'string', 'attached_side', {default: 'north'}); new Property(ReferenceImage, 'string', 'attached_side', {default: 'north'});
new Property(ReferenceImage, 'string', 'source'); new Property(ReferenceImage, 'string', 'source');
@ -846,7 +873,7 @@ SharedActions.add('delete', {
Blockbench.on('display_animation_frame', () => { Blockbench.on('display_animation_frame', () => {
ReferenceImage.active.forEach(ref => { 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._loading = true;
ref.video.ontimeupdate = () => { ref.video.ontimeupdate = () => {
ref.video._loading = false; ref.video._loading = false;

1
lang/en.json
View File

@ -2118,6 +2118,7 @@
"reference_image.scope.project": "Just this project", "reference_image.scope.project": "Just this project",
"reference_image.scope.global": "All projects", "reference_image.scope.global": "All projects",
"reference_image.enabled_modes": "Enabled in Modes", "reference_image.enabled_modes": "Enabled in Modes",
"reference_image.sync_to_timeline": "Sync To Timeline",
"reference_image.toggle_playback": "Play/Pause", "reference_image.toggle_playback": "Play/Pause",
"codec.common.encoding": "Encoding", "codec.common.encoding": "Encoding",