-
Notifications
You must be signed in to change notification settings - Fork 0
/
ToggleCaptions.tsx
34 lines (27 loc) · 1.02 KB
/
ToggleCaptions.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, { useContext } from 'react';
import { PlayerContext } from 'jwplayer/players/shared/PlayerContext';
import IconBubble from '@fandom-frontend/react-common/dist/icons/IconBubble';
import useCurrentCaption from 'jwplayer/utils/useCurrentCaption';
import { ToggleCaptionsProps } from 'experimental/types';
import clsx from 'clsx';
import styles from './ToggleCaptions.module.css';
const ToggleCaptions: React.FC<ToggleCaptionsProps> = ({ resetOverlayTimeout }) => {
const currentCaption = useCurrentCaption();
const { player } = useContext(PlayerContext);
const handleToggleCaptions = (event) => {
event.stopPropagation();
currentCaption === 0 ? player.setCurrentCaptions(1) : player.setCurrentCaptions(0);
resetOverlayTimeout();
};
const isActive = currentCaption === 1;
return (
<div className={styles.iconWrapper} onClick={handleToggleCaptions}>
<IconBubble
className={clsx(styles.iconBubble, {
[styles['iconBubbleActive']]: isActive,
})}
/>
</div>
);
};
export default ToggleCaptions;