@flipdish/ui-library 0.46.0 → 0.47.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/organisms/SidePanel/components/SidePanelContent.cjs +2 -2
- package/dist/components/organisms/SidePanel/components/SidePanelContent.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.d.ts +7 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.js +2 -2
- package/dist/components/organisms/SidePanel/components/SidePanelContent.js.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.cjs +26 -4
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.d.ts +23 -4
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.js +27 -5
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.js.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs +9 -2
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts +6 -0
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.js +9 -3
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.js.map +1 -1
- package/dist/components/organisms/SidePanel/index.cjs +1 -0
- package/dist/components/organisms/SidePanel/index.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/index.d.ts +1 -1
- package/dist/components/organisms/SidePanel/index.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/index.js +1 -1
- package/dist/components/organisms/VideoPlayer/hooks/useVideoPlayback.cjs +11 -20
- package/dist/components/organisms/VideoPlayer/hooks/useVideoPlayback.cjs.map +1 -1
- package/dist/components/organisms/VideoPlayer/hooks/useVideoPlayback.d.ts.map +1 -1
- package/dist/components/organisms/VideoPlayer/hooks/useVideoPlayback.js +9 -18
- package/dist/components/organisms/VideoPlayer/hooks/useVideoPlayback.js.map +1 -1
- package/dist/components/organisms/VideoPlayer/hooks/useVideoVolume.cjs +3 -2
- package/dist/components/organisms/VideoPlayer/hooks/useVideoVolume.cjs.map +1 -1
- package/dist/components/organisms/VideoPlayer/hooks/useVideoVolume.d.ts.map +1 -1
- package/dist/components/organisms/VideoPlayer/hooks/useVideoVolume.js +3 -2
- package/dist/components/organisms/VideoPlayer/hooks/useVideoVolume.js.map +1 -1
- package/dist/components/organisms/VideoPlayer/index.cjs +8 -10
- package/dist/components/organisms/VideoPlayer/index.cjs.map +1 -1
- package/dist/components/organisms/VideoPlayer/index.d.ts.map +1 -1
- package/dist/components/organisms/VideoPlayer/index.js +8 -10
- package/dist/components/organisms/VideoPlayer/index.js.map +1 -1
- package/dist/components/organisms/VideoPlayer/videoPlayer.utils.cjs +92 -0
- package/dist/components/organisms/VideoPlayer/videoPlayer.utils.cjs.map +1 -0
- package/dist/components/organisms/VideoPlayer/videoPlayer.utils.d.ts +84 -0
- package/dist/components/organisms/VideoPlayer/videoPlayer.utils.d.ts.map +1 -0
- package/dist/components/organisms/VideoPlayer/videoPlayer.utils.js +83 -0
- package/dist/components/organisms/VideoPlayer/videoPlayer.utils.js.map +1 -0
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useRef, useState, useCallback, useEffect } from 'react';
|
|
2
|
+
import { progressAtPointer, formatTime, PLAYBACK_SPEEDS, nextPlaybackRate, seekBackward, seekForward } from '../videoPlayer.utils.js';
|
|
2
3
|
|
|
3
|
-
const PLAYBACK_SPEEDS = [1, 1.25, 1.5, 1.75, 2];
|
|
4
4
|
/**
|
|
5
5
|
* Play/pause, seek, fullscreen, and playback-speed state for `VideoPlayer`, plus the
|
|
6
6
|
* timeupdate/durationchange/progress listeners that keep `currentTime`/`duration`/`buffered`
|
|
@@ -18,11 +18,6 @@ const useVideoPlayback = ({ videoRef }) => {
|
|
|
18
18
|
const [showThumbnail, setShowThumbnail] = useState(true);
|
|
19
19
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
20
20
|
const [playbackRate, setPlaybackRate] = useState(1);
|
|
21
|
-
const formatTime = (time) => {
|
|
22
|
-
const minutes = Math.max(Math.floor(time / 60), 0);
|
|
23
|
-
const seconds = Math.max(Math.floor(time % 60), 0);
|
|
24
|
-
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
25
|
-
};
|
|
26
21
|
const play = useCallback(() => {
|
|
27
22
|
// Swallow `play()` rejections (autoplay policy / not ready); `isPlaying` tracks user intent.
|
|
28
23
|
videoRef.current?.play().catch(() => { });
|
|
@@ -43,17 +38,15 @@ const useVideoPlayback = ({ videoRef }) => {
|
|
|
43
38
|
}, [videoRef]);
|
|
44
39
|
const handleProgressClick = useCallback((e) => {
|
|
45
40
|
if (progressRef.current && videoRef.current) {
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
videoRef.current.currentTime = pos * duration;
|
|
41
|
+
const { time } = progressAtPointer(e.clientX, progressRef.current.getBoundingClientRect(), duration);
|
|
42
|
+
videoRef.current.currentTime = time;
|
|
49
43
|
}
|
|
50
44
|
}, [videoRef, duration]);
|
|
51
45
|
const handleProgressHover = useCallback((e) => {
|
|
52
46
|
if (progressRef.current && videoRef.current) {
|
|
53
|
-
const
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
setHoverPosition(e.clientX - rect.left);
|
|
47
|
+
const { time, offset } = progressAtPointer(e.clientX, progressRef.current.getBoundingClientRect(), duration);
|
|
48
|
+
setHoverTime(time);
|
|
49
|
+
setHoverPosition(offset);
|
|
57
50
|
}
|
|
58
51
|
}, [videoRef, duration]);
|
|
59
52
|
const toggleFullscreen = useCallback(() => {
|
|
@@ -66,9 +59,7 @@ const useVideoPlayback = ({ videoRef }) => {
|
|
|
66
59
|
}, [videoRef]);
|
|
67
60
|
const toggleSpeed = useCallback(() => {
|
|
68
61
|
setPlaybackRate((prevRate) => {
|
|
69
|
-
const
|
|
70
|
-
const nextIndex = (currentIndex + 1) % PLAYBACK_SPEEDS.length;
|
|
71
|
-
const nextSpeed = PLAYBACK_SPEEDS[nextIndex];
|
|
62
|
+
const nextSpeed = nextPlaybackRate(prevRate);
|
|
72
63
|
if (videoRef.current) {
|
|
73
64
|
videoRef.current.playbackRate = nextSpeed;
|
|
74
65
|
}
|
|
@@ -103,11 +94,11 @@ const useVideoPlayback = ({ videoRef }) => {
|
|
|
103
94
|
}
|
|
104
95
|
if (e.code === 'ArrowLeft') {
|
|
105
96
|
e.preventDefault();
|
|
106
|
-
video.currentTime =
|
|
97
|
+
video.currentTime = seekBackward(video.currentTime);
|
|
107
98
|
}
|
|
108
99
|
if (e.code === 'ArrowRight') {
|
|
109
100
|
e.preventDefault();
|
|
110
|
-
video.currentTime =
|
|
101
|
+
video.currentTime = seekForward(video.currentTime, video.duration);
|
|
111
102
|
}
|
|
112
103
|
};
|
|
113
104
|
video.addEventListener('timeupdate', handleTimeUpdate);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVideoPlayback.js","sources":["../../../../../src/components/organisms/VideoPlayer/hooks/useVideoPlayback.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useVideoPlayback.js","sources":["../../../../../src/components/organisms/VideoPlayer/hooks/useVideoPlayback.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAUA;;;;;AAKG;MACU,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAA2B,KAAI;AACxE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IACjD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IAC3C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAoB,IAAI,CAAC;IACjE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC;IAC/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC;IACvE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IACxD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAEnD,IAAA,MAAM,IAAI,GAAG,WAAW,CAAC,MAAK;;AAE5B,QAAA,QAAQ,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,MAAK,EAAE,CAAC,CAAC;QACxC,YAAY,CAAC,IAAI,CAAC;QAClB,gBAAgB,CAAC,KAAK,CAAC;AACzB,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,MAAM,KAAK,GAAG,WAAW,CAAC,MAAK;AAC7B,QAAA,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE;QACzB,YAAY,CAAC,KAAK,CAAC;AACrB,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;AAClC,QAAA,YAAY,CAAC,CAAC,WAAW,KAAI;;YAE3B,WAAW,GAAG,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,MAAK,EAAE,CAAC,CAAC;YAClF,OAAO,CAAC,WAAW;AACrB,QAAA,CAAC,CAAC;QACF,gBAAgB,CAAC,KAAK,CAAC;AACzB,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,CAAmB,KAAI;QACtB,IAAI,WAAW,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE;AAC3C,YAAA,MAAM,EAAE,IAAI,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,qBAAqB,EAAE,EAAE,QAAQ,CAAC;AACpG,YAAA,QAAQ,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI;QACrC;AACF,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB;AAED,IAAA,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,CAAmB,KAAI;QACtB,IAAI,WAAW,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE;YAC3C,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,qBAAqB,EAAE,EAAE,QAAQ,CAAC;YAC5G,YAAY,CAAC,IAAI,CAAC;YAClB,gBAAgB,CAAC,MAAM,CAAC;QAC1B;AACF,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB;AAED,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAK;AACxC,QAAA,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE;AAC/B,YAAA,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE;QACtD;aAAO;YACL,QAAQ,CAAC,cAAc,EAAE;QAC3B;AACF,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,eAAe,CAAC,CAAC,QAAQ,KAAI;AAC3B,YAAA,MAAM,SAAS,GAAG,gBAAgB,CAAC,QAAQ,CAAC;AAE5C,YAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpB,gBAAA,QAAQ,CAAC,OAAO,CAAC,YAAY,GAAG,SAAS;YAC3C;AAEA,YAAA,OAAO,SAAS;AAClB,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,KAAK;YAAE;QAEZ,MAAM,gBAAgB,GAAG,MAAM,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC;QAChE,MAAM,oBAAoB,GAAG,MAAM,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC9D,MAAM,WAAW,GAAG,MAAK;YACvB,YAAY,CAAC,KAAK,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC;AACxB,QAAA,CAAC;QACD,MAAM,cAAc,GAAG,MAAM,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC;;QAExD,MAAM,UAAU,GAAG,MAAK;YACtB,YAAY,CAAC,IAAI,CAAC;YAClB,gBAAgB,CAAC,KAAK,CAAC;AACzB,QAAA,CAAC;QACD,MAAM,WAAW,GAAG,MAAM,YAAY,CAAC,KAAK,CAAC;AAC7C,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;AACzC,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE;gBAC3C,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,UAAU,EAAE;YACd;AACA,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE;gBACrB,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,gBAAgB,EAAE;YACpB;AACA,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,EAAE;gBAC1B,CAAC,CAAC,cAAc,EAAE;gBAClB,KAAK,CAAC,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC;YACrD;AACA,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,EAAE;gBAC3B,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC;YACpE;AACF,QAAA,CAAC;AAED,QAAA,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,gBAAgB,CAAC;AACtD,QAAA,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,oBAAoB,CAAC;AAC9D,QAAA,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC;AAC5C,QAAA,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,cAAc,CAAC;AAClD,QAAA,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC;AAC1C,QAAA,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC;AAC5C,QAAA,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;AAEhD,QAAA,YAAY,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,gBAAgB,CAAC,KAAK,CAAC;AAE1C,QAAA,OAAO,MAAK;AACV,YAAA,KAAK,CAAC,mBAAmB,CAAC,YAAY,EAAE,gBAAgB,CAAC;AACzD,YAAA,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,oBAAoB,CAAC;AACjE,YAAA,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC;AAC/C,YAAA,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,cAAc,CAAC;AACrD,YAAA,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,UAAU,CAAC;AAC7C,YAAA,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC;AAC/C,YAAA,KAAK,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;AACrD,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,gBAAgB,CAAC,CAAC;IAE5C,SAAS,CAAC,MAAK;QACb,MAAM,sBAAsB,GAAG,MAAK;AAClC,YAAA,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAAC;AAC/C,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,sBAAsB,CAAC;AACrE,QAAA,OAAO,MAAK;AACV,YAAA,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,sBAAsB,CAAC;AAC1E,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;QACL,WAAW;QACX,SAAS;QACT,WAAW;QACX,QAAQ;QACR,QAAQ;QACR,SAAS;QACT,aAAa;QACb,aAAa;QACb,gBAAgB;QAChB,YAAY;QACZ,YAAY;AACZ,QAAA,cAAc,EAAE,eAAe;QAC/B,UAAU;QACV,IAAI;QACJ,KAAK;QACL,UAAU;QACV,mBAAmB;QACnB,mBAAmB;QACnB,gBAAgB;QAChB,WAAW;KACZ;AACH;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
+
var videoPlayer_utils = require('../videoPlayer.utils.cjs');
|
|
4
5
|
|
|
5
6
|
/**
|
|
6
7
|
* Volume/mute state for `VideoPlayer`, plus the keyboard shortcuts (M mute, ↑/↓ volume
|
|
@@ -45,14 +46,14 @@ const useVideoVolume = ({ videoRef }) => {
|
|
|
45
46
|
}
|
|
46
47
|
if (e.code === 'ArrowUp') {
|
|
47
48
|
e.preventDefault();
|
|
48
|
-
const newVolume =
|
|
49
|
+
const newVolume = videoPlayer_utils.adjustVolume(video.volume, 0.1);
|
|
49
50
|
video.volume = newVolume;
|
|
50
51
|
setVolume(newVolume);
|
|
51
52
|
setIsMuted(newVolume === 0);
|
|
52
53
|
}
|
|
53
54
|
if (e.code === 'ArrowDown') {
|
|
54
55
|
e.preventDefault();
|
|
55
|
-
const newVolume =
|
|
56
|
+
const newVolume = videoPlayer_utils.adjustVolume(video.volume, -0.1);
|
|
56
57
|
video.volume = newVolume;
|
|
57
58
|
setVolume(newVolume);
|
|
58
59
|
setIsMuted(newVolume === 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVideoVolume.cjs","sources":["../../../../../src/components/organisms/VideoPlayer/hooks/useVideoVolume.ts"],"sourcesContent":[null],"names":["useState","useCallback","useEffect"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useVideoVolume.cjs","sources":["../../../../../src/components/organisms/VideoPlayer/hooks/useVideoVolume.ts"],"sourcesContent":[null],"names":["useState","useCallback","useEffect","adjustVolume"],"mappings":";;;;;AAUA;;;AAGG;MACU,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;IACpE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAQ,CAAC,CAAC,CAAC;IACvC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAC7C,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGA,cAAQ,CAAC,CAAC,CAAC;AAEvD,IAAA,MAAM,UAAU,GAAGC,iBAAW,CAAC,MAAK;QAClC,IAAI,OAAO,EAAE;YACX,SAAS,CAAC,cAAc,CAAC;AACzB,YAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpB,gBAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,cAAc;YAC1C;QACF;aAAO;YACL,iBAAiB,CAAC,MAAM,CAAC;YACzB,SAAS,CAAC,CAAC,CAAC;AACZ,YAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpB,gBAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YAC7B;QACF;AAEA,QAAA,UAAU,CAAC,CAAC,OAAO,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE/C,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CACpC,CAAC,CAAsC,KAAI;QACzC,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC5C,SAAS,CAAC,SAAS,CAAC;AACpB,QAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpB,YAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,SAAS;QACrC;AACA,QAAA,UAAU,CAAC,SAAS,KAAK,CAAC,CAAC;AAC7B,IAAA,CAAC,EACD,CAAC,QAAQ,CAAC,CACX;IAEDC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,KAAK;YAAE;AAEZ,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;AACzC,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE;gBACrB,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,UAAU,EAAE;YACd;AACA,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;gBACxB,CAAC,CAAC,cAAc,EAAE;gBAClB,MAAM,SAAS,GAAGC,8BAAY,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,CAAC;AACjD,gBAAA,KAAK,CAAC,MAAM,GAAG,SAAS;gBACxB,SAAS,CAAC,SAAS,CAAC;AACpB,gBAAA,UAAU,CAAC,SAAS,KAAK,CAAC,CAAC;YAC7B;AACA,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,EAAE;gBAC1B,CAAC,CAAC,cAAc,EAAE;gBAClB,MAAM,SAAS,GAAGA,8BAAY,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC;AAClD,gBAAA,KAAK,CAAC,MAAM,GAAG,SAAS;gBACxB,SAAS,CAAC,SAAS,CAAC;AACpB,gBAAA,UAAU,CAAC,SAAS,KAAK,CAAC,CAAC;YAC7B;AACF,QAAA,CAAC;AAED,QAAA,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;AAChD,QAAA,OAAO,MAAK;AACV,YAAA,KAAK,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;AACrD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAE1B,OAAO;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,kBAAkB;KACnB;AACH;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVideoVolume.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/VideoPlayer/hooks/useVideoVolume.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useVideoVolume.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/VideoPlayer/hooks/useVideoVolume.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;AAGzE,MAAM,WAAW,qBAAqB;IACpC,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,cAAc,qBAAqB;;;;4BAuB1D,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;CAgD1C,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useState, useCallback, useEffect } from 'react';
|
|
2
|
+
import { adjustVolume } from '../videoPlayer.utils.js';
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* Volume/mute state for `VideoPlayer`, plus the keyboard shortcuts (M mute, ↑/↓ volume
|
|
@@ -43,14 +44,14 @@ const useVideoVolume = ({ videoRef }) => {
|
|
|
43
44
|
}
|
|
44
45
|
if (e.code === 'ArrowUp') {
|
|
45
46
|
e.preventDefault();
|
|
46
|
-
const newVolume =
|
|
47
|
+
const newVolume = adjustVolume(video.volume, 0.1);
|
|
47
48
|
video.volume = newVolume;
|
|
48
49
|
setVolume(newVolume);
|
|
49
50
|
setIsMuted(newVolume === 0);
|
|
50
51
|
}
|
|
51
52
|
if (e.code === 'ArrowDown') {
|
|
52
53
|
e.preventDefault();
|
|
53
|
-
const newVolume =
|
|
54
|
+
const newVolume = adjustVolume(video.volume, -0.1);
|
|
54
55
|
video.volume = newVolume;
|
|
55
56
|
setVolume(newVolume);
|
|
56
57
|
setIsMuted(newVolume === 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVideoVolume.js","sources":["../../../../../src/components/organisms/VideoPlayer/hooks/useVideoVolume.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useVideoVolume.js","sources":["../../../../../src/components/organisms/VideoPlayer/hooks/useVideoVolume.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAUA;;;AAGG;MACU,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;IACpE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IACvC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC7C,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAEvD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;QAClC,IAAI,OAAO,EAAE;YACX,SAAS,CAAC,cAAc,CAAC;AACzB,YAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpB,gBAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,cAAc;YAC1C;QACF;aAAO;YACL,iBAAiB,CAAC,MAAM,CAAC;YACzB,SAAS,CAAC,CAAC,CAAC;AACZ,YAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpB,gBAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YAC7B;QACF;AAEA,QAAA,UAAU,CAAC,CAAC,OAAO,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE/C,IAAA,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,CAAsC,KAAI;QACzC,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC5C,SAAS,CAAC,SAAS,CAAC;AACpB,QAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpB,YAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,SAAS;QACrC;AACA,QAAA,UAAU,CAAC,SAAS,KAAK,CAAC,CAAC;AAC7B,IAAA,CAAC,EACD,CAAC,QAAQ,CAAC,CACX;IAED,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,KAAK;YAAE;AAEZ,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;AACzC,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE;gBACrB,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,UAAU,EAAE;YACd;AACA,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;gBACxB,CAAC,CAAC,cAAc,EAAE;gBAClB,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,CAAC;AACjD,gBAAA,KAAK,CAAC,MAAM,GAAG,SAAS;gBACxB,SAAS,CAAC,SAAS,CAAC;AACpB,gBAAA,UAAU,CAAC,SAAS,KAAK,CAAC,CAAC;YAC7B;AACA,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,EAAE;gBAC1B,CAAC,CAAC,cAAc,EAAE;gBAClB,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC;AAClD,gBAAA,KAAK,CAAC,MAAM,GAAG,SAAS;gBACxB,SAAS,CAAC,SAAS,CAAC;AACpB,gBAAA,UAAU,CAAC,SAAS,KAAK,CAAC,CAAC;YAC7B;AACF,QAAA,CAAC;AAED,QAAA,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;AAChD,QAAA,OAAO,MAAK;AACV,YAAA,KAAK,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;AACrD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAE1B,OAAO;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,kBAAkB;KACnB;AACH;;"}
|
|
@@ -9,6 +9,7 @@ var reactAriaComponents = require('react-aria-components');
|
|
|
9
9
|
var Icons = require('./components/Icons.cjs');
|
|
10
10
|
var useVideoPlayback = require('./hooks/useVideoPlayback.cjs');
|
|
11
11
|
var useVideoVolume = require('./hooks/useVideoVolume.cjs');
|
|
12
|
+
var videoPlayer_utils = require('./videoPlayer.utils.cjs');
|
|
12
13
|
|
|
13
14
|
/**
|
|
14
15
|
* Inline video player with a control bar that fades in on hover or focus: play, scrub, volume,
|
|
@@ -33,18 +34,15 @@ const VideoPlayer = ({ src, type = 'video/mp4', autoPlay = false, thumbnailUrl,
|
|
|
33
34
|
},
|
|
34
35
|
}));
|
|
35
36
|
const renderBuffered = () => {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
segments.push(jsxRuntime.jsx("div", { className: "pointer-events-none absolute h-full min-w-2 rounded-full bg-fg-white/50", style: {
|
|
43
|
-
left: `${start}%`,
|
|
44
|
-
width: `${end - start}%`,
|
|
37
|
+
const segments = videoPlayer_utils.bufferedSegments(buffered, duration);
|
|
38
|
+
const bars = [];
|
|
39
|
+
for (let i = 0; i < segments.length; i++) {
|
|
40
|
+
bars.push(jsxRuntime.jsx("div", { className: "pointer-events-none absolute h-full min-w-2 rounded-full bg-fg-white/50", style: {
|
|
41
|
+
left: `${segments[i].startPercent}%`,
|
|
42
|
+
width: `${segments[i].widthPercent}%`,
|
|
45
43
|
} }, i));
|
|
46
44
|
}
|
|
47
|
-
return
|
|
45
|
+
return bars;
|
|
48
46
|
};
|
|
49
47
|
const canShowTrickPlayTime = hoverTime !== null && hoverPosition !== null;
|
|
50
48
|
return (jsxRuntime.jsxs("div", { ref: containerRef, "data-testid": testId, className: cx.cx('group/video relative', 'outline-focus-ring has-[video:focus-visible]:outline-2 has-[video:focus-visible]:outline-offset-4', className), children: [jsxRuntime.jsxs("div", { onClick: togglePlay, "data-testid": testIdUtils.joinTestId(testId, 'thumbnail-play'), className: cx.cx('group absolute inset-0 z-10 cursor-pointer rounded-[inherit] transition-all duration-300 ease-in', thumbnailUrl && showThumbnail ? 'visible opacity-100' : 'pointer-events-none invisible opacity-0'), children: [jsxRuntime.jsx("img", { src: thumbnailUrl, alt: thumbnailAlt, className: "size-full object-cover" }), jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsxRuntime.jsx("div", { className: cx.cx('flex size-16 items-center justify-center', size !== 'sm' &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/VideoPlayer/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useRef","useVideoPlayback","useVideoVolume","useImperativeHandle","_jsx","_jsxs","cx","joinTestId","PlayIcon","PauseIcon","VolumeX","VolumeMax","Minimize01","Maximize01","AriaTooltipTrigger","AriaFocusable","AriaTooltip"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/VideoPlayer/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useRef","useVideoPlayback","useVideoVolume","useImperativeHandle","bufferedSegments","_jsx","_jsxs","cx","joinTestId","PlayIcon","PauseIcon","VolumeX","VolumeMax","Minimize01","Maximize01","AriaTooltipTrigger","AriaFocusable","AriaTooltip"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/VideoPlayer/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA+C,KAAK,GAAG,EAA+B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/VideoPlayer/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA+C,KAAK,GAAG,EAA+B,MAAM,OAAO,CAAC;AAQ3G,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,uBAAuB;IACvB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,uJAYzB,gBAAgB,gCA+RlB,CAAC"}
|
|
@@ -7,6 +7,7 @@ import { TooltipTrigger, Focusable, Tooltip } from 'react-aria-components';
|
|
|
7
7
|
import { PlayIcon, PauseIcon } from './components/Icons.js';
|
|
8
8
|
import { useVideoPlayback } from './hooks/useVideoPlayback.js';
|
|
9
9
|
import { useVideoVolume } from './hooks/useVideoVolume.js';
|
|
10
|
+
import { bufferedSegments } from './videoPlayer.utils.js';
|
|
10
11
|
|
|
11
12
|
/**
|
|
12
13
|
* Inline video player with a control bar that fades in on hover or focus: play, scrub, volume,
|
|
@@ -31,18 +32,15 @@ const VideoPlayer = ({ src, type = 'video/mp4', autoPlay = false, thumbnailUrl,
|
|
|
31
32
|
},
|
|
32
33
|
}));
|
|
33
34
|
const renderBuffered = () => {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
segments.push(jsx("div", { className: "pointer-events-none absolute h-full min-w-2 rounded-full bg-fg-white/50", style: {
|
|
41
|
-
left: `${start}%`,
|
|
42
|
-
width: `${end - start}%`,
|
|
35
|
+
const segments = bufferedSegments(buffered, duration);
|
|
36
|
+
const bars = [];
|
|
37
|
+
for (let i = 0; i < segments.length; i++) {
|
|
38
|
+
bars.push(jsx("div", { className: "pointer-events-none absolute h-full min-w-2 rounded-full bg-fg-white/50", style: {
|
|
39
|
+
left: `${segments[i].startPercent}%`,
|
|
40
|
+
width: `${segments[i].widthPercent}%`,
|
|
43
41
|
} }, i));
|
|
44
42
|
}
|
|
45
|
-
return
|
|
43
|
+
return bars;
|
|
46
44
|
};
|
|
47
45
|
const canShowTrickPlayTime = hoverTime !== null && hoverPosition !== null;
|
|
48
46
|
return (jsxs("div", { ref: containerRef, "data-testid": testId, className: cx('group/video relative', 'outline-focus-ring has-[video:focus-visible]:outline-2 has-[video:focus-visible]:outline-offset-4', className), children: [jsxs("div", { onClick: togglePlay, "data-testid": joinTestId(testId, 'thumbnail-play'), className: cx('group absolute inset-0 z-10 cursor-pointer rounded-[inherit] transition-all duration-300 ease-in', thumbnailUrl && showThumbnail ? 'visible opacity-100' : 'pointer-events-none invisible opacity-0'), children: [jsx("img", { src: thumbnailUrl, alt: thumbnailAlt, className: "size-full object-cover" }), jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx("div", { className: cx('flex size-16 items-center justify-center', size !== 'sm' &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/VideoPlayer/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaTooltipTrigger","AriaFocusable","AriaTooltip"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/VideoPlayer/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaTooltipTrigger","AriaFocusable","AriaTooltip"],"mappings":"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"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
/** Speeds the large player's rate button cycles through, in order. */
|
|
4
|
+
const PLAYBACK_SPEEDS = [1, 1.25, 1.5, 1.75, 2];
|
|
5
|
+
/**
|
|
6
|
+
* Formats a playback position as `m:ss`, flooring partial seconds and clamping negatives to zero.
|
|
7
|
+
*
|
|
8
|
+
* @param time Position in seconds. Hours are not split out, so `125` is `2:05`.
|
|
9
|
+
* @returns A clock label such as `0:00` or `1:05`.
|
|
10
|
+
*/
|
|
11
|
+
const formatTime = (time) => {
|
|
12
|
+
const minutes = Math.max(Math.floor(time / 60), 0);
|
|
13
|
+
const seconds = Math.max(Math.floor(time % 60), 0);
|
|
14
|
+
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Steps to the next playback speed, wrapping from the last speed back to the first.
|
|
18
|
+
*
|
|
19
|
+
* @param current The speed currently shown. A value outside {@link PLAYBACK_SPEEDS} starts the cycle at the first speed.
|
|
20
|
+
* @returns The next speed in the cycle.
|
|
21
|
+
*/
|
|
22
|
+
const nextPlaybackRate = (current) => {
|
|
23
|
+
const currentIndex = PLAYBACK_SPEEDS.indexOf(current);
|
|
24
|
+
const nextIndex = (currentIndex + 1) % PLAYBACK_SPEEDS.length;
|
|
25
|
+
return PLAYBACK_SPEEDS[nextIndex];
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* Turns buffered media ranges into bar positions.
|
|
29
|
+
*
|
|
30
|
+
* @param buffered Ranges reported by the video element, or `null` before the first progress event.
|
|
31
|
+
* @param duration Length of the video in seconds. `0` produces non-finite percentages, matching the render-time division.
|
|
32
|
+
* @returns One segment per range, in order. No ranges yields an empty list, which renders nothing.
|
|
33
|
+
*/
|
|
34
|
+
const bufferedSegments = (buffered, duration) => {
|
|
35
|
+
if (!buffered)
|
|
36
|
+
return [];
|
|
37
|
+
const segments = [];
|
|
38
|
+
for (let i = 0; i < buffered.length; i++) {
|
|
39
|
+
const start = (buffered.start(i) / duration) * 100;
|
|
40
|
+
const end = (buffered.end(i) / duration) * 100;
|
|
41
|
+
segments.push({ startPercent: start, widthPercent: end - start });
|
|
42
|
+
}
|
|
43
|
+
return segments;
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* Maps a pointer's client x to a position on the scrubber.
|
|
47
|
+
*
|
|
48
|
+
* @param clientX The pointer's viewport x, from the mouse event.
|
|
49
|
+
* @param rect The scrubber's box. Only `left` and `width` are read.
|
|
50
|
+
* @param duration Length of the video in seconds. The time is this length times the unclamped ratio.
|
|
51
|
+
* @returns The ratio, the time it selects, and the pixel offset from the bar's left edge.
|
|
52
|
+
*/
|
|
53
|
+
const progressAtPointer = (clientX, rect, duration) => {
|
|
54
|
+
const offset = clientX - rect.left;
|
|
55
|
+
const ratio = offset / rect.width;
|
|
56
|
+
return { ratio, time: ratio * duration, offset };
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* Moves backward by `seconds`, never before the start.
|
|
60
|
+
*
|
|
61
|
+
* @param currentTime Position in seconds before the seek.
|
|
62
|
+
* @param seconds How far back to move. Defaults to the keyboard step of 10.
|
|
63
|
+
* @returns The next position, floored at 0.
|
|
64
|
+
*/
|
|
65
|
+
const seekBackward = (currentTime, seconds = 10) => Math.max(currentTime - seconds, 0);
|
|
66
|
+
/**
|
|
67
|
+
* Moves forward by `seconds`, never past `duration`.
|
|
68
|
+
*
|
|
69
|
+
* @param currentTime Position in seconds before the seek.
|
|
70
|
+
* @param duration Length of the video in seconds. A non-finite duration makes the result non-finite, the same as seeking before metadata loads.
|
|
71
|
+
* @param seconds How far forward to move. Defaults to the keyboard step of 10.
|
|
72
|
+
* @returns The next position, capped at `duration`.
|
|
73
|
+
*/
|
|
74
|
+
const seekForward = (currentTime, duration, seconds = 10) => Math.min(currentTime + seconds, duration);
|
|
75
|
+
/**
|
|
76
|
+
* Steps volume by `delta`, staying inside 0–1. A positive delta only clamps the top; a negative delta only clamps the bottom.
|
|
77
|
+
*
|
|
78
|
+
* @param volume Current level from 0 to 1.
|
|
79
|
+
* @param delta Change to apply. Arrow keys use `0.1` and `-0.1`.
|
|
80
|
+
* @returns The next level.
|
|
81
|
+
*/
|
|
82
|
+
const adjustVolume = (volume, delta) => (delta >= 0 ? Math.min(volume + delta, 1) : Math.max(volume + delta, 0));
|
|
83
|
+
|
|
84
|
+
exports.PLAYBACK_SPEEDS = PLAYBACK_SPEEDS;
|
|
85
|
+
exports.adjustVolume = adjustVolume;
|
|
86
|
+
exports.bufferedSegments = bufferedSegments;
|
|
87
|
+
exports.formatTime = formatTime;
|
|
88
|
+
exports.nextPlaybackRate = nextPlaybackRate;
|
|
89
|
+
exports.progressAtPointer = progressAtPointer;
|
|
90
|
+
exports.seekBackward = seekBackward;
|
|
91
|
+
exports.seekForward = seekForward;
|
|
92
|
+
//# sourceMappingURL=videoPlayer.utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"videoPlayer.utils.cjs","sources":["../../../../src/components/organisms/VideoPlayer/videoPlayer.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;AACO,MAAM,eAAe,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;AA2BrD;;;;;AAKG;AACI,MAAM,UAAU,GAAG,CAAC,IAAY,KAAY;AACjD,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;AAClD,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;AAClD,IAAA,OAAO,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,OAAO,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE;AAC5D;AAEA;;;;;AAKG;AACI,MAAM,gBAAgB,GAAG,CAAC,OAAe,KAAY;IAC1D,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC;IACrD,MAAM,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,IAAI,eAAe,CAAC,MAAM;AAC7D,IAAA,OAAO,eAAe,CAAC,SAAS,CAAC;AACnC;AAEA;;;;;;AAMG;MACU,gBAAgB,GAAG,CAAC,QAA8B,EAAE,QAAgB,KAAuB;AACtG,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,EAAE;IAExB,MAAM,QAAQ,GAAsB,EAAE;AACtC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACxC,QAAA,MAAM,KAAK,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,GAAG;AAClD,QAAA,MAAM,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,GAAG;AAC9C,QAAA,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAG,KAAK,EAAE,CAAC;IACnE;AACA,IAAA,OAAO,QAAQ;AACjB;AAEA;;;;;;;AAOG;AACI,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,IAAqC,EAAE,QAAgB,KAAqB;AAC7H,IAAA,MAAM,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,IAAI;AAClC,IAAA,MAAM,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC,KAAK;IACjC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,GAAG,QAAQ,EAAE,MAAM,EAAE;AAClD;AAEA;;;;;;AAMG;MACU,YAAY,GAAG,CAAC,WAAmB,EAAE,OAAO,GAAG,EAAE,KAAa,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,OAAO,EAAE,CAAC;AAE5G;;;;;;;AAOG;AACI,MAAM,WAAW,GAAG,CAAC,WAAmB,EAAE,QAAgB,EAAE,OAAO,GAAG,EAAE,KAAa,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,OAAO,EAAE,QAAQ;AAEpI;;;;;;AAMG;AACI,MAAM,YAAY,GAAG,CAAC,MAAc,EAAE,KAAa,MAAc,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC,CAAC;;;;;;;;;"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/** Speeds the large player's rate button cycles through, in order. */
|
|
2
|
+
export declare const PLAYBACK_SPEEDS: number[];
|
|
3
|
+
/** One buffered interval as percentages of the duration, for the scrubber's buffered bars. */
|
|
4
|
+
export interface BufferedSegment {
|
|
5
|
+
/** Left edge, as a percentage of the bar. */
|
|
6
|
+
startPercent: number;
|
|
7
|
+
/** Width, as a percentage of the bar. */
|
|
8
|
+
widthPercent: number;
|
|
9
|
+
}
|
|
10
|
+
/** A `TimeRanges`-shaped list. Tests pass a plain object; the video element passes `video.buffered`. */
|
|
11
|
+
export interface TimeRangeList {
|
|
12
|
+
length: number;
|
|
13
|
+
start: (index: number) => number;
|
|
14
|
+
end: (index: number) => number;
|
|
15
|
+
}
|
|
16
|
+
/** Where a pointer sits on the scrubber. */
|
|
17
|
+
export interface ProgressPointer {
|
|
18
|
+
/** Unclamped fraction of the bar width. A click seeks to this fraction of the duration. */
|
|
19
|
+
ratio: number;
|
|
20
|
+
/** Time in seconds at `ratio`. */
|
|
21
|
+
time: number;
|
|
22
|
+
/** Pixels from the bar's left edge. The hover indicator uses this as its `left`. */
|
|
23
|
+
offset: number;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Formats a playback position as `m:ss`, flooring partial seconds and clamping negatives to zero.
|
|
27
|
+
*
|
|
28
|
+
* @param time Position in seconds. Hours are not split out, so `125` is `2:05`.
|
|
29
|
+
* @returns A clock label such as `0:00` or `1:05`.
|
|
30
|
+
*/
|
|
31
|
+
export declare const formatTime: (time: number) => string;
|
|
32
|
+
/**
|
|
33
|
+
* Steps to the next playback speed, wrapping from the last speed back to the first.
|
|
34
|
+
*
|
|
35
|
+
* @param current The speed currently shown. A value outside {@link PLAYBACK_SPEEDS} starts the cycle at the first speed.
|
|
36
|
+
* @returns The next speed in the cycle.
|
|
37
|
+
*/
|
|
38
|
+
export declare const nextPlaybackRate: (current: number) => number;
|
|
39
|
+
/**
|
|
40
|
+
* Turns buffered media ranges into bar positions.
|
|
41
|
+
*
|
|
42
|
+
* @param buffered Ranges reported by the video element, or `null` before the first progress event.
|
|
43
|
+
* @param duration Length of the video in seconds. `0` produces non-finite percentages, matching the render-time division.
|
|
44
|
+
* @returns One segment per range, in order. No ranges yields an empty list, which renders nothing.
|
|
45
|
+
*/
|
|
46
|
+
export declare const bufferedSegments: (buffered: TimeRangeList | null, duration: number) => BufferedSegment[];
|
|
47
|
+
/**
|
|
48
|
+
* Maps a pointer's client x to a position on the scrubber.
|
|
49
|
+
*
|
|
50
|
+
* @param clientX The pointer's viewport x, from the mouse event.
|
|
51
|
+
* @param rect The scrubber's box. Only `left` and `width` are read.
|
|
52
|
+
* @param duration Length of the video in seconds. The time is this length times the unclamped ratio.
|
|
53
|
+
* @returns The ratio, the time it selects, and the pixel offset from the bar's left edge.
|
|
54
|
+
*/
|
|
55
|
+
export declare const progressAtPointer: (clientX: number, rect: {
|
|
56
|
+
left: number;
|
|
57
|
+
width: number;
|
|
58
|
+
}, duration: number) => ProgressPointer;
|
|
59
|
+
/**
|
|
60
|
+
* Moves backward by `seconds`, never before the start.
|
|
61
|
+
*
|
|
62
|
+
* @param currentTime Position in seconds before the seek.
|
|
63
|
+
* @param seconds How far back to move. Defaults to the keyboard step of 10.
|
|
64
|
+
* @returns The next position, floored at 0.
|
|
65
|
+
*/
|
|
66
|
+
export declare const seekBackward: (currentTime: number, seconds?: number) => number;
|
|
67
|
+
/**
|
|
68
|
+
* Moves forward by `seconds`, never past `duration`.
|
|
69
|
+
*
|
|
70
|
+
* @param currentTime Position in seconds before the seek.
|
|
71
|
+
* @param duration Length of the video in seconds. A non-finite duration makes the result non-finite, the same as seeking before metadata loads.
|
|
72
|
+
* @param seconds How far forward to move. Defaults to the keyboard step of 10.
|
|
73
|
+
* @returns The next position, capped at `duration`.
|
|
74
|
+
*/
|
|
75
|
+
export declare const seekForward: (currentTime: number, duration: number, seconds?: number) => number;
|
|
76
|
+
/**
|
|
77
|
+
* Steps volume by `delta`, staying inside 0–1. A positive delta only clamps the top; a negative delta only clamps the bottom.
|
|
78
|
+
*
|
|
79
|
+
* @param volume Current level from 0 to 1.
|
|
80
|
+
* @param delta Change to apply. Arrow keys use `0.1` and `-0.1`.
|
|
81
|
+
* @returns The next level.
|
|
82
|
+
*/
|
|
83
|
+
export declare const adjustVolume: (volume: number, delta: number) => number;
|
|
84
|
+
//# sourceMappingURL=videoPlayer.utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"videoPlayer.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/VideoPlayer/videoPlayer.utils.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,eAAO,MAAM,eAAe,UAA0B,CAAC;AAEvD,8FAA8F;AAC9F,MAAM,WAAW,eAAe;IAC9B,6CAA6C;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wGAAwG;AACxG,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjC,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAChC;AAED,4CAA4C;AAC5C,MAAM,WAAW,eAAe;IAC9B,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,oFAAoF;IACpF,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,MAAM,KAAG,MAIzC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,KAAG,MAIlD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAU,aAAa,GAAG,IAAI,EAAE,UAAU,MAAM,KAAG,eAAe,EAUlG,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,GAAI,SAAS,MAAM,EAAE,MAAM;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,UAAU,MAAM,KAAG,eAI5G,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,aAAa,MAAM,EAAE,gBAAY,KAAG,MAA4C,CAAC;AAE9G;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,aAAa,MAAM,EAAE,UAAU,MAAM,EAAE,gBAAY,KAAG,MAAmD,CAAC;AAEtI;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,EAAE,OAAO,MAAM,KAAG,MAAkF,CAAC"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
/** Speeds the large player's rate button cycles through, in order. */
|
|
2
|
+
const PLAYBACK_SPEEDS = [1, 1.25, 1.5, 1.75, 2];
|
|
3
|
+
/**
|
|
4
|
+
* Formats a playback position as `m:ss`, flooring partial seconds and clamping negatives to zero.
|
|
5
|
+
*
|
|
6
|
+
* @param time Position in seconds. Hours are not split out, so `125` is `2:05`.
|
|
7
|
+
* @returns A clock label such as `0:00` or `1:05`.
|
|
8
|
+
*/
|
|
9
|
+
const formatTime = (time) => {
|
|
10
|
+
const minutes = Math.max(Math.floor(time / 60), 0);
|
|
11
|
+
const seconds = Math.max(Math.floor(time % 60), 0);
|
|
12
|
+
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* Steps to the next playback speed, wrapping from the last speed back to the first.
|
|
16
|
+
*
|
|
17
|
+
* @param current The speed currently shown. A value outside {@link PLAYBACK_SPEEDS} starts the cycle at the first speed.
|
|
18
|
+
* @returns The next speed in the cycle.
|
|
19
|
+
*/
|
|
20
|
+
const nextPlaybackRate = (current) => {
|
|
21
|
+
const currentIndex = PLAYBACK_SPEEDS.indexOf(current);
|
|
22
|
+
const nextIndex = (currentIndex + 1) % PLAYBACK_SPEEDS.length;
|
|
23
|
+
return PLAYBACK_SPEEDS[nextIndex];
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Turns buffered media ranges into bar positions.
|
|
27
|
+
*
|
|
28
|
+
* @param buffered Ranges reported by the video element, or `null` before the first progress event.
|
|
29
|
+
* @param duration Length of the video in seconds. `0` produces non-finite percentages, matching the render-time division.
|
|
30
|
+
* @returns One segment per range, in order. No ranges yields an empty list, which renders nothing.
|
|
31
|
+
*/
|
|
32
|
+
const bufferedSegments = (buffered, duration) => {
|
|
33
|
+
if (!buffered)
|
|
34
|
+
return [];
|
|
35
|
+
const segments = [];
|
|
36
|
+
for (let i = 0; i < buffered.length; i++) {
|
|
37
|
+
const start = (buffered.start(i) / duration) * 100;
|
|
38
|
+
const end = (buffered.end(i) / duration) * 100;
|
|
39
|
+
segments.push({ startPercent: start, widthPercent: end - start });
|
|
40
|
+
}
|
|
41
|
+
return segments;
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* Maps a pointer's client x to a position on the scrubber.
|
|
45
|
+
*
|
|
46
|
+
* @param clientX The pointer's viewport x, from the mouse event.
|
|
47
|
+
* @param rect The scrubber's box. Only `left` and `width` are read.
|
|
48
|
+
* @param duration Length of the video in seconds. The time is this length times the unclamped ratio.
|
|
49
|
+
* @returns The ratio, the time it selects, and the pixel offset from the bar's left edge.
|
|
50
|
+
*/
|
|
51
|
+
const progressAtPointer = (clientX, rect, duration) => {
|
|
52
|
+
const offset = clientX - rect.left;
|
|
53
|
+
const ratio = offset / rect.width;
|
|
54
|
+
return { ratio, time: ratio * duration, offset };
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
* Moves backward by `seconds`, never before the start.
|
|
58
|
+
*
|
|
59
|
+
* @param currentTime Position in seconds before the seek.
|
|
60
|
+
* @param seconds How far back to move. Defaults to the keyboard step of 10.
|
|
61
|
+
* @returns The next position, floored at 0.
|
|
62
|
+
*/
|
|
63
|
+
const seekBackward = (currentTime, seconds = 10) => Math.max(currentTime - seconds, 0);
|
|
64
|
+
/**
|
|
65
|
+
* Moves forward by `seconds`, never past `duration`.
|
|
66
|
+
*
|
|
67
|
+
* @param currentTime Position in seconds before the seek.
|
|
68
|
+
* @param duration Length of the video in seconds. A non-finite duration makes the result non-finite, the same as seeking before metadata loads.
|
|
69
|
+
* @param seconds How far forward to move. Defaults to the keyboard step of 10.
|
|
70
|
+
* @returns The next position, capped at `duration`.
|
|
71
|
+
*/
|
|
72
|
+
const seekForward = (currentTime, duration, seconds = 10) => Math.min(currentTime + seconds, duration);
|
|
73
|
+
/**
|
|
74
|
+
* Steps volume by `delta`, staying inside 0–1. A positive delta only clamps the top; a negative delta only clamps the bottom.
|
|
75
|
+
*
|
|
76
|
+
* @param volume Current level from 0 to 1.
|
|
77
|
+
* @param delta Change to apply. Arrow keys use `0.1` and `-0.1`.
|
|
78
|
+
* @returns The next level.
|
|
79
|
+
*/
|
|
80
|
+
const adjustVolume = (volume, delta) => (delta >= 0 ? Math.min(volume + delta, 1) : Math.max(volume + delta, 0));
|
|
81
|
+
|
|
82
|
+
export { PLAYBACK_SPEEDS, adjustVolume, bufferedSegments, formatTime, nextPlaybackRate, progressAtPointer, seekBackward, seekForward };
|
|
83
|
+
//# sourceMappingURL=videoPlayer.utils.js.map
|