@hubspot/video-player-core 0.1.19

package/dist/components/VideoPlayerProvider.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MediaActionTypes, MediaProvider, useMediaDispatch, useMediaSelector,
+// @ts-expect-error cannot resolve - types are incomplete
+ } from 'media-chrome/react/media-store';
+import { createContext, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+const createPlayerRegistry = () => {
+    const playersById = new Map();
+    const register = (videoId, handle) => {
+        playersById.set(videoId, handle);
+    };
+    const unregister = (videoId) => {
+        playersById.delete(videoId);
+    };
+    const activate = (videoId) => {
+        playersById.forEach((handle, id) => {
+            if (id !== videoId) {
+                handle.actions.pause('other-player');
+            }
+        });
+    };
+    return {
+        register,
+        unregister,
+        activate,
+    };
+};
+let videoPlayerRegistry;
+const getVideoPlayerRegistry = () => {
+    if (!videoPlayerRegistry) {
+        videoPlayerRegistry = createPlayerRegistry();
+    }
+    return videoPlayerRegistry;
+};
+const VideoPlayerContext = createContext(null);
+function addListener(el, events, fn) {
+    const listeners = events.split(' ');
+    listeners.forEach((e) => el.addEventListener(e, fn));
+    return () => {
+        listeners.forEach((e) => el.removeEventListener(e, fn));
+    };
+}
+const VideoPlayerInternal = ({ video, children, playerCallbacks, }) => {
+    const mediaDispatch = useMediaDispatch();
+    const [mediaElement, setMediaElement] = useState(null);
+    const [playbackStartedAt, setPlaybackStartedAt] = useState();
+    // Maintaining our own picture-in-picture state instead of using MediaState's mediaIsPip.
+    // we render MediaController in a shadow DOM, making it unable to detect pip state changes
+    const [isPipMode, setIsPipMode] = useState(false);
+    const { onPlay, onPause, onCaptionChange, onQualityChange, onPlaybackRateChange, onToggleMenu, ...callbacks } = playerCallbacks || {};
+    const prevPlaybackRateRef = useRef(1);
+    const prevRenditionRef = useRef();
+    const pauseReasonRef = useRef();
+    const state = {
+        hasStarted: useMediaSelector((state) => state.mediaHasPlayed ?? false),
+        isPaused: useMediaSelector((state) => state.mediaPaused ?? true),
+        currentTime: useMediaSelector((state) => state.mediaCurrentTime ?? 0),
+        hasEnded: useMediaSelector((state) => state.mediaEnded ?? false),
+        loadedDuration: useMediaSelector((state) => isNaN(state.mediaDuration) ? 0 : state.mediaDuration),
+        selectedCaptionTrack: useMediaSelector((state) => state.mediaSubtitlesShowing?.length
+            ? state.mediaSubtitlesShowing[0].language
+            : null),
+        playbackRate: useMediaSelector((state) => state.mediaPlaybackRate ?? 1),
+        selectedRendition: useMediaSelector((state) => state.mediaRenditionSelected),
+        element: mediaElement,
+        playbackStartedAt,
+        isPipMode,
+    };
+    useEffect(() => {
+        if (onQualityChange &&
+            state.selectedRendition &&
+            prevRenditionRef.current !== state.selectedRendition) {
+            onQualityChange(state.selectedRendition);
+        }
+        prevRenditionRef.current = state.selectedRendition;
+    }, [onQualityChange, state.selectedRendition]);
+    useEffect(() => {
+        if (onCaptionChange && state.selectedCaptionTrack) {
+            onCaptionChange(state.selectedCaptionTrack);
+        }
+    }, [state.selectedCaptionTrack, onCaptionChange]);
+    useEffect(() => {
+        if (onPlaybackRateChange &&
+            prevPlaybackRateRef.current !== state.playbackRate) {
+            // Trigger callback only when playback rate changes from initial value
+            onPlaybackRateChange(state.playbackRate);
+        }
+        prevPlaybackRateRef.current = state.playbackRate;
+    }, [state.playbackRate, onPlaybackRateChange]);
+    const actions = useMemo(() => ({
+        play: () => mediaDispatch({ type: MediaActionTypes.MEDIA_PLAY_REQUEST }),
+        pause: (reason) => {
+            if (reason) {
+                // Store reason to trigger with onPause callback
+                pauseReasonRef.current = reason;
+            }
+            mediaDispatch({ type: MediaActionTypes.MEDIA_PAUSE_REQUEST });
+        },
+        toggleMenu: (menuType, isOpen) => {
+            onToggleMenu?.(menuType, isOpen);
+        },
+        setElement: setMediaElement,
+    }), [onToggleMenu]);
+    // Set up event listeners on native media element
+    useEffect(() => {
+        if (!mediaElement) {
+            return;
+        }
+        const listeners = [
+            addListener(mediaElement, 'enterpictureinpicture leavepictureinpicture', (event) => setIsPipMode(event.type === 'enterpictureinpicture')),
+        ];
+        return () => listeners.forEach((remove) => remove());
+    }, [mediaElement]);
+    // Register player instance
+    useEffect(() => {
+        if (!video) {
+            return;
+        }
+        const registry = getVideoPlayerRegistry();
+        registry.register(video.videoId, { actions });
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'hidden') {
+                actions.pause('visibility-hidden');
+            }
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => {
+            registry.unregister(video.videoId);
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, [video]);
+    return (_jsx(VideoPlayerContext.Provider, { value: {
+            state,
+            actions,
+            eventCallbacks: {
+                ...callbacks,
+                onPlay: (event) => {
+                    if (video) {
+                        const registry = getVideoPlayerRegistry();
+                        registry.activate(video.videoId);
+                        if (!playbackStartedAt) {
+                            setPlaybackStartedAt(Date.now());
+                        }
+                        onPlay?.(event);
+                    }
+                },
+                onPause: (event) => {
+                    onPause?.(event, pauseReasonRef.current);
+                    pauseReasonRef.current = undefined;
+                },
+            },
+        }, children: children }));
+};
+export const VideoPlayerProvider = ({ video, children, playerCallbacks, }) => {
+    return (_jsx(MediaProvider, { children: _jsx(VideoPlayerInternal, { video: video, playerCallbacks: playerCallbacks, children: children }) }));
+};
+export const useVideoPlayer = () => {
+    const context = useContext(VideoPlayerContext);
+    if (!context) {
+        throw new Error('useVideoPlayer must be used within a VideoPlayerProvider');
+    }
+    return context;
+};

package/dist/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const DEFAULT_ASPECT_RATIO: number;
+export declare const DEFAULT_PLAY_BUTTON_COLOR = "#F7761F";
+export declare const DEFAULT_HLS_OPTIONS: {
+    debug: boolean;
+    maxBufferSize: number;
+    maxBufferLength: number;
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,QAAS,CAAC;AAE3C,eAAO,MAAM,yBAAyB,YAAY,CAAC;AAGnD,eAAO,MAAM,mBAAmB;;;;CAI/B,CAAC"}

package/dist/constants.js

@@ -0,0 +1,8 @@
+export const DEFAULT_ASPECT_RATIO = 9 / 16;
+export const DEFAULT_PLAY_BUTTON_COLOR = '#F7761F';
+// do we want `autoStartLoad: false`? this was an important cost saving measure https://git.hubteam.com/HubSpot/hubspot-video-ui/commit/dd6d03586bd3a0c6f45178f660967ca52a4898d0#diff-270ff8e18fd756a342307e5269a906b4207090351052e5b1987171753bea6386R45
+export const DEFAULT_HLS_OPTIONS = {
+    debug: true,
+    maxBufferSize: 20,
+    maxBufferLength: 15,
+};

package/dist/hooks/useAsyncEffect.d.ts

@@ -0,0 +1,9 @@
+type EffectResult = void | undefined | (() => EffectResult) | Promise<void | undefined | (() => EffectResult)>;
+/**
+ * In some cases it may be necessary to mock dismissErrorWithoutHandling
+ * in tests.
+ */
+export declare function dismissErrorWithoutHandling(error: Error): void;
+export declare function useAsyncEffect(effect: () => EffectResult, deps: unknown[]): void;
+export {};
+//# sourceMappingURL=useAsyncEffect.d.ts.map

package/dist/hooks/useAsyncEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAsyncEffect.d.ts","sourceRoot":"","sources":["../../src/hooks/useAsyncEffect.ts"],"names":[],"mappings":"AAKA,KAAK,YAAY,GACb,IAAI,GACJ,SAAS,GACT,CAAC,MAAM,YAAY,CAAC,GACpB,OAAO,CAAC,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,YAAY,CAAC,CAAC,CAAC;AAErD;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,KAAK,QAIvD;AAsBD,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,QAgCzE"}

package/dist/hooks/useAsyncEffect.js

@@ -0,0 +1,54 @@
+import { useEffect, useMemo, useRef } from 'react';
+/**
+ * In some cases it may be necessary to mock dismissErrorWithoutHandling
+ * in tests.
+ */
+export function dismissErrorWithoutHandling(error) {
+    setTimeout(() => {
+        throw error;
+    }, 0);
+}
+function createRethrowAsync() {
+    const syncStackError = new Error(`Encountered unexpected rejection in async side effect`);
+    return (error) => {
+        dismissErrorWithoutHandling(error);
+        dismissErrorWithoutHandling(syncStackError);
+    };
+}
+async function handleEffectResult(effectResult) {
+    if (effectResult instanceof Promise) {
+        return handleEffectResult(await effectResult);
+    }
+    else if (typeof effectResult === 'function') {
+        return handleEffectResult(effectResult());
+    }
+    return undefined;
+}
+export function useAsyncEffect(effect, deps) {
+    const rethrowAsync = useMemo(createRethrowAsync, []);
+    const { current: asyncEffectState } = useRef({
+        mostRecentEffect: effect,
+        asyncQueue: Promise.resolve(undefined),
+        done: false,
+    });
+    asyncEffectState.mostRecentEffect = effect;
+    useEffect(() => {
+        const newLink = handleEffectResult(asyncEffectState.asyncQueue)
+            .catch(rethrowAsync)
+            .then(() => {
+            // we've reached the end of the queue, so it's time to trigger work
+            if (!asyncEffectState.done && asyncEffectState.asyncQueue === newLink) {
+                return asyncEffectState.mostRecentEffect();
+            }
+            else {
+                return undefined;
+            }
+        })
+            .catch(rethrowAsync);
+        asyncEffectState.asyncQueue = newLink;
+    }, [asyncEffectState, rethrowAsync, ...deps]);
+    useEffect(() => () => {
+        asyncEffectState.done = true;
+        handleEffectResult(asyncEffectState.asyncQueue).catch(rethrowAsync);
+    }, [asyncEffectState, rethrowAsync]);
+}

package/dist/hooks/useSubtitles.d.ts

@@ -0,0 +1,6 @@
+import { HsEnvironment, SubtitlesByLanguage } from '../types';
+export declare const useSubtitles: (videoId: number, portalId: number, env?: HsEnvironment, hublet?: string) => {
+    subtitles: SubtitlesByLanguage | undefined;
+    fetchError: Error | undefined;
+};
+//# sourceMappingURL=useSubtitles.d.ts.map

package/dist/hooks/useSubtitles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubtitles.d.ts","sourceRoot":"","sources":["../../src/hooks/useSubtitles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE9D,eAAO,MAAM,YAAY,YACd,MAAM,YACL,MAAM,QACV,aAAa,WACV,MAAM;;;CAiBhB,CAAC"}

package/dist/hooks/useSubtitles.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { fetchSubtitles } from '../api/video';
+export const useSubtitles = (videoId, portalId, env, hublet) => {
+    const [fetchError, setFetchError] = useState();
+    const [subtitles, setSubtitles] = useState();
+    useEffect(() => {
+        fetchSubtitles(videoId, portalId, env, hublet)
+            .then((resp) => {
+            setSubtitles(resp);
+        })
+            .catch((err) => {
+            console.error('Subtitles fetch failed:', err);
+            setFetchError(err);
+        });
+    }, [videoId, portalId, env, hublet]);
+    return { subtitles, fetchError };
+};

package/dist/hooks/useVideo.d.ts

@@ -0,0 +1,7 @@
+import { FetchError } from '../api/video';
+import { HsEnvironment, VideoCrmObject } from '../types';
+export declare const useVideo: (videoId: number, portalId: number, env?: HsEnvironment, hublet?: string, skip?: boolean) => {
+    video: VideoCrmObject | undefined;
+    fetchError: FetchError | undefined;
+};
+//# sourceMappingURL=useVideo.d.ts.map

package/dist/hooks/useVideo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideo.d.ts","sourceRoot":"","sources":["../../src/hooks/useVideo.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAc,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAGzD,eAAO,MAAM,QAAQ,YACV,MAAM,YACL,MAAM,QACV,aAAa,WACV,MAAM,SACR,OAAO;;;CAef,CAAC"}

package/dist/hooks/useVideo.js

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import { fetchVideo } from '../api/video';
+import { useAsyncEffect } from './useAsyncEffect';
+export const useVideo = (videoId, portalId, env, hublet, skip) => {
+    const [fetchError, setFetchError] = useState();
+    const [video, setVideo] = useState();
+    useAsyncEffect(async () => {
+        try {
+            const resp = await fetchVideo(videoId, portalId, env, hublet, skip);
+            setVideo(resp.video);
+        }
+        catch (err) {
+            setFetchError(err);
+        }
+    }, [videoId, env, hublet, skip]);
+    return { video, fetchError };
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { VideoPlayer } from './components/VideoPlayer';
+export { VideoFetchProvider, VideoFetchContext, } from './components/VideoFetchProvider';
+export * from './components/VideoPlayerProvider';
+export * from './components/TranslationsProvider';
+export * from './components/HSPlayerIcons';
+export { HSPlayerThemes } from './components/HSThemeTemplate';
+export { useVideo } from './hooks/useVideo';
+export * from './api/video';
+export * from './types';
+export * from './constants';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EACL,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,iCAAiC,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,10 @@
+export { VideoPlayer } from './components/VideoPlayer';
+export { VideoFetchProvider, VideoFetchContext, } from './components/VideoFetchProvider';
+export * from './components/VideoPlayerProvider';
+export * from './components/TranslationsProvider';
+export * from './components/HSPlayerIcons';
+export { HSPlayerThemes } from './components/HSThemeTemplate';
+export { useVideo } from './hooks/useVideo';
+export * from './api/video';
+export * from './types';
+export * from './constants';

package/dist/styles/mux-player.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: Lexend Deca;
+  src: url(//static.hsappstatic.net/ui-fonts/static-1.291/fonts/LexendDeca-Light.woff2)
+    format('woff2');
+}
+@font-face {
+  font-family: Lexend Deca;
+  src: url(//static.hsappstatic.net/ui-fonts/static-1.291/fonts/LexendDeca-Medium.woff2)
+    format('woff2');
+  font-weight: 500;
+}
+@font-face {
+  font-family: Lexend Deca;
+  src: url(//static.hsappstatic.net/ui-fonts/static-1.291/fonts/LexendDeca-SemiBold.woff2)
+    format('woff2');
+  font-weight: 600;
+}
+@font-face {
+  font-family: Lexend Deca;
+  src: url(//static.hsappstatic.net/ui-fonts/static-1.291/fonts/LexendDeca-Bold.woff2)
+    format('woff2');
+  font-weight: 700;
+}