@hanifhan1f/vidstack-react 1.12.13

package/src/hooks/use-state.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import type { AnyRecord, Component, State } from 'maverick.js';
+import { useSignal, useSignalRecord } from 'maverick.js/react';
+
+/**
+ * This hook is used to subscribe to specific state on a component instance.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-state}
+ */
+export function useState<T extends AnyRecord, R extends keyof T>(
+  ctor: { state: State<T> },
+  prop: R,
+  ref: React.RefObject<Component<any, T, any, any> | null>,
+): T[R] {
+  const initialValue = React.useMemo(() => ctor.state.record[prop], [ctor, prop]);
+  return useSignal(ref.current ? ref.current.$state[prop] : initialValue);
+}
+
+const storesCache = new Map<any, any>();
+
+/**
+ * This hook is used to subscribe to multiple states on a component instance.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-store}
+ */
+export function useStore<T extends AnyRecord>(
+  ctor: { state: State<T> },
+  ref: React.RefObject<Component<any, T, any, any> | null>,
+): T {
+  const initialStore = React.useMemo<any>(() => {
+    let store = storesCache.get(ctor);
+
+    // Share the same initial store proxy across constructors.
+    if (!store) {
+      store = new Proxy(ctor.state.record, {
+        get: (_, prop: any) => () => ctor.state.record[prop],
+      });
+
+      storesCache.set(ctor, store);
+    }
+
+    return store;
+  }, [ctor]);
+
+  return useSignalRecord(ref.current ? ref.current.$state : initialStore);
+}

package/src/hooks/use-text-cues.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import { EventsController } from 'maverick.js/std';
+import type { VTTCue } from 'media-captions';
+import type { TextTrack } from 'vidstack';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-text-cues}
+ */
+export function useTextCues(track: TextTrack | null): VTTCue[] {
+  const [cues, setCues] = React.useState<VTTCue[]>([]);
+
+  React.useEffect(() => {
+    if (!track) return;
+
+    function onCuesChange() {
+      if (track) setCues([...track.cues]);
+    }
+
+    const events = new EventsController(track)
+      .add('add-cue', onCuesChange)
+      .add('remove-cue', onCuesChange);
+
+    onCuesChange();
+
+    return () => {
+      setCues([]);
+      events.abort();
+    };
+  }, [track]);
+
+  return cues;
+}

package/src/hooks/use-thumbnails.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+
+import { useReactScope, useSignal } from 'maverick.js/react';
+import {
+  ThumbnailsLoader,
+  type MediaCrossOrigin,
+  type ThumbnailImage,
+  type ThumbnailSrc,
+} from 'vidstack';
+
+import { createSignal, useScoped } from './use-signals';
+
+/**
+ * The function will return the resolved thumbnail images given a thumbnail resource. It's safe to
+ * call this hook in multiple places with the same `src` argument as work is de-duped and cached
+ * internally.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-thumbnails}
+ */
+export function useThumbnails(
+  src: ThumbnailSrc,
+  crossOrigin: MediaCrossOrigin | null = null,
+): ThumbnailImage[] {
+  const scope = useReactScope(),
+    $src = createSignal(src),
+    $crossOrigin = createSignal(crossOrigin),
+    loader = useScoped(() => ThumbnailsLoader.create($src, $crossOrigin));
+
+  if (__DEV__ && !scope) {
+    console.warn(
+      `[vidstack] \`useThumbnails\` must be called inside a child component of \`<MediaPlayer>\``,
+    );
+  }
+
+  React.useEffect(() => {
+    $src.set(src);
+  }, [src]);
+
+  React.useEffect(() => {
+    $crossOrigin.set(crossOrigin);
+  }, [crossOrigin]);
+
+  return useSignal(loader.$images);
+}
+
+/**
+ * Returns the active thumbnail image based on the given time.
+ *
+ * @param thumbnails - thumbnail images.
+ * @param time - the current time to determine which thumbnail is active.
+ */
+export function useActiveThumbnail(
+  thumbnails: ThumbnailImage[],
+  time: number,
+): ThumbnailImage | null {
+  return React.useMemo(() => {
+    let activeIndex = -1;
+
+    for (let i = thumbnails.length - 1; i >= 0; i--) {
+      const image = thumbnails[i];
+      if (time >= image.startTime && (!image.endTime || time < image.endTime)) {
+        activeIndex = i;
+        break;
+      }
+    }
+
+    return thumbnails[activeIndex] || null;
+  }, [thumbnails, time]);
+}

package/src/icon.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+export interface IconProps
+  extends React.PropsWithoutRef<React.SVGProps<SVGSVGElement>>,
+    React.RefAttributes<SVGElement | SVGSVGElement> {
+  /**
+   * The horizontal (width) and vertical (height) length of the underlying `<svg>` element.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height}
+   */
+  size?: number;
+  part?: string;
+  /** @internal */
+  paths?: string;
+}
+
+export interface IconComponent extends React.ForwardRefExoticComponent<IconProps> {}
+
+const Icon: IconComponent = /* #__PURE__*/ React.forwardRef((props, ref) => {
+  const { width, height, size = null, paths, ...restProps } = props;
+  return React.createElement('svg', {
+    viewBox: '0 0 32 32',
+    ...restProps,
+    width: width ?? size,
+    height: height ?? size,
+    fill: 'none',
+    'aria-hidden': 'true',
+    focusable: 'false',
+    xmlns: 'http://www.w3.org/2000/svg',
+    ref,
+    dangerouslySetInnerHTML: { __html: paths },
+  });
+});
+
+Icon.displayName = 'VidstackIcon';
+export { Icon };