((resolve, _reject) => {
22 | resolve();
23 | });
24 |
25 | export class MockedVideoElement extends HTMLVideoElement {
26 | listeners: { [key: string]: EventListenerOrEventListenerObject[] } = {};
27 |
28 | load = vi.fn(() => {
29 | return true;
30 | });
31 |
32 | addEventListener = vi.fn(
33 | (event: string, listener: EventListenerOrEventListenerObject) => {
34 | this.listeners[event] = [...(this.listeners[event] ?? []), listener];
35 | },
36 | );
37 | removeEventListener = vi.fn(
38 | (event: string, listener: EventListenerOrEventListenerObject) => {
39 | this.listeners[event] =
40 | this.listeners[event]?.filter((l) => l !== listener) ?? [];
41 | },
42 | );
43 | dispatchEvent = vi.fn((e: Event) => {
44 | if (this.listeners[e.type]) {
45 | for (const listener of this.listeners[e.type] ?? []) {
46 | if (typeof listener === "function") {
47 | listener?.(e);
48 | } else {
49 | listener?.handleEvent(e);
50 | }
51 | }
52 | }
53 |
54 | return true;
55 | });
56 |
57 | getAttribute = vi.fn(() => {
58 | return "false";
59 | });
60 | setAttribute = vi.fn(() => {
61 | return true;
62 | });
63 |
64 | get duration() {
65 | return 777;
66 | }
67 | }
68 |
69 | // register the custom element
70 | customElements.define("mocked-video", MockedVideoElement, {
71 | extends: "video",
72 | });
73 |
--------------------------------------------------------------------------------
/packages/core/test/sample.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livepeer/ui-kit/bec14d79e8c70b26da2d362d9290f68b4f57a9f5/packages/core/test/sample.mp4
--------------------------------------------------------------------------------
/packages/core/test/setup.ts:
--------------------------------------------------------------------------------
1 | import { vi } from "vitest";
2 |
3 | Object.defineProperty(window, "localStorage", {
4 | value: {
5 | getItem: vi.fn(() => null),
6 | removeItem: vi.fn(() => null),
7 | setItem: vi.fn(() => null),
8 | },
9 | writable: true,
10 | });
11 |
--------------------------------------------------------------------------------
/packages/core/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "ESNext",
4 | "moduleResolution": "bundler",
5 | "target": "ESNext",
6 | "strict": true,
7 | "strictNullChecks": true
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/core/tsup.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | /** @type {import('tsup').Options} */
4 | const options = {
5 | splitting: false,
6 | clean: true,
7 | sourcemap: true,
8 | dts: true,
9 | format: ["esm", "cjs"],
10 | };
11 |
12 | const entrypoints = [
13 | "crypto",
14 | "errors",
15 | "media",
16 | "storage",
17 | "utils",
18 | "version",
19 | ];
20 |
21 | export default defineConfig([
22 | {
23 | ...options,
24 | entry: {
25 | index: "src/external.ts",
26 | },
27 | outDir: "dist",
28 | },
29 | ...entrypoints.map((entrypoint) => ({
30 | ...options,
31 | entry: {
32 | index: `src/${entrypoint}.ts`,
33 | },
34 | outDir: `dist/${entrypoint}`,
35 | })),
36 | ]);
37 |
--------------------------------------------------------------------------------
/packages/react/README.md:
--------------------------------------------------------------------------------
1 | # @livepeer/react
2 |
3 | ## Documentation
4 |
5 | The `@livepeer/react` package contains React-specific components for the livepeer ecosystem. For full documentation and examples, visit [docs.livepeer.org](https://docs.livepeer.org).
6 |
7 | ## Installation
8 |
9 | Install `@livepeer/react` using a package manager.
10 |
11 | ```bash
12 | npm install @livepeer/react
13 | ```
14 |
15 | ## Community
16 |
17 | Check out the following places for more livepeer-related content:
18 |
19 | - Join the [discussions on GitHub](https://github.com/livepeer/ui-kit/discussions)
20 | - Follow [@livepeer](https://twitter.com/livepeer) on Twitter
21 | - Jump into our [Discord](https://discord.gg/livepeer)
22 |
--------------------------------------------------------------------------------
/packages/react/src/assets.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, it } from "vitest";
2 |
3 | import * as Exports from "./assets";
4 |
5 | it("should expose correct exports", () => {
6 | expect(Object.keys(Exports).sort()).toMatchInlineSnapshot(`
7 | [
8 | "ClipIcon",
9 | "DisableAudioIcon",
10 | "DisableVideoIcon",
11 | "EnableAudioIcon",
12 | "EnableVideoIcon",
13 | "EnterFullscreenIcon",
14 | "ExitFullscreenIcon",
15 | "LoadingIcon",
16 | "MuteIcon",
17 | "OfflineErrorIcon",
18 | "PauseIcon",
19 | "PictureInPictureIcon",
20 | "PlayIcon",
21 | "PrivateErrorIcon",
22 | "SettingsIcon",
23 | "StartScreenshareIcon",
24 | "StopIcon",
25 | "StopScreenshareIcon",
26 | "UnmuteIcon",
27 | ]
28 | `);
29 | });
30 |
--------------------------------------------------------------------------------
/packages/react/src/broadcast.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, it } from "vitest";
2 |
3 | import * as Exports from "./broadcast";
4 |
5 | it("should expose correct exports", () => {
6 | expect(Object.keys(Exports).sort()).toMatchInlineSnapshot(`
7 | [
8 | "AudioEnabledIndicator",
9 | "AudioEnabledTrigger",
10 | "BroadcastProvider",
11 | "Container",
12 | "Controls",
13 | "EnabledIndicator",
14 | "EnabledTrigger",
15 | "ErrorIndicator",
16 | "FullscreenIndicator",
17 | "FullscreenTrigger",
18 | "LoadingIndicator",
19 | "MediaProvider",
20 | "PictureInPictureTrigger",
21 | "Portal",
22 | "Range",
23 | "Root",
24 | "ScreenshareIndicator",
25 | "ScreenshareTrigger",
26 | "SelectArrow",
27 | "SelectContent",
28 | "SelectGroup",
29 | "SelectIcon",
30 | "SelectItem",
31 | "SelectItemIndicator",
32 | "SelectItemText",
33 | "SelectLabel",
34 | "SelectPortal",
35 | "SelectRoot",
36 | "SelectScrollDownButton",
37 | "SelectScrollUpButton",
38 | "SelectSeparator",
39 | "SelectTrigger",
40 | "SelectValue",
41 | "SelectViewport",
42 | "SourceSelect",
43 | "StatusIndicator",
44 | "Thumb",
45 | "Time",
46 | "Track",
47 | "Video",
48 | "VideoEnabledIndicator",
49 | "VideoEnabledTrigger",
50 | "createBroadcastScope",
51 | "createMediaScope",
52 | "useBroadcastContext",
53 | "useMediaContext",
54 | "useStore",
55 | ]
56 | `);
57 | });
58 |
--------------------------------------------------------------------------------
/packages/react/src/broadcast/context.tsx:
--------------------------------------------------------------------------------
1 | import type { BroadcastStore } from "@livepeer/core-web/broadcast";
2 | import { createContextScope } from "@radix-ui/react-context";
3 |
4 | import type { Scope } from "@radix-ui/react-context";
5 |
6 | const MEDIA_NAME = "Broadcast";
7 |
8 | // biome-ignore lint/complexity/noBannedTypes: allow {}
9 | type BroadcastScopedProps = P & { __scopeBroadcast?: Scope };
10 | const [createBroadcastContext, createBroadcastScope] =
11 | createContextScope(MEDIA_NAME);
12 |
13 | type BroadcastContextValue = {
14 | store: BroadcastStore;
15 | };
16 |
17 | const [BroadcastProvider, useBroadcastContext] =
18 | createBroadcastContext(MEDIA_NAME);
19 |
20 | export { BroadcastProvider, createBroadcastScope, useBroadcastContext };
21 | export type { BroadcastContextValue, BroadcastScopedProps };
22 |
--------------------------------------------------------------------------------
/packages/react/src/crypto.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, it } from "vitest";
2 |
3 | import * as Exports from "./crypto";
4 |
5 | it("should expose correct exports", () => {
6 | expect(Object.keys(Exports).sort()).toMatchInlineSnapshot(`
7 | [
8 | "importPKCS8",
9 | "signAccessJwt",
10 | ]
11 | `);
12 | });
13 |
--------------------------------------------------------------------------------
/packages/react/src/crypto.ts:
--------------------------------------------------------------------------------
1 | export {
2 | importPKCS8,
3 | signAccessJwt,
4 | type SignAccessJwtOptions,
5 | } from "@livepeer/core/crypto";
6 |
--------------------------------------------------------------------------------
/packages/react/src/external.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, it } from "vitest";
2 |
3 | import * as Exports from "./external";
4 |
5 | it("should expose correct exports", () => {
6 | expect(Object.keys(Exports).sort()).toMatchInlineSnapshot(`
7 | [
8 | "getIngest",
9 | "getSrc",
10 | ]
11 | `);
12 | });
13 |
--------------------------------------------------------------------------------
/packages/react/src/external.ts:
--------------------------------------------------------------------------------
1 | export { getIngest, getSrc } from "@livepeer/core";
2 | export type {
3 | CloudflareStreamData,
4 | CloudflareUrlData,
5 | LivepeerAttestation,
6 | LivepeerAttestationIpfs,
7 | LivepeerAttestationStorage,
8 | LivepeerAttestations,
9 | LivepeerDomain,
10 | LivepeerMessage,
11 | LivepeerMeta,
12 | LivepeerName,
13 | LivepeerPhase,
14 | LivepeerPlaybackInfo,
15 | LivepeerPlaybackInfoType,
16 | LivepeerPlaybackPolicy,
17 | LivepeerPrimaryType,
18 | LivepeerSignatureType,
19 | LivepeerSource,
20 | LivepeerStorageStatus,
21 | LivepeerStream,
22 | LivepeerTasks,
23 | LivepeerTypeT,
24 | LivepeerVersion,
25 | } from "@livepeer/core";
26 |
--------------------------------------------------------------------------------
/packages/react/src/index.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, it } from "vitest";
2 |
3 | import * as Exports from "./";
4 |
5 | it("should expose correct exports", () => {
6 | expect(Object.keys(Exports).sort()).toMatchInlineSnapshot(`
7 | [
8 | "createControllerStore",
9 | "createStorage",
10 | "getMediaSourceType",
11 | "noopStorage",
12 | "version",
13 | ]
14 | `);
15 | });
16 |
--------------------------------------------------------------------------------
/packages/react/src/index.ts:
--------------------------------------------------------------------------------
1 | export type {
2 | AudioDeviceId,
3 | BroadcastAriaText,
4 | BroadcastControlsState,
5 | BroadcastDeviceInformation,
6 | BroadcastState,
7 | BroadcastStatus,
8 | BroadcastStore,
9 | InitialBroadcastProps,
10 | MediaDeviceIds,
11 | MediaDeviceInfoExtended,
12 | VideoDeviceId,
13 | } from "@livepeer/core-web/broadcast";
14 | export {
15 | createControllerStore,
16 | getMediaSourceType,
17 | } from "@livepeer/core/media";
18 | export type {
19 | AccessControlParams,
20 | AriaText,
21 | AudioSrc,
22 | AudioTrackSelector,
23 | Base64Src,
24 | ClipLength,
25 | ClipParams,
26 | ControlsState,
27 | DeviceInformation,
28 | ElementSize,
29 | HlsSrc,
30 | InitialProps,
31 | LegacyMediaMetrics,
32 | LegacyMetricsStatus,
33 | LegacyPlaybackMonitor,
34 | MediaControllerState,
35 | MediaControllerStore,
36 | MediaSizing,
37 | Metadata,
38 | ObjectFit,
39 | PlaybackError,
40 | PlaybackEvent,
41 | PlaybackRate,
42 | SessionData,
43 | SingleAudioTrackSelector,
44 | SingleTrackSelector,
45 | SingleVideoTrackSelector,
46 | Src,
47 | VideoQuality,
48 | VideoSrc,
49 | VideoTrackSelector,
50 | WebRTCSrc,
51 | } from "@livepeer/core/media";
52 | export {
53 | createStorage,
54 | noopStorage,
55 | } from "@livepeer/core/storage";
56 | export type { ClientStorage } from "@livepeer/core/storage";
57 | export { version } from "@livepeer/core/version";
58 |
--------------------------------------------------------------------------------
/packages/react/src/player.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, it } from "vitest";
2 |
3 | import * as Exports from "./player";
4 |
5 | it("should expose correct exports", () => {
6 | expect(Object.keys(Exports).sort()).toMatchInlineSnapshot(`
7 | [
8 | "ClipTrigger",
9 | "Container",
10 | "Controls",
11 | "ErrorIndicator",
12 | "FullscreenIndicator",
13 | "FullscreenTrigger",
14 | "LiveIndicator",
15 | "LoadingIndicator",
16 | "MediaProvider",
17 | "MuteTrigger",
18 | "PictureInPictureTrigger",
19 | "PlayPauseTrigger",
20 | "PlayingIndicator",
21 | "Portal",
22 | "Poster",
23 | "Range",
24 | "RateSelect",
25 | "RateSelectItem",
26 | "Root",
27 | "Seek",
28 | "SeekBuffer",
29 | "SelectArrow",
30 | "SelectContent",
31 | "SelectGroup",
32 | "SelectIcon",
33 | "SelectItemIndicator",
34 | "SelectItemText",
35 | "SelectLabel",
36 | "SelectPortal",
37 | "SelectScrollDownButton",
38 | "SelectScrollUpButton",
39 | "SelectSeparator",
40 | "SelectTrigger",
41 | "SelectValue",
42 | "SelectViewport",
43 | "Thumb",
44 | "Time",
45 | "Track",
46 | "Video",
47 | "VideoQualitySelect",
48 | "VideoQualitySelectItem",
49 | "Volume",
50 | "VolumeIndicator",
51 | "createMediaScope",
52 | "useMediaContext",
53 | "useStore",
54 | ]
55 | `);
56 | });
57 |
--------------------------------------------------------------------------------
/packages/react/src/player/LiveIndicator.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useMemo } from "react";
4 |
5 | import { Presence } from "@radix-ui/react-presence";
6 | import { useStore } from "zustand";
7 | import { type MediaScopedProps, useMediaContext } from "../shared/context";
8 | import * as Radix from "../shared/primitive";
9 |
10 | const LIVE_INDICATOR_NAME = "LiveIndicator";
11 |
12 | type LiveIndicatorElement = React.ElementRef;
13 |
14 | interface LiveIndicatorProps
15 | extends Radix.ComponentPropsWithoutRef {
16 | /**
17 | * Used to force mounting when more control is needed. Useful when
18 | * controlling animation with React animation libraries.
19 | */
20 | forceMount?: true;
21 | /** The matcher used to determine whether the element should be shown, given the `live` state (true for live streams, and false for assets). Defaults to `true`. */
22 | matcher?: boolean | ((live: boolean) => boolean);
23 | }
24 |
25 | const LiveIndicator = React.forwardRef<
26 | LiveIndicatorElement,
27 | LiveIndicatorProps
28 | >((props: MediaScopedProps, forwardedRef) => {
29 | const {
30 | __scopeMedia,
31 | forceMount,
32 | matcher = true,
33 | ...liveIndicatorProps
34 | } = props;
35 |
36 | const context = useMediaContext(LIVE_INDICATOR_NAME, __scopeMedia);
37 |
38 | const live = useStore(context.store, ({ live }) => live);
39 |
40 | const isPresent = useMemo(
41 | () => (typeof matcher === "function" ? matcher(live) : matcher === live),
42 | [matcher, live],
43 | );
44 |
45 | return (
46 |
47 |
55 |
56 | );
57 | });
58 |
59 | LiveIndicator.displayName = LIVE_INDICATOR_NAME;
60 |
61 | export { LiveIndicator };
62 | export type { LiveIndicatorProps };
63 |
--------------------------------------------------------------------------------
/packages/react/src/player/MuteTrigger.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { composeEventHandlers } from "@radix-ui/primitive";
4 |
5 | import React from "react";
6 |
7 | import { useStore } from "zustand";
8 | import { type MediaScopedProps, useMediaContext } from "../shared/context";
9 |
10 | import { useShallow } from "zustand/react/shallow";
11 | import * as Radix from "../shared/primitive";
12 | import { noPropagate } from "../shared/utils";
13 |
14 | const MUTE_TRIGGER_NAME = "MuteTrigger";
15 |
16 | type MuteTriggerElement = React.ElementRef;
17 |
18 | interface MuteTriggerProps
19 | extends Radix.ComponentPropsWithoutRef {}
20 |
21 | const MuteTrigger = React.forwardRef(
22 | (props: MediaScopedProps, forwardedRef) => {
23 | const { __scopeMedia, ...playProps } = props;
24 |
25 | const context = useMediaContext(MUTE_TRIGGER_NAME, __scopeMedia);
26 |
27 | const { muted, toggleMute } = useStore(
28 | context.store,
29 | useShallow(({ __controls, __controlsFunctions }) => ({
30 | muted: __controls.muted,
31 | toggleMute: __controlsFunctions.requestToggleMute,
32 | })),
33 | );
34 |
35 | const title = React.useMemo(
36 | () => (muted ? "Unmute (m)" : "Mute (m)"),
37 | [muted],
38 | );
39 |
40 | return (
41 |
52 | );
53 | },
54 | );
55 |
56 | MuteTrigger.displayName = MUTE_TRIGGER_NAME;
57 |
58 | export { MuteTrigger };
59 | export type { MuteTriggerProps };
60 |
--------------------------------------------------------------------------------
/packages/react/src/player/Poster.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 |
5 | import { Presence } from "@radix-ui/react-presence";
6 | import { useStore } from "zustand";
7 | import { type MediaScopedProps, useMediaContext } from "../shared/context";
8 | import * as Radix from "../shared/primitive";
9 |
10 | const POSTER_NAME = "Poster";
11 |
12 | type PosterElement = React.ElementRef;
13 |
14 | interface PosterProps
15 | extends Radix.ComponentPropsWithoutRef {
16 | /**
17 | * Used to force mounting when more control is needed. Useful when
18 | * controlling animation with React animation libraries.
19 | */
20 | forceMount?: true;
21 | }
22 |
23 | const Poster = React.forwardRef(
24 | (props: MediaScopedProps, forwardedRef) => {
25 | const { __scopeMedia, forceMount, src, ...posterProps } = props;
26 |
27 | const context = useMediaContext(POSTER_NAME, __scopeMedia);
28 |
29 | const poster = useStore(context.store, ({ poster }) => poster);
30 |
31 | return (
32 |
33 |
42 |
43 | );
44 | },
45 | );
46 |
47 | Poster.displayName = POSTER_NAME;
48 |
49 | export { Poster };
50 | export type { PosterProps };
51 |
--------------------------------------------------------------------------------
/packages/react/src/shared/LoadingIndicator.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useMemo } from "react";
4 |
5 | import { Presence } from "@radix-ui/react-presence";
6 | import { useStore } from "zustand";
7 | import { type MediaScopedProps, useMediaContext } from "./context";
8 | import * as Radix from "./primitive";
9 |
10 | const LOADING_INDICATOR_NAME = "LoadingIndicator";
11 |
12 | type LoadingIndicatorElement = React.ElementRef;
13 |
14 | interface LoadingIndicatorProps
15 | extends Radix.ComponentPropsWithoutRef {
16 | /**
17 | * Used to force mounting when more control is needed. Useful when
18 | * controlling animation with React animation libraries.
19 | */
20 | forceMount?: true;
21 | /** The matcher used to determine whether the element should be shown, given the `loading` state. Defaults to `true`. */
22 | matcher?: boolean | ((live: boolean) => boolean);
23 | }
24 |
25 | const LoadingIndicator = React.forwardRef<
26 | LoadingIndicatorElement,
27 | LoadingIndicatorProps
28 | >((props: MediaScopedProps, forwardedRef) => {
29 | const {
30 | __scopeMedia,
31 | forceMount,
32 | matcher = true,
33 | ...offlineErrorProps
34 | } = props;
35 |
36 | const context = useMediaContext(LOADING_INDICATOR_NAME, __scopeMedia);
37 |
38 | const loading = useStore(context.store, ({ loading }) => loading);
39 |
40 | const isPresent = useMemo(
41 | () =>
42 | typeof matcher === "function" ? matcher(loading) : matcher === loading,
43 | [matcher, loading],
44 | );
45 |
46 | return (
47 |
48 |
56 |
57 | );
58 | });
59 |
60 | LoadingIndicator.displayName = LOADING_INDICATOR_NAME;
61 |
62 | export { LoadingIndicator };
63 | export type { LoadingIndicatorProps };
64 |
--------------------------------------------------------------------------------
/packages/react/src/shared/Portal.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | // biome-ignore lint/style/useImportType: necessary import
4 | import React from "react";
5 |
6 | import * as RadixPortal from "@radix-ui/react-portal";
7 |
8 | const PORTAL_NAME = "Portal";
9 |
10 | type PortalProps = React.ComponentPropsWithoutRef;
11 |
12 | const Portal: React.FC = (props: PortalProps) => {
13 | return ;
14 | };
15 |
16 | Portal.displayName = PORTAL_NAME;
17 |
18 | export { Portal, type PortalProps };
19 |
--------------------------------------------------------------------------------
/packages/react/src/shared/Slider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as SliderPrimitive from "@radix-ui/react-slider";
4 |
5 | type SliderProps = SliderPrimitive.SliderProps;
6 | const Root = SliderPrimitive.Root;
7 | type TrackProps = SliderPrimitive.SliderTrackProps;
8 | const Track = SliderPrimitive.Track;
9 | type RangeProps = SliderPrimitive.SliderRangeProps;
10 | const Range = SliderPrimitive.Range;
11 | type ThumbProps = SliderPrimitive.SliderThumbProps;
12 | const Thumb = SliderPrimitive.Thumb;
13 |
14 | export { Range, Root, Thumb, Track };
15 | export type { RangeProps, SliderProps, ThumbProps, TrackProps };
16 |
--------------------------------------------------------------------------------
/packages/react/src/shared/Time.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 |
5 | import { useStore } from "zustand";
6 | import { type MediaScopedProps, useMediaContext } from "./context";
7 |
8 | import { useShallow } from "zustand/react/shallow";
9 | import * as Radix from "./primitive";
10 |
11 | const TIME_NAME = "Time";
12 |
13 | type TimeElement = React.ElementRef;
14 |
15 | interface TimeProps
16 | extends Omit<
17 | Radix.ComponentPropsWithoutRef,
18 | "children"
19 | > {}
20 |
21 | const Time = React.forwardRef(
22 | (props: MediaScopedProps, forwardedRef) => {
23 | const { __scopeMedia, ...timeProps } = props;
24 |
25 | const context = useMediaContext(TIME_NAME, __scopeMedia);
26 |
27 | const { progress, duration, live, formattedTime } = useStore(
28 | context.store,
29 | useShallow(({ progress, duration, live, aria }) => ({
30 | formattedTime: aria.time,
31 | progress,
32 | duration,
33 | live,
34 | })),
35 | );
36 |
37 | return (
38 |
48 | {formattedTime}
49 |
50 | );
51 | },
52 | );
53 |
54 | Time.displayName = TIME_NAME;
55 |
56 | export { Time };
57 | export type { TimeProps };
58 |
--------------------------------------------------------------------------------
/packages/react/src/shared/context.tsx:
--------------------------------------------------------------------------------
1 | import type { MediaControllerStore } from "@livepeer/core/media";
2 | import { createContextScope } from "@radix-ui/react-context";
3 | import { useStore as useStoreZustand } from "zustand";
4 |
5 | import type { Scope } from "@radix-ui/react-context";
6 |
7 | const MEDIA_NAME = "Media";
8 |
9 | // biome-ignore lint/complexity/noBannedTypes: allow {}
10 | type MediaScopedProps = P & { __scopeMedia?: Scope };
11 | const [createMediaContext, createMediaScope] = createContextScope(MEDIA_NAME);
12 |
13 | type MediaContextValue = {
14 | store: MediaControllerStore;
15 | };
16 |
17 | const [MediaProvider, useMediaContext] =
18 | createMediaContext(MEDIA_NAME);
19 |
20 | const useStore = useStoreZustand;
21 |
22 | export { MediaProvider, createMediaScope, useMediaContext, useStore };
23 | export type { MediaContextValue, MediaScopedProps };
24 |
--------------------------------------------------------------------------------
/packages/react/src/shared/utils.ts:
--------------------------------------------------------------------------------
1 | export const noPropagate =
2 | <
3 | E extends {
4 | stopPropagation(): void;
5 | },
6 | >(
7 | // biome-ignore lint/suspicious/noExplicitAny: any
8 | cb: (...args: any) => any,
9 | ) =>
10 | (event: E) => {
11 | event.stopPropagation();
12 |
13 | return cb();
14 | };
15 |
--------------------------------------------------------------------------------
/packages/react/test/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | type Queries,
3 | type RenderOptions,
4 | render as defaultRender,
5 | type queries,
6 | } from "@testing-library/react";
7 |
8 | import type * as React from "react";
9 |
10 | export const render = <
11 | Q extends Queries = typeof queries,
12 | Container extends Element | DocumentFragment = HTMLElement,
13 | BaseElement extends Element | DocumentFragment = Container,
14 | >(
15 | ui: React.ReactElement,
16 | options?: RenderOptions,
17 | ) => defaultRender(ui, { ...options });
18 |
19 | export { act, cleanup, fireEvent, screen } from "@testing-library/react";
20 | export { getSampleVideo } from "../../core/test";
21 |
--------------------------------------------------------------------------------
/packages/react/test/setup.ts:
--------------------------------------------------------------------------------
1 | import { vi } from "vitest";
2 |
3 | // make dates stable across runs
4 | Date.now = vi.fn(() => new Date(Date.UTC(2022, 1, 1)).valueOf());
5 |
6 | type ReactVersion = "17" | "18";
7 | const reactVersion: ReactVersion =
8 | process.env.REACT_VERSION || "18";
9 |
10 | // set up imports for React 17
11 | vi.mock("@testing-library/react-hooks", async () => {
12 | const packages = {
13 | "18": "@testing-library/react",
14 | "17": "@testing-library/react-hooks",
15 | };
16 |
17 | return await vi.importActual(packages[reactVersion]);
18 | });
19 |
--------------------------------------------------------------------------------
/packages/react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react",
4 | "moduleResolution": "bundler",
5 | "esModuleInterop": true,
6 | "target": "ESNext",
7 | "lib": ["es2015", "dom"],
8 | "strict": true,
9 | "strictNullChecks": true
10 | },
11 | "watchOptions": {
12 | "watchFile": "useFsEvents",
13 | "watchDirectory": "useFsEvents",
14 | "fallbackPolling": "dynamicPriority"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/react/tsup.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | /** @type {import('tsup').Options} */
4 | const options = {
5 | splitting: false,
6 | clean: true,
7 | sourcemap: true,
8 | dts: true,
9 | format: ["esm", "cjs"],
10 | };
11 |
12 | /** @type {import('tsup').Options} */
13 | const reactServerOptions = {
14 | ...options,
15 | external: ["react"],
16 | };
17 |
18 | /** @type {import('tsup').Options} */
19 | const reactClientOptions = {
20 | ...reactServerOptions,
21 | esbuildOptions: (options) => {
22 | // Append "use client" to the top of the react entry point
23 | options.banner = {
24 | js: '"use client";',
25 | };
26 | },
27 | };
28 |
29 | const entrypoints = ["crypto", "external"];
30 | const reactServerEntrypoints = ["assets"];
31 | const reactClientEntrypoints = ["broadcast", "player"];
32 |
33 | export default defineConfig([
34 | {
35 | ...options,
36 | entry: {
37 | index: "src/index.ts",
38 | },
39 | outDir: "dist",
40 | },
41 | ...entrypoints.map((entrypoint) => ({
42 | ...options,
43 | entry: {
44 | index: `src/${entrypoint}.ts`,
45 | },
46 | outDir: `dist/${entrypoint}`,
47 | })),
48 | ...reactServerEntrypoints.map((reactEntrypoint) => ({
49 | ...reactServerOptions,
50 | entry: {
51 | index: `src/${reactEntrypoint}.tsx`,
52 | },
53 | outDir: `dist/${reactEntrypoint}`,
54 | })),
55 | ...reactClientEntrypoints.map((reactEntrypoint) => ({
56 | ...reactClientOptions,
57 | entry: {
58 | index: `src/${reactEntrypoint}.tsx`,
59 | },
60 | outDir: `dist/${reactEntrypoint}`,
61 | })),
62 | ]);
63 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "apps/*"
3 | - "examples/*"
4 | - "packages/*"
5 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "downlevelIteration": true,
5 | "esModuleInterop": true,
6 | "incremental": true,
7 | "isolatedModules": true,
8 | "jsx": "react-jsx",
9 | "lib": ["es2019", "es2017", "dom"],
10 | "module": "commonjs",
11 | "moduleResolution": "node",
12 | "noEmit": true,
13 | "noImplicitAny": true,
14 | "noUncheckedIndexedAccess": true,
15 | "noUnusedLocals": true,
16 | "noUnusedParameters": true,
17 | "resolveJsonModule": true,
18 | "skipLibCheck": true,
19 | "strict": true,
20 | "strictNullChecks": true,
21 | "target": "es2021",
22 | "types": ["node"]
23 | },
24 | "exclude": ["node_modules", "**/dist/**"],
25 | "include": ["packages/**/*"],
26 | "watchOptions": {
27 | "watchFile": "useFsEvents",
28 | "watchDirectory": "useFsEvents",
29 | "fallbackPolling": "dynamicPriority"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "globalDependencies": ["**/.env"],
4 | "globalEnv": ["NODE_ENV"],
5 | "pipeline": {
6 | "build": {
7 | "dependsOn": ["generate", "^build"],
8 | "env": [],
9 | "outputs": ["dist/**", ".next/**"]
10 | },
11 | "dev": {
12 | "cache": false,
13 | "persistent": true
14 | },
15 | "generate": {
16 | "cache": false
17 | },
18 | "test": {
19 | "cache": false
20 | },
21 | "lint": {},
22 | "clean": {
23 | "cache": false
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { configDefaults, defineConfig } from "vitest/config";
2 |
3 | export default defineConfig({
4 | test: {
5 | coverage: {
6 | reporter: ["text", "json", "html"],
7 | exclude: [
8 | ...configDefaults.exclude,
9 | "**/examples/**",
10 | "**/test/**",
11 | "**/*.d.ts",
12 | "**/generate-version.ts",
13 | ],
14 | },
15 | environment: "jsdom",
16 | setupFiles: [
17 | "./packages/core/test/setup.ts",
18 | "./packages/react/test/setup.ts",
19 | ],
20 | },
21 | });
22 |
--------------------------------------------------------------------------------