oddysee-react 0.1.0 → 0.2.0-canary.0

package/package.json

@@ -4,11 +4,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.0",
+  "version": "0.2.0-canary.0",
   "type": "module",
   "author": "Karelle Hofler",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/itskarelleh/oddysee-hls-audio-player.git"
+  },
+  "license": "MIT",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -19,12 +24,13 @@
     "build": "tsup src/index.ts --format esm,cjs --dts --tsconfig tsconfig.lib.json",
     "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
     "lint": "eslint .",
+    "test": "vitest",
     "preview": "vite preview",
     "pub": "npm run build && npm publish",
     "pub:test": "npm run build && npm publish --tag test"
   },
   "dependencies": {
-    "@hls-audio-player/core": "^0.1.0",
+    "oddysee-typescript": "^0.2.0-canary.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -41,6 +47,7 @@
     "tsup": "7.2.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4"
+    "vite": "^7.2.4",
+    "vitest": "^4.0.16"
   }
 }

package/src/use-hls-audio-player.ts

@@ -1,4 +1,14 @@
-import { useEffect, useMemo, useState } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type PointerEvent,
+  type MouseEvent,
+  type TouchEvent,
+} from 'react'
 import {
   HLSAudioPlayer,
   type HLSAudioPlayerInterface,
@@ -9,7 +19,8 @@ import {
   type Track,
   type QualityLevel,
   type PlayerState
-} from '@hls-audio-player/core'
+} 
+from 'oddysee-typescript'
 
 // Local mirror of the core's PlayerEventMap so we don't depend on it being exported
 export type PlayerEventMap = {
@@ -43,6 +54,27 @@ export interface UseHlsAudioPlayerResult {
   loading: boolean
   error: PlayerError | null
   readyState: number
+  scrub: {
+    isScrubbing: boolean
+    displayTime: number
+    begin: () => void
+    update: (time: number) => void
+    commit: (time?: number) => void
+  }
+  seekBar: {
+    isScrubbing: boolean
+    displayTime: number
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void
+    onPointerDown: () => void
+    onPointerUp: (event: PointerEvent<HTMLInputElement>) => void
+    onPointerCancel: () => void
+    onMouseDown: () => void
+    onMouseUp: (event: MouseEvent<HTMLInputElement>) => void
+    onTouchStart: () => void
+    onTouchEnd: (event: TouchEvent<HTMLInputElement>) => void
+    onFocus: () => void
+    onBlur: () => void
+  }
   controls: {
     setSource: (
       url: string,
@@ -53,6 +85,10 @@ export interface UseHlsAudioPlayerResult {
     pause: () => void
     setVolume: (volume: number) => void
     setCurrentTime: (time: number) => void
+    beginSeek: () => void
+    updateSeek: (time: number) => void
+    commitSeek: () => void
+    retry: (count?: number, interval?: number) => void
   }
 }
 
@@ -87,6 +123,9 @@ export function useHlsAudioPlayer(
   const [isPlaying, setIsPlaying] = useState<boolean>(player.isPlaying ?? false)
   const [duration, setDuration] = useState<number>(player.getState()?.duration ?? 0)
   const [isLoading, setIsLoading] = useState<boolean>(player.loading ?? false)
+  const [isScrubbing, setIsScrubbing] = useState(false)
+  const [scrubTime, setScrubTime] = useState(0)
+  const scrubTimeRef = useRef(0)
 
   useEffect(() => {
     const handleStateChange = () => {
@@ -223,10 +262,56 @@ export function useHlsAudioPlayer(
         const audioElement = player.getAudioElement()
         audioElement.currentTime = time
       },
+      beginSeek:() =>
+        player.beginSeek(),
+      updateSeek: (time: number) =>
+        player.updateSeek(time),
+      commitSeek: () =>
+        player.commitSeek(),
+      retry: (count?: number, interval?: number) => {
+        player.retry(count, interval)
+      },
     }),
     [player, autoPlay],
   )
 
+  const beginScrub = useCallback(() => {
+    if (!state.duration) return
+    setIsScrubbing(true)
+    scrubTimeRef.current = state.currentTime
+    setScrubTime(state.currentTime)
+    player.beginSeek()
+  }, [player, state.currentTime, state.duration])
+
+  const updateScrub = useCallback((time: number) => {
+    scrubTimeRef.current = time
+    setScrubTime(time)
+  }, [])
+
+  const commitScrub = useCallback(
+    (time?: number) => {
+      if (!isScrubbing) return
+      if (typeof time === 'number' && !Number.isNaN(time)) {
+        scrubTimeRef.current = time
+        setScrubTime(time)
+      }
+      setIsScrubbing(false)
+      player.updateSeek(scrubTimeRef.current)
+      player.commitSeek()
+    },
+    [player, isScrubbing],
+  )
+
+  const commitScrubFromElement = useCallback(
+    (element: HTMLInputElement) => {
+      requestAnimationFrame(() => {
+        const nextTime = Number(element.value)
+        commitScrub(nextTime)
+      })
+    },
+    [commitScrub],
+  )
+
   return {
     player,
     state,
@@ -236,6 +321,59 @@ export function useHlsAudioPlayer(
     loading,
     error,
     readyState,
-    controls,
+    seekBar: {
+      isScrubbing,
+      displayTime: isScrubbing ? scrubTime : state.currentTime,
+      onChange: (event: ChangeEvent<HTMLInputElement>) => {
+        const nextTime = Number(event.target.value)
+        if (!isScrubbing) {
+          beginScrub()
+        }
+        updateScrub(nextTime)
+      },
+      onPointerDown: () => {
+        if (!isScrubbing) {
+          beginScrub()
+        }
+      },
+      onPointerUp: (event: PointerEvent<HTMLInputElement>) => {
+        commitScrubFromElement(event.currentTarget)
+      },
+      onPointerCancel: () => {
+        commitScrub()
+      },
+      onMouseDown: () => {
+        if (!isScrubbing) {
+          beginScrub()
+        }
+      },
+      onMouseUp: (event: MouseEvent<HTMLInputElement>) => {
+        commitScrubFromElement(event.currentTarget)
+      },
+      onTouchStart: () => {
+        if (!isScrubbing) {
+          beginScrub()
+        }
+      },
+      onTouchEnd: (event: TouchEvent<HTMLInputElement>) => {
+        commitScrubFromElement(event.currentTarget)
+      },
+      onFocus: () => {
+        if (!isScrubbing) {
+          beginScrub()
+        }
+      },
+      onBlur: () => {
+        commitScrub()
+      },
+    },
+    scrub: {
+      isScrubbing,
+      displayTime: isScrubbing ? scrubTime : state.currentTime,
+      begin: beginScrub,
+      update: updateScrub,
+      commit: commitScrub,
+    },
+    controls
   }
 }

package/dist/assets/index-COcDBgFa.css

@@ -1 +0,0 @@
-:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}