add good author

2026-04-13 11:45:06 +02:00 · 2026-04-13 11:45:06 +02:00 · 0f9679ca2f
commit 0f9679ca2f
parent 1ae040cdd3
8 changed files with 349 additions and 55 deletions
--- a/api/src/index.ts
+++ b/api/src/index.ts
@ -82,6 +82,18 @@ app.get('/api/metadata', async (c) => {
            const s = video.snippet || {}
            const thumbs = s.thumbnails || {}
            const thumb = thumbs.maxres?.url || thumbs.standard?.url || thumbs.high?.url || thumbs.medium?.url || thumbs.default?.url || ''
+
+            // Fetch channel avatar
+            let authorAvatar = ''
+            if (s.channelId) {
+              const chRes = await fetch(`https://www.googleapis.com/youtube/v3/channels?part=snippet&id=${s.channelId}&key=${YOUTUBE_API_KEY}`)
+              if (chRes.ok) {
+                const chData = await chRes.json()
+                const chThumbs = chData.items?.[0]?.snippet?.thumbnails || {}
+                authorAvatar = chThumbs.medium?.url || chThumbs.default?.url || ''
+              }
+            }
+
            return c.json({
              title: s.title || '',
              description: (s.description || '').slice(0, 500),
@ -90,6 +102,7 @@ app.get('/api/metadata', async (c) => {
              audioUrl: url,
              platform: 'YouTube',
              author: s.channelTitle || '',
+              authorAvatar,
            })
          }
        }
@ -106,6 +119,7 @@ app.get('/api/metadata', async (c) => {
          audioUrl: url,
          platform: 'YouTube',
          author: data.author_name || '',
+          authorAvatar: '',
        })
      }
    }
@ -129,6 +143,7 @@ app.get('/api/metadata', async (c) => {

          if (contentType === 'episode') {
            const images = data.images || data.show?.images || []
+            const showImages = data.show?.images || []
            return c.json({
              title: data.name || '',
              description: data.description || '',
@ -137,21 +152,36 @@ app.get('/api/metadata', async (c) => {
              audioUrl: url,
              platform: 'Spotify',
              author: data.show?.name || data.show?.publisher || '',
+              authorAvatar: showImages[showImages.length - 1]?.url || showImages[0]?.url || '',
            })
          }
          if (contentType === 'show') {
+            const showImages = data.images || []
            return c.json({
              title: data.name || '',
              description: data.description || '',
-              thumbnail: (data.images || [])[0]?.url || '',
+              thumbnail: showImages[0]?.url || '',
              duration: 0,
              audioUrl: url,
              platform: 'Spotify',
              author: data.publisher || '',
+              authorAvatar: showImages[showImages.length - 1]?.url || showImages[0]?.url || '',
            })
          }
          if (contentType === 'track') {
            const artist = data.artists?.map((a: any) => a.name).join(', ') || ''
+            // Fetch first artist's image
+            let authorAvatar = ''
+            if (data.artists?.[0]?.id && token) {
+              const artRes = await fetch(`https://api.spotify.com/v1/artists/${data.artists[0].id}`, {
+                headers: { Authorization: `Bearer ${token}` },
+              })
+              if (artRes.ok) {
+                const artData = await artRes.json()
+                const artImages = artData.images || []
+                authorAvatar = artImages[artImages.length - 1]?.url || artImages[0]?.url || ''
+              }
+            }
            return c.json({
              title: data.name || '',
              description: artist ? `Par ${artist}` : '',
@ -160,6 +190,7 @@ app.get('/api/metadata', async (c) => {
              audioUrl: url,
              platform: 'Spotify',
              author: artist,
+              authorAvatar,
            })
          }
        }
@ -177,13 +208,14 @@ app.get('/api/metadata', async (c) => {
          audioUrl: url,
          platform: 'Spotify',
          author: parts.length > 1 ? parts[parts.length - 1]?.trim() : '',
+          authorAvatar: '',
        })
      }
    }

    // ── Dailymotion ──
    if (info.platform === 'dailymotion') {
-      const apiUrl = `https://api.dailymotion.com/video/${info.id}?fields=title,description,duration,thumbnail_720_url,owner.screenname`
+      const apiUrl = `https://api.dailymotion.com/video/${info.id}?fields=title,description,duration,thumbnail_720_url,owner.screenname,owner.avatar_720_url`
      const res = await fetch(apiUrl)
      if (res.ok) {
        const data = await res.json()
@ -196,6 +228,7 @@ app.get('/api/metadata', async (c) => {
          audioUrl: url,
          platform: 'Dailymotion',
          author: owner,
+          authorAvatar: data.owner?.avatar_720_url || '',
        })
      }
    }
@ -213,6 +246,7 @@ app.get('/api/metadata', async (c) => {
          audioUrl: url,
          platform: 'SoundCloud',
          author: data.author_name || '',
+          authorAvatar: '',
        })
      }
    }
--- a/scripts/backfill-authors-sql.ts
+++ b/scripts/backfill-authors-sql.ts
@ -0,0 +1,97 @@
+/**
+ * Generate SQL UPDATE statements to backfill external_author and external_author_avatar.
+ * Outputs SQL that you can paste into the Supabase SQL Editor.
+ *
+ * Usage:
+ *   1. Start the API: cd api && bun run dev
+ *   2. Run: bun run scripts/backfill-authors-sql.ts
+ *   3. Copy the output SQL and paste into Supabase SQL Editor
+ */
+
+const SUPABASE_URL = process.env.VITE_SUPABASE_URL || ''
+const SUPABASE_KEY = process.env.VITE_SUPABASE_ANON_KEY || ''
+const API_URL = process.env.VITE_API_URL || 'http://localhost:3001'
+
+if (!SUPABASE_URL || !SUPABASE_KEY) {
+  console.error('Missing VITE_SUPABASE_URL or VITE_SUPABASE_ANON_KEY in .env')
+  process.exit(1)
+}
+
+function isExternalUrl(url: string): boolean {
+  return (
+    url.includes('youtube.com') ||
+    url.includes('youtu.be') ||
+    url.includes('spotify.com') ||
+    url.includes('dailymotion.com') ||
+    url.includes('dai.ly') ||
+    url.includes('soundcloud.com')
+  )
+}
+
+function escapeSql(s: string): string {
+  return s.replace(/'/g, "''")
+}
+
+async function main() {
+  // Fetch all podcasts (read-only, anon key is fine)
+  const res = await fetch(`${SUPABASE_URL}/rest/v1/podcasts?select=id,audio_url,external_author,external_author_avatar&order=created_at.desc`, {
+    headers: {
+      apikey: SUPABASE_KEY,
+      Authorization: `Bearer ${SUPABASE_KEY}`,
+    },
+  })
+
+  if (!res.ok) {
+    console.error('Failed to fetch podcasts:', await res.text())
+    process.exit(1)
+  }
+
+  const podcasts: { id: string; audio_url: string; external_author: string | null; external_author_avatar: string | null }[] = await res.json()
+  const toUpdate = podcasts.filter(p => isExternalUrl(p.audio_url) && (!p.external_author || !p.external_author_avatar))
+
+  console.error(`Found ${podcasts.length} total podcasts, ${toUpdate.length} external to backfill\n`)
+
+  if (toUpdate.length === 0) {
+    console.error('Nothing to do!')
+    return
+  }
+
+  const statements: string[] = []
+
+  for (const podcast of toUpdate) {
+    try {
+      const metaRes = await fetch(`${API_URL}/api/metadata?url=${encodeURIComponent(podcast.audio_url)}`)
+      if (!metaRes.ok) {
+        console.error(`  SKIP ${podcast.id} — API returned ${metaRes.status}`)
+        continue
+      }
+
+      const meta = await metaRes.json()
+      if (!meta.author && !meta.authorAvatar) {
+        console.error(`  SKIP ${podcast.id} — no author data`)
+        continue
+      }
+
+      const sets: string[] = []
+      if (meta.author) sets.push(`external_author = '${escapeSql(meta.author)}'`)
+      if (meta.authorAvatar) sets.push(`external_author_avatar = '${escapeSql(meta.authorAvatar)}'`)
+
+      if (sets.length > 0) {
+        statements.push(`UPDATE public.podcasts SET ${sets.join(', ')} WHERE id = '${podcast.id}';`)
+        console.error(`  OK   ${podcast.id} — ${meta.author} ${meta.authorAvatar ? '(+avatar)' : '(no avatar)'}`)
+      }
+
+      await new Promise(r => setTimeout(r, 200))
+    } catch (err) {
+      console.error(`  ERR  ${podcast.id} — ${err}`)
+    }
+  }
+
+  // Output the SQL to stdout
+  console.log('-- Backfill external authors and avatars')
+  console.log('-- Generated by scripts/backfill-authors-sql.ts\n')
+  console.log(statements.join('\n'))
+  console.error(`\nGenerated ${statements.length} UPDATE statements. Paste the output into Supabase SQL Editor.`)
+}
+
+main()
--- a/scripts/backfill-authors.ts
+++ b/scripts/backfill-authors.ts
@ -0,0 +1,122 @@
+/**
+ * Backfill external_author and external_author_avatar for existing external podcasts.
+ *
+ * Usage:
+ *   cd podcast-us
+ *   bun run scripts/backfill-authors.ts
+ *
+ * Requires:
+ *   - API server running on localhost:3001 (cd api && bun run dev)
+ *   - .env with VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY
+ */
+
+const SUPABASE_URL = process.env.VITE_SUPABASE_URL || ''
+const SUPABASE_KEY = process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.VITE_SUPABASE_ANON_KEY || ''
+const API_URL = process.env.VITE_API_URL || 'http://localhost:3001'
+
+if (!SUPABASE_URL || !SUPABASE_KEY) {
+  console.error('Missing VITE_SUPABASE_URL or SUPABASE_SERVICE_ROLE_KEY in .env')
+  process.exit(1)
+}
+
+if (!process.env.SUPABASE_SERVICE_ROLE_KEY) {
+  console.warn('⚠ No SUPABASE_SERVICE_ROLE_KEY found — using anon key. Updates may fail due to RLS.')
+  console.warn('  Set SUPABASE_SERVICE_ROLE_KEY=... in .env or pass it as env var.\n')
+}
+
+// Patterns that indicate an external URL (not a Supabase storage URL)
+function isExternalUrl(url: string): boolean {
+  return (
+    url.includes('youtube.com') ||
+    url.includes('youtu.be') ||
+    url.includes('spotify.com') ||
+    url.includes('dailymotion.com') ||
+    url.includes('dai.ly') ||
+    url.includes('soundcloud.com')
+  )
+}
+
+async function supabaseFetch(path: string, options?: RequestInit) {
+  const res = await fetch(`${SUPABASE_URL}/rest/v1${path}`, {
+    ...options,
+    headers: {
+      apikey: SUPABASE_KEY,
+      Authorization: `Bearer ${SUPABASE_KEY}`,
+      'Content-Type': 'application/json',
+      Prefer: options?.method === 'PATCH' ? 'return=minimal' : 'return=representation',
+      ...options?.headers,
+    },
+  })
+  return res
+}
+
+async function main() {
+  // 1. Fetch all podcasts
+  const res = await supabaseFetch('/podcasts?select=id,audio_url,external_author,external_author_avatar&order=created_at.desc')
+  if (!res.ok) {
+    console.error('Failed to fetch podcasts:', await res.text())
+    process.exit(1)
+  }
+
+  const podcasts: { id: string; audio_url: string; external_author: string | null; external_author_avatar: string | null }[] = await res.json()
+
+  // 2. Filter external podcasts that need backfill
+  const toUpdate = podcasts.filter(p => isExternalUrl(p.audio_url) && (!p.external_author || !p.external_author_avatar))
+
+  console.log(`Found ${podcasts.length} total podcasts, ${toUpdate.length} external podcasts to backfill\n`)
+
+  if (toUpdate.length === 0) {
+    console.log('Nothing to do!')
+    return
+  }
+
+  let success = 0
+  let failed = 0
+
+  for (const podcast of toUpdate) {
+    try {
+      // 3. Fetch metadata from API
+      const metaRes = await fetch(`${API_URL}/api/metadata?url=${encodeURIComponent(podcast.audio_url)}`)
+      if (!metaRes.ok) {
+        console.log(`  SKIP ${podcast.id} — API returned ${metaRes.status} for ${podcast.audio_url}`)
+        failed++
+        continue
+      }
+
+      const meta = await metaRes.json()
+
+      if (!meta.author && !meta.authorAvatar) {
+        console.log(`  SKIP ${podcast.id} — no author data from API`)
+        failed++
+        continue
+      }
+
+      // 4. Update podcast
+      const updateRes = await supabaseFetch(`/podcasts?id=eq.${podcast.id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({
+          external_author: meta.author || null,
+          external_author_avatar: meta.authorAvatar || null,
+        }),
+      })
+
+      if (updateRes.ok) {
+        console.log(`  OK   ${podcast.id} — ${meta.author} ${meta.authorAvatar ? '(+avatar)' : '(no avatar)'}`)
+        success++
+      } else {
+        console.log(`  FAIL ${podcast.id} — DB update failed: ${await updateRes.text()}`)
+        failed++
+      }
+
+      // Rate limit: small delay between requests
+      await new Promise(r => setTimeout(r, 200))
+    } catch (err) {
+      console.log(`  ERR  ${podcast.id} — ${err}`)
+      failed++
+    }
+  }
+
+  console.log(`\nDone! ${success} updated, ${failed} failed/skipped`)
+}
+
+main()
--- a/src/components/podcast/PodcastCard.tsx
+++ b/src/components/podcast/PodcastCard.tsx
@ -97,7 +97,14 @@ export function PodcastCard({ podcast, progressPercent: propProgress }: PodcastC
          </h3>
        </Link>

-        {podcast.creator && (
+        {podcast.external_author ? (
+          <div className="flex items-center gap-1.5 mt-2">
+            {podcast.external_author_avatar && (
+              <img src={podcast.external_author_avatar} alt="" referrerPolicy="no-referrer" className="w-5 h-5 rounded-full object-cover ring-1 ring-border" />
+            )}
+            <span className="text-[11px] text-text-secondary font-medium">{podcast.external_author}</span>
+          </div>
+        ) : podcast.creator && (
          <Link to={`/profile/${podcast.creator.username}`} className="flex items-center gap-1.5 mt-2">
            <Avatar src={podcast.creator.avatar_url} name={podcast.creator.username} size="sm" className="!w-5 !h-5 !text-[8px] !ring-1" />
            <span className="text-[11px] text-text-secondary font-medium hover:text-primary transition-colors">{podcast.creator.username}</span>
--- a/src/pages/PodcastDetail.tsx
+++ b/src/pages/PodcastDetail.tsx
@ -123,7 +123,14 @@ export function PodcastDetail() {
        <div className="flex-1 min-w-0">
          <h1 className="text-2xl font-heading font-bold">{podcast.title}</h1>

-          {podcast.creator && (
+          {podcast.external_author ? (
+            <div className="flex items-center gap-2 mt-3">
+              {podcast.external_author_avatar && (
+                <img src={podcast.external_author_avatar} alt="" referrerPolicy="no-referrer" className="w-8 h-8 rounded-full object-cover ring-2 ring-border" />
+              )}
+              <span className="text-sm font-medium text-text-secondary">{podcast.external_author}</span>
+            </div>
+          ) : podcast.creator && (
            <Link to={`/profile/${podcast.creator.username}`} className="flex items-center gap-2 mt-3">
              <Avatar src={podcast.creator.avatar_url} name={podcast.creator.username} size="sm" />
              <span className="text-sm font-medium hover:text-primary transition-colors">{podcast.creator.username}</span>
--- a/src/pages/Upload.tsx
+++ b/src/pages/Upload.tsx
@ -1,6 +1,6 @@
 import { useState, useRef, useCallback, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Upload as UploadIcon, Music, X, Image, Mic, Link2, Loader2, Sparkles, Circle, Square, MicOff, ShieldAlert } from 'lucide-react'
+import { Upload as UploadIcon, Music, X, Image, Mic, Link2, Loader2, Circle, Square, MicOff, ShieldAlert } from 'lucide-react'
 import { supabase } from '@/lib/supabase'
 import { useAuthStore } from '@/stores/auth'
 import { Button } from '@/components/ui/Button'
@ -16,6 +16,7 @@ interface OEmbedData {
  audioUrl: string
  platform: string
  author: string
+  authorAvatar: string
 }

 const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001'
@ -62,6 +63,7 @@ export function Upload() {
  const [fetching, setFetching] = useState(false)
  const [platform, setPlatform] = useState('')
  const [author, setAuthor] = useState('')
+  const [authorAvatar, setAuthorAvatar] = useState('')

  // Check microphone permission when entering original mode
  useEffect(() => {
@ -170,26 +172,47 @@ export function Upload() {
    setCoverPreview(URL.createObjectURL(file))
  }

-  async function handleFetchUrl() {
-    if (!externalUrl.trim()) return
-    setFetching(true)
-    setError('')
-
-    const meta = await fetchVideoMeta(externalUrl.trim())
-    if (!meta) {
-      setError('URL non reconnue. Formats supportes : YouTube, Dailymotion, SoundCloud.')
-      setFetching(false)
+  // Auto-fetch metadata when URL changes (debounced)
+  useEffect(() => {
+    if (mode !== 'external') return
+    const url = externalUrl.trim()
+    if (!url) {
+      setPlatform('')
+      setCoverPreview(null)
+      setTitle('')
+      setDescription('')
+      setDuration(0)
+      setAuthor('')
+      setAuthorAvatar('')
      return
    }

-    if (meta.title && !title) setTitle(meta.title)
-    if (meta.description && !description) setDescription(meta.description)
-    if (meta.thumbnail) setCoverPreview(meta.thumbnail)
-    if (meta.duration) setDuration(meta.duration)
-    if (meta.author) setAuthor(meta.author)
-    setPlatform(meta.platform)
-    setFetching(false)
-  }
+    // Basic URL validation before fetching
+    if (!url.startsWith('http://') && !url.startsWith('https://')) return
+
+    const timeout = setTimeout(async () => {
+      setFetching(true)
+      setError('')
+
+      const meta = await fetchVideoMeta(url)
+      if (!meta) {
+        setError('URL non reconnue. Formats supportes : YouTube, Spotify, Dailymotion, SoundCloud.')
+        setFetching(false)
+        return
+      }
+
+      setTitle(meta.title || '')
+      setDescription(meta.description || '')
+      if (meta.thumbnail) setCoverPreview(meta.thumbnail)
+      if (meta.duration) setDuration(meta.duration)
+      if (meta.author) setAuthor(meta.author)
+      if (meta.authorAvatar) setAuthorAvatar(meta.authorAvatar)
+      setPlatform(meta.platform)
+      setFetching(false)
+    }, 600)
+
+    return () => clearTimeout(timeout)
+  }, [externalUrl, mode])

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
@ -241,6 +264,7 @@ export function Upload() {
        audio_url,
        duration_seconds: duration,
        cover_url,
+        ...(mode === 'external' && author ? { external_author: author, external_author_avatar: authorAvatar || null } : {}),
      })
      .select()
      .single()
@ -342,6 +366,7 @@ export function Upload() {
            setError('')
            setPlatform('')
            setAuthor('')
+            setAuthorAvatar('')
          }}
          className="text-sm text-text-secondary hover:text-text transition-colors cursor-pointer"
        >
@ -464,27 +489,19 @@ export function Upload() {
        ) : (
          /* ---- EXTERNAL: URL input ---- */
          <div className="space-y-3">
-            <div className="flex gap-2">
-              <div className="flex-1">
-                <Input
-                  id="url"
-                  label="URL de la video ou du podcast"
-                  value={externalUrl}
-                  onChange={(e) => setExternalUrl(e.target.value)}
-                  placeholder="https://youtube.com/watch?v=... ou https://open.spotify.com/episode/..."
-                />
-              </div>
-              <div className="flex items-end">
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={handleFetchUrl}
-                  disabled={!externalUrl.trim() || fetching}
-                  className="h-[46px]"
-                >
-                  {fetching ? <Loader2 size={18} className="animate-spin" /> : <Sparkles size={18} />}
-                </Button>
-              </div>
+            <div className="relative">
+              <Input
+                id="url"
+                label="URL de la video ou du podcast"
+                value={externalUrl}
+                onChange={(e) => setExternalUrl(e.target.value)}
+                placeholder="https://youtube.com/watch?v=... ou https://open.spotify.com/episode/..."
+              />
+              {fetching && (
+                <div className="absolute right-3 bottom-3">
+                  <Loader2 size={18} className="animate-spin text-text-secondary" />
+                </div>
+              )}
            </div>

            {platform && coverPreview && (
@ -511,8 +528,9 @@ export function Upload() {
          </div>
        )}

-        {/* Shared fields */}
-        <div className="grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-6">
+        {/* Shared fields — hidden in external mode until metadata is fetched */}
+        {(mode === 'original' || platform) && (
+          <div className="grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-6">
          <div className="space-y-4">
            <Input id="title" label="Titre" value={title} onChange={(e) => setTitle(e.target.value)} required placeholder="Le titre de votre podcast" />
            <div className="flex flex-col gap-1.5">
@ -551,19 +569,22 @@ export function Upload() {
            )}
          </div>
        </div>
+        )}

        {error && <p className="text-sm text-accent">{error}</p>}

-        <Button
-          type="submit"
-          size="lg"
-          className="w-full"
-          disabled={
-            (mode === 'original' ? !audioFile : !externalUrl.trim()) || !title || uploading
-          }
-        >
-          {uploading ? 'Publication en cours...' : 'Publier le podcast'}
-        </Button>
+        {(mode === 'original' || platform) && (
+          <Button
+            type="submit"
+            size="lg"
+            className="w-full"
+            disabled={
+              (mode === 'original' ? !audioFile : !externalUrl.trim()) || !title || uploading
+            }
+          >
+            {uploading ? 'Publication en cours...' : 'Publier le podcast'}
+          </Button>
+        )}
      </form>
    </div>
  )
--- a/src/types/index.ts
+++ b/src/types/index.ts
@ -17,6 +17,8 @@ export interface Podcast {
  audio_url: string
  duration_seconds: number
  cover_url: string | null
+  external_author: string | null
+  external_author_avatar: string | null
  plays_count: number
  created_at: string
  creator?: Profile
--- a/supabase/migrations/004_external_author.sql
+++ b/supabase/migrations/004_external_author.sql
@ -0,0 +1,4 @@
+-- Store original content creator info for external podcasts (YouTube channel, Spotify artist, etc.)
+ALTER TABLE public.podcasts
+  ADD COLUMN IF NOT EXISTS external_author text,
+  ADD COLUMN IF NOT EXISTS external_author_avatar text;