ssmithx/podsteadr
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

ui changes

Browse Source
This commit is contained in:
ssmithx
2026-07-30 13:48:45 +00:00
parent e92ef7fef9
commit a050e2e5f9
14 changed files with 109 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/wizard/EpisodeWizard.vue
+14 -14
View File
@@ -113,12 +113,12 @@ async function publish() {
<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>
<button class="text-sm text-orange-400 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">
<button v-if="podcasts.length" class="text-sm text-white/50 underline" @click="creatingNew = false">
← Back to existing podcasts
</button>
</template>
@@ -128,17 +128,17 @@ async function publish() {
<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">
<p class="text-xs text-white/30">
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>
<p v-if="error" class="rounded-lg bg-red-500/20 border border-red-500/40 p-3 text-sm text-red-200">{{ 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>
<p class="text-sm text-white/50">{{ 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" />
@@ -150,18 +150,18 @@ async function publish() {
<div>
<label class="label" for="ep-price">Price in sats (optional — leave blank for a free episode)</label>
<input id="ep-price" v-model.number="epPriceSats" type="number" min="1" step="1" class="input" placeholder="Free" />
<p class="text-xs text-slate-400">
<p class="text-xs text-white/30">
Buyers pay this to unlock the download, then get a certified receipt they can
re-sell the same file with — you get a cut of resales too (see podcast settings).
</p>
</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 class="h-2 overflow-hidden rounded-full bg-white/10">
<div class="h-full bg-orange-400 transition-all" :style="{ width: `${progress * 100}%` }" />
</div>
<p class="text-sm text-slate-500">{{ phaseLabel }}</p>
<p class="text-sm text-white/50">{{ phaseLabel }}</p>
</div>
<p v-if="error" class="rounded-lg bg-red-50 p-3 text-sm text-red-700">{{ error }}</p>
<p v-if="error" class="rounded-lg bg-red-500/20 border border-red-500/40 p-3 text-sm text-red-200">{{ 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">
@@ -172,15 +172,15 @@ async function publish() {
<!-- Step 4: done -->
<div v-else class="card space-y-4">
<h2 class="text-lg font-semibold text-green-700">🎉 Episode published!</h2>
<h2 class="text-lg font-semibold text-green-400">🎉 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">
<p class="text-sm text-white/50">
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>
<a class="text-orange-400 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>.
<a class="text-orange-400 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>