react-icons/bs#BsFillPlayFill JavaScript Examples

export function FocussedTask() {
    const focussedTaskIndex = useSelector((state) => state.tasks.meta.focussedTaskIndex);
    const autoCompleteZeroTimeTask = useSelector((s) => s.settings.autoCompleteZeroTimeTask);
    let focussedTask = useSelector((state) => (focussedTaskIndex !== -1 ? state.tasks.taskArray[focussedTaskIndex] : null));
    const dispatch = useDispatch();
    const delay = 1010; // to account for the delay in executing code.
    useTimer(
        (deltaMS) => {
            if (focussedTask === null) return;
            else if (focussedTask.remainingTime > 0) {
                dispatch(tick({ focussedTaskIndex, deltaMS }));
            } else if (focussedTask.remainingTime === 0) {
                dingSoundElement.play();
                if(document.hidden) updatePageTitle(`Fokus: TIMER UP!!!`);
                dispatch(toggleSoundscapeState(false));
                dispatch(toggleIsRunning({ idx: focussedTaskIndex }));
                if (autoCompleteZeroTimeTask) {
                    dispatch(resetFocussedTask());
                    dispatch(toggleIsCompleted(focussedTask.id));
                    dispatch(rearrange({ id: focussedTask.id, markedAsComplete: true }));
                }
            }
        },
        focussedTask !== null && focussedTask.isRunning ? delay : null
    );

    function updateTaskTimeHandler(val) {
        if (focussedTask.time + val * MIN_TO_MS < 0) return;
        if (focussedTask.time + val * MIN_TO_MS > 120 * MIN_TO_MS) return;
        if (focussedTask.isRunning) dispatch(toggleIsRunning({ idx: focussedTaskIndex }));
        dispatch(updateTaskTimeByVal({ focussedTaskIndex, val }));
        dispatch(toggleSoundscapeState(false));
    }

    function playPauseHandler(focussedTaskIndex, wasTaskRunning) {
        dispatch(toggleIsRunning({ idx: focussedTaskIndex }));
        if (wasTaskRunning) {
            updatePageTitle("Fokus");
            dispatch(toggleSoundscapeState(false));
        } else {
            updatePageTitle(`Fokus: ${focussedTask.content}`);
            dispatch(toggleSoundscapeState(true));
        }
    }

    const countdownObj = formattedTimeStringv2(focussedTask.remainingTime);
    let countdownMins = countdownObj.mins;
    let countdownSecs = countdownObj.secs;

    const totalTaskTimeObj = formattedTimeStringv2(focussedTask.time);
    let totalTaskMins = totalTaskTimeObj.mins;

    return (
        <FocussedTaskDiv>
            <FocussedTaskPlayer>
                <FocussedTaskTimer>
                    <div style={{ width: 100, height: 100 }}>
                        <CircularProgressbarWithChildren
                            value={focussedTask.time !== 0 ? Math.floor((focussedTask.remainingTime / focussedTask.time) * 100) : 0}
                            styles={buildStyles({
                                strokeLinecap: "butt",
                                pathColor: "#121212",
                                trailColor: "#F0F8FF",
                            })}
                            strokeWidth={9}
                        >
                            <CountdownTimerDiv>
                                <p>{countdownMins}</p>
                                <span>m</span>
                                <p>{countdownSecs}</p>
                                <span>s</span>
                            </CountdownTimerDiv>
                        </CircularProgressbarWithChildren>
                    </div>
                </FocussedTaskTimer>

                <FocussedTaskController>
                    <UpdateTimeButtonDiv isDisabled={focussedTask.time + 5 * MIN_TO_MS > 120 * MIN_TO_MS} onClick={() => updateTaskTimeHandler(5)}>
                        <h4>+5</h4>
                    </UpdateTimeButtonDiv>

                    {focussedTask.remainingTime !== 0 ? (
                        <PlayPauseButtonDiv isPlayBtn={!focussedTask.isRunning} onClick={() => playPauseHandler(focussedTaskIndex, focussedTask.isRunning)}>
                            {focussedTask.isRunning ? <BsFillPauseFill /> : <BsFillPlayFill />}
                        </PlayPauseButtonDiv>
                    ) : (
                        <TaskCompletedDiv data-tip="" data-for="taskCompleted">
                            <FaClipboardCheck />
                            <ReactTooltip id="taskCompleted" getContent={() => "Task Completed"} />
                        </TaskCompletedDiv>
                    )}

                    <UpdateTimeButtonDiv isDisabled={focussedTask.time - 5 * MIN_TO_MS < 0} onClick={() => updateTaskTimeHandler(-5)}>
                        <h4>-5</h4>
                    </UpdateTimeButtonDiv>
                </FocussedTaskController>

                <ResetButtonDiv
                    onClick={() => {
                        dispatch(toggleSoundscapeState(false));
                        dispatch(resetTaskTimer(focussedTaskIndex));
                    }}
                    data-for="reset"
                    data-tip=""
                >
                    <ResetIcon />
                    <ReactTooltip id="reset" getContent={() => "Reset"} />
                </ResetButtonDiv>
            </FocussedTaskPlayer>
            <FocussedTaskContent>
                <p>{focussedTask.content}</p>
                <TotalTaskTimeBadge data-tip="" data-for="totalTimeBadge">
                    <p>{totalTaskMins}m</p>
                    <ReactTooltip id="totalTimeBadge" getContent={() => "Task's total time"} />
                </TotalTaskTimeBadge>
            </FocussedTaskContent>
        </FocussedTaskDiv>
    );
}