@veltdev/react 3.0.61 → 3.0.62

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface IVeltCommentPlayerTimelineProps {
     totalMediaLength?: number;
+    offset?: number;
     shadowDom?: boolean;
     videoPlayerId?: string;
     onCommentClick?: Function;

package/cjs/types/constants.d.ts

@@ -1,3 +1,3 @@
-export declare const VELT_SDK_VERSION = "3.0.61";
+export declare const VELT_SDK_VERSION = "3.0.62";
 export declare const VELT_SDK_INIT_EVENT = "onVeltInit";
 export declare const VELT_TAB_ID = "veltTabId";

package/cjs/types/hooks/LiveStateSyncElement.d.ts

@@ -4,7 +4,7 @@ declare class LiveStateDataConfig {
 }
 export declare function useLiveStateSyncUtils(): LiveStateSyncElement | undefined;
 export declare function useLiveStateData(liveStateDataId?: string, liveStateDataConfig?: LiveStateDataConfig): any;
-export declare function useSetLiveStateData(liveStateDataId: string, liveStateData: any): any;
+export declare function useSetLiveStateData(liveStateDataId: string, liveStateData: any): void;
 export declare function useUserEditorState(): UserEditorAccess | null;
 export declare function useEditor(): User | null;
 export declare function useEditorAccessTimer(): EditorAccessTimer;

package/esm/index.js

@@ -132,7 +132,7 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
     }
 };
 
-var VELT_SDK_VERSION = '3.0.61';
+var VELT_SDK_VERSION = '3.0.62';
 var VELT_SDK_INIT_EVENT = 'onVeltInit';
 var VELT_TAB_ID = 'veltTabId';
 
@@ -746,7 +746,7 @@ var SnippylyUserRequestTool = function (props) {
 };
 
 var VeltCommentPlayerTimeline = function (props) {
-    var totalMediaLength = props.totalMediaLength, onCommentClick = props.onCommentClick, shadowDom = props.shadowDom, videoPlayerId = props.videoPlayerId, onReactionClick = props.onReactionClick;
+    var totalMediaLength = props.totalMediaLength, offset = props.offset, onCommentClick = props.onCommentClick, shadowDom = props.shadowDom, videoPlayerId = props.videoPlayerId, onReactionClick = props.onReactionClick;
     var ref = useRef();
     var onCommentClickRef = useRef(onCommentClick);
     var onReactionClickRef = useRef(onReactionClick);
@@ -783,7 +783,7 @@ var VeltCommentPlayerTimeline = function (props) {
             }
         };
     }, []);
-    return (React.createElement("velt-comment-player-timeline", { ref: ref, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "total-media-length": totalMediaLength, "video-player-id": videoPlayerId }));
+    return (React.createElement("velt-comment-player-timeline", { ref: ref, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "total-media-length": totalMediaLength, offset: offset, "video-player-id": videoPlayerId }));
 };
 
 var VeltVideoPlayer = function (props) {
@@ -4760,25 +4760,43 @@ function useLiveStateSyncUtils() {
 function useLiveStateData(liveStateDataId, liveStateDataConfig) {
     var liveStateSyncElement = useLiveStateSyncUtils();
     var _a = React.useState(), data = _a[0], setData = _a[1];
+    var subscriptionRef = React.useRef();
+    // Memoize inputs
+    var inputs = React.useMemo(function () {
+        return { liveStateDataId: liveStateDataId, liveStateDataConfig: liveStateDataConfig };
+    }, [liveStateDataId, JSON.stringify(liveStateDataConfig)]);
     useEffect(function () {
         if (!(liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData))
             return;
-        var subscription = liveStateSyncElement.getLiveStateData(liveStateDataId, liveStateDataConfig).subscribe(function (res) {
+        if (subscriptionRef.current) {
+            subscriptionRef.current.unsubscribe();
+        }
+        var subscription = liveStateSyncElement.getLiveStateData(inputs.liveStateDataId, inputs.liveStateDataConfig)
+            .subscribe(function (res) {
             setData(res);
         });
+        subscriptionRef.current = subscription;
         return function () {
-            subscription.unsubscribe();
+            if (subscriptionRef.current) {
+                subscriptionRef.current.unsubscribe();
+            }
         };
-    }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData]);
+    }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData, inputs]);
     return data;
 }
 function useSetLiveStateData(liveStateDataId, liveStateData) {
     var liveStateSyncElement = useLiveStateSyncUtils();
+    // Memoize inputs
+    var inputs = React.useMemo(function () {
+        return { liveStateDataId: liveStateDataId, liveStateData: liveStateData };
+    }, [liveStateDataId, JSON.stringify(liveStateData)]);
     React.useEffect(function () {
-        if (liveStateSyncElement && liveStateDataId && liveStateData) {
-            liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.setLiveStateData(liveStateDataId, liveStateData);
+        if (!(liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.setLiveStateData))
+            return;
+        if (inputs.liveStateDataId && inputs.liveStateData) {
+            liveStateSyncElement.setLiveStateData(inputs.liveStateDataId, inputs.liveStateData);
         }
-    }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.setLiveStateData]);
+    }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.setLiveStateData, inputs]);
 }
 function useUserEditorState() {
     var liveStateSyncElement = useLiveStateSyncUtils();
@@ -5074,31 +5092,53 @@ function useViewsUtils() {
 function useUniqueViewsByUser(clientLocationId) {
     var viewsElement = useViewsUtils();
     var _a = React.useState(null), data = _a[0], setData = _a[1];
+    var subscriptionRef = React.useRef();
+    // Memoize the input
+    var memoizedClientLocationId = React.useMemo(function () { return clientLocationId; }, [clientLocationId]);
     useEffect(function () {
         if (!(viewsElement === null || viewsElement === void 0 ? void 0 : viewsElement.getUniqueViewsByUser))
             return;
-        var subscription = viewsElement.getUniqueViewsByUser(clientLocationId).subscribe(function (res) {
+        // Unsubscribe from the previous subscription if it exists
+        if (subscriptionRef.current) {
+            subscriptionRef.current.unsubscribe();
+        }
+        var subscription = viewsElement.getUniqueViewsByUser(memoizedClientLocationId).subscribe(function (res) {
             setData(res);
         });
+        // Store the new subscription
+        subscriptionRef.current = subscription;
         return function () {
-            subscription.unsubscribe();
+            if (subscriptionRef.current) {
+                subscriptionRef.current.unsubscribe();
+            }
         };
-    }, [viewsElement === null || viewsElement === void 0 ? void 0 : viewsElement.getUniqueViewsByUser]);
+    }, [viewsElement === null || viewsElement === void 0 ? void 0 : viewsElement.getUniqueViewsByUser, memoizedClientLocationId]);
     return data;
 }
 function useUniqueViewsByDate(clientLocationId) {
     var viewsElement = useViewsUtils();
     var _a = React.useState(null), data = _a[0], setData = _a[1];
+    var subscriptionRef = React.useRef();
+    // Memoize the input
+    var memoizedClientLocationId = React.useMemo(function () { return clientLocationId; }, [clientLocationId]);
     useEffect(function () {
         if (!(viewsElement === null || viewsElement === void 0 ? void 0 : viewsElement.getUniqueViewsByDate))
             return;
-        var subscription = viewsElement.getUniqueViewsByDate(clientLocationId).subscribe(function (res) {
+        // Unsubscribe from the previous subscription if it exists
+        if (subscriptionRef.current) {
+            subscriptionRef.current.unsubscribe();
+        }
+        var subscription = viewsElement.getUniqueViewsByDate(memoizedClientLocationId).subscribe(function (res) {
             setData(res);
         });
+        // Store the new subscription
+        subscriptionRef.current = subscription;
         return function () {
-            subscription.unsubscribe();
+            if (subscriptionRef.current) {
+                subscriptionRef.current.unsubscribe();
+            }
         };
-    }, [viewsElement === null || viewsElement === void 0 ? void 0 : viewsElement.getUniqueViewsByDate]);
+    }, [viewsElement === null || viewsElement === void 0 ? void 0 : viewsElement.getUniqueViewsByDate, memoizedClientLocationId]);
     return data;
 }