origam 2.3.0 → 2.6.1

package/dist/src/composables/Media/use-media-player.composable.cjs

@@ -0,0 +1,286 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldSuppressAutoplay = shouldSuppressAutoplay;
+exports.useMediaPlayer = useMediaPlayer;
+var _vue = require("vue");
+var _media = require("../../consts/Media/media.const.cjs");
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function readBufferedEnd(media) {
+  if (!media.buffered || media.buffered.length === 0) return 0;
+  try {
+    return media.buffered.end(media.buffered.length - 1);
+  } catch {
+    return 0;
+  }
+}
+function useMediaPlayer(options = {}) {
+  const mediaRef = options.mediaRef ?? (0, _vue.ref)(null);
+  const playing = (0, _vue.ref)(false);
+  const paused = (0, _vue.ref)(true);
+  const currentTime = (0, _vue.ref)(0);
+  const duration = (0, _vue.ref)(NaN);
+  const buffered = (0, _vue.ref)(0);
+  const volume = (0, _vue.ref)(_media.MEDIA_DEFAULT_VOLUME);
+  const muted = (0, _vue.ref)(Boolean(options.muted));
+  const ready = (0, _vue.ref)(false);
+  const loading = (0, _vue.ref)(false);
+  const error = (0, _vue.ref)(null);
+  const playbackRate = (0, _vue.ref)(1);
+  const remoteAvailable = (0, _vue.ref)(false);
+  const remoteState = (0, _vue.ref)("disconnected");
+  const play = async () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    try {
+      await el.play();
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  };
+  const pause = () => {
+    mediaRef.value?.pause();
+  };
+  const toggle = async () => {
+    if (playing.value) pause();else await play();
+  };
+  const seek = seconds => {
+    const el = mediaRef.value;
+    if (!el) return;
+    const max = Number.isFinite(el.duration) ? el.duration : seconds;
+    el.currentTime = Math.max(0, Math.min(seconds, max));
+  };
+  const setVolume = value => {
+    const el = mediaRef.value;
+    if (!el) return;
+    const clamped = Math.max(0, Math.min(1, value));
+    el.volume = clamped;
+    if (clamped > 0 && el.muted) {
+      el.muted = false;
+    }
+  };
+  const toggleMute = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    el.muted = !el.muted;
+  };
+  const load = () => {
+    mediaRef.value?.load();
+  };
+  const skipBackward = seconds => {
+    const el = mediaRef.value;
+    if (!el) return;
+    seek(el.currentTime - seconds);
+  };
+  const skipForward = seconds => {
+    const el = mediaRef.value;
+    if (!el) return;
+    seek(el.currentTime + seconds);
+  };
+  const setPlaybackRate = rate => {
+    const el = mediaRef.value;
+    if (!el) return;
+    const clamped = Math.max(0.25, Math.min(4, rate));
+    el.playbackRate = clamped;
+    playbackRate.value = clamped;
+  };
+  const requestRemotePlayback = async () => {
+    const el = mediaRef.value;
+    if (!el?.remote?.prompt) return;
+    try {
+      await el.remote.prompt();
+    } catch (err) {
+      if (err instanceof Error && err.name !== "NotAllowedError" && err.name !== "NotFoundError") {
+        error.value = err;
+      }
+    }
+  };
+  const stopRemotePlayback = async () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    try {
+      el.pause();
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  };
+  const onPlay = () => {
+    playing.value = true;
+    paused.value = false;
+  };
+  const onPause = () => {
+    playing.value = false;
+    paused.value = true;
+  };
+  const onEnded = () => {
+    playing.value = false;
+    paused.value = true;
+  };
+  const onTimeUpdate = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    currentTime.value = el.currentTime;
+    buffered.value = readBufferedEnd(el);
+  };
+  const onProgress = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    buffered.value = readBufferedEnd(el);
+  };
+  const onVolumeChange = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    volume.value = el.volume;
+    muted.value = el.muted;
+  };
+  const onLoadedMetadata = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    duration.value = el.duration;
+    ready.value = true;
+    loading.value = false;
+  };
+  const onLoadStart = () => {
+    loading.value = true;
+    error.value = null;
+  };
+  const onCanPlay = () => {
+    loading.value = false;
+  };
+  const onWaiting = () => {
+    loading.value = true;
+  };
+  const onError = () => {
+    loading.value = false;
+    const el = mediaRef.value;
+    if (el?.error) error.value = el.error;else error.value = new Error("Unknown media error");
+  };
+  const onRateChange = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    playbackRate.value = el.playbackRate;
+  };
+  let _remoteAvailabilityCallbackId = null;
+  const onRemoteConnecting = () => {
+    remoteState.value = "connecting";
+  };
+  const onRemoteConnect = () => {
+    remoteState.value = "connected";
+  };
+  const onRemoteDisconnect = () => {
+    remoteState.value = "disconnected";
+  };
+  const bind = el => {
+    el.addEventListener("play", onPlay);
+    el.addEventListener("pause", onPause);
+    el.addEventListener("ended", onEnded);
+    el.addEventListener("timeupdate", onTimeUpdate);
+    el.addEventListener("progress", onProgress);
+    el.addEventListener("volumechange", onVolumeChange);
+    el.addEventListener("loadedmetadata", onLoadedMetadata);
+    el.addEventListener("loadstart", onLoadStart);
+    el.addEventListener("canplay", onCanPlay);
+    el.addEventListener("waiting", onWaiting);
+    el.addEventListener("error", onError);
+    el.addEventListener("ratechange", onRateChange);
+    const remote = el.remote;
+    if (remote) {
+      if (remote.state) remoteState.value = remote.state;
+      remote.addEventListener?.("connecting", onRemoteConnecting);
+      remote.addEventListener?.("connect", onRemoteConnect);
+      remote.addEventListener?.("disconnect", onRemoteDisconnect);
+      if (typeof remote.watchAvailability === "function") {
+        remote.watchAvailability(available => {
+          remoteAvailable.value = available;
+        }).then(id => {
+          _remoteAvailabilityCallbackId = id;
+        }).catch(() => {});
+      }
+    }
+    volume.value = el.volume;
+    muted.value = el.muted || Boolean(options.muted);
+    paused.value = el.paused;
+    playing.value = !el.paused;
+    if (Number.isFinite(el.duration)) {
+      duration.value = el.duration;
+      ready.value = true;
+    }
+    if (options.autoplay && prefersReducedMotion()) {
+      console.warn("[origam:media] `autoplay` requested but the user prefers reduced motion; autoplay was suppressed.");
+    }
+  };
+  const unbind = el => {
+    el.removeEventListener("play", onPlay);
+    el.removeEventListener("pause", onPause);
+    el.removeEventListener("ended", onEnded);
+    el.removeEventListener("timeupdate", onTimeUpdate);
+    el.removeEventListener("progress", onProgress);
+    el.removeEventListener("volumechange", onVolumeChange);
+    el.removeEventListener("loadedmetadata", onLoadedMetadata);
+    el.removeEventListener("loadstart", onLoadStart);
+    el.removeEventListener("canplay", onCanPlay);
+    el.removeEventListener("waiting", onWaiting);
+    el.removeEventListener("error", onError);
+    el.removeEventListener("ratechange", onRateChange);
+    const remote = el.remote;
+    if (remote) {
+      remote.removeEventListener?.("connecting", onRemoteConnecting);
+      remote.removeEventListener?.("connect", onRemoteConnect);
+      remote.removeEventListener?.("disconnect", onRemoteDisconnect);
+      if (_remoteAvailabilityCallbackId != null && typeof remote.cancelWatchAvailability === "function") {
+        remote.cancelWatchAvailability(_remoteAvailabilityCallbackId).catch(() => {});
+        _remoteAvailabilityCallbackId = null;
+      }
+    }
+  };
+  (0, _vue.onMounted)(() => {
+    const el = mediaRef.value;
+    if (el) bind(el);
+  });
+  (0, _vue.onBeforeUnmount)(() => {
+    const el = mediaRef.value;
+    if (el) unbind(el);
+  });
+  return {
+    mediaRef,
+    state: {
+      playing,
+      paused,
+      currentTime,
+      duration,
+      buffered,
+      volume,
+      muted,
+      ready,
+      loading,
+      error,
+      playbackRate,
+      remoteAvailable,
+      remoteState
+    },
+    methods: {
+      play,
+      pause,
+      toggle,
+      seek,
+      setVolume,
+      toggleMute,
+      load,
+      skipBackward,
+      skipForward,
+      setPlaybackRate,
+      requestRemotePlayback,
+      stopRemotePlayback
+    }
+  };
+}
+function shouldSuppressAutoplay() {
+  return prefersReducedMotion();
+}

package/dist/src/composables/Media/use-media-player.composable.d.ts

@@ -0,0 +1,43 @@
+import { type Ref } from 'vue';
+import type { IMediaPlayerMethods, IMediaPlayerState, IUseMediaPlayerOptions } from '../../interfaces';
+/**
+ * Headless media-player composable. Owns the media-shared runtime
+ * state (`playing`, `paused`, `currentTime`, `duration`, `buffered`,
+ * `volume`, `muted`, `playbackRate`, `ready`, `loading`, `error`,
+ * `remoteAvailable`, `remoteState`) and exposes imperative methods
+ * that wrap the standard `HTMLMediaElement` API.
+ *
+ * Works for BOTH `HTMLVideoElement` and `HTMLAudioElement` — the
+ * composable types its element ref against `HTMLMediaElement`, the
+ * common ancestor. `useVideoPlayer` and `useAudioPlayer` layer their
+ * own specialisations on top of this base.
+ *
+ * @example
+ * ```ts
+ * const audioRef = ref<HTMLAudioElement | null>(null)
+ * const { state, methods } = useMediaPlayer({ mediaRef: audioRef })
+ *
+ * // template:
+ * // <audio ref="audioRef" src="…" />
+ * ```
+ */
+export declare function useMediaPlayer(options?: IUseMediaPlayerOptions): {
+    mediaRef: Ref<HTMLMediaElement | null>;
+    state: IMediaPlayerState;
+    methods: IMediaPlayerMethods;
+};
+/**
+ * Reduced-motion check exported for the host components — kept here
+ * so the single source of truth for "should autoplay run?" stays in
+ * the composable, even when the decision is made by the SFC at
+ * attribute resolution time (i.e. before the composable's onMounted
+ * has fired).
+ */
+export declare function shouldSuppressAutoplay(): boolean;
+/**
+ * Default preload value re-exported so the host components can mirror
+ * it in `withDefaults()` without duplicating the literal string.
+ * Inline-literal-only constraint on `withDefaults` does not apply here
+ * because the SFC inlines the literal at the call-site and only uses
+ * this constant in JSDoc.
+ */

package/dist/src/composables/Media/use-media-player.composable.js

@@ -0,0 +1,289 @@
+import {
+  onBeforeUnmount,
+  onMounted,
+  ref
+} from "vue";
+import { MEDIA_DEFAULT_VOLUME } from "../../consts/Media/media.const.js";
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function readBufferedEnd(media) {
+  if (!media.buffered || media.buffered.length === 0) return 0;
+  try {
+    return media.buffered.end(media.buffered.length - 1);
+  } catch {
+    return 0;
+  }
+}
+export function useMediaPlayer(options = {}) {
+  const mediaRef = options.mediaRef ?? ref(null);
+  const playing = ref(false);
+  const paused = ref(true);
+  const currentTime = ref(0);
+  const duration = ref(NaN);
+  const buffered = ref(0);
+  const volume = ref(MEDIA_DEFAULT_VOLUME);
+  const muted = ref(Boolean(options.muted));
+  const ready = ref(false);
+  const loading = ref(false);
+  const error = ref(null);
+  const playbackRate = ref(1);
+  const remoteAvailable = ref(false);
+  const remoteState = ref("disconnected");
+  const play = async () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    try {
+      await el.play();
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  };
+  const pause = () => {
+    mediaRef.value?.pause();
+  };
+  const toggle = async () => {
+    if (playing.value) pause();
+    else await play();
+  };
+  const seek = (seconds) => {
+    const el = mediaRef.value;
+    if (!el) return;
+    const max = Number.isFinite(el.duration) ? el.duration : seconds;
+    el.currentTime = Math.max(0, Math.min(seconds, max));
+  };
+  const setVolume = (value) => {
+    const el = mediaRef.value;
+    if (!el) return;
+    const clamped = Math.max(0, Math.min(1, value));
+    el.volume = clamped;
+    if (clamped > 0 && el.muted) {
+      el.muted = false;
+    }
+  };
+  const toggleMute = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    el.muted = !el.muted;
+  };
+  const load = () => {
+    mediaRef.value?.load();
+  };
+  const skipBackward = (seconds) => {
+    const el = mediaRef.value;
+    if (!el) return;
+    seek(el.currentTime - seconds);
+  };
+  const skipForward = (seconds) => {
+    const el = mediaRef.value;
+    if (!el) return;
+    seek(el.currentTime + seconds);
+  };
+  const setPlaybackRate = (rate) => {
+    const el = mediaRef.value;
+    if (!el) return;
+    const clamped = Math.max(0.25, Math.min(4, rate));
+    el.playbackRate = clamped;
+    playbackRate.value = clamped;
+  };
+  const requestRemotePlayback = async () => {
+    const el = mediaRef.value;
+    if (!el?.remote?.prompt) return;
+    try {
+      await el.remote.prompt();
+    } catch (err) {
+      if (err instanceof Error && err.name !== "NotAllowedError" && err.name !== "NotFoundError") {
+        error.value = err;
+      }
+    }
+  };
+  const stopRemotePlayback = async () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    try {
+      el.pause();
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  };
+  const onPlay = () => {
+    playing.value = true;
+    paused.value = false;
+  };
+  const onPause = () => {
+    playing.value = false;
+    paused.value = true;
+  };
+  const onEnded = () => {
+    playing.value = false;
+    paused.value = true;
+  };
+  const onTimeUpdate = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    currentTime.value = el.currentTime;
+    buffered.value = readBufferedEnd(el);
+  };
+  const onProgress = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    buffered.value = readBufferedEnd(el);
+  };
+  const onVolumeChange = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    volume.value = el.volume;
+    muted.value = el.muted;
+  };
+  const onLoadedMetadata = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    duration.value = el.duration;
+    ready.value = true;
+    loading.value = false;
+  };
+  const onLoadStart = () => {
+    loading.value = true;
+    error.value = null;
+  };
+  const onCanPlay = () => {
+    loading.value = false;
+  };
+  const onWaiting = () => {
+    loading.value = true;
+  };
+  const onError = () => {
+    loading.value = false;
+    const el = mediaRef.value;
+    if (el?.error) error.value = el.error;
+    else error.value = new Error("Unknown media error");
+  };
+  const onRateChange = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    playbackRate.value = el.playbackRate;
+  };
+  let _remoteAvailabilityCallbackId = null;
+  const onRemoteConnecting = () => {
+    remoteState.value = "connecting";
+  };
+  const onRemoteConnect = () => {
+    remoteState.value = "connected";
+  };
+  const onRemoteDisconnect = () => {
+    remoteState.value = "disconnected";
+  };
+  const bind = (el) => {
+    el.addEventListener("play", onPlay);
+    el.addEventListener("pause", onPause);
+    el.addEventListener("ended", onEnded);
+    el.addEventListener("timeupdate", onTimeUpdate);
+    el.addEventListener("progress", onProgress);
+    el.addEventListener("volumechange", onVolumeChange);
+    el.addEventListener("loadedmetadata", onLoadedMetadata);
+    el.addEventListener("loadstart", onLoadStart);
+    el.addEventListener("canplay", onCanPlay);
+    el.addEventListener("waiting", onWaiting);
+    el.addEventListener("error", onError);
+    el.addEventListener("ratechange", onRateChange);
+    const remote = el.remote;
+    if (remote) {
+      if (remote.state) remoteState.value = remote.state;
+      remote.addEventListener?.("connecting", onRemoteConnecting);
+      remote.addEventListener?.("connect", onRemoteConnect);
+      remote.addEventListener?.("disconnect", onRemoteDisconnect);
+      if (typeof remote.watchAvailability === "function") {
+        remote.watchAvailability((available) => {
+          remoteAvailable.value = available;
+        }).then((id) => {
+          _remoteAvailabilityCallbackId = id;
+        }).catch(() => {
+        });
+      }
+    }
+    volume.value = el.volume;
+    muted.value = el.muted || Boolean(options.muted);
+    paused.value = el.paused;
+    playing.value = !el.paused;
+    if (Number.isFinite(el.duration)) {
+      duration.value = el.duration;
+      ready.value = true;
+    }
+    if (options.autoplay && prefersReducedMotion()) {
+      console.warn(
+        "[origam:media] `autoplay` requested but the user prefers reduced motion; autoplay was suppressed."
+      );
+    }
+  };
+  const unbind = (el) => {
+    el.removeEventListener("play", onPlay);
+    el.removeEventListener("pause", onPause);
+    el.removeEventListener("ended", onEnded);
+    el.removeEventListener("timeupdate", onTimeUpdate);
+    el.removeEventListener("progress", onProgress);
+    el.removeEventListener("volumechange", onVolumeChange);
+    el.removeEventListener("loadedmetadata", onLoadedMetadata);
+    el.removeEventListener("loadstart", onLoadStart);
+    el.removeEventListener("canplay", onCanPlay);
+    el.removeEventListener("waiting", onWaiting);
+    el.removeEventListener("error", onError);
+    el.removeEventListener("ratechange", onRateChange);
+    const remote = el.remote;
+    if (remote) {
+      remote.removeEventListener?.("connecting", onRemoteConnecting);
+      remote.removeEventListener?.("connect", onRemoteConnect);
+      remote.removeEventListener?.("disconnect", onRemoteDisconnect);
+      if (_remoteAvailabilityCallbackId != null && typeof remote.cancelWatchAvailability === "function") {
+        remote.cancelWatchAvailability(_remoteAvailabilityCallbackId).catch(() => {
+        });
+        _remoteAvailabilityCallbackId = null;
+      }
+    }
+  };
+  onMounted(() => {
+    const el = mediaRef.value;
+    if (el) bind(el);
+  });
+  onBeforeUnmount(() => {
+    const el = mediaRef.value;
+    if (el) unbind(el);
+  });
+  return {
+    mediaRef,
+    state: {
+      playing,
+      paused,
+      currentTime,
+      duration,
+      buffered,
+      volume,
+      muted,
+      ready,
+      loading,
+      error,
+      playbackRate,
+      remoteAvailable,
+      remoteState
+    },
+    methods: {
+      play,
+      pause,
+      toggle,
+      seek,
+      setVolume,
+      toggleMute,
+      load,
+      skipBackward,
+      skipForward,
+      setPlaybackRate,
+      requestRemotePlayback,
+      stopRemotePlayback
+    }
+  };
+}
+export function shouldSuppressAutoplay() {
+  return prefersReducedMotion();
+}