@clockworkdog/cogs-client-react 2.1.2 → 2.2.0

package/dist/components/Hint.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { CogsConnection } from '@clockworkdog/cogs-client';
 export default function Hint({ connection: customConnection, }: {
-    connection: CogsConnection<any>;
+    connection?: CogsConnection<any>;
 }): JSX.Element | null;

package/dist/components/Hint.js

@@ -7,8 +7,7 @@ const react_1 = __importDefault(require("react"));
 const useHint_1 = __importDefault(require("../hooks/useHint"));
 const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
 function Hint({ connection: customConnection, }) {
-    const providerConnection = (0, CogsConnectionProvider_1.useCogsConnection)();
-    const connection = customConnection !== null && customConnection !== void 0 ? customConnection : providerConnection;
+    const connection = (0, CogsConnectionProvider_1.useCogsConnection)(customConnection);
     const hint = (0, useHint_1.default)(connection);
     return hint ? react_1.default.createElement(react_1.default.Fragment, null, hint) : null;
 }

package/dist/components/Images.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 export default function Images({ className, style, connection: customConnection, fullscreen, }: {
     className?: string;
     style?: React.CSSProperties;
-    connection: CogsConnection<any>;
+    connection?: CogsConnection<any>;
     fullscreen?: boolean | {
         style: React.CSSProperties;
     };

package/dist/components/Images.js

@@ -7,8 +7,7 @@ const react_1 = __importDefault(require("react"));
 const useImages_1 = __importDefault(require("../hooks/useImages"));
 const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
 function Images({ className, style, connection: customConnection, fullscreen, }) {
-    const providerConnection = (0, CogsConnectionProvider_1.useCogsConnection)();
-    const connection = customConnection !== null && customConnection !== void 0 ? customConnection : providerConnection;
+    const connection = (0, CogsConnectionProvider_1.useCogsConnection)(customConnection);
     const images = (0, useImages_1.default)(connection);
     const fullscreenCustomStyle = typeof fullscreen === 'object' ? fullscreen.style : undefined;
     const imageElements = images.map((image, index) => {

package/dist/components/Timer.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 export default function Timer({ className, style, connection: customConnection, separator, center, }: {
     className?: string;
     style?: React.CSSProperties;
-    connection: CogsConnection<any>;
+    connection?: CogsConnection<any>;
     separator?: string;
     center?: boolean;
 }): JSX.Element;

package/dist/components/Timer.js

@@ -44,8 +44,7 @@ function formatTime(time, countingUp) {
 }
 function Timer({ className, style, connection: customConnection, separator = ':', center, }) {
     var _a, _b, _c, _d, _e, _f;
-    const providerConnection = (0, CogsConnectionProvider_1.useCogsConnection)();
-    const connection = customConnection !== null && customConnection !== void 0 ? customConnection : providerConnection;
+    const connection = (0, CogsConnectionProvider_1.useCogsConnection)(customConnection);
     const [timerElapsed, setTimerElapsed] = (0, react_1.useState)(0);
     const [timerStartedAt, setTimerStartedAt] = (0, react_1.useState)((_b = (_a = connection.timerState) === null || _a === void 0 ? void 0 : _a.startedAt) !== null && _b !== void 0 ? _b : 0);
     const [timerTotalMillis, setTimerTotalMillis] = (0, react_1.useState)((_d = (_c = connection.timerState) === null || _c === void 0 ? void 0 : _c.durationMillis) !== null && _d !== void 0 ? _d : 0);

package/dist/components/VideoContainer.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 export default function VideoContainer({ className, style, videoPlayer: customVideoPlayer, fullscreen, }: {
     className?: string;
     style?: React.CSSProperties;
-    videoPlayer: CogsVideoPlayer | null;
+    videoPlayer?: CogsVideoPlayer | null;
     fullscreen?: boolean | {
         style: React.CSSProperties;
     };

package/dist/components/VideoContainer.js

@@ -27,8 +27,7 @@ const react_1 = __importStar(require("react"));
 const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
 function VideoContainer({ className, style, videoPlayer: customVideoPlayer, fullscreen, }) {
     const containerRef = (0, react_1.useRef)(null);
-    const providerVideoPlayer = (0, CogsConnectionProvider_1.useVideoPlayer)();
-    const videoPlayer = customVideoPlayer !== null && customVideoPlayer !== void 0 ? customVideoPlayer : providerVideoPlayer;
+    const videoPlayer = (0, CogsConnectionProvider_1.useVideoPlayer)(customVideoPlayer !== null && customVideoPlayer !== void 0 ? customVideoPlayer : undefined);
     (0, react_1.useEffect)(() => {
         if (videoPlayer && containerRef.current) {
             videoPlayer.setParentElement(containerRef.current);

package/dist/hooks/useIsAudioPlaying.d.ts

@@ -1,2 +1,2 @@
 import { CogsAudioPlayer } from '@clockworkdog/cogs-client';
-export default function useIsAudioPlaying(audioPlayer: CogsAudioPlayer | null): boolean;
+export default function useIsAudioPlaying(customAudioPlayer?: CogsAudioPlayer | null): boolean;

package/dist/hooks/useIsAudioPlaying.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-function useIsAudioPlaying(audioPlayer) {
+const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
+function useIsAudioPlaying(customAudioPlayer) {
     const [isAudioPlaying, setAudioPlaying] = (0, react_1.useState)(false);
+    const audioPlayer = (0, CogsConnectionProvider_1.useAudioPlayer)(customAudioPlayer !== null && customAudioPlayer !== void 0 ? customAudioPlayer : undefined);
     (0, react_1.useEffect)(() => {
         const listener = (event) => setAudioPlaying(event.detail.isPlaying);
         audioPlayer === null || audioPlayer === void 0 ? void 0 : audioPlayer.addEventListener('state', listener);

package/dist/providers/CogsConnectionProvider.d.ts

@@ -59,12 +59,12 @@ export default function CogsConnectionProvider<Manifest extends CogsPluginManife
 /**
  * Get the connection from `<CogsConnectionProvider>`
  */
-export declare function useCogsConnection<Manifest extends CogsPluginManifest>(): CogsConnection<Manifest>;
+export declare function useCogsConnection<Manifest extends CogsPluginManifest>(customConnection?: CogsConnection<Manifest>): CogsConnection<Manifest>;
 /**
  * Get the audio player from `<CogsConnectionProvider audioPlayer>`
  */
-export declare function useAudioPlayer<Manifest extends CogsPluginManifest>(): CogsAudioPlayer | null;
+export declare function useAudioPlayer<Manifest extends CogsPluginManifest>(customAudioPlayer?: CogsAudioPlayer): CogsAudioPlayer | null;
 /**
  * Get the video player from `<CogsConnectionProvider videoPlayer>`
  */
-export declare function useVideoPlayer<Manifest extends CogsPluginManifest>(): CogsVideoPlayer | null;
+export declare function useVideoPlayer<Manifest extends CogsPluginManifest>(customVideoPlayer?: CogsVideoPlayer): CogsVideoPlayer | null;

package/dist/providers/CogsConnectionProvider.js

@@ -27,14 +27,23 @@ exports.useVideoPlayer = exports.useAudioPlayer = exports.useCogsConnection = vo
 const cogs_client_1 = require("@clockworkdog/cogs-client");
 const react_1 = __importStar(require("react"));
 const CogsConnectionContext = react_1.default.createContext({
-    useCogsConnection: () => {
-        throw new Error('Ensure <CogsConnectionProvider> has been added to your React app');
+    useCogsConnection: (customConnection) => {
+        if (!customConnection) {
+            throw new Error('Ensure <CogsConnectionProvider> has been added to your React app');
+        }
+        return customConnection;
     },
-    useAudioPlayer: () => {
-        throw new Error('Ensure <CogsConnectionProvider> has been added to your React app');
+    useAudioPlayer: (customAudioPlayer) => {
+        if (!customAudioPlayer) {
+            throw new Error('Ensure <CogsConnectionProvider> has been added to your React app');
+        }
+        return customAudioPlayer;
     },
-    useVideoPlayer: () => {
-        throw new Error('Ensure <CogsConnectionProvider> has been added to your React app');
+    useVideoPlayer: (customVideoPlayer) => {
+        if (!customVideoPlayer) {
+            throw new Error('Ensure <CogsConnectionProvider> has been added to your React app');
+        }
+        return customVideoPlayer;
     },
 });
 /**
@@ -115,9 +124,9 @@ function CogsConnectionProvider({ manifest, hostname, port, children, audioPlaye
     }
     const value = {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        useCogsConnection: () => connectionRef.current,
-        useAudioPlayer: () => { var _a; return (_a = audioPlayerRef.current) !== null && _a !== void 0 ? _a : null; },
-        useVideoPlayer: () => { var _a; return (_a = videoPlayerRef.current) !== null && _a !== void 0 ? _a : null; },
+        useCogsConnection: (customConnection) => customConnection !== null && customConnection !== void 0 ? customConnection : connectionRef.current,
+        useAudioPlayer: (customAudioPlayer) => { var _a; return (_a = customAudioPlayer !== null && customAudioPlayer !== void 0 ? customAudioPlayer : audioPlayerRef.current) !== null && _a !== void 0 ? _a : null; },
+        useVideoPlayer: (customVideoPlayer) => { var _a; return (_a = customVideoPlayer !== null && customVideoPlayer !== void 0 ? customVideoPlayer : videoPlayerRef.current) !== null && _a !== void 0 ? _a : null; },
     };
     return react_1.default.createElement(CogsConnectionContext.Provider, { value: value }, children);
 }
@@ -125,21 +134,21 @@ exports.default = CogsConnectionProvider;
 /**
  * Get the connection from `<CogsConnectionProvider>`
  */
-function useCogsConnection() {
-    return (0, react_1.useContext)(CogsConnectionContext).useCogsConnection();
+function useCogsConnection(customConnection) {
+    return (0, react_1.useContext)(CogsConnectionContext).useCogsConnection(customConnection);
 }
 exports.useCogsConnection = useCogsConnection;
 /**
  * Get the audio player from `<CogsConnectionProvider audioPlayer>`
  */
-function useAudioPlayer() {
-    return (0, react_1.useContext)(CogsConnectionContext).useAudioPlayer();
+function useAudioPlayer(customAudioPlayer) {
+    return (0, react_1.useContext)(CogsConnectionContext).useAudioPlayer(customAudioPlayer);
 }
 exports.useAudioPlayer = useAudioPlayer;
 /**
  * Get the video player from `<CogsConnectionProvider videoPlayer>`
  */
-function useVideoPlayer() {
-    return (0, react_1.useContext)(CogsConnectionContext).useVideoPlayer();
+function useVideoPlayer(customVideoPlayer) {
+    return (0, react_1.useContext)(CogsConnectionContext).useVideoPlayer(customVideoPlayer);
 }
 exports.useVideoPlayer = useVideoPlayer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clockworkdog/cogs-client-react",
-  "version": "v2.1.2",
+  "version": "v2.2.0",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",