refactor(kampos): media utils

wix-playground · Aug 21, 2024 · e709516 · e709516
1 parent 30039ea
commit e709516
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 74 deletions.
diff --git a/kampos/src/core/kampos-effects.ts b/kampos/src/core/kampos-effects.ts
@@ -1,5 +1,34 @@
-import { resolveMediaFromPath } from "./media-resolution";
+import { loadImage, loadVideo } from "../utils/media-utils";
 
+const mediaResolutionCache = new Map();
+async function resolveMediaFromPath(path: string) {
+    // Check if the path has already been resolved
+    if (mediaResolutionCache.has(path)) {
+        return mediaResolutionCache.get(path);
+    }
+
+    const extension = path.split(".").pop().toLowerCase();
+    let resolvedValue;
+
+    try {
+        if (["png", "jpg", "jpeg", "gif"].includes(extension)) {
+            resolvedValue = await loadImage(path);
+        } else if (["mp4", "webm", "ogg"].includes(extension)) {
+            resolvedValue = await loadVideo(path);
+        } else {
+            // Fallback: Return the path as a string if it doesn't match expected extensions
+            resolvedValue = path;
+        }
+
+        // Store the resolved value in the cache
+        mediaResolutionCache.set(path, resolvedValue);
+        return resolvedValue;
+    } catch (error) {
+        console.error(error);
+        // In case of an error, return the path itself as a fallback
+        return path;
+    }
+}
 
 function hexToNormalizedRGBA(hex: string): number[] {
     hex = hex.replace(/^#/, "");
@@ -40,26 +69,28 @@ export async function resolveConfig(config: any) {
 
     return Object.fromEntries(entries);
 }
+
 const EffectsPropsHasToBeOnInit: Record<string, string[]> = {
     alphaMask: ['isLuminance'],
+    blend: ['image'],
 };
 
-export function splitEffectConfigToInitialsAndSetters(effectConfig: any) {
+export function splitEffectConfigToInitialsAndSetters(effectName: string, effectConfig: any) {
     const initials: any = {};
     const setters: any = {};
+    const propsToInitialize = EffectsPropsHasToBeOnInit[effectName] || [];
+
     Object.entries(effectConfig).forEach(([key, value]) => {
-        if (EffectsPropsHasToBeOnInit[key]) {
-            EffectsPropsHasToBeOnInit[key].forEach((prop) => {
-                if (typeof value[prop] !== 'undefined') {
-                    initials[prop] = value[prop];
-                }
-            });
+        if (propsToInitialize.includes(key)) {
+            initials[key] = value;
         } else {
             setters[key] = value;
         }
     });
-    return {initials, setters} as const;
+
+    return { initials, setters } as const;
 }
+
 export const onEffectApplied = (willBeAppliedEffects: any, effectName: string) => {
     const onEffectAppliedMapper = {
         alphaMask: () => {

diff --git a/kampos/src/core/main.ts b/kampos/src/core/main.ts
@@ -2,7 +2,7 @@ import { Kampos, effects } from "kampos";
 import { getVideoElement } from "../constants";
 import { initPane } from "./pane";
 import { getQueryValue, onStateChange, setState } from "../utils/state";
-import { resolveVideo } from "../utils/video-utils";
+import { resolveVideo } from "../utils/media-utils";
 import { onEffectApplied, resolveConfig, splitEffectConfigToInitialsAndSetters } from "./kampos-effects";
 
 let willBeAppliedEffects: Record<string, any[]> = {};
@@ -24,7 +24,8 @@ async function initKampos() {
     for (const effectName of getActiveEffects()) {
         const effectConfig = await resolveConfig(window.state.effects[effectName]);
         console.log(`[config] ${effectName}:`, effectConfig);
-        const { initials, setters } = splitEffectConfigToInitialsAndSetters(effectConfig);
+        const { initials, setters } = splitEffectConfigToInitialsAndSetters(effectName, effectConfig);
+        console.log('split',effectName, initials, setters);
         willBeAppliedEffects[effectName] = effects[effectName](initials);
         Object.entries(setters).forEach(([key, value]) => {
             willBeAppliedEffects[effectName][key] = value;

diff --git a/kampos/src/core/media-resolution.ts b/kampos/src/core/media-resolution.ts
diff --git a/kampos/src/core/pane.ts b/kampos/src/core/pane.ts
@@ -9,7 +9,7 @@ import { Pane } from "tweakpane";
 import * as CamerakitPlugin from "@tweakpane/plugin-camerakit";
 import { setState } from "../utils/state";
 import debounce from "debounce";
-import { setVideoSource } from "../utils/video-utils";
+import { setVideoSource } from "../utils/media-utils";
 
 const pane = new Pane();
 window.pane = pane;

diff --git a/kampos/src/utils/video-utils.ts → kampos/src/utils/media-utils.ts b/kampos/src/utils/video-utils.ts → kampos/src/utils/media-utils.ts
@@ -1,3 +1,5 @@
+import { getSecondVideoElement } from "../constants";
+
 export const setVideoSource = (video: HTMLVideoElement, videoFileName: string) => {
     if (video.src.endsWith(videoFileName.replace('./', '/'))) return;
     console.log("Setting video source to:", videoFileName);
@@ -29,3 +31,34 @@ export function resolveVideo(video: HTMLVideoElement, resolve: (video: HTMLVideo
         });
     }
 }
+
+
+
+export function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+
+        img.onload = function () {
+            console.log("loaded");
+            resolve(this);
+        };
+
+        img.onerror = function () {
+            reject(new Error(`Failed to load image: ${src}`));
+        };
+
+        img.src = src;
+    });
+}
+
+export function loadVideo(src) {
+    return new Promise((resolve, reject) => {
+        console.log("Starting video load for:", src);
+        const video = getSecondVideoElement();
+        video.src = src;
+        video.load();
+        video.play();
+        resolveVideo(video, resolve, reject);
+    });
+}