134 lines
3.8 KiB
JavaScript
134 lines
3.8 KiB
JavaScript
import React from 'react';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { useEffect } from 'react';
|
|
import cn from 'classnames';
|
|
|
|
import Timeline from './Timeline';
|
|
import ControlButton from './ControlButton';
|
|
|
|
import cls from './Controls.module.css';
|
|
|
|
|
|
|
|
function getPlayButtonProps(player) {
|
|
let label;
|
|
let icon;
|
|
if (player.state.completed) {
|
|
label = 'Replay';
|
|
icon = 'redo';
|
|
} else if (player.state.playing) {
|
|
label = 'Pause';
|
|
icon = 'pause';
|
|
} else {
|
|
label = 'Play';
|
|
icon = 'play';
|
|
}
|
|
return {
|
|
label,
|
|
icon,
|
|
};
|
|
}
|
|
|
|
function Controls({
|
|
player,
|
|
toolbar,
|
|
}) {
|
|
useEffect(() => {
|
|
function onKeyDown(e) {
|
|
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
|
|
return;
|
|
}
|
|
if (e.key === 'Esc' || e.key === 'Escape') {
|
|
player.fullscreen.disable();
|
|
}
|
|
if (player.controlsDisabled) {
|
|
return;
|
|
}
|
|
if (e.key === ' ') {
|
|
document.activeElement.blur();
|
|
player.togglePlay();
|
|
}
|
|
if (e.key === "ArrowRight") {
|
|
player.forthTenSeconds();
|
|
}
|
|
if (e.key === "ArrowLeft") {
|
|
player.backTenSeconds();
|
|
}
|
|
if (e.key === "ArrowDown") {
|
|
player.speedDown();
|
|
}
|
|
if (e.key === "ArrowUp") {
|
|
player.speedUp();
|
|
}
|
|
}
|
|
document.addEventListener('keydown', onKeyDown);
|
|
return () => {
|
|
document.removeEventListener('keydown', onKeyDown);
|
|
}
|
|
}, []);
|
|
|
|
const disabled = player.controlsDisabled;
|
|
return (
|
|
<div className={ cls.controls }>
|
|
<Timeline player={ player } />
|
|
{ !player.isFullscreen &&
|
|
<div className={ cn("flex justify-between items-center", cls.buttons) } >
|
|
<div className="flex items-center">
|
|
<ControlButton
|
|
disabled={ disabled }
|
|
onClick={ player.togglePlay }
|
|
{ ...getPlayButtonProps(player) }
|
|
/>
|
|
<ControlButton
|
|
onClick={ player.backTenSeconds }
|
|
disabled={ disabled }
|
|
label="Back"
|
|
icon="replay-10"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<button
|
|
className={ cn("text-gray-darkest hover:bg-gray-lightest", cls.speedButton) }
|
|
onClick={ player.toggleSpeed }
|
|
data-disabled={ disabled }
|
|
>
|
|
<div>{ player.state.speed + 'x' }</div>
|
|
</button>
|
|
{/* <div className={ cls.divider } /> */}
|
|
{/* <button */}
|
|
{/* className={ cn("flex items-center text-gray-darkest hover:bg-gray-lightest", cls.skipIntervalButton) } */}
|
|
{/* onClick={ player.toggleSkip } */}
|
|
{/* data-disabled={ disabled } */}
|
|
{/* > */}
|
|
{/* { player.isSkippingInactivity && <Icon name="check" color="gray-dark" /> } */}
|
|
{/* { 'Skip Inactivity' } */}
|
|
{/* </button> */}
|
|
<div className={ cls.divider } />
|
|
{ toolbar.map(({ key, label, icon, hasErrors=false, showCount = true }) =>
|
|
<ControlButton
|
|
key={ key }
|
|
disabled={ disabled || player.lists[key].count === 0 }
|
|
onClick={ () => player.togglePanel(key) }
|
|
active={ player.toolPanel.key === key }
|
|
label={ label }
|
|
icon={ icon }
|
|
count={ showCount && player.lists[key].countNow }
|
|
hasErrors={ hasErrors }
|
|
/>
|
|
)}
|
|
|
|
<ControlButton
|
|
disabled={ disabled }
|
|
onClick={ player.toggleFullscreen }
|
|
active={ player.fullscreen.enabled }
|
|
label="Full Screen"
|
|
icon="fullscreen"
|
|
/>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(Controls);
|