@appquality/unguess-design-system 3.1.40-player → 3.1.41-player

package/build/index.js

@@ -4420,22 +4420,22 @@ const Controls = ({ container, }) => {
     const [tooltipLabel, setTooltipLabel] = React.useState("00:00");
     const progressRef = React.useRef(null);
     const { context, setCurrentTime } = Video.useVideoContext();
+    const relCurrentTime = (((_a = context.player) === null || _a === void 0 ? void 0 : _a.currentTime) || 0) - context.part.start;
+    const duration = context.part.end - context.part.start || ((_b = context.player) === null || _b === void 0 ? void 0 : _b.totalTime) || 0; //relative
     const getVideoPositionFromEvent = (clientX) => {
-        var _a;
-        const totalTime = ((_a = context.player) === null || _a === void 0 ? void 0 : _a.totalTime) || 0;
-        if (progressRef && progressRef.current && totalTime) {
+        if (progressRef && progressRef.current && duration) {
             const bounds = progressRef.current.getBoundingClientRect();
             const x = clientX - bounds.left;
-            const videoPositionSecs = (x / progressRef.current.clientWidth) * totalTime;
+            const videoPositionSecs = (x / progressRef.current.clientWidth) * duration;
             return videoPositionSecs;
         }
         return 0;
     };
     const handleSkipAhead = React.useCallback((pageX) => {
-        const time = getVideoPositionFromEvent(pageX);
+        const time = getVideoPositionFromEvent(pageX) + (context.part.start || 0);
         setCurrentTime(time);
         setProgress(getProgress(time));
-    }, [context.player]);
+    }, [context.player, context.part]);
     const onMouseEvent = (e) => {
         if (progressRef && progressRef.current) {
             const tooltipWidth = 40;
@@ -4454,13 +4454,12 @@ const Controls = ({ container, }) => {
         setProgress(getProgress(currentTime));
     }, [context.player]);
     const getProgress = React.useCallback((currentTime) => {
-        var _a;
-        const totalTime = ((_a = context.player) === null || _a === void 0 ? void 0 : _a.totalTime) || 0;
-        if (totalTime === 0)
+        const current = currentTime - (context.part.start || 0);
+        if (duration === 0)
             return 0;
-        return (currentTime / totalTime) * 100;
+        return (current / duration) * 100;
     }, [context.player]);
-    return (jsxRuntime.jsxs(ControlsWrapper, Object.assign({ isPlaying: context.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(((_a = context.player) === null || _a === void 0 ? void 0 : _a.currentTime) || 0), duration: formatDuration(((_b = context.player) === null || _b === void 0 ? void 0 : _b.totalTime) || 0) }), jsxRuntime.jsx(StyledProgress, { ref: progressRef, value: progress, onClick: (e) => handleSkipAhead(e.clientX) })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsx(StyledDiv$2, { children: jsxRuntime.jsx(AudioButton, {}) }), jsxRuntime.jsx(ControlsGroupCenter, {}), jsxRuntime.jsx(StyledDiv$2, { children: jsxRuntime.jsx(FullScreenButton, { container: container }) })] })] })));
+    return (jsxRuntime.jsxs(ControlsWrapper, Object.assign({ isPlaying: context.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(relCurrentTime), duration: formatDuration(duration) }), jsxRuntime.jsx(StyledProgress, { ref: progressRef, value: progress, onClick: (e) => handleSkipAhead(e.clientX) })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsx(StyledDiv$2, { children: jsxRuntime.jsx(AudioButton, {}) }), jsxRuntime.jsx(ControlsGroupCenter, {}), jsxRuntime.jsx(StyledDiv$2, { children: jsxRuntime.jsx(FullScreenButton, { container: container }) })] })] })));
 };
 
 var _path$7;

package/build/stories/player/_types.d.ts

@@ -1,6 +1,8 @@
 import { HTMLAttributes } from "react";
 export interface PlayerArgs extends HTMLAttributes<HTMLVideoElement> {
     url: string;
+    start?: number;
+    end?: number;
 }
 export interface WrapperProps {
     isPlaying?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.40-player",
+  "version": "3.1.41-player",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",