Mike/PodTui
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

actual featured page

Browse Source
This commit is contained in:
Michael Freno
2026-08-07 18:59:25 -04:00
parent 0cc15c8d90
commit 64d8b40e61
9 changed files with 1321 additions and 847 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/Discover/DiscoverPage.tsx
View File

@@ -65,6 +65,12 @@ function DiscoverPage() {
};
onMount(ensureFocus);
// Auto-fetch the featured-shows manifest on first mount (network failure is
// non-fatal — the list stays empty until the user hits refresh).
onMount(() => {
discoverStore.refresh().catch(() => {});
});
onMount(() => {
nav.registerResolver(`${nav.activeTab()}:${DEPTH_CENTER_PANE}`, (i) => {
if (depth() === 0) return categories()[i]?.id;
@@ -243,7 +249,9 @@ function DiscoverPage() {
{podcast.title}
</text>
<Show when={podcast.isSubscribed}>
<text fg={index() === lf() ? theme.surface : theme.success}>
<text
fg={index() === lf() ? theme.surface : theme.success}
>
[+]
</text>
</Show>

381
src/pages/Player/RealtimeWaveform.tsx
View File

@@ -9,9 +9,9 @@
import { createSignal, createEffect, onCleanup, on, untrack } from "solid-js";
import {
loadCavaCore,
type CavaCore,
type CavaCoreConfig,
loadCavaCore,
type CavaCore,
type CavaCoreConfig,
} from "@/utils/cavacore";
import { AudioStreamReader } from "@/utils/audio-stream-reader";
import { useAudio } from "@/hooks/useAudio";
@@ -20,20 +20,20 @@ import { useTheme } from "@/context/ThemeContext";
// ── Types ────────────────────────────────────────────────────────────
export type RealtimeWaveformProps = {
visualizerConfig?: Partial<CavaCoreConfig>;
visualizerConfig?: Partial<CavaCoreConfig>;
};
/** Unicode lower block elements: space (silence) through full block (max) */
const BARS = [
" ",
"\u2581",
"\u2582",
"\u2583",
"\u2584",
"\u2585",
"\u2586",
"\u2587",
"\u2588",
" ",
"\u2581",
"\u2582",
"\u2583",
"\u2584",
"\u2585",
"\u2586",
"\u2587",
"\u2588",
];
/** Target frame interval in ms (~30 fps) */
@@ -45,212 +45,221 @@ const SAMPLES_PER_FRAME = 512;
// ── Component ────────────────────────────────────────────────────────
export function RealtimeWaveform(props: RealtimeWaveformProps) {
const { theme } = useTheme();
const audio = useAudio();
const { theme } = useTheme();
const audio = useAudio();
// Frequency bar values (0.0–1.0 per bar)
const [barData, setBarData] = createSignal<number[]>([]);
// Frequency bar values (0.0–1.0 per bar)
const [barData, setBarData] = createSignal<number[]>([]);
// Track whether cavacore is available
const [available, setAvailable] = createSignal(false);
// Track whether cavacore is available
const [available, setAvailable] = createSignal(false);
let cava: CavaCore | null = null;
let reader: AudioStreamReader | null = null;
let frameTimer: ReturnType<typeof setInterval> | null = null;
let sampleBuffer: Float64Array | null = null;
let cava: CavaCore | null = null;
let reader: AudioStreamReader | null = null;
let frameTimer: ReturnType<typeof setInterval> | null = null;
let sampleBuffer: Float64Array | null = null;
// ── Lifecycle: init cavacore once ──────────────────────────────────
// Bar count comes from the visualizer config (set in Settings); default 64.
// Single source of truth used for cavacore init, rendering, and seek clicks.
const numBars = () => props.visualizerConfig?.bars ?? 64;
const initCava = () => {
if (cava) return true;
// ── Lifecycle: init cavacore once ──────────────────────────────────
cava = loadCavaCore();
if (!cava) {
setAvailable(false);
return false;
}
const initCava = () => {
if (cava) return true;
setAvailable(true);
return true;
};
cava = loadCavaCore();
if (!cava) {
setAvailable(false);
return false;
}
// ── Start/stop the visualization pipeline ──────────────────────────
setAvailable(true);
return true;
};
const startVisualization = (url: string, position: number, speed: number) => {
stopVisualization();
// ── Start/stop the visualization pipeline ──────────────────────────
if (!url || !initCava() || !cava) return;
const startVisualization = (url: string, position: number, speed: number) => {
stopVisualization();
// Initialize cavacore with current resolution + any overrides
const config: CavaCoreConfig = {
bars: 32,
sampleRate: 44100,
channels: 1,
...props.visualizerConfig,
};
cava.init(config);
if (!url || !initCava() || !cava) return;
// Pre-allocate sample read buffer
sampleBuffer = new Float64Array(SAMPLES_PER_FRAME);
// Initialize cavacore with current resolution + any overrides
const config: CavaCoreConfig = {
bars: numBars(),
sampleRate: 44100,
channels: 1,
...props.visualizerConfig,
};
cava.init(config);
// Start ffmpeg decode stream (reuse reader if same URL, else create new)
if (!reader || reader.url !== url) {
if (reader) reader.stop();
reader = new AudioStreamReader({ url });
}
reader.start(position, speed);
// Pre-allocate sample read buffer
sampleBuffer = new Float64Array(SAMPLES_PER_FRAME);
// Start render loop
frameTimer = setInterval(renderFrame, FRAME_INTERVAL);
};
// Start ffmpeg decode stream (reuse reader if same URL, else create new)
if (!reader || reader.url !== url) {
if (reader) reader.stop();
reader = new AudioStreamReader({ url });
}
reader.start(position, speed);
const stopVisualization = () => {
if (frameTimer) {
clearInterval(frameTimer);
frameTimer = null;
}
if (reader) {
reader.stop();
// Don't null reader — we reuse it across start/stop cycles
}
if (cava?.isReady) {
cava.destroy();
}
sampleBuffer = null;
};
// Start render loop
frameTimer = setInterval(renderFrame, FRAME_INTERVAL);
};
// ── Render loop (called at ~30fps) ─────────────────────────────────
const stopVisualization = () => {
if (frameTimer) {
clearInterval(frameTimer);
frameTimer = null;
}
if (reader) {
reader.stop();
// Don't null reader — we reuse it across start/stop cycles
}
if (cava?.isReady) {
cava.destroy();
}
sampleBuffer = null;
};
const renderFrame = () => {
if (!cava?.isReady || !reader?.running || !sampleBuffer) return;
// ── Render loop (called at ~30fps) ─────────────────────────────────
// Read available PCM samples from the stream
const count = reader.read(sampleBuffer);
if (count === 0) return;
const renderFrame = () => {
if (!cava?.isReady || !reader?.running || !sampleBuffer) return;
// Feed samples to cavacore → get frequency bars
const input =
count < sampleBuffer.length
? sampleBuffer.subarray(0, count)
: sampleBuffer;
const output = cava.execute(input);
// Read available PCM samples from the stream
const count = reader.read(sampleBuffer);
if (count === 0) return;
// Copy bar values to a new array for the signal
setBarData(Array.from(output));
};
// Feed samples to cavacore → get frequency bars
const input =
count < sampleBuffer.length
? sampleBuffer.subarray(0, count)
: sampleBuffer;
const output = cava.execute(input);
createEffect(
on(
[
audio.isPlaying,
() => audio.currentEpisode()?.audioUrl ?? "", // may need to fire an error here
audio.speed,
() => 32,
],
([playing, url, speed]) => {
if (playing && url) {
const pos = untrack(audio.position);
startVisualization(url, pos, speed);
} else {
stopVisualization();
}
},
),
);
// Copy bar values to a new array for the signal
setBarData(Array.from(output));
};
// ── Seek detection: lightweight effect for position jumps ──────────
//
// Watches position and restarts the reader (not the whole pipeline)
// only on significant jumps (>2s), which indicate a user seek.
// This is intentionally a separate effect — it should NOT trigger a
// full pipeline restart, just restart the ffmpeg stream at the new pos.
createEffect(
on(
[
audio.isPlaying,
() => audio.currentEpisode()?.audioUrl ?? "",
audio.speed,
numBars,
],
([playing, url, speed]) => {
if (playing && url) {
const pos = untrack(audio.position);
startVisualization(url, pos, speed);
} else {
stopVisualization();
}
},
),
);
let lastSyncPosition = 0;
createEffect(
on(audio.position, (pos) => {
if (!audio.isPlaying || !reader?.running) {
lastSyncPosition = pos;
return;
}
// ── Seek detection: lightweight effect for position jumps ──────────
//
// Watches position and restarts the reader (not the whole pipeline)
// only on significant jumps (>2s), which indicate a user seek.
// This is intentionally a separate effect — it should NOT trigger a
// full pipeline restart, just restart the ffmpeg stream at the new pos.
const delta = Math.abs(pos - lastSyncPosition);
lastSyncPosition = pos;
let lastSyncPosition = 0;
createEffect(
on(audio.position, (pos) => {
if (!audio.isPlaying || !reader?.running) {
lastSyncPosition = pos;
return;
}
if (delta > 2) {
reader.restart(pos, audio.speed() ?? 1);
}
}),
);
const delta = Math.abs(pos - lastSyncPosition);
lastSyncPosition = pos;
// Cleanup on unmount
onCleanup(() => {
stopVisualization();
if (reader) {
reader.stop();
reader = null;
}
// Don't null cava itself — it can be reused. But do destroy its plan.
if (cava?.isReady) {
cava.destroy();
}
});
if (delta > 2) {
reader.restart(pos, audio.speed() ?? 1);
}
}),
);
// ── Rendering ──────────────────────────────────────────────────────
// Cleanup on unmount
onCleanup(() => {
stopVisualization();
if (reader) {
reader.stop();
reader = null;
}
// Don't null cava itself — it can be reused. But do destroy its plan.
if (cava?.isReady) {
cava.destroy();
}
});
const playedRatio = () =>
audio.duration() <= 0
? 0
: Math.min(1, audio.position() / audio.duration());
// ── Rendering ──────────────────────────────────────────────────────
const renderLine = () => {
const bars = barData();
const numBars = 32;
const playedRatio = () =>
audio.duration() <= 0
? 0
: Math.min(1, audio.position() / audio.duration());
// If no data yet, show empty placeholder
if (bars.length === 0) {
const placeholder = ".".repeat(numBars);
return (
<box flexDirection="row" gap={0}>
<text fg="#3b4252">{placeholder}</text>
</box>
);
}
const renderLine = () => {
const bars = barData();
const count = numBars();
const played = Math.floor(numBars * playedRatio());
const playedColor = audio.isPlaying() ? "#6fa8ff" : "#7d8590";
const futureColor = "#3b4252";
// If no data yet, show empty placeholder
if (bars.length === 0) {
const placeholder = ".".repeat(count);
return (
<box flexDirection="row" gap={0}>
<text fg="#3b4252">{placeholder}</text>
</box>
);
}
const playedChars = bars
.slice(0, played)
.map((v) => BARS[Math.min(BARS.length - 1, Math.floor(v * BARS.length))])
.join("");
const played = Math.floor(count * playedRatio());
const playedColor = audio.isPlaying() ? "#6fa8ff" : "#7d8590";
const futureColor = "#3b4252";
const futureChars = bars
.slice(played)
.map((v) => BARS[Math.min(BARS.length - 1, Math.floor(v * BARS.length))])
.join("");
const playedChars = bars
.slice(0, played)
.map((v) => BARS[Math.min(BARS.length - 1, Math.floor(v * BARS.length))])
.join("");
return (
<box flexDirection="row" gap={0}>
<text fg={playedColor}>{playedChars || " "}</text>
<text fg={futureColor}>{futureChars || " "}</text>
</box>
);
};
const futureChars = bars
.slice(played)
.map((v) => BARS[Math.min(BARS.length - 1, Math.floor(v * BARS.length))])
.join("");
const handleClick = (event: { x: number }) => {
const numBars = 32;
const ratio = event.x / numBars;
const next = Math.max(
0,
Math.min(audio.duration(), Math.round(audio.duration() * ratio)),
);
audio.seek(next);
};
return (
<box flexDirection="row" gap={0}>
<text fg={playedColor}>{playedChars || " "}</text>
<text fg={futureColor}>{futureChars || " "}</text>
</box>
);
};
return (
<box border borderColor={theme.border} padding={1} onMouseDown={handleClick}>
{renderLine()}
</box>
);
}
const handleClick = (event: { x: number }) => {
const count = numBars();
const ratio = event.x / count;
const next = Math.max(
0,
Math.min(audio.duration(), Math.round(audio.duration() * ratio)),
);
audio.seek(next);
};
return (
<box
border
borderColor={theme.border}
padding={1}
onMouseDown={handleClick}
>
{renderLine()}
</box>
);
}