80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import cn from 'classnames';
|
|
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
|
|
import { Button, Popover } from 'antd';
|
|
import { useStore } from 'App/mstore';
|
|
import { observer } from 'mobx-react-lite';
|
|
import AutoplayToggle from 'Shared/AutoplayToggle';
|
|
import { useTranslation } from 'react-i18next';
|
|
// import AutoplayToggle from "Components/Session/Player/ClipPlayer/AutoplayToggle";
|
|
|
|
interface Props {}
|
|
|
|
function QueueControls(props: Props) {
|
|
const { t } = useTranslation();
|
|
const { clipStore } = useStore();
|
|
const previousId = clipStore.prevId;
|
|
const { nextId } = clipStore;
|
|
|
|
const nextHandler = () => {
|
|
clipStore.next();
|
|
};
|
|
|
|
const prevHandler = () => {
|
|
clipStore.prev();
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-1">
|
|
<div
|
|
onClick={prevHandler}
|
|
className={cn('p-1 group rounded-full', {
|
|
'pointer-events-none opacity-50': !previousId,
|
|
'cursor-pointer': !!previousId,
|
|
})}
|
|
>
|
|
<Popover
|
|
placement="bottom"
|
|
content={
|
|
<div className="whitespace-nowrap">
|
|
{t('Play Previous Session')}
|
|
</div>
|
|
}
|
|
open={previousId ? undefined : false}
|
|
mouseEnterDelay={1}
|
|
>
|
|
<Button
|
|
size="small"
|
|
shape="circle"
|
|
disabled={!previousId}
|
|
className="flex items-center justify-center"
|
|
>
|
|
<LeftOutlined />
|
|
</Button>
|
|
</Popover>
|
|
</div>
|
|
<AutoplayToggle />
|
|
<div onClick={nextHandler} className={cn('p-1 group ml-1 rounded-full')}>
|
|
<Popover
|
|
placement="bottom"
|
|
content={
|
|
<div className="whitespace-nowrap">{t('Play Next Session')}</div>
|
|
}
|
|
open={nextId ? undefined : false}
|
|
mouseEnterDelay={1}
|
|
>
|
|
<Button
|
|
size="small"
|
|
shape="circle"
|
|
// disabled={!nextId}
|
|
className="flex items-center justify-center"
|
|
>
|
|
<RightOutlined />
|
|
</Button>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(QueueControls);
|