@appquality/unguess-design-system 2.12.63 → 2.12.64

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v2.12.64 (Mon Jan 30 2023)
+
+#### 🐛 Bug Fix
+
+- refactor(controls): progress update must be attached to any ref change [#193](https://github.com/AppQuality/unguess-design-system/pull/193) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.12.62 (Mon Jan 30 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -4248,15 +4248,15 @@ const Controls = (props) => {
         }
         return 0;
     };
-    const handleProgressUpdate = () => {
+    const handleProgressUpdate = React.useCallback(() => {
         const currentTime = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) || 0;
         setProgress((currentTime / duration) * 100);
-    };
-    const handleSkipAhead = (pageX) => {
+    }, [duration, videoRef]);
+    const handleSkipAhead = React.useCallback((pageX) => {
         if (videoRef) {
             videoRef.currentTime = getVideoPositionFromEvent(pageX);
         }
-    };
+    }, [videoRef]);
     const StyledDiv = styled__default["default"].div `
     display: flex;
     align-items: center;
@@ -4386,6 +4386,10 @@ const Player = React.forwardRef((props, forwardRef) => {
         setIsLoaded(true);
         setDuration(((_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) || 0);
     };
+    const handleDuration = React.useCallback(() => {
+        var _a;
+        setDuration(((_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) || 0);
+    }, [videoRef]);
     const handlePlayPause = React.useCallback(() => {
         if (!videoRef || !videoRef.current)
             return;
@@ -4424,7 +4428,7 @@ const Player = React.forwardRef((props, forwardRef) => {
     return (jsxRuntime.jsxs(Container, Object.assign({ isLoaded: isLoaded, isPlaying: isPlaying, onClick: (e) => {
             e.stopPropagation();
             handlePlayPause();
-        } }, { children: [!isLoaded ? (jsxRuntime.jsx(VideoSpinner, {})) : (jsxRuntime.jsx(FloatingControls, { isPlaying: isPlaying })), jsxRuntime.jsx(Video, Object.assign({ ref: videoRef, onLoadedMetadata: handleLoad, preload: "auto", playsInline: true }, { children: props.children })), jsxRuntime.jsx(Controls, { videoRef: videoRef.current, duration: duration, isPlaying: isPlaying, onPlayChange: (isPlaying) => setIsPlaying(isPlaying) })] })));
+        } }, { children: [!isLoaded ? (jsxRuntime.jsx(VideoSpinner, {})) : (jsxRuntime.jsx(FloatingControls, { isPlaying: isPlaying })), jsxRuntime.jsx(Video, Object.assign({ ref: videoRef, onLoadedMetadata: handleLoad, onLoad: handleDuration, preload: "auto", playsInline: true }, { children: props.children })), jsxRuntime.jsx(Controls, { videoRef: videoRef.current, duration: duration, isPlaying: isPlaying, onPlayChange: (isPlaying) => setIsPlaying(isPlaying) })] })));
 });
 
 var _path$5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.63",
+  "version": "2.12.64",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",