alphard/Bjornulf_custom_nodes
1
0
Fork 0
mirror of https://github.com/justUmen/Bjornulf_custom_nodes.git synced 2026-03-25 22:35:43 -03:00
Code Issues Packages Projects Releases Wiki Activity

0.77

Browse Source
This commit is contained in:
justumen
2025-03-19 17:36:25 +01:00
parent 44d69e8907
commit 39dfb0220a
76 changed files with 3207 additions and 955 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
web/js/video_preview.js
View File

@@ -1,12 +1,16 @@
import { api } from '../../../scripts/api.js';
import { app } from "../../../scripts/app.js";
function displayVideoPreview(component, filename, category, autoplay, mute) {
// Function to display the video preview
function displayVideoPreview(component, filename, category, autoplay, mute, loop) {
let videoWidget = component._videoWidget;
// Create the video widget if it doesn't exist
if (!videoWidget) {
// Create the widget if it doesn't exist
var container = document.createElement("div");
const container = document.createElement("div");
const currentNode = component;
// Add the DOM widget to the component
videoWidget = component.addDOMWidget("videopreview", "preview", container, {
serialize: false,
hideOnZoom: false,
@@ -17,73 +21,83 @@ function displayVideoPreview(component, filename, category, autoplay, mute) {
container.value = v;
},
});
// Define how the widget computes its size
videoWidget.computeSize = function(width) {
if (this.aspectRatio && !this.parentElement.hidden) {
let height = (currentNode.size[0] - 20) / this.aspectRatio + 10;
if (!(height > 0)) {
height = 0;
}
return [width, height];
return [width, height > 0 ? height : 0];
}
return [width, -4];
};
// Initialize widget properties
videoWidget.value = { hidden: false, paused: false, params: {} };
videoWidget.parentElement = document.createElement("div");
videoWidget.parentElement.className = "video_preview";
videoWidget.parentElement.style['width'] = "100%";
videoWidget.parentElement.style.width = "100%";
container.appendChild(videoWidget.parentElement);
// Create the video element
videoWidget.videoElement = document.createElement("video");
videoWidget.videoElement.controls = true;
videoWidget.videoElement.loop = false;
videoWidget.videoElement.muted = false;
videoWidget.videoElement.style['width'] = "100%";
videoWidget.videoElement.style.width = "100%";
// Update aspect ratio when metadata is loaded
videoWidget.videoElement.addEventListener("loadedmetadata", () => {
videoWidget.aspectRatio = videoWidget.videoElement.videoWidth / videoWidget.videoElement.videoHeight;
adjustSize(component);
});
// Hide the video on error
videoWidget.videoElement.addEventListener("error", () => {
videoWidget.parentElement.hidden = true;
adjustSize(component);
});
videoWidget.parentElement.hidden = videoWidget.value.hidden;
videoWidget.videoElement.autoplay = !videoWidget.value.paused && !videoWidget.value.hidden;
videoWidget.videoElement.hidden = false;
videoWidget.parentElement.appendChild(videoWidget.videoElement);
component._videoWidget = videoWidget; // Store the widget for future reference
component._videoWidget = videoWidget; // Store for reuse
}
// Update the video source
let params = {
// Set video source and properties
const params = {
"filename": filename,
"subfolder": category,
"type": "output",
"rand": Math.random().toString().slice(2, 12)
"rand": Math.random().toString().slice(2, 12) // Cache-busting random parameter
};
const urlParams = new URLSearchParams(params);
if(mute) videoWidget.videoElement.muted = true;
else videoWidget.videoElement.muted = false;
if(autoplay) videoWidget.videoElement.autoplay = !videoWidget.value.paused && !videoWidget.value.hidden;
else videoWidget.videoElement.autoplay = false;
// videoWidget.videoElement.src = `http://localhost:8188/api/view?${urlParams.toString()}`;
videoWidget.videoElement.src = `api/view?${urlParams.toString()}`;
adjustSize(component); // Adjust the component size
const urlParams = new URLSearchParams(params);
videoWidget.videoElement.src = `api/view?${urlParams.toString()}`;
videoWidget.videoElement.muted = mute;
videoWidget.videoElement.autoplay = autoplay && !videoWidget.value.paused && !videoWidget.value.hidden;
videoWidget.videoElement.loop = loop;
// Adjust the component size after setting the video
adjustSize(component);
}
// Function to adjust the component size
function adjustSize(component) {
component.setSize([component.size[0], component.computeSize([component.size[0], component.size[1]])[1]]);
const newSize = component.computeSize([component.size[0], component.size[1]]);
component.setSize([component.size[0], newSize[1]]);
component?.graph?.setDirtyCanvas(true);
}
// Register the extension
app.registerExtension({
name: "Bjornulf.VideoPreview",
async beforeRegisterNodeDef(nodeType, nodeData, appInstance) {
if (nodeData?.name == "Bjornulf_VideoPreview") {
nodeType.prototype.onExecuted = function (data) {
if (nodeData?.name === "Bjornulf_VideoPreview") {
nodeType.prototype.onExecuted = function(data) {
// Retrieve widget values with defaults
const autoplay = this.widgets.find(w => w.name === "autoplay")?.value ?? false;
const mute = this.widgets.find(w => w.name === "mute")?.value ?? true;
displayVideoPreview(this, data.video[0], data.video[1], autoplay, mute);
const loop = this.widgets.find(w => w.name === "loop")?.value ?? false;
// Display the video preview with the retrieved values
displayVideoPreview(this, data.video[0], data.video[1], autoplay, mute, loop);
};
}
}