Unify knowledge of video extensions between py and js

__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"
 

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();

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;

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();
+export const utilitiesInstance = new JNodesUtilities();
+export { getBrowserVideoExtensions };