feat(astro-kbve): jukebox layout — YouTube player with genre/track sidebar#8205
Merged
feat(astro-kbve): jukebox layout — YouTube player with genre/track sidebar#8205
Conversation
…debar Closes #8202 (phase 1) - AstroJukebox.astro: server-side wrapper, reads yt-tracks/yt-sets from all music/*.mdx frontmatter via getCollection('docs') - ReactJukebox.tsx: React player with genre sidebar, YouTube iframe embed, track list, prev/next controls, ?yt= URL param support - content.config.ts: extend docs schema with yt-tracks/yt-sets fields - music/index.mdx: replace old content with jukebox splash page
Contributor
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Scanned FilesNone |
…es, Starlight theming - YouTube IFrame API integration with controls:0 (no native YT UI) - Two-deck system: Deck A plays, Deck B preloaded muted; swap on track end - CSS flex-grow transition (0.65s cubic-bezier) for DJ-style visual swap - Stale-closure-safe st ref mirrors state for YT onStateChange callbacks - R3F AmbientParticles canvas overlay (pointer-events: none) over active deck - 80 THREE.Points particles drifting upward, speed driven by playing state - All colors via Starlight CSS variables (--sl-color-accent, --sl-color-bg, etc.) - triggerTransition: unMute + playVideo incoming, 700ms timeout swap + cue next Closes #8202
…deck B preview - Add full transport controls: prev, rewind -10s, play/pause, forward +10s, next (DJ mix) - Add progress bar with seek, time display (current / duration), volume slider - Add pixel grid density knob (tweaks GLSL uPixelSize uniform live) - Replace AmbientParticles with GLSL CRT dot-matrix pixel overlay per deck - Vertex shader writes clip-space directly — always fills deck canvas - Fragment: dot mask + scanlines + vignette + heartbeat pulse - Intensity lerps up/down based on active+playing state - Inactive deck (next) is now a fixed 130px narrow tall rectangle - CSS flex transition: 1 1 0 <-> 0 0 130px over 0.65s - Semi-transparent dim overlay + UP NEXT badge, pointer-events: none
…er, lucide buttons
- Replace dot-matrix GLSL overlay with proper two-pass pixelation:
- Pass 1: render animated retro pattern (scan band + random lit pixels)
to a low-res WebGLRenderTarget at (canvas / pixelSize) resolution
- Pass 2: display via NearestFilter upsampling = real chunky pixel blocks
- useEffect recreates render target on canvas resize or pixelSize change
- gl.setRenderTarget in useFrame keeps main scene decoupled
- Default pixelSize = 6 (adjustable 2-24 via the knob)
- Replace emoji/text transport buttons with lucide-react icons:
SkipBack, Rewind, Play/Pause, FastForward, SkipForward, Volume2, Grip
…eb Audio synth - CSS scale trick for real video pixelation: iframe renders at (1/pixelFactor) CSS size, scale(N) back up, image-rendering: pixelated requests nearest-neighbour GPU compositing PX knob in controls: 1x (off) to 8x (very chunky) - Repurpose R3F Canvas as ambient FX overlay spanning both decks: Rain GLSL: 3-layer falling streak fields with wind tilt + fading tails Ocean GLSL: 5-layer sine waves with foam crests, fill, sparkle highlights Canvas keyed on mode — remounts cleanly on switch R3F now strictly ambient, not trying to filter the video - Web Audio API ambient sound synthesis (no audio files): Rain: white noise -> bandpass filter (1200Hz Q=0.5) Ocean: low noise -> lowpass (400Hz) + LFO swell oscillator (0.12Hz) Volume slider drives ambient gain alongside YT volume - FX selector: Off / Rain / Ocean buttons (Lucide: X, CloudRain, Waves)
…der FX - Custom Tooltip component: 250ms delay, positioned above button, Starlight CSS var styling (bg-nav, text, hairline border, drop shadow), caret arrow pointing down, pointer-events: none - not-content class on ReactJukebox root div (Starlight prose isolation) - Track titles via YouTube oEmbed API (no key, CORS-enabled): fetches all tracks for current genre on load/genre-change, fetchedIds ref prevents duplicate requests, displays titles[id] ?? id as fallback in tracklist + controls bar - Cloud volumetric shader (mrdoob example, adapted): iResolution + iTime uniforms fed from useThree().size + clock, opacity driven by cloud luminance so video shows through thin areas, added as 'clouds' AmbientMode with Cloud lucide icon - Tooltip wrapped on all transport buttons, FX buttons, PX knob label
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
AstroJukebox.astro+ReactJukebox.tsx— genre sidebar, YouTube iframe embed, track list, prev/next controls,?yt=URL param supportyt-tracks/yt-setsso Zod doesn't strip music frontmattermusic/index.mdxwith a clean splash page rendering the jukeboxCloses #8202 (phase 1 — layout and flow)
Next (in progress on this branch)
controls=0