From 642245deff7ebaca6f6fa33a656009a657abe425 Mon Sep 17 00:00:00 2001
From: "goose.art" <business@goose.art>
Date: Sun, 12 Apr 2026 11:36:13 -0700
Subject: [PATCH] fix oauth metdata to allow captions in prod...

---
 src/lib/CaptionEditor.svelte | 257 ++++++++++++++++++++++++++++++++---
 static/client-metadata.json  |   2 +-
 2 files changed, 242 insertions(+), 17 deletions(-)

diff --git a/src/lib/CaptionEditor.svelte b/src/lib/CaptionEditor.svelte
index 4e7f592..83a73be 100644
--- a/src/lib/CaptionEditor.svelte
+++ b/src/lib/CaptionEditor.svelte
@@ -3,10 +3,12 @@
 	Two modes:
 	  - "edit": Edit the single caption currently showing on screen
 	  - "full": Full caption list editor with timestamps, text, and speakers
+	Speakers can be added by searching handles, then assigned via dropdown.
 -->
 <script lang="ts">
 	import { getAuthState } from './auth.svelte';
 	import { putCaptions, toCaptionEntries, type CaptionEntry } from './caption-records';
+	import { getProfile, type BskyProfile } from './api';
 	import WavyBorder from './WavyBorder.svelte';
 	import WavyButton from './WavyButton.svelte';
 	import { playCroak } from './croak';
@@ -35,7 +37,66 @@
 	let saveResult = $state('');
 	let initialized = false;
 
-	// Initialize editable copy once on open, not on every captions change
+	// --- Speakers ---
+	interface Speaker {
+		did: string;
+		handle: string;
+		displayName: string;
+		avatar?: string;
+	}
+
+	let speakers = $state<Speaker[]>([]);
+	let speakerSearch = $state('');
+	let speakerSearching = $state(false);
+	let speakerError = $state('');
+
+	async function addSpeaker() {
+		const handle = speakerSearch.trim().replace(/^@/, '');
+		if (!handle) return;
+		if (speakers.some(s => s.handle === handle)) {
+			speakerError = 'Already added';
+			setTimeout(() => speakerError = '', 2000);
+			return;
+		}
+
+		speakerSearching = true;
+		speakerError = '';
+		try {
+			const profile = await getProfile(handle);
+			speakers = [...speakers, {
+				did: profile.did,
+				handle: profile.handle,
+				displayName: profile.displayName || profile.handle,
+				avatar: profile.avatar
+			}];
+			speakerSearch = '';
+			playCroak();
+		} catch {
+			speakerError = 'Handle not found';
+			setTimeout(() => speakerError = '', 2000);
+		}
+		speakerSearching = false;
+	}
+
+	function removeSpeaker(did: string) {
+		speakers = speakers.filter(s => s.did !== did);
+		// Clear speaker from any captions using this DID
+		editCaptions = editCaptions.map(c => c.speaker === did ? { ...c, speaker: '' } : c);
+	}
+
+	function setAllSpeaker(did: string) {
+		editCaptions = editCaptions.map(c => ({ ...c, speaker: did }));
+		playCroak();
+		saveResult = `Set all captions to ${speakers.find(s => s.did === did)?.handle || did}`;
+		setTimeout(() => saveResult = '', 2000);
+	}
+
+	function speakerLabel(did: string): string {
+		const s = speakers.find(s => s.did === did);
+		return s ? s.displayName : did ? did.substring(0, 20) + '...' : '';
+	}
+
+	// --- Captions ---
 	$effect(() => {
 		if (!initialized && captions.length > 0) {
 			editCaptions = captions.map(c => ({
@@ -48,7 +109,6 @@
 		}
 	});
 
-	// Find the caption currently showing
 	let currentCaptionIdx = $derived(
 		captions.findIndex(c => currentTime >= c.start && currentTime <= c.end)
 	);
@@ -132,7 +192,6 @@
 		reader.onload = () => {
 			try {
 				const data = JSON.parse(reader.result as string);
-				// Support both { record: { captions } } and { captions } formats
 				const caps = data.record?.captions || data.captions;
 				if (!Array.isArray(caps)) {
 					saveResult = 'Invalid JSON format';
@@ -144,12 +203,21 @@
 					end: String(c.end ?? '0'),
 					speaker: c.speaker || ''
 				}));
-				// Auto-compute end times from next caption's start
 				for (let i = 0; i < editCaptions.length - 1; i++) {
 					if (parseFloat(editCaptions[i].end) === 0) {
 						editCaptions[i].end = editCaptions[i + 1].start;
 					}
 				}
+				// Auto-add speakers found in imported data
+				for (const c of editCaptions) {
+					if (c.speaker && !speakers.some(s => s.did === c.speaker)) {
+						speakers = [...speakers, { did: c.speaker, handle: c.speaker, displayName: c.speaker }];
+						// Resolve in background
+						getProfile(c.speaker).then(p => {
+							speakers = speakers.map(s => s.did === c.speaker ? { ...s, handle: p.handle, displayName: p.displayName || p.handle, avatar: p.avatar } : s);
+						}).catch(() => {});
+					}
+				}
 				applyEdits();
 				playCroak();
 				saveResult = `Imported ${caps.length} captions`;
@@ -159,21 +227,16 @@
 			}
 		};
 		reader.readAsText(file);
-		// Reset so same file can be re-imported
 		if (fileInput) fileInput.value = '';
 	}
 
-	function formatTime(s: string): string {
-		const n = parseFloat(s);
-		if (isNaN(n)) return s;
-		const mins = Math.floor(n / 60);
-		const secs = (n % 60).toFixed(1);
-		return `${mins}:${secs.padStart(4, '0')}`;
-	}
-
 	function onBackdropClick(e: MouseEvent) {
 		if (e.target === e.currentTarget) onClose();
 	}
+
+	function onSpeakerKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') { e.preventDefault(); addSpeaker(); }
+	}
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -191,6 +254,40 @@
 					</div>
 				</div>
 
+				<!-- Speakers panel -->
+				<div class="speakers-panel">
+					<div class="speakers-header">speakers</div>
+					<div class="speakers-search">
+						<input
+							class="speaker-search-input"
+							placeholder="@handle.bsky.social"
+							bind:value={speakerSearch}
+							onkeydown={onSpeakerKeydown}
+							disabled={speakerSearching}
+						/>
+						<WavyButton seed="add-speaker" fill="#0A182B" textColor="#FFDEED" disabled={speakerSearching} onclick={addSpeaker}>
+							{speakerSearching ? '...' : 'add'}
+						</WavyButton>
+					</div>
+					{#if speakerError}
+						<p class="speaker-error">{speakerError}</p>
+					{/if}
+					{#if speakers.length > 0}
+						<div class="speakers-list">
+							{#each speakers as speaker}
+								<div class="speaker-tag">
+									{#if speaker.avatar}
+										<img src={speaker.avatar} alt="" class="speaker-avatar" />
+									{/if}
+									<span class="speaker-name">{speaker.displayName}</span>
+									<button class="speaker-setall" onclick={() => setAllSpeaker(speaker.did)} title="Set all captions to this speaker">set all</button>
+									<button class="speaker-remove" onclick={() => removeSpeaker(speaker.did)} title="Remove speaker">x</button>
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+
 				{#if mode === 'edit' && currentCaptionIdx >= 0}
 					<div class="single-edit">
 						<label class="field-label">
@@ -206,8 +303,13 @@
 							<textarea class="text-input" rows="3" value={editCaptions[currentCaptionIdx]?.text} oninput={(e) => updateCaption(currentCaptionIdx, 'text', e.currentTarget.value)}></textarea>
 						</label>
 						<label class="field-label">
-							<span>speaker (DID)</span>
-							<input class="speaker-input" value={editCaptions[currentCaptionIdx]?.speaker} placeholder="optional" oninput={(e) => updateCaption(currentCaptionIdx, 'speaker', e.currentTarget.value)} />
+							<span>speaker</span>
+							<select class="speaker-select" value={editCaptions[currentCaptionIdx]?.speaker} onchange={(e) => updateCaption(currentCaptionIdx, 'speaker', e.currentTarget.value)}>
+								<option value="">— none —</option>
+								{#each speakers as s}
+									<option value={s.did}>{s.displayName} (@{s.handle})</option>
+								{/each}
+							</select>
 						</label>
 					</div>
 				{:else}
@@ -219,6 +321,12 @@
 									<span class="time-sep-sm">-</span>
 									<input class="time-input-sm" value={cap.end} oninput={(e) => updateCaption(i, 'end', e.currentTarget.value)} />
 								</div>
+								<select class="speaker-select-sm" value={cap.speaker} onchange={(e) => updateCaption(i, 'speaker', e.currentTarget.value)}>
+									<option value=""></option>
+									{#each speakers as s}
+										<option value={s.did}>{s.displayName}</option>
+									{/each}
+								</select>
 								<input class="text-input-sm" value={cap.text} oninput={(e) => updateCaption(i, 'text', e.currentTarget.value)} />
 								<button class="delete-btn" onclick={() => deleteCaption(i)} title="Delete">x</button>
 							</div>
@@ -291,6 +399,123 @@
 		gap: 6px;
 	}
 
+	/* Speakers panel */
+	.speakers-panel {
+		border-top: 1.5px solid rgba(10, 24, 43, 0.15);
+		padding-top: 12px;
+	}
+
+	.speakers-header {
+		font-family: 'PicNic', cursive, system-ui;
+		font-size: 1rem;
+		color: #0A182B;
+		margin-bottom: 8px;
+	}
+
+	.speakers-search {
+		display: flex;
+		gap: 6px;
+		align-items: center;
+	}
+
+	.speaker-search-input {
+		font-family: 'Fang', system-ui, sans-serif;
+		font-size: 0.85rem;
+		padding: 6px 10px;
+		border: 2px solid #0A182B;
+		background: #FFDEED;
+		color: #0A182B;
+		flex: 1;
+		outline: none;
+	}
+
+	.speaker-search-input::placeholder {
+		color: #0A182B;
+		opacity: 0.4;
+	}
+
+	.speaker-error {
+		font-family: 'Fang', system-ui, sans-serif;
+		font-size: 0.75rem;
+		color: #FF3992;
+		margin: 4px 0 0;
+	}
+
+	.speakers-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+		margin-top: 8px;
+	}
+
+	.speaker-tag {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		background: rgba(10, 24, 43, 0.08);
+		padding: 4px 8px;
+		border-radius: 16px;
+	}
+
+	.speaker-avatar {
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		object-fit: cover;
+	}
+
+	.speaker-name {
+		font-family: 'Fang', system-ui, sans-serif;
+		font-size: 0.8rem;
+		color: #0A182B;
+	}
+
+	.speaker-setall {
+		all: unset;
+		font-family: 'Fang', system-ui, sans-serif;
+		font-size: 0.65rem;
+		color: #3992FF;
+		cursor: pointer;
+		text-decoration: underline;
+	}
+
+	.speaker-setall:hover {
+		color: #0A182B;
+	}
+
+	.speaker-remove {
+		all: unset;
+		font-family: monospace;
+		font-size: 0.75rem;
+		color: #FF3992;
+		cursor: pointer;
+		opacity: 0.6;
+	}
+
+	.speaker-remove:hover { opacity: 1; }
+
+	/* Speaker selects */
+	.speaker-select, .speaker-select-sm {
+		font-family: 'Fang', system-ui, sans-serif;
+		border: 2px solid #0A182B;
+		background: #FFDEED;
+		color: #0A182B;
+		outline: none;
+	}
+
+	.speaker-select {
+		font-size: 0.85rem;
+		padding: 6px 8px;
+		width: 100%;
+	}
+
+	.speaker-select-sm {
+		font-size: 0.7rem;
+		padding: 2px 4px;
+		width: 80px;
+		flex-shrink: 0;
+	}
+
 	/* Single edit mode */
 	.single-edit {
 		display: flex;
@@ -326,7 +551,7 @@
 
 	.time-sep { color: #0A182B; opacity: 0.5; }
 
-	.text-input, .speaker-input {
+	.text-input {
 		font-family: 'Fang', system-ui, sans-serif;
 		font-size: 0.9rem;
 		padding: 8px 10px;
diff --git a/static/client-metadata.json b/static/client-metadata.json
index 426f774..53053e1 100644
--- a/static/client-metadata.json
+++ b/static/client-metadata.json
@@ -4,7 +4,7 @@
   "client_uri": "https://vods.sky.boo",
   "logo_uri": "https://vods.sky.boo/frogicon.png",
   "redirect_uris": ["https://vods.sky.boo/oauth/callback"],
-  "scope": "atproto repo:sky.boo.vods.watchlist",
+  "scope": "atproto repo:sky.boo.vods.watchlist repo:boo.sky.vods.captions",
   "grant_types": ["authorization_code", "refresh_token"],
   "response_types": ["code"],
   "token_endpoint_auth_method": "none",
-- 
2.51.2