From c555f1eaebff90749bdc543592cfa80a060b29e2 Mon Sep 17 00:00:00 2001 From: cashmere Date: Sun, 9 Aug 2026 02:37:37 +0200 Subject: feat: lens effects tab, standalone motion effects, clip/asset rename, preview popout - New Lens category in the assets panel: Blur, Motion Blur, Zoom In/Out, Pan x4, Shake, Pulse, Spin, Custom Zoom. EffectDefinition gains a category field; tabs with an empty category are hidden, and the properties-panel 'Open effects' button opens the first non-empty one. - Motion effects work standalone: dropping them on the timeline creates an effect-track element that animates (scale/translate/rotate) every track below it, computed purely in the TS frame descriptor - no wasm changes, identical in preview and export. supportsStandalone removed. - Motion Blur: directional gaussian smear (amount + angle) reusing the existing WGSL shader with arbitrary u_direction. - Custom Zoom: start/end scale params (keyframable clip-level). - MotionOffset gains optional rotate, accumulated clip-level and applied to standalone layer quads via rotationDegrees. - Rename clips (timeline context menu) and media assets (media panel context menu) via a shared RenameDialog; asset rename persists through storageService with rollback on error. - Preview pops out into a Document Picture-in-Picture window and docks back; button hidden where the API is unsupported. - Export keeps running when the export popover is closed; only the explicit Cancel button aborts. - Captions and Adjustment tabs removed from the assets panel. --- .../src/components/editor/panels/assets/tabbar.tsx | 23 +++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) (limited to 'apps/web/src/components/editor/panels/assets/tabbar.tsx') diff --git a/apps/web/src/components/editor/panels/assets/tabbar.tsx b/apps/web/src/components/editor/panels/assets/tabbar.tsx index b468b5bb..9b029e3d 100644 --- a/apps/web/src/components/editor/panels/assets/tabbar.tsx +++ b/apps/web/src/components/editor/panels/assets/tabbar.tsx @@ -14,13 +14,22 @@ import { useAssetsPanelStore, } from "@/components/editor/panels/assets/assets-panel-store"; import { FEATURES } from "@/features"; +import { effectsRegistry } from "@/effects"; -const VISIBLE_TAB_KEYS = TAB_KEYS.filter((tabKey) => { - if (tabKey === "sounds") return FEATURES.sounds; - if (tabKey === "stickers") return FEATURES.stickers; - if (tabKey === "effects") return FEATURES.effects; - return true; -}); +function getVisibleTabKeys() { + const effectCategories = new Set( + effectsRegistry.getAll().map((definition) => definition.category), + ); + return TAB_KEYS.filter((tabKey) => { + if (tabKey === "sounds") return FEATURES.sounds; + if (tabKey === "stickers") return FEATURES.stickers; + if (tabKey === "effects") + return FEATURES.effects && effectCategories.has("effect"); + if (tabKey === "lens") + return FEATURES.effects && effectCategories.has("lens"); + return true; + }); +} export function TabBar() { const { activeTab, setActiveTab } = useAssetsPanelStore(); @@ -59,7 +68,7 @@ export function TabBar() { ref={scrollRef} className="scrollbar-hidden relative flex size-full p-1 flex-col items-center justify-start gap-0.5 overflow-y-auto" > - {VISIBLE_TAB_KEYS.map((tabKey) => { + {getVisibleTabKeys().map((tabKey) => { const tab = tabs[tabKey]; return ( -- cgit v1.3.1