@clockworkdog/cogs-client-react 1.4.3 → 1.5.0

package/dist/components/RtspVideo.d.ts

@@ -4,10 +4,11 @@ export interface RtspVideoProps {
     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.
  */
-export default function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, ...rest }: RtspVideoProps & React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>): JSX.Element | null;
+export default function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, live, ...rest }: RtspVideoProps & React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>): JSX.Element | null;

package/dist/components/RtspVideo.js

@@ -30,7 +30,7 @@ const usePageVisibility_1 = __importDefault(require("../hooks/usePageVisibility"
  * websocket on the same hostname as COGS is running, but can be configured by passing in custom
  * websocket details.
  */
-function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, ...rest }) {
+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
@@ -55,11 +55,13 @@ function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, ...re
         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]);
+    }, [uri, isVisible, rtspStreamer, videoRef, live]);
     return react_1.default.createElement("video", Object.assign({ ref: videoRefCallback, autoPlay: true }, rest));
 }
 exports.default = RtspVideo;

package/dist/components/VideoContainer.js

@@ -32,6 +32,8 @@ function VideoContainer({ className, style, videoPlayer: customVideoPlayer, full
         }
     }, [videoPlayer]);
     const fullscreenCustomStyle = typeof fullscreen === 'object' ? fullscreen.style : style;
-    return (react_1.default.createElement("div", { ref: containerRef, className: className, style: fullscreen ? { position: 'absolute', zIndex: 1, top: 0, left: 0, width: '100vw', height: '100vh', ...fullscreenCustomStyle } : style }));
+    return (react_1.default.createElement("div", { ref: containerRef, className: className, style: fullscreen
+            ? { position: 'absolute', zIndex: 1, top: 0, left: 0, width: '100vw', height: '100vh', ...fullscreenCustomStyle }
+            : { position: 'relative', ...style } }));
 }
 exports.default = VideoContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clockworkdog/cogs-client-react",
-  "version": "v1.4.3",
+  "version": "v1.5.0",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -31,7 +31,7 @@
     "typescript": "^4.1.3"
   },
   "dependencies": {
-    "@clockworkdog/cogs-client": "^1.4.3"
+    "@clockworkdog/cogs-client": "^1.5.0"
   },
   "description": "React components and hooks to connect to COGS to build a custom Media Master",
   "repository": {