@r2digisolutions/components 0.1.7 → 0.2.0

package/dist/components/organisms/VideoEditor/VideoEditor.svelte

@@ -0,0 +1,308 @@
+<script lang="ts">
+	import EditorShell from '../EditorShell/EditorShell.svelte';
+	import MediaAssetBrowser from '../../molecules/MediaAssetBrowser/MediaAssetBrowser.svelte';
+	import ProgramMonitor from '../../molecules/ProgramMonitor/ProgramMonitor.svelte';
+	import TransportControls from '../../molecules/TransportControls/TransportControls.svelte';
+	import MediaTimeline from '../../molecules/MediaTimeline/MediaTimeline.svelte';
+	import PropertyGroup from '../../molecules/PropertyGroup/PropertyGroup.svelte';
+	import PropertyField from '../../molecules/PropertyField/PropertyField.svelte';
+	import Input from '../../atoms/Input/Input.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import {
+		createMediaClip,
+		updateClipInTracks,
+		removeClipFromTracks,
+		type MediaAsset,
+		type MediaClip,
+		type MediaTrack
+	} from '../../../utils/mediaTracks.js';
+	import {
+		emptyVideoSequence,
+		type VideoSequence
+	} from '../../../utils/videoSequence.js';
+	import { clampMs } from '../../../utils/mediaTime.js';
+	import Download from '@lucide/svelte/icons/download';
+	import PanelLeft from '@lucide/svelte/icons/panel-left';
+	import PanelRight from '@lucide/svelte/icons/panel-right';
+
+	interface VideoEditorProps {
+		value?: VideoSequence;
+		class?: string;
+		onchange?: (seq: VideoSequence) => void;
+		onexport?: (payload: { format: 'json'; document: VideoSequence }) => void;
+	}
+
+	let {
+		value = $bindable(emptyVideoSequence()),
+		class: className = '',
+		onchange,
+		onexport
+	}: VideoEditorProps = $props();
+
+	let selectedClipId = $state<string | null>(null);
+	let currentTimeMs = $state(0);
+	let playing = $state(false);
+	let zoom = $state(1);
+	let showSidebar = $state(true);
+	let showInspector = $state(true);
+	let raf = 0;
+	let lastTs = 0;
+
+	const selectedClip = $derived.by(() => {
+		for (const t of value.tracks) {
+			const c = t.clips.find((x) => x.id === selectedClipId);
+			if (c) return c;
+		}
+		return null;
+	});
+
+	function emit(next: VideoSequence) {
+		value = next;
+		onchange?.(next);
+	}
+
+	function setTracks(tracks: MediaTrack[]) {
+		emit({ ...value, tracks });
+	}
+
+	function addAssetAsClip(asset: MediaAsset) {
+		const trackKind = asset.kind === 'audio' ? 'audio' : 'video';
+		const track =
+			value.tracks.find((t) => t.kind === trackKind) ??
+			value.tracks.find((t) => t.kind === 'video') ??
+			value.tracks[0];
+		if (!track) return;
+		const startMs = currentTimeMs;
+		const dur = asset.durationMs ?? (asset.kind === 'audio' ? 8000 : 5000);
+		const clip = createMediaClip({
+			trackId: track.id,
+			assetId: asset.id,
+			name: asset.name,
+			kind: asset.kind,
+			src: asset.src,
+			startMs,
+			endMs: startMs + dur,
+			color: track.color ?? (trackKind === 'audio' ? '#10b981' : '#3b82f6')
+		});
+		const assets = value.assets.some((a) => a.id === asset.id)
+			? value.assets
+			: [...value.assets, asset];
+		emit({
+			...value,
+			assets,
+			tracks: value.tracks.map((t) =>
+				t.id === track.id ? { ...t, clips: [...t.clips, clip] } : t
+			)
+		});
+		selectedClipId = clip.id;
+	}
+
+	function patchClip(clip: MediaClip) {
+		setTracks(updateClipInTracks(value.tracks, clip.id, () => clip));
+	}
+
+	function patchTrack(track: MediaTrack) {
+		setTracks(value.tracks.map((t) => (t.id === track.id ? track : t)));
+	}
+
+	function tick(ts: number) {
+		if (!playing) return;
+		if (lastTs) {
+			const delta = ts - lastTs;
+			currentTimeMs = clampMs(currentTimeMs + delta, 0, value.durationMs);
+			if (currentTimeMs >= value.durationMs) {
+				playing = false;
+				currentTimeMs = value.durationMs;
+			}
+		}
+		lastTs = ts;
+		raf = requestAnimationFrame(tick);
+	}
+
+	$effect(() => {
+		if (playing) {
+			lastTs = 0;
+			raf = requestAnimationFrame(tick);
+			return () => cancelAnimationFrame(raf);
+		}
+		cancelAnimationFrame(raf);
+	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		const tag = (e.target as HTMLElement)?.tagName;
+		if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+		if (e.code === 'Space') {
+			e.preventDefault();
+			playing = !playing;
+			return;
+		}
+		if ((e.key === 'Delete' || e.key === 'Backspace') && selectedClipId) {
+			e.preventDefault();
+			setTracks(removeClipFromTracks(value.tracks, selectedClipId));
+			selectedClipId = null;
+		}
+	}
+
+	function exportJson() {
+		onexport?.({ format: 'json', document: value });
+		const blob = new Blob([JSON.stringify(value, null, 2)], { type: 'application/json' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = 'video-sequence.json';
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class={['flex h-full min-h-[560px] flex-col', className]}>
+	<div class="flex items-center gap-2 border-b border-border bg-surface-elevated px-3 py-2">
+		<span class="text-sm font-semibold text-primary">Video Editor</span>
+		<div class="ml-auto flex items-center gap-1">
+			<IconButton label="Toggle sidebar" size="sm" onclick={() => (showSidebar = !showSidebar)}>
+				<PanelLeft class="h-4 w-4" />
+			</IconButton>
+			<IconButton
+				label="Toggle inspector"
+				size="sm"
+				onclick={() => (showInspector = !showInspector)}
+			>
+				<PanelRight class="h-4 w-4" />
+			</IconButton>
+			<Button size="sm" variant="secondary" onclick={exportJson}>
+				<span class="inline-flex items-center gap-1.5">
+					<Download class="h-3.5 w-3.5" />
+					Export JSON
+				</span>
+			</Button>
+		</div>
+	</div>
+
+	<div class="min-h-0 flex-1">
+		<EditorShell
+			sidebarTitle="Media"
+			inspectorTitle="Clip"
+			workspaceTitle="Program"
+			bottomTitle="Timeline"
+			showBottom={true}
+			{showSidebar}
+			{showInspector}
+			wrapSidebar={true}
+			wrapInspector={true}
+			wrapWorkspace={false}
+			wrapBottom={false}
+			sidebarSize={280}
+			inspectorSize={260}
+			bottomSize={220}
+			sizeUnit="px"
+			fullHeight
+		>
+			{#snippet sidebar()}
+				<MediaAssetBrowser
+					assets={value.assets}
+					accept="image/*,video/*,audio/*"
+					helperText="Image, video or audio"
+					onassetschange={(assets) => emit({ ...value, assets })}
+					onselect={(id) => {
+						const asset = value.assets.find((a) => a.id === id);
+						if (asset) addAssetAsClip(asset);
+					}}
+					onadd={(asset) => {
+						emit({ ...value, assets: [...value.assets, asset] });
+					}}
+				/>
+			{/snippet}
+
+			{#snippet workspace()}
+				<div class="flex h-full flex-col gap-2 bg-surface p-3">
+					<TransportControls
+						{playing}
+						{currentTimeMs}
+						durationMs={value.durationMs}
+						onplay={() => (playing = true)}
+						onpause={() => (playing = false)}
+						onstop={() => {
+							playing = false;
+							currentTimeMs = 0;
+						}}
+					/>
+					<div class="min-h-0 flex-1">
+						<ProgramMonitor
+							width={value.width}
+							height={value.height}
+							background={value.background}
+							{currentTimeMs}
+							tracks={value.tracks}
+							class="mx-auto max-h-full"
+						/>
+					</div>
+				</div>
+			{/snippet}
+
+			{#snippet inspector()}
+				{#if !selectedClip}
+					<p class="px-3 py-6 text-center text-xs text-muted">Select a clip</p>
+				{:else}
+					<PropertyGroup title="Clip">
+						<PropertyField label="Name">
+							<Input
+								size="sm"
+								value={selectedClip.name}
+								oninput={(e) =>
+									patchClip({
+										...selectedClip,
+										name: (e.currentTarget as HTMLInputElement).value
+									})}
+							/>
+						</PropertyField>
+						<PropertyField label="Start">
+							<Input
+								type="number"
+								size="sm"
+								value={String(Math.round(selectedClip.startMs))}
+								oninput={(e) => {
+									const startMs = Number((e.currentTarget as HTMLInputElement).value);
+									const dur = selectedClip.endMs - selectedClip.startMs;
+									patchClip({ ...selectedClip, startMs, endMs: startMs + dur });
+								}}
+							/>
+						</PropertyField>
+						<PropertyField label="End">
+							<Input
+								type="number"
+								size="sm"
+								value={String(Math.round(selectedClip.endMs))}
+								oninput={(e) =>
+									patchClip({
+										...selectedClip,
+										endMs: Number((e.currentTarget as HTMLInputElement).value)
+									})}
+							/>
+						</PropertyField>
+					</PropertyGroup>
+				{/if}
+			{/snippet}
+
+			{#snippet bottom()}
+				<div class="h-full p-1">
+					<MediaTimeline
+						tracks={value.tracks}
+						durationMs={value.durationMs}
+						bind:currentTimeMs
+						bind:zoom
+						{selectedClipId}
+						onselectclip={(id) => (selectedClipId = id)}
+						onchangeclip={patchClip}
+						onchangetrack={patchTrack}
+						headerVariant="video"
+						onseek={(ms) => (currentTimeMs = ms)}
+						class="h-full"
+					/>
+				</div>
+			{/snippet}
+		</EditorShell>
+	</div>
+</div>

package/dist/components/organisms/VideoEditor/VideoEditor.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type VideoSequence } from '../../../utils/videoSequence.js';
+interface VideoEditorProps {
+    value?: VideoSequence;
+    class?: string;
+    onchange?: (seq: VideoSequence) => void;
+    onexport?: (payload: {
+        format: 'json';
+        document: VideoSequence;
+    }) => void;
+}
+declare const VideoEditor: import("svelte").Component<VideoEditorProps, {}, "value">;
+type VideoEditor = ReturnType<typeof VideoEditor>;
+export default VideoEditor;

package/dist/components/organisms/VideoEditor/VideoEditorStory.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import VideoEditor from './VideoEditor.svelte';
+	import { createDemoVideoSequence } from '../../../utils/videoSequence.js';
+
+	let value = $state(createDemoVideoSequence());
+</script>
+
+<div class="h-[780px] w-full overflow-hidden rounded-xl border border-border">
+	<VideoEditor bind:value />
+</div>

package/dist/components/organisms/VideoEditor/VideoEditorStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const VideoEditorStory: import("svelte").Component<Record<string, never>, {}, "">;
+type VideoEditorStory = ReturnType<typeof VideoEditorStory>;
+export default VideoEditorStory;

package/dist/components/templates/AudioEditorTemplate/AudioEditorTemplate.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/templates/AudioEditorTemplate/AudioEditorTemplate.stories.js

@@ -0,0 +1,9 @@
+import AudioEditorTemplateStory from './AudioEditorTemplateStory.svelte';
+const meta = {
+    title: 'Templates/AudioEditorTemplate',
+    component: AudioEditorTemplateStory,
+    tags: ['autodocs'],
+    parameters: { layout: 'fullscreen' }
+};
+export default meta;
+export const Default = {};

package/dist/components/templates/AudioEditorTemplate/AudioEditorTemplate.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import AudioEditor from '../../organisms/AudioEditor/AudioEditor.svelte';
+	import { emptyAudioProject, type AudioProject } from '../../../utils/audioProject.js';
+
+	interface AudioEditorTemplateProps {
+		value?: AudioProject;
+		class?: string;
+		onchange?: (project: AudioProject) => void;
+		onexport?: (payload: { format: 'json'; document: AudioProject }) => void;
+	}
+
+	let {
+		value = $bindable(emptyAudioProject()),
+		class: className = '',
+		onchange,
+		onexport
+	}: AudioEditorTemplateProps = $props();
+</script>
+
+<div class={['flex h-dvh w-full flex-col bg-surface', className]}>
+	<AudioEditor bind:value {onchange} {onexport} class="min-h-0 flex-1" />
+</div>

package/dist/components/templates/AudioEditorTemplate/AudioEditorTemplate.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type AudioProject } from '../../../utils/audioProject.js';
+interface AudioEditorTemplateProps {
+    value?: AudioProject;
+    class?: string;
+    onchange?: (project: AudioProject) => void;
+    onexport?: (payload: {
+        format: 'json';
+        document: AudioProject;
+    }) => void;
+}
+declare const AudioEditorTemplate: import("svelte").Component<AudioEditorTemplateProps, {}, "value">;
+type AudioEditorTemplate = ReturnType<typeof AudioEditorTemplate>;
+export default AudioEditorTemplate;

package/dist/components/templates/AudioEditorTemplate/AudioEditorTemplateStory.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import AudioEditorTemplate from './AudioEditorTemplate.svelte';
+	import { createDemoAudioProject } from '../../../utils/audioProject.js';
+
+	let value = $state(createDemoAudioProject());
+</script>
+
+<AudioEditorTemplate bind:value />

package/dist/components/templates/AudioEditorTemplate/AudioEditorTemplateStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AudioEditorTemplateStory: import("svelte").Component<Record<string, never>, {}, "">;
+type AudioEditorTemplateStory = ReturnType<typeof AudioEditorTemplateStory>;
+export default AudioEditorTemplateStory;

package/dist/components/templates/CanvasEditorTemplate/CanvasEditorTemplate.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/templates/CanvasEditorTemplate/CanvasEditorTemplate.stories.js

@@ -0,0 +1,9 @@
+import CanvasEditorTemplateStory from './CanvasEditorTemplateStory.svelte';
+const meta = {
+    title: 'Templates/CanvasEditorTemplate',
+    component: CanvasEditorTemplateStory,
+    tags: ['autodocs'],
+    parameters: { layout: 'fullscreen' }
+};
+export default meta;
+export const Default = {};

package/dist/components/templates/CanvasEditorTemplate/CanvasEditorTemplate.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import CanvasEditor from '../../organisms/CanvasEditor/CanvasEditor.svelte';
+	import type { CanvasDocument } from '../../../utils/canvasDocument.js';
+	import { emptyCanvasDocument } from '../../../utils/canvasDocument.js';
+	import type { MediaAsset } from '../../../utils/mediaTracks.js';
+
+	import type { CanvasExportFormat } from '../../../utils/canvasExport.js';
+
+	interface CanvasEditorTemplateProps {
+		value?: CanvasDocument;
+		assets?: MediaAsset[];
+		class?: string;
+		onchange?: (doc: CanvasDocument) => void;
+		onexport?: (payload: {
+			format: CanvasExportFormat;
+			document: CanvasDocument;
+			blob?: Blob;
+		}) => void;
+	}
+
+	let {
+		value = $bindable(emptyCanvasDocument()),
+		assets = $bindable<MediaAsset[]>([]),
+		class: className = '',
+		onchange,
+		onexport
+	}: CanvasEditorTemplateProps = $props();
+</script>
+
+<div class={['flex h-dvh w-full flex-col bg-surface', className]}>
+	<CanvasEditor bind:value bind:assets {onchange} {onexport} class="min-h-0 flex-1" />
+</div>

package/dist/components/templates/CanvasEditorTemplate/CanvasEditorTemplate.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { CanvasDocument } from '../../../utils/canvasDocument.js';
+import type { MediaAsset } from '../../../utils/mediaTracks.js';
+import type { CanvasExportFormat } from '../../../utils/canvasExport.js';
+interface CanvasEditorTemplateProps {
+    value?: CanvasDocument;
+    assets?: MediaAsset[];
+    class?: string;
+    onchange?: (doc: CanvasDocument) => void;
+    onexport?: (payload: {
+        format: CanvasExportFormat;
+        document: CanvasDocument;
+        blob?: Blob;
+    }) => void;
+}
+declare const CanvasEditorTemplate: import("svelte").Component<CanvasEditorTemplateProps, {}, "value" | "assets">;
+type CanvasEditorTemplate = ReturnType<typeof CanvasEditorTemplate>;
+export default CanvasEditorTemplate;

package/dist/components/templates/CanvasEditorTemplate/CanvasEditorTemplateStory.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import CanvasEditorTemplate from './CanvasEditorTemplate.svelte';
+	import { createCanvasLayer, emptyCanvasDocument } from '../../../utils/canvasDocument.js';
+
+	let value = $state(
+		emptyCanvasDocument({
+			layers: [
+				createCanvasLayer('text', {
+					name: 'Welcome',
+					text: 'Figma-like canvas',
+					rect: { x: 200, y: 200, w: 400, h: 100 },
+					zIndex: 0
+				})
+			]
+		})
+	);
+</script>
+
+<div class="fixed inset-0 overflow-hidden">
+	<CanvasEditorTemplate bind:value class="!h-full" />
+</div>

package/dist/components/templates/CanvasEditorTemplate/CanvasEditorTemplateStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CanvasEditorTemplateStory: import("svelte").Component<Record<string, never>, {}, "">;
+type CanvasEditorTemplateStory = ReturnType<typeof CanvasEditorTemplateStory>;
+export default CanvasEditorTemplateStory;

package/dist/components/templates/VideoEditorTemplate/VideoEditorTemplate.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/templates/VideoEditorTemplate/VideoEditorTemplate.stories.js

@@ -0,0 +1,9 @@
+import VideoEditorTemplateStory from './VideoEditorTemplateStory.svelte';
+const meta = {
+    title: 'Templates/VideoEditorTemplate',
+    component: VideoEditorTemplateStory,
+    tags: ['autodocs'],
+    parameters: { layout: 'fullscreen' }
+};
+export default meta;
+export const Default = {};

package/dist/components/templates/VideoEditorTemplate/VideoEditorTemplate.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import VideoEditor from '../../organisms/VideoEditor/VideoEditor.svelte';
+	import { emptyVideoSequence, type VideoSequence } from '../../../utils/videoSequence.js';
+
+	interface VideoEditorTemplateProps {
+		value?: VideoSequence;
+		class?: string;
+		onchange?: (seq: VideoSequence) => void;
+		onexport?: (payload: { format: 'json'; document: VideoSequence }) => void;
+	}
+
+	let {
+		value = $bindable(emptyVideoSequence()),
+		class: className = '',
+		onchange,
+		onexport
+	}: VideoEditorTemplateProps = $props();
+</script>
+
+<div class={['flex h-dvh w-full flex-col bg-surface', className]}>
+	<VideoEditor bind:value {onchange} {onexport} class="min-h-0 flex-1" />
+</div>

package/dist/components/templates/VideoEditorTemplate/VideoEditorTemplate.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type VideoSequence } from '../../../utils/videoSequence.js';
+interface VideoEditorTemplateProps {
+    value?: VideoSequence;
+    class?: string;
+    onchange?: (seq: VideoSequence) => void;
+    onexport?: (payload: {
+        format: 'json';
+        document: VideoSequence;
+    }) => void;
+}
+declare const VideoEditorTemplate: import("svelte").Component<VideoEditorTemplateProps, {}, "value">;
+type VideoEditorTemplate = ReturnType<typeof VideoEditorTemplate>;
+export default VideoEditorTemplate;

package/dist/components/templates/VideoEditorTemplate/VideoEditorTemplateStory.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import VideoEditorTemplate from './VideoEditorTemplate.svelte';
+	import { createDemoVideoSequence } from '../../../utils/videoSequence.js';
+
+	let value = $state(createDemoVideoSequence());
+</script>
+
+<VideoEditorTemplate bind:value />

package/dist/components/templates/VideoEditorTemplate/VideoEditorTemplateStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const VideoEditorTemplateStory: import("svelte").Component<Record<string, never>, {}, "">;
+type VideoEditorTemplateStory = ReturnType<typeof VideoEditorTemplateStory>;
+export default VideoEditorTemplateStory;