openreplay/frontend/app/components/Session/Player/ClipPlayer/QueueControls.tsx

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 AutoplayToggle from "Components/Session/Player/ClipPlayer/AutoplayToggle";

interface Props {

}

function QueueControls(props: Props) {
    const {clipStore, projectsStore, sessionStore, searchStore} = useStore();
    const previousId = clipStore.prevId;
    const nextId = clipStore.nextId;

    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">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">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);