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

package/cjs/types/components/SnippylyRecorderControlPanel/SnippylyRecorderControlPanel.d.ts

@@ -11,6 +11,8 @@ export interface IVeltRecorderControlPanelProps {
     autoOpenVideoEditor?: boolean;
     playVideoInFullScreen?: boolean;
     retakeOnVideoEditor?: boolean;
+    pictureInPicture?: boolean;
+    maxLength?: number;
 }
 declare const SnippylyRecorderControlPanel: React.FC<IVeltRecorderControlPanelProps>;
 export default SnippylyRecorderControlPanel;

package/cjs/types/components/SnippylyRecorderTool/SnippylyRecorderTool.d.ts

@@ -9,6 +9,8 @@ export interface IVeltRecorderToolProps extends React.DetailedHTMLProps<React.HT
     recordingCountdown?: boolean;
     variant?: string;
     retakeOnVideoEditor?: boolean;
+    pictureInPicture?: boolean;
+    maxLength?: number;
 }
 declare const SnippylyRecorderTool: React.FC<IVeltRecorderToolProps>;
 export default SnippylyRecorderTool;

package/cjs/types/components/VeltRecorderControlPanelWireframe/VeltRecorderControlPanelActionBarWireframe/VeltRecorderControlPanelActionBarPipWireframe/VeltRecorderControlPanelActionBarPipWireframe.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IVeltWireframeCommonProps } from '../../../../constants';
+export interface IVeltRecorderControlPanelActionBarPipWireframeProps extends IVeltWireframeCommonProps {
+}
+export interface IVeltRecorderControlPanelActionBarPipWireframe extends React.FC<IVeltRecorderControlPanelActionBarPipWireframeProps> {
+}
+declare const VeltRecorderControlPanelActionBarPipWireframe: IVeltRecorderControlPanelActionBarPipWireframe;
+export default VeltRecorderControlPanelActionBarPipWireframe;

package/cjs/types/components/VeltRecorderControlPanelWireframe/VeltRecorderControlPanelActionBarWireframe/VeltRecorderControlPanelActionBarPipWireframe/index.d.ts

@@ -0,0 +1 @@
+export { default } from './VeltRecorderControlPanelActionBarPipWireframe';

package/cjs/types/components/VeltRecorderControlPanelWireframe/VeltRecorderControlPanelActionBarWireframe/VeltRecorderControlPanelActionBarWireframe.d.ts

@@ -6,6 +6,7 @@ import { IVeltRecorderControlPanelActionBarStopWireframe } from './VeltRecorderC
 import { IVeltRecorderControlPanelActionBarTimeWireframe } from './VeltRecorderControlPanelActionBarTimeWireframe/VeltRecorderControlPanelActionBarTimeWireframe';
 import { IVeltRecorderControlPanelActionBarToggleWireframe } from './VeltRecorderControlPanelActionBarToggleWireframe/VeltRecorderControlPanelActionBarToggleWireframe';
 import { IVeltRecorderControlPanelActionBarTypeIconWireframe } from './VeltRecorderControlPanelActionBarTypeIconWireframe/VeltRecorderControlPanelActionBarTypeIconWireframe';
+import { IVeltRecorderControlPanelActionBarPipWireframe } from './VeltRecorderControlPanelActionBarPipWireframe/VeltRecorderControlPanelActionBarPipWireframe';
 export interface IVeltRecorderControlPanelActionBarWireframeProps extends IVeltWireframeCommonProps {
 }
 export interface IVeltRecorderControlPanelActionBarWireframe extends React.FC<IVeltRecorderControlPanelActionBarWireframeProps> {
@@ -15,6 +16,7 @@ export interface IVeltRecorderControlPanelActionBarWireframe extends React.FC<IV
     Toggle: IVeltRecorderControlPanelActionBarToggleWireframe;
     TypeIcon: IVeltRecorderControlPanelActionBarTypeIconWireframe;
     Waveform: IVeltRecorderControlPanelActionBarWaveformWireframe;
+    Pip: IVeltRecorderControlPanelActionBarPipWireframe;
 }
 declare const VeltRecorderControlPanelActionBarWireframe: IVeltRecorderControlPanelActionBarWireframe;
 export default VeltRecorderControlPanelActionBarWireframe;

package/cjs/types/components/VeltRecordingPreviewStepsDialogWireframe/VeltRecordingPreviewStepsDialogScreenPlayerWireframe/VeltRecordingPreviewStepsDialogScreenPlayerWireframe.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IVeltWireframeCommonProps } from '../../../constants';
+export interface IVeltRecordingPreviewStepsDialogScreenPlayerWireframeProps extends IVeltWireframeCommonProps {
+}
+export interface IVeltRecordingPreviewStepsDialogScreenPlayerWireframe extends React.FC<IVeltRecordingPreviewStepsDialogScreenPlayerWireframeProps> {
+}
+declare const VeltRecordingPreviewStepsDialogScreenPlayerWireframe: IVeltRecordingPreviewStepsDialogScreenPlayerWireframe;
+export default VeltRecordingPreviewStepsDialogScreenPlayerWireframe;

package/cjs/types/components/VeltRecordingPreviewStepsDialogWireframe/VeltRecordingPreviewStepsDialogScreenPlayerWireframe/index.d.ts

@@ -0,0 +1 @@
+export { default } from './VeltRecordingPreviewStepsDialogScreenPlayerWireframe';

package/cjs/types/components/VeltRecordingPreviewStepsDialogWireframe/VeltRecordingPreviewStepsDialogVideoWireframe/VeltRecordingPreviewStepsDialogVideoWireframe.d.ts

@@ -11,6 +11,7 @@ import { IVeltRecordingPreviewStepsDialogTimerWireframe } from '../VeltRecording
 import { IVeltRecordingPreviewStepsDialogVideoPlayerWireframe } from '../VeltRecordingPreviewStepsDialogVideoPlayerWireframe/VeltRecordingPreviewStepsDialogVideoPlayerWireframe';
 import { IVeltRecordingPreviewStepsDialogWaveformWireframe } from '../VeltRecordingPreviewStepsDialogWaveformWireframe/VeltRecordingPreviewStepsDialogWaveformWireframe';
 import { IVeltRecordingPreviewStepsDialogStartRecordingWireframe } from '../VeltRecordingPreviewStepsDialogStartRecordingWireframe/VeltRecordingPreviewStepsDialogStartRecordingWireframe';
+import { IVeltRecordingPreviewStepsDialogScreenPlayerWireframe } from '../VeltRecordingPreviewStepsDialogScreenPlayerWireframe/VeltRecordingPreviewStepsDialogScreenPlayerWireframe';
 import { IVeltWireframeCommonProps } from '../../../constants';
 export interface IVeltRecordingPreviewStepsDialogVideoWireframeProps extends IVeltWireframeCommonProps {
 }
@@ -26,6 +27,7 @@ export interface IVeltRecordingPreviewStepsDialogVideoWireframe extends React.FC
     StartRecording: IVeltRecordingPreviewStepsDialogStartRecordingWireframe;
     Timer: IVeltRecordingPreviewStepsDialogTimerWireframe;
     VideoPlayer: IVeltRecordingPreviewStepsDialogVideoPlayerWireframe;
+    ScreenPlayer: IVeltRecordingPreviewStepsDialogScreenPlayerWireframe;
     Waveform: IVeltRecordingPreviewStepsDialogWaveformWireframe;
 }
 declare const VeltRecordingPreviewStepsDialogVideoWireframe: IVeltRecordingPreviewStepsDialogVideoWireframe;

package/cjs/types/constants.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const VELT_SDK_VERSION = "4.5.2-beta.11";
+export declare const VELT_SDK_VERSION = "4.5.2-beta.13";
 export declare const VELT_SDK_INIT_EVENT = "onVeltInit";
 export declare const VELT_TAB_ID = "veltTabId";
 export declare const INTEGRITY_MAP: Record<string, string>;

package/esm/index.js

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useState, useEffect, useRef, useMemo } from 'react';
+import { flushSync } from 'react-dom';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -136,13 +137,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) {
@@ -620,7 +621,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 = useRef();
     var onRecordedDataRef = useRef(onRecordedData);
     // Update the ref to always point to the latest callback function
@@ -646,7 +647,7 @@ var SnippylyRecorderControlPanel = function (props) {
             }
         };
     }, []);
-    return (React.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.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) {
@@ -685,8 +686,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.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.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) {
@@ -4660,6 +4661,12 @@ var VeltRecordingPreviewStepsDialogVideoPlayerWireframe = function (props) {
     return (React.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.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);
@@ -4677,6 +4684,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"]);
@@ -4748,6 +4756,12 @@ var VeltRecorderControlPanelActionBarTypeIconWireframe = function (props) {
     return (React.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.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);
@@ -4759,6 +4773,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"]);
@@ -6795,7 +6810,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') {
+                flushSync(function () {
+                    setData(data);
+                });
+            }
+            else {
+                setData(data);
+            }
         });
         // Store the new subscription
         subscriptionRef.current = subscription;