Skip to content

feat(discover): WebGL2 Voronoi movie discovery page#120

Open
GuillaumeBld wants to merge 1 commit into
truelockmc:mainfrom
GuillaumeBld:feat/discover-webgl
Open

feat(discover): WebGL2 Voronoi movie discovery page#120
GuillaumeBld wants to merge 1 commit into
truelockmc:mainfrom
GuillaumeBld:feat/discover-webgl

Conversation

@GuillaumeBld
Copy link
Copy Markdown

Summary

Adds a new Discover page — a WebGL2 force-relaxed grid of movie poster thumbnails inspired by nothing-to-watch (MIT). All shaders are original MIT-licensed code (no CC BY-NC-SA dependency).

How it works

  • Click the compass icon in the sidebar to open Discover
  • ~2,000 movies fetched from TMDB (popular + top_rated + now_playing + trending, 10 pages each), cached to localStorage for 24h
  • Posters rendered as WebGL2 textured quads in a force-relaxed grid using OGL
  • Scroll to zoom, drag to pan across the full poster field
  • Hover → floating preview card (title, year, rating, genres, overview)
  • Click → opens the existing MoviePage for that film
  • Touch support: pinch-to-zoom + drag

Files added

File Purpose
src/discover/engine.js OGL WebGL2 renderer — force grid, quad instancing, lazy texture loading, pan/zoom, hit-testing
src/discover/shaders.js MIT GLSL — rounded-rect poster cells + pulsing hover highlight
src/discover/DiscoverPage.jsx React component — canvas mount, preview card, loading progress
src/utils/discover.js TMDB paginator + localStorage cache (24h TTL)

Files modified

  • src/components/Icons.jsxDiscoverIcon added
  • src/components/Sidebar.jsx — Discover nav item
  • src/App.jsx — lazy-loaded route
  • src/styles/global.css — Discover + preview card styles
  • package.jsonogl v1.0.11 added

Test plan

  • Click compass icon → Discover page opens, progress bar shows while fetching
  • After load: poster grid visible, ~2000 films
  • Scroll wheel → zoom in/out smoothly
  • Click + drag → pan across the grid
  • Hover a poster → preview card appears with title/year/rating/genres
  • Click a poster → MoviePage opens for that film
  • Navigate away and back → grid reloads from localStorage cache instantly

Adds a new "Discover" page — a WebGL2 force-relaxed grid of movie poster
thumbnails inspired by nothing-to-watch (MIT). Pan/zoom to explore,
hover to preview, click to open MoviePage.

Architecture:
- src/discover/engine.js — OGL WebGL2 renderer: force-relaxed grid
  layout, instanced quad drawing, lazy poster texture loading,
  pan/zoom controls, hover hit-testing, touch support
- src/discover/shaders.js — MIT GLSL shaders: rounded-rect poster
  cells + pulsing hover highlight overlay
- src/discover/DiscoverPage.jsx — React component mounting the canvas,
  floating preview card (title/year/rating/genres/overview), loading
  progress bar
- src/utils/discover.js — TMDB film fetcher: paginate popular +
  top_rated + now_playing + trending (10 pages each, ~2000 films),
  deduped by id, cached to localStorage for 24h
- DiscoverIcon added to Icons.jsx
- Discover nav item added to Sidebar.jsx
- Lazy-loaded route added to App.jsx
- CSS for all Discover components in global.css
- ogl v1.0.11 added as dependency
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant