visualfries 0.1.0

package/dist/components/hooks/PixiSplitScreenDisplayObjectHook.js

@@ -0,0 +1,210 @@
+import * as PIXI from 'pixi.js-legacy';
+import { LayoutSplitEffectShape, VideoComponentShape } from '../..';
+import { z } from 'zod';
+export class PixiSplitScreenDisplayObjectHook {
+    types = ['update', 'destroy', 'refresh'];
+    #handlers = {
+        update: this.#handleUpdate.bind(this),
+        destroy: this.#handleDestroy.bind(this),
+        refresh: this.#handleRefresh.bind(this),
+        'refresh:config': this.#handleRefresh.bind(this),
+        'refresh:metadata': this.#handleRefresh.bind(this)
+    };
+    priority = 1;
+    #context;
+    #pixiTexture;
+    #displayObject;
+    #bgCanvas = undefined;
+    componentElement;
+    sceneState;
+    constructor(cradle) {
+        this.sceneState = cradle.stateManager;
+    }
+    get sceneWidth() {
+        return this.#context.sceneState.width;
+    }
+    get sceneHeight() {
+        return this.#context.sceneState.height;
+    }
+    initBlurBackground(strength = 50) {
+        const sanitizedStrength = this.#sanitizeBlurStrength(strength);
+        const backgroundSprite = new PIXI.Sprite(this.#pixiTexture);
+        this.setupBackground(backgroundSprite, sanitizedStrength);
+        this.#displayObject.addChild(backgroundSprite);
+    }
+    setupBackground(backgroundSprite, strength = 50) {
+        const sanitizedStrength = this.#sanitizeBlurStrength(strength);
+        const sceneRatio = this.sceneWidth / this.sceneHeight;
+        const videoRatio = this.#pixiTexture.width / this.#pixiTexture.height;
+        let scale;
+        if (sceneRatio > videoRatio) {
+            // Scene is wider than video
+            scale = this.sceneWidth / this.#pixiTexture.width;
+        }
+        else {
+            // Scene is taller than video
+            scale = this.sceneHeight / this.#pixiTexture.height;
+        }
+        backgroundSprite.width = this.#pixiTexture.width * scale;
+        backgroundSprite.height = this.#pixiTexture.height * scale;
+        // Center the background sprite
+        backgroundSprite.x = (this.sceneWidth - backgroundSprite.width) / 2;
+        backgroundSprite.y = (this.sceneHeight - backgroundSprite.height) / 2;
+        if (this.sceneState.environment === 'server') {
+            // Create a temporary canvas for blur effect
+            const bgCanvas = document.createElement('canvas');
+            bgCanvas.width = backgroundSprite.width;
+            bgCanvas.height = backgroundSprite.height;
+            this.#bgCanvas = bgCanvas;
+            this.#drawBlurredBackground(sanitizedStrength);
+            const blurredTexture = PIXI.Texture.from(bgCanvas);
+            backgroundSprite.texture = blurredTexture;
+        }
+        else {
+            // Create new PIXI texture from blurred canvas
+            const blurFilter = new PIXI.BlurFilter(sanitizedStrength, 50, 1, 7);
+            backgroundSprite.filters = [blurFilter];
+        }
+    }
+    #drawBlurredBackground(strength = 50) {
+        if (!this.#bgCanvas) {
+            return;
+        }
+        // Validate and sanitize strength parameter
+        const sanitizedStrength = this.#sanitizeBlurStrength(strength);
+        const ctx = this.#bgCanvas.getContext('2d');
+        // Use sanitized value to prevent XSS
+        ctx.filter = `blur(${sanitizedStrength}px)`;
+        // Get the source element (video/image)
+        const sourceElement = this.#context.getResource('videoElement');
+        if (!sourceElement) {
+            throw new Error('videoElement not found in resources.');
+        }
+        // const sourceElement = this.#pixiTexture.baseTexture.resource.source as
+        // 	| HTMLVideoElement
+        // 	| HTMLImageElement;
+        // Draw the original texture with blur
+        ctx.drawImage(sourceElement, 0, 0, this.#bgCanvas.width, this.#bgCanvas.height);
+    }
+    /**
+     * Sanitizes blur strength parameter to prevent XSS and ensure valid numeric values
+     * @param strength - The blur strength value to sanitize
+     * @returns A safe numeric value between 0 and 100
+     */
+    #sanitizeBlurStrength(strength) {
+        // Convert to number if it's a string
+        let numericStrength;
+        if (typeof strength === 'string') {
+            // Remove any non-numeric characters except decimal point and minus sign
+            const cleaned = strength.replace(/[^0-9.-]/g, '');
+            numericStrength = parseInt(cleaned);
+        }
+        else if (typeof strength === 'number') {
+            numericStrength = strength;
+        }
+        else {
+            // Default to 50 for any other type
+            numericStrength = 50;
+        }
+        // Check if the result is a valid number
+        if (isNaN(numericStrength) || !isFinite(numericStrength)) {
+            numericStrength = 50;
+        }
+        // Clamp the value to a reasonable range (0-100)
+        return Math.max(0, Math.min(100, numericStrength));
+    }
+    initSplitScreen(splitInfo) {
+        const containers = [];
+        splitInfo.chunks?.forEach((chunk) => {
+            // toto nam urobi ohraniceny ramec v ktorom sa ukaze sprite
+            const maskGraphics = new PIXI.Graphics();
+            maskGraphics.beginFill(0xffffff, 0.5);
+            maskGraphics.drawRect(0, 0, chunk.group.width, chunk.group.height);
+            maskGraphics.endFill();
+            // sprite teraz musime napozicovat do ohraniceneho rameca tak aby bolo cele prekryte a len to co chce user vidiet
+            const splitSprite = new PIXI.Sprite(this.#pixiTexture);
+            splitSprite.x = chunk.component.x;
+            splitSprite.y = chunk.component.y;
+            splitSprite.width = chunk.component.width;
+            splitSprite.height = chunk.component.height;
+            const container = new PIXI.Container();
+            container.x = chunk.group.x;
+            container.y = chunk.group.y;
+            container.mask = maskGraphics;
+            container.addChild(splitSprite);
+            container.addChild(maskGraphics);
+            containers.push(container);
+        });
+        this.#displayObject.addChild(...containers);
+    }
+    initMainSprite() {
+        const appearance = this.#context.data.appearance;
+        const mainSprite = new PIXI.Sprite(this.#pixiTexture);
+        mainSprite.width = appearance.width;
+        mainSprite.height = appearance.height;
+        mainSprite.x = appearance.x;
+        mainSprite.y = appearance.y;
+        this.#displayObject.addChild(mainSprite);
+    }
+    #initDisplayObject() {
+        if (this.#context.data.effects && !this.#context.data.effects.enabled) {
+            this.initMainSprite();
+            return;
+        }
+        const hasBlur = Object.keys(this.#context.data.effects.map).includes('fillBackgroundBlur');
+        if (hasBlur) {
+            const blurEffect = this.#context.data.effects.map.fillBackgroundBlur;
+            const strength = blurEffect?.blurAmount || 50;
+            this.initBlurBackground(strength);
+        }
+        const splitScreen = Object.values(this.#context.data.effects.map).find((key) => key.type === 'layoutSplit');
+        const splitScreenInfo = LayoutSplitEffectShape.safeParse(splitScreen);
+        if (splitScreenInfo.success) {
+            this.initSplitScreen(splitScreenInfo.data);
+            return;
+        }
+        this.initMainSprite();
+    }
+    async #handleUpdate() {
+        const isActive = this.#context.isActive;
+        if (isActive) {
+            this.#drawBlurredBackground();
+        }
+        if (this.#displayObject) {
+            if (this.#displayObject.visible != isActive) {
+                this.#displayObject.visible = isActive;
+            }
+            return;
+        }
+        const texture = this.#context.getResource('pixiTexture');
+        if (!texture) {
+            throw new Error('pixiTexture not found in resources.');
+        }
+        this.#pixiTexture = texture;
+        this.#displayObject = new PIXI.Container();
+        this.#initDisplayObject();
+        this.#context.setResource('pixiRenderObject', this.#displayObject);
+    }
+    async #handleRefresh() {
+        await this.#handleDestroy();
+        this.#displayObject.removeChildren();
+        this.#initDisplayObject();
+        await this.#handleUpdate();
+    }
+    async #handleDestroy() {
+        // remove event listeners from video
+        this.#bgCanvas = undefined;
+    }
+    async handle(type, context) {
+        this.#context = context;
+        const data = this.#context.contextData;
+        if (!data || data.type !== 'VIDEO') {
+            return;
+        }
+        this.componentElement = data;
+        const handler = this.#handlers[type];
+        if (handler) {
+            await handler();
+        }
+    }
+}

package/dist/components/hooks/PixiTextureHook.d.ts

@@ -0,0 +1,7 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+export declare class PixiTextureHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/PixiTextureHook.js

@@ -0,0 +1,29 @@
+import * as PIXI from 'pixi.js-legacy';
+// import { setPlacement } from '../../utils/utils.js';
+export class PixiTextureHook {
+    types = ['update'];
+    priority = 1;
+    #context;
+    #texture;
+    async #handleUpdate() {
+        const resource = this.#context.getResource('pixiResource');
+        if (!resource) {
+            throw new Error('pixiResource not found in resources.');
+        }
+        if (this.#texture && this.#context.getResource('pixiTexture') === this.#texture) {
+            return;
+        }
+        const texture = PIXI.Texture.from(resource);
+        if (texture) {
+            this.#context.setResource('pixiTexture', texture);
+            this.#texture = texture;
+        }
+        else {
+            throw new Error('Failed to create texture from resource.');
+        }
+    }
+    async handle(type, context) {
+        this.#context = context;
+        return await this.#handleUpdate();
+    }
+}

package/dist/components/hooks/PixiVideoTextureHook.d.ts

@@ -0,0 +1,10 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+import { VideoComponentShape } from '../..';
+import { z } from 'zod';
+export declare class PixiVideoTextureHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    componentElement: z.infer<typeof VideoComponentShape>;
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/PixiVideoTextureHook.js

@@ -0,0 +1,35 @@
+import * as PIXI from 'pixi.js-legacy';
+import { VideoComponentShape } from '../..';
+import { z } from 'zod';
+export class PixiVideoTextureHook {
+    types = ['update'];
+    priority = 1;
+    #context;
+    #videoTexture;
+    componentElement;
+    async #handleUpdate() {
+        if (this.#videoTexture) {
+            return;
+        }
+        const media = this.#context.getResource('videoElement');
+        if (!media) {
+            throw new Error('videoElement not found in resources.');
+        }
+        const res = new PIXI.VideoResource(media, {
+            autoPlay: false,
+            updateFPS: 30
+        });
+        const baseTexture = new PIXI.BaseTexture(res);
+        this.#videoTexture = new PIXI.Texture(baseTexture);
+        this.#context.setResource('pixiTexture', this.#videoTexture);
+    }
+    async handle(type, context) {
+        this.#context = context;
+        const data = this.#context.contextData;
+        if (!data || data.type !== 'VIDEO') {
+            return;
+        }
+        this.componentElement = data;
+        return await this.#handleUpdate();
+    }
+}

package/dist/components/hooks/SubtitlesHook.d.ts

@@ -0,0 +1,88 @@
+import type { HookType, IComponentContext, IComponentHook } from '../..';
+import type { StateManager } from '../../managers/StateManager.svelte.ts';
+import type { SubtitlesManager } from '../../managers/SubtitlesManager.svelte.ts';
+import type { EventManager } from '../../managers/EventManager.ts';
+export declare class SubtitlesHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    private subtitlesManager;
+    private state;
+    constructor(cradle: {
+        subtitlesManager: SubtitlesManager;
+        stateManager: StateManager;
+        eventManager: EventManager;
+    });
+    get activeSubtitle(): {
+        id: string;
+        text: string;
+        start_at: number;
+        end_at: number;
+        visible?: boolean | undefined;
+        color?: string | {
+            type: "linear" | "radial";
+            colors: string[];
+            stops?: number[] | undefined;
+            angle?: number | undefined;
+            position?: string | undefined;
+            shape?: "ellipse" | "circle" | undefined;
+        } | undefined;
+        background?: string | {
+            type: "linear" | "radial";
+            colors: string[];
+            stops?: number[] | undefined;
+            angle?: number | undefined;
+            position?: string | undefined;
+            shape?: "ellipse" | "circle" | undefined;
+        } | undefined;
+        words?: [string, number, number, ...(import("zod").objectOutputType<{
+            s: import("zod").ZodOptional<import("zod").ZodNumber>;
+            si: import("zod").ZodOptional<import("zod").ZodNumber>;
+            c: import("zod").ZodOptional<import("zod").ZodUnion<[import("zod").ZodEffects<import("zod").ZodString, string, string>, import("zod").ZodObject<{
+                type: import("zod").ZodEnum<["linear", "radial"]>;
+                colors: import("zod").ZodArray<import("zod").ZodEffects<import("zod").ZodString, string, string>, "many">;
+                stops: import("zod").ZodOptional<import("zod").ZodArray<import("zod").ZodNumber, "many">>;
+                angle: import("zod").ZodOptional<import("zod").ZodNumber>;
+                position: import("zod").ZodOptional<import("zod").ZodString>;
+                shape: import("zod").ZodOptional<import("zod").ZodEnum<["ellipse", "circle"]>>;
+            }, "strip", import("zod").ZodTypeAny, {
+                type: "linear" | "radial";
+                colors: string[];
+                stops?: number[] | undefined;
+                angle?: number | undefined;
+                position?: string | undefined;
+                shape?: "ellipse" | "circle" | undefined;
+            }, {
+                type: "linear" | "radial";
+                colors: string[];
+                stops?: number[] | undefined;
+                angle?: number | undefined;
+                position?: string | undefined;
+                shape?: "ellipse" | "circle" | undefined;
+            }>]>>;
+            e: import("zod").ZodOptional<import("zod").ZodString>;
+            w: import("zod").ZodOptional<import("zod").ZodString>;
+            f: import("zod").ZodOptional<import("zod").ZodString>;
+        }, import("zod").ZodAny, "strip"> | null | undefined)[]][] | undefined;
+        emoji?: string | undefined;
+        enlarge?: number | undefined;
+    } | {
+        id: string;
+        text: string;
+        start_at: number;
+        end_at: number;
+        visible?: boolean | undefined;
+        color?: string | undefined;
+        background?: string | undefined;
+        words?: {
+            id: string;
+            text: string;
+            start_at: number;
+            end_at: number;
+            position?: number | undefined;
+        }[] | undefined;
+        emoji?: string | undefined;
+        enlarge?: number | undefined;
+    } | undefined;
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/SubtitlesHook.js

@@ -0,0 +1,199 @@
+import { gsap } from 'gsap';
+import { get } from 'lodash-es';
+export class SubtitlesHook {
+    #handlers = {
+        setup: this.#handleSetup.bind(this),
+        destroy: this.#handleDestroy.bind(this),
+        refresh: this.#handleRefresh.bind(this),
+        update: this.#handleUpdate.bind(this),
+        'refresh:content': this.#handleRefresh.bind(this),
+        'refresh:config': this.#handleRefresh.bind(this)
+    };
+    types = ['setup', 'update', 'destroy', 'refresh'];
+    priority = 1;
+    #context;
+    #initialized = false;
+    #subtitles = [];
+    #currentSubtitle = undefined;
+    #currentId = undefined;
+    #refreshed = false;
+    subtitlesManager;
+    state;
+    constructor(cradle) {
+        this.subtitlesManager = cradle.subtitlesManager;
+        this.state = cradle.stateManager;
+        cradle.eventManager.addEventListener('subtitlessettingschange', () => {
+            this.#refreshed = true;
+        });
+    }
+    #removePunctuation(text) {
+        if (this.subtitlesManager.settings.punctuation) {
+            // punctuation is enabled
+            return text;
+        }
+        // Remove common punctuation marks and chinese punctuation while preserving spaces and word structure
+        const regex = /[,.!，。！，]/g;
+        return text.replace(regex, '').trim();
+    }
+    async #handleSetup() {
+        if (this.#initialized) {
+            return;
+        }
+        this.#initialized = true;
+        const subtitles = this.subtitlesManager.data;
+        // Only SubtitleComponent has .source, so check type
+        const data = this.#context.data;
+        const source = data.source;
+        const assetId = data.source && typeof data.source.assetId === 'string' ? data.source.assetId : '';
+        if (!assetId) {
+            this.#buildFakeContext();
+            return;
+        }
+        const componentSubtitles = subtitles[assetId];
+        if (!componentSubtitles || Object.keys(componentSubtitles).length === 0) {
+            this.#buildFakeContext();
+            return;
+        }
+        // Extract subtitle array for the specific language or default
+        const assetSubtitles = this.subtitlesManager.getAssetSubtitles(assetId);
+        const languageCode = source?.languageCode || 'default';
+        const subtitleArray = assetSubtitles[languageCode] || Object.values(assetSubtitles)[0] || [];
+        this.#subtitles = subtitleArray;
+        // const el = this.#buildHtmlElement();
+        // this.#context.setResource('wrapperHtmlEl', el);
+        if (this.activeSubtitle === undefined) {
+            this.#buildFakeContext();
+        }
+    }
+    get activeSubtitle() {
+        if (this.#currentSubtitle) {
+            if (this.state.currentTime >= this.#currentSubtitle.start_at &&
+                this.state.currentTime <= this.#currentSubtitle.end_at) {
+                return this.#currentSubtitle.visible ? this.#currentSubtitle : undefined;
+            }
+        }
+        const subtitle = this.#subtitles.find((sub) => this.state.currentTime >= sub.start_at &&
+            this.state.currentTime <= sub.end_at &&
+            sub.visible !== false);
+        return subtitle;
+    }
+    #buildFakeContext() {
+        let background = this.#context.data.appearance.background;
+        if (typeof background === 'string') {
+            background = null;
+        }
+        const appearance = {
+            x: this.#context.data.appearance.x,
+            y: this.#context.data.appearance.y,
+            width: this.#context.data.appearance.width,
+            height: this.#context.data.appearance.height,
+            opacity: this.#context.data.appearance.opacity,
+            rotation: this.#context.data.appearance.rotation,
+            scaleX: this.#context.data.appearance.scaleX,
+            scaleY: this.#context.data.appearance.scaleY,
+            background,
+            backgroundAlwaysVisible: get(this.#context.data.appearance, 'backgroundAlwaysVisible', false)
+        };
+        const updateData = {
+            ...this.#context.data,
+            timeline: { startAt: -2, endAt: -1 },
+            appearance,
+            type: 'TEXT',
+            text: '',
+            animations: {
+                enabled: false,
+                list: []
+            }
+        };
+        this.#context.updateContextData(updateData);
+    }
+    async #handleUpdate() {
+        const contextId = this.activeSubtitle ? this.activeSubtitle.id : undefined;
+        if (contextId === this.#currentId && !this.#refreshed) {
+            return;
+        }
+        if ((this.activeSubtitle && this.activeSubtitle.id !== this.#context.contextData.id) ||
+            (this.activeSubtitle && this.#refreshed)) {
+            this.#currentId = this.activeSubtitle.id;
+            const startTime = this.activeSubtitle?.start_at ?? 0;
+            const endTime = this.activeSubtitle?.end_at ?? 0;
+            const duration = endTime - startTime;
+            const animationData = {};
+            const wordTimings = [];
+            this.activeSubtitle?.words?.forEach((word) => {
+                wordTimings.push(gsap.utils.clamp(0, duration, word[1] - startTime)); // timings is relative to the start of the subtitle
+            });
+            // reorder wordTimings by start_at
+            wordTimings.sort((a, b) => a - b);
+            animationData.wordStartTimes = wordTimings;
+            const wordUnhighlightTimes = [...wordTimings].slice(1);
+            if (wordUnhighlightTimes.length > 0) {
+                animationData.wordUnhighlightTimes = wordUnhighlightTimes;
+            }
+            animationData.lineStartTimes = [0, 1];
+            animationData.lineUnhighlightTimes = [1];
+            this.#context.setResource('animationData', animationData);
+            // we need to rebuild subtitle component as text component
+            const currentSize = get(this.#context.data, 'appearance.text.fontSize.value', get(this.#context.data, 'appearance.text.fontSize', 50));
+            const colorOverride = this.activeSubtitle.color ? { color: this.activeSubtitle.color } : {};
+            const visibleOverride = 'visible' in this.activeSubtitle ? { visible: this.activeSubtitle.visible } : {};
+            const fontSizeOverride = 'enlarge' in this.activeSubtitle && currentSize
+                ? {
+                    fontSize: {
+                        value: currentSize * (this.activeSubtitle.enlarge / 100),
+                        unit: this.#context.data.appearance.text?.fontSize?.unit
+                    }
+                }
+                : {};
+            const subtitleContextData = {
+                ...this.#context.data,
+                id: this.activeSubtitle.id,
+                type: 'TEXT',
+                text: this.#removePunctuation(this.activeSubtitle.text || ''),
+                timeline: {
+                    startAt: this.activeSubtitle.start_at,
+                    endAt: this.activeSubtitle.end_at
+                },
+                appearance: {
+                    ...this.#context.data.appearance,
+                    text: {
+                        ...this.#context.data.appearance.text,
+                        ...colorOverride,
+                        ...fontSizeOverride
+                    }
+                },
+                ...visibleOverride
+            };
+            this.#context.updateContextData(subtitleContextData);
+            if (this.#refreshed) {
+                this.#refreshed = false;
+            }
+        }
+        if (!this.activeSubtitle) {
+            this.#buildFakeContext();
+        }
+    }
+    async #handleRefresh() {
+        await this.#handleDestroy();
+        await this.#handleSetup();
+        this.#refreshed = true;
+    }
+    async #handleDestroy() {
+        const el = this.#context.getResource('wrapperHtmlEl');
+        if (el) {
+            el.remove();
+            this.#context.setResource('wrapperHtmlEl', undefined);
+        }
+        this.#subtitles = [];
+        this.#currentSubtitle = undefined;
+        this.#currentId = undefined;
+        this.#initialized = false;
+    }
+    async handle(type, context) {
+        this.#context = context;
+        const handler = this.#handlers[type];
+        if (handler) {
+            await handler();
+        }
+    }
+}

package/dist/components/hooks/VerifyGifHook.d.ts

@@ -0,0 +1,7 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+export declare class VerifyGifHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/VerifyGifHook.js

@@ -0,0 +1,27 @@
+import { GifComponentShape } from '../..';
+export class VerifyGifHook {
+    types = ['setup', 'refresh'];
+    priority = 1;
+    #context;
+    async #handleSetup() {
+        const data = GifComponentShape.safeParse(this.#context.contextData);
+        if (!data.success) {
+            console.error('GIF Compononent verify failed: ' + data.error.message);
+            this.#context.disabled = true;
+            return;
+        }
+        this.#context.setResource('gifShape', data.data);
+    }
+    async #handleRefresh() {
+        await this.#handleSetup();
+    }
+    async handle(type, context) {
+        this.#context = context;
+        if (type === 'setup') {
+            return await this.#handleSetup();
+        }
+        else if (type === 'refresh') {
+            return await this.#handleRefresh();
+        }
+    }
+}

package/dist/components/hooks/VerifyImageHook.d.ts

@@ -0,0 +1,7 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+export declare class VerifyImageHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/VerifyImageHook.js

@@ -0,0 +1,27 @@
+import { ImageComponentShape } from '../..';
+export class VerifyImageHook {
+    types = ['setup', 'refresh'];
+    priority = 1;
+    #context;
+    async #handleSetup() {
+        const data = ImageComponentShape.safeParse(this.#context.contextData);
+        if (!data.success) {
+            console.error('Image Compononent verify failed: ' + data.error.message);
+            this.#context.disabled = true;
+            return;
+        }
+        this.#context.setResource('imageShape', data.data);
+    }
+    async #handleRefresh() {
+        await this.#handleSetup();
+    }
+    async handle(type, context) {
+        this.#context = context;
+        if (type === 'setup') {
+            return await this.#handleSetup();
+        }
+        else if (type === 'refresh') {
+            return await this.#handleRefresh();
+        }
+    }
+}

package/dist/components/hooks/VerifyMediaHook.d.ts

@@ -0,0 +1,7 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+export declare class VerifyMediaHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}