0 ? 'block' : 'none',
125 | width: currentThumbnail.rect.w,
126 | height: currentThumbnail.rect.h,
127 | backgroundImage: `url(${currentThumbnail.url})`,
128 | backgroundPositionX: currentThumbnail.rect.x,
129 | backgroundPositionY: currentThumbnail.rect.y,
130 | backgroundRepeat: 'no-repeat',
131 | }}
132 | />
133 |
134 |
135 | ) : null;
136 | };
137 |
138 | export default ThumbnailHover;
139 |
--------------------------------------------------------------------------------
/src/components/Controls/TimeIndicator.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { useVideo } from '../../contexts/VideoContext';
4 | import { convertTime } from '../../utils';
5 |
6 | const TimeIndicator = () => {
7 | const { videoState } = useVideo();
8 |
9 | return (
10 |
11 | {convertTime(videoState.currentTime)} /{' '}
12 | {convertTime(videoState.duration || 0)}
13 |
14 | );
15 | };
16 |
17 | export default React.memo(TimeIndicator);
18 |
--------------------------------------------------------------------------------
/src/components/Controls/VolumeButton/VolumeButton.module.css:
--------------------------------------------------------------------------------
1 | .buttonContainer {
2 | display: flex;
3 | align-items: center;
4 | }
5 |
6 | .buttonContainer:hover .sliderContainer {
7 | width: 4rem !important;
8 | }
9 |
10 | .buttonContainer:hover .dot {
11 | opacity: 1;
12 | }
13 |
14 | .sliderContainer {
15 | margin-left: 0.5rem;
16 | width: 0 !important;
17 | align-items: center;
18 | display: flex;
19 | transition: all 200ms;
20 | transform-origin: left center;
21 | height: 5px !important;
22 | position: relative;
23 | }
24 |
25 | .backgroundBar {
26 | background-color: rgba(255, 255, 255, 0.3);
27 | }
28 |
29 | .mainBar {
30 | background-color: red;
31 | }
32 |
33 | .dot {
34 | background-color: red;
35 | transition: opacity 300ms;
36 | opacity: 0;
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/Controls/VolumeButton/VolumeButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useMemo, useRef } from 'react';
2 | import { useVideo } from '../../../contexts/VideoContext';
3 | import { useVideoProps } from '../../../contexts/VideoPropsContext';
4 | import useHotKey, { parseHotKey } from '../../../hooks/useHotKey';
5 | import { stringInterpolate } from '../../../utils';
6 | import VolumeMutedIcon from '../../icons/VolumeMutedIcon';
7 | import VolumeOneIcon from '../../icons/VolumeOneIcon';
8 | import VolumeThreeIcon from '../../icons/VolumeThreeIcon';
9 | import VolumeTwoIcon from '../../icons/VolumeTwoIcon';
10 | import Slider from '../../Slider';
11 | import ControlButton from '../ControlButton';
12 | import styles from './VolumeButton.module.css';
13 |
14 | const VolumeComponents = {
15 | 0: VolumeMutedIcon,
16 | 0.25: VolumeOneIcon,
17 | 0.5: VolumeTwoIcon,
18 | 1: VolumeThreeIcon,
19 | };
20 |
21 | const VolumeButton = () => {
22 | const { videoState, videoEl } = useVideo();
23 | const { i18n } = useVideoProps();
24 | const hotkey = useHotKey('volume');
25 | const previousVolume = useRef(videoState.volume);
26 |
27 | const VolumeComponent = useMemo(() => {
28 | const entries = Object.entries(VolumeComponents).sort(
29 | (a, b) => Number(a[0]) - Number(b[0])
30 | );
31 |
32 | for (const [key, value] of entries) {
33 | if (videoState.volume <= Number(key)) {
34 | return value;
35 | }
36 | }
37 |
38 | return VolumeMutedIcon;
39 | }, [videoState.volume]);
40 |
41 | const handleClick = useCallback(() => {
42 | if (!videoEl) return;
43 |
44 | if (videoEl.volume === 0) {
45 | videoEl.volume = previousVolume.current;
46 | } else {
47 | previousVolume.current = videoEl.volume;
48 | videoEl.volume = 0;
49 | }
50 | }, [videoEl]);
51 |
52 | const handleVolumeChange = useCallback(
53 | (percent: number) => {
54 | if (!videoEl) return;
55 |
56 | videoEl.volume = percent / 100;
57 | },
58 | [videoEl]
59 | );
60 |
61 | return (
62 |
63 |
75 |
76 |
77 |
78 |
83 |
87 |
88 |
89 |
90 |
91 | );
92 | };
93 |
94 | export default VolumeButton;
95 |
--------------------------------------------------------------------------------
/src/components/Controls/VolumeButton/index.tsx:
--------------------------------------------------------------------------------
1 | import VolumeButton from './VolumeButton';
2 |
3 | export default VolumeButton;
4 |
--------------------------------------------------------------------------------
/src/components/Controls/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as ControlButton } from './ControlButton';
2 | export { default as ProgressSlider } from './ProgressSlider';
3 | export { default as SettingsButton } from './SettingsButton';
4 | export { default as VolumeButton } from './VolumeButton';
5 | export { default as BackwardButton } from './BackwardButton';
6 | export { default as ForwardButton } from './ForwardButton';
7 | export { default as FullscreenButton } from './FullscreenButton';
8 | export { default as PlayPauseButton } from './PlayPauseButton';
9 | export { default as SubtitleButton } from './SubtitleButton';
10 | export { default as TimeIndicator } from './TimeIndicator';
11 | export { default as MobileVolumeSlider } from '../Indicator/MobileVolumeSlider';
12 | export { default as ThumbnailHover } from './ThumbnailHover';
13 | export { default as ScreenshotButton } from './ScreenshotButton';
14 |
15 | import Controls from './Controls';
16 |
17 | export default Controls;
18 |
--------------------------------------------------------------------------------
/src/components/DefaultUI/DefaultUI.module.css:
--------------------------------------------------------------------------------
1 | /* add css module styles here (optional) */
2 |
3 | .container {
4 | width: 100%;
5 | height: 100%;
6 | background-color: black;
7 | position: relative;
8 | }
9 |
10 | .playerContainer {
11 | width: 100%;
12 | height: 100%;
13 | }
14 |
15 | .controlsContainer {
16 | width: 100%;
17 | position: absolute;
18 | bottom: 0;
19 | z-index: 2;
20 | }
21 |
22 | .overlayContainer {
23 | position: absolute;
24 | z-index: 1;
25 | top: 0;
26 | left: 0;
27 | right: 0;
28 | bottom: 0;
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/DefaultUI/index.ts:
--------------------------------------------------------------------------------
1 | import DefaultUI from './DefaultUI';
2 |
3 | export default DefaultUI;
4 |
--------------------------------------------------------------------------------
/src/components/Dialog/Dialog.module.css:
--------------------------------------------------------------------------------
1 | .dialogContainer,
2 | .dialogOverlay {
3 | position: fixed;
4 | top: 0;
5 | right: 0;
6 | bottom: 0;
7 | left: 0;
8 | z-index: 9999;
9 | }
10 |
11 | .dialogContainer {
12 | z-index: 9999;
13 | display: flex;
14 | margin: 0;
15 | transition: all 200ms;
16 | }
17 |
18 | .dialogContainer[aria-hidden='true'] {
19 | visibility: hidden;
20 | opacity: 0;
21 | }
22 |
23 | .dialogOverlay {
24 | background-color: rgba(0, 0, 0, 0.8);
25 | }
26 |
27 | .dialogContent {
28 | z-index: 9999;
29 | position: relative;
30 | background-color: rgba(0, 0, 0, 0.9);
31 | width: auto;
32 | margin: auto;
33 | }
34 |
35 | .dialogContentMobile {
36 | width: 100%;
37 | margin-top: auto;
38 | margin-left: 0;
39 | margin-right: 0;
40 | margin-bottom: 0;
41 | }
42 |
43 | .dialogContainer > .dialogContentMobile {
44 | transition: all 200ms;
45 | transform: translateY(0%);
46 | }
47 |
48 | .dialogContainer[aria-hidden='true'] > .dialogContentMobile {
49 | transform: translateY(20%);
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/Dialog/Dialog.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { classNames } from '../../utils';
3 | import { isMobile } from '../../utils/device';
4 | import Portal from '../Portal';
5 | import styles from './Dialog.module.css';
6 |
7 | interface DialogProps {
8 | reference: React.ReactNode;
9 | portalSelector?: string;
10 | }
11 |
12 | const Dialog: React.FC
= ({
13 | reference,
14 | children,
15 | portalSelector,
16 | }) => {
17 | const [portalElement, setPortalElement] = React.useState(
18 | document.body
19 | );
20 | const [show, setShow] = React.useState(false);
21 |
22 | React.useLayoutEffect(() => {
23 | if (!portalSelector) return;
24 |
25 | const el = document.querySelector(portalSelector);
26 |
27 | if (!el) return;
28 |
29 | setPortalElement(el);
30 | }, [portalSelector]);
31 |
32 | return (
33 |
34 | setShow(true)}>{reference}
35 |
36 |
37 |
38 |
setShow(false)}
40 | className={styles.dialogOverlay}
41 | />
42 |
43 |
49 | {children}
50 |
51 |
52 |
53 |
54 | );
55 | };
56 |
57 | export default Dialog;
58 |
--------------------------------------------------------------------------------
/src/components/Dialog/index.tsx:
--------------------------------------------------------------------------------
1 | import Dialog from './Dialog';
2 |
3 | export default Dialog;
4 |
--------------------------------------------------------------------------------
/src/components/Indicator/BackwardIndicator.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import BackwardIcon from '../icons/BackwardIcon';
4 | import Indicator, { createIndicator } from './Indicator';
5 |
6 | const BackwardIndicator = createIndicator((props, ref) => {
7 | return (
8 |
17 |
18 |
19 |
20 |
21 | );
22 | });
23 |
24 | export default React.memo(BackwardIndicator);
25 |
--------------------------------------------------------------------------------
/src/components/Indicator/ForwardIndicator.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import ForwardIcon from '../icons/ForwardIcon';
4 | import Indicator, { createIndicator } from './Indicator';
5 |
6 | const ForwardIndicator = createIndicator((props, ref) => {
7 | return (
8 |
17 |
18 |
19 |
20 |
21 | );
22 | });
23 |
24 | export default React.memo(ForwardIndicator);
25 |
--------------------------------------------------------------------------------
/src/components/Indicator/Indicator.module.css:
--------------------------------------------------------------------------------
1 | .indicator {
2 | width: 5rem;
3 | height: 5rem;
4 | border-radius: 50%;
5 | animation: fadeOut 500ms linear forwards;
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | background-color: rgba(0, 0, 0, 0.8);
10 | position: absolute;
11 | z-index: 9999;
12 | }
13 |
14 | @keyframes fadeOut {
15 | 0% {
16 | opacity: 1;
17 | visibility: visible;
18 | }
19 |
20 | 100% {
21 | opacity: 0;
22 | visibility: hidden;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/Indicator/Indicator.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { PLAYER_CONTAINER_CLASS } from '../../constants';
3 | import { useInteract } from '../../contexts';
4 | import { classNames } from '../../utils';
5 | import { isDesktop } from '../../utils/device';
6 | import Portal from '../Portal';
7 | import styles from './Indicator.module.css';
8 |
9 | export interface IndicatorRef {
10 | show(shouldReshow?: boolean): void;
11 | hide(): void;
12 | }
13 |
14 | export const createIndicator =
(
15 | component: React.ForwardRefRenderFunction
16 | ) => {
17 | return React.forwardRef(component);
18 | };
19 |
20 | interface BaseIndicatorProps extends React.HTMLAttributes {
21 | className?: string;
22 | animationTime?: number;
23 | }
24 |
25 | const ANIMATION_TIME = 500;
26 |
27 | export const BaseIndicator = React.forwardRef(
28 | (
29 | { className = '', children = '', animationTime = ANIMATION_TIME, ...props },
30 | ref
31 | ) => {
32 | const [show, setShow] = React.useState(false);
33 | const [container, setContainer] = React.useState();
34 | const innerRef = React.useRef(null);
35 | const { setIsShowingIndicator } = useInteract();
36 | const timeout = React.useRef();
37 |
38 | React.useImperativeHandle(ref, () => ({
39 | show: (shouldReshow = true) => {
40 | if (timeout.current) {
41 | clearTimeout(timeout.current);
42 | }
43 |
44 | if (shouldReshow) {
45 | setShow(false);
46 | }
47 |
48 | setTimeout(() => {
49 | setShow(true);
50 |
51 | setIsShowingIndicator(true);
52 | }, 0);
53 |
54 | timeout.current = setTimeout(() => {
55 | setShow(false);
56 |
57 | setIsShowingIndicator(false);
58 | }, animationTime);
59 | },
60 | hide: () => setShow(false),
61 | }));
62 |
63 | React.useLayoutEffect(() => {
64 | const containerEl = document.querySelector('.' + PLAYER_CONTAINER_CLASS);
65 |
66 | if (!containerEl) return;
67 |
68 | setContainer(containerEl);
69 | }, []);
70 |
71 | return (
72 |
73 | {show && (
74 |
75 | {children}
76 |
77 | )}
78 |
79 | );
80 | }
81 | );
82 |
83 | const Indicator = React.forwardRef(
84 | ({ children, className = '', ...props }, ref) => {
85 | return isDesktop ? (
86 |
91 | {children}
92 |
93 | ) : null;
94 | }
95 | );
96 |
97 | BaseIndicator.displayName = 'BaseIndicator';
98 | Indicator.displayName = 'Indicator';
99 |
100 | export default Indicator;
101 |
--------------------------------------------------------------------------------
/src/components/Indicator/MobileBackwardIndicator/MobileBackwardIndicator.module.css:
--------------------------------------------------------------------------------
1 | .indicator {
2 | background-color: rgba(0, 0, 0, 0.6);
3 | position: absolute;
4 | left: 0;
5 | top: 0;
6 | width: 45vw;
7 | height: 100%;
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | flex-direction: column;
12 | border-radius: 0% 20% 20% 0% / 50% 50% 50% 50%;
13 | animation: fadeOut 500ms linear forwards;
14 | z-index: 50;
15 | }
16 |
17 | .iconContainer {
18 | width: 4rem;
19 | height: 4rem;
20 | animation: rotate 500ms cubic-bezier(0.32, 0.94, 0.99, 1.12);
21 | }
22 |
23 | @keyframes fadeOut {
24 | 0% {
25 | opacity: 1;
26 | visibility: visible;
27 | }
28 |
29 | 90% {
30 | opacity: 1;
31 | visibility: visible;
32 | }
33 |
34 | 100% {
35 | opacity: 0;
36 | visibility: hidden;
37 | }
38 | }
39 |
40 | @keyframes rotate {
41 | 0% {
42 | transform: rotate(0deg);
43 | }
44 |
45 | 50% {
46 | transform: rotate(-45deg);
47 | }
48 |
49 | 100% {
50 | transform: rotate(0deg);
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/Indicator/MobileBackwardIndicator/MobileBackwardIndicator.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import BackwardIcon from '../../icons/BackwardIcon';
3 | import { BaseIndicator, createIndicator } from '../Indicator';
4 | import styles from './MobileBackwardIndicator.module.css';
5 |
6 | const MobileBackwardIndicator = createIndicator((props, ref) => {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | );
14 | });
15 |
16 | export default MobileBackwardIndicator;
17 |
--------------------------------------------------------------------------------
/src/components/Indicator/MobileBackwardIndicator/index.ts:
--------------------------------------------------------------------------------
1 | import MobileBackwardIndicator from './MobileBackwardIndicator';
2 |
3 | export default MobileBackwardIndicator;
4 |
--------------------------------------------------------------------------------
/src/components/Indicator/MobileForwardIndicator/MobileForwardIndicator.module.css:
--------------------------------------------------------------------------------
1 | .indicator {
2 | background-color: rgba(0, 0, 0, 0.6);
3 | position: absolute;
4 | right: 0;
5 | top: 0;
6 | width: 45vw;
7 | height: 100%;
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | flex-direction: column;
12 | border-radius: 20% 0% 0% 20% / 50% 50% 50% 50%;
13 | animation: fadeOut 500ms linear forwards;
14 | z-index: 50;
15 | }
16 |
17 | .iconContainer {
18 | width: 4rem;
19 | height: 4rem;
20 | animation: rotate 500ms cubic-bezier(0.32, 0.94, 0.99, 1.12);
21 | }
22 |
23 | @keyframes fadeOut {
24 | 0% {
25 | opacity: 1;
26 | visibility: visible;
27 | }
28 |
29 | 90% {
30 | opacity: 1;
31 | visibility: visible;
32 | }
33 |
34 | 100% {
35 | opacity: 0;
36 | visibility: hidden;
37 | }
38 | }
39 |
40 | @keyframes rotate {
41 | 0% {
42 | transform: rotate(0deg);
43 | }
44 |
45 | 50% {
46 | transform: rotate(45deg);
47 | }
48 |
49 | 100% {
50 | transform: rotate(0deg);
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/Indicator/MobileForwardIndicator/MobileForwardIndicator.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import ForwardIcon from '../../icons/ForwardIcon';
3 | import { BaseIndicator, createIndicator } from '../Indicator';
4 | import styles from './MobileForwardIndicator.module.css';
5 |
6 | const MobileForwardIndicator = createIndicator((props, ref) => {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | );
14 | });
15 |
16 | export default MobileForwardIndicator;
17 |
--------------------------------------------------------------------------------
/src/components/Indicator/MobileForwardIndicator/index.ts:
--------------------------------------------------------------------------------
1 | import MobileForwardIndicator from './MobileForwardIndicator';
2 |
3 | export default MobileForwardIndicator;
4 |
--------------------------------------------------------------------------------
/src/components/Indicator/MobileVolumeSlider/MobileVolumeSlider.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 0 1rem;
3 | height: 80%;
4 | width: max-content;
5 | display: flex;
6 | flex-direction: column;
7 | align-items: center;
8 | justify-content: center;
9 | /* animation: fadeOut 500ms linear forwards; */
10 | z-index: 50;
11 | position: absolute;
12 | left: 1rem;
13 | top: 50%;
14 | transform: translateY(-50%);
15 | width: 4rem;
16 | }
17 |
18 | .sliderContainer {
19 | height: 100%;
20 | width: 100%;
21 | border-radius: 4rem;
22 | position: relative;
23 | background-color: #333333;
24 | }
25 |
26 | .slider {
27 | width: 100%;
28 | border-radius: 4rem;
29 | background-color: red;
30 | position: absolute;
31 | bottom: 0;
32 | }
33 |
34 | .volumeIcon {
35 | margin-bottom: 0.5rem;
36 | width: 1.5rem;
37 | height: 1.5rem;
38 | }
39 |
40 | @keyframes fadeOut {
41 | 0% {
42 | opacity: 1;
43 | visibility: visible;
44 | }
45 |
46 | 90% {
47 | opacity: 1;
48 | visibility: visible;
49 | }
50 |
51 | 100% {
52 | opacity: 0;
53 | visibility: hidden;
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/Indicator/MobileVolumeSlider/MobileVolumeSlider.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react';
2 | import { useVideo } from '../../../contexts';
3 | import { classNames } from '../../../utils';
4 | import VolumeMutedIcon from '../../icons/VolumeMutedIcon';
5 | import VolumeOneIcon from '../../icons/VolumeOneIcon';
6 | import VolumeThreeIcon from '../../icons/VolumeThreeIcon';
7 | import VolumeTwoIcon from '../../icons/VolumeTwoIcon';
8 | import { BaseIndicator, createIndicator } from '../Indicator';
9 | import styles from './MobileVolumeSlider.module.css';
10 |
11 | const VolumeComponents = {
12 | 0: VolumeMutedIcon,
13 | 0.25: VolumeOneIcon,
14 | 0.5: VolumeTwoIcon,
15 | 1: VolumeThreeIcon,
16 | };
17 |
18 | const MobileVolumeSlider = createIndicator((props, ref) => {
19 | const { videoState } = useVideo();
20 |
21 | const VolumeComponent = useMemo(() => {
22 | const entries = Object.entries(VolumeComponents).sort(
23 | (a, b) => Number(a[0]) - Number(b[0])
24 | );
25 |
26 | for (const [key, value] of entries) {
27 | if (videoState.volume <= Number(key)) {
28 | return value;
29 | }
30 | }
31 |
32 | return VolumeMutedIcon;
33 | }, [videoState.volume]);
34 |
35 | return (
36 |
42 |
43 |
44 |
45 |
46 |
52 |
53 | );
54 | });
55 |
56 | export default MobileVolumeSlider;
57 |
--------------------------------------------------------------------------------
/src/components/Indicator/MobileVolumeSlider/index.ts:
--------------------------------------------------------------------------------
1 | import MobileVolumeSlider from './MobileVolumeSlider';
2 |
3 | export default MobileVolumeSlider;
4 |
--------------------------------------------------------------------------------
/src/components/Indicator/PauseIndicator.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import PauseIcon from '../icons/PauseIcon';
4 | import Indicator, { createIndicator } from './Indicator';
5 |
6 | const PauseIndicator = createIndicator((props, ref) => {
7 | return (
8 |
17 |
20 |
21 | );
22 | });
23 |
24 | export default React.memo(PauseIndicator);
25 |
--------------------------------------------------------------------------------
/src/components/Indicator/PlayIndicator.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import PlayIcon from '../icons/PlayIcon';
4 | import Indicator, { createIndicator } from './Indicator';
5 |
6 | const PlayIndicator = createIndicator((props, ref) => {
7 | return (
8 |
17 |
20 |
21 | );
22 | });
23 |
24 | export default React.memo(PlayIndicator);
25 |
--------------------------------------------------------------------------------
/src/components/Indicator/index.ts:
--------------------------------------------------------------------------------
1 | export { default as MobileBackwardIndicator } from './MobileBackwardIndicator';
2 | export { default as MobileForwardIndicator } from './MobileForwardIndicator';
3 | export { default as PauseIndicator } from './PauseIndicator';
4 | export { default as PlayIndicator } from './PlayIndicator';
5 |
6 | import Indicator from './Indicator';
7 |
8 | export default Indicator;
9 |
--------------------------------------------------------------------------------
/src/components/MobileControls/MobileControls.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 100%;
3 | padding: 1rem;
4 | visibility: visible;
5 | opacity: 1;
6 | transition: visibility 300ms, opacity 300ms;
7 | }
8 |
9 | .container.inactive {
10 | visibility: hidden;
11 | opacity: 0;
12 | }
13 |
14 | .controlsContainer {
15 | display: flex;
16 | width: 100%;
17 | justify-content: space-between;
18 | align-items: center;
19 | }
20 |
21 | .fullscreenButton {
22 | width: 1rem;
23 | height: 1rem;
24 | }
25 |
26 | .sliderContainer {
27 | margin-top: 0.5rem;
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/MobileControls/MobileControls.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { useVideo } from '../../contexts/VideoContext';
3 | import { useInteract } from '../../contexts/VideoInteractingContext';
4 | import { classNames } from '../../utils';
5 | import FullscreenButton from '../Controls/FullscreenButton';
6 | import ProgressSlider from '../Controls/ProgressSlider';
7 | import TimeIndicator from '../Controls/TimeIndicator';
8 | import styles from './MobileControls.module.css';
9 |
10 | const MobileControls = () => {
11 | const { isInteracting, isShowingIndicator } = useInteract();
12 | const { videoState } = useVideo();
13 |
14 | const shouldInactive = React.useMemo(() => {
15 | return (
16 | (!videoState.seeking && !isInteracting && !videoState.buffering) ||
17 | isShowingIndicator
18 | );
19 | }, [
20 | isInteracting,
21 | isShowingIndicator,
22 | videoState.buffering,
23 | videoState.seeking,
24 | ]);
25 |
26 | return (
27 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
44 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
66 | {activeMenu.menuKey !== 'base' && (
67 |
71 |
72 | 
5 |