@appquality/unguess-design-system 2.12.63 → 2.12.65

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v2.12.65 (Mon Jan 30 2023)
+
+#### 🐛 Bug Fix
+
+- Player fixes [#194](https://github.com/AppQuality/unguess-design-system/pull/194) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# 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

@@ -4079,9 +4079,7 @@ const StyledDiv$2 = styled__default["default"].div `
     color: ${({ theme }) => theme.palette.grey[300]};
   }
 `;
-const TimeLabel = ({ current, duration, }) => {
-    return (jsxRuntime.jsx(StyledDiv$2, { children: jsxRuntime.jsxs(SM, Object.assign({ tag: "span" }, { children: [current, "/", duration] })) }));
-};
+const TimeLabel = ({ current, duration, }) => (jsxRuntime.jsx(StyledDiv$2, { children: jsxRuntime.jsxs(SM, Object.assign({ tag: "span" }, { children: [current, "/", duration] })) }));
 
 var _path$8, _path2$1;
 function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
@@ -4124,24 +4122,25 @@ var SvgVolumeUnmutedFill = function SvgVolumeUnmutedFill(props) {
 
 const AudioButton = (props) => {
     const [isMuted, setIsMuted] = React.useState(false);
+    const { videoRef } = props;
     const hasAudio = (video) => {
         if (!video) {
             return false;
         }
-        const _hasAudio = video.mozHasAudio ||
+        const videohasAudio = video.mozHasAudio ||
             Boolean(video.webkitAudioDecodedByteCount) ||
             Boolean(video.audioTracks && video.audioTracks.length);
-        return _hasAudio;
+        return videohasAudio;
     };
     React.useEffect(() => {
-        if (props.videoRef) {
-            setIsMuted(!hasAudio(props.videoRef) || props.videoRef.muted);
+        if (videoRef) {
+            setIsMuted(!hasAudio(videoRef) || videoRef.muted);
         }
-    }, [props.videoRef]);
-    return (jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, disabled: !props.videoRef || !hasAudio(props.videoRef), onClick: (e) => {
-            if (props.videoRef) {
-                props.videoRef.muted = !props.videoRef.muted;
-                setIsMuted(props.videoRef.muted);
+    }, [videoRef]);
+    return (jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, disabled: !videoRef || !hasAudio(videoRef), onClick: (e) => {
+            if (videoRef) {
+                videoRef.muted = !videoRef.muted;
+                setIsMuted(videoRef.muted);
             }
             e.stopPropagation();
         } }, { children: isMuted ? jsxRuntime.jsx(SvgVolumeMutedFill, {}) : jsxRuntime.jsx(SvgVolumeUnmutedFill, {}) })));
@@ -4166,34 +4165,35 @@ const FullScreenButton = (props) => {
     const { videoRef } = props;
     const { requestFullscreen, webkitRequestFullscreen, mozRequestFullScreen, webkitEnterFullscreen, msRequestFullscreen, } = videoRef || {};
     const handleFullScreen = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (props.videoRef) {
-            if (props.videoRef.requestFullscreen) {
-                yield props.videoRef.requestFullscreen();
+        if (videoRef) {
+            if (videoRef.requestFullscreen) {
+                yield videoRef.requestFullscreen();
             }
-            else if (props.videoRef.webkitRequestFullscreen) {
-                yield props.videoRef.webkitRequestFullscreen();
+            else if (videoRef.webkitRequestFullscreen) {
+                yield videoRef.webkitRequestFullscreen();
             }
-            else if (props.videoRef.mozRequestFullScreen) {
-                yield props.videoRef.mozRequestFullScreen();
+            else if (videoRef.mozRequestFullScreen) {
+                yield videoRef.mozRequestFullScreen();
             }
-            else if (props.videoRef.webkitEnterFullscreen) {
+            else if (videoRef.webkitEnterFullscreen) {
                 // iOS
-                yield props.videoRef.webkitEnterFullscreen();
+                yield videoRef.webkitEnterFullscreen();
             }
-            else if (props.videoRef.msRequestFullscreen) {
-                yield props.videoRef.msRequestFullscreen();
+            else if (videoRef.msRequestFullscreen) {
+                yield videoRef.msRequestFullscreen();
             }
         }
-    }), [props.videoRef]);
+    }), [videoRef]);
     const canGoFullScreen = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (props.videoRef) {
+        if (videoRef) {
             return (requestFullscreen ||
                 webkitRequestFullscreen ||
                 mozRequestFullScreen ||
                 webkitEnterFullscreen ||
                 msRequestFullscreen);
         }
-    }), [props.videoRef]);
+        return false;
+    }), [videoRef]);
     return (jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
             handleFullScreen();
             e.stopPropagation();
@@ -4240,23 +4240,25 @@ const Controls = (props) => {
     const [tooltipLabel, setTooltipLabel] = React.useState("00:00");
     const progressRef = React.useRef(null);
     const getVideoPositionFromEvent = (clientX) => {
-        if (progressRef && progressRef.current && duration) {
+        const totalTime = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) || duration || 0;
+        if (progressRef && progressRef.current && totalTime) {
             const bounds = progressRef.current.getBoundingClientRect();
             const x = clientX - bounds.left;
-            const videoPositionSecs = (x / progressRef.current.clientWidth) * duration;
+            const videoPositionSecs = (x / progressRef.current.clientWidth) * totalTime;
             return videoPositionSecs;
         }
         return 0;
     };
-    const handleProgressUpdate = () => {
+    const handleProgressUpdate = React.useCallback(() => {
+        const totalTime = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) || duration || 0;
         const currentTime = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) || 0;
-        setProgress((currentTime / duration) * 100);
-    };
-    const handleSkipAhead = (pageX) => {
+        setProgress((currentTime / totalTime) * 100);
+    }, [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;
@@ -4267,9 +4269,9 @@ const Controls = (props) => {
             const maxMargin = progressRef.current.clientWidth - tooltipWidth;
             const bounds = progressRef.current.getBoundingClientRect();
             const marginX = e.clientX - bounds.left;
-            const tooltipMargin = marginX >= maxMargin ? maxMargin : marginX;
+            const newTooltipMargin = marginX >= maxMargin ? maxMargin : marginX;
             const videoTargetDuration = getVideoPositionFromEvent(e.clientX);
-            setTooltipMargin(tooltipMargin);
+            setTooltipMargin(newTooltipMargin);
             setTooltipLabel(formatDuration(videoTargetDuration));
         }
     };
@@ -4283,7 +4285,7 @@ const Controls = (props) => {
             }
         };
     }, [videoRef]);
-    return (jsxRuntime.jsxs(ControlsWrapper, Object.assign({ isPlaying: isPlaying }, { children: [jsxRuntime.jsxs(ProgressContainer, Object.assign({ onMouseEnter: onMouseEvent, onMouseMove: onMouseEvent, onMouseLeave: onMouseEvent }, { children: [jsxRuntime.jsx(StyledTooltip, Object.assign({ style: { marginLeft: tooltipMargin + "px" } }, { children: tooltipLabel })), jsxRuntime.jsx(TimeLabel, { current: formatDuration((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) || 0), duration: formatDuration(duration) }), jsxRuntime.jsx(StyledProgress, { ref: progressRef, value: progress, onClick: (e) => handleSkipAhead(e.clientX) })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx(AudioButton, { videoRef: videoRef }) }), jsxRuntime.jsx(ControlsGroupCenter, { videoRef: videoRef, onPlayChange: onPlayChange, isPlaying: isPlaying }), jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx(FullScreenButton, { videoRef: videoRef }) })] })] })));
+    return (jsxRuntime.jsxs(ControlsWrapper, Object.assign({ isPlaying: isPlaying }, { children: [jsxRuntime.jsxs(ProgressContainer, Object.assign({ onMouseEnter: onMouseEvent, onMouseMove: onMouseEvent, onMouseLeave: onMouseEvent }, { children: [jsxRuntime.jsx(StyledTooltip, Object.assign({ style: { marginLeft: `${tooltipMargin}px` } }, { children: tooltipLabel })), jsxRuntime.jsx(TimeLabel, { current: formatDuration((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) || 0), duration: formatDuration(duration) }), jsxRuntime.jsx(StyledProgress, { ref: progressRef, value: progress, onClick: (e) => handleSkipAhead(e.clientX) })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx(AudioButton, { videoRef: videoRef }) }), jsxRuntime.jsx(ControlsGroupCenter, { videoRef: videoRef, onPlayChange: onPlayChange, isPlaying: isPlaying }), jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx(FullScreenButton, { videoRef: videoRef }) })] })] })));
 };
 
 const FloatingContainer = styled__default["default"].div `
@@ -4313,8 +4315,8 @@ const ButtonsContainer = styled__default["default"].div `
   height: 100%;
 `;
 const FloatingControls = (props) => {
-    const { isPlaying } = props;
-    return (jsxRuntime.jsx(FloatingContainer, Object.assign({ isPlaying: isPlaying }, { children: jsxRuntime.jsx(ButtonsContainer, { children: !isPlaying && (jsxRuntime.jsx(BigButton, Object.assign({ isBright: true }, { children: jsxRuntime.jsx(PlayIcon, {}) }))) }) })));
+    const { isPlaying, onClick } = props;
+    return (jsxRuntime.jsx(FloatingContainer, Object.assign({ isPlaying: isPlaying, onClick: onClick }, { children: jsxRuntime.jsx(ButtonsContainer, { children: !isPlaying && (jsxRuntime.jsx(BigButton, Object.assign({ isBright: true }, { children: jsxRuntime.jsx(PlayIcon, {}) }))) }) })));
 };
 
 const Container = styled__default["default"].div `
@@ -4386,6 +4388,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;
@@ -4421,10 +4427,7 @@ const Player = React.forwardRef((props, forwardRef) => {
             }
         };
     }, [videoRef.current]);
-    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) })] })));
+    return (jsxRuntime.jsxs(Container, Object.assign({ isLoaded: isLoaded, isPlaying: isPlaying }, { children: [!isLoaded ? (jsxRuntime.jsx(VideoSpinner, {})) : (jsxRuntime.jsx(FloatingControls, { isPlaying: isPlaying, onClick: handlePlayPause })), jsxRuntime.jsx(Video, Object.assign({ ref: videoRef, onLoadedMetadata: handleLoad, onLoad: handleDuration, preload: "auto", playsInline: true, onClick: handlePlayPause }, { children: props.children })), jsxRuntime.jsx(Controls, { videoRef: videoRef.current, duration: duration, isPlaying: isPlaying, onPlayChange: (playing) => setIsPlaying(playing) })] })));
 });
 
 var _path$5;

package/build/stories/player/parts/controlsCenterGroup.d.ts

@@ -1,5 +1,5 @@
 export declare const ControlsGroupCenter: ({ videoRef, isPlaying, onPlayChange, }: {
     videoRef: HTMLVideoElement | null;
     isPlaying?: boolean | undefined;
-    onPlayChange?: ((isPlaying: boolean) => void) | undefined;
+    onPlayChange?: ((playing: boolean) => void) | undefined;
 }) => JSX.Element;

package/build/stories/player/parts/floatingControls.d.ts

@@ -2,4 +2,5 @@ import { WrapperProps } from "../_types";
 export declare const FloatingContainer: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;
 export declare const FloatingControls: (props: {
     isPlaying?: boolean;
+    onClick?: () => void;
 }) => JSX.Element;

package/package.json

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