995 lines
27 KiB
Markdown
995 lines
27 KiB
Markdown
# v0.2.1 — Polish, Icons, Cut Clip & Shortcuts Reference Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** Ship v0.2.1 with Lucide icons, smoother blur animation, cut-clip from Player mode, and a keyboard shortcuts reference in the About dialog.
|
||
|
||
**Architecture:** All changes are frontend-only. A new utility function handles quick-clip range calculation. The About dialog gains a tabbed interface. Lucide replaces all emoji/text-glyph icons. CSS pseudo-element fixes the backdrop blur transition.
|
||
|
||
**Tech Stack:** Svelte 5, `@lucide/svelte`, Vitest, Tauri v2
|
||
|
||
## Global Constraints
|
||
|
||
- Svelte 5 with runes (`$state`, `$derived`, `$effect`, `$props`, `$bindable`)
|
||
- `@lucide/svelte` for icons — import from `@lucide/svelte` (tree-shakable named imports)
|
||
- All imports at top of file, no inline imports
|
||
- Exhaustive switch with `never` check in default case for discriminated unions
|
||
- Zero `svelte-check` errors and warnings after every task
|
||
- All existing tests must pass after every task (`npm test`)
|
||
|
||
---
|
||
|
||
### Task 1: Floating Controls Position Bump + Blur Fix
|
||
|
||
**Files:**
|
||
- Modify: `src/lib/components/PlayerControls.svelte` (CSS section, lines ~278–302)
|
||
|
||
**Interfaces:**
|
||
- Consumes: nothing new
|
||
- Produces: visual-only changes — no API changes
|
||
|
||
- [ ] **Step 1: Raise the controls overlay**
|
||
|
||
In `src/lib/components/PlayerControls.svelte`, change `bottom: 48px` to `bottom: 64px` in `.player-controls-overlay`:
|
||
|
||
```css
|
||
.player-controls-overlay {
|
||
position: absolute;
|
||
bottom: 64px;
|
||
left: 15%;
|
||
right: 15%;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease 0.1s;
|
||
z-index: 20;
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: Move blur to ::before pseudo-element**
|
||
|
||
Remove `background` and `backdrop-filter` from `.player-controls-panel`. Add `position: relative` and a `::before` pseudo-element that handles the blur background. The pseudo-element's opacity is driven by the `.visible` class on the ancestor overlay.
|
||
|
||
Replace the `.player-controls-panel` rule (currently around lines 294–302):
|
||
|
||
```css
|
||
.player-controls-panel {
|
||
pointer-events: auto;
|
||
position: relative;
|
||
border-radius: 12px;
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.player-controls-panel::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.75);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-radius: 12px;
|
||
z-index: -1;
|
||
opacity: 0;
|
||
transition: opacity 0.25s ease;
|
||
}
|
||
|
||
.player-controls-overlay.visible .player-controls-panel::before {
|
||
opacity: 1;
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 3: Verify**
|
||
|
||
Run:
|
||
```bash
|
||
npx svelte-check --tsconfig ./tsconfig.json
|
||
npm test
|
||
```
|
||
Expected: 0 errors, 0 warnings, all tests pass.
|
||
|
||
- [ ] **Step 4: Commit**
|
||
|
||
```bash
|
||
git add src/lib/components/PlayerControls.svelte
|
||
git commit -m "fix: raise controls to 64px, smooth blur via ::before pseudo-element"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: Lucide Icon Migration
|
||
|
||
**Files:**
|
||
- Modify: `src/lib/components/PlayerControls.svelte` (script + template)
|
||
- Modify: `src/lib/components/TransportControls.svelte` (script + template)
|
||
- Modify: `src/App.svelte` (toolbar buttons)
|
||
|
||
**Interfaces:**
|
||
- Consumes: nothing new
|
||
- Produces: visual-only changes — all props/events unchanged
|
||
|
||
- [ ] **Step 1: Install @lucide/svelte**
|
||
|
||
```bash
|
||
npm install @lucide/svelte
|
||
```
|
||
|
||
- [ ] **Step 2: Replace icons in PlayerControls.svelte**
|
||
|
||
Add Lucide imports at the top of the `<script>` block:
|
||
|
||
```typescript
|
||
import {
|
||
VolumeX,
|
||
Volume1,
|
||
Volume2,
|
||
Rewind,
|
||
FastForward,
|
||
Pause,
|
||
Play,
|
||
Scissors,
|
||
Captions,
|
||
PictureInPicture2,
|
||
Maximize,
|
||
Minimize,
|
||
} from '@lucide/svelte';
|
||
```
|
||
|
||
Replace each emoji/text glyph in the template:
|
||
|
||
| Location | Old | New |
|
||
|---|---|---|
|
||
| Mute button (line ~161) | `{#if isMuted \|\| volume === 0}🔇{:else if volume < 0.5}🔉{:else}🔊{/if}` | `{#if isMuted \|\| volume === 0}<VolumeX size={16} />{:else if volume < 0.5}<Volume1 size={16} />{:else}<Volume2 size={16} />{/if}` |
|
||
| Skip back (line ~181) | `⏪` | `<Rewind size={16} />` |
|
||
| Play/Pause (line ~187) | `{session.isPlaying ? '❚❚' : '▶'}` | `{#if session.isPlaying}<Pause size={18} />{:else}<Play size={18} />{/if}` |
|
||
| Skip forward (line ~193) | `⏩` | `<FastForward size={16} />` |
|
||
| CC button (line ~222) | `CC` | `<Captions size={16} />` |
|
||
| PiP button (line ~231) | `⧉` | `<PictureInPicture2 size={16} />` |
|
||
| Fullscreen button (line ~239) | `{fullscreenActive ? '⤓' : '⛶'}` | `{#if fullscreenActive}<Minimize size={16} />{:else}<Maximize size={16} />{/if}` |
|
||
|
||
- [ ] **Step 3: Replace icons in TransportControls.svelte**
|
||
|
||
Add Lucide imports at the top of the `<script>` block:
|
||
|
||
```typescript
|
||
import {
|
||
ChevronFirst,
|
||
ChevronLast,
|
||
SkipBack,
|
||
SkipForward,
|
||
Pause,
|
||
Play,
|
||
VolumeX,
|
||
Volume1,
|
||
Volume2,
|
||
} from '@lucide/svelte';
|
||
```
|
||
|
||
Replace each glyph in the template:
|
||
|
||
| Location | Old | New |
|
||
|---|---|---|
|
||
| Previous keyframe button | `◄K` | `<ChevronFirst size={16} />` |
|
||
| -5s button | `-5s` (keep as text) | `-5s` (no change — text labels are fine here) |
|
||
| -1s button | `-1s` (keep as text) | `-1s` (no change) |
|
||
| Previous frame button | `◄\|` | `<SkipBack size={16} />` |
|
||
| Play/Pause button (line ~59) | `{session.isPlaying ? '❚❚' : '▶'}` | `{#if session.isPlaying}<Pause size={16} />{:else}<Play size={16} />{/if}` |
|
||
| Next frame button | `\|►` | `<SkipForward size={16} />` |
|
||
| +1s button | `+1s` (keep as text) | `+1s` (no change) |
|
||
| +5s button | `+5s` (keep as text) | `+5s` (no change) |
|
||
| Next keyframe button | `K►` | `<ChevronLast size={16} />` |
|
||
| Mute button (line ~88–93) | `{#if isMuted \|\| volume === 0}🔇{:else if volume < 0.5}🔉{:else}🔊{/if}` | `{#if isMuted \|\| volume === 0}<VolumeX size={14} />{:else if volume < 0.5}<Volume1 size={14} />{:else}<Volume2 size={14} />{/if}` |
|
||
|
||
- [ ] **Step 4: Replace icons in App.svelte toolbar**
|
||
|
||
Add Lucide imports at the top of the `<script>` block (alongside existing imports):
|
||
|
||
```typescript
|
||
import {
|
||
PanelLeft,
|
||
PanelBottom,
|
||
Info,
|
||
Settings,
|
||
} from '@lucide/svelte';
|
||
```
|
||
|
||
Replace toolbar button contents:
|
||
|
||
| Location | Old | New |
|
||
|---|---|---|
|
||
| Layout toggle (line ~357) | `{preferences.clipListPosition === 'bottom' ? '⬒' : '⬓'}` | `{#if preferences.clipListPosition === 'bottom'}<PanelLeft size={16} />{:else}<PanelBottom size={16} />{/if}` |
|
||
| About button (line ~360) | `ℹ` | `<Info size={16} />` |
|
||
| Prefs button (line ~361) | `⚙` | `<Settings size={16} />` |
|
||
|
||
- [ ] **Step 5: Verify**
|
||
|
||
Run:
|
||
```bash
|
||
npx svelte-check --tsconfig ./tsconfig.json
|
||
npm test
|
||
```
|
||
Expected: 0 errors, 0 warnings, all tests pass.
|
||
|
||
- [ ] **Step 6: Commit**
|
||
|
||
```bash
|
||
git add package.json package-lock.json src/lib/components/PlayerControls.svelte src/lib/components/TransportControls.svelte src/App.svelte
|
||
git commit -m "feat: replace emoji icons with Lucide SVG components"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: Mode Toggle Shortcuts
|
||
|
||
**Files:**
|
||
- Modify: `src/App.svelte` (handleGlobalKeydown, lines ~220–234)
|
||
|
||
**Interfaces:**
|
||
- Consumes: existing `toggleMode()` function in App.svelte
|
||
- Produces: behavioral change only — both C and P now call `toggleMode()`
|
||
|
||
- [ ] **Step 1: Update key handlers**
|
||
|
||
In `handleGlobalKeydown` in `src/App.svelte`, replace the `'p'/'P'` and `'c'/'C'` cases. Both should call `toggleMode()` and handle the Player mode auto-show:
|
||
|
||
```typescript
|
||
case 'p':
|
||
case 'P':
|
||
case 'c':
|
||
case 'C':
|
||
e.preventDefault();
|
||
toggleMode();
|
||
break;
|
||
```
|
||
|
||
The existing `toggleMode()` function already handles showing controls when entering Player mode, so no additional logic is needed.
|
||
|
||
- [ ] **Step 2: Verify**
|
||
|
||
Run:
|
||
```bash
|
||
npx svelte-check --tsconfig ./tsconfig.json
|
||
npm test
|
||
```
|
||
Expected: 0 errors, 0 warnings, all tests pass.
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/App.svelte
|
||
git commit -m "feat: C and P both toggle between Clipper/Player modes"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 4: Cut Clip Feature
|
||
|
||
**Files:**
|
||
- Create: `src/lib/utils/clipRange.ts`
|
||
- Create: `tests/lib/utils/clipRange.test.ts`
|
||
- Modify: `src/App.svelte` (handleGlobalKeydown + cutClip function + PlayerControls props)
|
||
- Modify: `src/lib/components/PlayerControls.svelte` (add scissors button + onCutClip prop)
|
||
|
||
**Interfaces:**
|
||
- Consumes: `addClip(start, end)` from `$lib/stores/clips.svelte`, `setAppMode()` from `$lib/stores/preferences.svelte`, `session.currentTime` and `session.duration` from `$lib/stores/videoSession.svelte`
|
||
- Produces: `computeQuickClipRange(currentTime, duration, position, clipDuration?)` → `{ start: number; end: number } | null`
|
||
|
||
- [ ] **Step 1: Write failing tests for computeQuickClipRange**
|
||
|
||
Create `tests/lib/utils/clipRange.test.ts`:
|
||
|
||
```typescript
|
||
import { describe, it, expect } from 'vitest';
|
||
import { computeQuickClipRange } from '$lib/utils/clipRange';
|
||
|
||
describe('computeQuickClipRange', () => {
|
||
it('returns null when duration is 0', () => {
|
||
expect(computeQuickClipRange(5, 0, 'at')).toBeNull();
|
||
});
|
||
|
||
it('"at" creates clip from currentTime to currentTime+10', () => {
|
||
const result = computeQuickClipRange(30, 120, 'at');
|
||
expect(result).toEqual({ start: 30, end: 40 });
|
||
});
|
||
|
||
it('"before" creates clip from currentTime-10 to currentTime', () => {
|
||
const result = computeQuickClipRange(30, 120, 'before');
|
||
expect(result).toEqual({ start: 20, end: 30 });
|
||
});
|
||
|
||
it('"at" clamps end to duration', () => {
|
||
const result = computeQuickClipRange(115, 120, 'at');
|
||
expect(result).toEqual({ start: 115, end: 120 });
|
||
});
|
||
|
||
it('"before" clamps start to 0', () => {
|
||
const result = computeQuickClipRange(3, 120, 'before');
|
||
expect(result).toEqual({ start: 0, end: 3 });
|
||
});
|
||
|
||
it('accepts custom clip duration', () => {
|
||
const result = computeQuickClipRange(50, 120, 'at', 20);
|
||
expect(result).toEqual({ start: 50, end: 70 });
|
||
});
|
||
|
||
it('"at" at time 0 works', () => {
|
||
const result = computeQuickClipRange(0, 120, 'at');
|
||
expect(result).toEqual({ start: 0, end: 10 });
|
||
});
|
||
|
||
it('"before" at exact duration works', () => {
|
||
const result = computeQuickClipRange(120, 120, 'before');
|
||
expect(result).toEqual({ start: 110, end: 120 });
|
||
});
|
||
});
|
||
```
|
||
|
||
- [ ] **Step 2: Run tests to verify they fail**
|
||
|
||
Run:
|
||
```bash
|
||
npx vitest run tests/lib/utils/clipRange.test.ts
|
||
```
|
||
Expected: FAIL — module `$lib/utils/clipRange` not found.
|
||
|
||
- [ ] **Step 3: Implement computeQuickClipRange**
|
||
|
||
Create `src/lib/utils/clipRange.ts`:
|
||
|
||
```typescript
|
||
export type QuickClipPosition = 'at' | 'before';
|
||
|
||
export function computeQuickClipRange(
|
||
currentTime: number,
|
||
duration: number,
|
||
position: QuickClipPosition,
|
||
clipDuration = 10,
|
||
): { start: number; end: number } | null {
|
||
if (duration === 0) return null;
|
||
|
||
switch (position) {
|
||
case 'at':
|
||
return {
|
||
start: currentTime,
|
||
end: Math.min(currentTime + clipDuration, duration),
|
||
};
|
||
case 'before':
|
||
return {
|
||
start: Math.max(currentTime - clipDuration, 0),
|
||
end: currentTime,
|
||
};
|
||
default: {
|
||
const _exhaustive: never = position;
|
||
void _exhaustive;
|
||
return null;
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 4: Run tests to verify they pass**
|
||
|
||
Run:
|
||
```bash
|
||
npx vitest run tests/lib/utils/clipRange.test.ts
|
||
```
|
||
Expected: 8 tests pass.
|
||
|
||
- [ ] **Step 5: Add scissors button to PlayerControls**
|
||
|
||
In `src/lib/components/PlayerControls.svelte`, add the `Scissors` import (alongside existing Lucide imports from Task 2):
|
||
|
||
```typescript
|
||
import {
|
||
VolumeX,
|
||
Volume1,
|
||
Volume2,
|
||
Rewind,
|
||
FastForward,
|
||
Pause,
|
||
Play,
|
||
Scissors,
|
||
Captions,
|
||
PictureInPicture2,
|
||
Maximize,
|
||
Minimize,
|
||
} from '@lucide/svelte';
|
||
```
|
||
|
||
Add `onCutClip` to the props destructure:
|
||
|
||
```typescript
|
||
let {
|
||
visible,
|
||
captionsEnabled,
|
||
hasCaptions,
|
||
onToggleCaptions,
|
||
onOpenCaptionSettings,
|
||
onCutClip,
|
||
}: {
|
||
visible: boolean;
|
||
captionsEnabled: boolean;
|
||
hasCaptions: boolean;
|
||
onToggleCaptions: () => void;
|
||
onOpenCaptionSettings: () => void;
|
||
onCutClip: (position: 'at' | 'before') => void;
|
||
} = $props();
|
||
```
|
||
|
||
In the right controls group, insert the scissors button **between** the speed-wrapper `</div>` and the `{#if hasCaptions}` block:
|
||
|
||
```svelte
|
||
<button
|
||
class="ctrl-btn"
|
||
onclick={() => onCutClip('at')}
|
||
oncontextmenu={(e) => { e.preventDefault(); onCutClip('before'); }}
|
||
title="Cut clip at playhead (X) · Right-click: 10s before (Z)"
|
||
type="button"
|
||
><Scissors size={16} /></button>
|
||
```
|
||
|
||
- [ ] **Step 6: Wire up cutClip in App.svelte**
|
||
|
||
In `src/App.svelte`, add the import at the top (alongside existing imports):
|
||
|
||
```typescript
|
||
import { computeQuickClipRange } from '$lib/utils/clipRange';
|
||
import { addClip } from '$lib/stores/clips.svelte';
|
||
```
|
||
|
||
Note: `addClip` is already available via the existing import of `getSelectedClipId, removeClip, markInPoint, markOutPoint` — add `addClip` to that import line:
|
||
|
||
```typescript
|
||
import { getSelectedClipId, removeClip, markInPoint, markOutPoint, addClip } from '$lib/stores/clips.svelte';
|
||
```
|
||
|
||
Add the `cutClip` function after `toggleMode()`:
|
||
|
||
```typescript
|
||
function cutClip(position: 'at' | 'before') {
|
||
const range = computeQuickClipRange(session.currentTime, session.duration, position);
|
||
if (!range) return;
|
||
addClip(range.start, range.end);
|
||
setAppMode('clipper');
|
||
}
|
||
```
|
||
|
||
Pass `onCutClip` to the `<PlayerControls>` component:
|
||
|
||
```svelte
|
||
<PlayerControls
|
||
visible={showPlayerControls}
|
||
{captionsEnabled}
|
||
hasCaptions={session.hasCaptions || false}
|
||
onToggleCaptions={handleToggleCaptions}
|
||
onOpenCaptionSettings={() => {}}
|
||
onCutClip={cutClip}
|
||
/>
|
||
```
|
||
|
||
Add X/Z keyboard shortcuts in `handleGlobalKeydown`. Insert these cases **before** the `'f'/'F'` case:
|
||
|
||
```typescript
|
||
case 'x':
|
||
case 'X':
|
||
if (isPlayerMode) {
|
||
e.preventDefault();
|
||
cutClip('at');
|
||
}
|
||
break;
|
||
case 'z':
|
||
case 'Z':
|
||
if (isPlayerMode) {
|
||
e.preventDefault();
|
||
cutClip('before');
|
||
}
|
||
break;
|
||
```
|
||
|
||
- [ ] **Step 7: Verify**
|
||
|
||
Run:
|
||
```bash
|
||
npx svelte-check --tsconfig ./tsconfig.json
|
||
npm test
|
||
```
|
||
Expected: 0 errors, 0 warnings, all tests pass (including 8 new clipRange tests).
|
||
|
||
- [ ] **Step 8: Commit**
|
||
|
||
```bash
|
||
git add src/lib/utils/clipRange.ts tests/lib/utils/clipRange.test.ts src/App.svelte src/lib/components/PlayerControls.svelte
|
||
git commit -m "feat: cut clip from Player mode (X/Z keys, scissors button)"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 5: Tabbed About Dialog with Keyboard Shortcuts
|
||
|
||
**Files:**
|
||
- Modify: `src/lib/components/AboutDialog.svelte` (full rewrite of template + styles)
|
||
- Create: `tests/lib/components/AboutDialog.test.ts`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `getVersion()` from `@tauri-apps/api/app` (already used), `onClose` prop (unchanged)
|
||
- Produces: visual changes only — `onClose` prop API unchanged
|
||
|
||
- [ ] **Step 1: Write failing component tests**
|
||
|
||
Create `tests/lib/components/AboutDialog.test.ts`:
|
||
|
||
```typescript
|
||
import { describe, it, expect, vi } from 'vitest';
|
||
import { render, fireEvent } from '@testing-library/svelte';
|
||
import AboutDialog from '$lib/components/AboutDialog.svelte';
|
||
|
||
vi.mock('@tauri-apps/api/app', () => ({
|
||
getVersion: vi.fn().mockResolvedValue('0.2.1'),
|
||
}));
|
||
|
||
describe('AboutDialog', () => {
|
||
it('renders the About tab by default', () => {
|
||
const { getByText } = render(AboutDialog, {
|
||
props: { onClose: vi.fn() },
|
||
});
|
||
expect(getByText('GUI Video Clipper')).toBeTruthy();
|
||
expect(getByText('by cottongin')).toBeTruthy();
|
||
});
|
||
|
||
it('shows two tabs: About and Shortcuts', () => {
|
||
const { getByRole } = render(AboutDialog, {
|
||
props: { onClose: vi.fn() },
|
||
});
|
||
const tablist = getByRole('tablist');
|
||
expect(tablist).toBeTruthy();
|
||
expect(tablist.querySelectorAll('[role="tab"]')).toHaveLength(2);
|
||
});
|
||
|
||
it('switches to Shortcuts tab on click', async () => {
|
||
const { getByText, queryByText } = render(AboutDialog, {
|
||
props: { onClose: vi.fn() },
|
||
});
|
||
const shortcutsTab = getByText('Shortcuts');
|
||
await fireEvent.click(shortcutsTab);
|
||
|
||
expect(getByText('Play / Pause')).toBeTruthy();
|
||
expect(getByText('Toggle mode')).toBeTruthy();
|
||
expect(getByText('Player Mode')).toBeTruthy();
|
||
expect(getByText('Clipper Mode')).toBeTruthy();
|
||
});
|
||
|
||
it('switches back to About tab', async () => {
|
||
const { getByText } = render(AboutDialog, {
|
||
props: { onClose: vi.fn() },
|
||
});
|
||
await fireEvent.click(getByText('Shortcuts'));
|
||
await fireEvent.click(getByText('About'));
|
||
|
||
expect(getByText('GUI Video Clipper')).toBeTruthy();
|
||
expect(getByText('by cottongin')).toBeTruthy();
|
||
});
|
||
|
||
it('calls onClose when Close button is clicked', async () => {
|
||
const onClose = vi.fn();
|
||
const { getByText } = render(AboutDialog, {
|
||
props: { onClose },
|
||
});
|
||
await fireEvent.click(getByText('Close'));
|
||
expect(onClose).toHaveBeenCalled();
|
||
});
|
||
});
|
||
```
|
||
|
||
- [ ] **Step 2: Run tests to verify they fail**
|
||
|
||
Run:
|
||
```bash
|
||
npx vitest run tests/lib/components/AboutDialog.test.ts
|
||
```
|
||
Expected: FAIL — tests fail because the current AboutDialog has no tabs.
|
||
|
||
- [ ] **Step 3: Rewrite AboutDialog with tabs**
|
||
|
||
Replace the entire contents of `src/lib/components/AboutDialog.svelte`:
|
||
|
||
```svelte
|
||
<script lang="ts">
|
||
import { getVersion } from '@tauri-apps/api/app';
|
||
|
||
let { onClose }: { onClose: () => void } = $props();
|
||
|
||
let version = $state('');
|
||
let activeTab = $state<'about' | 'shortcuts'>('about');
|
||
|
||
$effect(() => {
|
||
getVersion().then((v) => {
|
||
version = v;
|
||
});
|
||
});
|
||
|
||
const globalShortcuts = [
|
||
{ key: 'Space', action: 'Play / Pause' },
|
||
{ key: 'K', action: 'Play / Pause' },
|
||
{ key: 'J', action: 'Shuttle slower (−0.25×)' },
|
||
{ key: 'L', action: 'Shuttle faster (+0.25×)' },
|
||
{ key: '←', action: 'Seek back 5s' },
|
||
{ key: '→', action: 'Seek forward 5s' },
|
||
{ key: 'Shift+←', action: 'Seek back 1s' },
|
||
{ key: 'Shift+→', action: 'Seek forward 1s' },
|
||
{ key: ',', action: 'Previous frame' },
|
||
{ key: '.', action: 'Next frame' },
|
||
{ key: '< (Shift+,)', action: 'Previous keyframe' },
|
||
{ key: '> (Shift+.)', action: 'Next keyframe' },
|
||
{ key: 'C / P', action: 'Toggle mode' },
|
||
{ key: '⌘/', action: 'About' },
|
||
];
|
||
|
||
const playerShortcuts = [
|
||
{ key: 'F', action: 'Toggle fullscreen' },
|
||
{ key: 'X', action: 'Cut clip at playhead → Clipper' },
|
||
{ key: 'Z', action: 'Cut clip 10s before playhead → Clipper' },
|
||
];
|
||
|
||
const clipperShortcuts = [
|
||
{ key: 'I', action: 'Set in-point' },
|
||
{ key: 'O', action: 'Set out-point' },
|
||
{ key: 'Delete / ⌫', action: 'Remove selected clip' },
|
||
{ key: '⌘E', action: 'Export' },
|
||
];
|
||
</script>
|
||
|
||
<div
|
||
class="overlay"
|
||
role="presentation"
|
||
tabindex="-1"
|
||
onclick={onClose}
|
||
onkeydown={(e) => {
|
||
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
|
||
if (e.key !== 'Escape') e.preventDefault();
|
||
onClose();
|
||
}
|
||
}}
|
||
>
|
||
<div
|
||
class="dialog"
|
||
class:wide={activeTab === 'shortcuts'}
|
||
role="dialog"
|
||
tabindex="-1"
|
||
onclick={(e) => e.stopPropagation()}
|
||
onkeydown={(e) => e.stopPropagation()}
|
||
>
|
||
<!-- Tab bar -->
|
||
<div class="tab-bar" role="tablist">
|
||
<button
|
||
class="tab"
|
||
class:active={activeTab === 'about'}
|
||
role="tab"
|
||
aria-selected={activeTab === 'about'}
|
||
onclick={() => { activeTab = 'about'; }}
|
||
type="button"
|
||
>About</button>
|
||
<button
|
||
class="tab"
|
||
class:active={activeTab === 'shortcuts'}
|
||
role="tab"
|
||
aria-selected={activeTab === 'shortcuts'}
|
||
onclick={() => { activeTab = 'shortcuts'; }}
|
||
type="button"
|
||
>Shortcuts</button>
|
||
</div>
|
||
|
||
{#if activeTab === 'about'}
|
||
<!-- About content -->
|
||
<div class="about-content">
|
||
<svg class="app-icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="blade-grad" gradientUnits="userSpaceOnUse" x1="256" y1="130" x2="256" y2="290">
|
||
<stop offset="0%" stop-color="#fb923c"/>
|
||
<stop offset="100%" stop-color="#ea580c"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="512" height="512" rx="90" fill="#18181b"/>
|
||
<g transform="translate(-3, 3)">
|
||
<polygon points="72,220 265,220 239,292 72,292" fill="#3f3f46"/>
|
||
<rect x="92" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||
<rect x="130" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||
<rect x="168" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||
<rect x="92" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||
<rect x="130" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||
<rect x="168" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||
</g>
|
||
<g transform="translate(3, -3)">
|
||
<polygon points="273,220 440,220 440,292 247,292" fill="#3f3f46"/>
|
||
<rect x="298" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||
<rect x="345" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||
<rect x="392" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||
<rect x="278" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||
<rect x="330" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||
<rect x="382" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||
</g>
|
||
<line x1="269" y1="216" x2="243" y2="296" stroke="#f97316" stroke-width="2" opacity="0.6"/>
|
||
<g transform="rotate(20, 256, 256)">
|
||
<polygon points="264,250 172,155 248,262" fill="url(#blade-grad)"/>
|
||
<polygon points="248,250 340,155 264,262" fill="url(#blade-grad)"/>
|
||
<polygon points="248,250 194,330 202,336 264,262" fill="#52525b"/>
|
||
<polygon points="264,250 318,330 310,336 248,262" fill="#52525b"/>
|
||
<circle cx="192" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
|
||
<circle cx="320" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
|
||
<circle cx="256" cy="256" r="7" fill="#a1a1aa"/>
|
||
</g>
|
||
</svg>
|
||
<h2>GUI Video Clipper</h2>
|
||
{#if version}
|
||
<span class="version">v{version}</span>
|
||
{/if}
|
||
<p class="author">by cottongin</p>
|
||
<p class="license">MIT License</p>
|
||
<a
|
||
class="repo-link"
|
||
href="https://code.cottongin.xyz/cottongin/gui-video-clipper"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
code.cottongin.xyz/cottongin/gui-video-clipper
|
||
</a>
|
||
</div>
|
||
{:else}
|
||
<!-- Shortcuts content -->
|
||
<div class="shortcuts-content">
|
||
<section>
|
||
<h3>Global</h3>
|
||
<table>
|
||
<tbody>
|
||
{#each globalShortcuts as { key, action }}
|
||
<tr>
|
||
<td class="key-cell"><kbd>{key}</kbd></td>
|
||
<td class="action-cell">{action}</td>
|
||
</tr>
|
||
{/each}
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section>
|
||
<h3>Player Mode</h3>
|
||
<table>
|
||
<tbody>
|
||
{#each playerShortcuts as { key, action }}
|
||
<tr>
|
||
<td class="key-cell"><kbd>{key}</kbd></td>
|
||
<td class="action-cell">{action}</td>
|
||
</tr>
|
||
{/each}
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section>
|
||
<h3>Clipper Mode</h3>
|
||
<table>
|
||
<tbody>
|
||
{#each clipperShortcuts as { key, action }}
|
||
<tr>
|
||
<td class="key-cell"><kbd>{key}</kbd></td>
|
||
<td class="action-cell">{action}</td>
|
||
</tr>
|
||
{/each}
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
</div>
|
||
{/if}
|
||
|
||
<div class="actions">
|
||
<button class="primary" onclick={onClose}>Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 900;
|
||
}
|
||
|
||
.dialog {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 24px 32px 32px;
|
||
max-width: 360px;
|
||
width: 100%;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
transition: max-width 0.2s ease;
|
||
}
|
||
|
||
.dialog.wide {
|
||
max-width: 520px;
|
||
max-height: 70vh;
|
||
}
|
||
|
||
/* --- Tabs --- */
|
||
.tab-bar {
|
||
display: flex;
|
||
gap: 0;
|
||
border-bottom: 1px solid var(--border);
|
||
width: 100%;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.tab {
|
||
flex: 1;
|
||
background: none;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
padding: 8px 0;
|
||
cursor: pointer;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.tab:hover {
|
||
color: var(--text-primary);
|
||
background: none;
|
||
}
|
||
|
||
.tab.active {
|
||
color: var(--accent);
|
||
border-bottom-color: var(--accent);
|
||
background: none;
|
||
}
|
||
|
||
/* --- About content --- */
|
||
.about-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.app-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 12px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
h2 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.version {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.author {
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
margin: 0;
|
||
}
|
||
|
||
.license {
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
margin: 0;
|
||
}
|
||
|
||
.repo-link {
|
||
color: var(--accent);
|
||
font-size: 12px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.repo-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* --- Shortcuts content --- */
|
||
.shortcuts-content {
|
||
width: 100%;
|
||
text-align: left;
|
||
overflow-y: auto;
|
||
max-height: calc(70vh - 140px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.shortcuts-content h3 {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
color: var(--text-muted);
|
||
margin: 0 0 6px;
|
||
}
|
||
|
||
.shortcuts-content table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.shortcuts-content tr {
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.shortcuts-content tr:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.key-cell {
|
||
width: 40%;
|
||
padding: 5px 8px 5px 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.action-cell {
|
||
padding: 5px 0;
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
}
|
||
|
||
kbd {
|
||
display: inline-block;
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--border);
|
||
border-radius: 4px;
|
||
padding: 1px 6px;
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
color: var(--text-primary);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* --- Actions --- */
|
||
.actions {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.primary {
|
||
background: var(--accent);
|
||
color: var(--bg-primary);
|
||
font-weight: 600;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
- [ ] **Step 4: Run tests to verify they pass**
|
||
|
||
Run:
|
||
```bash
|
||
npx vitest run tests/lib/components/AboutDialog.test.ts
|
||
```
|
||
Expected: 5 tests pass.
|
||
|
||
- [ ] **Step 5: Run full verification**
|
||
|
||
Run:
|
||
```bash
|
||
npx svelte-check --tsconfig ./tsconfig.json
|
||
npm test
|
||
```
|
||
Expected: 0 errors, 0 warnings, all tests pass.
|
||
|
||
- [ ] **Step 6: Commit**
|
||
|
||
```bash
|
||
git add src/lib/components/AboutDialog.svelte tests/lib/components/AboutDialog.test.ts
|
||
git commit -m "feat: tabbed About dialog with keyboard shortcuts reference"
|
||
```
|