442 lines
12 KiB
Svelte
442 lines
12 KiB
Svelte
<script lang="ts">
|
||
import UrlInput from '$lib/components/UrlInput.svelte';
|
||
import VideoPlayer from '$lib/components/VideoPlayer.svelte';
|
||
import TransportControls from '$lib/components/TransportControls.svelte';
|
||
import Timeline from '$lib/components/Timeline.svelte';
|
||
import ClipList from '$lib/components/ClipList.svelte';
|
||
import StatusBar from '$lib/components/StatusBar.svelte';
|
||
import SetupWizard from '$lib/components/SetupWizard.svelte';
|
||
import PreferencesPanel from '$lib/components/PreferencesPanel.svelte';
|
||
import ExportDialog from '$lib/components/ExportDialog.svelte';
|
||
import AboutDialog from '$lib/components/AboutDialog.svelte';
|
||
import ProcessingModal from '$lib/components/ProcessingModal.svelte';
|
||
import { loadPreferences, preferences, setClipListPosition, setClipListWidth } from '$lib/stores/preferences.svelte';
|
||
import { getSelectedClipId, removeClip } from '$lib/stores/clips.svelte';
|
||
import { adjustShuttle, resetShuttleRate } from '$lib/transport/playback';
|
||
import { session } from '$lib/stores/videoSession.svelte';
|
||
import { listen } from '@tauri-apps/api/event';
|
||
import type { TransportKeyAction } from '$lib/transport/playback';
|
||
|
||
let showSetupWizard = $state(true);
|
||
let showPreferences = $state(false);
|
||
let showExportDialog = $state(false);
|
||
let showAboutDialog = $state(false);
|
||
let shuttleRate = $state(1);
|
||
|
||
let transportControls = $state<TransportControls | null>(null);
|
||
|
||
// Resizable split: timeline height in px (clip list gets the rest)
|
||
let timelineHeight = $state(180);
|
||
let isResizing = $state(false);
|
||
let resizeStartY = $state(0);
|
||
let resizeStartHeight = $state(0);
|
||
let splitAreaEl = $state<HTMLDivElement | null>(null);
|
||
|
||
let isSidebarResizing = $state(false);
|
||
let sidebarResizeStartX = $state(0);
|
||
let sidebarResizeStartWidth = $state(0);
|
||
let windowWidth = $state(window.innerWidth);
|
||
|
||
let isLeft = $derived(preferences.clipListPosition === 'left');
|
||
|
||
$effect(() => {
|
||
loadPreferences();
|
||
});
|
||
|
||
// Listen for native macOS menu "About" action
|
||
$effect(() => {
|
||
const unlisten = listen('open-about', () => {
|
||
showAboutDialog = true;
|
||
});
|
||
return () => { unlisten.then((fn) => fn()); };
|
||
});
|
||
|
||
$effect(() => {
|
||
if (session.status === 'resolving') {
|
||
shuttleRate = 1;
|
||
resetShuttleRate();
|
||
}
|
||
});
|
||
|
||
function dispatchTransport(action: TransportKeyAction) {
|
||
transportControls?.handleKeyAction(action);
|
||
}
|
||
|
||
function handleResizeStart(e: MouseEvent) {
|
||
e.preventDefault();
|
||
isResizing = true;
|
||
resizeStartY = e.clientY;
|
||
resizeStartHeight = timelineHeight;
|
||
}
|
||
|
||
function handleResizeMove(e: MouseEvent) {
|
||
if (!isResizing || !splitAreaEl) return;
|
||
const delta = e.clientY - resizeStartY;
|
||
const totalHeight = splitAreaEl.clientHeight;
|
||
const newHeight = Math.max(40, Math.min(totalHeight - 20, resizeStartHeight + delta));
|
||
timelineHeight = newHeight;
|
||
}
|
||
|
||
function handleResizeEnd() {
|
||
isResizing = false;
|
||
}
|
||
|
||
function toggleClipListPosition() {
|
||
const next = preferences.clipListPosition === 'bottom' ? 'left' : 'bottom';
|
||
setClipListPosition(next);
|
||
}
|
||
|
||
function handleSidebarResizeStart(e: MouseEvent) {
|
||
e.preventDefault();
|
||
isSidebarResizing = true;
|
||
sidebarResizeStartX = e.clientX;
|
||
sidebarResizeStartWidth = preferences.clipListWidth;
|
||
}
|
||
|
||
function handleSidebarResizeMove(e: MouseEvent) {
|
||
if (!isSidebarResizing) return;
|
||
const delta = e.clientX - sidebarResizeStartX;
|
||
const maxWidth = Math.round(windowWidth * 0.4);
|
||
const minWidth = Math.min(150, maxWidth);
|
||
const newWidth = Math.max(minWidth, Math.min(maxWidth, sidebarResizeStartWidth + delta));
|
||
preferences.clipListWidth = newWidth;
|
||
}
|
||
|
||
function handleSidebarResizeEnd() {
|
||
if (isSidebarResizing) {
|
||
isSidebarResizing = false;
|
||
setClipListWidth(preferences.clipListWidth);
|
||
}
|
||
}
|
||
|
||
function handleGlobalKeydown(e: KeyboardEvent) {
|
||
const target = e.target as HTMLElement;
|
||
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
|
||
|
||
switch (e.key) {
|
||
case ' ':
|
||
e.preventDefault();
|
||
dispatchTransport('play-pause');
|
||
break;
|
||
case ',':
|
||
e.preventDefault();
|
||
dispatchTransport(e.shiftKey ? 'keyframe-back' : 'frame-back');
|
||
break;
|
||
case '.':
|
||
e.preventDefault();
|
||
dispatchTransport(e.shiftKey ? 'keyframe-forward' : 'frame-forward');
|
||
break;
|
||
case 'ArrowLeft':
|
||
e.preventDefault();
|
||
dispatchTransport(e.shiftKey ? 'seek-back-1' : 'seek-back-5');
|
||
break;
|
||
case 'ArrowRight':
|
||
e.preventDefault();
|
||
dispatchTransport(e.shiftKey ? 'seek-forward-1' : 'seek-forward-5');
|
||
break;
|
||
case 'i':
|
||
case 'I':
|
||
e.preventDefault();
|
||
dispatchTransport('mark-in');
|
||
break;
|
||
case 'o':
|
||
case 'O':
|
||
e.preventDefault();
|
||
dispatchTransport('mark-out');
|
||
break;
|
||
case 'j':
|
||
case 'J':
|
||
e.preventDefault();
|
||
shuttleRate = adjustShuttle(-1, shuttleRate);
|
||
break;
|
||
case 'k':
|
||
case 'K':
|
||
e.preventDefault();
|
||
dispatchTransport('play-pause');
|
||
break;
|
||
case 'l':
|
||
case 'L':
|
||
e.preventDefault();
|
||
shuttleRate = adjustShuttle(1, shuttleRate);
|
||
break;
|
||
case 'Delete':
|
||
case 'Backspace': {
|
||
e.preventDefault();
|
||
const selectedId = getSelectedClipId();
|
||
if (selectedId) removeClip(selectedId);
|
||
break;
|
||
}
|
||
case 'a':
|
||
if (e.metaKey) {
|
||
e.preventDefault();
|
||
}
|
||
break;
|
||
case 'e':
|
||
if (e.metaKey) {
|
||
e.preventDefault();
|
||
showExportDialog = true;
|
||
}
|
||
break;
|
||
case '/':
|
||
if (e.metaKey) {
|
||
e.preventDefault();
|
||
showAboutDialog = true;
|
||
}
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<svelte:window
|
||
onkeydown={handleGlobalKeydown}
|
||
onmousemove={(e) => {
|
||
handleResizeMove(e);
|
||
handleSidebarResizeMove(e);
|
||
}}
|
||
onmouseup={() => {
|
||
handleResizeEnd();
|
||
handleSidebarResizeEnd();
|
||
}}
|
||
onresize={() => {
|
||
windowWidth = window.innerWidth;
|
||
}}
|
||
/>
|
||
|
||
{#if showSetupWizard}
|
||
<SetupWizard onComplete={() => (showSetupWizard = false)} />
|
||
{/if}
|
||
|
||
{#if showPreferences}
|
||
<PreferencesPanel onClose={() => (showPreferences = false)} />
|
||
{/if}
|
||
|
||
{#if showExportDialog}
|
||
<ExportDialog onClose={() => (showExportDialog = false)} />
|
||
{/if}
|
||
|
||
{#if showAboutDialog}
|
||
<AboutDialog onClose={() => (showAboutDialog = false)} />
|
||
{/if}
|
||
|
||
{#if session.processingStep !== 'idle' && session.processingStep !== 'done'}
|
||
<ProcessingModal />
|
||
{/if}
|
||
|
||
<div class="app-shell">
|
||
<header class="toolbar">
|
||
<UrlInput />
|
||
<button
|
||
class="layout-btn"
|
||
onclick={toggleClipListPosition}
|
||
title={preferences.clipListPosition === 'bottom'
|
||
? 'Move clip list to sidebar'
|
||
: 'Move clip list to bottom'}
|
||
>
|
||
{preferences.clipListPosition === 'bottom' ? '⬒' : '⬓'}
|
||
</button>
|
||
<button class="about-btn" onclick={() => (showAboutDialog = true)} title="About">ℹ</button>
|
||
<button class="prefs-btn" onclick={() => (showPreferences = true)} title="Preferences">⚙</button>
|
||
</header>
|
||
|
||
<main class="content" class:layout-left={isLeft} style:--sidebar-width="{preferences.clipListWidth}px">
|
||
<!-- Sidebar clip list: visible only in left mode -->
|
||
<div class="sidebar-area" class:hidden={!isLeft}>
|
||
<ClipList onExport={() => (showExportDialog = true)} position="left" />
|
||
</div>
|
||
<div
|
||
class="sidebar-handle"
|
||
class:hidden={!isLeft}
|
||
class:active={isSidebarResizing}
|
||
role="slider"
|
||
aria-orientation="vertical"
|
||
aria-label="Resize clip list sidebar"
|
||
aria-valuenow={preferences.clipListWidth}
|
||
aria-valuemin={150}
|
||
aria-valuemax={Math.round(windowWidth * 0.4)}
|
||
tabindex="0"
|
||
onmousedown={handleSidebarResizeStart}
|
||
onkeydown={(e) => {
|
||
const maxWidth = Math.round(windowWidth * 0.4);
|
||
const minWidth = Math.min(150, maxWidth);
|
||
if (e.key === 'ArrowRight') {
|
||
e.preventDefault();
|
||
setClipListWidth(
|
||
Math.max(minWidth, Math.min(maxWidth, preferences.clipListWidth + 10)),
|
||
);
|
||
} else if (e.key === 'ArrowLeft') {
|
||
e.preventDefault();
|
||
setClipListWidth(
|
||
Math.max(minWidth, Math.min(maxWidth, preferences.clipListWidth - 10)),
|
||
);
|
||
}
|
||
}}
|
||
></div>
|
||
|
||
<!-- Video + Transport: always rendered, never destroyed -->
|
||
<div class="video-area">
|
||
<VideoPlayer />
|
||
<TransportControls bind:this={transportControls} />
|
||
</div>
|
||
|
||
<!-- Timeline section: always full width -->
|
||
<div class="lower-section" bind:this={splitAreaEl}>
|
||
<div
|
||
class="resize-handle"
|
||
class:active={isResizing}
|
||
role="slider"
|
||
aria-orientation="horizontal"
|
||
aria-label="Resize timeline"
|
||
aria-valuenow={timelineHeight}
|
||
aria-valuemin={40}
|
||
aria-valuemax={500}
|
||
tabindex="0"
|
||
onmousedown={handleResizeStart}
|
||
onkeydown={(e) => {
|
||
if (e.key === 'ArrowDown') {
|
||
e.preventDefault();
|
||
timelineHeight = Math.min(500, timelineHeight + 10);
|
||
} else if (e.key === 'ArrowUp') {
|
||
e.preventDefault();
|
||
timelineHeight = Math.max(40, timelineHeight - 10);
|
||
}
|
||
}}
|
||
></div>
|
||
<div class="timeline-pane" style="height: {timelineHeight}px">
|
||
<Timeline />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom clip list: visible only in bottom mode -->
|
||
<div class="bottom-cliplist" class:hidden={isLeft}>
|
||
<ClipList onExport={() => (showExportDialog = true)} />
|
||
</div>
|
||
</main>
|
||
|
||
<StatusBar onOpenAbout={() => (showAboutDialog = true)} />
|
||
</div>
|
||
|
||
<style>
|
||
.app-shell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 12px;
|
||
background: var(--bg-secondary);
|
||
border-bottom: 1px solid var(--border);
|
||
gap: 8px;
|
||
}
|
||
|
||
/* --- Grid layout: bottom mode (default) --- */
|
||
.content {
|
||
flex: 1;
|
||
display: grid;
|
||
grid-template-areas:
|
||
"video"
|
||
"lower"
|
||
"bottom-clips";
|
||
grid-template-columns: 1fr;
|
||
grid-template-rows: 1fr auto auto;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.video-area {
|
||
grid-area: video;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.lower-section {
|
||
grid-area: lower;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-shrink: 0;
|
||
min-height: 80px;
|
||
}
|
||
|
||
.bottom-cliplist {
|
||
grid-area: bottom-clips;
|
||
min-height: 20px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Sidebar elements hidden in bottom mode */
|
||
.sidebar-area {
|
||
grid-area: sidebar;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
border-right: 1px solid var(--border);
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.sidebar-handle {
|
||
grid-area: handle;
|
||
width: 5px;
|
||
background: var(--border);
|
||
cursor: ew-resize;
|
||
flex-shrink: 0;
|
||
transition: background 0.1s;
|
||
}
|
||
|
||
.sidebar-handle:hover,
|
||
.sidebar-handle.active {
|
||
background: var(--accent);
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
/* --- Grid layout: left mode --- */
|
||
.content.layout-left {
|
||
grid-template-areas:
|
||
"sidebar handle video"
|
||
"lower lower lower"
|
||
"bottom-clips bottom-clips bottom-clips";
|
||
grid-template-columns: var(--sidebar-width, 220px) 5px 1fr;
|
||
grid-template-rows: 1fr auto 0;
|
||
}
|
||
|
||
.timeline-pane {
|
||
flex-shrink: 0;
|
||
min-height: 40px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.resize-handle {
|
||
height: 5px;
|
||
background: var(--border, #353550);
|
||
cursor: ns-resize;
|
||
flex-shrink: 0;
|
||
transition: background 0.1s;
|
||
}
|
||
|
||
.resize-handle:hover,
|
||
.resize-handle.active {
|
||
background: var(--accent, #89b4fa);
|
||
}
|
||
|
||
.layout-btn {
|
||
font-size: 16px;
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
.about-btn {
|
||
font-size: 16px;
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
.prefs-btn {
|
||
font-size: 18px;
|
||
padding: 4px 8px;
|
||
}
|
||
</style>
|