diff --git a/ui/package.json b/ui/package.json
index 7158955..945e713 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,6 +13,7 @@
     "@solid-primitives/i18n": "^2.2.1",
     "@solidjs/router": "^0.15.3",
     "clsx": "^2.1.1",
+    "hls.js": "^1.6.15",
     "install": "^0.13.0",
     "solid-js": "^1.9.9"
   },
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index 2edf978..e32387d 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      hls.js:
+        specifier: ^1.6.15
+        version: 1.6.15
       install:
         specifier: ^0.13.0
         version: 0.13.0
@@ -1303,6 +1306,9 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hls.js@1.6.15:
+    resolution: {integrity: sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==}
+
   html-entities@2.3.3:
     resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
 
@@ -3367,6 +3373,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hls.js@1.6.15: {}
+
   html-entities@2.3.3: {}
 
   html-tags@3.3.1: {}
diff --git a/ui/src/classes.ts b/ui/src/classes.ts
new file mode 100644
index 0000000..47ef377
--- /dev/null
+++ b/ui/src/classes.ts
@@ -0,0 +1,12 @@
+import { DaisyUIColor } from './types'
+
+export const rangeColorMap: Record<DaisyUIColor, string> = {
+  primary: 'range-primary',
+  secondary: 'range-secondary',
+  neutral: 'range-neutral',
+  accent: 'range-accent',
+  info: 'range-info',
+  success: 'range-success',
+  warning: 'range-warning',
+  error: 'range-error',
+}
diff --git a/ui/src/components/Button.tsx b/ui/src/components/Button.tsx
index 0012a20..bffba49 100644
--- a/ui/src/components/Button.tsx
+++ b/ui/src/components/Button.tsx
@@ -1,25 +1,15 @@
 import clsx from 'clsx'
 import { JSXElement, Show } from 'solid-js'
+import { DaisyUISize, DaisyUIColor } from '../types'
 
-type DaisyUIButtonColor =
-  | 'neutral'
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'error'
-
-type DaisyUIButtonStyle =
+type DaisyUIButtonVariant =
   | 'outline'
   | 'dash'
   | 'soft'
   | 'ghost'
   | 'link'
   | 'outline'
-
-type DaisyUIButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  | 'circle'
 
 /**
  * Renders a button component with an optional loading state.
@@ -33,9 +23,9 @@ export function Button(props: {
   isLoading?: boolean
   disabled?: boolean
   type?: 'submit' | 'button' | 'reset'
-  color?: DaisyUIButtonColor
-  size?: DaisyUIButtonSize
-  style?: DaisyUIButtonStyle
+  color?: DaisyUIColor
+  size?: DaisyUISize
+  variant?: DaisyUIButtonVariant
   class?: string
 }): JSXElement {
   return (
@@ -43,7 +33,7 @@ export function Button(props: {
       class={clsx(
         'btn',
         props.color ? `btn-${props.color}` : undefined,
-        props.style ? `btn-${props.style}` : undefined,
+        props.variant ? `btn-${props.variant}` : undefined,
         props.size ? `btn-${props.size}` : undefined,
         (props.isLoading || props.disabled) && 'btn-disabled',
         props.class
@@ -74,16 +64,16 @@ export function IconButton(props: {
   onClick?: () => void
   isLoading?: boolean
   disabled?: boolean
-  color?: DaisyUIButtonColor
-  size?: DaisyUIButtonSize
-  style?: DaisyUIButtonStyle
+  color?: DaisyUIColor
+  size?: DaisyUISize
+  variant?: DaisyUIButtonVariant
   class?: string
 }): JSXElement {
   return (
     <button
       class={clsx(
         'btn',
-        props.style ? `btn-${props.style}` : 'btn-ghost',
+        props.variant ? `btn-${props.variant}` : 'btn-ghost',
         props.size ? `btn-${props.size}` : 'btn-sm',
         props.isLoading && 'btn-disabled',
         props.class
diff --git a/ui/src/components/media/AudioPlayer.tsx b/ui/src/components/media/AudioPlayer.tsx
new file mode 100644
index 0000000..46618a8
--- /dev/null
+++ b/ui/src/components/media/AudioPlayer.tsx
@@ -0,0 +1,253 @@
+import {
+  JSXElement,
+  createSignal,
+  onMount,
+  onCleanup,
+  For,
+  Show,
+} from 'solid-js'
+import { clsx } from 'clsx'
+import { IconButton } from '../../components/Button'
+import { DaisyUIColor } from '../../types'
+import { rangeColorMap } from '../../classes'
+
+type AudioPlayerProps = {
+  src: string
+  color?: DaisyUIColor
+  minimal?: boolean
+  showRate?: boolean
+  withShortcuts?: boolean
+}
+
+export function AudioPlayer(props: AudioPlayerProps): JSXElement {
+  let audioEl!: HTMLAudioElement
+
+  const [ready, setReady] = createSignal(false)
+  const [playing, setPlaying] = createSignal(false)
+  const [dur, setDur] = createSignal(0)
+  const [t, setT] = createSignal(0)
+  const [rate, setRate] = createSignal(1)
+
+  const getFiniteDuration = () => {
+    const d = audioEl?.duration
+    if (Number.isFinite(d) && d! > 0) return d!
+
+    // Fallback: use seekable range end (often available on iOS PWA)
+    const s = audioEl?.seekable
+    if (s && s.length > 0) {
+      return s.end(s.length - 1)
+    }
+
+    return 0
+  }
+
+  const refreshDuration = () => {
+    const d = getFiniteDuration()
+    if (d > 0) setDur(d)
+  }
+
+  const formatSeconds = (s: number) => {
+    if (!Number.isFinite(s)) return '0:00'
+    const m = Math.floor(s / 60)
+    const sec = Math.floor(s % 60)
+      .toString()
+      .padStart(2, '0')
+    return `${m}:${sec}`
+  }
+
+  const toggle = async () => {
+    if (!ready()) return
+
+    if (playing()) {
+      audioEl.pause()
+      return
+    }
+
+    await audioEl.play()
+  }
+
+  const seek = (val: number) => {
+    if (!ready()) return
+    const d = dur() || 0
+    const clamped = Math.max(0, Math.min(d, val))
+    audioEl.currentTime = clamped
+    setT(clamped)
+  }
+
+  onMount(() => {
+    const onLoaded = () => {
+      refreshDuration()
+      setReady(true)
+    }
+    const onDuration = () => refreshDuration()
+    const onTime = () => {
+      setT(audioEl.currentTime || 0)
+      refreshDuration()
+    }
+    const onPlay = () => setPlaying(true)
+    const onPause = () => setPlaying(false)
+    const onRate = () => setRate(audioEl.playbackRate || 1)
+    const onKey = (e: KeyboardEvent) => {
+      if (!props.withShortcuts) return
+
+      if (e.code === 'Space') {
+        e.preventDefault()
+        toggle()
+      }
+      if (e.code === 'ArrowRight') {
+        e.preventDefault()
+        seek(t() + 5)
+      }
+      if (e.code === 'ArrowLeft') {
+        e.preventDefault()
+        seek(t() - 5)
+      }
+    }
+
+    audioEl.addEventListener('loadedmetadata', onLoaded)
+    audioEl.addEventListener('durationchange', onDuration)
+    audioEl.addEventListener('loadeddata', onDuration)
+    audioEl.addEventListener('canplay', onDuration)
+    audioEl.addEventListener('timeupdate', onTime)
+    audioEl.addEventListener('play', onPlay)
+    audioEl.addEventListener('pause', onPause)
+    audioEl.addEventListener('ratechange', onRate)
+    window.addEventListener('keydown', onKey)
+
+    onCleanup(() => {
+      audioEl.removeEventListener('loadedmetadata', onLoaded)
+      audioEl.removeEventListener('durationchange', onDuration)
+      audioEl.removeEventListener('loadeddata', onDuration)
+      audioEl.removeEventListener('canplay', onDuration)
+      audioEl.removeEventListener('timeupdate', onTime)
+      audioEl.removeEventListener('play', onPlay)
+      audioEl.removeEventListener('pause', onPause)
+      audioEl.removeEventListener('ratechange', onRate)
+      window.removeEventListener('keydown', onKey)
+    })
+  })
+
+  const safeDur = () => dur() || 0
+  const remaining = () => Math.max(safeDur() - t(), 0)
+
+  return (
+    <div class="w-full">
+      <audio
+        ref={audioEl!}
+        src={props.src}
+        preload={'metadata'}
+        class="hidden"
+      />
+
+      <div class="flex items-center gap-3">
+        <Show when={props.minimal}>
+          <IconButton
+            icon={playing() ? 'fa-solid fa-pause' : 'fa-solid fa-play'}
+            color={props.color ?? 'primary'}
+            variant="ghost"
+            onClick={toggle}
+            disabled={!ready()}
+            class="w-8"
+          />
+        </Show>
+
+        <div class="flex flex-col w-full">
+          <input
+            type="range"
+            min="0"
+            max={safeDur()}
+            step="0.01"
+            value={t()}
+            onInput={(e) =>
+              seek(Number((e.currentTarget as HTMLInputElement).value))
+            }
+            class={clsx(
+              'range',
+              rangeColorMap[props.color ?? 'primary'],
+              'mt-1 w-full [--range-thumb-size:12px]'
+            )}
+          />
+
+          <div class="flex justify-between text-xs opacity-70 mt-1">
+            <span>{formatSeconds(t())}</span>
+            <span>-{formatSeconds(remaining())}</span>
+          </div>
+        </div>
+
+        <Show when={props.minimal && props.showRate}>
+          <div class="text-xs opacity-70">
+            <RateDropdown
+              rate={rate()}
+              setRate={(r) => {
+                audioEl.playbackRate = r
+                setRate(r)
+              }}
+            />
+          </div>
+        </Show>
+      </div>
+
+      <Show when={!props.minimal}>
+        <div class="relative flex items-center justify-center gap-8 mt-4">
+          <IconButton
+            icon="fa-solid fa-arrow-rotate-left"
+            size="lg"
+            onClick={() => seek(t() - 10)}
+          />
+
+          <IconButton
+            icon={playing() ? 'fa-solid fa-pause' : 'fa-solid fa-play'}
+            color={props.color ?? 'primary'}
+            variant="circle"
+            onClick={toggle}
+            disabled={!ready()}
+            size="lg"
+          />
+
+          <IconButton
+            icon="fa-solid fa-arrow-rotate-right"
+            size="lg"
+            onClick={() => seek(t() + 10)}
+          />
+
+          <Show when={props.showRate}>
+            <div class="absolute right-0 text-xs opacity-70">
+              <RateDropdown
+                rate={rate()}
+                setRate={(r) => {
+                  audioEl.playbackRate = r
+                  setRate(r)
+                }}
+              />
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+function RateDropdown(props: {
+  rate: number
+  setRate: (r: number) => void
+}): JSXElement {
+  return (
+    <div class="dropdown dropdown-end">
+      <div tabindex={0} role="button" class="btn btn-ghost btn-xs">
+        {props.rate}×
+      </div>
+      <ul
+        tabindex={0}
+        class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-20 text-xs"
+      >
+        <For each={[0.5, 0.75, 1, 1.25, 1.5, 2]}>
+          {(r) => (
+            <li>
+              <a onClick={() => props.setRate(r)}>x{r}</a>
+            </li>
+          )}
+        </For>
+      </ul>
+    </div>
+  )
+}
diff --git a/ui/src/components/media/VideoPlayer.tsx b/ui/src/components/media/VideoPlayer.tsx
new file mode 100644
index 0000000..f961d99
--- /dev/null
+++ b/ui/src/components/media/VideoPlayer.tsx
@@ -0,0 +1,409 @@
+import { JSXElement, createSignal, onMount, onCleanup } from 'solid-js'
+import { clsx } from 'clsx'
+import Hls from 'hls.js'
+import { IconButton } from '../../components/Button'
+import { DaisyUIColor } from '../../types'
+import { rangeColorMap } from '../../classes'
+
+type VideoPlayerProps = {
+  src: string
+  color?: DaisyUIColor
+  poster?: string
+  showControls?: boolean
+  withShortcuts?: boolean
+}
+
+export function VideoPlayer(props: VideoPlayerProps): JSXElement {
+  let videoEl!: HTMLVideoElement
+  let containerRef!: HTMLDivElement
+
+  const [ready, setReady] = createSignal(false)
+  const [playing, setPlaying] = createSignal(false)
+  const [dur, setDur] = createSignal(0)
+  const [t, setT] = createSignal(0)
+  const [volume, setVolume] = createSignal(1)
+  const [muted, setMuted] = createSignal(false)
+  const [fullscreen, setFullscreen] = createSignal(false)
+  const [showControls, setShowControls] = createSignal(true)
+  const [buffered, setBuffered] = createSignal(0)
+
+  let hideControlsTimeout: number | null = null
+
+  const getFiniteDuration = () => {
+    const d = videoEl?.duration
+    if (Number.isFinite(d) && d! > 0) return d!
+
+    const s = videoEl?.seekable
+    if (s && s.length > 0) {
+      return s.end(s.length - 1)
+    }
+
+    return 0
+  }
+
+  const refreshDuration = () => {
+    const d = getFiniteDuration()
+    if (d > 0) setDur(d)
+  }
+
+  const updateBuffered = () => {
+    if (!videoEl) return
+    const buf = videoEl.buffered
+    if (buf.length > 0) {
+      const end = buf.end(buf.length - 1)
+      setBuffered(end)
+    }
+  }
+
+  const formatSeconds = (s: number) => {
+    if (!Number.isFinite(s)) return '0:00'
+    const h = Math.floor(s / 3600)
+    const m = Math.floor((s % 3600) / 60)
+    const sec = Math.floor(s % 60)
+      .toString()
+      .padStart(2, '0')
+
+    if (h > 0) {
+      return `${h}:${m.toString().padStart(2, '0')}:${sec}`
+    }
+    return `${m}:${sec}`
+  }
+
+  const toggle = async () => {
+    if (!ready()) return
+
+    if (playing()) {
+      videoEl.pause()
+      return
+    }
+
+    await videoEl.play()
+  }
+
+  const seek = (val: number) => {
+    if (!ready()) return
+    const d = dur() || 0
+    const clamped = Math.max(0, Math.min(d, val))
+    videoEl.currentTime = clamped
+    setT(clamped)
+  }
+
+  const toggleMute = () => {
+    if (!videoEl) return
+    videoEl.muted = !videoEl.muted
+    setMuted(videoEl.muted)
+  }
+
+  const changeVolume = (val: number) => {
+    if (!videoEl) return
+    const clamped = Math.max(0, Math.min(1, val))
+    videoEl.volume = clamped
+    setVolume(clamped)
+    if (clamped > 0 && muted()) {
+      videoEl.muted = false
+      setMuted(false)
+    }
+  }
+
+  const toggleFullscreen = async () => {
+    if (!containerRef) return
+
+    if (!document.fullscreenElement) {
+      await containerRef.requestFullscreen()
+      setFullscreen(true)
+    } else {
+      await document.exitFullscreen()
+      setFullscreen(false)
+    }
+  }
+
+  const scheduleHideControls = () => {
+    if (hideControlsTimeout) {
+      clearTimeout(hideControlsTimeout)
+    }
+    setShowControls(true)
+    if (playing()) {
+      hideControlsTimeout = window.setTimeout(() => {
+        setShowControls(false)
+      }, 1500)
+    }
+  }
+
+  onMount(() => {
+    // Initialize HLS if supported
+    if (Hls.isSupported() && props.src.endsWith('.m3u8')) {
+      const hls = new Hls({
+        enableWorker: true,
+        lowLatencyMode: false,
+        xhrSetup: (xhr, url) => {
+          // Intercept segment requests and route through auth endpoint
+          if (url.includes('/stream/') && url.includes('.ts')) {
+            // Extract the segment filename from the URL
+            const match = url.match(/\/stream\/([^?]+)/)
+            if (match) {
+              const segmentPath = decodeURIComponent(match[1])
+              // Extract content_id from the playlist URL (props.src)
+              const contentIdMatch = props.src.match(/\/content\/(\d+)\/stream/)
+              if (contentIdMatch) {
+                const contentId = contentIdMatch[1]
+                // Rebuild URL to go through auth endpoint
+                xhr.open(
+                  'GET',
+                  `/api/content/${contentId}/stream?path=${encodeURIComponent(segmentPath)}`,
+                  true
+                )
+                return
+              }
+            }
+          }
+        },
+      })
+
+      hls.loadSource(props.src)
+      hls.attachMedia(videoEl)
+
+      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        refreshDuration()
+        setReady(true)
+      })
+
+      hls.on(Hls.Events.ERROR, (event, data) => {
+        if (data.fatal) {
+          console.error('Fatal HLS error:', data)
+        }
+      })
+
+      onCleanup(() => {
+        hls.destroy()
+      })
+    } else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
+      // Native HLS support (Safari)
+      videoEl.src = props.src
+    }
+
+    const onLoaded = () => {
+      refreshDuration()
+      setReady(true)
+    }
+    const onDuration = () => refreshDuration()
+    const onTime = () => {
+      setT(videoEl.currentTime || 0)
+      refreshDuration()
+      updateBuffered()
+    }
+    const onPlay = () => {
+      setPlaying(true)
+      scheduleHideControls()
+    }
+    const onPause = () => {
+      setPlaying(false)
+      setShowControls(true)
+      if (hideControlsTimeout) {
+        clearTimeout(hideControlsTimeout)
+      }
+    }
+    const onVolumeChange = () => {
+      setVolume(videoEl.volume)
+      setMuted(videoEl.muted)
+    }
+    const onProgress = () => updateBuffered()
+
+    const onFullscreenChange = () => {
+      setFullscreen(!!document.fullscreenElement)
+    }
+
+    const onKey = (e: KeyboardEvent) => {
+      if (!props.withShortcuts) return
+
+      if (
+        e.target instanceof HTMLInputElement ||
+        e.target instanceof HTMLTextAreaElement
+      ) {
+        return
+      }
+
+      if (e.code === 'Space') {
+        e.preventDefault()
+        toggle()
+      }
+      if (e.code === 'ArrowRight') {
+        e.preventDefault()
+        seek(t() + 5)
+      }
+      if (e.code === 'ArrowLeft') {
+        e.preventDefault()
+        seek(t() - 5)
+      }
+      if (e.code === 'KeyF') {
+        e.preventDefault()
+        toggleFullscreen()
+      }
+      if (e.code === 'KeyM') {
+        e.preventDefault()
+        toggleMute()
+      }
+      if (e.code === 'ArrowUp') {
+        e.preventDefault()
+        changeVolume(volume() + 0.1)
+      }
+      if (e.code === 'ArrowDown') {
+        e.preventDefault()
+        changeVolume(volume() - 0.1)
+      }
+    }
+
+    const onMouseMove = () => {
+      scheduleHideControls()
+    }
+
+    videoEl.addEventListener('loadedmetadata', onLoaded)
+    videoEl.addEventListener('durationchange', onDuration)
+    videoEl.addEventListener('loadeddata', onDuration)
+    videoEl.addEventListener('canplay', onDuration)
+    videoEl.addEventListener('timeupdate', onTime)
+    videoEl.addEventListener('play', onPlay)
+    videoEl.addEventListener('pause', onPause)
+    videoEl.addEventListener('volumechange', onVolumeChange)
+    videoEl.addEventListener('progress', onProgress)
+    document.addEventListener('fullscreenchange', onFullscreenChange)
+    window.addEventListener('keydown', onKey)
+    containerRef.addEventListener('mousemove', onMouseMove)
+
+    onCleanup(() => {
+      if (hideControlsTimeout) {
+        clearTimeout(hideControlsTimeout)
+      }
+      videoEl.removeEventListener('loadedmetadata', onLoaded)
+      videoEl.removeEventListener('durationchange', onDuration)
+      videoEl.removeEventListener('loadeddata', onDuration)
+      videoEl.removeEventListener('canplay', onDuration)
+      videoEl.removeEventListener('timeupdate', onTime)
+      videoEl.removeEventListener('play', onPlay)
+      videoEl.removeEventListener('pause', onPause)
+      videoEl.removeEventListener('volumechange', onVolumeChange)
+      videoEl.removeEventListener('progress', onProgress)
+      document.removeEventListener('fullscreenchange', onFullscreenChange)
+      window.removeEventListener('keydown', onKey)
+      containerRef.removeEventListener('mousemove', onMouseMove)
+    })
+  })
+
+  const safeDur = () => dur() || 0
+  const bufferPercentage = () => {
+    const d = safeDur()
+    return d > 0 ? (buffered() / d) * 100 : 0
+  }
+
+  const getVolumeIcon = () => {
+    if (muted() || volume() === 0) return 'fa-solid fa-volume-xmark'
+    if (volume() < 0.5) return 'fa-solid fa-volume-low'
+    return 'fa-solid fa-volume-high'
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      class={clsx(
+        'relative w-full bg-black rounded-lg overflow-hidden',
+        fullscreen() ? 'h-screen' : 'aspect-video'
+      )}
+    >
+      <video
+        ref={videoEl}
+        poster={props.poster}
+        preload="metadata"
+        class="w-full h-full cursor-pointer"
+        onClick={toggle}
+      />
+
+      <div class="absolute inset-0 cursor-pointer" onClick={toggle} />
+
+      <div
+        class={clsx(
+          'absolute inset-0 bg-gradient-to-t from-black/70 to-transparent',
+          'transition-opacity duration-300 flex flex-col justify-end p-4 pointer-events-none',
+          showControls() || !playing() ? 'opacity-100' : 'opacity-0'
+        )}
+      >
+        {/* Progress Bar */}
+        <div class="relative mb-3 pointer-events-auto">
+          {/* Buffered Progress */}
+          <div class="absolute inset-5 h-1 bg-white/20 rounded-full">
+            <div
+              class="h-full bg-white/40 rounded-full transition-all"
+              style={{ width: `${bufferPercentage()}%` }}
+            />
+          </div>
+
+          {/* Seekable Progress */}
+          <input
+            type="range"
+            min="0"
+            max={safeDur()}
+            step="0.01"
+            value={t()}
+            onInput={(e) => seek(Number(e.currentTarget.value))}
+            class={clsx(
+              'range w-full relative z-10 cursor-pointer inset-2',
+              rangeColorMap[props.color ?? 'primary'],
+              '[--range-thumb-size:10px]'
+            )}
+          />
+        </div>
+
+        {/* Controls Bar */}
+        <div class="flex items-center gap-3 text-white pointer-events-auto">
+          {/* Play/Pause */}
+          <IconButton
+            icon={playing() ? 'fa-solid fa-pause' : 'fa-solid fa-play'}
+            variant="ghost"
+            onClick={toggle}
+            disabled={!ready()}
+            class="text-white hover:text-white w-8"
+          />
+
+          {/* Time Display */}
+          <div class="text-sm font-medium">
+            <span>{formatSeconds(t())}</span>
+            <span class="opacity-60"> / {formatSeconds(safeDur())}</span>
+          </div>
+
+          <div class="flex-1" />
+
+          {/* Volume Control */}
+          <div class="flex items-center gap-2 group">
+            <IconButton
+              icon={getVolumeIcon()}
+              variant="ghost"
+              onClick={toggleMute}
+              class="text-white hover:text-white"
+            />
+            <div class="w-0 group-hover:w-20 overflow-hidden transition-all duration-200">
+              <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.01"
+                value={muted() ? 0 : volume()}
+                onInput={(e) => changeVolume(Number(e.currentTarget.value))}
+                class={clsx(
+                  'range w-20',
+                  rangeColorMap[props.color ?? 'primary'],
+                  '[--range-thumb-size:8px]'
+                )}
+              />
+            </div>
+          </div>
+
+          {/* Fullscreen */}
+          <IconButton
+            icon={fullscreen() ? 'fa-solid fa-compress' : 'fa-solid fa-expand'}
+            variant="ghost"
+            onClick={toggleFullscreen}
+            class="text-white hover:text-white"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/ui/src/types.ts b/ui/src/types.ts
new file mode 100644
index 0000000..298f433
--- /dev/null
+++ b/ui/src/types.ts
@@ -0,0 +1,11 @@
+export type DaisyUISize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export type DaisyUIColor =
+  | 'primary'
+  | 'secondary'
+  | 'neutral'
+  | 'accent'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'