refactor(kampos): use constant for effect names

wix-playground · Aug 22, 2024 · 3142d84 · 3142d84
1 parent d3da525
commit 3142d84
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 37 deletions.
diff --git a/kampos/src/constants.ts b/kampos/src/constants.ts
@@ -1,50 +1,52 @@
 const ASSETS_PREFIX = "./assets";
 
-export const DEFAULT_VIDEO_SOURCE_OPTION = 'Cloudy Night';
+export const DEFAULT_VIDEO_SOURCE_OPTION = "Cloudy Night";
 export const VIDEO_SOURCE_OPTIONS = {
-    'tunnel futuristic': ASSETS_PREFIX+'/tunnel-futuristic.mp4',
-    'neon terrain': ASSETS_PREFIX+'/neon-terrain.mp4',
-    'cubes': ASSETS_PREFIX+'/cubes.mp4',
-    'tunnel in': ASSETS_PREFIX+'/tunnel-in.mp4',
-    'dunets': ASSETS_PREFIX+'/dunets.mp4',
-    'cloudy night': ASSETS_PREFIX+'/cloudy-night.mp4',
-    'drop water': ASSETS_PREFIX+'/drop-water.mp4',
-    'man on beach': ASSETS_PREFIX+'/man-on-beach.mp4',
-    'starry night': ASSETS_PREFIX+'/starry-night.mp4',
-    'shell beach': ASSETS_PREFIX+'/shell-beach.mp4',
-    'wheat field': ASSETS_PREFIX+'/wheat-field.mp4',
-    'canvas': 'canvas',
-}
+    "tunnel futuristic": ASSETS_PREFIX + "/tunnel-futuristic.mp4",
+    "neon terrain": ASSETS_PREFIX + "/neon-terrain.mp4",
+    cubes: ASSETS_PREFIX + "/cubes.mp4",
+    "tunnel in": ASSETS_PREFIX + "/tunnel-in.mp4",
+    dunets: ASSETS_PREFIX + "/dunets.mp4",
+    "cloudy night": ASSETS_PREFIX + "/cloudy-night.mp4",
+    "drop water": ASSETS_PREFIX + "/drop-water.mp4",
+    "man on beach": ASSETS_PREFIX + "/man-on-beach.mp4",
+    "starry night": ASSETS_PREFIX + "/starry-night.mp4",
+    "shell beach": ASSETS_PREFIX + "/shell-beach.mp4",
+    "wheat field": ASSETS_PREFIX + "/wheat-field.mp4",
+    canvas: "canvas",
+};
 
 const VIDEO_MASK_SOURCE_OPTIONS = {
-    'none': 'none',
+    none: "none",
     ...VIDEO_SOURCE_OPTIONS,
-}
+};
 
 export const DEFAULT_MASK_VIDEO_SOURCE_OPTION = VIDEO_MASK_SOURCE_OPTIONS.none;
 
 export const getVideoElement = () => document.querySelector("#video") as HTMLVideoElement;
 export const getSecondVideoElement = () => document.querySelector("#video2") as HTMLVideoElement;
 
 export const IMAGE_OPTIONS = {
-    'none': 'none',
-    'Cloud': ASSETS_PREFIX+"/disp-cloud.png",
-    'Snow': ASSETS_PREFIX+"/disp-snow.jpg",
-    'Liquid': ASSETS_PREFIX+"/disp-liquid.jpg",
-    'Triangle': ASSETS_PREFIX+"/disp-tri.jpg",
-}
+    none: "none",
+    Cloud: ASSETS_PREFIX + "/disp-cloud.png",
+    Snow: ASSETS_PREFIX + "/disp-snow.jpg",
+    Liquid: ASSETS_PREFIX + "/disp-liquid.jpg",
+    Triangle: ASSETS_PREFIX + "/disp-tri.jpg",
+};
 
 function addCategoryToMediaName(value: Record<string, string>, text) {
-    return Object.entries(value).filter(([key, value]) => value !== "none").reduce((result, [key, value]) => {
-        result[`${text} ${key}`] = value;
-        return result;
-    }, {} as Record<string, string>);
+    return Object.entries(value)
+        .filter(([key, value]) => value !== "none")
+        .reduce((result, [key, value]) => {
+            result[`${text} ${key}`] = value;
+            return result;
+        }, {} as Record<string, string>);
 }
 export const VIDEO_AND_IMAGE_OPTIONS = {
-    'none': 'none',
-    ...addCategoryToMediaName(IMAGE_OPTIONS, '[image]'),
-    ...addCategoryToMediaName(VIDEO_SOURCE_OPTIONS, '[video]'),
-}
+    none: "none",
+    ...addCategoryToMediaName(IMAGE_OPTIONS, "[image]"),
+    ...addCategoryToMediaName(VIDEO_SOURCE_OPTIONS, "[video]"),
+};
 
 export const DEFAULT_STATE = {
     video: DEFAULT_VIDEO_SOURCE_OPTION,
@@ -113,7 +115,13 @@ export const DEFAULT_STATE = {
     },
 };
 
-
 export const EFFECT_NAMES = {
-    'turbulence': 'turbulence',
+    hueSaturation: "hueSaturation",
+    brightnessContrast: "brightnessContrast",
+    blend: "blend",
+    duotone: "duotone",
+    alphaMask: "alphaMask",
+    displacement: "displacement",
+    turbulence: "turbulence",
+    kaleidoscope: "kaleidoscope",
 } as const;
diff --git a/kampos/src/core/kampos-effects.test.ts b/kampos/src/core/kampos-effects.test.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { resolveConfig } from './kampos-effects';
 import * as mediaUtils from '../utils/media-utils';
+import { EFFECT_NAMES } from '../constants';
 
 // Mock the module that contains loadImage and loadVideo
 vi.mock('../utils/media-utils', () => ({
@@ -135,7 +136,6 @@ it('should resolve paths that start with canvas as the kamposCanvas instance', a
   });
 
 
-const displacementEffectName = 'displacement';
 const unknownEffectName = 'unknownEffect';
 
 describe('resolveConfig with effect config resolver logic', () => {
@@ -147,7 +147,7 @@ describe('resolveConfig with effect config resolver logic', () => {
         backgroundImage: '/path/to/image.png',
       };
 
-      const resolvedConfig = await resolveConfig(displacementEffectName, config);
+      const resolvedConfig = await resolveConfig(EFFECT_NAMES.displacement, config);
 
       expect(resolvedConfig.scale).toEqual({
         x: 2,
@@ -167,7 +167,7 @@ describe('resolveConfig with effect config resolver logic', () => {
           wrap: wrapType,
         };
 
-        const resolvedConfig = await resolveConfig(displacementEffectName, config);
+        const resolvedConfig = await resolveConfig(EFFECT_NAMES.displacement, config);
 
         expect(resolvedConfig.wrap).toContain(expectedContain);
       });

diff --git a/kampos/src/core/kampos-effects.ts b/kampos/src/core/kampos-effects.ts
@@ -1,5 +1,6 @@
 import { effects, noise } from "kampos";
 import { loadImage, loadVideo } from "../utils/media-utils";
+import { EFFECT_NAMES } from "../constants";
 
 const mediaResolutionCache = new Map();
 async function resolveMediaFromPath(path: string) {
@@ -56,15 +57,15 @@ function hexToNormalizedRGBA(hex: string): number[] {
 }
 
 const effectConfigResolvers ={
-    'displacement': ({scaleX, scaleY, wrap, ...effectConfig}) => ({
+    [EFFECT_NAMES.displacement]: ({scaleX, scaleY, wrap, ...effectConfig}) => ({
         ...effectConfig,
         wrap: effects.displacement[wrap],
         scale: {
             x: scaleX,
             y: scaleY,
         },
     }),
-    'turbulence': ({noise: noiseParam, frequencyX, frequencyY, output, ...effectConfig}) => ({
+    [EFFECT_NAMES.turbulence]: ({noise: noiseParam, frequencyX, frequencyY, output, ...effectConfig}) => ({
         ...effectConfig,
         noise: noise[noiseParam],
         output: effects.turbulence[output],