@veltdev/react 4.5.0-beta.1 → 4.5.0-beta.11

package/cjs/index.js

@@ -140,7 +140,7 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
     }
 };
 
-var VELT_SDK_VERSION = '4.5.0-beta.1';
+var VELT_SDK_VERSION = '4.5.0-beta.11';
 var VELT_SDK_INIT_EVENT = 'onVeltInit';
 var VELT_TAB_ID = 'veltTabId';
 
@@ -454,7 +454,7 @@ var SnippylyCommentsSidebar = function (props) {
 };
 
 var SnippylyCommentTool = function (props) {
-    var targetCommentElementId = props.targetCommentElementId, targetElementId = props.targetElementId, onCommentModeChange = props.onCommentModeChange, sourceId = props.sourceId, children = props.children, darkMode = props.darkMode, variant = props.variant, shadowDom = props.shadowDom;
+    var targetCommentElementId = props.targetCommentElementId, targetElementId = props.targetElementId, onCommentModeChange = props.onCommentModeChange, sourceId = props.sourceId, children = props.children, darkMode = props.darkMode, variant = props.variant, shadowDom = props.shadowDom, context = props.context;
     var ref = React.useRef();
     var onCommentModeChangeRef = React.useRef(onCommentModeChange);
     // Update the ref to always point to the latest callback function
@@ -480,7 +480,7 @@ var SnippylyCommentTool = function (props) {
             }
         };
     }, []);
-    return (React__default["default"].createElement("velt-comment-tool", { ref: ref, "target-comment-element-id": targetCommentElementId, "target-element-id": targetElementId, "source-id": sourceId, variant: variant, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    return (React__default["default"].createElement("velt-comment-tool", { ref: ref, "target-comment-element-id": targetCommentElementId, "target-element-id": targetElementId, "source-id": sourceId, variant: variant, context: JSON.stringify(context), "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyCursor = function (props) {
@@ -531,7 +531,7 @@ var SnippylyHuddleTool = function (props) {
 };
 
 var SnippylyPresence = function (props) {
-    var maxUsers = props.maxUsers, inactivityTime = props.inactivityTime, documentParams = props.documentParams, location = props.location, locationId = props.locationId, self = props.self, onPresenceUserClick = props.onPresenceUserClick, onUsersChanged = props.onUsersChanged, onPresenceUserChange = props.onPresenceUserChange, disableFlockNavigation = props.disableFlockNavigation, defaultFlockNavigation = props.defaultFlockNavigation, onNavigate = props.onNavigate, flockMode = props.flockMode, shadowDom = props.shadowDom;
+    var maxUsers = props.maxUsers, inactivityTime = props.inactivityTime, offlineInactivityTime = props.offlineInactivityTime, documentParams = props.documentParams, location = props.location, locationId = props.locationId, self = props.self, onPresenceUserClick = props.onPresenceUserClick, onUsersChanged = props.onUsersChanged, onPresenceUserChange = props.onPresenceUserChange, disableFlockNavigation = props.disableFlockNavigation, defaultFlockNavigation = props.defaultFlockNavigation, onNavigate = props.onNavigate, flockMode = props.flockMode, shadowDom = props.shadowDom;
     var ref = React.useRef();
     var onUsersChangedRef = React.useRef(onUsersChanged);
     var onPresenceUserChangeRef = React.useRef(onPresenceUserChange);
@@ -586,7 +586,7 @@ var SnippylyPresence = function (props) {
             }
         };
     }, []);
-    return (React__default["default"].createElement("velt-presence", { ref: ref, "flock-mode": [true, false].includes(flockMode) ? (flockMode ? 'true' : 'false') : undefined, "max-users": maxUsers, "inactivity-time": inactivityTime, "document-params": (typeof documentParams === 'object') ? JSON.stringify(documentParams) : (documentParams ? documentParams : undefined), "disable-flock-navigation": [true, false].includes(disableFlockNavigation) ? (disableFlockNavigation ? 'true' : 'false') : undefined, "default-flock-navigation": [true, false].includes(defaultFlockNavigation) ? (defaultFlockNavigation ? 'true' : 'false') : undefined, self: [true, false].includes(self) ? (self ? 'true' : 'false') : undefined, location: (typeof location === 'object') ? JSON.stringify(location) : (location ? location : undefined), "location-id": locationId, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined }));
+    return (React__default["default"].createElement("velt-presence", { ref: ref, "flock-mode": [true, false].includes(flockMode) ? (flockMode ? 'true' : 'false') : undefined, "max-users": maxUsers, "inactivity-time": inactivityTime, "offline-inactivity-time": offlineInactivityTime, "document-params": (typeof documentParams === 'object') ? JSON.stringify(documentParams) : (documentParams ? documentParams : undefined), "disable-flock-navigation": [true, false].includes(disableFlockNavigation) ? (disableFlockNavigation ? 'true' : 'false') : undefined, "default-flock-navigation": [true, false].includes(defaultFlockNavigation) ? (defaultFlockNavigation ? 'true' : 'false') : undefined, self: [true, false].includes(self) ? (self ? 'true' : 'false') : undefined, location: (typeof location === 'object') ? JSON.stringify(location) : (location ? location : undefined), "location-id": locationId, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined }));
 };
 
 var SnippylyRecorderControlPanel = function (props) {
@@ -2686,6 +2686,16 @@ VeltCommentsSidebarFilterTagged.Name = VeltCommentsSidebarFilterName;
 VeltCommentsSidebarFilterTagged.Item = VeltCommentsSidebarFilterItem;
 VeltCommentsSidebarFilterTagged.Search = VeltCommentsSidebarFilterSearch;
 
+var VeltCommentsSidebarFilterDocument = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-filter-document-wireframe", __assign({}, transformedProps), children));
+};
+VeltCommentsSidebarFilterDocument.Name = VeltCommentsSidebarFilterName;
+VeltCommentsSidebarFilterDocument.Item = VeltCommentsSidebarFilterItem;
+VeltCommentsSidebarFilterDocument.ViewAll = VeltCommentsSidebarFilterViewAll;
+VeltCommentsSidebarFilterDocument.Search = VeltCommentsSidebarFilterSearch;
+
 var VeltCommentsSidebarFilter = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     var transformedProps = transformWireframeProps(remainingProps);
@@ -2707,6 +2717,7 @@ VeltCommentsSidebarFilter.Item = VeltCommentsSidebarFilterItem;
 VeltCommentsSidebarFilter.Status = VeltCommentsSidebarFilterStatus;
 VeltCommentsSidebarFilter.ResetButton = VeltCommentsSidebarFilterResetButton;
 VeltCommentsSidebarFilter.Search = VeltCommentsSidebarFilterSearch;
+VeltCommentsSidebarFilter.Document = VeltCommentsSidebarFilterDocument;
 
 var VeltCommentsSidebarFilterButton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
@@ -2795,6 +2806,33 @@ var VeltCommentsSidebarLocationFilterDropdown = function (props) {
 VeltCommentsSidebarLocationFilterDropdown.Trigger = VeltCommentsSidebarLocationFilterDropdownTrigger;
 VeltCommentsSidebarLocationFilterDropdown.Content = VeltCommentsSidebarLocationFilterDropdownContent;
 
+var VeltCommentsSidebarDocumentFilterDropdownContent = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-document-filter-dropdown-content-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltCommentsSidebarDocumentFilterDropdownTriggerLabel = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-document-filter-dropdown-trigger-label-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltCommentsSidebarDocumentFilterDropdownTrigger = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-document-filter-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
+};
+VeltCommentsSidebarDocumentFilterDropdownTrigger.Label = VeltCommentsSidebarDocumentFilterDropdownTriggerLabel;
+
+var VeltCommentsSidebarDocumentFilterDropdownWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-document-filter-dropdown-wireframe", __assign({}, transformedProps), children));
+};
+VeltCommentsSidebarDocumentFilterDropdownWireframe.Trigger = VeltCommentsSidebarDocumentFilterDropdownTrigger;
+VeltCommentsSidebarDocumentFilterDropdownWireframe.Content = VeltCommentsSidebarDocumentFilterDropdownContent;
+
 var VeltCommentsSidebarMinimalActionsDropdownContentMarkAllReadWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     var transformedProps = transformWireframeProps(remainingProps);
@@ -3062,6 +3100,7 @@ VeltCommentsSidebarWireframe.Skeleton = VeltCommentsSidebarSkeleton;
 VeltCommentsSidebarWireframe.Panel = VeltCommentsSidebarPanel;
 VeltCommentsSidebarWireframe.MinimalFilterDropdown = VeltCommentsSidebarMinimalFilterDropdown;
 VeltCommentsSidebarWireframe.LocationFilterDropdown = VeltCommentsSidebarLocationFilterDropdown;
+VeltCommentsSidebarWireframe.DocumentFilterDropdown = VeltCommentsSidebarDocumentFilterDropdownWireframe;
 VeltCommentsSidebarWireframe.MinimalActionsDropdown = VeltCommentsSidebarMinimalActionsDropdownWireframe;
 VeltCommentsSidebarWireframe.ResetFilterButton = VeltCommentsSidebarResetFilterButtonWireframe;
 VeltCommentsSidebarWireframe.ActionButton = VeltCommentsSidebarActionButton;
@@ -4965,11 +5004,88 @@ var VeltVideoEditorPlayerDeleteButtonWireframe = function (props) {
     return (React__default["default"].createElement("velt-video-editor-player-delete-button-wireframe", __assign({}, transformedProps), children));
 };
 
+var VeltVideoEditorPlayerTimelineMarkerWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-timeline-marker-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltVideoEditorPlayerZoomButtonTriggerWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-zoom-button-trigger-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltVideoEditorPlayerZoomButtonOptionsListItemWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-zoom-button-options-list-item-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltVideoEditorPlayerZoomButtonOptionsListWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-zoom-button-options-list-wireframe", __assign({}, transformedProps), children));
+};
+VeltVideoEditorPlayerZoomButtonOptionsListWireframe.Item = VeltVideoEditorPlayerZoomButtonOptionsListItemWireframe;
+
+var VeltVideoEditorPlayerZoomButtonOptionsInputWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-zoom-button-options-input-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltVideoEditorPlayerZoomButtonOptionsWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-zoom-button-options-wireframe", __assign({}, transformedProps), children));
+};
+VeltVideoEditorPlayerZoomButtonOptionsWireframe.List = VeltVideoEditorPlayerZoomButtonOptionsListWireframe;
+VeltVideoEditorPlayerZoomButtonOptionsWireframe.Input = VeltVideoEditorPlayerZoomButtonOptionsInputWireframe;
+
+var VeltVideoEditorPlayerZoomButtonWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-zoom-button-wireframe", __assign({}, transformedProps), children));
+};
+VeltVideoEditorPlayerZoomButtonWireframe.Trigger = VeltVideoEditorPlayerZoomButtonTriggerWireframe;
+VeltVideoEditorPlayerZoomButtonWireframe.Options = VeltVideoEditorPlayerZoomButtonOptionsWireframe;
+
+var VeltVideoEditorPlayerTimelineScaleWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-timeline-scale-wireframe", __assign({}, transformedProps), children));
+};
+VeltVideoEditorPlayerTimelineScaleWireframe.ZoomButton = VeltVideoEditorPlayerZoomButtonWireframe;
+
+var VeltVideoEditorPlayerTimelineTrimWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-timeline-trim-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltVideoEditorPlayerTimelineContainerWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-timeline-container-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltVideoEditorPlayerTimelinePlayheadWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-timeline-playhead-wireframe", __assign({}, transformedProps), children));
+};
+
 var VeltVideoEditorPlayerTimelineWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     var transformedProps = transformWireframeProps(remainingProps);
     return (React__default["default"].createElement("velt-video-editor-player-timeline-wireframe", __assign({}, transformedProps), children));
 };
+VeltVideoEditorPlayerTimelineWireframe.Marker = VeltVideoEditorPlayerTimelineMarkerWireframe;
+VeltVideoEditorPlayerTimelineWireframe.Scale = VeltVideoEditorPlayerTimelineScaleWireframe;
+VeltVideoEditorPlayerTimelineWireframe.Trim = VeltVideoEditorPlayerTimelineTrimWireframe;
+VeltVideoEditorPlayerTimelineWireframe.Container = VeltVideoEditorPlayerTimelineContainerWireframe;
+VeltVideoEditorPlayerTimelineWireframe.Playhead = VeltVideoEditorPlayerTimelinePlayheadWireframe;
 
 var VeltVideoEditorPlayerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
@@ -6377,6 +6493,33 @@ function useLiveState(liveStateDataId, initialValue, options) {
     return [data, setDataFunction, serverConnectionState];
 }
 
+function useLiveStateSyncEventCallback(action) {
+    var liveStateSyncElement = useLiveStateSyncUtils();
+    var _a = React.useState(null), data = _a[0], setData = _a[1];
+    var subscriptionRef = React.useRef(null);
+    var memoizedAction = React.useMemo(function () { return action; }, [action]);
+    React.useEffect(function () {
+        var _a;
+        if (!(liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.on))
+            return;
+        if (subscriptionRef.current) {
+            subscriptionRef.current.unsubscribe();
+        }
+        var subscription = (_a = liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.on(memoizedAction)) === null || _a === void 0 ? void 0 : _a.subscribe(function (data) {
+            setData(data);
+        });
+        // Store the new subscription
+        subscriptionRef.current = subscription;
+        // Cleanup function
+        return function () {
+            if (subscriptionRef.current) {
+                subscriptionRef.current.unsubscribe();
+            }
+        };
+    }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.on, memoizedAction]);
+    return data;
+}
+
 function usePresenceUtils() {
     var _a = React__default["default"].useState(), presenceElement = _a[0], setPresenceElement = _a[1];
     var client = useVeltClient().client;
@@ -6403,6 +6546,68 @@ function usePresenceUsers() {
     }, [presenceElement]);
     return data;
 }
+function usePresenceData(query) {
+    var presenceElement = usePresenceUtils();
+    var _a = React.useState({ data: null }), data = _a[0], setData = _a[1];
+    var subscriptionRef = React.useRef();
+    // Memoize the inputs
+    var memoizedData = React.useMemo(function () {
+        return query;
+    }, [JSON.stringify(query)]);
+    React.useEffect(function () {
+        if (!(presenceElement === null || presenceElement === void 0 ? void 0 : presenceElement.getData))
+            return;
+        // Unsubscribe from the previous subscription if it exists
+        if (subscriptionRef.current) {
+            subscriptionRef.current.unsubscribe();
+        }
+        var subscription = presenceElement.getData(memoizedData)
+            .subscribe(function (res) {
+            if (res) {
+                setData(res);
+            }
+            else {
+                setData({ data: null });
+            }
+        });
+        // Store the new subscription
+        subscriptionRef.current = subscription;
+        // Cleanup function
+        return function () {
+            if (subscriptionRef.current) {
+                subscriptionRef.current.unsubscribe();
+            }
+        };
+    }, [presenceElement === null || presenceElement === void 0 ? void 0 : presenceElement.getData, memoizedData]);
+    return data;
+}
+
+function usePresenceEventCallback(action) {
+    var presenceElement = usePresenceUtils();
+    var _a = React.useState(null), data = _a[0], setData = _a[1];
+    var subscriptionRef = React.useRef(null);
+    var memoizedAction = React.useMemo(function () { return action; }, [action]);
+    React.useEffect(function () {
+        var _a;
+        if (!(presenceElement === null || presenceElement === void 0 ? void 0 : presenceElement.on))
+            return;
+        if (subscriptionRef.current) {
+            subscriptionRef.current.unsubscribe();
+        }
+        var subscription = (_a = presenceElement === null || presenceElement === void 0 ? void 0 : presenceElement.on(memoizedAction)) === null || _a === void 0 ? void 0 : _a.subscribe(function (data) {
+            setData(data);
+        });
+        // Store the new subscription
+        subscriptionRef.current = subscription;
+        // Cleanup function
+        return function () {
+            if (subscriptionRef.current) {
+                subscriptionRef.current.unsubscribe();
+            }
+        };
+    }, [presenceElement === null || presenceElement === void 0 ? void 0 : presenceElement.on, memoizedAction]);
+    return data;
+}
 
 function useRecorderUtils() {
     var _a = React__default["default"].useState(), recorderElement = _a[0], setRecorderElement = _a[1];
@@ -7041,9 +7246,12 @@ exports.useLiveSelectionDataHandler = useLiveSelectionDataHandler;
 exports.useLiveSelectionUtils = useLiveSelectionUtils;
 exports.useLiveState = useLiveState;
 exports.useLiveStateData = useLiveStateData;
+exports.useLiveStateSyncEventCallback = useLiveStateSyncEventCallback;
 exports.useLiveStateSyncUtils = useLiveStateSyncUtils;
 exports.useNotificationUtils = useNotificationUtils;
 exports.useNotificationsData = useNotificationsData;
+exports.usePresenceData = usePresenceData;
+exports.usePresenceEventCallback = usePresenceEventCallback;
 exports.usePresenceUsers = usePresenceUsers;
 exports.usePresenceUtils = usePresenceUtils;
 exports.useRecorderAddHandler = useRecorderAddHandler;