mirror of
https://github.com/hoornet/vega.git
synced 2026-05-07 20:59:12 -07:00
Add podcast playback, Fountain.fm cards, V4V streaming, fix notifications
Podcast feature: - Podcast discovery via Podcast Index API (trending + search) - Persistent player bar with play/pause, seek, speed (1x/1.5x/2x), volume - Audio persists across view navigation, resumes from saved position - Fountain.fm URL detection in feed with rich playable cards - "Play in Wrystr" button on inline audio blocks - V4V streaming sats via NWC (LNURL-pay, 5min accumulation, split payments) - Share what you're listening to (publish note with confirm) - Space key toggles play/pause globally Notification fixes: - Per-notification read tracking (click to mark read) instead of mark-all-on-open - Read notifications persist at 50% opacity, unread get accent border - Always fetches last 7 days, keeps 15 most recent - Filter out own replies from notifications - Sidebar badge shows only unread count
This commit is contained in:
Jure
101
src/components/feed/FountainCard.tsx
Normal file
101
src/components/feed/FountainCard.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import type { ContentSegment } from "../../lib/parsing";
|
||||
import type { PodcastEpisode } from "../../types/podcast";
|
||||
import { resolveFountainEpisode } from "../../lib/podcast";
|
||||
import { usePodcastStore } from "../../stores/podcast";
|
||||
|
||||
export function FountainCard({ seg }: { seg: ContentSegment }) {
|
||||
const [episode, setEpisode] = useState<PodcastEpisode | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [failed, setFailed] = useState(false);
|
||||
const play = usePodcastStore((s) => s.play);
|
||||
|
||||
useEffect(() => {
|
||||
resolveFountainEpisode(seg.value).then((ep) => {
|
||||
if (ep) setEpisode(ep);
|
||||
else setFailed(true);
|
||||
setLoading(false);
|
||||
});
|
||||
}, [seg.value]);
|
||||
|
||||
if (failed) {
|
||||
// Fallback: render as a regular link
|
||||
return (
|
||||
<a
|
||||
href={seg.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center shrink-0">
|
||||
<span className="text-blue-400 text-lg font-bold">F</span>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] text-text-muted">Fountain.fm</div>
|
||||
<div className="text-[12px] text-accent truncate">{seg.value}</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 animate-pulse">
|
||||
<div className="w-10 h-10 rounded-sm bg-bg shrink-0" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="h-3 bg-bg rounded w-32 mb-1" />
|
||||
<div className="h-2 bg-bg rounded w-20" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!episode) return null;
|
||||
|
||||
const handlePlay = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (episode.enclosureUrl) {
|
||||
play(episode);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
|
||||
onClick={handlePlay}
|
||||
>
|
||||
{episode.artworkUrl ? (
|
||||
<img
|
||||
src={episode.artworkUrl}
|
||||
alt=""
|
||||
className="w-12 h-12 rounded-sm object-cover shrink-0"
|
||||
loading="lazy"
|
||||
onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-12 h-12 rounded-sm bg-blue-500/20 flex items-center justify-center shrink-0">
|
||||
<span className="text-blue-400 text-lg font-bold">F</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-[11px] text-text-muted">Fountain.fm</div>
|
||||
<div className="text-[12px] text-text truncate">{episode.title}</div>
|
||||
{episode.showTitle && (
|
||||
<div className="text-[10px] text-text-dim truncate">{episode.showTitle}</div>
|
||||
)}
|
||||
</div>
|
||||
{episode.enclosureUrl && (
|
||||
<button
|
||||
onClick={handlePlay}
|
||||
className="shrink-0 w-8 h-8 rounded-full border border-border flex items-center justify-center hover:bg-accent/10 transition-colors"
|
||||
title="Play in Wrystr"
|
||||
>
|
||||
<svg width="10" height="12" viewBox="0 0 10 12" fill="currentColor" className="text-accent ml-0.5">
|
||||
<polygon points="0,0 10,6 0,12" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { ContentSegment } from "../../lib/parsing";
|
||||
import { usePodcastStore } from "../../stores/podcast";
|
||||
|
||||
export function VideoBlock({ sources }: { sources: string[] }) {
|
||||
if (sources.length === 0) return null;
|
||||
@@ -20,6 +21,7 @@ export function VideoBlock({ sources }: { sources: string[] }) {
|
||||
}
|
||||
|
||||
export function AudioBlock({ sources }: { sources: string[] }) {
|
||||
const play = usePodcastStore((s) => s.play);
|
||||
if (sources.length === 0) return null;
|
||||
return (
|
||||
<div className="mt-2 flex flex-col gap-2">
|
||||
@@ -27,7 +29,27 @@ export function AudioBlock({ sources }: { sources: string[] }) {
|
||||
const filename = src.split("/").pop()?.split("?")[0] ?? src;
|
||||
return (
|
||||
<div key={i} className="rounded-sm bg-bg-raised border border-border p-2">
|
||||
<div className="text-[11px] text-text-muted mb-1 truncate">{filename}</div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="text-[11px] text-text-muted truncate">{filename}</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
play({
|
||||
guid: `audio:${src}`,
|
||||
title: filename,
|
||||
enclosureUrl: src,
|
||||
pubDate: 0,
|
||||
duration: 0,
|
||||
description: "",
|
||||
showTitle: "From note",
|
||||
showArtworkUrl: "",
|
||||
});
|
||||
}}
|
||||
className="text-[10px] text-accent hover:text-accent-hover transition-colors shrink-0 ml-2"
|
||||
>
|
||||
play in wrystr
|
||||
</button>
|
||||
</div>
|
||||
<audio controls preload="metadata" className="w-full h-8" src={src} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -8,6 +8,7 @@ import { ImageLightbox } from "../shared/ImageLightbox";
|
||||
import { parseContent } from "../../lib/parsing";
|
||||
import { renderTextSegments } from "./TextSegments";
|
||||
import { VideoBlock, AudioBlock, YouTubeCard, VimeoCard, SpotifyCard, TidalCard } from "./MediaCards";
|
||||
import { FountainCard } from "./FountainCard";
|
||||
|
||||
function ImageGrid({ images, onImageClick }: { images: string[]; onImageClick: (index: number) => void }) {
|
||||
const count = images.length;
|
||||
@@ -159,6 +160,7 @@ export function NoteContent({ content, inline, mediaOnly }: NoteContentProps) {
|
||||
const vimeos = segments.filter((s) => s.type === "vimeo");
|
||||
const spotifys = segments.filter((s) => s.type === "spotify");
|
||||
const tidals = segments.filter((s) => s.type === "tidal");
|
||||
const fountains = segments.filter((s) => s.type === "fountain");
|
||||
const quoteIds: string[] = segments.filter((s) => s.type === "quote").map((s) => s.value);
|
||||
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
|
||||
|
||||
@@ -185,7 +187,7 @@ export function NoteContent({ content, inline, mediaOnly }: NoteContentProps) {
|
||||
// --- Media blocks only (rendered OUTSIDE the clickable wrapper) ---
|
||||
if (mediaOnly) {
|
||||
const hasMedia = videos.length > 0 || audios.length > 0 || youtubes.length > 0
|
||||
|| vimeos.length > 0 || spotifys.length > 0 || tidals.length > 0 || quoteIds.length > 0;
|
||||
|| vimeos.length > 0 || spotifys.length > 0 || tidals.length > 0 || fountains.length > 0 || quoteIds.length > 0;
|
||||
if (!hasMedia) return null;
|
||||
|
||||
return (
|
||||
@@ -196,6 +198,7 @@ export function NoteContent({ content, inline, mediaOnly }: NoteContentProps) {
|
||||
{vimeos.map((seg, i) => <VimeoCard key={`vim-${i}`} seg={seg} />)}
|
||||
{spotifys.map((seg, i) => <SpotifyCard key={`sp-${i}`} seg={seg} />)}
|
||||
{tidals.map((seg, i) => <TidalCard key={`td-${i}`} seg={seg} />)}
|
||||
{fountains.map((seg, i) => <FountainCard key={`fn-${i}`} seg={seg} />)}
|
||||
{quoteIds.map((id) => <QuotePreview key={id} eventId={id} />)}
|
||||
</div>
|
||||
);
|
||||
@@ -225,6 +228,7 @@ export function NoteContent({ content, inline, mediaOnly }: NoteContentProps) {
|
||||
{vimeos.map((seg, i) => <VimeoCard key={`vim-${i}`} seg={seg} />)}
|
||||
{spotifys.map((seg, i) => <SpotifyCard key={`sp-${i}`} seg={seg} />)}
|
||||
{tidals.map((seg, i) => <TidalCard key={`td-${i}`} seg={seg} />)}
|
||||
{fountains.map((seg, i) => <FountainCard key={`fn-${i}`} seg={seg} />)}
|
||||
{quoteIds.map((id) => <QuotePreview key={id} eventId={id} />)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user