From 76cdc692a843afa643ecd18bb2c0da6ce0da56ef Mon Sep 17 00:00:00 2001 From: Jared Therriault Date: Tue, 30 Jun 2026 15:14:17 -0700 Subject: [PATCH] Unify knowledge of video extensions between py and js --- __init__.py | 5 ++++ .../ImageListChildElements/ExtraNetworks.js | 8 ++--- .../ImageListChildElements/ImageElements.js | 10 +++++-- web/js/common/Utilities.js | 29 +++++++++++++++++-- 4 files changed, 42 insertions(+), 10 deletions(-) diff --git a/__init__.py b/__init__.py index cadd38b..067946b 100644 --- a/__init__.py +++ b/__init__.py @@ -97,6 +97,11 @@ async def upload_image_wrapper(request): @server.PromptServer.instance.routes.delete("/jnodes_delete_item") async def delete_item_wrapper(request): return await delete_item(request) + +@server.PromptServer.instance.routes.get('/jnodes_get_browser_video_extensions') +def get_browser_video_extensions_wrapper(request): + from .py.utils import ACCEPTED_BROWSER_VIDEO_EXTENSIONS + return web.json_response({"success": True, "extensions": ACCEPTED_BROWSER_VIDEO_EXTENSIONS}) WEB_DIRECTORY = "./web" diff --git a/web/js/ImageDrawer/ImageListChildElements/ExtraNetworks.js b/web/js/ImageDrawer/ImageListChildElements/ExtraNetworks.js index 4b98028..9479aae 100644 --- a/web/js/ImageDrawer/ImageListChildElements/ExtraNetworks.js +++ b/web/js/ImageDrawer/ImageListChildElements/ExtraNetworks.js @@ -465,13 +465,13 @@ export async function createExtraNetworkCard(nameText, familiars, type, imageDra return; } - function updateBackgroundImageContainer() { + async function updateBackgroundImageContainer() { backgroundImageContainer.backgroundImage.style.display = "none"; backgroundImageContainer.backgroundVideo.style.display = "none"; let newHref = modelElement.fileInfo.imageHref = getHrefForFamiliarImage(backgroundImageContainer.lastViewedImageIndex); - let bIsVideoPreview = utilitiesInstance.isHrefVideo(newHref); + let bIsVideoPreview = await utilitiesInstance.isHrefVideo(newHref); if (bIsVideoPreview) { @@ -1073,9 +1073,9 @@ export async function createExtraNetworkCard(nameText, familiars, type, imageDra } backgroundImageContainer.initVideo(); - modelElement.forceLoad = function () { + modelElement.forceLoad = async function () { - if (utilitiesInstance.isHrefVideo(backgroundImageContainer.dataSrc)) { + if (await utilitiesInstance.isHrefVideo(backgroundImageContainer.dataSrc)) { backgroundImageContainer.backgroundVideo.forceLoad(); } else { backgroundImageContainer.backgroundImage.forceLoad(); diff --git a/web/js/ImageDrawer/ImageListChildElements/ImageElements.js b/web/js/ImageDrawer/ImageListChildElements/ImageElements.js index bf49a02..0bd2cf7 100644 --- a/web/js/ImageDrawer/ImageListChildElements/ImageElements.js +++ b/web/js/ImageDrawer/ImageListChildElements/ImageElements.js @@ -4,7 +4,7 @@ import { api } from "/scripts/api.js"; import { $el } from "/scripts/ui.js"; -import { utilitiesInstance } from "../../common/Utilities.js"; +import { utilitiesInstance, getBrowserVideoExtensions } from "../../common/Utilities.js"; import { ModalManager, ModalOptions } from "../../common/ModalManager.js"; @@ -29,7 +29,11 @@ export async function createImageElementFromFileInfo(fileInfo, imageDrawerInstan href += `t=${+new Date()}`; // Add Timestamp fileInfo.imageHref = href; - const bIsVideoFormat = fileInfo.file?.is_video || fileInfo.filename.endsWith(".mp4") || fileInfo.filename.endsWith(".webm"); // todo: fetch acceptable video types from python + + // Fetch acceptable video types from python + const browserVideoExtensions = await getBrowserVideoExtensions(); + const fileExtension = fileInfo.filename.split('.').pop().toLowerCase(); + const bIsVideoFormat = fileInfo.file?.is_video || browserVideoExtensions.includes(fileExtension); const imageElement = $el("div.imageElement", { @@ -176,7 +180,7 @@ export async function createImageElementFromFileInfo(fileInfo, imageDrawerInstan // Sorting meta information imageElement.filename = imageElement.friendlyName = fileInfo.filename; imageElement.fileType = imageElement.filename.split(".")[1]; - imageElement.file_age = fileInfo.file?.file_age || utilitiesInstance.getCurrentSecondsFromEpoch(); // todo: fix for feed images + imageElement.file_age = fileInfo.file?.file_age || utilitiesInstance.getCurrentSecondsFromEpoch(); imageElement.subdirectory = fileInfo.subdirectory || null; imageElement.path = fileInfo.subdirectory ? `${fileInfo.subdirectory}/${fileInfo.filename}` : fileInfo.filename; imageElement.displayData.FileSize = fileInfo.file?.file_size || -1; diff --git a/web/js/common/Utilities.js b/web/js/common/Utilities.js index bd6eea9..bf16d7a 100644 --- a/web/js/common/Utilities.js +++ b/web/js/common/Utilities.js @@ -5,6 +5,26 @@ import { $el } from "/scripts/ui.js"; import { api } from "/scripts/api.js"; import { app } from "/scripts/app.js"; +let cachedBrowserVideoExtensions = null; + +async function getBrowserVideoExtensions() { + if (cachedBrowserVideoExtensions) { + return cachedBrowserVideoExtensions; + } + + const response = await api.fetchApi('/jnodes_get_browser_video_extensions', { method: 'GET', cache: 'no-store' }); + const data = await response.json(); + + if (data.success && data.extensions) { + cachedBrowserVideoExtensions = data.extensions; + } else { + // Fallback to hardcoded values if API fails + cachedBrowserVideoExtensions = ["webm", "mp4", "ogg"]; + } + + return cachedBrowserVideoExtensions; +} + class JNodesUtilities { isElementInViewport(element) { @@ -36,11 +56,13 @@ class JNodesUtilities { return timeAsString; } - isHrefVideo(href) { + async isHrefVideo(href) { if (typeof(href) !== "string") { return false; } - return href.includes(".mp4") || href.includes(".webm"); + const browserVideoExtensions = await getBrowserVideoExtensions(); + const fileExtension = href.split('.').pop().toLowerCase(); + return browserVideoExtensions.includes(fileExtension); } getDarkColor() { @@ -975,4 +997,5 @@ class JNodesUtilities { } } -export const utilitiesInstance = new JNodesUtilities(); \ No newline at end of file +export const utilitiesInstance = new JNodesUtilities(); +export { getBrowserVideoExtensions }; \ No newline at end of file