48 lines
1007 B
Svelte
48 lines
1007 B
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';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="app-shell">
|
||
|
|
<header class="toolbar">
|
||
|
|
<UrlInput />
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="content">
|
||
|
|
<VideoPlayer />
|
||
|
|
<TransportControls />
|
||
|
|
<Timeline />
|
||
|
|
<ClipList />
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<StatusBar />
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
</style>
|