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. --- apps/web/src/preview/components/toolbar.tsx | 55 ++++++++++++++++++++- apps/web/src/preview/popout-store.ts | 76 +++++++++++++++++++++++++++++ 2 files changed, 130 insertions(+), 1 deletion(-) create mode 100644 apps/web/src/preview/popout-store.ts (limited to 'apps/web/src/preview') diff --git a/apps/web/src/preview/components/toolbar.tsx b/apps/web/src/preview/components/toolbar.tsx index 1a5ce1bc..5f50e581 100644 --- a/apps/web/src/preview/components/toolbar.tsx +++ b/apps/web/src/preview/components/toolbar.tsx @@ -1,13 +1,15 @@ "use client"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useSyncExternalStore } from "react"; import { useEditor } from "@/editor/use-editor"; import { formatTimecode } from "opencut-wasm"; import { invokeAction } from "@/actions"; import { EditableTimecode } from "@/components/editable-timecode"; import { Button } from "@/components/ui/button"; import { + ArrowExpandDiagonal01Icon, FullScreenIcon, + Minimize01Icon, PauseIcon, PlayIcon, } from "@hugeicons/core-free-icons"; @@ -21,6 +23,12 @@ import { SelectSeparator, } from "@/components/ui/select"; import { PREVIEW_ZOOM_PRESETS } from "@/preview/zoom"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { usePreviewPopoutStore } from "@/preview/popout-store"; import { usePreviewViewport } from "./preview-viewport"; import { GridPopover } from "./guide-popover"; import { usePreviewStore } from "@/preview/preview-store"; @@ -51,6 +59,7 @@ export function PreviewToolbar({ )} */} + @@ -59,6 +68,50 @@ export function PreviewToolbar({ ); } +function PopoutButton() { + const isPoppedOut = usePreviewPopoutStore( + (state) => state.container !== null, + ); + const openPopout = usePreviewPopoutStore((state) => state.openPopout); + const dockPopout = usePreviewPopoutStore((state) => state.dockPopout); + const isSupported = useSyncExternalStore( + () => () => {}, + () => "documentPictureInPicture" in window, + () => false, + ); + + if (!isSupported) { + return null; + } + + const togglePopout = () => { + if (isPoppedOut) { + dockPopout(); + } else { + openPopout(); + } + }; + + return ( + + + + + + {isPoppedOut ? "Dock preview" : "Pop out preview"} + + + ); +} + function TimecodeDisplay() { const editor = useEditor(); const totalDuration = useEditor((e) => e.timeline.getTotalDuration()); diff --git a/apps/web/src/preview/popout-store.ts b/apps/web/src/preview/popout-store.ts new file mode 100644 index 00000000..1b91f6a2 --- /dev/null +++ b/apps/web/src/preview/popout-store.ts @@ -0,0 +1,76 @@ +import { create } from "zustand"; + +interface PreviewPopoutState { + pipWindow: Window | null; + container: HTMLElement | null; + openPopout: () => Promise; + dockPopout: () => void; +} + +function copyStylesInto({ pipWindow }: { pipWindow: Window }) { + const styleNodes = document.head.querySelectorAll( + "style, link[rel='stylesheet']", + ); + for (const node of styleNodes) { + if (node instanceof HTMLStyleElement) { + pipWindow.document.head.appendChild(node.cloneNode(true)); + } else if (node instanceof HTMLLinkElement) { + const link = pipWindow.document.createElement("link"); + link.rel = "stylesheet"; + link.href = node.href; + pipWindow.document.head.appendChild(link); + } + } +} + +function preparePipDocument({ pipWindow }: { pipWindow: Window }) { + pipWindow.document.documentElement.className = + document.documentElement.className; + pipWindow.document.documentElement.style.height = "100%"; + pipWindow.document.body.className = document.body.className; + pipWindow.document.body.style.margin = "0"; + pipWindow.document.body.style.height = "100%"; + pipWindow.document.body.style.overflow = "hidden"; + pipWindow.document.title = "Preview"; + copyStylesInto({ pipWindow }); +} + +export const usePreviewPopoutStore = create()( + (set, get) => ({ + pipWindow: null, + container: null, + openPopout: async () => { + if (get().container !== null) { + return; + } + if (!("documentPictureInPicture" in window)) { + return; + } + const pip = window.documentPictureInPicture; + if (!pip) { + return; + } + const pipWindow = await pip.requestWindow(); + preparePipDocument({ pipWindow }); + const container = pipWindow.document.createElement("div"); + container.style.width = "100%"; + container.style.height = "100%"; + pipWindow.document.body.appendChild(container); + pipWindow.addEventListener( + "pagehide", + () => { + set({ pipWindow: null, container: null }); + }, + { once: true }, + ); + set({ pipWindow, container }); + }, + dockPopout: () => { + const { pipWindow } = get(); + if (pipWindow && !pipWindow.closed) { + pipWindow.close(); + } + set({ pipWindow: null, container: null }); + }, + }), +); -- cgit v1.3.1