oddysee-react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,199 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  useHlsAudioPlayer: () => useHlsAudioPlayer
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/use-hls-audio-player.ts
+var import_react = require("react");
+var import_core = require("@hls-audio-player/core");
+var defaultState = {
+  track: null,
+  currentTime: 0,
+  duration: null,
+  volume: 1,
+  loading: false,
+  error: null,
+  readyState: 0,
+  isPlaying: false
+};
+function useHlsAudioPlayer(options = {}) {
+  const { config, src, autoPlay, on } = options;
+  const player = (0, import_react.useMemo)(() => {
+    return new import_core.HLSAudioPlayer(config);
+  }, []);
+  const [state, setState] = (0, import_react.useState)(
+    () => player.getState() ?? defaultState
+  );
+  const [loading, setLoading] = (0, import_react.useState)(player.loading ?? false);
+  const [error, setError] = (0, import_react.useState)(player.error ?? null);
+  const [readyState, setReadyState] = (0, import_react.useState)(player.readyState ?? 0);
+  const [isPlaying, setIsPlaying] = (0, import_react.useState)(player.isPlaying ?? false);
+  const [duration, setDuration] = (0, import_react.useState)(player.getState()?.duration ?? 0);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(player.loading ?? false);
+  (0, import_react.useEffect)(() => {
+    const handleStateChange = () => {
+      const next = player.getState();
+      setState(next);
+      setLoading(next.loading);
+      setError(next.error);
+      setReadyState(next.readyState);
+      setIsPlaying(next.isPlaying);
+      setDuration(next.duration ?? 0);
+      setIsLoading(next.loading);
+    };
+    const listeners = {
+      play: (data) => {
+        handleStateChange();
+        on?.play?.(data);
+      },
+      pause: (data) => {
+        handleStateChange();
+        on?.pause?.(data);
+      },
+      "track-end": (data) => {
+        handleStateChange();
+        on?.["track-end"]?.(data);
+      },
+      error: (data) => {
+        handleStateChange();
+        on?.error?.(data);
+      },
+      "quality-change": (data) => {
+        handleStateChange();
+        on?.["quality-change"]?.(data);
+      },
+      "playlist-ready": (data) => {
+        handleStateChange();
+        on?.["playlist-ready"]?.(data);
+      },
+      loadedmetadata: (data) => {
+        handleStateChange();
+        on?.loadedmetadata?.(data);
+      },
+      timeupdate: (data) => {
+        handleStateChange();
+        on?.timeupdate?.(data);
+      },
+      loading: (data) => {
+        handleStateChange();
+        on?.loading?.(data);
+      },
+      canplay: (data) => {
+        handleStateChange();
+        on?.canplay?.(data);
+      }
+    };
+    Object.keys(listeners).forEach((event) => {
+      const handler = listeners[event];
+      player.on(event, handler);
+    });
+    return () => {
+      ;
+      Object.keys(listeners).forEach((event) => {
+        const handler = listeners[event];
+        if (handler) {
+          player.off(event, handler);
+        }
+      });
+    };
+  }, [player, on]);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    if (!src)
+      return;
+    player.setSource(src.url, src.options).then((p) => {
+      if (cancelled)
+        return;
+      if (autoPlay) {
+        p.play();
+      }
+    }).catch((err) => {
+      if (cancelled)
+        return;
+      console.error("Failed to set HLS source", err);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [player, src?.url, src?.options, autoPlay]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      player.destroy();
+    };
+  }, [player]);
+  const controls = (0, import_react.useMemo)(
+    () => ({
+      setSource: async (url, options2) => {
+        try {
+          const p = await player.setSource(url, options2);
+          if (autoPlay) {
+            p.play();
+          }
+          return p;
+        } catch {
+          return null;
+        }
+      },
+      play: () => {
+        player.play();
+      },
+      playAsync: async () => {
+        try {
+          const p = await player.playAsync();
+          return p;
+        } catch {
+          return null;
+        }
+      },
+      pause: () => {
+        player.pause();
+      },
+      setVolume: (volume) => {
+        player.setVolume(volume);
+        const next = player.getState();
+        setState(next);
+      },
+      setCurrentTime: (time) => {
+        const audioElement = player.getAudioElement();
+        audioElement.currentTime = time;
+      }
+    }),
+    [player, autoPlay]
+  );
+  return {
+    player,
+    state,
+    isPlaying,
+    duration,
+    isLoading,
+    loading,
+    error,
+    readyState,
+    controls
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useHlsAudioPlayer
+});

package/dist/index.d.cts

@@ -0,0 +1,49 @@
+import { Track, PlayerError, QualityLevel, PlayerConfig, SourceOptions, PlayerEvent, HLSAudioPlayerInterface, PlayerState } from '@hls-audio-player/core';
+
+type PlayerEventMap = {
+    play: void;
+    pause: void;
+    'track-end': Track | null;
+    error: PlayerError;
+    'quality-change': QualityLevel;
+    'playlist-ready': void;
+    loadedmetadata: Track | null;
+    timeupdate: {
+        currentTime: number;
+        duration: number | null;
+    };
+    loading: void;
+    canplay: void;
+};
+interface UseHlsAudioPlayerOptions {
+    config?: PlayerConfig;
+    src?: {
+        url: string;
+        options?: SourceOptions;
+    };
+    autoPlay?: boolean;
+    on?: Partial<{
+        [K in PlayerEvent]: (data: PlayerEventMap[K]) => void;
+    }>;
+}
+interface UseHlsAudioPlayerResult {
+    player: HLSAudioPlayerInterface | null;
+    state: PlayerState;
+    isPlaying: boolean;
+    duration: number;
+    isLoading: boolean;
+    loading: boolean;
+    error: PlayerError | null;
+    readyState: number;
+    controls: {
+        setSource: (url: string, options?: SourceOptions) => Promise<HLSAudioPlayerInterface | null>;
+        play: () => void;
+        playAsync: () => Promise<HLSAudioPlayerInterface | null>;
+        pause: () => void;
+        setVolume: (volume: number) => void;
+        setCurrentTime: (time: number) => void;
+    };
+}
+declare function useHlsAudioPlayer(options?: UseHlsAudioPlayerOptions): UseHlsAudioPlayerResult;
+
+export { PlayerEventMap, UseHlsAudioPlayerOptions, UseHlsAudioPlayerResult, useHlsAudioPlayer };

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+import { Track, PlayerError, QualityLevel, PlayerConfig, SourceOptions, PlayerEvent, HLSAudioPlayerInterface, PlayerState } from '@hls-audio-player/core';
+
+type PlayerEventMap = {
+    play: void;
+    pause: void;
+    'track-end': Track | null;
+    error: PlayerError;
+    'quality-change': QualityLevel;
+    'playlist-ready': void;
+    loadedmetadata: Track | null;
+    timeupdate: {
+        currentTime: number;
+        duration: number | null;
+    };
+    loading: void;
+    canplay: void;
+};
+interface UseHlsAudioPlayerOptions {
+    config?: PlayerConfig;
+    src?: {
+        url: string;
+        options?: SourceOptions;
+    };
+    autoPlay?: boolean;
+    on?: Partial<{
+        [K in PlayerEvent]: (data: PlayerEventMap[K]) => void;
+    }>;
+}
+interface UseHlsAudioPlayerResult {
+    player: HLSAudioPlayerInterface | null;
+    state: PlayerState;
+    isPlaying: boolean;
+    duration: number;
+    isLoading: boolean;
+    loading: boolean;
+    error: PlayerError | null;
+    readyState: number;
+    controls: {
+        setSource: (url: string, options?: SourceOptions) => Promise<HLSAudioPlayerInterface | null>;
+        play: () => void;
+        playAsync: () => Promise<HLSAudioPlayerInterface | null>;
+        pause: () => void;
+        setVolume: (volume: number) => void;
+        setCurrentTime: (time: number) => void;
+    };
+}
+declare function useHlsAudioPlayer(options?: UseHlsAudioPlayerOptions): UseHlsAudioPlayerResult;
+
+export { PlayerEventMap, UseHlsAudioPlayerOptions, UseHlsAudioPlayerResult, useHlsAudioPlayer };

package/dist/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>react</title>
+    <script type="module" crossorigin src="/assets/index-DzSVBDbV.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-COcDBgFa.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/dist/index.js

@@ -0,0 +1,174 @@
+// src/use-hls-audio-player.ts
+import { useEffect, useMemo, useState } from "react";
+import {
+  HLSAudioPlayer
+} from "@hls-audio-player/core";
+var defaultState = {
+  track: null,
+  currentTime: 0,
+  duration: null,
+  volume: 1,
+  loading: false,
+  error: null,
+  readyState: 0,
+  isPlaying: false
+};
+function useHlsAudioPlayer(options = {}) {
+  const { config, src, autoPlay, on } = options;
+  const player = useMemo(() => {
+    return new HLSAudioPlayer(config);
+  }, []);
+  const [state, setState] = useState(
+    () => player.getState() ?? defaultState
+  );
+  const [loading, setLoading] = useState(player.loading ?? false);
+  const [error, setError] = useState(player.error ?? null);
+  const [readyState, setReadyState] = useState(player.readyState ?? 0);
+  const [isPlaying, setIsPlaying] = useState(player.isPlaying ?? false);
+  const [duration, setDuration] = useState(player.getState()?.duration ?? 0);
+  const [isLoading, setIsLoading] = useState(player.loading ?? false);
+  useEffect(() => {
+    const handleStateChange = () => {
+      const next = player.getState();
+      setState(next);
+      setLoading(next.loading);
+      setError(next.error);
+      setReadyState(next.readyState);
+      setIsPlaying(next.isPlaying);
+      setDuration(next.duration ?? 0);
+      setIsLoading(next.loading);
+    };
+    const listeners = {
+      play: (data) => {
+        handleStateChange();
+        on?.play?.(data);
+      },
+      pause: (data) => {
+        handleStateChange();
+        on?.pause?.(data);
+      },
+      "track-end": (data) => {
+        handleStateChange();
+        on?.["track-end"]?.(data);
+      },
+      error: (data) => {
+        handleStateChange();
+        on?.error?.(data);
+      },
+      "quality-change": (data) => {
+        handleStateChange();
+        on?.["quality-change"]?.(data);
+      },
+      "playlist-ready": (data) => {
+        handleStateChange();
+        on?.["playlist-ready"]?.(data);
+      },
+      loadedmetadata: (data) => {
+        handleStateChange();
+        on?.loadedmetadata?.(data);
+      },
+      timeupdate: (data) => {
+        handleStateChange();
+        on?.timeupdate?.(data);
+      },
+      loading: (data) => {
+        handleStateChange();
+        on?.loading?.(data);
+      },
+      canplay: (data) => {
+        handleStateChange();
+        on?.canplay?.(data);
+      }
+    };
+    Object.keys(listeners).forEach((event) => {
+      const handler = listeners[event];
+      player.on(event, handler);
+    });
+    return () => {
+      ;
+      Object.keys(listeners).forEach((event) => {
+        const handler = listeners[event];
+        if (handler) {
+          player.off(event, handler);
+        }
+      });
+    };
+  }, [player, on]);
+  useEffect(() => {
+    let cancelled = false;
+    if (!src)
+      return;
+    player.setSource(src.url, src.options).then((p) => {
+      if (cancelled)
+        return;
+      if (autoPlay) {
+        p.play();
+      }
+    }).catch((err) => {
+      if (cancelled)
+        return;
+      console.error("Failed to set HLS source", err);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [player, src?.url, src?.options, autoPlay]);
+  useEffect(() => {
+    return () => {
+      player.destroy();
+    };
+  }, [player]);
+  const controls = useMemo(
+    () => ({
+      setSource: async (url, options2) => {
+        try {
+          const p = await player.setSource(url, options2);
+          if (autoPlay) {
+            p.play();
+          }
+          return p;
+        } catch {
+          return null;
+        }
+      },
+      play: () => {
+        player.play();
+      },
+      playAsync: async () => {
+        try {
+          const p = await player.playAsync();
+          return p;
+        } catch {
+          return null;
+        }
+      },
+      pause: () => {
+        player.pause();
+      },
+      setVolume: (volume) => {
+        player.setVolume(volume);
+        const next = player.getState();
+        setState(next);
+      },
+      setCurrentTime: (time) => {
+        const audioElement = player.getAudioElement();
+        audioElement.currentTime = time;
+      }
+    }),
+    [player, autoPlay]
+  );
+  return {
+    player,
+    state,
+    isPlaying,
+    duration,
+    isLoading,
+    loading,
+    error,
+    readyState,
+    controls
+  };
+}
+export {
+  useHlsAudioPlayer
+};

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "oddysee-react",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "type": "module",
+  "author": "Karelle Hofler",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "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 .",
+    "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",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "tsup": "7.2.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/index.ts

@@ -0,0 +1,2 @@
+export { useHlsAudioPlayer } from './use-hls-audio-player'
+export type { UseHlsAudioPlayerOptions, UseHlsAudioPlayerResult, PlayerEventMap } from './use-hls-audio-player'