@veltdev/react 3.0.61 → 3.0.63

package/cjs/index.js

@@ -140,7 +140,7 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
     }
 };
 
-var VELT_SDK_VERSION = '3.0.61';
+var VELT_SDK_VERSION = '3.0.63';
 var VELT_SDK_INIT_EVENT = 'onVeltInit';
 var VELT_TAB_ID = 'veltTabId';
 
@@ -754,7 +754,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 = React.useRef();
     var onCommentClickRef = React.useRef(onCommentClick);
     var onReactionClickRef = React.useRef(onReactionClick);
@@ -791,7 +791,7 @@ var VeltCommentPlayerTimeline = function (props) {
             }
         };
     }, []);
-    return (React__default["default"].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__default["default"].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) {
@@ -4768,25 +4768,43 @@ function useLiveStateSyncUtils() {
 function useLiveStateData(liveStateDataId, liveStateDataConfig) {
     var liveStateSyncElement = useLiveStateSyncUtils();
     var _a = React__default["default"].useState(), data = _a[0], setData = _a[1];
+    var subscriptionRef = React__default["default"].useRef();
+    // Memoize inputs
+    var inputs = React__default["default"].useMemo(function () {
+        return { liveStateDataId: liveStateDataId, liveStateDataConfig: liveStateDataConfig };
+    }, [liveStateDataId, JSON.stringify(liveStateDataConfig)]);
     React.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__default["default"].useMemo(function () {
+        return { liveStateDataId: liveStateDataId, liveStateData: liveStateData };
+    }, [liveStateDataId, JSON.stringify(liveStateData)]);
     React__default["default"].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();
@@ -5082,31 +5100,53 @@ function useViewsUtils() {
 function useUniqueViewsByUser(clientLocationId) {
     var viewsElement = useViewsUtils();
     var _a = React__default["default"].useState(null), data = _a[0], setData = _a[1];
+    var subscriptionRef = React__default["default"].useRef();
+    // Memoize the input
+    var memoizedClientLocationId = React__default["default"].useMemo(function () { return clientLocationId; }, [clientLocationId]);
     React.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__default["default"].useState(null), data = _a[0], setData = _a[1];
+    var subscriptionRef = React__default["default"].useRef();
+    // Memoize the input
+    var memoizedClientLocationId = React__default["default"].useMemo(function () { return clientLocationId; }, [clientLocationId]);
     React.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;
 }