From 424627b404aaf3980b50b25cc5c99dea50900395 Mon Sep 17 00:00:00 2001
From: Sloth <sloth.software.dev@protonmail.com>
Date: Sun, 20 Sep 2026 11:16:16 -0700
Subject: [PATCH 1/8] feat(app): add volume controls to global player

---
 src/ui/components/MiniPlayerBar.test.tsx  | 40 +++++++++++++
 src/ui/components/MiniPlayerBar.tsx       | 35 +++++++++++-
 src/ui/components/QueueDrawer.test.tsx    | 70 +++++++++++++++++++++++
 src/ui/components/QueueDrawer.tsx         | 28 ++++++++-
 src/ui/components/VolumePopover.tsx       | 48 ++++++++++++++++
 src/ui/hooks/useBackgroundPlayer.test.tsx | 42 ++++++++++++++
 src/ui/hooks/useBackgroundPlayer.tsx      | 21 +++++++
 7 files changed, 280 insertions(+), 4 deletions(-)
 create mode 100644 src/ui/components/VolumePopover.tsx

diff --git a/src/ui/components/MiniPlayerBar.test.tsx b/src/ui/components/MiniPlayerBar.test.tsx
index ccc4cb0..ca4181a 100644
--- a/src/ui/components/MiniPlayerBar.test.tsx
+++ b/src/ui/components/MiniPlayerBar.test.tsx
@@ -106,6 +106,46 @@ describe('MiniPlayerBar', () => {
     expect(await screen.findByText('Video One')).toBeInTheDocument();
   });
 
+  it('the volume popover opens on click, closes on a second click, and its mute button toggles muted', async () => {
+    const user = userEvent.setup();
+    const { container } = renderBar();
+    await user.click(screen.getByRole('button', { name: 'start playing (test)' }));
+    await screen.findByText('Video One');
+    const video = container.querySelector('video')!;
+
+    expect(screen.queryByRole('button', { name: 'Mute' })).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Show volume' }));
+    expect(await screen.findByRole('button', { name: 'Mute' })).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Mute' }));
+    expect(video.muted).toBe(true);
+    expect(await screen.findByRole('button', { name: 'Unmute' })).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Unmute' }));
+    expect(video.muted).toBe(false);
+
+    // hidden: true -- MUI's Popover marks everything outside itself
+    // aria-hidden while open, including this same anchor button, which is
+    // otherwise perfectly real and clickable.
+    await user.click(screen.getByRole('button', { name: 'Hide volume', hidden: true }));
+    expect(screen.queryByRole('button', { name: 'Unmute' })).not.toBeInTheDocument();
+  });
+
+  it('the volume popover\'s slider drives the underlying element\'s volume', async () => {
+    const user = userEvent.setup();
+    const { container } = renderBar();
+    await user.click(screen.getByRole('button', { name: 'start playing (test)' }));
+    await screen.findByText('Video One');
+    const video = container.querySelector('video')!;
+
+    await user.click(screen.getByRole('button', { name: 'Show volume' }));
+    const slider = await screen.findByRole('slider', { name: 'Volume' });
+    slider.focus();
+    await user.keyboard('{ArrowDown}');
+
+    expect(video.volume).toBeLessThan(1);
+  });
+
   it('the close button stops playback, hiding the bar', async () => {
     const user = userEvent.setup();
     renderBar();
diff --git a/src/ui/components/MiniPlayerBar.tsx b/src/ui/components/MiniPlayerBar.tsx
index 6a2723f..0ab43d3 100644
--- a/src/ui/components/MiniPlayerBar.tsx
+++ b/src/ui/components/MiniPlayerBar.tsx
@@ -5,12 +5,15 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import PauseIcon from '@mui/icons-material/Pause';
 import SkipPreviousIcon from '@mui/icons-material/SkipPrevious';
 import SkipNextIcon from '@mui/icons-material/SkipNext';
+import VolumeUpIcon from '@mui/icons-material/VolumeUp';
+import VolumeOffIcon from '@mui/icons-material/VolumeOff';
 import CloseIcon from '@mui/icons-material/Close';
 import MusicNoteIcon from '@mui/icons-material/MusicNote';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import { buildAppVideoUrl } from '../../utils/utils.ts';
 import { useBackgroundPlayer, videoDetailPathFor, formatPlaybackTime } from '../hooks/useBackgroundPlayer.tsx';
 import QueueDrawer from './QueueDrawer';
+import VolumePopover from './VolumePopover';
 
 // Persistent across every tab -- rendered in MainPage.tsx as a sibling to
 // its CustomTabPanels, the same placement BulkAddSidePanel already uses to
@@ -18,8 +21,12 @@ import QueueDrawer from './QueueDrawer';
 // -- the underlying <video> element (BackgroundPlayerProvider) keeps
 // playing regardless, this is just a control surface for it.
 export default function MiniPlayerBar() {
-  const { queue, currentIndex, current, paused, currentTime, duration, pause, resume, seek, next, previous, stop } = useBackgroundPlayer();
+  const {
+    queue, currentIndex, current, paused, currentTime, duration, volume, muted, setVolume, setMuted,
+    pause, resume, seek, next, previous, stop,
+  } = useBackgroundPlayer();
   const [queueOpen, setQueueOpen] = useState(false);
+  const [volumeAnchorEl, setVolumeAnchorEl] = useState<HTMLElement | null>(null);
 
   if (!current) return null;
 
@@ -79,7 +86,7 @@ export default function MiniPlayerBar() {
             </Box>
           </Box>
 
-          <Stack direction="row" alignItems="center" spacing={1} sx={{ width: 220, flexShrink: 0 }}>
+          <Stack direction="row" alignItems="center" spacing={1} sx={{ width: 260, flexShrink: 0 }}>
             <Typography variant="caption" color="text.secondary" sx={{ minWidth: 32, textAlign: 'right' }}>
               {formatPlaybackTime(currentTime)}
             </Typography>
@@ -87,6 +94,8 @@ export default function MiniPlayerBar() {
               size="small"
               value={Math.min(currentTime, duration || 0)}
               max={duration || 0}
+              // SAFETY: this Slider has no `range` prop, so MUI's onChange
+              // always reports a single number here, never number[].
               onChange={(_e, value) => seek(value as number)}
               disabled={!duration}
               aria-label="Seek"
@@ -94,6 +103,28 @@ export default function MiniPlayerBar() {
             <Typography variant="caption" color="text.secondary" sx={{ minWidth: 32 }}>
               {formatPlaybackTime(duration)}
             </Typography>
+            {/* Anchored inside the same Stack as the seek slider -- not as a
+                sibling further along the bar -- so it keeps the same
+                breathing room from the window edge that QueueDrawer's own
+                volume button has inside its (narrower) drawer panel. */}
+            <Tooltip title={volumeAnchorEl ? 'Hide volume' : 'Show volume'}>
+              <IconButton
+                size="small"
+                onClick={(e) => setVolumeAnchorEl(volumeAnchorEl ? null : e.currentTarget)}
+                aria-label={volumeAnchorEl ? 'Hide volume' : 'Show volume'}
+              >
+                {muted || volume === 0 ? <VolumeOffIcon fontSize="small" /> : <VolumeUpIcon fontSize="small" />}
+              </IconButton>
+            </Tooltip>
+            <VolumePopover
+              open={!!volumeAnchorEl}
+              anchorEl={volumeAnchorEl}
+              onClose={() => setVolumeAnchorEl(null)}
+              volume={volume}
+              muted={muted}
+              onVolumeChange={setVolume}
+              onToggleMute={() => setMuted(!muted)}
+            />
           </Stack>
 
           {queue.length > 1 &&
diff --git a/src/ui/components/QueueDrawer.test.tsx b/src/ui/components/QueueDrawer.test.tsx
index 2a578d4..735e9aa 100644
--- a/src/ui/components/QueueDrawer.test.tsx
+++ b/src/ui/components/QueueDrawer.test.tsx
@@ -5,6 +5,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router';
 import QueueDrawer from './QueueDrawer';
+import MiniPlayerBar from './MiniPlayerBar';
 import { BackgroundPlayerProvider, useBackgroundPlayer, type BackgroundPlayerVideo } from '../hooks/useBackgroundPlayer.tsx';
 
 function makeVideo(overrides: Partial<BackgroundPlayerVideo> = {}): BackgroundPlayerVideo {
@@ -166,6 +167,75 @@ describe('QueueDrawer', () => {
     expect(screen.getByRole('heading', { level: 6 })).toHaveTextContent('Video Two');
   });
 
+  it('the volume popover opens on click, closes on a second click, and its mute button toggles muted', async () => {
+    const user = userEvent.setup();
+    const videos = [makeVideo({ videoId: 'v1' })];
+    renderDrawer(videos);
+    await user.click(screen.getByRole('button', { name: 'enqueue v1 (test)' }));
+    await user.click(screen.getByRole('button', { name: 'open drawer (test)' }));
+    await screen.findByRole('button', { name: 'Show volume' });
+
+    expect(screen.queryByRole('button', { name: 'Mute' })).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Show volume' }));
+    await screen.findByRole('button', { name: 'Mute' });
+
+    await user.click(screen.getByRole('button', { name: 'Mute' }));
+
+    expect(document.querySelector('video')).toHaveProperty('muted', true);
+    expect(await screen.findByRole('button', { name: 'Unmute' })).toBeInTheDocument();
+
+    // hidden: true -- MUI's Popover marks everything outside itself
+    // aria-hidden while open, including this same anchor button, which is
+    // otherwise perfectly real and clickable.
+    await user.click(screen.getByRole('button', { name: 'Hide volume', hidden: true }));
+    expect(screen.queryByRole('button', { name: 'Unmute' })).not.toBeInTheDocument();
+  });
+
+  it('the volume popover\'s slider drives the underlying element\'s volume', async () => {
+    const user = userEvent.setup();
+    const videos = [makeVideo({ videoId: 'v1' })];
+    renderDrawer(videos);
+    await user.click(screen.getByRole('button', { name: 'enqueue v1 (test)' }));
+    await user.click(screen.getByRole('button', { name: 'open drawer (test)' }));
+
+    await user.click(screen.getByRole('button', { name: 'Show volume' }));
+    const slider = await screen.findByRole('slider', { name: 'Volume' });
+    slider.focus();
+    await user.keyboard('{ArrowDown}');
+
+    expect((document.querySelector('video') as HTMLVideoElement).volume).toBeLessThan(1);
+  });
+
+  it('muting from the drawer is reflected in MiniPlayerBar\'s own control once minimized -- both surfaces share one volume state', async () => {
+    const user = userEvent.setup();
+    const videos = [makeVideo({ videoId: 'v1' })];
+    // MiniPlayerBar mounted alongside the drawer, both under the same
+    // provider -- same setup MainPage.tsx itself uses, and the only way to
+    // confirm the two surfaces' controls actually share state rather than
+    // each tracking their own copy. MiniPlayerBar hides itself while the
+    // drawer is open (see its own queueOpen state), so its own volume
+    // popover only becomes reachable again after closing the drawer below.
+    render(
+      <MemoryRouter>
+        <BackgroundPlayerProvider>
+          <Harness videos={videos} onClose={vi.fn()} />
+          <MiniPlayerBar />
+        </BackgroundPlayerProvider>
+      </MemoryRouter>,
+    );
+    await user.click(screen.getByRole('button', { name: 'enqueue v1 (test)' }));
+    await user.click(screen.getByRole('button', { name: 'open drawer (test)' }));
+    await user.click(screen.getByRole('button', { name: 'Show volume' }));
+    await user.click(await screen.findByRole('button', { name: 'Mute' }));
+
+    // MUI's Modal (which Drawer is built on) closes on Escape by default --
+    // same convention MiniPlayerBar.test.tsx's own tests already use.
+    await user.keyboard('{Escape}');
+
+    await user.click(await screen.findByRole('button', { name: 'Show volume' }));
+    expect(await screen.findByRole('button', { name: 'Unmute' })).toBeInTheDocument();
+  });
+
   describe('audio/video mode toggle', () => {
     it('defaults to audio only -- no live video frame, no native controls', async () => {
       const user = userEvent.setup();
diff --git a/src/ui/components/QueueDrawer.tsx b/src/ui/components/QueueDrawer.tsx
index d512568..bce7aff 100644
--- a/src/ui/components/QueueDrawer.tsx
+++ b/src/ui/components/QueueDrawer.tsx
@@ -7,12 +7,15 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import PauseIcon from '@mui/icons-material/Pause';
 import SkipPreviousIcon from '@mui/icons-material/SkipPrevious';
 import SkipNextIcon from '@mui/icons-material/SkipNext';
+import VolumeUpIcon from '@mui/icons-material/VolumeUp';
+import VolumeOffIcon from '@mui/icons-material/VolumeOff';
 import MusicNoteIcon from '@mui/icons-material/MusicNote';
 import AudiotrackIcon from '@mui/icons-material/Audiotrack';
 import VideocamIcon from '@mui/icons-material/Videocam';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { buildAppVideoUrl } from '../../utils/utils.ts';
 import { useBackgroundPlayer, videoDetailPathFor, formatPlaybackTime } from '../hooks/useBackgroundPlayer.tsx';
+import VolumePopover from './VolumePopover';
 
 const MIN_WIDTH = 280;
 const MAX_WIDTH = 640;
@@ -24,11 +27,12 @@ type MediaMode = 'audio' | 'video';
 // in from the screen's left edge.
 export default function QueueDrawer({ open, onClose }: { open: boolean; onClose: () => void }) {
   const {
-    queue, currentIndex, current, paused, currentTime, duration, pause, resume, seek,
-    next, previous, playAt, removeAt, setVisibleContainer,
+    queue, currentIndex, current, paused, currentTime, duration, volume, muted, setVolume, setMuted,
+    pause, resume, seek, next, previous, playAt, removeAt, setVisibleContainer,
   } = useBackgroundPlayer();
   const [mediaMode, setMediaMode] = useState<MediaMode>('audio');
   const [width, setWidth] = useState(DEFAULT_WIDTH);
+  const [volumeAnchorEl, setVolumeAnchorEl] = useState<HTMLElement | null>(null);
   const draggingRef = useRef(false);
 
   // Drags the drawer's right edge to resize it -- window-level pointermove/
@@ -143,6 +147,8 @@ export default function QueueDrawer({ open, onClose }: { open: boolean; onClose:
               size="small"
               value={Math.min(currentTime, duration || 0)}
               max={duration || 0}
+              // SAFETY: this Slider has no `range` prop, so MUI's onChange
+              // always reports a single number here, never number[].
               onChange={(_e, value) => seek(value as number)}
               disabled={!duration}
               aria-label="Seek"
@@ -150,6 +156,24 @@ export default function QueueDrawer({ open, onClose }: { open: boolean; onClose:
             <Typography variant="caption" color="text.secondary" sx={{ minWidth: 32 }}>
               {formatPlaybackTime(duration)}
             </Typography>
+            <Tooltip title={volumeAnchorEl ? 'Hide volume' : 'Show volume'}>
+              <IconButton
+                size="small"
+                onClick={(e) => setVolumeAnchorEl(volumeAnchorEl ? null : e.currentTarget)}
+                aria-label={volumeAnchorEl ? 'Hide volume' : 'Show volume'}
+              >
+                {muted || volume === 0 ? <VolumeOffIcon fontSize="small" /> : <VolumeUpIcon fontSize="small" />}
+              </IconButton>
+            </Tooltip>
+            <VolumePopover
+              open={!!volumeAnchorEl}
+              anchorEl={volumeAnchorEl}
+              onClose={() => setVolumeAnchorEl(null)}
+              volume={volume}
+              muted={muted}
+              onVolumeChange={setVolume}
+              onToggleMute={() => setMuted(!muted)}
+            />
           </Stack>}
 
         <Divider />
diff --git a/src/ui/components/VolumePopover.tsx b/src/ui/components/VolumePopover.tsx
new file mode 100644
index 0000000..84d3065
--- /dev/null
+++ b/src/ui/components/VolumePopover.tsx
@@ -0,0 +1,48 @@
+import { Box, IconButton, Popover, Slider, Tooltip } from '@mui/material';
+import VolumeUpIcon from '@mui/icons-material/VolumeUp';
+import VolumeOffIcon from '@mui/icons-material/VolumeOff';
+
+// Shared by MiniPlayerBar and QueueDrawer -- both anchor this off their own
+// volume IconButton (which only opens/closes the popover; see its own
+// onClick), with the actual mute toggle living here instead so the two
+// interactions on that one icon don't collide.
+export default function VolumePopover({ open, anchorEl, onClose, volume, muted, onVolumeChange, onToggleMute }: {
+  open: boolean;
+  anchorEl: HTMLElement | null;
+  onClose: () => void;
+  volume: number;
+  muted: boolean;
+  onVolumeChange: (value: number) => void;
+  onToggleMute: () => void;
+}) {
+  return (
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      transformOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+    >
+      <Box sx={{ p: 1.5, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
+        <Slider
+          size="small"
+          orientation="vertical"
+          value={volume}
+          min={0}
+          max={1}
+          step={0.01}
+          // SAFETY: this Slider has no `range` prop, so MUI's onChange
+          // always reports a single number here, never number[].
+          onChange={(_e, value) => onVolumeChange(value as number)}
+          aria-label="Volume"
+          sx={{ height: 96 }}
+        />
+        <Tooltip title={muted ? 'Unmute' : 'Mute'}>
+          <IconButton size="small" onClick={onToggleMute} aria-label={muted ? 'Unmute' : 'Mute'}>
+            {muted || volume === 0 ? <VolumeOffIcon fontSize="small" /> : <VolumeUpIcon fontSize="small" />}
+          </IconButton>
+        </Tooltip>
+      </Box>
+    </Popover>
+  );
+}
diff --git a/src/ui/hooks/useBackgroundPlayer.test.tsx b/src/ui/hooks/useBackgroundPlayer.test.tsx
index 65892cb..9fc4bce 100644
--- a/src/ui/hooks/useBackgroundPlayer.test.tsx
+++ b/src/ui/hooks/useBackgroundPlayer.test.tsx
@@ -306,6 +306,48 @@ describe('useBackgroundPlayer', () => {
     expect(result.current.duration).toBe(0);
   });
 
+  it('starts at full volume, unmuted', () => {
+    const { result } = renderHook(() => useBackgroundPlayer(), { wrapper: BackgroundPlayerProvider });
+    expect(result.current.volume).toBe(1);
+    expect(result.current.muted).toBe(false);
+  });
+
+  it('setVolume() updates state and the underlying element\'s volume', async () => {
+    const { result } = renderHook(() => useBackgroundPlayer(), { wrapper: BackgroundPlayerProvider });
+    act(() => result.current.enqueue(makeVideo()));
+    await waitFor(() => expect(result.current.current).not.toBeNull());
+
+    act(() => result.current.setVolume(0.4));
+
+    expect(result.current.volume).toBe(0.4);
+    expect(result.current.videoRef.current?.volume).toBe(0.4);
+  });
+
+  it('setMuted() updates state and the underlying element\'s muted flag', async () => {
+    const { result } = renderHook(() => useBackgroundPlayer(), { wrapper: BackgroundPlayerProvider });
+    act(() => result.current.enqueue(makeVideo()));
+    await waitFor(() => expect(result.current.current).not.toBeNull());
+
+    act(() => result.current.setMuted(true));
+
+    expect(result.current.muted).toBe(true);
+    expect(result.current.videoRef.current?.muted).toBe(true);
+  });
+
+  it('applies the current volume/muted to a freshly-loaded source, not just the element already playing', async () => {
+    const { result } = renderHook(() => useBackgroundPlayer(), { wrapper: BackgroundPlayerProvider });
+    act(() => result.current.enqueue(makeVideo({ videoId: 'v1' })));
+    await waitFor(() => expect(result.current.current?.videoId).toBe('v1'));
+    act(() => result.current.setVolume(0.2));
+    act(() => result.current.setMuted(true));
+
+    act(() => result.current.enqueue(makeVideo({ videoId: 'v2' })));
+    act(() => result.current.playAt(1));
+
+    expect(result.current.videoRef.current?.volume).toBe(0.2);
+    expect(result.current.videoRef.current?.muted).toBe(true);
+  });
+
   it('shares one live instance across every consumer under the same provider', async () => {
     const { result: a } = renderHook(() => useBackgroundPlayer(), { wrapper: BackgroundPlayerProvider });
     // Two independently-mounted providers -- confirms state is scoped per
diff --git a/src/ui/hooks/useBackgroundPlayer.tsx b/src/ui/hooks/useBackgroundPlayer.tsx
index 6e46962..bb4da5a 100644
--- a/src/ui/hooks/useBackgroundPlayer.tsx
+++ b/src/ui/hooks/useBackgroundPlayer.tsx
@@ -108,6 +108,12 @@ function useBackgroundPlayerState() {
   const [paused, setPaused] = useState(true);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
+  // Shared between MiniPlayerBar.tsx and QueueDrawer.tsx's own volume
+  // controls, same reason paused/currentTime/duration are lifted here rather
+  // than each surface tracking its own -- both must always show/drive the
+  // same number, since they control the same <video> element.
+  const [volume, setVolumeState] = useState(1);
+  const [muted, setMutedState] = useState(false);
   // Set by QueueDrawer.tsx while it's open -- see the Provider below, which
   // manually reparents (via a raw DOM appendChild, not React reconciliation)
   // the one real <video> element into this container instead of its default
@@ -135,6 +141,12 @@ function useBackgroundPlayerState() {
     const el = videoRef.current;
     if (!el) return;
     el.src = buildAppVideoUrl(video.sourcePath);
+    // Reapplied on every load even though it's the same persistent element
+    // (see the module-level comment above) -- keeps a freshly-loaded source
+    // from ever briefly starting at the browser's own default volume/muted
+    // before this hook's own state has a chance to reassert itself.
+    el.volume = volume;
+    el.muted = muted;
     // .catch(() => {}) -- an interrupted/rejected play promise (e.g. a
     // pause() racing it) is expected, routine behavior for a <video>
     // element, not a real error; same convention LibraryVideoPlayer.tsx's
@@ -268,6 +280,14 @@ function useBackgroundPlayerState() {
   const seek = (seconds: number) => {
     if (videoRef.current) videoRef.current.currentTime = seconds;
   };
+  const setVolume = (next: number) => {
+    setVolumeState(next);
+    if (videoRef.current) videoRef.current.volume = next;
+  };
+  const setMuted = (next: boolean) => {
+    setMutedState(next);
+    if (videoRef.current) videoRef.current.muted = next;
+  };
   // Clears the whole queue (hiding the mini-bar) rather than just pausing
   // -- explicit "I'm done with this," distinct from pause/resume.
   const stop = () => {
@@ -278,6 +298,7 @@ function useBackgroundPlayerState() {
 
   return {
     videoRef, queue, currentIndex, current, paused, currentTime, duration,
+    volume, muted, setVolume, setMuted,
     visibleContainer, setVisibleContainer,
     toastMessage, showToast, dismissToast: () => setToastMessage(null),
     enqueue, next, previous, playAt, removeAt, pause, resume, seek, stop,

From 31656847ee515567730aa0c1efc261814431a824 Mon Sep 17 00:00:00 2001
From: Sloth <sloth.software.dev@protonmail.com>
Date: Sun, 20 Sep 2026 19:17:31 -0700
Subject: [PATCH 2/8] feat(app): improve clipping tool resilience and add
 button to recover clip timestamps on existing clips

---
 src/electron/ffmpegUtils.mjs                  | 145 +++++++++++---
 src/electron/ffmpegUtils.test.mjs             |  64 ++++--
 src/electron/library.mjs                      |  11 +-
 src/electron/library.test.mjs                 |  18 +-
 src/electron/main.mjs                         |   1 +
 src/types.ts                                  |   4 +
 src/ui/components/ClipCollectionView.test.tsx | 184 +++++++++++-------
 src/ui/components/ClipCollectionView.tsx      |  26 +++
 .../LibraryVideoPlayerWithTools.tsx           |  11 +-
 src/ui/screens/LibraryScreen.tsx              |  25 ++-
 src/ui/screens/LibraryVideoDetail.test.tsx    |  66 +++++--
 src/ui/screens/LibraryVideoDetail.tsx         |  22 ++-
 12 files changed, 436 insertions(+), 141 deletions(-)

diff --git a/src/electron/ffmpegUtils.mjs b/src/electron/ffmpegUtils.mjs
index 284969a..d63739c 100644
--- a/src/electron/ffmpegUtils.mjs
+++ b/src/electron/ffmpegUtils.mjs
@@ -280,37 +280,87 @@ export function createFfmpegRunner({ ffmpegBinaryPath, ffprobeBinaryPath, onLog,
         });
     }
 
-    // Below this fraction of the clip's own length, or this many seconds in
-    // absolute terms, a keyframe-rounded start is a rounding error nobody
-    // will notice (a 2s-early start on a 10-minute clip is 0.3% of it).
-    // Above it, a real, perceptible chunk of what the user asked for would
-    // be missing (that same 2s on a 3-second clip is 65% of it) -- these
-    // numbers aren't tuned against real user reports, just chosen to
-    // separate those two cases by a wide margin.
-    const KEYFRAME_RISK_RATIO_THRESHOLD = 0.1;
-    const KEYFRAME_RISK_ABSOLUTE_FLOOR_SECONDS = 0.5;
+    // Two independent reasons a copy-mode clip's keyframe-rounded start can
+    // be wrong -- each gets its own threshold rather than folding them into
+    // one number, since they don't scale the same way:
+    //  - A/V sync: under stream copy, video can only start on a keyframe,
+    //    but audio has no such restriction and lands almost exactly on the
+    //    requested point -- confirmed directly against a real clip whose
+    //    video and audio, after copy-mode trimming, started ~0.46s apart
+    //    even though the keyframe offset causing it was under 1% of that
+    //    clip's own length (see clipAndConvert's own comment). That gap is a
+    //    perceptual constant, not something that gets less noticeable on a
+    //    longer clip -- ITU-R BT.1359 puts the detectability threshold
+    //    around 45ms (audio ahead of video) to 125ms (audio behind); 100ms
+    //    is a reasonable single cutoff given this is already a coarse proxy
+    //    (measuring video's own rounding, not the actual video/audio
+    //    difference -- audio's rounding is comparatively negligible).
+    //  - Content loss: even a sync-safe offset can still eat a real chunk of
+    //    a *very short* clip (a 0.4s-early start is a rounding error on a
+    //    10-minute clip, but is most of a 3-second one) -- kept as a
+    //    fraction-of-clip-length check alongside the fixed sync floor above,
+    //    not instead of it, since the two failure modes are unrelated.
+    const AV_SYNC_RISK_THRESHOLD_SECONDS = 0.1;
+    const CONTENT_LOSS_RISK_RATIO_THRESHOLD = 0.1;
 
     async function isKeyframeRoundingRisky(inputPath, startSeconds, totalDurationSeconds) {
         if (!(totalDurationSeconds > 0)) return false;
         const keyframeBefore = await findLastKeyframeAtOrBefore(inputPath, startSeconds);
         const offset = Math.max(0, startSeconds - keyframeBefore);
-        return offset > KEYFRAME_RISK_ABSOLUTE_FLOOR_SECONDS
-            && (offset / totalDurationSeconds) > KEYFRAME_RISK_RATIO_THRESHOLD;
+        return offset > AV_SYNC_RISK_THRESHOLD_SECONDS
+            || (offset / totalDurationSeconds) > CONTENT_LOSS_RISK_RATIO_THRESHOLD;
+    }
+
+    // How much earlier than the requested start to land the fast,
+    // index-based input seek before handing the small remainder off to an
+    // exact output-side seek -- see buildSplitSeekArgs's own comment for why
+    // splitting the seek this way matters. Comfortably larger than the
+    // keyframe intervals seen in real library files (~2-10s, per
+    // KEYFRAME_SEARCH_WINDOW_SECONDS's own comment), so the coarse seek
+    // always lands before any keyframe the fine seek might need to decode
+    // through, while still keeping the input seek itself a genuine O(1)
+    // index jump rather than a slow linear read from the start of the file.
+    const COARSE_SEEK_BUFFER_SECONDS = 15;
+
+    // Splits a single requested start time into a fast, approximate
+    // input-side seek plus an exact output-side remainder -- the standard
+    // ffmpeg technique for frame-accurate seeking without paying for a full
+    // linear read from the start of the file
+    // (https://trac.ffmpeg.org/wiki/Seeking). Used only for the video-only
+    // re-encode path below: a single input-side -ss leaves the re-encoded
+    // video stream frame-accurate regardless (decoding always discards
+    // frames before the requested point), but leaves the *copied* audio
+    // stream still landing wherever that one input seek happened to put it
+    // -- an output-side seek is what actually trims a copied stream
+    // precisely, packet by packet, without decoding it. See clipAndConvert's
+    // own comment for the full reasoning and the real numbers behind it.
+    function buildSplitSeekArgs(startSeconds) {
+        const coarseSeekSeconds = Math.max(0, startSeconds - COARSE_SEEK_BUFFER_SECONDS);
+        const fineSeekSeconds = startSeconds - coarseSeekSeconds;
+        return {
+            preInputArgs: coarseSeekSeconds > 0 ? ['-ss', String(coarseSeekSeconds)] : [],
+            fineSeekArgs: fineSeekSeconds > 0 ? ['-ss', String(fineSeekSeconds)] : [],
+        };
     }
 
     // "Same as source" (format 'source') means don't change the codec, only
-    // stop stream-copying -- so when a keyframe-risk re-encode is needed
-    // there, it still has to re-encode into *something* resembling the
-    // source rather than a fixed target. Only VP8/VP9 (-> WebM's own codecs)
-    // is special-cased, matching convertWithFallback/the reencodeCodecArgs
-    // below -- anything else (including codecs this bundled ffmpeg can't
-    // encode) falls back to the same libx264/aac default those use, which is
-    // already correct for the overwhelmingly common case (yt-dlp downloads
-    // are forced to --merge-output-format mp4, i.e. already h264/aac).
-    async function reencodeCodecArgsMatchingSource(inputPath) {
+    // stop stream-copying the video -- so when a keyframe-risk re-encode is
+    // needed there, it still has to re-encode into *something* resembling
+    // the source rather than a fixed target. Only VP8/VP9 (-> WebM's own
+    // codecs) is special-cased, matching convertWithFallback/the
+    // reencodeCodecArgs below -- anything else (including codecs this
+    // bundled ffmpeg can't encode) falls back to the same libx264 default
+    // those use, which is already correct for the overwhelmingly common case
+    // (yt-dlp downloads are forced to --merge-output-format mp4, i.e.
+    // already h264). Video-only, not video+audio: audio is never actually at
+    // risk from keyframe rounding (see isKeyframeRoundingRisky's own
+    // comment) -- clipAndConvert keeps stream-copying it even on this
+    // "risky" path, so re-encoding it too would only cost quality/time for
+    // no sync benefit.
+    async function reencodeVideoCodecArgsMatchingSource(inputPath) {
         const streams = await probeMediaStreams(inputPath).catch(() => []);
         const isVp8or9 = streams.some((s) => s.codecType === 'video' && /^vp[89]$/.test(s.codecName || ''));
-        return isVp8or9 ? ['-c:v', 'libvpx-vp9', '-c:a', 'libopus'] : ['-c:v', 'libx264', '-c:a', 'aac'];
+        return isVp8or9 ? ['-c:v', 'libvpx-vp9'] : ['-c:v', 'libx264'];
     }
 
     // Clip [start,end] and, optionally, convert format in one pass -- not a
@@ -334,15 +384,34 @@ export function createFfmpegRunner({ ffmpegBinaryPath, ffprobeBinaryPath, onLog,
     // makes the demuxer jump to the keyframe *at or before* the requested
     // point, so video and audio both start together at that same boundary --
     // zero re-encoding, zero quality/frame loss, just a clip that may start
-    // up to one GOP length earlier than the exact requested timestamp (the
-    // standard, universally-recommended tradeoff for lossless trimming).
+    // up to one GOP length earlier than the exact requested timestamp.
+    //
+    // That tradeoff has a real, separate cost of its own, though: audio
+    // isn't keyframe-bound the way video is, so its own copy-mode trim lands
+    // much closer to the requested point than video's does -- confirmed
+    // directly against a real clip (start 00:00:23.290 into an AV1/Opus
+    // source) where the nearest keyframe at or before that point was at
+    // 21.855s, and the actual output file's first video packet landed at
+    // -1.468s relative to the intended start while its first audio packet
+    // landed at -1.009s -- a ~0.46s *relative* offset between the two
+    // streams baked permanently into the file, not something a player can
+    // ever correct for. isKeyframeRoundingRisky below exists specifically to
+    // catch this -- when it does, the branches below re-encode video only
+    // (frame-accurate regardless of seek placement, since decoding always
+    // discards frames before the requested point) while still
+    // stream-copying audio via buildSplitSeekArgs's output-side fine seek
+    // (confirmed against the same real file: video and audio then land
+    // 0.033s/0.011s after the intended start, a ~0.02s difference -- well
+    // under the ~45-125ms perceptibility range cited in
+    // isKeyframeRoundingRisky's own comment), rather than the coarse
+    // single-input-seek used by the fast copy-both path below (which would
+    // leave audio just as unfixed as video was).
     // startSeconds (plain seconds, separate from the HH:MM:SS `start` string
     // ffmpeg itself takes) drives isKeyframeRoundingRisky below -- when that
-    // tradeoff would actually cost a noticeable chunk of a short clip, this
-    // skips straight to a real re-encode (frame-accurate, since re-encoding
-    // decodes every frame rather than copying packets) instead of accepting
-    // it, without paying that re-encode cost on the vast majority of clips
-    // where the rounding error is negligible.
+    // tradeoff would actually cost a noticeable chunk of a short clip, or
+    // risk an audible A/V sync gap, this skips straight to that video-only
+    // re-encode instead of accepting it, without paying any re-encode cost
+    // on the vast majority of clips where the rounding error is negligible.
     // -to (an absolute output timestamp) is replaced with -t (a duration):
     // once the input has been seeked, -to's "absolute timestamp" meaning is
     // no longer relative to the original file, but -t's plain duration is
@@ -370,8 +439,24 @@ export function createFfmpegRunner({ ffmpegBinaryPath, ffprobeBinaryPath, onLog,
 
         if (isSourceFormat) {
             if (forceReencode || risky) {
-                const sourceReencodeCodecArgs = await reencodeCodecArgsMatchingSource(inputPath);
-                await runFfmpegWithProgress({ inputPath, outputPath, codecArgs: [...durationArgs, ...sourceReencodeCodecArgs], totalDurationSeconds, onProgress, preInputArgs });
+                const videoCodecArgs = await reencodeVideoCodecArgsMatchingSource(inputPath);
+                const codecArgs = [...durationArgs, ...videoCodecArgs, '-c:a', 'copy'];
+                // The split seek needs a concrete startSeconds to divide --
+                // an older/backward-compatible caller that only ever passes
+                // forceReencode without it (startSeconds == null skips the
+                // risk check above entirely, but forceReencode can still
+                // reach here on its own) falls back to the plain single
+                // input-side seek instead, same placement as the fast path
+                // below, since there's nothing to split.
+                if (startSeconds != null) {
+                    const { preInputArgs: splitPreInputArgs, fineSeekArgs } = buildSplitSeekArgs(startSeconds);
+                    await runFfmpegWithProgress({
+                        inputPath, outputPath, codecArgs, totalDurationSeconds, onProgress,
+                        preInputArgs: splitPreInputArgs, extraInputArgs: fineSeekArgs,
+                    });
+                    return;
+                }
+                await runFfmpegWithProgress({ inputPath, outputPath, codecArgs, totalDurationSeconds, onProgress, preInputArgs });
                 return;
             }
             await runFfmpegWithProgress({ inputPath, outputPath, codecArgs: [...durationArgs, '-c', 'copy'], totalDurationSeconds, onProgress, preInputArgs });
diff --git a/src/electron/ffmpegUtils.test.mjs b/src/electron/ffmpegUtils.test.mjs
index 8167ec6..4452eec 100644
--- a/src/electron/ffmpegUtils.test.mjs
+++ b/src/electron/ffmpegUtils.test.mjs
@@ -61,10 +61,11 @@ beforeEach(() => {
 });
 
 describe('clipAndConvert', () => {
-  it('stream-copies (fast path) when the keyframe rounding error is negligible relative to the clip length', async () => {
-    // 10-minute clip, nearest keyframe just 2s before the requested start --
-    // 2/600 is nowhere near either risk threshold.
-    stubSpawn({ keyframeTimes: [598], streams: [{ codecType: 'video', codecName: 'h264' }] });
+  it('stream-copies (fast path) when the keyframe rounding error is negligible for both A/V sync and content loss', async () => {
+    // 10-minute clip, nearest keyframe just 0.05s before the requested start
+    // -- under the fixed A/V-sync threshold, and 0.05/600 is nowhere near
+    // the content-loss ratio threshold either.
+    stubSpawn({ keyframeTimes: [599.95], streams: [{ codecType: 'video', codecName: 'h264' }] });
     const { clipAndConvert } = createFfmpegRunner({ ffmpegBinaryPath: FFMPEG_BIN, ffprobeBinaryPath: FFPROBE_BIN });
 
     await clipAndConvert({
@@ -76,9 +77,10 @@ describe('clipAndConvert', () => {
     expect(ffmpegCallArgs()).not.toEqual(expect.arrayContaining(['-c:v']));
   });
 
-  it('auto-upgrades to a re-encode when the keyframe rounding error would eat a large fraction of a short clip', async () => {
+  it('auto-upgrades to a video-only re-encode (audio still copied) when the keyframe rounding error would eat a large fraction of a short clip', async () => {
     // 12-second clip, nearest keyframe 8s before the requested start -- 8/12
-    // is a large majority of the clip.
+    // is a large majority of the clip (and also well past the fixed A/V-sync
+    // threshold on its own).
     stubSpawn({ keyframeTimes: [2], streams: [{ codecType: 'video', codecName: 'h264' }] });
     const { clipAndConvert } = createFfmpegRunner({ ffmpegBinaryPath: FFMPEG_BIN, ffprobeBinaryPath: FFPROBE_BIN });
 
@@ -87,11 +89,23 @@ describe('clipAndConvert', () => {
       format: 'source', totalDurationSeconds: 12,
     });
 
-    expect(ffmpegCallArgs()).toEqual(expect.arrayContaining(['-c:v', 'libx264', '-c:a', 'aac']));
-    expect(ffmpegCallArgs()).not.toEqual(expect.arrayContaining(['-c', 'copy']));
+    // Audio is never actually at risk from keyframe rounding (see
+    // isKeyframeRoundingRisky's own comment), so only video gets re-encoded
+    // -- audio stays a stream copy, made accurate via the fine output-side
+    // seek rather than by decoding it.
+    expect(ffmpegCallArgs()).toEqual(expect.arrayContaining(['-c:v', 'libx264', '-c:a', 'copy']));
+    expect(ffmpegCallArgs()).not.toEqual(expect.arrayContaining(['-c:a', 'aac']));
+    // Split-seek: a coarse input-side -ss (10 - 15 clamped to 0, i.e. no
+    // input seek needed here since the buffer already covers the whole
+    // clip) plus an exact fine seek of the remainder, placed as an output
+    // option (after -i).
+    const args = ffmpegCallArgs();
+    const iIndex = args.indexOf('-i');
+    expect(args.slice(0, iIndex)).not.toEqual(expect.arrayContaining(['-ss']));
+    expect(args.slice(iIndex)).toEqual(expect.arrayContaining(['-ss', '10']));
   });
 
-  it('matches the source codec (not a fixed default) when auto-upgrading a "same as source" VP9 clip', async () => {
+  it('matches the source video codec (not a fixed default) when auto-upgrading a "same as source" VP9 clip, still copying audio', async () => {
     stubSpawn({ keyframeTimes: [2], streams: [{ codecType: 'video', codecName: 'vp9' }, { codecType: 'audio', codecName: 'opus' }] });
     const { clipAndConvert } = createFfmpegRunner({ ffmpegBinaryPath: FFMPEG_BIN, ffprobeBinaryPath: FFPROBE_BIN });
 
@@ -100,7 +114,26 @@ describe('clipAndConvert', () => {
       format: 'source', totalDurationSeconds: 12,
     });
 
-    expect(ffmpegCallArgs()).toEqual(expect.arrayContaining(['-c:v', 'libvpx-vp9', '-c:a', 'libopus']));
+    expect(ffmpegCallArgs()).toEqual(expect.arrayContaining(['-c:v', 'libvpx-vp9', '-c:a', 'copy']));
+  });
+
+  it('splits the seek across a coarse input-side seek and an exact output-side seek when the requested start is past the coarse-seek buffer', async () => {
+    // 40-minute-in clip, keyframe risk tripped by a 1s offset alone --
+    // exercises the non-zero coarse-seek branch of buildSplitSeekArgs (2400 -
+    // 15 = 2385 coarse, 15 fine), unlike the other risky-path test above
+    // where startSeconds is too small for the buffer to matter.
+    stubSpawn({ keyframeTimes: [2399], streams: [{ codecType: 'video', codecName: 'h264' }] });
+    const { clipAndConvert } = createFfmpegRunner({ ffmpegBinaryPath: FFMPEG_BIN, ffprobeBinaryPath: FFPROBE_BIN });
+
+    await clipAndConvert({
+      inputPath: '/in.mp4', outputPath: '/out.mp4', start: '00:40:00', startSeconds: 2400,
+      format: 'source', totalDurationSeconds: 60,
+    });
+
+    const args = ffmpegCallArgs();
+    const iIndex = args.indexOf('-i');
+    expect(args.slice(0, iIndex)).toEqual(expect.arrayContaining(['-ss', '2385']));
+    expect(args.slice(iIndex)).toEqual(expect.arrayContaining(['-ss', '15']));
   });
 
   it('goes straight to the format-specific re-encode (skipping the copy attempt) when auto-upgrading a format conversion', async () => {
@@ -117,7 +150,7 @@ describe('clipAndConvert', () => {
     expect(ffmpegCalls[0][1]).toEqual(expect.arrayContaining(['-c:v', 'libvpx-vp9', '-c:a', 'libopus']));
   });
 
-  it('never probes for keyframe risk when forceReencode is already set', async () => {
+  it('never probes for keyframe risk when forceReencode is already set, and still only re-encodes video', async () => {
     stubSpawn({ keyframeTimes: [598], streams: [{ codecType: 'video', codecName: 'h264' }] });
     const { clipAndConvert } = createFfmpegRunner({ ffmpegBinaryPath: FFMPEG_BIN, ffprobeBinaryPath: FFPROBE_BIN });
 
@@ -127,7 +160,7 @@ describe('clipAndConvert', () => {
     });
 
     expect(spawnMock.mock.calls.some(([bin, args]) => bin === FFPROBE_BIN && args.includes('-read_intervals'))).toBe(false);
-    expect(ffmpegCallArgs()).toEqual(expect.arrayContaining(['-c:v', 'libx264', '-c:a', 'aac']));
+    expect(ffmpegCallArgs()).toEqual(expect.arrayContaining(['-c:v', 'libx264', '-c:a', 'copy']));
   });
 
   it('skips the risk check entirely when startSeconds is not provided (backward-compatible callers)', async () => {
@@ -155,7 +188,7 @@ describe('clipAndConvert', () => {
   // immediately before the requested point (a real seek, not a scan from
   // zero) using packet-level flags instead of frame-level metadata.
   it('bounds the keyframe probe to a fixed window before the requested point, not a scan from the start of the file', async () => {
-    stubSpawn({ keyframeTimes: [3536.5], streams: [{ codecType: 'video', codecName: 'av1' }] });
+    stubSpawn({ keyframeTimes: [3536.95], streams: [{ codecType: 'video', codecName: 'av1' }] });
     const { clipAndConvert } = createFfmpegRunner({ ffmpegBinaryPath: FFMPEG_BIN, ffprobeBinaryPath: FFPROBE_BIN });
 
     // An hour into a long file -- the exact shape of the real bug report.
@@ -178,8 +211,9 @@ describe('clipAndConvert', () => {
     const [intervalStart, intervalEnd] = interval.split('%').map(Number);
     expect(intervalEnd).toBe(3537);
     expect(intervalStart).toBeGreaterThan(3000);
-    // Negligible real offset (3537 - 3536.5 = 0.5s) -- stays on the fast copy
-    // path, exactly as it should once the probe itself is fast and correct.
+    // Negligible real offset (3537 - 3536.95 = 0.05s) -- stays on the fast
+    // copy path, exactly as it should once the probe itself is fast and
+    // correct.
     expect(ffmpegCallArgs()).toEqual(expect.arrayContaining(['-c', 'copy']));
   });
 
diff --git a/src/electron/library.mjs b/src/electron/library.mjs
index 6bdc192..79ad55a 100644
--- a/src/electron/library.mjs
+++ b/src/electron/library.mjs
@@ -328,7 +328,12 @@ export function videoFolderName(videoId) {
 // Kept minimal: title/extension are derivable from the clip's own filename;
 // this only holds what scanLibrary/ClipCollectionView need cheaply without
 // re-invoking ffprobe on every scan.
-// Record shape: { id, fileName, title, createdAt, durationSeconds }
+// Record shape: { id, fileName, title, createdAt, durationSeconds, clipTimestamps }
+// clipTimestamps holds the exact start/end timestamp strings ffmpeg was
+// invoked with to produce the clip -- not recomputed from durationSeconds,
+// since that's a post-hoc length, not the original in/out points -- so
+// ClipCollectionView can hand them back to the original video's player
+// (see "Mark clip on original video").
 function clipsManifestPath(videoDir) {
     return path.join(videoDir, CLIPS_DIR_NAME, 'clips.json');
 }
@@ -373,7 +378,7 @@ export function listClips({ libraryDir, videoDir }) {
 // Throws on a duplicate fileName rather than silently overwriting or
 // auto-renaming (product decision); the IPC handler turns this into an
 // inline dialog error for the renderer.
-export function recordClip({ libraryDir, videoDir, fileName, title, durationSeconds }) {
+export function recordClip({ libraryDir, videoDir, fileName, title, durationSeconds, clipTimestamps }) {
     const resolvedVideoDir = resolveInsideLibrary(libraryDir, videoDir);
     if (!resolvedVideoDir) {
         throw new Error('Refusing to record a clip outside the configured library folder.');
@@ -382,7 +387,7 @@ export function recordClip({ libraryDir, videoDir, fileName, title, durationSeco
     if (manifest.some((c) => c.fileName === fileName)) {
         throw new Error('A clip with this name already exists for this video.');
     }
-    const clip = { id: crypto.randomUUID(), fileName, title, createdAt: Date.now(), durationSeconds };
+    const clip = { id: crypto.randomUUID(), fileName, title, createdAt: Date.now(), durationSeconds, clipTimestamps };
     writeClipsManifest(resolvedVideoDir, [...manifest, clip]);
     return clip;
 }
diff --git a/src/electron/library.test.mjs b/src/electron/library.test.mjs
index 2fdcfd8..5f617fb 100644
--- a/src/electron/library.test.mjs
+++ b/src/electron/library.test.mjs
@@ -447,12 +447,16 @@ describe('clips (recordClip / listClips / deleteClip)', () => {
     fs.mkdirSync(path.dirname(clipPath), { recursive: true });
     fs.writeFileSync(clipPath, 'fake clip bytes');
 
-    const clip = recordClip({ libraryDir, videoDir, fileName: path.basename(clipPath), title: 'My Clip', durationSeconds: 12 });
+    const clip = recordClip({
+      libraryDir, videoDir, fileName: path.basename(clipPath), title: 'My Clip', durationSeconds: 12,
+      clipTimestamps: { start: '00:00:01', end: '00:00:13' },
+    });
 
     expect(clip.id).toBeTruthy();
     expect(clip.createdAt).toBeTypeOf('number');
     expect(clip.fileName).toBe('My Clip.mp4');
     expect(clip.durationSeconds).toBe(12);
+    expect(clip.clipTimestamps).toEqual({ start: '00:00:01', end: '00:00:13' });
     expect(listClips({ libraryDir, videoDir })).toEqual([clip]);
   });
 
@@ -541,6 +545,18 @@ describe('clips (recordClip / listClips / deleteClip)', () => {
     expect(listClips({ libraryDir, videoDir })).toEqual([]); // file on disk is still the old one in this unit test
   });
 
+  it('updateClipFile preserves clipTimestamps across a format conversion', () => {
+    const { videoDir } = writeLibraryEntry({ libraryDir, videoMetaData: baseVideoMetaData() });
+    const clip = recordClip({
+      libraryDir, videoDir, fileName: 'My Clip.mp4', title: 'My Clip', durationSeconds: 5,
+      clipTimestamps: { start: '00:00:05', end: '00:00:10' },
+    });
+
+    const updated = updateClipFile({ libraryDir, videoDir, clipId: clip.id, fileName: 'My Clip.mkv', durationSeconds: 5 });
+
+    expect(updated.clipTimestamps).toEqual({ start: '00:00:05', end: '00:00:10' });
+  });
+
   it('updateClipFile throws when the new fileName collides with a different clip', () => {
     const { videoDir } = writeLibraryEntry({ libraryDir, videoMetaData: baseVideoMetaData() });
     const clipA = recordClip({ libraryDir, videoDir, fileName: 'Clip A.mp4', title: 'Clip A', durationSeconds: 1 });
diff --git a/src/electron/main.mjs b/src/electron/main.mjs
index 1892cee..d0d981f 100644
--- a/src/electron/main.mjs
+++ b/src/electron/main.mjs
@@ -2044,6 +2044,7 @@ ipcMain.handle('library:createClip', async (e, { videoDir, inputPath, start, end
             fileName: path.basename(outputPath),
             title: clipName,
             durationSeconds,
+            clipTimestamps: { start, end },
         });
         return { success: true, clip };
     } catch (err) {
diff --git a/src/types.ts b/src/types.ts
index 34d58b5..99287bf 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -47,6 +47,10 @@ export type LibraryClip = {
     title: string;
     createdAt: number;
     durationSeconds: number;
+    // The exact start/end timestamp strings ffmpeg was invoked with to
+    // produce this clip -- absent on clips created before this field
+    // existed.
+    clipTimestamps?: { start: string; end: string };
 }
 
 export type PlaylistEntry = {
diff --git a/src/ui/components/ClipCollectionView.test.tsx b/src/ui/components/ClipCollectionView.test.tsx
index e4da5f2..800ecf6 100644
--- a/src/ui/components/ClipCollectionView.test.tsx
+++ b/src/ui/components/ClipCollectionView.test.tsx
@@ -2,10 +2,21 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { MemoryRouter, useLocation } from 'react-router';
 import ClipCollectionView from './ClipCollectionView';
 import { BackgroundPlayerProvider, useBackgroundPlayer } from '../hooks/useBackgroundPlayer.tsx';
 import type { LibraryClip } from '../../types';
 
+// A sibling that reports the router's current location -- lets tests assert
+// what a navigate() call inside ClipCollectionView actually landed on,
+// mirroring this file's own renderWithBgProbe pattern for the background
+// player.
+function LocationProbe({ onLocation }: { onLocation: (pathname: string, search: string) => void }) {
+  const location = useLocation();
+  onLocation(location.pathname, location.search);
+  return null;
+}
+
 // Same one-shot readiness sequence LibraryVideoPlayer.test.tsx fires --
 // Vidstack won't treat the <video> as playable (and offer "Add to queue")
 // until these land.
@@ -28,31 +39,33 @@ function renderWithBgProbe(overrides: Partial<Parameters<typeof ClipCollectionVi
   const onClipsChanged = vi.fn();
   const onEmptied = vi.fn();
   const utils = render(
-    <BackgroundPlayerProvider>
-      <ClipCollectionView
-        videoDir="/lib/c/v1"
-        clips={[makeClip()]}
-        onClipsChanged={onClipsChanged}
-        onEmptied={onEmptied}
-        onOpenFileLocation={vi.fn()}
-        onExtractMp3={vi.fn()}
-        extractingMp3={false}
-        extractMp3Disabled={false}
-        extractMp3Progress={0}
-        extractMp3Error={null}
-        convertFormatOptions={['mp4', 'mov', 'mkv', 'webm', 'avi']}
-        onConvertClip={vi.fn()}
-        convertingClip={false}
-        convertClipDisabled={false}
-        convertClipProgress={0}
-        convertClipError={null}
-        parentVideoId="video1"
-        parentVideoTitle="Parent Video"
-        parentThumbnailPath="/lib/c/v1/thumb.jpg"
-        {...overrides}
-      />
-      <Probe />
-    </BackgroundPlayerProvider>,
+    <MemoryRouter>
+      <BackgroundPlayerProvider>
+        <ClipCollectionView
+          videoDir="/lib/c/v1"
+          clips={[makeClip()]}
+          onClipsChanged={onClipsChanged}
+          onEmptied={onEmptied}
+          onOpenFileLocation={vi.fn()}
+          onExtractMp3={vi.fn()}
+          extractingMp3={false}
+          extractMp3Disabled={false}
+          extractMp3Progress={0}
+          extractMp3Error={null}
+          convertFormatOptions={['mp4', 'mov', 'mkv', 'webm', 'avi']}
+          onConvertClip={vi.fn()}
+          convertingClip={false}
+          convertClipDisabled={false}
+          convertClipProgress={0}
+          convertClipError={null}
+          parentVideoId="video1"
+          parentVideoTitle="Parent Video"
+          parentThumbnailPath="/lib/c/v1/thumb.jpg"
+          {...overrides}
+        />
+        <Probe />
+      </BackgroundPlayerProvider>
+    </MemoryRouter>,
   );
   return { ...utils, getBg: () => bgRef };
 }
@@ -67,33 +80,37 @@ function renderView(overrides: Partial<Parameters<typeof ClipCollectionView>[0]>
   const onOpenFileLocation = vi.fn();
   const onExtractMp3 = vi.fn();
   const onConvertClip = vi.fn();
+  let location = { pathname: '', search: '' };
   const utils = render(
-    <BackgroundPlayerProvider>
-      <ClipCollectionView
-        videoDir="/lib/c/v1"
-        clips={[makeClip()]}
-        onClipsChanged={onClipsChanged}
-        onEmptied={onEmptied}
-        onOpenFileLocation={onOpenFileLocation}
-        onExtractMp3={onExtractMp3}
-        extractingMp3={false}
-        extractMp3Disabled={false}
-        extractMp3Progress={0}
-        extractMp3Error={null}
-        convertFormatOptions={['mp4', 'mov', 'mkv', 'webm', 'avi']}
-        onConvertClip={onConvertClip}
-        convertingClip={false}
-        convertClipDisabled={false}
-        convertClipProgress={0}
-        convertClipError={null}
-        parentVideoId="video1"
-        parentVideoTitle="Parent Video"
-        parentThumbnailPath={null}
-        {...overrides}
-      />
-    </BackgroundPlayerProvider>,
+    <MemoryRouter>
+      <BackgroundPlayerProvider>
+        <ClipCollectionView
+          videoDir="/lib/c/v1"
+          clips={[makeClip()]}
+          onClipsChanged={onClipsChanged}
+          onEmptied={onEmptied}
+          onOpenFileLocation={onOpenFileLocation}
+          onExtractMp3={onExtractMp3}
+          extractingMp3={false}
+          extractMp3Disabled={false}
+          extractMp3Progress={0}
+          extractMp3Error={null}
+          convertFormatOptions={['mp4', 'mov', 'mkv', 'webm', 'avi']}
+          onConvertClip={onConvertClip}
+          convertingClip={false}
+          convertClipDisabled={false}
+          convertClipProgress={0}
+          convertClipError={null}
+          parentVideoId="video1"
+          parentVideoTitle="Parent Video"
+          parentThumbnailPath={null}
+          {...overrides}
+        />
+        <LocationProbe onLocation={(pathname, search) => { location = { pathname, search }; }} />
+      </BackgroundPlayerProvider>
+    </MemoryRouter>,
   );
-  return { ...utils, onClipsChanged, onEmptied, onOpenFileLocation, onExtractMp3, onConvertClip };
+  return { ...utils, onClipsChanged, onEmptied, onOpenFileLocation, onExtractMp3, onConvertClip, getLocation: () => location };
 }
 
 beforeEach(() => {
@@ -167,6 +184,23 @@ describe('ClipCollectionView', () => {
     expect(onOpenFileLocation).toHaveBeenCalled();
   });
 
+  it('navigates back to the parent video with the clip\'s timestamps when "Mark clip on original video" is clicked', async () => {
+    const user = userEvent.setup();
+    const clips = [makeClip({ clipTimestamps: { start: '00:00:05', end: '00:00:12' } })];
+    const { getLocation } = renderView({ clips });
+
+    await user.click(screen.getByRole('button', { name: 'Mark clip on original video' }));
+
+    expect(getLocation()).toEqual({ pathname: '/library/video/video1', search: '?clipStart=00%3A00%3A05&clipEnd=00%3A00%3A12' });
+  });
+
+  it('disables "Mark clip on original video" when the active clip has no saved timestamps', async () => {
+    const clips = [makeClip()];
+    renderView({ clips });
+
+    expect(screen.getByRole('button', { name: 'Mark clip on original video' })).toBeDisabled();
+  });
+
   it('calls onExtractMp3 with the active clip when "Extract audio as MP3" is clicked', async () => {
     const user = userEvent.setup();
     const clips = [makeClip(), makeClip({ id: 'clip2', fileName: 'Clip Two.mp4', title: 'Clip Two' })];
@@ -281,30 +315,32 @@ describe('ClipCollectionView', () => {
     const clips = [makeClip(), makeClip({ id: 'clip2', fileName: 'Clip Two.mp4', title: 'Clip Two' })];
     const { container, rerender } = renderView({ clips: [], initialClipId: 'clip2' });
     rerender(
-      <BackgroundPlayerProvider>
-        <ClipCollectionView
-          videoDir="/lib/c/v1"
-          clips={clips}
-          onClipsChanged={vi.fn()}
-          onEmptied={vi.fn()}
-          onOpenFileLocation={vi.fn()}
-          onExtractMp3={vi.fn()}
-          extractingMp3={false}
-          extractMp3Disabled={false}
-          extractMp3Progress={0}
-          extractMp3Error={null}
-          convertFormatOptions={['mp4']}
-          onConvertClip={vi.fn()}
-          convertingClip={false}
-          convertClipDisabled={false}
-          convertClipProgress={0}
-          convertClipError={null}
-          parentVideoId="video1"
-          parentVideoTitle="Parent Video"
-          parentThumbnailPath={null}
-          initialClipId="clip2"
-        />
-      </BackgroundPlayerProvider>,
+      <MemoryRouter>
+        <BackgroundPlayerProvider>
+          <ClipCollectionView
+            videoDir="/lib/c/v1"
+            clips={clips}
+            onClipsChanged={vi.fn()}
+            onEmptied={vi.fn()}
+            onOpenFileLocation={vi.fn()}
+            onExtractMp3={vi.fn()}
+            extractingMp3={false}
+            extractMp3Disabled={false}
+            extractMp3Progress={0}
+            extractMp3Error={null}
+            convertFormatOptions={['mp4']}
+            onConvertClip={vi.fn()}
+            convertingClip={false}
+            convertClipDisabled={false}
+            convertClipProgress={0}
+            convertClipError={null}
+            parentVideoId="video1"
+            parentVideoTitle="Parent Video"
+            parentThumbnailPath={null}
+            initialClipId="clip2"
+          />
+        </BackgroundPlayerProvider>
+      </MemoryRouter>,
     );
     await waitFor(() => {
       expect(container.querySelector('video source')).toHaveAttribute('src', expect.stringContaining('Clip%20Two.mp4'));
diff --git a/src/ui/components/ClipCollectionView.tsx b/src/ui/components/ClipCollectionView.tsx
index 2cc2fc7..aadf469 100644
--- a/src/ui/components/ClipCollectionView.tsx
+++ b/src/ui/components/ClipCollectionView.tsx
@@ -1,10 +1,12 @@
 import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
 import {
   Box, Card, Checkbox, Chip, Divider, FormControlLabel, IconButton, List, ListItem, ListItemButton, ListItemText,
   MenuItem, Select, Stack, TextField, Tooltip, Typography,
 } from '@mui/material';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
+import HistoryToggleOffIcon from '@mui/icons-material/HistoryToggleOff';
 import AudiotrackIcon from '@mui/icons-material/Audiotrack';
 import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
@@ -85,6 +87,18 @@ export default function ClipCollectionView({
 
   const activeClip = clips.find((c) => c.id === activeClipId) || null;
   const resolvedConvertFormat = convertFormat === OTHER_FORMAT_VALUE ? otherFormatInput.trim().toLowerCase() : convertFormat;
+  const navigate = useNavigate();
+
+  // Deep-links back into the parent video's own player, pre-marked with this
+  // clip's original in/out points -- follows the same ?query-param
+  // deep-link convention videoDetailPathFor (useBackgroundPlayer.tsx)
+  // already uses for the Clip Collection view itself, read back out by
+  // LibraryScreen.tsx's deep-link effect.
+  const handleMarkOnOriginalVideo = () => {
+    if (!activeClip?.clipTimestamps) return;
+    const params = new URLSearchParams({ clipStart: activeClip.clipTimestamps.start, clipEnd: activeClip.clipTimestamps.end });
+    navigate(`/library/video/${parentVideoId}?${params.toString()}`);
+  };
 
   const handleConvert = () => {
     if (!activeClip || !resolvedConvertFormat) return;
@@ -149,6 +163,18 @@ export default function ClipCollectionView({
                     <FolderOpenIcon fontSize="small" />
                   </IconButton>
                 </Tooltip>
+                <Tooltip title={activeClip?.clipTimestamps ? 'Mark clip on original video' : 'This clip has no saved timestamps'}>
+                  <span>
+                    <IconButton
+                      size="small"
+                      aria-label="Mark clip on original video"
+                      onClick={handleMarkOnOriginalVideo}
+                      disabled={!activeClip?.clipTimestamps}
+                    >
+                      <HistoryToggleOffIcon fontSize="small" />
+                    </IconButton>
+                  </span>
+                </Tooltip>
               </Stack>
 
               <Divider />
diff --git a/src/ui/components/LibraryVideoPlayerWithTools.tsx b/src/ui/components/LibraryVideoPlayerWithTools.tsx
index 2f941be..be91d91 100644
--- a/src/ui/components/LibraryVideoPlayerWithTools.tsx
+++ b/src/ui/components/LibraryVideoPlayerWithTools.tsx
@@ -41,6 +41,12 @@ export type LibraryVideoPlayerWithToolsProps = {
   // same name for what this does (hands off from the separate background
   // player, see useBackgroundPlayer.tsx).
   initialSeekSeconds?: number | null;
+  // One-shot seed for clipStartSeconds/clipEndSeconds -- set when this video
+  // was opened via ClipCollectionView's "Mark clip on original video"
+  // deep link (see LibraryScreen.tsx), same one-shot-handoff shape as
+  // initialSeekSeconds above.
+  initialClipStartSeconds?: number | null;
+  initialClipEndSeconds?: number | null;
   // Passed straight through to LibraryVideoPlayer -- see its own prop of the
   // same name.
   backgroundPlayOverride?: { videoId: string; title: string; thumbnailPath: string | null; clipId: string };
@@ -57,10 +63,11 @@ function extensionForFormat(format: string, inputPath: string): string {
 export default function LibraryVideoPlayerWithTools({
   metadata, thumbnailPath, cacheBustKey, overrideFilePath, videoDir, epoch, existingClipTitles, convertFormatOptions, onClipCreated,
   standaloneClipping = false, onClipSavedToFile, initialSeekSeconds, backgroundPlayOverride,
+  initialClipStartSeconds, initialClipEndSeconds,
 }: LibraryVideoPlayerWithToolsProps) {
   const playerRef = useRef<LibraryVideoPlayerHandle>(null);
-  const [clipStartSeconds, setClipStartSeconds] = useState<number | null>(null);
-  const [clipEndSeconds, setClipEndSeconds] = useState<number | null>(null);
+  const [clipStartSeconds, setClipStartSeconds] = useState<number | null>(initialClipStartSeconds ?? null);
+  const [clipEndSeconds, setClipEndSeconds] = useState<number | null>(initialClipEndSeconds ?? null);
   const [saveClipDialogOpen, setSaveClipDialogOpen] = useState(false);
   const [savingClip, setSavingClip] = useState(false);
   const [saveClipError, setSaveClipError] = useState<string | null>(null);
diff --git a/src/ui/screens/LibraryScreen.tsx b/src/ui/screens/LibraryScreen.tsx
index 0e087db..78328f7 100644
--- a/src/ui/screens/LibraryScreen.tsx
+++ b/src/ui/screens/LibraryScreen.tsx
@@ -40,6 +40,7 @@ import FilterListIcon from '@mui/icons-material/FilterList';
 import FormatListBulletedAddIcon from '@mui/icons-material/FormatListBulletedAdd';
 import { convertYYYYMMDDStringToDate, buildAppVideoUrl, getBestDownloadedQuality, responsiveGridTemplateColumns, thumbnailGridTemplateColumns } from '../../utils/utils.ts';
 import { useBackgroundPlayer, resolvePlayableSource } from '../hooks/useBackgroundPlayer.tsx';
+import { parseClipTimestampSeconds } from './FfmpegUtilitiesPanel';
 import LibraryVideoDetail from './LibraryVideoDetail';
 import PlaylistsSection, { type PlaylistBulkBar } from '../components/PlaylistsSection';
 import LibrarySearchBar from '../components/LibrarySearchBar';
@@ -156,13 +157,22 @@ export default function LibraryScreen() {
   // the background already selected.
   const [deepLinkView, setDeepLinkView] = useState<'video' | 'clips' | undefined>(undefined);
   const [deepLinkClipId, setDeepLinkClipId] = useState<string | null>(null);
+  // Set from the deep-link's own ?clipStart=/?clipEnd= query params (see the
+  // effect below) -- ClipCollectionView's "Mark clip on original video" uses
+  // these to reopen the video's normal player with that clip's exact in/out
+  // points already marked, as a base to adjust or re-clip from.
+  const [deepLinkClipStartSeconds, setDeepLinkClipStartSeconds] = useState<number | null>(null);
+  const [deepLinkClipEndSeconds, setDeepLinkClipEndSeconds] = useState<number | null>(null);
   // A normal (non-deep-link) video selection -- clears any stale
-  // deepLinkView/deepLinkClipId left over from a previous mini-player-bar
-  // deep link, so picking a different video afterward doesn't wrongly reopen
-  // it straight into Clip Collection.
+  // deepLinkView/deepLinkClipId/deepLinkClipStartSeconds/deepLinkClipEndSeconds
+  // left over from a previous deep link, so picking a different video
+  // afterward doesn't wrongly reopen it straight into Clip Collection or with
+  // a stale clip range marked.
   const handleSelectVideo = (video: LibraryVideo) => {
     setDeepLinkView(undefined);
     setDeepLinkClipId(null);
+    setDeepLinkClipStartSeconds(null);
+    setDeepLinkClipEndSeconds(null);
     setSelectedVideo(video);
   };
   const [selectedVideoDirs, setSelectedVideoDirs] = useState<Set<string>>(new Set());
@@ -507,6 +517,11 @@ export default function LibraryScreen() {
   const libraryTagToOpen = searchParams.get('tag');
   const viewToOpen = searchParams.get('view');
   const clipIdToOpen = searchParams.get('clip');
+  // Set by ClipCollectionView's "Mark clip on original video" -- raw
+  // HH:MM:SS strings, converted to seconds below before being handed to
+  // LibraryVideoDetail.
+  const clipStartToOpen = searchParams.get('clipStart');
+  const clipEndToOpen = searchParams.get('clipEnd');
   useEffect(() => {
     if (!videoIdToOpen) return;
     (async () => {
@@ -540,6 +555,8 @@ export default function LibraryScreen() {
         setSelectedVideo(targetVideo);
         setDeepLinkView(viewToOpen === 'clips' ? 'clips' : undefined);
         setDeepLinkClipId(clipIdToOpen);
+        setDeepLinkClipStartSeconds(clipStartToOpen ? parseClipTimestampSeconds(clipStartToOpen) : null);
+        setDeepLinkClipEndSeconds(clipEndToOpen ? parseClipTimestampSeconds(clipEndToOpen) : null);
       } else {
         setDeepLinkError('This video is no longer in your library.');
       }
@@ -595,6 +612,8 @@ export default function LibraryScreen() {
       onVideoTagsChanged={refreshVideoTags}
       initialActiveView={deepLinkView}
       initialClipId={deepLinkClipId}
+      initialClipStartSeconds={deepLinkClipStartSeconds}
+      initialClipEndSeconds={deepLinkClipEndSeconds}
     />
   ) : selectedChannel ? (
     <VideoGrid
diff --git a/src/ui/screens/LibraryVideoDetail.test.tsx b/src/ui/screens/LibraryVideoDetail.test.tsx
index aa36edf..af4f638 100644
--- a/src/ui/screens/LibraryVideoDetail.test.tsx
+++ b/src/ui/screens/LibraryVideoDetail.test.tsx
@@ -2,6 +2,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router';
 import LibraryVideoDetail from './LibraryVideoDetail';
 import { BackgroundPlayerProvider, useBackgroundPlayer } from '../hooks/useBackgroundPlayer.tsx';
 import type { LibraryClip, DownloadProgressMessage } from '../../types';
@@ -142,18 +143,20 @@ function renderDetail(
   const onVersionsChanged = vi.fn().mockResolvedValue(undefined);
   const onVideoTagsChanged = vi.fn().mockResolvedValue(undefined);
   const utils = render(
-    <BackgroundPlayerProvider>
-      <LibraryVideoDetail
-        video={video}
-        onBack={onBack}
-        onLibraryChanged={onLibraryChanged}
-        onDeleted={onDeleted}
-        onVersionsChanged={onVersionsChanged}
-        videoTags={videoTags}
-        onVideoTagsChanged={onVideoTagsChanged}
-        {...deepLinkOverrides}
-      />
-    </BackgroundPlayerProvider>,
+    <MemoryRouter>
+      <BackgroundPlayerProvider>
+        <LibraryVideoDetail
+          video={video}
+          onBack={onBack}
+          onLibraryChanged={onLibraryChanged}
+          onDeleted={onDeleted}
+          onVersionsChanged={onVersionsChanged}
+          videoTags={videoTags}
+          onVideoTagsChanged={onVideoTagsChanged}
+          {...deepLinkOverrides}
+        />
+      </BackgroundPlayerProvider>
+    </MemoryRouter>,
   );
   return { ...utils, onBack, onLibraryChanged, onDeleted, onVersionsChanged, onVideoTagsChanged };
 }
@@ -721,6 +724,45 @@ describe('LibraryVideoDetail', () => {
       // clip2 appears somewhere in the sidebar list.
       expect(await screen.findByTestId('fake-player-override-path')).toHaveAttribute('data-override-file-path', expect.stringContaining('Clip Two.mp4'));
     });
+
+    // Regression test: ClipCollectionView's "Mark clip on original video"
+    // re-navigates to this *same* video with fresh initialClipStartSeconds/
+    // EndSeconds -- LibraryScreen.tsx renders this component without a key,
+    // so it doesn't remount, and activeView's own useState initializer
+    // never re-runs on its own. Without the dedicated effect that watches
+    // these two props, the user stayed stuck on the Clip Collection tab.
+    it('switches back to the video view when a "mark clip on original video" deep link arrives while Clip Collection is open', async () => {
+      const video = makeVideo({ downloadedFilePath: '/v/video.mp4', downloadedResolution: '720' }, { clipCount: 1 });
+      window.electronAPI.getClips = vi.fn().mockResolvedValue({
+        success: true,
+        clips: [{ id: 'clip1', fileName: 'Clip One.mp4', title: 'Clip One', createdAt: 0, durationSeconds: 5 }],
+      });
+      const { rerender } = renderDetail(video, {}, { initialActiveView: 'clips' });
+
+      expect(await screen.findByText('Clip One')).toBeInTheDocument();
+
+      rerender(
+        <MemoryRouter>
+          <BackgroundPlayerProvider>
+            <LibraryVideoDetail
+              video={video}
+              onBack={vi.fn()}
+              onLibraryChanged={vi.fn()}
+              onDeleted={vi.fn()}
+              onVersionsChanged={vi.fn()}
+              videoTags={{}}
+              onVideoTagsChanged={vi.fn()}
+              initialActiveView="clips"
+              initialClipStartSeconds={5}
+              initialClipEndSeconds={12}
+            />
+          </BackgroundPlayerProvider>
+        </MemoryRouter>,
+      );
+
+      expect(await screen.findByRole('button', { name: 'Fake save clip' })).toBeInTheDocument();
+      expect(screen.queryByText('Clip One')).not.toBeInTheDocument();
+    });
   });
 
   describe('double-playback guard (background player)', () => {
diff --git a/src/ui/screens/LibraryVideoDetail.tsx b/src/ui/screens/LibraryVideoDetail.tsx
index e186eee..ace1718 100644
--- a/src/ui/screens/LibraryVideoDetail.tsx
+++ b/src/ui/screens/LibraryVideoDetail.tsx
@@ -55,7 +55,7 @@ const CURRENT_VIDEO_SCHEMA_VERSION = 4;
 
 export default function LibraryVideoDetail({
   video, onBack, onLibraryChanged, onDeleted, onVersionsChanged, videoTags, onVideoTagsChanged,
-  initialActiveView, initialClipId,
+  initialActiveView, initialClipId, initialClipStartSeconds, initialClipEndSeconds,
 }: {
   video: LibraryVideo;
   onBack: () => void;
@@ -73,6 +73,12 @@ export default function LibraryVideoDetail({
   // the default video view.
   initialActiveView?: 'video' | 'clips';
   initialClipId?: string | null;
+  // Set by LibraryScreen.tsx's deep-link effect when this video was opened
+  // via ClipCollectionView's "Mark clip on original video" -- a one-shot
+  // handoff into the player's own clip markers, same pattern
+  // resumeFromBackgroundSeconds/initialSeekSeconds already use below.
+  initialClipStartSeconds?: number | null;
+  initialClipEndSeconds?: number | null;
 }) {
   const [selectedEpoch, setSelectedEpoch] = useState(video.latestEpoch);
   const [metadata, setMetadata] = useState(video.metadata);
@@ -190,6 +196,18 @@ export default function LibraryVideoDetail({
   const [clips, setClips] = useState<LibraryClip[]>([]);
   const [clipsLoaded, setClipsLoaded] = useState(false);
 
+  // "Mark clip on original video" (ClipCollectionView) re-navigates to this
+  // *same* video with fresh initialClipStartSeconds/EndSeconds -- since
+  // LibraryScreen.tsx renders this component without a key, that doesn't
+  // remount it, so activeView's useState initializer above never re-runs.
+  // Force it back to 'video' here instead, so the click actually leaves the
+  // Clip Collection tab and lands on the marked player.
+  useEffect(() => {
+    if (initialClipStartSeconds != null || initialClipEndSeconds != null) {
+      setActiveView('video');
+    }
+  }, [initialClipStartSeconds, initialClipEndSeconds]);
+
   useEffect(() => {
     if (activeView === 'clips' && !clipsLoaded) {
       window.electronAPI.getClips({ videoDir: video.videoDir }).then((res) => {
@@ -844,6 +862,8 @@ export default function LibraryVideoDetail({
             existingClipTitles={clips.map((c) => c.title)}
             convertFormatOptions={convertFormatOptions}
             initialSeekSeconds={resumeFromBackgroundSeconds}
+            initialClipStartSeconds={initialClipStartSeconds}
+            initialClipEndSeconds={initialClipEndSeconds}
             onClipCreated={(clip) => {
               setClips((prev) => [...prev, clip]);
               onVersionsChanged();

From d8f8b5e3b0c7400eed495d5b1ce877e7b9ece2e2 Mon Sep 17 00:00:00 2001
From: Sloth <sloth.software.dev@protonmail.com>
Date: Mon, 21 Sep 2026 17:19:24 -0700
Subject: [PATCH 3/8] feat(app): phase 1 of generic library implementation add
 basic implementation for generic library entries for video and audio

---
 src/electron/library.mjs                      | 313 +++++++++++++-----
 src/electron/library.test.mjs                 | 169 +++++++++-
 src/electron/main.mjs                         |  32 +-
 src/electron/videoInfo.mjs                    |  41 ++-
 src/electron/videoInfo.test.mjs               | 118 +++++++
 src/types.ts                                  |  44 +++
 src/ui/components/LibraryVideoPlayer.test.tsx |  77 +++++
 src/ui/components/LibraryVideoPlayer.tsx      |  56 +++-
 src/ui/screens/DownloaderScreen.test.tsx      |  20 ++
 src/ui/screens/DownloaderScreen.tsx           |   5 +-
 src/ui/screens/LibraryScreen.tsx              |  19 +-
 src/ui/screens/LibraryVideoDetail.test.tsx    |  72 ++++
 src/ui/screens/LibraryVideoDetail.tsx         |  37 ++-
 src/ui/screens/VideoQualityDownload.tsx       |  17 +-
 14 files changed, 864 insertions(+), 156 deletions(-)
 create mode 100644 src/electron/videoInfo.test.mjs

diff --git a/src/electron/library.mjs b/src/electron/library.mjs
index 79ad55a..b828e79 100644
--- a/src/electron/library.mjs
+++ b/src/electron/library.mjs
@@ -26,6 +26,12 @@ export const PLAYLISTS_DIR_NAME = 'playlists';
 // root).
 export const CLIPS_DIR_NAME = 'clips';
 
+// Top-level reserved folder name for non-YouTube library entries (see
+// SlothArchiver-dossier plan for non-YouTube platform support), a sibling of
+// real per-uploader channel folders -- same reserved-name pattern as
+// PLAYLISTS_DIR_NAME/CLIPS_DIR_NAME above.
+export const NONYT_DIR_NAME = 'NonYT';
+
 // SubLibrary / tag library feature (see
 // SlothArchiver-dossier/futureSpecsFeedback.md's decided design): every tag,
 // including the default untagged case, is a same-filesystem subfolder
@@ -271,7 +277,7 @@ export function transferVideoTags(libraryDir, sourceTag, targetTag, videoIds) {
 // today" and surface a "this entry predates newer features, refresh it"
 // notice -- see LibraryVideoDetail.tsx/PlaylistsSection.tsx's own duplicated
 // copy of these two numbers.
-export const CURRENT_VIDEO_SCHEMA_VERSION = 4;
+export const CURRENT_VIDEO_SCHEMA_VERSION = 5;
 export const CURRENT_PLAYLIST_SCHEMA_VERSION = 2;
 
 // One cross-platform sanitizer using Windows' illegal-character set as the
@@ -324,6 +330,17 @@ export function videoFolderName(videoId) {
     return sanitizeForFilesystem(videoId);
 }
 
+// Non-YouTube video identity/path hash: sha256("${extractorKey}:${id}"),
+// truncated to 16 hex chars (64 bits) -- short enough to keep the deeper
+// NonYT/<platform>/<hash>/<epoch>/ path well under Windows' MAX_PATH=260,
+// and 64 bits is far past any realistic collision risk for a single user's
+// personal archive. Falls back to hashing originalUrl when id is missing,
+// since id uniqueness isn't guaranteed by every yt-dlp extractor.
+export function nonYoutubeVideoHash(extractorKey, id, originalUrl) {
+    const input = id ? `${extractorKey}:${id}` : originalUrl;
+    return crypto.createHash('sha256').update(input).digest('hex').slice(0, 16);
+}
+
 // <videoDir>/clips/clips.json -- one JSON array of clip records per video.
 // Kept minimal: title/extension are derivable from the clip's own filename;
 // this only holds what scanLibrary/ClipCollectionView need cheaply without
@@ -447,15 +464,18 @@ export function deleteClip({ libraryDir, videoDir, clipId }) {
     return { success: true };
 }
 
-// Shared by writeLibraryEntry (new video) and addLibraryVersion (new version
-// of an existing video) so both ever build exactly one metadata shape --
-// two independent inline copies would be free to drift apart over time.
-function buildEpochMetadata(videoMetaData, addedEpoch) {
-    const { id, title, fullTitle, description, thumbnail, originalUrl, duration, durationString, uploadDate, channelId, uploader, resolutions } = videoMetaData;
+// Fields every entry shares regardless of platform -- factored out so
+// buildYoutubeEpochMetadata/buildGenericEpochMetadata below build on the same
+// base instead of two independently drifting copies. uploaderId/timestamp/
+// license/categories/tags/music are schemaVersion 5 additions (see
+// SlothArchiver-dossier's non-YouTube platform support plan) captured
+// uniformly off reshapeVideoInfo's own shape for every platform, YouTube
+// included, even though only generic entries' UI surfaces them today.
+function buildCommonEpochMetadata(videoMetaData, addedEpoch) {
+    const { id, title, fullTitle, description, thumbnail, originalUrl, duration, durationString, uploadDate, uploader, resolutions, uploaderId, timestamp, license, categories, tags, music } = videoMetaData;
     return {
         schemaVersion: CURRENT_VIDEO_SCHEMA_VERSION,
         videoId: id,
-        channelId: channelId || null,
         channel: uploader || null,
         title: title || null,
         fullTitle: fullTitle || null,
@@ -467,8 +487,8 @@ function buildEpochMetadata(videoMetaData, addedEpoch) {
         uploadDate: uploadDate || null,
         addedEpoch,
         // Captured at add-time, not fetched live at download-time -- can go
-        // stale if YouTube changes available qualities later. Entries written
-        // before this field existed just won't have it.
+        // stale if the source changes available qualities later. Entries
+        // written before this field existed just won't have it.
         resolutions: resolutions || [],
         // Adding a video/version and downloading its file are separate
         // actions -- filled in by recordLibraryDownload() once a download
@@ -476,15 +496,57 @@ function buildEpochMetadata(videoMetaData, addedEpoch) {
         downloadedFilePath: null,
         downloadedResolution: null,
         downloadedFormat: null,
-        // MP3 is a separate, coexisting artifact -- its own slot (audio.mp3,
-        // alongside video.<ext>), independent of the video fields above.
-        downloadedAudioFilePath: null,
         lastPlaybackPositionSeconds: null,
+        uploaderId: uploaderId || null,
+        timestamp: timestamp || null,
+        license: license || null,
+        categories: categories || null,
+        tags: tags || null,
+        music: music || null,
+    };
+}
+
+// YouTube entries keep channelId -- the one identity field genuinely
+// YouTube-specific -- and MP3 as a separate, coexisting artifact (its own
+// downloadedAudioFilePath slot, audio.mp3 alongside video.<ext>).
+function buildYoutubeEpochMetadata(videoMetaData, addedEpoch) {
+    return {
+        ...buildCommonEpochMetadata(videoMetaData, addedEpoch),
+        platform: videoMetaData.platform || 'youtube',
+        channelId: videoMetaData.channelId || null,
+        downloadedAudioFilePath: null,
+    };
+}
+
+// Generic (non-YouTube) entries have no channelId concept -- "who made this"
+// is channel/uploaderId instead -- and no separate audio slot: an audio-only
+// download (e.g. SoundCloud's only option) writes into the same
+// downloadedFilePath/downloadedResolution/downloadedFormat fields any other
+// resolution choice would, so it plays through the one real library player
+// instead of a bare native <audio> element.
+function buildGenericEpochMetadata(videoMetaData, addedEpoch) {
+    return {
+        ...buildCommonEpochMetadata(videoMetaData, addedEpoch),
+        platform: videoMetaData.platform,
+        channelId: null,
+        downloadedAudioFilePath: null,
     };
 }
 
+// Shared by writeLibraryEntry (new video) and addLibraryVersion (new version
+// of an existing video) so both ever build exactly one metadata shape per
+// platform -- dispatches on videoMetaData.platform so every caller
+// (writeLibraryEntry, addLibraryVersion, refreshLibraryEntryMetadata,
+// overrideLibraryEntry) stays platform-agnostic. Falsy/'youtube' is the
+// YouTube branch (backward compatible with entries that predate this field);
+// anything else is generic.
+function buildEpochMetadata(videoMetaData, addedEpoch) {
+    const isYoutube = !videoMetaData.platform || videoMetaData.platform === 'youtube';
+    return isYoutube ? buildYoutubeEpochMetadata(videoMetaData, addedEpoch) : buildGenericEpochMetadata(videoMetaData, addedEpoch);
+}
+
 export function writeLibraryEntry({ libraryDir, libraryTag = DEFAULT_LIBRARY_DIR_NAME, videoMetaData }) {
-    const { id, uploader } = videoMetaData;
+    const { id, uploader, platform, extractorKey, originalUrl } = videoMetaData;
     if (!id) {
         throw new Error('videoMetaData.id is required to add a library entry');
     }
@@ -493,8 +555,21 @@ export function writeLibraryEntry({ libraryDir, libraryTag = DEFAULT_LIBRARY_DIR
     }
 
     ensureLibraryTagMetadata(libraryDir, libraryTag);
-    const channelDir = path.join(libraryTagDir(libraryDir, libraryTag), channelFolderName(uploader));
-    const videoDir = path.join(channelDir, videoFolderName(id));
+    // Non-YouTube entries live under a reserved NonYT/<platform>/ subtree,
+    // grouped by platform instead of by uploader (see NONYT_DIR_NAME's own
+    // comment) -- <hash> replaces the usual videoId folder name since a raw
+    // id/URL isn't guaranteed filesystem-safe or collision-free across
+    // extractors the way a YouTube videoId is. Every other write function
+    // (addLibraryVersion/refreshLibraryEntryMetadata/overrideLibraryEntry)
+    // takes an already-resolved videoDir, so only this path-computing
+    // function needs the branch.
+    const isGeneric = !!platform && platform !== 'youtube';
+    const channelDir = isGeneric
+        ? path.join(libraryTagDir(libraryDir, libraryTag), NONYT_DIR_NAME, platform)
+        : path.join(libraryTagDir(libraryDir, libraryTag), channelFolderName(uploader));
+    const videoDir = isGeneric
+        ? path.join(channelDir, nonYoutubeVideoHash(extractorKey, id, originalUrl))
+        : path.join(channelDir, videoFolderName(id));
     const addedEpoch = Date.now();
     const epochDir = path.join(videoDir, String(addedEpoch));
     fs.mkdirSync(epochDir, { recursive: true });
@@ -959,12 +1034,108 @@ export function findVideoThumbnailPath(videoDir, entries = null) {
     return thumbnailEntry ? path.join(videoDir, thumbnailEntry.name) : null;
 }
 
+// Inner video/epoch walk, one level down from a channel-shaped folder --
+// shared by scanLibrary's two directory shapes below (a real per-uploader
+// channel folder, and a NonYT/<platform> synthetic one) so the walk logic
+// exists in exactly one place. Returns null when the folder is unreadable or
+// has no valid video in it, so both callers can just `continue` on a falsy
+// result the same way the old single inline loop did.
+async function scanChannelLikeFolder(channelPath) {
+    let videoEntries;
+    try {
+        videoEntries = await fsp.readdir(channelPath, { withFileTypes: true });
+    } catch {
+        return null;
+    }
+
+    const videos = [];
+    for (const videoEntry of videoEntries) {
+        if (!videoEntry.isDirectory()) continue;
+        const videoPath = path.join(channelPath, videoEntry.name);
+
+        let epochEntries;
+        try {
+            epochEntries = await fsp.readdir(videoPath, { withFileTypes: true });
+        } catch {
+            continue;
+        }
+
+        // Epoch folder names are Date.now() timestamps -- numeric descending
+        // sort puts the most recent attempt first. clips/ is a reserved
+        // sibling directory (CLIPS_DIR_NAME), explicitly excluded here the
+        // same way PLAYLISTS_DIR_NAME is excluded one level up -- without
+        // this it would fall into this filter, sort unpredictably
+        // (Number('clips') is NaN), and only be skipped by the
+        // metadata.json read below happening to fail.
+        const epochNames = epochEntries
+            .filter((e) => e.isDirectory() && e.name !== CLIPS_DIR_NAME)
+            .map((e) => e.name)
+            .sort((a, b) => Number(b) - Number(a));
+
+        let metadata = null;
+        let latestEpoch = null;
+        const epochs = [];
+        for (const epochName of epochNames) {
+            try {
+                const raw = await fsp.readFile(path.join(videoPath, epochName, 'metadata.json'), 'utf-8');
+                const epochMetadata = JSON.parse(raw);
+                epochs.push({ epoch: epochName, metadata: epochMetadata });
+                if (!metadata) {
+                    metadata = epochMetadata;
+                    latestEpoch = epochName;
+                }
+            } catch {
+                continue;
+            }
+        }
+
+        if (!metadata) continue;
+
+        // Cheap (one JSON parse) -- only the count rides along in the main
+        // index; the full per-clip list is fetched lazily via
+        // library:getClips when the Clip Collection view actually opens.
+        const clipCount = readClipsManifest(videoPath).length;
+
+        videos.push({
+            videoFolderName: videoEntry.name,
+            videoDir: videoPath,
+            latestEpoch,
+            metadata,
+            epochs,
+            thumbnailPath: findVideoThumbnailPath(videoPath, epochEntries),
+            clipCount,
+        });
+    }
+
+    if (videos.length === 0) return null;
+    videos.sort((a, b) => (b.metadata.addedEpoch || 0) - (a.metadata.addedEpoch || 0));
+
+    // Cached by ensureChannelIcon (main.mjs) the first time a video from
+    // this channel gets added -- videoEntries already lists everything
+    // directly inside channelPath (files included), so this is a free
+    // lookup rather than a second readdir. Meaningless for a NonYT platform
+    // group (no per-uploader avatar concept), whose caller below ignores it.
+    const iconEntry = videoEntries.find((e) => e.isFile() && e.name.startsWith('channel-icon.'));
+
+    return { videos, iconEntry };
+}
+
 // Bounded 3-level walk (channel/video/epoch), tolerant of partial or corrupt
 // folders -- a missing or unparseable metadata.json is skipped rather than
 // failing the whole scan, since an interrupted write is always conceivable.
 // Collects every valid epoch into `epochs` (newest first) for the
 // version-control UI; `latestEpoch`/`metadata` stay pointed at the newest
 // valid one, which every other consumer reads.
+//
+// NONYT_DIR_NAME gets one extra level of recursion: instead of being a real
+// channel folder, it's a container of per-platform folders, each flattened
+// into this same top-level `channels` array as its own synthetic
+// isPlatformGroup entry (see NONYT_DIR_NAME's own comment). channelFolderName
+// for one of these is the full NonYT/<platform> relative path (via
+// path.join), not a bare folder name -- every consumer (moveLibraryEntry,
+// library:refreshChannelIcon in main.mjs) builds an absolute path via
+// path.join(libraryTagDir(...), channelFolderName) directly, and only the
+// full relative path resolves correctly through that.
 export async function scanLibrary(libraryDir, libraryTag = DEFAULT_LIBRARY_DIR_NAME) {
     const index = { channels: [] };
     if (!libraryDir) {
@@ -990,88 +1161,41 @@ export async function scanLibrary(libraryDir, libraryTag = DEFAULT_LIBRARY_DIR_N
     for (const channelEntry of channelEntries) {
         if (!channelEntry.isDirectory()) continue;
         if (channelEntry.name === PLAYLISTS_DIR_NAME) continue;
-        const channelPath = path.join(scanRoot, channelEntry.name);
-
-        let videoEntries;
-        try {
-            videoEntries = await fsp.readdir(channelPath, { withFileTypes: true });
-        } catch {
-            continue;
-        }
 
-        const videos = [];
-        for (const videoEntry of videoEntries) {
-            if (!videoEntry.isDirectory()) continue;
-            const videoPath = path.join(channelPath, videoEntry.name);
-
-            let epochEntries;
+        if (channelEntry.name === NONYT_DIR_NAME) {
+            const nonytRoot = path.join(scanRoot, channelEntry.name);
+            let platformEntries;
             try {
-                epochEntries = await fsp.readdir(videoPath, { withFileTypes: true });
+                platformEntries = await fsp.readdir(nonytRoot, { withFileTypes: true });
             } catch {
                 continue;
             }
-
-            // Epoch folder names are Date.now() timestamps -- numeric descending
-            // sort puts the most recent attempt first. clips/ is a reserved
-            // sibling directory (CLIPS_DIR_NAME), explicitly excluded here the
-            // same way PLAYLISTS_DIR_NAME is excluded one level up -- without
-            // this it would fall into this filter, sort unpredictably
-            // (Number('clips') is NaN), and only be skipped by the
-            // metadata.json read below happening to fail.
-            const epochNames = epochEntries
-                .filter((e) => e.isDirectory() && e.name !== CLIPS_DIR_NAME)
-                .map((e) => e.name)
-                .sort((a, b) => Number(b) - Number(a));
-
-            let metadata = null;
-            let latestEpoch = null;
-            const epochs = [];
-            for (const epochName of epochNames) {
-                try {
-                    const raw = await fsp.readFile(path.join(videoPath, epochName, 'metadata.json'), 'utf-8');
-                    const epochMetadata = JSON.parse(raw);
-                    epochs.push({ epoch: epochName, metadata: epochMetadata });
-                    if (!metadata) {
-                        metadata = epochMetadata;
-                        latestEpoch = epochName;
-                    }
-                } catch {
-                    continue;
-                }
+            for (const platformEntry of platformEntries) {
+                if (!platformEntry.isDirectory()) continue;
+                const platformPath = path.join(nonytRoot, platformEntry.name);
+                const result = await scanChannelLikeFolder(platformPath);
+                if (!result) continue;
+                index.channels.push({
+                    channelFolderName: path.join(NONYT_DIR_NAME, platformEntry.name),
+                    displayName: platformEntry.name,
+                    channelIconPath: null,
+                    isPlatformGroup: true,
+                    platform: platformEntry.name,
+                    videos: result.videos,
+                });
             }
-
-            if (!metadata) continue;
-
-            // Cheap (one JSON parse) -- only the count rides along in the main
-            // index; the full per-clip list is fetched lazily via
-            // library:getClips when the Clip Collection view actually opens.
-            const clipCount = readClipsManifest(videoPath).length;
-
-            videos.push({
-                videoFolderName: videoEntry.name,
-                videoDir: videoPath,
-                latestEpoch,
-                metadata,
-                epochs,
-                thumbnailPath: findVideoThumbnailPath(videoPath, epochEntries),
-                clipCount,
-            });
+            continue;
         }
 
-        if (videos.length === 0) continue;
-        videos.sort((a, b) => (b.metadata.addedEpoch || 0) - (a.metadata.addedEpoch || 0));
-
-        // Cached by ensureChannelIcon (main.mjs) the first time a video from
-        // this channel gets added -- videoEntries already lists everything
-        // directly inside channelPath (files included), so this is a free
-        // lookup rather than a second readdir.
-        const iconEntry = videoEntries.find((e) => e.isFile() && e.name.startsWith('channel-icon.'));
+        const channelPath = path.join(scanRoot, channelEntry.name);
+        const result = await scanChannelLikeFolder(channelPath);
+        if (!result) continue;
 
         index.channels.push({
             channelFolderName: channelEntry.name,
-            displayName: videos[0]?.metadata.channel || channelEntry.name,
-            channelIconPath: iconEntry ? path.join(channelPath, iconEntry.name) : null,
-            videos,
+            displayName: result.videos[0]?.metadata.channel || channelEntry.name,
+            channelIconPath: result.iconEntry ? path.join(channelPath, result.iconEntry.name) : null,
+            videos: result.videos,
         });
     }
 
@@ -1110,9 +1234,22 @@ export function refreshLibraryIndex(libraryDir, libraryTag = DEFAULT_LIBRARY_DIR
 // Keyed by videoId specifically (not folder name/title) -- it's the one field
 // guaranteed unique per video regardless of which channel folder it landed
 // under, same reasoning already applied to the folder-collision fix.
-export function findVideoInIndex(index, videoId) {
+//
+// platform is optional and backward compatible: existing call sites that
+// don't pass it are unaffected (matches on videoId alone, same as before).
+// When given, it also disambiguates videos whose raw id happens to collide
+// across two different extractors -- id uniqueness is only guaranteed
+// *within* one extractor, not across all of them. A video's own
+// metadata.platform being null/absent (an entry written before this field
+// existed) is treated as 'youtube' for this comparison, same backward-compat
+// default buildEpochMetadata uses.
+export function findVideoInIndex(index, videoId, platform) {
     for (const channel of index.channels) {
-        const video = channel.videos.find((v) => v.metadata.videoId === videoId);
+        const video = channel.videos.find((v) => {
+            if (v.metadata.videoId !== videoId) return false;
+            if (!platform) return true;
+            return (v.metadata.platform || 'youtube') === platform;
+        });
         if (video) {
             return { channel, video };
         }
diff --git a/src/electron/library.test.mjs b/src/electron/library.test.mjs
index 5f617fb..2f8134e 100644
--- a/src/electron/library.test.mjs
+++ b/src/electron/library.test.mjs
@@ -7,6 +7,7 @@ import {
   sanitizeForFilesystem,
   channelFolderName,
   videoFolderName,
+  nonYoutubeVideoHash,
   writeLibraryEntry,
   addLibraryVersion,
   refreshLibraryEntryMetadata,
@@ -33,6 +34,7 @@ import {
   CURRENT_PLAYLIST_SCHEMA_VERSION,
   PLAYLISTS_DIR_NAME,
   CLIPS_DIR_NAME,
+  NONYT_DIR_NAME,
   DEFAULT_LIBRARY_DIR_NAME,
   libraryTagDir,
   listLibraryTags,
@@ -138,6 +140,31 @@ describe('channelFolderName / videoFolderName', () => {
   });
 });
 
+describe('nonYoutubeVideoHash', () => {
+  it('is deterministic for the same input', () => {
+    const first = nonYoutubeVideoHash('soundcloud', 'track123', 'https://soundcloud.com/artist/track123');
+    const second = nonYoutubeVideoHash('soundcloud', 'track123', 'https://soundcloud.com/artist/track123');
+    expect(first).toBe(second);
+  });
+
+  it('differs for the same id under a different extractorKey', () => {
+    const soundcloud = nonYoutubeVideoHash('soundcloud', 'abc123', 'https://soundcloud.com/x/abc123');
+    const dailymotion = nonYoutubeVideoHash('dailymotion', 'abc123', 'https://dailymotion.com/x/abc123');
+    expect(soundcloud).not.toBe(dailymotion);
+  });
+
+  it('falls back to hashing originalUrl when id is missing', () => {
+    const withoutId = nonYoutubeVideoHash('soundcloud', null, 'https://soundcloud.com/artist/track123');
+    const fromUrlDirectly = nonYoutubeVideoHash('anything', null, 'https://soundcloud.com/artist/track123');
+    expect(withoutId).toBe(fromUrlDirectly);
+  });
+
+  it('always returns 16 hex chars', () => {
+    expect(nonYoutubeVideoHash('soundcloud', 'track123', 'https://soundcloud.com/artist/track123')).toMatch(/^[0-9a-f]{16}$/);
+    expect(nonYoutubeVideoHash('soundcloud', null, 'https://soundcloud.com/artist/track123')).toMatch(/^[0-9a-f]{16}$/);
+  });
+});
+
 describe('writeLibraryEntry', () => {
   it('throws when videoMetaData.id is missing', () => {
     expect(() => writeLibraryEntry({ libraryDir, videoMetaData: baseVideoMetaData({ id: undefined }) }))
@@ -156,7 +183,7 @@ describe('writeLibraryEntry', () => {
     expect(channelDir).toBe(path.join(libraryDir, DEFAULT_LIBRARY_DIR_NAME, 'Some Channel'));
     expect(videoDir).toBe(path.join(channelDir, 'abc123'));
 
-    expect(metadata.schemaVersion).toBe(4);
+    expect(metadata.schemaVersion).toBe(5);
     expect(metadata.videoId).toBe('abc123');
     expect(metadata.channel).toBe('Some Channel');
     expect(metadata.resolutions).toEqual([{ resolution: '720', filesizeMb: '10' }]);
@@ -193,6 +220,61 @@ describe('writeLibraryEntry', () => {
 
     expect(second).toEqual(first);
   });
+
+  it('writes a non-YouTube entry under NonYT/<platform>/<hash> instead of a channel/videoId path', () => {
+    const videoMetaData = baseVideoMetaData({
+      id: 'track123',
+      uploader: 'Some Artist',
+      platform: 'soundcloud',
+      extractorKey: 'Soundcloud',
+      originalUrl: 'https://soundcloud.com/some-artist/track123',
+    });
+    const { channelDir, videoDir, metadata } = writeLibraryEntry({ libraryDir, videoMetaData });
+
+    const expectedHash = nonYoutubeVideoHash('Soundcloud', 'track123', 'https://soundcloud.com/some-artist/track123');
+    expect(channelDir).toBe(path.join(libraryDir, DEFAULT_LIBRARY_DIR_NAME, NONYT_DIR_NAME, 'soundcloud'));
+    expect(videoDir).toBe(path.join(channelDir, expectedHash));
+
+    // The bug this whole phase exists to fix: a generic entry's single
+    // download option (even a pure-audio one) must land in the same slot a
+    // video download would, not the YouTube-only audio slot.
+    expect(metadata.downloadedAudioFilePath).toBeNull();
+    expect(metadata.channelId).toBeNull();
+    expect(metadata.platform).toBe('soundcloud');
+    expect(metadata.channel).toBe('Some Artist');
+  });
+
+  it('populates the new schemaVersion-5 fields (uploaderId/timestamp/license/categories/tags/music) for a generic entry', () => {
+    const { metadata } = writeLibraryEntry({
+      libraryDir,
+      videoMetaData: baseVideoMetaData({
+        id: 'track123',
+        platform: 'soundcloud',
+        extractorKey: 'Soundcloud',
+        uploaderId: '856062',
+        timestamp: 1314199241,
+        license: 'all-rights-reserved',
+        categories: ['Music'],
+        tags: ['dubstep'],
+        music: { track: 'First Of The Year (Equinox)', artist: 'Skrillex', album: null, genre: 'Dubstep' },
+      }),
+    });
+
+    expect(metadata.uploaderId).toBe('856062');
+    expect(metadata.timestamp).toBe(1314199241);
+    expect(metadata.license).toBe('all-rights-reserved');
+    expect(metadata.categories).toEqual(['Music']);
+    expect(metadata.tags).toEqual(['dubstep']);
+    expect(metadata.music).toEqual({ track: 'First Of The Year (Equinox)', artist: 'Skrillex', album: null, genre: 'Dubstep' });
+  });
+
+  it('still writes a YouTube entry under the usual channel/videoId path when platform is absent', () => {
+    const { channelDir, videoDir, metadata } = writeLibraryEntry({ libraryDir, videoMetaData: baseVideoMetaData() });
+    expect(channelDir).toBe(path.join(libraryDir, DEFAULT_LIBRARY_DIR_NAME, 'Some Channel'));
+    expect(videoDir).toBe(path.join(channelDir, 'abc123'));
+    expect(metadata.platform).toBe('youtube');
+    expect(metadata.channelId).toBe('UC123');
+  });
 });
 
 describe('addLibraryVersion', () => {
@@ -706,6 +788,65 @@ describe('scanLibrary', () => {
     expect(index.channels[0].videos[0].clipCount).toBe(2);
   });
 
+  it('flattens NonYT/<platform> folders into synthetic isPlatformGroup channels alongside real channels', async () => {
+    // A real channel, to confirm the two shapes coexist in one channels[] array.
+    writeLibraryEntry({ libraryDir, videoMetaData: baseVideoMetaData({ id: 'yt-vid', uploader: 'Real Channel' }) });
+
+    // Hand-written NonYT/<platform>/<hash>/<epoch>/metadata.json, as a
+    // library populated by an older/different process might produce, rather
+    // than only ever going through writeLibraryEntry itself.
+    const platformDir = path.join(libraryTagDir(libraryDir), NONYT_DIR_NAME, 'soundcloud');
+    const hash = nonYoutubeVideoHash('Soundcloud', 'track123', 'https://soundcloud.com/artist/track123');
+    const epochDir = path.join(platformDir, hash, '1700000000000');
+    fs.mkdirSync(epochDir, { recursive: true });
+    fs.writeFileSync(path.join(epochDir, 'metadata.json'), JSON.stringify({
+      schemaVersion: 5,
+      videoId: 'track123',
+      platform: 'soundcloud',
+      channelId: null,
+      channel: 'Some Artist',
+      title: 'A Soundcloud Track',
+      addedEpoch: 1700000000000,
+      downloadedFilePath: null,
+      downloadedAudioFilePath: null,
+    }), 'utf-8');
+
+    const index = await scanLibrary(libraryDir);
+
+    const realChannel = index.channels.find((c) => c.displayName === 'Real Channel');
+    expect(realChannel).toBeDefined();
+    expect(realChannel.isPlatformGroup).toBeFalsy();
+
+    const platformGroup = index.channels.find((c) => c.isPlatformGroup);
+    expect(platformGroup).toBeDefined();
+    expect(platformGroup.platform).toBe('soundcloud');
+    expect(platformGroup.displayName).toBe('soundcloud');
+    expect(platformGroup.channelIconPath).toBeNull();
+    // Full relative path, not a bare folder name -- moveLibraryEntry/
+    // library:refreshChannelIcon build an absolute path via
+    // path.join(libraryTagDir(...), channelFolderName) directly.
+    expect(platformGroup.channelFolderName).toBe(path.join(NONYT_DIR_NAME, 'soundcloud'));
+    expect(platformGroup.videos).toHaveLength(1);
+    expect(platformGroup.videos[0].metadata.videoId).toBe('track123');
+    expect(platformGroup.videos[0].metadata.platform).toBe('soundcloud');
+  });
+
+  it('groups multiple platform subfolders under NonYT into separate synthetic channels', async () => {
+    const soundcloudEpoch = path.join(libraryTagDir(libraryDir), NONYT_DIR_NAME, 'soundcloud', 'hash1', '1700000000000');
+    const dailymotionEpoch = path.join(libraryTagDir(libraryDir), NONYT_DIR_NAME, 'dailymotion', 'hash2', '1700000000001');
+    for (const [epochDir, videoId, platform] of [[soundcloudEpoch, 'sc-1', 'soundcloud'], [dailymotionEpoch, 'dm-1', 'dailymotion']]) {
+      fs.mkdirSync(epochDir, { recursive: true });
+      fs.writeFileSync(path.join(epochDir, 'metadata.json'), JSON.stringify({
+        schemaVersion: 5, videoId, platform, channelId: null, channel: null, title: 't', addedEpoch: 1700000000000,
+        downloadedFilePath: null, downloadedAudioFilePath: null,
+      }), 'utf-8');
+    }
+
+    const index = await scanLibrary(libraryDir);
+
+    const platformGroups = index.channels.filter((c) => c.isPlatformGroup);
+    expect(platformGroups.map((c) => c.platform).sort()).toEqual(['dailymotion', 'soundcloud']);
+  });
 });
 
 describe('checkAndRepairEpochFiles', () => {
@@ -1094,6 +1235,32 @@ describe('findVideoInIndex', () => {
     const index = { channels: [{ displayName: 'A', videos: [] }] };
     expect(findVideoInIndex(index, 'missing')).toBeNull();
   });
+
+  it('disambiguates a colliding raw id across two different extractors when platform is given', () => {
+    const index = {
+      channels: [
+        { displayName: 'soundcloud', videos: [{ metadata: { videoId: 'shared-id', platform: 'soundcloud' } }] },
+        { displayName: 'dailymotion', videos: [{ metadata: { videoId: 'shared-id', platform: 'dailymotion' } }] },
+      ],
+    };
+
+    const soundcloudMatch = findVideoInIndex(index, 'shared-id', 'soundcloud');
+    expect(soundcloudMatch.channel.displayName).toBe('soundcloud');
+
+    const dailymotionMatch = findVideoInIndex(index, 'shared-id', 'dailymotion');
+    expect(dailymotionMatch.channel.displayName).toBe('dailymotion');
+  });
+
+  it('without a platform argument, matches on videoId alone (backward compatible)', () => {
+    const index = { channels: [{ displayName: 'A', videos: [{ metadata: { videoId: 'shared-id', platform: 'soundcloud' } }] }] };
+    expect(findVideoInIndex(index, 'shared-id')).not.toBeNull();
+  });
+
+  it('treats a null/absent metadata.platform as youtube when a platform is given', () => {
+    const index = { channels: [{ displayName: 'A', videos: [{ metadata: { videoId: 'old-entry', platform: null } }] }] };
+    expect(findVideoInIndex(index, 'old-entry', 'youtube')).not.toBeNull();
+    expect(findVideoInIndex(index, 'old-entry', 'soundcloud')).toBeNull();
+  });
 });
 
 describe('writePlaylistSnapshot / enrichPlaylistEntry', () => {
diff --git a/src/electron/main.mjs b/src/electron/main.mjs
index d0d981f..d4695f6 100644
--- a/src/electron/main.mjs
+++ b/src/electron/main.mjs
@@ -1014,7 +1014,7 @@ ipcMain.handle('library:recordDownload', async (e, { videoDir, epoch, filePath,
     const metadata = recordLibraryDownload({ videoDir, epoch, filePath, resolution, format, kind });
     const { libraryDir, activeLibraryTag = DEFAULT_LIBRARY_DIR_NAME } = readSettings();
     await refreshLibraryIndex(libraryDir, activeLibraryTag);
-    const metadataTags = { title: metadata.title, artist: metadata.channel, date: metadata.uploadDate, description: metadata.description };
+    const metadataTags = buildEmbedMetadataTags(metadata);
     await maybeAutoEmbedMetadata({ filePath, kind, metadataTags, thumbnailPath: findVideoThumbnailPath(videoDir), libraryDir, logContext: `${videoDir}/${epoch}` });
     return { success: true };
 });
@@ -1029,7 +1029,7 @@ ipcMain.handle('library:swapDownload', async (e, { videoDir, epoch, tempFilePath
     const metadata = swapLibraryDownload({ libraryDir, videoDir, epoch, tempFilePath, oldFilePath, resolution, format, kind });
     await refreshLibraryIndex(libraryDir, activeLibraryTag);
     const filePath = kind === 'audio' ? metadata.downloadedAudioFilePath : metadata.downloadedFilePath;
-    const metadataTags = { title: metadata.title, artist: metadata.channel, date: metadata.uploadDate, description: metadata.description };
+    const metadataTags = buildEmbedMetadataTags(metadata);
     await maybeAutoEmbedMetadata({ filePath, kind, metadataTags, thumbnailPath: findVideoThumbnailPath(videoDir), libraryDir, logContext: `${videoDir}/${epoch}` });
     return metadata;
 });
@@ -2227,6 +2227,34 @@ ipcMain.handle('library:embedMetadata', async (e, { inputPath, metadataTags, thu
     return embedMetadataIntoFile({ inputPath, metadataTags, thumbnailPath, kind, libraryDir });
 });
 
+// Shared by library:recordDownload/swapDownload so the two IPC handlers
+// build the exact same {title, artist, date, description, ...} shape rather
+// than two independently drifting inline copies. artist: prefer the plain
+// channel/uploader name, falling back to uploaderId when there's none --
+// generic (non-YouTube) entries never have a channelId, so their "who made
+// this" is channel/uploaderId rather than a channel handle. When this entry
+// carries yt-dlp music tags (track/artist/album/genre, e.g. from SoundCloud),
+// spread those in and let music.artist override the plain artist fallback
+// when present, since a music source's own artist tag is more specific than
+// its uploader account name. LibraryVideoDetail.tsx's own handleEmbedMetadata
+// (not touched in this pass) should mirror this same precedence once its
+// frontend fix lands.
+function buildEmbedMetadataTags(metadata) {
+    const tags = {
+        title: metadata.title,
+        artist: metadata.channel || metadata.uploaderId,
+        date: metadata.uploadDate,
+        description: metadata.description,
+    };
+    if (metadata.music) {
+        if (metadata.music.track) tags.track = metadata.music.track;
+        if (metadata.music.album) tags.album = metadata.music.album;
+        if (metadata.music.genre) tags.genre = metadata.music.genre;
+        if (metadata.music.artist) tags.artist = metadata.music.artist;
+    }
+    return tags;
+}
+
 // Best-effort, matching enrichPlaylistEntry's own precedent for a
 // background step riding along an already-succeeded action. Shared by the
 // library flow (library:recordDownload/swapDownload, which build
diff --git a/src/electron/videoInfo.mjs b/src/electron/videoInfo.mjs
index 6d88ca1..bb7198e 100644
--- a/src/electron/videoInfo.mjs
+++ b/src/electron/videoInfo.mjs
@@ -2,6 +2,7 @@ import fs from 'fs';
 import { spawn } from 'child_process';
 import { isYouTubeUrl } from './utils/youtube.mjs';
 import { ERROR_KINDS, classifyDownloadError } from './downloadErrors.mjs';
+import { sanitizeForFilesystem } from './library.mjs';
 
 // Matches runFfmpegWithProgress's own '-b:a 192k' for the MP3 extraction
 // pass -- the estimate has to agree with what really gets encoded.
@@ -46,8 +47,10 @@ export function buildResolutions(info) {
     }
 
     // A real, audio-only estimate, computed independently of the video
-    // resolutions above.
-    if (resolutions.length > 0) {
+    // resolutions above -- gated on bestAudio existing (not on
+    // resolutions.length), since a pure-audio source like SoundCloud has no
+    // video-height formats at all and would otherwise return [] entirely.
+    if (bestAudio) {
         const mp3Size = info.duration ? (MP3_BITRATE_KBPS * 1000 * info.duration) / 8 : null;
         resolutions.push({
             resolution: 'MP3',
@@ -59,6 +62,35 @@ export function buildResolutions(info) {
     return resolutions;
 }
 
+// yt-dlp's own extractor_key ('Youtube', 'Dailymotion', 'Soundcloud', ...) is
+// the identity signal here, not the URL hostname isYouTubeUrl checks -- this
+// runs on already-fetched info, where the canonical extractor name is more
+// reliable than re-deriving it from originalUrl. 'youtube' is kept as a
+// literal, stable value distinct from whatever casing yt-dlp happens to use
+// for its own extractor_key (currently 'Youtube').
+function derivePlatform(extractorKey) {
+    if (!extractorKey) return null;
+    if (extractorKey.toLowerCase() === 'youtube') return 'youtube';
+    // Sanitized/lowercased for use as a library folder name (see
+    // library.mjs's NonYT/<platform>/ layout) -- reuses the same sanitizer
+    // every other on-disk folder name in this app goes through.
+    return sanitizeForFilesystem(extractorKey).toLowerCase();
+}
+
+// track/artist/album/genre only ever come from a genuinely music-shaped
+// source (e.g. SoundCloud) -- grouped into one music object rather than left
+// as four separate top-level fields, and left null entirely rather than an
+// object of all-nulls when none of them are present.
+function buildMusicInfo(info) {
+    if (!info.track && !info.artist && !info.album && !info.genre) return null;
+    return {
+        track: info.track || null,
+        artist: info.artist || null,
+        album: info.album || null,
+        genre: info.genre || null,
+    };
+}
+
 export function reshapeVideoInfo(info) {
     return {
         id: info.id,
@@ -83,6 +115,11 @@ export function reshapeVideoInfo(info) {
         fullTitle: info.fulltitle,
         sourceFormat: info.ext,
         language: info.language,
+        extractorKey: info.extractor_key,
+        platform: derivePlatform(info.extractor_key),
+        license: info.license || null,
+        timestamp: info.timestamp || null,
+        music: buildMusicInfo(info),
     };
 }
 
diff --git a/src/electron/videoInfo.test.mjs b/src/electron/videoInfo.test.mjs
new file mode 100644
index 0000000..f141cf5
--- /dev/null
+++ b/src/electron/videoInfo.test.mjs
@@ -0,0 +1,118 @@
+import { describe, it, expect } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { buildResolutions, reshapeVideoInfo } from './videoInfo.mjs';
+
+// Real yt-dlp -J output captured per-platform, not hand-constructed --
+// exercises reshapeVideoInfo's new fields (platform/extractorKey/license/
+// timestamp/music) against what yt-dlp actually reports for each extractor.
+const FIXTURES_DIR = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '../../../0tempFiles/ytdlp-metadata-experiment',
+);
+
+function loadFixture(name) {
+  return JSON.parse(fs.readFileSync(path.join(FIXTURES_DIR, `${name}.json`), 'utf-8'));
+}
+
+describe('buildResolutions', () => {
+  it('returns an MP3 entry for a pure-audio source (e.g. SoundCloud), not []', () => {
+    // Shaped after real SoundCloud yt-dlp output: every format is
+    // audio-only (vcodec: 'none', no height), so nothing survives the
+    // per-height loop -- this is the exact case the MP3-fallback guard
+    // used to miss.
+    const info = {
+      duration: 180,
+      formats: [
+        { format_id: '0', vcodec: 'none', acodec: 'mp3', abr: 128, filesize: 2_880_000 },
+        { format_id: '1', vcodec: 'none', acodec: 'opus', abr: 64, filesize: 1_440_000 },
+      ],
+    };
+
+    const resolutions = buildResolutions(info);
+
+    expect(resolutions).not.toEqual([]);
+    const mp3Entry = resolutions.find((r) => r.resolution === 'MP3');
+    expect(mp3Entry).toBeDefined();
+    expect(mp3Entry.ext).toBe('mp3');
+    expect(mp3Entry.filesizeMb).toBeGreaterThan(0);
+  });
+
+  it('still returns [] when there is no audio at all', () => {
+    const info = { duration: 180, formats: [] };
+    expect(buildResolutions(info)).toEqual([]);
+  });
+
+  it('includes both video-height resolutions and the MP3 fallback for a normal video source', () => {
+    const info = {
+      duration: 120,
+      formats: [
+        { format_id: 'a', vcodec: 'none', acodec: 'aac', abr: 128, filesize: 1_920_000 },
+        { format_id: 'v', vcodec: 'avc1', height: 720, ext: 'mp4', filesize: 20_000_000 },
+      ],
+    };
+
+    const resolutions = buildResolutions(info);
+
+    expect(resolutions.some((r) => r.resolution === '720')).toBe(true);
+    expect(resolutions.some((r) => r.resolution === 'MP3')).toBe(true);
+  });
+});
+
+describe('reshapeVideoInfo', () => {
+  it('derives platform "youtube" from extractor_key "Youtube", carries extractorKey, license, timestamp', () => {
+    const info = loadFixture('youtube');
+    const response = reshapeVideoInfo(info);
+
+    expect(response.extractorKey).toBe('Youtube');
+    expect(response.platform).toBe('youtube');
+    expect(response.license).toBe(info.license);
+    expect(response.timestamp).toBe(info.timestamp);
+    expect(response.music).toBeNull();
+  });
+
+  it('derives a sanitized/lowercased platform for a non-YouTube extractor (SoundCloud) and builds a music object', () => {
+    const info = loadFixture('soundcloud');
+    const response = reshapeVideoInfo(info);
+
+    expect(response.extractorKey).toBe('Soundcloud');
+    expect(response.platform).toBe('soundcloud');
+    expect(response.music).toEqual({
+      track: info.track,
+      artist: info.artist,
+      album: info.album || null,
+      genre: info.genre,
+    });
+  });
+
+  it('derives platform for Dailymotion, with no music object when track/artist/album/genre are all absent', () => {
+    const info = loadFixture('dailymotion');
+    const response = reshapeVideoInfo(info);
+
+    expect(response.extractorKey).toBe('Dailymotion');
+    expect(response.platform).toBe('dailymotion');
+    expect(response.music).toBeNull();
+    expect(response.uploaderId).toBe(info.uploader_id);
+  });
+
+  it('derives a filesystem-safe platform name for a multi-word extractor_key (PeerTube)', () => {
+    const info = loadFixture('peertube');
+    const response = reshapeVideoInfo(info);
+
+    expect(response.extractorKey).toBe('PeerTube');
+    expect(response.platform).toBe('peertube');
+    expect(response.categories).toEqual(info.categories);
+    expect(response.tags).toEqual(info.tags);
+  });
+
+  it('derives platform for archive.org (extractor_key "ArchiveOrg") and carries its license/timestamp', () => {
+    const info = loadFixture('archive_org');
+    const response = reshapeVideoInfo(info);
+
+    expect(response.extractorKey).toBe('ArchiveOrg');
+    expect(response.platform).toBe('archiveorg');
+    expect(response.license).toBe(info.license);
+    expect(response.timestamp).toBe(info.timestamp);
+  });
+});
diff --git a/src/types.ts b/src/types.ts
index 99287bf..2058cc0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -35,6 +35,50 @@ export type LibraryVideoMetadata = {
     downloadedFormat: string | null;
     downloadedAudioFilePath: string | null;
     lastPlaybackPositionSeconds: number | null;
+    // Added in schemaVersion 5 (see SlothArchiver-dossier's non-YouTube
+    // platform support plan) -- null/absent means YouTube, for backward
+    // compat with every entry written before this field existed; new
+    // YouTube writes also set it explicitly now. channelId stays
+    // YouTube-only (always null for a generic entry) -- a generic entry's
+    // "who made this" is channel/uploaderId instead.
+    platform?: string | null;
+    uploaderId?: string | null;
+    timestamp?: number | null;
+    license?: string | null;
+    categories?: string[] | null;
+    tags?: string[] | null;
+    music?: { track: string | null; artist: string | null; album: string | null; genre: string | null } | null;
+}
+
+export type LibraryVideoEpoch = {
+    epoch: string;
+    metadata: LibraryVideoMetadata;
+}
+
+// Mirrors the shape returned by window.electronAPI.getLibraryIndex() et al.
+// (see library.mjs's scanLibrary) -- previously redeclared identically in
+// LibraryVideoDetail.tsx, LibraryScreen.tsx, and VideoQualityDownload.tsx.
+export type LibraryVideo = {
+    videoFolderName: string;
+    videoDir: string;
+    latestEpoch: string | null;
+    metadata: LibraryVideoMetadata;
+    epochs: LibraryVideoEpoch[];
+    thumbnailPath: string | null;
+    clipCount: number;
+}
+
+export type LibraryChannel = {
+    channelFolderName: string;
+    displayName: string;
+    channelIconPath: string | null;
+    videos: LibraryVideo[];
+    // Set by scanLibrary's NonYT walk (library.mjs) -- a synthetic "channel"
+    // grouping every non-YouTube entry by platform rather than by uploader.
+    // channelFolderName for one of these is the full relative path
+    // (NonYT/<platform>), not a bare folder name.
+    isPlatformGroup?: boolean;
+    platform?: string;
 }
 
 // Video-level (not epoch-level) -- a clip is derived from whichever version
diff --git a/src/ui/components/LibraryVideoPlayer.test.tsx b/src/ui/components/LibraryVideoPlayer.test.tsx
index 46ce7b2..3b8a8b8 100644
--- a/src/ui/components/LibraryVideoPlayer.test.tsx
+++ b/src/ui/components/LibraryVideoPlayer.test.tsx
@@ -160,6 +160,83 @@ describe('LibraryVideoPlayer', () => {
     await waitFor(() => expect(container.querySelector('[data-testid="PlayCircleOutlineIcon"]')).not.toBeInTheDocument());
   });
 
+  it('hides the poster once playback starts for a real video, but keeps it up for the whole time on an audio-only source', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <LibraryVideoPlayer metadata={baseMetadata({ downloadedFilePath: '/lib/c/v1/1/video.mp4', thumbnail: 'https://example.com/thumb.jpg' })} />,
+    );
+    await findSourceEl(container);
+    const overlayButton = container.querySelector('[data-testid="PlayCircleOutlineIcon"]')?.closest('button');
+    await user.click(overlayButton!);
+
+    const video = container.querySelector('video') as HTMLVideoElement;
+    // Real browsers report the decoded frame size here once loadedmetadata
+    // fires; jsdom never decodes anything, so this has to be stubbed the
+    // same way fireDecodeError above stubs video.error -- Vidstack's own
+    // viewType derives from these, 'audio' whenever they're 0.
+    Object.defineProperty(video, 'videoWidth', { value: 1280, configurable: true });
+    Object.defineProperty(video, 'videoHeight', { value: 720, configurable: true });
+    fireReadinessCascade(video);
+    fireEvent.play(video);
+
+    await waitFor(() => expect(container.querySelector('img[alt=""]')).not.toBeInTheDocument());
+  });
+
+  it('keeps the poster visible through playback for an audio-only source', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <LibraryVideoPlayer metadata={baseMetadata({ downloadedFilePath: '/lib/c/v1/1/track.mp4', thumbnail: 'https://example.com/thumb.jpg' })} />,
+    );
+    await findSourceEl(container);
+    const overlayButton = container.querySelector('[data-testid="PlayCircleOutlineIcon"]')?.closest('button');
+    await user.click(overlayButton!);
+
+    const video = container.querySelector('video') as HTMLVideoElement;
+    // jsdom's videoWidth/videoHeight already default to 0 (no real decode
+    // pipeline), matching a genuine audio-only source's own dimensions in a
+    // real browser -- left unstubbed here on purpose, unlike the "real
+    // video" test above.
+    fireReadinessCascade(video);
+    fireEvent.play(video);
+
+    await waitFor(() => expect(container.querySelector('[data-testid="PlayCircleOutlineIcon"]')).not.toBeInTheDocument());
+    expect(container.querySelector('img[alt=""]')).toBeInTheDocument();
+  });
+
+  // Regression test: the poster used to be a sibling of <MediaPlayer>
+  // itself, rendered after it -- since neither has an explicit z-index,
+  // plain (later-wins) DOM-order stacking meant it covered the *entire*
+  // player, controls included, for as long as it stayed up. That was
+  // invisible before an audio-only source could keep the poster up during
+  // real playback (see the previous test) -- now it has to sit inside
+  // <MediaPlayer>, above the video/background but below the click-overlay,
+  // queue button, and controls bar that follow it in DOM order.
+  it('keeps the poster behind the player controls in DOM order, not covering them', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <LibraryVideoPlayer metadata={baseMetadata({ downloadedFilePath: '/lib/c/v1/1/track.mp4', thumbnail: 'https://example.com/thumb.jpg' })} />,
+    );
+    await findSourceEl(container);
+    const overlayButton = container.querySelector('[data-testid="PlayCircleOutlineIcon"]')?.closest('button');
+    await user.click(overlayButton!);
+    const video = container.querySelector('video') as HTMLVideoElement;
+    fireReadinessCascade(video);
+    fireEvent.play(video);
+    await waitFor(() => expect(container.querySelector('img[alt=""]')).toBeInTheDocument());
+
+    const poster = container.querySelector('img[alt=""]') as HTMLElement;
+    // A real element from inside the controls bar (LibraryVideoPlayerControls)
+    // -- stands in for "the controls," which have no single wrapping
+    // data-attribute of their own to query directly.
+    const controls = container.querySelector('[data-testid="time-current"]') as HTMLElement;
+    expect(poster).toBeInTheDocument();
+    expect(controls).toBeInTheDocument();
+    // DOCUMENT_POSITION_FOLLOWING (4) means `controls` comes after `poster`
+    // in the tree -- the poster has to be earlier, not later, to stay behind
+    // it once both are visible at the same time.
+    expect(poster.compareDocumentPosition(controls) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
   it('asks the backend for a playable preview for a non-native extension, and plays the generated preview once ready', async () => {
     const { container } = render(
       <LibraryVideoPlayer metadata={baseMetadata({ downloadedFilePath: '/lib/c/v1/1/video.mkv' })} />,
diff --git a/src/ui/components/LibraryVideoPlayer.tsx b/src/ui/components/LibraryVideoPlayer.tsx
index 4738ffb..64a6a00 100644
--- a/src/ui/components/LibraryVideoPlayer.tsx
+++ b/src/ui/components/LibraryVideoPlayer.tsx
@@ -117,6 +117,12 @@ const LibraryVideoPlayer = forwardRef<LibraryVideoPlayerHandle, {
   // One-time "you can start playback here" affordance -- gone for good once
   // playback has ever started (native controls take over from there).
   const [hasStartedPlayback, setHasStartedPlayback] = useState(false);
+  // Set once the player actually knows (Vidstack's own viewType, populated by
+  // 'can-play') -- an audio-only source (no video track at all, e.g. a
+  // SoundCloud download) would otherwise leave the poster gone and the user
+  // staring at MediaPlayer's plain black background for the entire playback,
+  // not just the brief moment before it starts.
+  const [isAudioOnly, setIsAudioOnly] = useState(false);
   const [loopEnabled, setLoopEnabled] = useState(false);
   const [loopSequenceEnabled, setLoopSequenceEnabled] = useState(false);
   const [contextMenuPosition, setContextMenuPosition] = useState<{ top: number; left: number } | null>(null);
@@ -137,6 +143,7 @@ const LibraryVideoPlayer = forwardRef<LibraryVideoPlayerHandle, {
   // silently-broken black player.
   useEffect(() => {
     setHasStartedPlayback(false);
+    setIsAudioOnly(false);
     if (!filePath) return;
 
     if (isNativePlayable) {
@@ -246,6 +253,18 @@ const LibraryVideoPlayer = forwardRef<LibraryVideoPlayerHandle, {
   };
 
   const handleCanPlay = () => {
+    // Reads the native <video> element directly rather than Vidstack's own
+    // state.viewType/mediaWidth/mediaHeight -- viewType is derived from the
+    // declared src `type` (always 'video/mp4'/'video/webm' here, see
+    // mimeTypeForExtension, since this app never has a real "this is audio"
+    // MIME hint to give it), not the actual decoded content, so it never
+    // reflects whether the file secretly has no video track; Vidstack's own
+    // mediaWidth/mediaHeight need a 'resize' event this app never fires. A
+    // real browser reports videoWidth/videoHeight as 0 directly on the
+    // element itself for an audio-only source regardless of the declared
+    // type, immediately once 'loadedmetadata' fires -- no extra event needed.
+    const videoEl = playerRef.current?.el?.querySelector('video');
+    if (videoEl) setIsAudioOnly(videoEl.videoWidth === 0 && videoEl.videoHeight === 0);
     if (initialSeekSeconds == null || appliedInitialSeekRef.current || !playerRef.current) return;
     appliedInitialSeekRef.current = true;
     playerRef.current.currentTime = initialSeekSeconds;
@@ -296,6 +315,30 @@ const LibraryVideoPlayer = forwardRef<LibraryVideoPlayerHandle, {
             onPause={() => onPlaybackStateChange?.(false)}
           >
             <MediaProvider />
+            {/* Vidstack's own <Poster> component hard-rejects any src scheme
+                outside http/https/data/blob -- our custom app-video:// scheme
+                throws at render time, so it can never be used for a local
+                thumbnail file here. A plain <img>, painted only until
+                playback starts, does the same job without going through
+                Vidstack's media-loading pipeline at all. Stays up for the
+                *entire* playback when the source is audio-only, though --
+                there's no video frame to reveal underneath, so removing it
+                would just leave MediaPlayer's plain black background for the
+                whole time the user is listening. Placed here (a MediaPlayer
+                child, right after the provider) rather than as a sibling of
+                the whole player -- neither this nor anything else below has
+                an explicit z-index, so plain DOM order decides stacking: this
+                needs to sit above the raw video/black background but below
+                the click-overlay/queue-button/controls that follow it, not
+                covering them the way a later, outside-MediaPlayer sibling
+                would. */}
+            {(!hasStartedPlayback || isAudioOnly) && posterSrc &&
+              <Box
+                component="img"
+                src={posterSrc}
+                alt=""
+                sx={{ ...fillSx, position: 'absolute', top: 0, left: 0, objectFit: 'cover', pointerEvents: 'none' }}
+              />}
             {/* Click-anywhere-on-the-video-to-toggle. Deliberately NOT
                 Vidstack's own <Gesture> primitive: it unconditionally waits
                 250ms before firing (to disambiguate from a double-tap
@@ -351,19 +394,6 @@ const LibraryVideoPlayer = forwardRef<LibraryVideoPlayerHandle, {
             // normal videoId/metadata-derived payload above.
             onAddToQueue={handleAddToQueue}
           />
-          {/* Vidstack's own <Poster> component hard-rejects any src scheme
-              outside http/https/data/blob -- our custom app-video:// scheme
-              throws at render time, so it can never be used for a local
-              thumbnail file here. A plain <img>, painted only until
-              playback starts, does the same job without going through
-              Vidstack's media-loading pipeline at all. */}
-          {!hasStartedPlayback && posterSrc &&
-            <Box
-              component="img"
-              src={posterSrc}
-              alt=""
-              sx={{ ...fillSx, position: 'absolute', top: 0, left: 0, objectFit: 'cover', pointerEvents: 'none' }}
-            />}
           {!hasStartedPlayback &&
             <IconButton
               onClick={safePlay}
diff --git a/src/ui/screens/DownloaderScreen.test.tsx b/src/ui/screens/DownloaderScreen.test.tsx
index 2235314..c4cb50f 100644
--- a/src/ui/screens/DownloaderScreen.test.tsx
+++ b/src/ui/screens/DownloaderScreen.test.tsx
@@ -136,6 +136,26 @@ describe('DownloaderScreen', () => {
     expect(screen.getByLabelText('URL')).toHaveValue('');
   });
 
+  it('allows adding a non-YouTube video to the library too', async () => {
+    const user = userEvent.setup();
+    const nonYoutubeResponse = { ...videoResponse, originalUrl: 'https://www.dailymotion.com/video/xbafapm' };
+    (window.electronAPI.getVideoInfoPython as ReturnType<typeof vi.fn>).mockResolvedValue({
+      success: true, data: { response: nonYoutubeResponse, fromCache: false },
+    });
+    renderScreen();
+    await user.type(screen.getByLabelText('URL'), nonYoutubeResponse.originalUrl);
+    await screen.findByRole('link', { name: 'My Great Video' }, { timeout: 2000 });
+    (window.electronAPI.findLibraryVideo as ReturnType<typeof vi.fn>).mockResolvedValue({ found: false });
+    (window.electronAPI.addLibraryEntry as ReturnType<typeof vi.fn>).mockResolvedValue({ success: true, videoDir: '/d', epoch: '1' });
+
+    const addButton = within(screen.getByLabelText('Add to library')).getByRole('button');
+    expect(addButton).not.toBeDisabled();
+    await user.click(addButton);
+
+    await waitFor(() => expect(screen.getByText('Added to library')).toBeInTheDocument());
+    expect(window.electronAPI.addLibraryEntry).toHaveBeenCalledWith(nonYoutubeResponse, 'DefaultLibrary');
+  });
+
   it('offers Override/Add as new version when the video is already tracked', async () => {
     const user = userEvent.setup();
     await loadVideo(user);
diff --git a/src/ui/screens/DownloaderScreen.tsx b/src/ui/screens/DownloaderScreen.tsx
index 6f3de13..e759834 100644
--- a/src/ui/screens/DownloaderScreen.tsx
+++ b/src/ui/screens/DownloaderScreen.tsx
@@ -272,7 +272,6 @@ export default function DownloaderScreen() {
               </FormControl>}
             <Tooltip title={
               !videoInfo ? 'Load a video first' :
-              !isYouTube ? 'Only YouTube videos can be added to the library' :
               libraryAddStatus === 'saving' ? 'Adding...' :
               libraryAddStatus === 'error' ? 'Failed to add -- click to retry' :
               'Add to library'
@@ -280,7 +279,7 @@ export default function DownloaderScreen() {
               <span>
                 <IconButton
                   onClick={handleAddToLibrary}
-                  disabled={!videoInfo || !isYouTube || libraryAddStatus === 'saving'}
+                  disabled={!videoInfo || libraryAddStatus === 'saving'}
                   sx={{
                     width: 56,
                     height: 56,
@@ -288,7 +287,7 @@ export default function DownloaderScreen() {
                     // Only colored once a video is loaded -- applying this override
                     // unconditionally (including while disabled) fought MUI's own
                     // disabled-button styling and rendered the button invisible.
-                    ...(videoInfo && isYouTube && {
+                    ...(videoInfo && {
                       bgcolor: libraryAddStatus === 'error' ? 'error.main' : 'primary.main',
                       color: 'primary.contrastText',
                       '&:hover': { bgcolor: libraryAddStatus === 'error' ? 'error.dark' : 'primary.dark' },
diff --git a/src/ui/screens/LibraryScreen.tsx b/src/ui/screens/LibraryScreen.tsx
index 78328f7..28f472d 100644
--- a/src/ui/screens/LibraryScreen.tsx
+++ b/src/ui/screens/LibraryScreen.tsx
@@ -54,7 +54,7 @@ import TagFilterPopover, { type SystemFilterKey } from '../components/TagFilterP
 import { useLibrarySearch } from '../hooks/useLibrarySearch.tsx';
 import { useBulkAddQueue, type BulkAddEntry } from '../hooks/useBulkAddQueue.tsx';
 import { useLibraryTags } from '../hooks/useLibraryTags.tsx';
-import type { LibraryVideoMetadata } from '../../types';
+import type { LibraryVideo, LibraryChannel } from '../../types';
 
 type LibraryViewMode = 'channel' | 'video';
 // Top-level split within the Library tab -- "Videos" is everything this
@@ -64,23 +64,6 @@ type LibraryViewMode = 'channel' | 'video';
 // URL-routed, same as the LibraryViewMode toggle below.
 type LibrarySection = 'videos' | 'playlists';
 
-type LibraryVideo = {
-  videoFolderName: string;
-  videoDir: string;
-  latestEpoch: string | null;
-  metadata: LibraryVideoMetadata;
-  epochs: { epoch: string; metadata: LibraryVideoMetadata }[];
-  thumbnailPath: string | null;
-  clipCount: number;
-};
-
-type LibraryChannel = {
-  channelFolderName: string;
-  displayName: string;
-  channelIconPath: string | null;
-  videos: LibraryVideo[];
-};
-
 // Only the flat by-video list gets a sort control -- the channel view's own
 // ordering is alphabetical-by-channel and isn't in scope here.
 type SortField = 'title' | 'uploadDate' | 'dateAdded' | 'channel' | 'downloaded' | 'quality';
diff --git a/src/ui/screens/LibraryVideoDetail.test.tsx b/src/ui/screens/LibraryVideoDetail.test.tsx
index af4f638..7b0b31f 100644
--- a/src/ui/screens/LibraryVideoDetail.test.tsx
+++ b/src/ui/screens/LibraryVideoDetail.test.tsx
@@ -353,6 +353,59 @@ describe('LibraryVideoDetail', () => {
     }));
   });
 
+  describe('generic (non-YouTube) audio-only entry', () => {
+    it('routes its MP3-only download through the main resolution grid, not the separate Audio section', async () => {
+      const video = makeVideo({
+        platform: 'soundcloud',
+        resolutions: [{ resolution: 'MP3', filesizeMb: 5 }],
+      });
+      const { onVersionsChanged } = renderDetail(video);
+      const user = userEvent.setup();
+
+      // The separate Audio section's "Download MP3" button never renders --
+      // only the main grid's MP3 button does.
+      expect(screen.queryByRole('button', { name: /Download MP3/ })).not.toBeInTheDocument();
+      const mp3Button = screen.getByRole('button', { name: /^MP3/ });
+      expect(mp3Button).toHaveTextContent('MP3');
+      expect(mp3Button).not.toHaveTextContent('MP3p');
+
+      await user.click(mp3Button);
+
+      // Same flow as a normal video quality pick (handleDownload), not
+      // handleAudioDownload -- lands toward downloadedFilePath, not
+      // downloadedAudioFilePath.
+      expect(window.electronAPIPythonDownload.startDownloadPython).toHaveBeenCalledWith(
+        expect.objectContaining({ outputPath: '/lib/Channel A/vidA/100/video', resolution: 'MP3' }),
+      );
+
+      emit({ type: 'done', payload: { filename: '/lib/Channel A/vidA/100/video.mp3' } as DownloadProgressMessage['payload'] });
+
+      await waitFor(() => expect(window.electronAPI.recordLibraryDownload).toHaveBeenCalledWith({
+        videoDir: '/lib/Channel A/vidA',
+        epoch: '100',
+        filePath: '/lib/Channel A/vidA/100/video.mp3',
+        resolution: 'MP3',
+        format: 'dflt',
+        kind: 'video',
+      }));
+      await waitFor(() => expect(onVersionsChanged).toHaveBeenCalled());
+
+      // The plain native <audio controls> widget from the old MP3 section
+      // never renders for this flow.
+      expect(document.querySelector('audio')).not.toBeInTheDocument();
+    });
+
+    it('leaves a real YouTube entry with both a video resolution and a separate MP3 resolution unaffected', async () => {
+      const video = makeVideo({ downloadedAudioFilePath: '/v/audio.mp3' });
+      renderDetail(video);
+
+      // The Audio section's own "Download MP3"/<audio> flow still works
+      // exactly as before -- untouched by the generic-entry routing change.
+      expect(screen.getByRole('button', { name: /^720p/ })).toBeInTheDocument();
+      expect(document.querySelector('audio')).toBeInTheDocument();
+    });
+  });
+
   it('switching versions swaps the displayed metadata', async () => {
     const meta100 = baseMetadata({ downloadedFilePath: '/v/100.mp4', downloadedResolution: '720', downloadedFormat: 'dflt' });
     const meta50 = baseMetadata({ downloadedFilePath: '/v/50.mp4', downloadedResolution: '480', downloadedFormat: 'dflt' });
@@ -535,6 +588,25 @@ describe('LibraryVideoDetail', () => {
     expect(await screen.findByText('Metadata embedded')).toBeInTheDocument();
   });
 
+  // Regression test: a generic (non-YouTube) entry has no separate
+  // downloadedAudioFilePath slot, so an audio-only download (resolution
+  // 'MP3') lands directly in downloadedFilePath -- kind must reflect that
+  // it's audio, not assume "downloadedFilePath means video" the way a real
+  // YouTube video+separate-MP3 entry always can.
+  it('embeds metadata with kind "audio" when downloadedFilePath itself holds an MP3-resolution download', async () => {
+    const video = makeVideo({
+      downloadedFilePath: '/v/track.mp3', downloadedResolution: 'MP3', downloadedFormat: 'dflt',
+    });
+    renderDetail(video);
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole('button', { name: 'Embed metadata into local file' }));
+
+    await waitFor(() => expect(window.electronAPI.embedFileMetadata).toHaveBeenCalledWith(expect.objectContaining({
+      inputPath: '/v/track.mp3', kind: 'audio',
+    })));
+  });
+
   it('deletes the last remaining version and bounces out via onDeleted', async () => {
     const video = makeVideo();
     (window.electronAPI.deleteLibraryEntry as ReturnType<typeof vi.fn>).mockResolvedValue({ videoDeleted: true });
diff --git a/src/ui/screens/LibraryVideoDetail.tsx b/src/ui/screens/LibraryVideoDetail.tsx
index ace1718..c5107ec 100644
--- a/src/ui/screens/LibraryVideoDetail.tsx
+++ b/src/ui/screens/LibraryVideoDetail.tsx
@@ -35,23 +35,13 @@ import VideoQualityDownload from './VideoQualityDownload';
 import FfmpegUtilitiesPanel, { OTHER_FORMAT_VALUE } from './FfmpegUtilitiesPanel';
 import ClipCollectionView from '../components/ClipCollectionView';
 import LibraryVideoPlayerWithTools from '../components/LibraryVideoPlayerWithTools';
-import type { LibraryVideoMetadata, LibraryClip } from '../../types';
-
-type LibraryVideo = {
-  videoFolderName: string;
-  videoDir: string;
-  latestEpoch: string | null;
-  metadata: LibraryVideoMetadata;
-  epochs: { epoch: string; metadata: LibraryVideoMetadata }[];
-  thumbnailPath: string | null;
-  clipCount: number;
-};
+import type { LibraryClip, LibraryVideo } from '../../types';
 
 // Mirrors library.mjs's own CURRENT_VIDEO_SCHEMA_VERSION (main process and
 // renderer never cross-import here). An entry whose stored schemaVersion is
 // older than this predates a metadata-shape change and won't have whatever
 // that change added -- "Refresh from YouTube" is what fixes it.
-const CURRENT_VIDEO_SCHEMA_VERSION = 4;
+const CURRENT_VIDEO_SCHEMA_VERSION = 5;
 
 export default function LibraryVideoDetail({
   video, onBack, onLibraryChanged, onDeleted, onVersionsChanged, videoTags, onVideoTagsChanged,
@@ -646,8 +636,16 @@ export default function LibraryVideoDetail({
     // Embeds into whichever of the video/audio files this version has --
     // either, or both, since they're independent coexisting slots. kind
     // tells main.mjs which stream index the cover art lands at.
+    // downloadedFilePath isn't always a real video: a generic (non-YouTube)
+    // entry has no separate downloadedAudioFilePath slot, so an audio-only
+    // download (resolution 'MP3') lands right in downloadedFilePath instead
+    // -- kind has to reflect that, not just assume "downloadedFilePath means
+    // video," or main.mjs's embed step tries to map a nonexistent video
+    // stream (0:v:0) and fails outright.
     const targets: { path: string; kind: 'video' | 'audio' }[] = [
-      metadata.downloadedFilePath ? { path: metadata.downloadedFilePath, kind: 'video' as const } : null,
+      metadata.downloadedFilePath
+        ? { path: metadata.downloadedFilePath, kind: metadata.downloadedResolution === 'MP3' ? 'audio' as const : 'video' as const }
+        : null,
       metadata.downloadedAudioFilePath ? { path: metadata.downloadedAudioFilePath, kind: 'audio' as const } : null,
     ].filter((t): t is { path: string; kind: 'video' | 'audio' } => !!t);
     if (targets.length === 0) return;
@@ -724,11 +722,18 @@ export default function LibraryVideoDetail({
   // Gates the whole FFMPEG utilities section -- every tool there operates on
   // the video file, not the separate MP3 slot.
   const isVideoDownloaded = !!metadata.downloadedFilePath;
+  const isGeneric = !!metadata.platform && metadata.platform !== 'youtube';
   const resolutions = metadata.resolutions || [];
   // MP3 is rendered in its own Audio sub-section, not mixed into the video
-  // quality grid.
-  const videoResolutions = resolutions.filter((r) => r.resolution !== 'MP3');
-  const mp3Resolution = resolutions.find((r) => r.resolution === 'MP3');
+  // quality grid -- except for a generic (non-YouTube) entry, where MP3 may
+  // be the *only* option (e.g. SoundCloud) and needs to go through the main
+  // player rather than the separate <audio> widget the Audio section renders
+  // (that widget was only ever designed as a convenience preview next to a
+  // real video already playing above, not as a video's sole player). So a
+  // generic entry keeps its MP3 resolution in the main grid and never gets
+  // one split out into mp3Resolution.
+  const videoResolutions = isGeneric ? resolutions : resolutions.filter((r) => r.resolution !== 'MP3');
+  const mp3Resolution = isGeneric ? undefined : resolutions.find((r) => r.resolution === 'MP3');
   const isSchemaOutdated = (metadata.schemaVersion ?? 0) < CURRENT_VIDEO_SCHEMA_VERSION;
 
   return (
diff --git a/src/ui/screens/VideoQualityDownload.tsx b/src/ui/screens/VideoQualityDownload.tsx
index a2f19e3..9d76a9f 100644
--- a/src/ui/screens/VideoQualityDownload.tsx
+++ b/src/ui/screens/VideoQualityDownload.tsx
@@ -26,16 +26,7 @@ import { pink } from '@mui/material/colors';
 import { buildAppVideoUrl, formatEpochLabel, isLongVideoForPostprocess } from '../../utils/utils.ts';
 import LinearProgressWithLabel from '../components/LinearProgressWithLabel';
 import VideoTagsPopover from '../components/VideoTagsPopover';
-import type { LibraryVideoMetadata, Resolution } from '../../types';
-
-type LibraryVideo = {
-  videoFolderName: string;
-  videoDir: string;
-  latestEpoch: string | null;
-  metadata: LibraryVideoMetadata;
-  epochs: { epoch: string; metadata: LibraryVideoMetadata }[];
-  thumbnailPath: string | null;
-};
+import type { LibraryVideo, LibraryVideoMetadata, Resolution } from '../../types';
 
 // Shared between the first-download and "download different quality" flows
 // -- excludeResolution blocks re-picking whatever's already downloaded
@@ -70,7 +61,7 @@ function ResolutionPicker({ resolutions, excludeResolution, onSelect, selectedFo
             >
               <Stack spacing={0} direction="column" divider={<Divider flexItem sx={{ mx: 1 }} orientation="horizontal" />}>
                 <Typography variant="button" textTransform="none">
-                  {res.resolution}p{res.resolution === excludeResolution ? ' (current)' : ''}
+                  {res.resolution === 'MP3' ? 'MP3' : `${res.resolution}p`}{res.resolution === excludeResolution ? ' (current)' : ''}
                 </Typography>
                 <Typography variant="caption">{res.filesizeMb}Mb</Typography>
               </Stack>
@@ -271,7 +262,7 @@ export default function VideoQualityDownload({
             <Stack direction="row" justifyContent="space-between" alignItems="center">
               <Chip
                 color="success"
-                label={`${metadata.downloadedResolution}p`}
+                label={metadata.downloadedResolution === 'MP3' ? 'MP3' : `${metadata.downloadedResolution}p`}
               />
               <Stack direction="row" spacing={0.5} alignItems="center" useFlexGap flexWrap="wrap" sx={{ justifyContent: 'flex-end' }}>
                 {appliedTagNames.map((tag) => (
@@ -328,7 +319,7 @@ export default function VideoQualityDownload({
         <Stack spacing={1} sx={{ p: 1 }}>
           <Typography variant="subtitle1" textAlign="center">
             {downloadStatus === 'Postprocessing...' ? 'Postprocessing' : 'Downloading'}
-            {selectedResolution && ` (${selectedResolution}p)`}
+            {selectedResolution && ` (${selectedResolution}${selectedResolution.toLowerCase() === 'mp3' ? '' : 'p'})`}
           </Typography>
           <LinearProgressWithLabel value={postprocessProgress} valueBuffer={downloadProgress} indeterminate={postprocessIndeterminate} />
           <LongVideoPostprocessWarning duration={metadata.duration} />

From 08a1003e09bb12ee6982a9c9a5f8d6b6b4ed3085 Mon Sep 17 00:00:00 2001
From: Sloth <sloth.software.dev@protonmail.com>
Date: Mon, 21 Sep 2026 22:09:15 -0700
Subject: [PATCH 4/8] feat(app): phase 2 of generic library addition, clipping,
 platform labels and full page for generic library additions has been added.

---
 src/ui/components/TagFilterPopover.tsx     |   3 +-
 src/ui/screens/ExtraDataTable.test.tsx     |  59 ++++++++++
 src/ui/screens/ExtraDataTable.tsx          |  70 ++++++++++++
 src/ui/screens/FfmpegUtilitiesPanel.tsx    |  26 +++--
 src/ui/screens/LibraryScreen.test.tsx      | 127 +++++++++++++++++++++
 src/ui/screens/LibraryScreen.tsx           |  64 ++++++++---
 src/ui/screens/LibraryVideoDetail.test.tsx |  93 +++++++++++++++
 src/ui/screens/LibraryVideoDetail.tsx      |  14 ++-
 src/ui/screens/VideoQualityDownload.tsx    |  17 ++-
 src/ui/utils/platformIcons.test.tsx        |  48 ++++++++
 src/ui/utils/platformIcons.tsx             |  50 ++++++++
 11 files changed, 536 insertions(+), 35 deletions(-)
 create mode 100644 src/ui/screens/ExtraDataTable.test.tsx
 create mode 100644 src/ui/screens/ExtraDataTable.tsx
 create mode 100644 src/ui/utils/platformIcons.test.tsx
 create mode 100644 src/ui/utils/platformIcons.tsx

diff --git a/src/ui/components/TagFilterPopover.tsx b/src/ui/components/TagFilterPopover.tsx
index bb6c81c..9857a97 100644
--- a/src/ui/components/TagFilterPopover.tsx
+++ b/src/ui/components/TagFilterPopover.tsx
@@ -13,10 +13,11 @@ import {
 // generated per-caller. Both entries AND together with each other and with
 // any selected tags -- checking both at once is a valid, if useless,
 // combination (matches "0 results" rather than being blocked).
-export type SystemFilterKey = 'downloaded' | 'notDownloaded';
+export type SystemFilterKey = 'downloaded' | 'notDownloaded' | 'nonYoutube';
 export const SYSTEM_FILTER_OPTIONS: { key: SystemFilterKey; label: string }[] = [
   { key: 'downloaded', label: 'Downloaded' },
   { key: 'notDownloaded', label: 'Not Downloaded' },
+  { key: 'nonYoutube', label: 'Non-YouTube' },
 ];
 
 // Pure selection state -- unlike VideoTagsPopover (which applies each
diff --git a/src/ui/screens/ExtraDataTable.test.tsx b/src/ui/screens/ExtraDataTable.test.tsx
new file mode 100644
index 0000000..fda1737
--- /dev/null
+++ b/src/ui/screens/ExtraDataTable.test.tsx
@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import ExtraDataTable from './ExtraDataTable';
+import type { LibraryVideoMetadata } from '../../types';
+
+function baseMetadata(overrides: Partial<LibraryVideoMetadata> = {}): LibraryVideoMetadata {
+  return {
+    videoId: 'vid1',
+    channelId: null,
+    channel: null,
+    title: null,
+    fullTitle: null,
+    description: null,
+    thumbnail: null,
+    originalUrl: null,
+    duration: null,
+    durationString: null,
+    uploadDate: null,
+    addedEpoch: 0,
+    downloadedFilePath: null,
+    downloadedResolution: null,
+    downloadedFormat: null,
+    downloadedAudioFilePath: null,
+    lastPlaybackPositionSeconds: null,
+    ...overrides,
+  };
+}
+
+// Broader end-to-end coverage (rendered inside LibraryVideoDetail, gated on
+// isGeneric) lives in LibraryVideoDetail.test.tsx -- this file just covers
+// ExtraDataTable's own render-nothing-when-empty contract directly.
+describe('ExtraDataTable', () => {
+  it('renders nothing when every field is null/absent', () => {
+    const { container } = render(<ExtraDataTable metadata={baseMetadata()} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders only the populated fields', () => {
+    render(<ExtraDataTable metadata={baseMetadata({ channel: 'DJ Sloth', license: 'CC BY 4.0' })} />);
+    expect(screen.getByText('Extra data')).toBeInTheDocument();
+    expect(screen.getByText('DJ Sloth')).toBeInTheDocument();
+    expect(screen.getByText('CC BY 4.0')).toBeInTheDocument();
+    expect(screen.queryByText('Categories')).not.toBeInTheDocument();
+    expect(screen.queryByText('Tags')).not.toBeInTheDocument();
+    expect(screen.queryByText('Music')).not.toBeInTheDocument();
+  });
+
+  it('renders the music sub-section only when metadata.music is present, skipping its own null fields', () => {
+    render(<ExtraDataTable metadata={baseMetadata({
+      music: { track: 'Sunset', artist: null, album: null, genre: 'Lofi' },
+    })} />);
+    expect(screen.getByText('Music')).toBeInTheDocument();
+    expect(screen.getByText('Sunset')).toBeInTheDocument();
+    expect(screen.getByText('Lofi')).toBeInTheDocument();
+    expect(screen.queryByText('Artist')).not.toBeInTheDocument();
+    expect(screen.queryByText('Album')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/ui/screens/ExtraDataTable.tsx b/src/ui/screens/ExtraDataTable.tsx
new file mode 100644
index 0000000..d00e5e8
--- /dev/null
+++ b/src/ui/screens/ExtraDataTable.tsx
@@ -0,0 +1,70 @@
+import { Chip, Divider, Stack, Typography } from '@mui/material';
+import { convertYYYYMMDDStringToDate } from '../../utils/utils.ts';
+import type { LibraryVideoMetadata } from '../../types';
+
+function Field({ label, value }: { label: string; value: string }) {
+  return (
+    <Stack direction="row" spacing={1}>
+      <Typography variant="body2" color="text.secondary" sx={{ minWidth: 90, flexShrink: 0 }}>{label}</Typography>
+      <Typography variant="body2">{value}</Typography>
+    </Stack>
+  );
+}
+
+function ChipListField({ label, values }: { label: string; values: string[] }) {
+  return (
+    <Stack spacing={0.5}>
+      <Typography variant="body2" color="text.secondary">{label}</Typography>
+      <Stack direction="row" spacing={0.5} alignItems="center" useFlexGap flexWrap="wrap">
+        {values.map((value) => (
+          <Chip key={value} size="small" label={value} variant="outlined" />
+        ))}
+      </Stack>
+    </Stack>
+  );
+}
+
+// yt-dlp's own per-video tags/categories (metadata.tags/metadata.categories)
+// -- not to be confused with this app's own user-created "labels" system
+// (videoTags/VideoTagsPopover, keyed by videoId in the sublibrary's own
+// manifest, rendered elsewhere as pink chips). Different concept, different
+// data source; kept visually distinct here (plain outlined chips) to avoid
+// the two being conflated.
+export default function ExtraDataTable({ metadata }: { metadata: LibraryVideoMetadata }) {
+  const formattedUploadDate = metadata.uploadDate
+    ? (convertYYYYMMDDStringToDate(metadata.uploadDate) || metadata.uploadDate)
+    : null;
+  const music = metadata.music;
+  const hasMusicField = !!music && (music.track || music.artist || music.album || music.genre);
+  const hasAnyField = !!metadata.channel || !!formattedUploadDate || !!metadata.license
+    || !!(metadata.categories && metadata.categories.length > 0)
+    || !!(metadata.tags && metadata.tags.length > 0)
+    || hasMusicField;
+  if (!hasAnyField) return null;
+
+  return (
+    <>
+      <Divider sx={{ my: 1.5 }} />
+      <Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1 }}>
+        Extra data
+      </Typography>
+      <Stack spacing={1}>
+        {metadata.channel && <Field label="Uploader" value={metadata.channel} />}
+        {formattedUploadDate && <Field label="Uploaded" value={formattedUploadDate} />}
+        {metadata.license && <Field label="License" value={metadata.license} />}
+        {metadata.categories && metadata.categories.length > 0 &&
+          <ChipListField label="Categories" values={metadata.categories} />}
+        {metadata.tags && metadata.tags.length > 0 &&
+          <ChipListField label="Tags" values={metadata.tags} />}
+        {hasMusicField &&
+          <Stack spacing={0.5}>
+            <Typography variant="body2" color="text.secondary">Music</Typography>
+            {music.track && <Field label="Track" value={music.track} />}
+            {music.artist && <Field label="Artist" value={music.artist} />}
+            {music.album && <Field label="Album" value={music.album} />}
+            {music.genre && <Field label="Genre" value={music.genre} />}
+          </Stack>}
+      </Stack>
+    </>
+  );
+}
diff --git a/src/ui/screens/FfmpegUtilitiesPanel.tsx b/src/ui/screens/FfmpegUtilitiesPanel.tsx
index 3fd037e..8d8fac6 100644
--- a/src/ui/screens/FfmpegUtilitiesPanel.tsx
+++ b/src/ui/screens/FfmpegUtilitiesPanel.tsx
@@ -83,6 +83,7 @@ export default function FfmpegUtilitiesPanel({
   ffmpegError,
   isVideoDownloaded,
   hasAudioFile,
+  isGeneric,
   convertFormat,
   setConvertFormat,
   convertFormatOptions,
@@ -99,6 +100,10 @@ export default function FfmpegUtilitiesPanel({
   ffmpegError: string | null;
   isVideoDownloaded: boolean;
   hasAudioFile: boolean;
+  // Generic (non-YouTube) entries get MP3 export via the Convert-to dropdown
+  // instead of a dedicated Extract MP3 button -- see LibraryVideoDetail.tsx's
+  // own isGeneric.
+  isGeneric: boolean;
   convertFormat: string;
   setConvertFormat: (format: string) => void;
   convertFormatOptions: string[];
@@ -141,16 +146,17 @@ export default function FfmpegUtilitiesPanel({
         {ffmpegError &&
           <Typography variant="caption" color="error">{ffmpegError}</Typography>}
 
-        <Stack direction="row" spacing={1} alignItems="center">
-          <Typography variant="body2" sx={{ flexGrow: 1 }}>Extract MP3</Typography>
-          <Tooltip title="Extract MP3">
-            <span>
-              <IconButton size="small" aria-label="Extract MP3" onClick={onExtractMp3} disabled={ffmpegControlsDisabled}>
-                <AudiotrackIcon fontSize="small" />
-              </IconButton>
-            </span>
-          </Tooltip>
-        </Stack>
+        {!isGeneric &&
+          <Stack direction="row" spacing={1} alignItems="center">
+            <Typography variant="body2" sx={{ flexGrow: 1 }}>Extract MP3</Typography>
+            <Tooltip title="Extract MP3">
+              <span>
+                <IconButton size="small" aria-label="Extract MP3" onClick={onExtractMp3} disabled={ffmpegControlsDisabled}>
+                  <AudiotrackIcon fontSize="small" />
+                </IconButton>
+              </span>
+            </Tooltip>
+          </Stack>}
 
         <Stack direction="row" spacing={1} alignItems="center">
           <Typography variant="body2" sx={{ flexGrow: 1 }}>Convert to</Typography>
diff --git a/src/ui/screens/LibraryScreen.test.tsx b/src/ui/screens/LibraryScreen.test.tsx
index 23a584c..6a5ec70 100644
--- a/src/ui/screens/LibraryScreen.test.tsx
+++ b/src/ui/screens/LibraryScreen.test.tsx
@@ -819,6 +819,133 @@ describe('LibraryScreen', () => {
     });
   });
 
+  describe('system filter (non-YouTube)', () => {
+    function makeChannelsWithOneNonYoutube() {
+      const channels = makeChannels();
+      return [
+        {
+          ...channels[0],
+          videos: [{ ...channels[0].videos[0], metadata: { ...channels[0].videos[0].metadata, platform: 'soundcloud' } }],
+        },
+        {
+          ...channels[1],
+          videos: [{ ...channels[1].videos[0], metadata: { ...channels[1].videos[0].metadata, platform: 'youtube' } }],
+        },
+      ];
+    }
+
+    it('shows a "Non-YouTube" checkbox in the filter popover', async () => {
+      const user = userEvent.setup();
+      (window.electronAPI.getLibraryViewMode as ReturnType<typeof vi.fn>).mockResolvedValue({ libraryViewMode: 'video' });
+      render(<LibraryScreen />);
+      await screen.findByText('Alpha Video');
+
+      await user.click(screen.getByRole('button', { name: 'Filter by tag' }));
+
+      expect(screen.getByRole('checkbox', { name: 'Non-YouTube' })).toBeInTheDocument();
+    });
+
+    it('narrows to only videos whose platform is set and not youtube', async () => {
+      const user = userEvent.setup();
+      (window.electronAPI.getLibraryViewMode as ReturnType<typeof vi.fn>).mockResolvedValue({ libraryViewMode: 'video' });
+      (window.electronAPI.getLibraryIndex as ReturnType<typeof vi.fn>).mockResolvedValue({ channels: makeChannelsWithOneNonYoutube() });
+      render(<LibraryScreen />);
+      await screen.findByText('Alpha Video');
+
+      await user.click(screen.getByRole('button', { name: 'Filter by tag' }));
+      await user.click(screen.getByRole('checkbox', { name: 'Non-YouTube' }));
+
+      expect(screen.getByText('Alpha Video')).toBeInTheDocument();
+      expect(screen.queryByText('Beta Video')).not.toBeInTheDocument();
+    });
+
+    it('excludes videos with no platform at all (plain YouTube backward-compat case)', async () => {
+      const user = userEvent.setup();
+      (window.electronAPI.getLibraryViewMode as ReturnType<typeof vi.fn>).mockResolvedValue({ libraryViewMode: 'video' });
+      // Default makeChannels() fixtures carry no `platform` field at all.
+      render(<LibraryScreen />);
+      await screen.findByText('Alpha Video');
+
+      await user.click(screen.getByRole('button', { name: 'Filter by tag' }));
+      await user.click(screen.getByRole('checkbox', { name: 'Non-YouTube' }));
+
+      expect(screen.queryByText('Alpha Video')).not.toBeInTheDocument();
+      expect(screen.queryByText('Beta Video')).not.toBeInTheDocument();
+    });
+
+    // Regression test: the platform label was only shown on the video's own
+    // detail page at first -- it needs to show up on the card itself too,
+    // both in the flat "all videos" list (viewMode 'video', exercised here)
+    // and the per-channel grid (VideoCard is shared by both, so this covers
+    // both call sites without a second test).
+    it('shows a platform chip on the video card itself, next to the resolution chip', async () => {
+      (window.electronAPI.getLibraryViewMode as ReturnType<typeof vi.fn>).mockResolvedValue({ libraryViewMode: 'video' });
+      (window.electronAPI.getLibraryIndex as ReturnType<typeof vi.fn>).mockResolvedValue({ channels: makeChannelsWithOneNonYoutube() });
+      render(<LibraryScreen />);
+      await screen.findByText('Alpha Video');
+
+      expect(screen.getByText('soundcloud')).toBeInTheDocument();
+      // Beta Video's platform is explicitly 'youtube' -- no chip for it.
+      const betaCard = screen.getByText('Beta Video').closest('.MuiCard-root') as HTMLElement;
+      expect(within(betaCard).queryByText('youtube')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('platform-group channel (non-YouTube)', () => {
+    function makeChannelsWithPlatformGroup() {
+      const channels = makeChannels();
+      return [
+        {
+          channelFolderName: 'NonYT/soundcloud', displayName: 'soundcloud', channelIconPath: null,
+          isPlatformGroup: true, platform: 'soundcloud',
+          videos: [makeVideo({
+            videoFolderName: 'vidC', videoDir: '/lib/NonYT/soundcloud/vidC',
+            metadata: { ...makeVideo().metadata, videoId: 'vidC', channel: 'Some Uploader', title: 'Gamma Track', platform: 'soundcloud' },
+          })],
+        },
+        ...channels,
+      ];
+    }
+
+    it('renders the platform icon for an isPlatformGroup channel, not an Avatar or the plain FolderIcon fallback', async () => {
+      (window.electronAPI.getLibraryIndex as ReturnType<typeof vi.fn>).mockResolvedValue({ channels: makeChannelsWithPlatformGroup() });
+      render(<LibraryScreen />);
+      await screen.findByText('soundcloud');
+
+      const card = screen.getByText('soundcloud').closest('.MuiCard-root');
+      expect(card).not.toBeNull();
+      expect(within(card as HTMLElement).getByTestId('AudiotrackIcon')).toBeInTheDocument();
+      expect(within(card as HTMLElement).queryByTestId('FolderIcon')).not.toBeInTheDocument();
+      expect(within(card as HTMLElement).queryByRole('img')).not.toBeInTheDocument(); // no Avatar
+
+      // A real per-uploader channel (channelIconPath: null) is unaffected --
+      // still falls back to the plain folder icon, not a platform icon.
+      const channelACard = screen.getByText('Channel A').closest('.MuiCard-root');
+      expect(channelACard).not.toBeNull();
+      expect(within(channelACard as HTMLElement).getByTestId('FolderIcon')).toBeInTheDocument();
+    });
+
+    it('shows the platform icon in the video grid header and hides "Refresh channel icon" for a platform-group channel', async () => {
+      const user = userEvent.setup();
+      (window.electronAPI.getLibraryIndex as ReturnType<typeof vi.fn>).mockResolvedValue({ channels: makeChannelsWithPlatformGroup() });
+      render(<LibraryScreen />);
+      await user.click(await screen.findByText('soundcloud'));
+
+      expect(await screen.findByText('Gamma Track')).toBeInTheDocument();
+      expect(screen.getByTestId('AudiotrackIcon')).toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Refresh channel icon' })).not.toBeInTheDocument();
+    });
+
+    it('a real channel still shows its "Refresh channel icon" button in the video grid, unaffected', async () => {
+      const user = userEvent.setup();
+      render(<LibraryScreen />);
+      await user.click(await screen.findByText('Channel A'));
+
+      expect(screen.getByRole('button', { name: 'Refresh channel icon' })).toBeInTheDocument();
+      expect(screen.queryByTestId('AudiotrackIcon')).not.toBeInTheDocument();
+    });
+  });
+
   describe('select all (flat video list)', () => {
     it('starts unchecked, and checking it selects every currently visible video', async () => {
       const user = userEvent.setup();
diff --git a/src/ui/screens/LibraryScreen.tsx b/src/ui/screens/LibraryScreen.tsx
index 28f472d..4564ebb 100644
--- a/src/ui/screens/LibraryScreen.tsx
+++ b/src/ui/screens/LibraryScreen.tsx
@@ -25,6 +25,7 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
+import type { SvgIconProps } from '@mui/material';
 import { pink } from '@mui/material/colors';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import RefreshIcon from '@mui/icons-material/Refresh';
@@ -51,6 +52,7 @@ import CreateSubLibraryDialog from '../components/CreateSubLibraryDialog';
 import MoveToSubLibraryDialog from '../components/MoveToSubLibraryDialog';
 import TagSelectedDialog from '../components/TagSelectedDialog';
 import TagFilterPopover, { type SystemFilterKey } from '../components/TagFilterPopover';
+import { getPlatformIcon, getPlatformColor } from '../utils/platformIcons';
 import { useLibrarySearch } from '../hooks/useLibrarySearch.tsx';
 import { useBulkAddQueue, type BulkAddEntry } from '../hooks/useBulkAddQueue.tsx';
 import { useLibraryTags } from '../hooks/useLibraryTags.tsx';
@@ -911,15 +913,24 @@ function VideoCard({ video, onSelect, channelLabel, selected, selectionActive, o
         <Box sx={{ p: 1.5 }}>
           <Stack direction="row" justifyContent="space-between" alignItems="flex-start" spacing={1}>
             <Typography variant="body1" noWrap sx={{ minWidth: 0 }}>{video.metadata.title || video.videoFolderName}</Typography>
-            {bestQuality ? (
-              <Chip
-                size="small"
-                color="success"
-                label={bestQuality.resolution === 'MP3' ? 'MP3' : `${bestQuality.resolution}p`}
-              />
-            ) : (
-              <Chip size="small" variant="outlined" label="Not downloaded" />
-            )}
+            <Stack direction="row" spacing={0.5} flexShrink={0}>
+              {video.metadata.platform && video.metadata.platform !== 'youtube' &&
+                <Chip
+                  size="small"
+                  variant="outlined"
+                  label={video.metadata.platform}
+                  sx={{ borderColor: getPlatformColor(video.metadata.platform), color: getPlatformColor(video.metadata.platform) }}
+                />}
+              {bestQuality ? (
+                <Chip
+                  size="small"
+                  color="success"
+                  label={bestQuality.resolution === 'MP3' ? 'MP3' : `${bestQuality.resolution}p`}
+                />
+              ) : (
+                <Chip size="small" variant="outlined" label="Not downloaded" />
+              )}
+            </Stack>
           </Stack>
           {channelLabel &&
             <Typography variant="caption" color="text.secondary" noWrap sx={{ display: 'block' }}>{channelLabel}</Typography>}
@@ -1023,6 +1034,7 @@ function FlatVideoList({ channels, openFolderDir, viewMode, thumbnailSize, selec
   const tagFilteredVideos = useMemo(() => flatVideos.filter(({ video }) => {
     if (selectedSystemFilters.has('downloaded') && getBestDownloadedQuality(video.epochs) === null) return false;
     if (selectedSystemFilters.has('notDownloaded') && getBestDownloadedQuality(video.epochs) !== null) return false;
+    if (selectedSystemFilters.has('nonYoutube') && (!video.metadata.platform || video.metadata.platform === 'youtube')) return false;
     if (selectedFilterTags.size > 0 && ![...selectedFilterTags].every((tag) => videoTags[tag]?.includes(video.metadata.videoId))) return false;
     return true;
   }), [flatVideos, selectedFilterTags, selectedSystemFilters, videoTags]);
@@ -1149,6 +1161,13 @@ function FlatVideoList({ channels, openFolderDir, viewMode, thumbnailSize, selec
   );
 }
 
+// Thin wrapper so callers can use getPlatformIcon's result as JSX without
+// each one destructuring/aliasing the returned component by hand.
+function PlatformIcon({ platform, ...props }: { platform?: string | null } & SvgIconProps) {
+  const Icon = getPlatformIcon(platform);
+  return <Icon {...props} />;
+}
+
 function ChannelList({ channels, openFolderDir, viewMode, onViewModeChange, onSelectChannel, onRefresh }: {
   channels: LibraryChannel[];
   openFolderDir: string;
@@ -1190,7 +1209,9 @@ function ChannelList({ channels, openFolderDir, viewMode, onViewModeChange, onSe
           <Card variant="outlined" key={channel.channelFolderName}>
             <CardActionArea onClick={() => onSelectChannel(channel)} sx={{ p: 2 }}>
               <Stack direction="row" spacing={1.5} alignItems="center">
-                {channel.channelIconPath ? (
+                {channel.isPlatformGroup ? (
+                  <PlatformIcon platform={channel.platform} color="primary" />
+                ) : channel.channelIconPath ? (
                   <Avatar src={buildAppVideoUrl(channel.channelIconPath)} alt={channel.displayName} />
                 ) : (
                   <FolderIcon color="primary" />
@@ -1254,8 +1275,11 @@ function VideoGrid({ channel, thumbnailSize, selectedVideoDirs, onToggleSelect,
             <ArrowBackIcon fontSize="small" />
           </IconButton>
           <Typography variant="h6">{channel.displayName}</Typography>
-          {channel.channelIconPath &&
-            <Avatar src={buildAppVideoUrl(channel.channelIconPath)} alt={channel.displayName} sx={{ width: 28, height: 28 }} />}
+          {channel.isPlatformGroup ? (
+            <PlatformIcon platform={channel.platform} color="primary" fontSize="small" />
+          ) : channel.channelIconPath && (
+            <Avatar src={buildAppVideoUrl(channel.channelIconPath)} alt={channel.displayName} sx={{ width: 28, height: 28 }} />
+          )}
         </Stack>
         <Stack direction="row" spacing={1} alignItems="center">
           <LibrarySearchBar value={query} onChange={setQuery} onClear={clear} placeholder="Search videos..." />
@@ -1270,13 +1294,15 @@ function VideoGrid({ channel, thumbnailSize, selectedVideoDirs, onToggleSelect,
             }
             label="Select all"
           />
-          <Tooltip title="Refresh channel icon">
-            <span>
-              <IconButton onClick={handleRefreshIcon} disabled={refreshingIcon} size="small" aria-label="Refresh channel icon">
-                {refreshingIcon ? <CircularProgress size={18} /> : <FaceRetouchingNaturalIcon fontSize="small" />}
-              </IconButton>
-            </span>
-          </Tooltip>
+          {!channel.isPlatformGroup && (
+            <Tooltip title="Refresh channel icon">
+              <span>
+                <IconButton onClick={handleRefreshIcon} disabled={refreshingIcon} size="small" aria-label="Refresh channel icon">
+                  {refreshingIcon ? <CircularProgress size={18} /> : <FaceRetouchingNaturalIcon fontSize="small" />}
+                </IconButton>
+              </span>
+            </Tooltip>
+          )}
         </Stack>
       </Stack>
       {isSearching && filtered.length === 0 &&
diff --git a/src/ui/screens/LibraryVideoDetail.test.tsx b/src/ui/screens/LibraryVideoDetail.test.tsx
index 7b0b31f..c6ee67f 100644
--- a/src/ui/screens/LibraryVideoDetail.test.tsx
+++ b/src/ui/screens/LibraryVideoDetail.test.tsx
@@ -404,6 +404,99 @@ describe('LibraryVideoDetail', () => {
       expect(screen.getByRole('button', { name: /^720p/ })).toBeInTheDocument();
       expect(document.querySelector('audio')).toBeInTheDocument();
     });
+
+    it('shows a platform chip next to the resolution chip once downloaded', async () => {
+      const video = makeVideo({
+        platform: 'soundcloud',
+        downloadedFilePath: '/v/track.mp3',
+        downloadedResolution: 'MP3',
+        downloadedFormat: 'dflt',
+      });
+      renderDetail(video);
+
+      expect(screen.getByText('MP3')).toBeInTheDocument();
+      expect(screen.getByText('soundcloud')).toBeInTheDocument();
+    });
+
+    it('hides Extract MP3 and offers mp3 as a Convert-to option', async () => {
+      const video = makeVideo({
+        platform: 'soundcloud',
+        downloadedFilePath: '/v/track.mp3',
+        downloadedResolution: 'MP3',
+        downloadedFormat: 'dflt',
+      });
+      renderDetail(video);
+      const user = userEvent.setup();
+
+      expect(screen.queryByRole('button', { name: 'Extract MP3' })).not.toBeInTheDocument();
+
+      await user.click(screen.getByRole('combobox'));
+      expect(await screen.findByRole('option', { name: 'MP3' })).toBeInTheDocument();
+    });
+
+    it('renders the Extra data section with only populated fields', async () => {
+      const video = makeVideo({
+        platform: 'soundcloud',
+        channel: 'DJ Sloth',
+        uploadDate: '20260115',
+        license: 'CC BY 4.0',
+        categories: ['Podcast'],
+        tags: ['chill', 'lofi'],
+        music: { track: 'Sunset', artist: 'Sloth Beats', album: null, genre: 'Lofi' },
+      });
+      renderDetail(video);
+
+      expect(screen.getByText('Extra data')).toBeInTheDocument();
+      expect(screen.getByText('DJ Sloth')).toBeInTheDocument();
+      expect(screen.getByText('CC BY 4.0')).toBeInTheDocument();
+      expect(screen.getByText('Podcast')).toBeInTheDocument();
+      expect(screen.getByText('Music')).toBeInTheDocument();
+      expect(screen.getByText('chill')).toBeInTheDocument();
+      expect(screen.getByText('lofi')).toBeInTheDocument();
+      expect(screen.getByText('Sunset')).toBeInTheDocument();
+      expect(screen.getByText('Sloth Beats')).toBeInTheDocument();
+      expect(screen.getByText('Lofi')).toBeInTheDocument();
+      // Album was null on the music object -- must not render a blank row.
+      expect(screen.queryByText('Album')).not.toBeInTheDocument();
+    });
+
+    it('skips absent fields entirely and hides the music sub-section when metadata.music is null', async () => {
+      const video = makeVideo({
+        platform: 'soundcloud',
+        channel: null,
+        license: null,
+        categories: null,
+        tags: null,
+        music: null,
+      });
+      renderDetail(video);
+
+      // uploadDate is still set by baseMetadata, so the section itself
+      // renders (it isn't entirely empty) -- but every other field is absent.
+      expect(screen.getByText('Extra data')).toBeInTheDocument();
+      expect(screen.queryByText('License')).not.toBeInTheDocument();
+      expect(screen.queryByText('Categories')).not.toBeInTheDocument();
+      expect(screen.queryByText('Tags')).not.toBeInTheDocument();
+      expect(screen.queryByText('Music')).not.toBeInTheDocument();
+      expect(screen.queryByText('Uploader')).not.toBeInTheDocument();
+    });
+  });
+
+  it('regression: a real YouTube entry gets no platform chip, keeps Extract MP3, has no mp3 Convert-to option, and no Extra data section', async () => {
+    const video = makeVideo({
+      downloadedFilePath: '/v/video.mp4', downloadedResolution: '720', downloadedFormat: 'dflt',
+    });
+    renderDetail(video);
+    const user = userEvent.setup();
+
+    expect(screen.getByText('720p')).toBeInTheDocument();
+    expect(screen.queryByText('youtube')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Extract MP3' })).toBeInTheDocument();
+
+    await user.click(screen.getByRole('combobox'));
+    expect(screen.queryByRole('option', { name: 'MP3' })).not.toBeInTheDocument();
+
+    expect(screen.queryByText('Extra data')).not.toBeInTheDocument();
   });
 
   it('switching versions swaps the displayed metadata', async () => {
diff --git a/src/ui/screens/LibraryVideoDetail.tsx b/src/ui/screens/LibraryVideoDetail.tsx
index c5107ec..5102333 100644
--- a/src/ui/screens/LibraryVideoDetail.tsx
+++ b/src/ui/screens/LibraryVideoDetail.tsx
@@ -33,6 +33,7 @@ import useDownloadVideo from '../hooks/useDownloadVideo.tsx';
 import { useBackgroundPlayer } from '../hooks/useBackgroundPlayer.tsx';
 import VideoQualityDownload from './VideoQualityDownload';
 import FfmpegUtilitiesPanel, { OTHER_FORMAT_VALUE } from './FfmpegUtilitiesPanel';
+import ExtraDataTable from './ExtraDataTable';
 import ClipCollectionView from '../components/ClipCollectionView';
 import LibraryVideoPlayerWithTools from '../components/LibraryVideoPlayerWithTools';
 import type { LibraryClip, LibraryVideo } from '../../types';
@@ -723,6 +724,14 @@ export default function LibraryVideoDetail({
   // the video file, not the separate MP3 slot.
   const isVideoDownloaded = !!metadata.downloadedFilePath;
   const isGeneric = !!metadata.platform && metadata.platform !== 'youtube';
+  // Generic entries have no dedicated Extract MP3 button (see
+  // FfmpegUtilitiesPanel's own isGeneric), so 'mp3' is added to Convert-to
+  // as the only way to get an MP3 out of them. Kept out of
+  // POPULAR_CONVERT_FORMATS itself since YouTube entries already have that
+  // dedicated button and shouldn't get a redundant convert-to option.
+  const genericConvertFormatOptions = isGeneric && !convertFormatOptions.includes('mp3')
+    ? [...convertFormatOptions, 'mp3']
+    : convertFormatOptions;
   const resolutions = metadata.resolutions || [];
   // MP3 is rendered in its own Audio sub-section, not mixed into the video
   // quality grid -- except for a generic (non-YouTube) entry, where MP3 may
@@ -937,9 +946,10 @@ export default function LibraryVideoDetail({
                 ffmpegError={ffmpegError}
                 isVideoDownloaded={isVideoDownloaded}
                 hasAudioFile={!!metadata.downloadedAudioFilePath}
+                isGeneric={isGeneric}
                 convertFormat={convertFormat}
                 setConvertFormat={setConvertFormat}
-                convertFormatOptions={convertFormatOptions}
+                convertFormatOptions={genericConvertFormatOptions}
                 otherFormatInput={otherFormatInput}
                 setOtherFormatInput={setOtherFormatInput}
                 forceReencode={forceReencode}
@@ -948,6 +958,8 @@ export default function LibraryVideoDetail({
                 onConvertFormat={handleConvertFormat}
                 onEmbedMetadata={handleEmbedMetadata}
               />
+
+              {isGeneric && <ExtraDataTable metadata={metadata} />}
             </Stack>
           </Card>
         </Stack>
diff --git a/src/ui/screens/VideoQualityDownload.tsx b/src/ui/screens/VideoQualityDownload.tsx
index 9d76a9f..774a0c0 100644
--- a/src/ui/screens/VideoQualityDownload.tsx
+++ b/src/ui/screens/VideoQualityDownload.tsx
@@ -24,6 +24,7 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
 import { pink } from '@mui/material/colors';
 import { buildAppVideoUrl, formatEpochLabel, isLongVideoForPostprocess } from '../../utils/utils.ts';
+import { getPlatformColor } from '../utils/platformIcons';
 import LinearProgressWithLabel from '../components/LinearProgressWithLabel';
 import VideoTagsPopover from '../components/VideoTagsPopover';
 import type { LibraryVideo, LibraryVideoMetadata, Resolution } from '../../types';
@@ -260,10 +261,18 @@ export default function VideoQualityDownload({
             </FormControl>}
           {metadata.downloadedFilePath &&
             <Stack direction="row" justifyContent="space-between" alignItems="center">
-              <Chip
-                color="success"
-                label={metadata.downloadedResolution === 'MP3' ? 'MP3' : `${metadata.downloadedResolution}p`}
-              />
+              <Stack direction="row" spacing={0.5} alignItems="center">
+                <Chip
+                  color="success"
+                  label={metadata.downloadedResolution === 'MP3' ? 'MP3' : `${metadata.downloadedResolution}p`}
+                />
+                {metadata.platform && metadata.platform !== 'youtube' &&
+                  <Chip
+                    variant="outlined"
+                    label={metadata.platform}
+                    sx={{ borderColor: getPlatformColor(metadata.platform), color: getPlatformColor(metadata.platform) }}
+                  />}
+              </Stack>
               <Stack direction="row" spacing={0.5} alignItems="center" useFlexGap flexWrap="wrap" sx={{ justifyContent: 'flex-end' }}>
                 {appliedTagNames.map((tag) => (
                   <Chip key={tag} size="small" label={tag} sx={{ bgcolor: pink[700], color: '#fff' }} />
diff --git a/src/ui/utils/platformIcons.test.tsx b/src/ui/utils/platformIcons.test.tsx
new file mode 100644
index 0000000..5b94f74
--- /dev/null
+++ b/src/ui/utils/platformIcons.test.tsx
@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import AudiotrackIcon from '@mui/icons-material/Audiotrack';
+import PublicIcon from '@mui/icons-material/Public';
+import { getPlatformIcon, getPlatformColor } from './platformIcons';
+
+describe('getPlatformIcon', () => {
+  it('maps a known audio-oriented platform to its audio icon', () => {
+    const Icon = getPlatformIcon('soundcloud');
+    expect(Icon).toBe(AudiotrackIcon);
+  });
+
+  it('falls back to the generic icon for an unknown platform', () => {
+    const Icon = getPlatformIcon('someObscureExtractor');
+    expect(Icon).toBe(PublicIcon);
+  });
+
+  it('falls back to the generic icon when no platform is given', () => {
+    expect(getPlatformIcon(null)).toBe(PublicIcon);
+    expect(getPlatformIcon(undefined)).toBe(PublicIcon);
+  });
+
+  it('renders as a real SVG icon', () => {
+    const Icon = getPlatformIcon('soundcloud');
+    const { container } = render(<Icon />);
+    expect(container.querySelector('svg')).not.toBeNull();
+  });
+});
+
+describe('getPlatformColor', () => {
+  it('maps a known platform to its real brand color', () => {
+    expect(getPlatformColor('soundcloud')).toBe('#FF5500');
+  });
+
+  it('falls back to a neutral grey for an unknown platform', () => {
+    expect(getPlatformColor('someObscureExtractor')).toBe('#78909C');
+  });
+
+  it('falls back to the same neutral grey when no platform is given', () => {
+    expect(getPlatformColor(null)).toBe('#78909C');
+    expect(getPlatformColor(undefined)).toBe('#78909C');
+  });
+
+  it('gives archive.org the same neutral grey as the fallback, having no strong brand color of its own', () => {
+    expect(getPlatformColor('archiveorg')).toBe('#78909C');
+  });
+});
diff --git a/src/ui/utils/platformIcons.tsx b/src/ui/utils/platformIcons.tsx
new file mode 100644
index 0000000..02444fa
--- /dev/null
+++ b/src/ui/utils/platformIcons.tsx
@@ -0,0 +1,50 @@
+import type { SvgIconComponent } from '@mui/icons-material';
+import AudiotrackIcon from '@mui/icons-material/Audiotrack';
+import MovieIcon from '@mui/icons-material/Movie';
+import PublicIcon from '@mui/icons-material/Public';
+
+// Keyed on the same lowercased, sanitized platform string library.mjs uses
+// for the NonYT/<platform> folder name (derivePlatform() in videoInfo.mjs) --
+// a small, hand-picked set rather than an exhaustive per-extractor mapping.
+// A Map (not a plain object) so looking it up with an arbitrary string key
+// needs no index-signature widening or unsafe cast.
+const PLATFORM_ICONS = new Map<string, SvgIconComponent>([
+  ['soundcloud', AudiotrackIcon],
+  ['bandcamp', AudiotrackIcon],
+  ['mixcloud', AudiotrackIcon],
+  ['dailymotion', MovieIcon],
+  ['vimeo', MovieIcon],
+  ['archiveorg', MovieIcon],
+  ['peertube', MovieIcon],
+  ['twitch', MovieIcon],
+]);
+
+// The deliberate catch-all for any platform not listed above.
+const FALLBACK_PLATFORM_ICON = PublicIcon;
+
+export function getPlatformIcon(platform: string | null | undefined): SvgIconComponent {
+  if (!platform) return FALLBACK_PLATFORM_ICON;
+  return PLATFORM_ICONS.get(platform) ?? FALLBACK_PLATFORM_ICON;
+}
+
+// Real brand colors, not a generic categorical palette -- picked so the
+// platform chip (VideoQualityDownload.tsx, LibraryScreen.tsx's VideoCard) is
+// recognizable at a glance rather than just "some color." archive.org has no
+// strong brand color of its own (its site leans on plain grey/blue), so it
+// shares the same neutral grey as the fallback rather than inventing one.
+const PLATFORM_COLORS = new Map<string, string>([
+  ['soundcloud', '#FF5500'],
+  ['bandcamp', '#408294'],
+  ['mixcloud', '#5000FF'],
+  ['dailymotion', '#00AAFF'],
+  ['vimeo', '#1AB7EA'],
+  ['peertube', '#F1680D'],
+  ['twitch', '#9146FF'],
+]);
+
+const FALLBACK_PLATFORM_COLOR = '#78909C';
+
+export function getPlatformColor(platform: string | null | undefined): string {
+  if (!platform) return FALLBACK_PLATFORM_COLOR;
+  return PLATFORM_COLORS.get(platform) ?? FALLBACK_PLATFORM_COLOR;
+}

From fb8edb41f41691165209876405d8d5f6d0afdf5b Mon Sep 17 00:00:00 2001
From: Sloth <sloth.software.dev@protonmail.com>
Date: Mon, 21 Sep 2026 22:32:56 -0700
Subject: [PATCH 5/8] fix(app): fix generic library view using a broken yt
 player when video isn't downloaded

---
 src/ui/components/LibraryVideoPlayer.test.tsx | 17 +++++++++++
 src/ui/components/LibraryVideoPlayer.tsx      | 30 +++++++++++++++++++
 src/ui/screens/LibraryVideoDetail.test.tsx    | 17 +++++------
 src/ui/screens/LibraryVideoDetail.tsx         |  8 +++++
 src/ui/screens/VideoQualityDownload.tsx       |  7 -----
 5 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/src/ui/components/LibraryVideoPlayer.test.tsx b/src/ui/components/LibraryVideoPlayer.test.tsx
index 3b8a8b8..df88e17 100644
--- a/src/ui/components/LibraryVideoPlayer.test.tsx
+++ b/src/ui/components/LibraryVideoPlayer.test.tsx
@@ -129,6 +129,23 @@ describe('LibraryVideoPlayer', () => {
     expect(container.querySelector('video:not([data-testid="background-player-video"])')).toBeNull();
   });
 
+  // Regression test: videoId on a generic entry is whatever platform-native
+  // id that source actually uses (e.g. a Dailymotion/SoundCloud id), not a
+  // real YouTube id -- embedding it as a YouTube video used to silently try
+  // (and fail) to load an unrelated or nonexistent video.
+  it('shows a "Video isn\'t downloaded" message instead of a broken YouTube embed for a generic (non-YouTube) entry with nothing downloaded', () => {
+    const { container } = render(
+      <LibraryVideoPlayer metadata={baseMetadata({ platform: 'soundcloud' })} />,
+    );
+    expect(container.querySelector('iframe')).toBeNull();
+    expect(screen.getByText("Video isn't downloaded.")).toBeInTheDocument();
+  });
+
+  it('still embeds the YouTube player for a plain YouTube entry (platform unset)', () => {
+    const { container } = render(<LibraryVideoPlayer metadata={baseMetadata({ platform: null })} />);
+    expect(container.querySelector('iframe')).toHaveAttribute('src', 'https://www.youtube-nocookie.com/embed/abc123');
+  });
+
   it('renders a local <video> for a playable extension, pointed at the app-video:// URL', async () => {
     const { container } = render(
       <LibraryVideoPlayer metadata={baseMetadata({ downloadedFilePath: '/lib/c/v1/1/video.mp4' })} />,
diff --git a/src/ui/components/LibraryVideoPlayer.tsx b/src/ui/components/LibraryVideoPlayer.tsx
index 64a6a00..2e9c1ce 100644
--- a/src/ui/components/LibraryVideoPlayer.tsx
+++ b/src/ui/components/LibraryVideoPlayer.tsx
@@ -286,6 +286,36 @@ const LibraryVideoPlayer = forwardRef<LibraryVideoPlayerHandle, {
       // Clip context: if there's genuinely nothing to play, there's nothing to show.
       return null;
     }
+    // A generic (non-YouTube) entry has no real YouTube video id to embed --
+    // videoId here is whatever platform-native id the source actually uses
+    // (e.g. a Dailymotion/SoundCloud id), so YouTubeEmbed would just try (and
+    // fail) to load an unrelated or nonexistent YouTube video. Embedding each
+    // platform's own online player is a real future improvement, but until
+    // then this is honest about there being nothing playable yet, rather than
+    // silently showing a broken YouTube frame.
+    if (metadata.platform && metadata.platform !== 'youtube') {
+      return (
+        <ResizableMediaContainer sx={containerSx}>
+          <Box sx={{ ...fillSx, position: 'relative' }}>
+            <CardMedia
+              component="div"
+              image={posterSrc}
+              sx={{ ...fillSx, backgroundColor: 'grey.800', backgroundSize: 'cover', backgroundPosition: 'center' }}
+            />
+            <Typography
+              variant="caption"
+              sx={{
+                position: 'absolute', bottom: 8, left: 8, right: 8,
+                color: 'common.white', bgcolor: 'rgba(0, 0, 0, 0.6)',
+                px: 1, py: 0.5, borderRadius: 1,
+              }}
+            >
+              Video isn't downloaded.
+            </Typography>
+          </Box>
+        </ResizableMediaContainer>
+      );
+    }
     return (
       <ResizableMediaContainer sx={containerSx}>
         <YouTubeEmbed videoId={videoId} sx={fillSx} />
diff --git a/src/ui/screens/LibraryVideoDetail.test.tsx b/src/ui/screens/LibraryVideoDetail.test.tsx
index c6ee67f..dbe73a6 100644
--- a/src/ui/screens/LibraryVideoDetail.test.tsx
+++ b/src/ui/screens/LibraryVideoDetail.test.tsx
@@ -405,17 +405,16 @@ describe('LibraryVideoDetail', () => {
       expect(document.querySelector('audio')).toBeInTheDocument();
     });
 
-    it('shows a platform chip next to the resolution chip once downloaded', async () => {
-      const video = makeVideo({
-        platform: 'soundcloud',
-        downloadedFilePath: '/v/track.mp3',
-        downloadedResolution: 'MP3',
-        downloadedFormat: 'dflt',
-      });
+    it('shows a platform chip in the header next to the title/upload date, even before anything is downloaded', async () => {
+      const video = makeVideo({ platform: 'soundcloud' });
       renderDetail(video);
 
-      expect(screen.getByText('MP3')).toBeInTheDocument();
-      expect(screen.getByText('soundcloud')).toBeInTheDocument();
+      const platformChip = screen.getByText('soundcloud');
+      expect(platformChip).toBeInTheDocument();
+      // In the same header row as the title, not tucked away in the
+      // resolution/download area below (which wouldn't even render yet here
+      // since nothing's downloaded).
+      expect(screen.getByText('Alpha Video').closest('.MuiStack-root')).toContainElement(platformChip);
     });
 
     it('hides Extract MP3 and offers mp3 as a Convert-to option', async () => {
diff --git a/src/ui/screens/LibraryVideoDetail.tsx b/src/ui/screens/LibraryVideoDetail.tsx
index 5102333..e0c07da 100644
--- a/src/ui/screens/LibraryVideoDetail.tsx
+++ b/src/ui/screens/LibraryVideoDetail.tsx
@@ -29,6 +29,7 @@ import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 import { convertYYYYMMDDStringToDate, cleanElectronErrorMessage } from '../../utils/utils.ts';
 import { POPULAR_CONVERT_FORMATS } from '../../utils/ffmpegFormats.ts';
 import { formatComment } from '../components/componentUtils';
+import { getPlatformColor } from '../utils/platformIcons';
 import useDownloadVideo from '../hooks/useDownloadVideo.tsx';
 import { useBackgroundPlayer } from '../hooks/useBackgroundPlayer.tsx';
 import VideoQualityDownload from './VideoQualityDownload';
@@ -766,6 +767,13 @@ export default function LibraryVideoDetail({
             label={convertYYYYMMDDStringToDate(metadata.uploadDate || '') || metadata.uploadDate}
             sx={{ flexShrink: 0, fontWeight: 'bolder' }}
           />
+          {isGeneric &&
+            <Chip
+              size="small"
+              variant="outlined"
+              label={metadata.platform}
+              sx={{ flexShrink: 0, borderColor: getPlatformColor(metadata.platform), color: getPlatformColor(metadata.platform) }}
+            />}
           {isSchemaOutdated &&
             <Tooltip title="This version's saved data predates newer features -- use Refresh from YouTube to pick them up">
               <Chip
diff --git a/src/ui/screens/VideoQualityDownload.tsx b/src/ui/screens/VideoQualityDownload.tsx
index 774a0c0..92d5c66 100644
--- a/src/ui/screens/VideoQualityDownload.tsx
+++ b/src/ui/screens/VideoQualityDownload.tsx
@@ -24,7 +24,6 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
 import { pink } from '@mui/material/colors';
 import { buildAppVideoUrl, formatEpochLabel, isLongVideoForPostprocess } from '../../utils/utils.ts';
-import { getPlatformColor } from '../utils/platformIcons';
 import LinearProgressWithLabel from '../components/LinearProgressWithLabel';
 import VideoTagsPopover from '../components/VideoTagsPopover';
 import type { LibraryVideo, LibraryVideoMetadata, Resolution } from '../../types';
@@ -266,12 +265,6 @@ export default function VideoQualityDownload({
                   color="success"
                   label={metadata.downloadedResolution === 'MP3' ? 'MP3' : `${metadata.downloadedResolution}p`}
                 />
-                {metadata.platform && metadata.platform !== 'youtube' &&
-                  <Chip
-                    variant="outlined"
-                    label={metadata.platform}
-                    sx={{ borderColor: getPlatformColor(metadata.platform), color: getPlatformColor(metadata.platform) }}
-                  />}
               </Stack>
               <Stack direction="row" spacing={0.5} alignItems="center" useFlexGap flexWrap="wrap" sx={{ justifyContent: 'flex-end' }}>
                 {appliedTagNames.map((tag) => (

From 87995142ad144d967bf4704b681859c11dc05ac0 Mon Sep 17 00:00:00 2001
From: Sloth <sloth.software.dev@protonmail.com>
Date: Tue, 22 Sep 2026 07:38:08 -0700
Subject: [PATCH 6/8] chore: bump versions

---
 CHANGELOG.md      | 36 ++++++++++++++++++++++++++++++++++++
 README.md         | 12 ++++++------
 package-lock.json |  4 ++--
 package.json      |  2 +-
 4 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1cffdc2..acdf4f2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,42 @@ This is the first documented entry — a snapshot of what SlothArchiver could
 do as of this release, not a history of every change that got it here.
 Future releases will log what actually changed from the previous one.
 
+## [1.3.0] — 2026-09-22
+- **Add videos from virtually any yt-dlp-supported site to your library, not
+  just YouTube.** SoundCloud, Dailymotion, archive.org, PeerTube, and the rest
+  of the [1800+ sites yt-dlp supports](https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md)
+  can now be added to your permanent library the same way a YouTube video
+  can — versioned, labelled, and organized by platform instead of by
+  channel. "Add to library" is no longer greyed out for anything other than
+  YouTube.
+  - Every entry plays through the same full-featured player as your YouTube
+    library — including audio-only sources (SoundCloud, Bandcamp, etc.),
+    which now show their thumbnail/album art for the whole time they're
+    playing instead of a blank black screen, and can still be clipped like
+    any video.
+  - Each entry shows a color-coded platform label (SoundCloud orange,
+    Dailymotion blue, Vimeo cyan, Twitch purple, and so on) next to its
+    title, both on its own page and on its card in the library grid, plus a
+    new "Non-YouTube" filter to find them all at once.
+  - A video's page now shows an "Extra data" section with whatever the
+    source actually provides — uploader, upload date, license, categories,
+    tags, and, for music platforms, track/artist/album/genre.
+  - Embed metadata now works for these too, including music tags where
+    available, and MP3-only sources get their MP3 option folded into
+    "Convert to" instead of a separate, now-redundant Extract MP3 button.
+- **Volume controls in the mini player and queue panel.** Both now have a
+  volume button that opens a small popover with a vertical slider, so you
+  can adjust background playback without needing the full player open.
+- **Clips now remember their exact start/end timestamps**, and a new
+  "Mark clip on original video" button jumps back to the source video with
+  those same timestamps already marked — a quick way to re-clip or adjust
+  an existing clip without hunting for where it was cut from.
+- **Fixed an audio/video sync bug when clipping.** A fast clip could end up
+  with its audio and video very slightly out of phase — hard to notice on
+  most content, but obvious on anything music-driven. Clips that need it now
+  get a quick, targeted re-encode of just the video stream (audio stays a
+  lossless copy either way) to keep the two in sync.
+
 ## [1.2.0] — 2026-09-18
 - **Play anything in the background, and queue up more.** A new mini-player
   bar at the bottom of the app lets you keep listening (or watching) while
diff --git a/README.md b/README.md
index 716efc2..d633d6f 100644
--- a/README.md
+++ b/README.md
@@ -29,17 +29,17 @@ itself.
 
 ## Download
 
-<!-- Update the version in these 5 links on every release, currently 1.2.0.
+<!-- Update the version in these 5 links on every release, currently 1.3.0.
      Each filename must match exactly what GitHub actually named the asset on
      the release page -->
 
 | Platform | Link |
 |---|---|
-| Windows (installer) | [Download](https://github.com/SlothSoftworks/Sloth-Archiver/releases/download/v1.2.0/SlothArchiver.Setup.1.2.0.exe) |
-| Windows (portable, no install) | [Download](https://github.com/SlothSoftworks/Sloth-Archiver/releases/download/v1.2.0/SlothArchiver.1.2.0.exe) |
-| macOS (Apple Silicon) | [Download](https://github.com/SlothSoftworks/Sloth-Archiver/releases/download/v1.2.0/SlothArchiver-1.2.0-arm64.dmg) |
-| macOS (Intel) | [Download](https://github.com/SlothSoftworks/Sloth-Archiver/releases/download/v1.2.0/SlothArchiver-1.2.0.dmg) |
-| Linux (AppImage) | [Download](https://github.com/SlothSoftworks/Sloth-Archiver/releases/download/v1.2.0/SlothArchiver-1.2.0.AppImage) |
+| Windows (installer) | [Download](https://github.com/SlothSoftworks/Sloth-Archiver/releases/download/v1.3.0/SlothArchiver.Setup.1.3.0.exe) |
+| Windows (portable, no install) | [Download](https://github.com/SlothSoftworks/Sloth-Archiver/releases/download/v1.3.0/SlothArchiver.1.3.0.exe) |
+| macOS (Apple Silicon) | [Download](https://github.com/SlothSoftworks/Sloth-Archiver/releases/download/v1.3.0/SlothArchiver-1.3.0-arm64.dmg) |
+| macOS (Intel) | [Download](https://github.com/SlothSoftworks/Sloth-Archiver/releases/download/v1.3.0/SlothArchiver-1.3.0.dmg) |
+| Linux (AppImage) | [Download](https://github.com/SlothSoftworks/Sloth-Archiver/releases/download/v1.3.0/SlothArchiver-1.3.0.AppImage) |
 
 All builds are unsigned, so your OS will show a first-run security warning.
 See [Installing](#installing) below.
diff --git a/package-lock.json b/package-lock.json
index 3db9f63..00360da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sloth-archiver",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sloth-archiver",
-      "version": "1.2.0",
+      "version": "1.3.0",
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@emotion/react": "^11.14.0",
diff --git a/package.json b/package.json
index d68454a..1926d2e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sloth-archiver",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A desktop app for downloading and archiving videos, with a built-in library and playlist tracking.",
   "author": "Sloth <sloth.software.dev@protonmail.com>",
   "license": "GPL-3.0-or-later",

From 5071e28242317f5aba29344ed9e1ecd07cf810df Mon Sep 17 00:00:00 2001
From: Sloth <sloth.software.dev@protonmail.com>
Date: Tue, 22 Sep 2026 07:46:37 -0700
Subject: [PATCH 7/8] chore: update documentation

---
 README.md            | 15 +++++++++------
 ROADMAP.md           |  1 -
 docs/ARCHITECTURE.md | 13 ++++++-------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index d633d6f..7cf5149 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,8 @@ Docker, servers, or a complicated setup to get one.**
 *Free and open source: no subscriptions, no accounts, no server to run.*
 
 SlothArchiver is a free desktop app for downloading and organizing videos and audio
-from YouTube and other platforms into a permanent library on your own computer.
+from YouTube and virtually any other platform yt-dlp supports into a permanent
+library on your own computer.
 Install it, point it at a folder, and it does the archiving for you: no
 subscriptions, no re-uploading to yet another cloud service, no losing access
 when a video gets taken down or a channel disappears. The name isn't ironic:
@@ -93,10 +94,12 @@ That's the whole point of SlothArchiver: a simple catalogued library, organized
 - **Download video or audio** from YouTube and virtually any other site yt-dlp
   supports (1800+ platforms, including SoundCloud, TikTok, Instagram, Facebook,
   Dailymotion, and more) in the quality you choose.
-- **A real library, not just a downloads folder.** Every video is organized by
-  channel, searchable, and keeps a history of versions if you ever re-fetch it.
-  Most downloaders stop at "file saved somewhere"; SlothArchiver actually keeps
-  track of what you have.
+- **A real library, not just a downloads folder.** Works with YouTube and
+  virtually any other yt-dlp-supported platform — YouTube videos are
+  organized by channel, everything else by platform, and either way it's
+  searchable, filterable, and keeps a history of versions if you ever
+  re-fetch it. Most downloaders stop at "file saved somewhere"; SlothArchiver
+  actually keeps track of what you have.
 - **Playlist archiving**: save an entire playlist at once, and refresh it later to
   pick up new additions without losing what you already have, with removed videos
   automatically flagged instead of silently disappearing.
@@ -219,7 +222,7 @@ SlothArchiver is a personal-use, local tool: everything it downloads stays in yo
 >TL;DR: It's a gray area as far as YouTube is concerned but not illegal. This is a personal, local-only archiving tool; staying within your platform's ToS and your local copyright law is on you.
 
 #### What platforms does SlothArchiver support downloading from?
-At time of writing we support YouTube for downloads, library, and playlists. For pure downloads, we support virtually any site [yt-dlp itself supports](https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md) (1800+ platforms), including TikTok, Instagram, Twitter, Facebook, SoundCloud, and Dailymotion, to name a few with dedicated recognition in the app's UI.
+Downloads and the library both work with virtually any site [yt-dlp itself supports](https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md) (1800+ platforms), including YouTube, TikTok, Instagram, Twitter, Facebook, SoundCloud, and Dailymotion, to name a few with dedicated recognition in the app's UI. Playlists are currently YouTube-only (see "Can I download an entire playlist?" below).
 
 #### What operating systems does SlothArchiver run on?
 Currently we support Mac, Linux, and Windows. This is a solo dev operation and I manually create the executables per system, so I expect there could be OS issues as more people try out the software on their systems. If you experience any issues, let me know by raising an issue and detailing it there.
diff --git a/ROADMAP.md b/ROADMAP.md
index b1a2aab..87c28d1 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -12,7 +12,6 @@ What's being developed right now? These are some of the topic that I'm working o
 - **Custom player improvements** - new playback features and general
   improvements to the app's built-in player.
 - **More Library flexibility** - More options to tag and explore libraries in different partitions so you can save and catalogue your downloads in different library navigation views if you choose.
-- **Expanded library** - Expanding the library function from only youtube to more platforms and adding more flexibility so all your videos can use the built in ffmpeg tools
 
 Got a feature you'd like to see? Check the README's FAQ for how to raise it
 as an issue.
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index 17a085e..c3eaa62 100644
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -1,13 +1,12 @@
 # sloth-archiver — Architecture Overview
 
 sloth-archiver is a desktop application (built on Electron, with a React/TypeScript
-interface) for downloading and archiving video and audio content — primarily from
-YouTube, with download support for virtually any other site yt-dlp itself
-supports (1800+ platforms) — into a personal, local library on the user's own
-machine. It wraps the well-known `yt-dlp` tool for the actual
-extraction/download work and `ffmpeg` for local media processing, and adds a
-persistent, browsable library on top: versioned entries, playlists, search, and a
-built-in player.
+interface) for downloading and archiving video and audio content from YouTube
+and virtually any other site yt-dlp itself supports (1800+ platforms) into a
+personal, local library on the user's own machine. It wraps the well-known
+`yt-dlp` tool for the actual extraction/download work and `ffmpeg` for local
+media processing, and adds a persistent, browsable library on top: versioned
+entries, playlists (YouTube only, for now), search, and a built-in player.
 
 This document explains how the pieces fit together and how data moves through the
 system for its main features. It is written for a technical reader who wants to

From 5815060fec6ba531dc9093d3f36d084b98ac7394 Mon Sep 17 00:00:00 2001
From: Sloth <sloth.software.dev@protonmail.com>
Date: Tue, 22 Sep 2026 08:10:48 -0700
Subject: [PATCH 8/8] chore: fix tests

---
 .../__fixtures__/ytdlp-info/archive_org.json        |  8 ++++++++
 .../__fixtures__/ytdlp-info/dailymotion.json        |  8 ++++++++
 src/electron/__fixtures__/ytdlp-info/peertube.json  | 10 ++++++++++
 .../__fixtures__/ytdlp-info/soundcloud.json         | 11 +++++++++++
 src/electron/__fixtures__/ytdlp-info/youtube.json   | 10 ++++++++++
 src/electron/videoInfo.test.mjs                     | 13 +++++++++----
 6 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 src/electron/__fixtures__/ytdlp-info/archive_org.json
 create mode 100644 src/electron/__fixtures__/ytdlp-info/dailymotion.json
 create mode 100644 src/electron/__fixtures__/ytdlp-info/peertube.json
 create mode 100644 src/electron/__fixtures__/ytdlp-info/soundcloud.json
 create mode 100644 src/electron/__fixtures__/ytdlp-info/youtube.json

diff --git a/src/electron/__fixtures__/ytdlp-info/archive_org.json b/src/electron/__fixtures__/ytdlp-info/archive_org.json
new file mode 100644
index 0000000..9d56c8d
--- /dev/null
+++ b/src/electron/__fixtures__/ytdlp-info/archive_org.json
@@ -0,0 +1,8 @@
+{
+  "id": "BigBuckBunny_124",
+  "title": "Big Buck Bunny",
+  "extractor_key": "ArchiveOrg",
+  "license": "http://creativecommons.org/licenses/by/3.0/",
+  "timestamp": 1309554623,
+  "track": "big buck bunny 720p surround"
+}
diff --git a/src/electron/__fixtures__/ytdlp-info/dailymotion.json b/src/electron/__fixtures__/ytdlp-info/dailymotion.json
new file mode 100644
index 0000000..f0e1ecd
--- /dev/null
+++ b/src/electron/__fixtures__/ytdlp-info/dailymotion.json
@@ -0,0 +1,8 @@
+{
+  "id": "xbafapm",
+  "title": "\"Tokidoki Bosotto Russia-go de Dereru Tonari no Aalya-san (Alya Sometimes Hides Her Feelings in Russian)\" upcoming TV anime season 2 PV",
+  "extractor_key": "Dailymotion",
+  "timestamp": 1789872906,
+  "uploader_id": "x1dagit",
+  "tags": []
+}
diff --git a/src/electron/__fixtures__/ytdlp-info/peertube.json b/src/electron/__fixtures__/ytdlp-info/peertube.json
new file mode 100644
index 0000000..c89b00a
--- /dev/null
+++ b/src/electron/__fixtures__/ytdlp-info/peertube.json
@@ -0,0 +1,10 @@
+{
+  "id": "9c9de5e8-0a1e-484a-b099-e80766180a6d",
+  "title": "What is PeerTube?",
+  "extractor_key": "PeerTube",
+  "license": "Attribution - Share Alike",
+  "timestamp": 1538391166,
+  "uploader_id": "3",
+  "categories": ["Science & Technology"],
+  "tags": ["framasoft", "peertube"]
+}
diff --git a/src/electron/__fixtures__/ytdlp-info/soundcloud.json b/src/electron/__fixtures__/ytdlp-info/soundcloud.json
new file mode 100644
index 0000000..43db09b
--- /dev/null
+++ b/src/electron/__fixtures__/ytdlp-info/soundcloud.json
@@ -0,0 +1,11 @@
+{
+  "id": "21792829",
+  "title": "First Of The Year (Equinox)",
+  "extractor_key": "Soundcloud",
+  "license": "all-rights-reserved",
+  "timestamp": 1314199241,
+  "track": "First Of The Year (Equinox)",
+  "artist": "Skrillex",
+  "genre": "Dubstep",
+  "uploader_id": "856062"
+}
diff --git a/src/electron/__fixtures__/ytdlp-info/youtube.json b/src/electron/__fixtures__/ytdlp-info/youtube.json
new file mode 100644
index 0000000..377f19e
--- /dev/null
+++ b/src/electron/__fixtures__/ytdlp-info/youtube.json
@@ -0,0 +1,10 @@
+{
+  "id": "aqz-KE-bpKQ",
+  "title": "Big Buck Bunny 60fps 4K - Official Blender Foundation Short Film",
+  "extractor_key": "Youtube",
+  "license": "Creative Commons Attribution license (reuse allowed)",
+  "timestamp": 1415628355,
+  "uploader_id": "@BlenderOfficial",
+  "categories": ["Film & Animation"],
+  "tags": ["blender", "animation", "4K", "UHD", "Big Buck Bunny (Film)", "Blender Foundation (Nonprofit Organization)", "Short Film (Film Genre)", "4K Resolution"]
+}
diff --git a/src/electron/videoInfo.test.mjs b/src/electron/videoInfo.test.mjs
index f141cf5..bc9c61b 100644
--- a/src/electron/videoInfo.test.mjs
+++ b/src/electron/videoInfo.test.mjs
@@ -4,12 +4,17 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import { buildResolutions, reshapeVideoInfo } from './videoInfo.mjs';
 
-// Real yt-dlp -J output captured per-platform, not hand-constructed --
-// exercises reshapeVideoInfo's new fields (platform/extractorKey/license/
-// timestamp/music) against what yt-dlp actually reports for each extractor.
+// Trimmed down from real yt-dlp -J output captured per-platform, not
+// hand-constructed from scratch -- exercises reshapeVideoInfo's new fields
+// (platform/extractorKey/license/timestamp/music) against what yt-dlp
+// actually reports for each extractor, keeping only the fields these tests
+// read. Committed inside the repo (unlike the original full captures, which
+// briefly lived outside it under 0tempFiles/ -- a sibling scratch folder
+// that's never checked out on CI, so loading fixtures from there passed
+// locally but failed every CI run trying to read a path that doesn't exist).
 const FIXTURES_DIR = path.resolve(
   path.dirname(fileURLToPath(import.meta.url)),
-  '../../../0tempFiles/ytdlp-metadata-experiment',
+  '__fixtures__/ytdlp-info',
 );
 
 function loadFixture(name) {