feat(frontend): Vue 3 wizard UI (nostr login, episode upload, go-live)
- NIP-07 login → NIP-98 signed request → session cookie - episode wizard: pick/create podcast (incl. lightning address question), browser-side sha256 + BUD-02 blossom upload with progress, feed result page - live wizard + stream dashboard: OBS server/key (shown once, rotatable), browser WHIP publishing (camera or screen), hls.js live preview, publish-recording-as-episode flow - settings view: external blossom URL, relay list, public URL (admin only) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -0,0 +1,181 @@
|
||||
<script setup lang="ts">
|
||||
// Upload wizard: pick/create podcast → choose mp4 → hash + blossom upload →
|
||||
// episode details → published (feed URL result).
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { api } from '../../lib/api';
|
||||
import { probeDuration, sha256File, uploadToBlossom } from '../../lib/blossom';
|
||||
import { useSettingsStore } from '../../stores/settings';
|
||||
import PodcastForm from '../../components/PodcastForm.vue';
|
||||
import CopyField from '../../components/CopyField.vue';
|
||||
|
||||
interface PodcastSummary { id: string; title: string; feed_url: string }
|
||||
|
||||
const settings = useSettingsStore();
|
||||
const step = ref<'podcast' | 'file' | 'details' | 'done'>('podcast');
|
||||
const podcasts = ref<PodcastSummary[]>([]);
|
||||
const podcast = ref<PodcastSummary | null>(null);
|
||||
const creatingNew = ref(false);
|
||||
|
||||
const file = ref<File | null>(null);
|
||||
const phase = ref<'idle' | 'hashing' | 'uploading' | 'registering'>('idle');
|
||||
const progress = ref(0);
|
||||
const error = ref('');
|
||||
|
||||
const epTitle = ref('');
|
||||
const epDescription = ref('');
|
||||
const uploaded = ref<{ sha256: string; size: number } | null>(null);
|
||||
const durationSecs = ref<number | null>(null);
|
||||
const episodeUrl = ref('');
|
||||
|
||||
const phaseLabel = computed(() => ({
|
||||
idle: '',
|
||||
hashing: 'Computing sha256…',
|
||||
uploading: `Uploading to Blossom… ${(progress.value * 100).toFixed(0)}%`,
|
||||
registering: 'Publishing episode…',
|
||||
}[phase.value]));
|
||||
|
||||
onMounted(async () => {
|
||||
await settings.ensureLoaded();
|
||||
podcasts.value = await api.get<PodcastSummary[]>('/api/podcasts');
|
||||
if (podcasts.value.length === 0) creatingNew.value = true;
|
||||
});
|
||||
|
||||
function choosePodcast(p: PodcastSummary) {
|
||||
podcast.value = p;
|
||||
step.value = 'file';
|
||||
}
|
||||
|
||||
function onPodcastCreated(p: PodcastSummary) {
|
||||
podcasts.value.push(p);
|
||||
choosePodcast(p);
|
||||
}
|
||||
|
||||
function onFilePicked(e: Event) {
|
||||
const f = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!f) return;
|
||||
if (f.size > 2 * 1024 * 1024 * 1024) {
|
||||
error.value = 'File is larger than 2 GB — not supported yet.';
|
||||
return;
|
||||
}
|
||||
error.value = '';
|
||||
file.value = f;
|
||||
epTitle.value ||= f.name.replace(/\.\w+$/, '');
|
||||
step.value = 'details';
|
||||
}
|
||||
|
||||
async function publish() {
|
||||
if (!file.value || !podcast.value) return;
|
||||
error.value = '';
|
||||
try {
|
||||
phase.value = 'hashing';
|
||||
durationSecs.value = await probeDuration(file.value);
|
||||
const sha = await sha256File(file.value);
|
||||
|
||||
phase.value = 'uploading';
|
||||
const blossomUrl = settings.public!.blossomUrl;
|
||||
await uploadToBlossom(blossomUrl, file.value, sha, (f) => (progress.value = f));
|
||||
uploaded.value = { sha256: sha, size: file.value.size };
|
||||
|
||||
phase.value = 'registering';
|
||||
const episode = await api.post<{ enclosure_url: string }>(
|
||||
`/api/podcasts/${podcast.value.id}/episodes`,
|
||||
{
|
||||
title: epTitle.value,
|
||||
description: epDescription.value,
|
||||
sha256: sha,
|
||||
size: file.value.size,
|
||||
mime: file.value.type || 'video/mp4',
|
||||
duration_secs: durationSecs.value,
|
||||
},
|
||||
);
|
||||
episodeUrl.value = episode.enclosure_url;
|
||||
step.value = 'done';
|
||||
} catch (err) {
|
||||
error.value = (err as Error).message;
|
||||
} finally {
|
||||
phase.value = 'idle';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto max-w-2xl space-y-6">
|
||||
<h1 class="text-2xl font-bold">Upload an episode</h1>
|
||||
|
||||
<!-- Step 1: podcast -->
|
||||
<div v-if="step === 'podcast'" class="card space-y-4">
|
||||
<template v-if="podcasts.length && !creatingNew">
|
||||
<h2 class="font-semibold">Which podcast is this episode for?</h2>
|
||||
<ul class="space-y-2">
|
||||
<li v-for="p in podcasts" :key="p.id">
|
||||
<button class="btn-secondary w-full !justify-start" @click="choosePodcast(p)">{{ p.title }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="text-sm text-puddle-600 underline" @click="creatingNew = true">+ Start a new podcast</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h2 class="font-semibold">{{ podcasts.length ? 'New podcast' : 'First, set up your podcast' }}</h2>
|
||||
<PodcastForm @created="onPodcastCreated" />
|
||||
<button v-if="podcasts.length" class="text-sm text-slate-500 underline" @click="creatingNew = false">
|
||||
← Back to existing podcasts
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: file -->
|
||||
<div v-else-if="step === 'file'" class="card space-y-4">
|
||||
<h2 class="font-semibold">Choose the mp4 to publish to “{{ podcast?.title }}”</h2>
|
||||
<input type="file" accept="video/mp4,audio/mpeg,audio/mp4" class="input" @change="onFilePicked" />
|
||||
<p class="text-xs text-slate-400">
|
||||
The file is hashed in your browser and uploaded straight to the Blossom server
|
||||
({{ settings.public?.blossomUrl }}), signed with your nostr key.
|
||||
</p>
|
||||
<p v-if="error" class="rounded-lg bg-red-50 p-3 text-sm text-red-700">{{ error }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: details + upload -->
|
||||
<div v-else-if="step === 'details'" class="card space-y-4">
|
||||
<h2 class="font-semibold">Episode details</h2>
|
||||
<p class="text-sm text-slate-500">{{ file?.name }} · {{ ((file?.size ?? 0) / 1048576).toFixed(1) }} MB</p>
|
||||
<div>
|
||||
<label class="label" for="ep-title">Episode title</label>
|
||||
<input id="ep-title" v-model="epTitle" class="input" required maxlength="300" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="label" for="ep-desc">Show notes</label>
|
||||
<textarea id="ep-desc" v-model="epDescription" class="input" rows="4" placeholder="What happens in this episode?" />
|
||||
</div>
|
||||
<div v-if="phase !== 'idle'" class="space-y-2">
|
||||
<div class="h-2 overflow-hidden rounded-full bg-slate-200">
|
||||
<div class="h-full bg-puddle-500 transition-all" :style="{ width: `${progress * 100}%` }" />
|
||||
</div>
|
||||
<p class="text-sm text-slate-500">{{ phaseLabel }}</p>
|
||||
</div>
|
||||
<p v-if="error" class="rounded-lg bg-red-50 p-3 text-sm text-red-700">{{ error }}</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn-secondary" :disabled="phase !== 'idle'" @click="step = 'file'">Back</button>
|
||||
<button class="btn-primary" :disabled="phase !== 'idle' || !epTitle" @click="publish">
|
||||
{{ phase === 'idle' ? 'Upload & publish' : 'Working…' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: done -->
|
||||
<div v-else class="card space-y-4">
|
||||
<h2 class="text-lg font-semibold text-green-700">🎉 Episode published!</h2>
|
||||
<CopyField label="Your RSS feed — subscribe in any podcast app" :value="podcast!.feed_url" />
|
||||
<CopyField label="Direct media URL (on Blossom)" :value="episodeUrl" />
|
||||
<p class="text-sm text-slate-500">
|
||||
Feed includes your lightning payment info (Podcasting 2.0 value block).
|
||||
Validate it with
|
||||
<a class="text-puddle-600 underline" :href="`https://validator.livewire.io/?feed_url=${encodeURIComponent(podcast!.feed_url)}`" target="_blank" rel="noopener">Livewire</a>
|
||||
or submit it to
|
||||
<a class="text-puddle-600 underline" href="https://podcastindex.org/add" target="_blank" rel="noopener">Podcast Index</a>.
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<RouterLink to="/" class="btn-secondary">Home</RouterLink>
|
||||
<button class="btn-primary" @click="step = 'file'; file = null">Upload another</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user