@veltdev/react 4.5.2-beta.11 → 4.5.2-beta.13

package/cjs/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var reactDom = require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -144,13 +145,13 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain, integ
     }
 };
 
-var VELT_SDK_VERSION = '4.5.2-beta.11';
+var VELT_SDK_VERSION = '4.5.2-beta.13';
 var VELT_SDK_INIT_EVENT = 'onVeltInit';
 var VELT_TAB_ID = 'veltTabId';
 // integrity map for the Velt SDK
 // Note: generate integrity hashes with: https://www.srihash.org/
 var INTEGRITY_MAP = {
-    '4.5.2-beta.11': 'sha384-zlXomcC9rDwpcmKm3m5xVdanWaZNX/TlUXH7Sa94bqjIGhJjHlwxEU8KcIeosOa0',
+    '4.5.2-beta.13': 'sha384-9fs09QQnU0co3WsdHf2mQriSxbEKITWuSF6zSus29XbBJYrOZTR27Duzwq27MWFO',
 };
 
 var SnippylyProvider = function (props) {
@@ -628,7 +629,7 @@ var SnippylyPresence = function (props) {
 };
 
 var SnippylyRecorderControlPanel = function (props) {
-    var mode = props.mode, panelId = props.panelId, onRecordedData = props.onRecordedData, recordingCountdown = props.recordingCountdown, recordingTranscription = props.recordingTranscription, videoEditor = props.videoEditor, settingsEmbedded = props.settingsEmbedded, autoOpenVideoEditor = props.autoOpenVideoEditor, playVideoInFullScreen = props.playVideoInFullScreen, retakeOnVideoEditor = props.retakeOnVideoEditor;
+    var mode = props.mode, panelId = props.panelId, onRecordedData = props.onRecordedData, recordingCountdown = props.recordingCountdown, recordingTranscription = props.recordingTranscription, videoEditor = props.videoEditor, settingsEmbedded = props.settingsEmbedded, autoOpenVideoEditor = props.autoOpenVideoEditor, playVideoInFullScreen = props.playVideoInFullScreen, retakeOnVideoEditor = props.retakeOnVideoEditor, pictureInPicture = props.pictureInPicture, maxLength = props.maxLength;
     var ref = React.useRef();
     var onRecordedDataRef = React.useRef(onRecordedData);
     // Update the ref to always point to the latest callback function
@@ -654,7 +655,7 @@ var SnippylyRecorderControlPanel = function (props) {
             }
         };
     }, []);
-    return (React__default["default"].createElement("velt-recorder-control-panel", { ref: ref, mode: mode, "panel-id": panelId, "retake-on-video-editor": [true, false].includes(retakeOnVideoEditor) ? (retakeOnVideoEditor ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "recording-transcription": [true, false].includes(recordingTranscription) ? (recordingTranscription ? 'true' : 'false') : undefined, "video-editor": [true, false].includes(videoEditor) ? (videoEditor ? 'true' : 'false') : undefined, "settings-embedded": [true, false].includes(settingsEmbedded) ? (settingsEmbedded ? 'true' : 'false') : undefined, "auto-open-video-editor": [true, false].includes(autoOpenVideoEditor) ? (autoOpenVideoEditor ? 'true' : 'false') : undefined, "play-video-in-full-screen": [true, false].includes(playVideoInFullScreen) ? (playVideoInFullScreen ? 'true' : 'false') : undefined }));
+    return (React__default["default"].createElement("velt-recorder-control-panel", { ref: ref, mode: mode, "panel-id": panelId, "retake-on-video-editor": [true, false].includes(retakeOnVideoEditor) ? (retakeOnVideoEditor ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "recording-transcription": [true, false].includes(recordingTranscription) ? (recordingTranscription ? 'true' : 'false') : undefined, "video-editor": [true, false].includes(videoEditor) ? (videoEditor ? 'true' : 'false') : undefined, "settings-embedded": [true, false].includes(settingsEmbedded) ? (settingsEmbedded ? 'true' : 'false') : undefined, "auto-open-video-editor": [true, false].includes(autoOpenVideoEditor) ? (autoOpenVideoEditor ? 'true' : 'false') : undefined, "play-video-in-full-screen": [true, false].includes(playVideoInFullScreen) ? (playVideoInFullScreen ? 'true' : 'false') : undefined, "picture-in-picture": [true, false].includes(pictureInPicture) ? (pictureInPicture ? 'true' : 'false') : undefined, "max-length": maxLength }));
 };
 
 var SnippylyRecorderNotes = function (props) {
@@ -693,8 +694,8 @@ var SnippylyRecorderPlayer = function (props) {
 };
 
 var SnippylyRecorderTool = function (props) {
-    var type = props.type, panelId = props.panelId, buttonLabel = props.buttonLabel, children = props.children, darkMode = props.darkMode, shadowDom = props.shadowDom, recordingCountdown = props.recordingCountdown, variant = props.variant, retakeOnVideoEditor = props.retakeOnVideoEditor;
-    return (React__default["default"].createElement("velt-recorder-tool", { type: type, "panel-id": panelId, "button-label": buttonLabel, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "retake-on-video-editor": [true, false].includes(retakeOnVideoEditor) ? (retakeOnVideoEditor ? 'true' : 'false') : undefined, variant: variant, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined }, children));
+    var type = props.type, panelId = props.panelId, buttonLabel = props.buttonLabel, children = props.children, darkMode = props.darkMode, shadowDom = props.shadowDom, recordingCountdown = props.recordingCountdown, variant = props.variant, retakeOnVideoEditor = props.retakeOnVideoEditor, pictureInPicture = props.pictureInPicture, maxLength = props.maxLength;
+    return (React__default["default"].createElement("velt-recorder-tool", { type: type, "panel-id": panelId, "button-label": buttonLabel, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "retake-on-video-editor": [true, false].includes(retakeOnVideoEditor) ? (retakeOnVideoEditor ? 'true' : 'false') : undefined, variant: variant, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "picture-in-picture": [true, false].includes(pictureInPicture) ? (pictureInPicture ? 'true' : 'false') : undefined, "max-length": maxLength }, children));
 };
 
 var SnippylySidebarButton = function (props) {
@@ -4668,6 +4669,12 @@ var VeltRecordingPreviewStepsDialogVideoPlayerWireframe = function (props) {
     return (React__default["default"].createElement("velt-recording-preview-steps-dialog-video-player-wireframe", __assign({}, transformedProps), children));
 };
 
+var VeltRecordingPreviewStepsDialogScreenPlayerWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recording-preview-steps-dialog-screen-player-wireframe", __assign({}, transformedProps), children));
+};
+
 var VeltRecordingPreviewStepsDialogVideoWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     var transformedProps = transformWireframeProps(remainingProps);
@@ -4685,6 +4692,7 @@ VeltRecordingPreviewStepsDialogVideoWireframe.StartRecording = VeltRecordingPrev
 VeltRecordingPreviewStepsDialogVideoWireframe.Timer = VeltRecordingPreviewStepsDialogTimerWireframe;
 VeltRecordingPreviewStepsDialogVideoWireframe.VideoPlayer = VeltRecordingPreviewStepsDialogVideoPlayerWireframe;
 VeltRecordingPreviewStepsDialogVideoWireframe.Waveform = VeltRecordingPreviewStepsDialogWaveformWireframe;
+VeltRecordingPreviewStepsDialogVideoWireframe.ScreenPlayer = VeltRecordingPreviewStepsDialogScreenPlayerWireframe;
 
 var VeltRecordingPreviewStepsDialogWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
@@ -4756,6 +4764,12 @@ var VeltRecorderControlPanelActionBarTypeIconWireframe = function (props) {
     return (React__default["default"].createElement("velt-recorder-control-panel-action-bar-type-icon-wireframe", __assign({}, transformedProps), children));
 };
 
+var VeltRecorderControlPanelActionBarPipWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-control-panel-action-bar-pip-wireframe", __assign({}, transformedProps), children));
+};
+
 var VeltRecorderControlPanelActionBarWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     var transformedProps = transformWireframeProps(remainingProps);
@@ -4767,6 +4781,7 @@ VeltRecorderControlPanelActionBarWireframe.Time = VeltRecorderControlPanelAction
 VeltRecorderControlPanelActionBarWireframe.Toggle = VeltRecorderControlPanelActionBarToggleWireframe;
 VeltRecorderControlPanelActionBarWireframe.TypeIcon = VeltRecorderControlPanelActionBarTypeIconWireframe;
 VeltRecorderControlPanelActionBarWireframe.Waveform = VeltRecorderControlPanelActionBarWaveformWireframe;
+VeltRecorderControlPanelActionBarWireframe.Pip = VeltRecorderControlPanelActionBarPipWireframe;
 
 var VeltRecorderControlPanelCollapsedButtonOffWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
@@ -6803,7 +6818,14 @@ function useVeltEventCallback(action) {
             subscriptionRef.current.unsubscribe();
         }
         var subscription = (_a = client === null || client === void 0 ? void 0 : client.on(memoizedAction)) === null || _a === void 0 ? void 0 : _a.subscribe(function (data) {
-            setData(data);
+            if (memoizedAction === 'initUpdate') {
+                reactDom.flushSync(function () {
+                    setData(data);
+                });
+            }
+            else {
+                setData(data);
+            }
         });
         // Store the new subscription
         subscriptionRef.current = subscription;