From d9e69aa76c910113e69846de892e398bdb91a9de Mon Sep 17 00:00:00 2001 From: ordinarthur <@arthurbarre.js@gmail.com> Date: Sun, 12 Apr 2026 22:01:18 +0200 Subject: [PATCH] feat: support YouTube/Dailymotion/SoundCloud embed playback for external content --- src/components/layout/PlayerBar.tsx | 56 +++- src/lib/embed.ts | 46 +++ src/pages/PodcastDetail.tsx | 18 + src/stores/player.ts | 26 +- supabase/seed.sql | 493 +++++++++++++++++++--------- 5 files changed, 469 insertions(+), 170 deletions(-) create mode 100644 src/lib/embed.ts diff --git a/src/components/layout/PlayerBar.tsx b/src/components/layout/PlayerBar.tsx index 9f801d5..a5efc21 100644 --- a/src/components/layout/PlayerBar.tsx +++ b/src/components/layout/PlayerBar.tsx @@ -1,13 +1,65 @@ -import { Play, Pause, Volume2, VolumeX, SkipBack, SkipForward } from 'lucide-react' +import { useState } from 'react' +import { Play, Pause, Volume2, VolumeX, SkipBack, SkipForward, Maximize2, Minimize2 } from 'lucide-react' import { usePlayerStore } from '@/stores/player' import { formatDuration } from '@/lib/utils' +import { getEmbedInfo } from '@/lib/embed' import { Avatar } from '@/components/ui/Avatar' export function PlayerBar() { - const { current, isPlaying, progress, duration, volume, toggle, seek, setVolume } = usePlayerStore() + const { current, isPlaying, isExternal, progress, duration, volume, toggle, seek, setVolume } = usePlayerStore() + const [expanded, setExpanded] = useState(false) if (!current) return null + const embedInfo = isExternal ? getEmbedInfo(current.audio_url) : null + + // External content: show expandable embed player + if (isExternal && embedInfo && isPlaying) { + return ( +
+ {expanded && ( +
+