@clockworkdog/cogs-client-react 2.10.1 → 2.11.0

package/dist/index.d.ts

@@ -13,7 +13,6 @@ export { default as useWhenShowReset } from './hooks/useWhenShowReset';
 export * from './utils/types';
 export { default as useAudioClips } from './hooks/useAudioClips';
 export { default as useIsAudioPlaying } from './hooks/useIsAudioPlaying';
-export { default as RtspVideo, RtspVideoProps } from './components/RtspVideo';
 export { default as VideoContainer } from './components/VideoContainer';
 export { default as useHint } from './hooks/useHint';
 export { default as Hint } from './components/Hint';

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Images = exports.useImages = exports.Timer = exports.Hint = exports.useHint = exports.VideoContainer = exports.RtspVideo = exports.useIsAudioPlaying = exports.useAudioClips = exports.useWhenShowReset = exports.useShowPhase = exports.usePreloadedUrl = exports.useCogsMessage = exports.useCogsStateValues = exports.useCogsStateValue = exports.useCogsMediaConfig = exports.useCogsEvents = exports.useCogsEvent = exports.useCogsConfig = exports.useIsConnected = exports.useVideoPlayer = exports.useAudioPlayer = exports.useCogsConnection = exports.CogsConnectionProvider = void 0;
+exports.Images = exports.useImages = exports.Timer = exports.Hint = exports.useHint = exports.VideoContainer = exports.useIsAudioPlaying = exports.useAudioClips = exports.useWhenShowReset = exports.useShowPhase = exports.usePreloadedUrl = exports.useCogsMessage = exports.useCogsStateValues = exports.useCogsStateValue = exports.useCogsMediaConfig = exports.useCogsEvents = exports.useCogsEvent = exports.useCogsConfig = exports.useIsConnected = exports.useVideoPlayer = exports.useAudioPlayer = exports.useCogsConnection = exports.CogsConnectionProvider = void 0;
 // Utilities
 var CogsConnectionProvider_1 = require("./providers/CogsConnectionProvider");
 Object.defineProperty(exports, "CogsConnectionProvider", { enumerable: true, get: function () { return __importDefault(CogsConnectionProvider_1).default; } });
@@ -52,9 +52,6 @@ var useAudioClips_1 = require("./hooks/useAudioClips");
 Object.defineProperty(exports, "useAudioClips", { enumerable: true, get: function () { return __importDefault(useAudioClips_1).default; } });
 var useIsAudioPlaying_1 = require("./hooks/useIsAudioPlaying");
 Object.defineProperty(exports, "useIsAudioPlaying", { enumerable: true, get: function () { return __importDefault(useIsAudioPlaying_1).default; } });
-// RTSP
-var RtspVideo_1 = require("./components/RtspVideo");
-Object.defineProperty(exports, "RtspVideo", { enumerable: true, get: function () { return __importDefault(RtspVideo_1).default; } });
 // Video
 var VideoContainer_1 = require("./components/VideoContainer");
 Object.defineProperty(exports, "VideoContainer", { enumerable: true, get: function () { return __importDefault(VideoContainer_1).default; } });

package/package.json

@@ -3,7 +3,7 @@
   "description": "React components and hooks to connect to COGS to build a custom Media Master",
   "author": "Clockwork Dog <info@clockwork.dog>",
   "homepage": "https://github.com/clockwork-dog/cogs-sdk/tree/main/packages/react",
-  "version": "2.10.1",
+  "version": "2.11.0",
   "keywords": [],
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "release": "yarn npm publish --access public"
   },
   "dependencies": {
-    "@clockworkdog/cogs-client": "^2.10.1"
+    "@clockworkdog/cogs-client": "^2.11.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/dist/components/RtspVideo.d.ts

@@ -1,19 +0,0 @@
-import React, { ReactNode } from 'react';
-/**
- * @deprecated
- */
-export interface RtspVideoProps {
-    uri: string;
-    websocketHostname?: string;
-    websocketPort?: number;
-    websocketPath?: string;
-    live?: boolean;
-}
-/**
- * Takes an RTSP video URL and streams it in a video element. By default this will open the TCP relay
- * websocket on the same hostname as COGS is running, but can be configured by passing in custom
- * websocket details.
- *
- * @deprecated
- */
-export default function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, live, ...rest }: RtspVideoProps & React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>): ReactNode;

package/dist/components/RtspVideo.js

@@ -1,83 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = RtspVideo;
-const cogs_client_1 = require("@clockworkdog/cogs-client");
-const react_1 = __importStar(require("react"));
-const usePageVisibility_1 = __importDefault(require("../hooks/usePageVisibility"));
-/**
- * Takes an RTSP video URL and streams it in a video element. By default this will open the TCP relay
- * websocket on the same hostname as COGS is running, but can be configured by passing in custom
- * websocket details.
- *
- * @deprecated
- */
-function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, live, ...rest }) {
-    // We need to monitor the page visibility as we only want the stream to play when the page is visible
-    // This is needed because the stream will "pause" when the page looses focus and start playback when it
-    // becomes visible again. This will essentially cause a delay to be introduced into the stream when loosing
-    // page focus. To fix this, we simply stop and restart the stream when the page visibility changes.
-    const isVisible = (0, usePageVisibility_1.default)();
-    // For the video ref we actually use state so useEffect runs when the video ref changes
-    const [videoRef, setVideoRef] = (0, react_1.useState)(null);
-    const videoRefCallback = (0, react_1.useCallback)((newRef) => setVideoRef(newRef), []);
-    // Get the RTSP streamer from the COGS provider
-    const rtspStreamer = (0, react_1.useMemo)(() => new cogs_client_1.CogsRtspStreamer({
-        hostname: websocketHostname,
-        port: websocketPort,
-        path: websocketPath,
-    }), [websocketHostname, websocketPath, websocketPort]);
-    // An effect which runs when the video element, page visibility, or URIs change
-    // This will start playback of the camera stream in the given element
-    (0, react_1.useEffect)(() => {
-        // Nothing to do if we don't yet have a video element yet or if the page isn't visible
-        if (!videoRef || !rtspStreamer || !isVisible) {
-            return;
-        }
-        const pipeline = rtspStreamer.play({
-            uri,
-            videoElement: videoRef,
-            playbackRate: live ? cogs_client_1.LIVE_VIDEO_PLAYBACK_RATE : undefined,
-            restartIfStopped: live ? true : undefined,
-        });
-        return () => {
-            pipeline.close();
-        };
-    }, [uri, isVisible, rtspStreamer, videoRef, live]);
-    return react_1.default.createElement("video", { ref: videoRefCallback, autoPlay: true, ...rest });
-}

package/dist/hooks/usePageVisibility.d.ts

@@ -1,4 +0,0 @@
-/**
- * Uses the Page Visibility API to detect if the page is currently visible to the user.
- */
-export default function usePageVisibility(): boolean;

package/dist/hooks/usePageVisibility.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = usePageVisibility;
-const react_1 = require("react");
-/**
- * Uses the Page Visibility API to detect if the page is currently visible to the user.
- */
-function usePageVisibility() {
-    const [isVisible, setIsVisible] = (0, react_1.useState)(() => !document.hidden);
-    const onVisibilityChange = (0, react_1.useCallback)(() => setIsVisible(!document.hidden), []);
-    (0, react_1.useEffect)(() => {
-        document.addEventListener('visibilitychange', onVisibilityChange, false);
-        return () => {
-            document.removeEventListener('visibilitychange', onVisibilityChange);
-        };
-    });
-    return isVisible;
-}