Media Player — Audio & Video

A sleek desktop media player. Demonstrates the audio and video capabilities, the dialog file picker, and the db capability for a persisted library — all in plain React.

Mode: JS-only dev (runs on the prebuilt glyx-runner — no Rust compile). Demonstrates: audio, video, dialog, db, @glyx-dev/design, percent-width style bars

Run it

# one-time: build + cache the JS-only runner
glyx runtime build
 
cd examples/media-player
glyx dev

Audio works out of the box. Video uses the glyx-media DLL (FFmpeg-backed) — run glyx runtime build once so the media DLL is staged next to the runner.

Features

Library with All / Music / Video / Favorites filters
Add Media via the native dialog.openFile (multi-select), stored in SQLite
Audio playback via the audio API with live progress polling
Video playback via the declarative <Video> component
Per-track favorites (persisted), click-to-seek and volume bars
Now-playing bar with prev / play-pause / next and auto-advance on track end
Borderless dark window with a draggable title bar

Key code

Audio playback

import { audio } from '@glyx-dev/react'
 
function playTrack(track) {
  stopCurrent()
  audio.play(track.path, { volume: volumeRef.current }).then((id) => {
    currentId = Number(id)
    audio.onEnded(() => advance(track))
  }).catch((e) => toast(`Could not play: ${e}`))
}
 
// poll position for the seek bar
const t = audio.getTime(currentId)
const d = audio.getDuration(currentId)

Video stage

import { Video } from '@glyx-dev/react'
 
<Video
  src={track.path}
  autoPlay
  style={{ width: '100%', height: '100%' }}
  onMetadata={(m) => setDuration(m.duration)}
  onTimeUpdate={(t) => setPos(t)}
  onEnded={() => advance(track)}
/>

Library persisted in SQLite

import { db } from '@glyx-dev/react'
 
await db.open('media.db')
await db.run(`CREATE TABLE IF NOT EXISTS media (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  title TEXT, path TEXT, kind TEXT,
  favorite INTEGER DEFAULT 0, added_at INTEGER
)`)

glyx.config.json

{
  "window": { "title": "Media Player", "width": 1040, "height": 680, "decorations": false },
  "capabilities": { "audio": true, "video": true, "dialog": true, "db": true },
  "dev": { "entry": "src/app.jsx", "output": "dist/app.js", "watch": ["src"] }
}

Source

Browse the full source on GitHub: glyx-dev/glyx · examples/media-player (opens in a new tab)

Log Viewer Calculator