diff --git a/src/App.tsx b/src/App.tsx index a7a8d7b..2d7413e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import "./App.css"; import ThemeSwitcher from "./components/ThemeSwitcher"; import CurrentTime from "./components/CurrentTime"; @@ -7,6 +7,9 @@ import dayjs from "dayjs"; import SetupView from "./components/SetupView"; import WorkView from "./components/WorkView"; import SessionList from "./components/SessionList"; +import chime1 from "./assets/notification-1.mp3"; +import chime2 from "./assets/notification-2.mp3"; +import chime3 from "./assets/notification-3.mp3"; export const LocalStorageConsts = { WORK_TIME: "workTime", @@ -27,10 +30,12 @@ function App() { [] ); - const isWorking = - sessions.length > 0 - ? now.unix() < sessions[0].start + sessions[0].work + sessions[0].break - : false; + const workEndTime = + sessions.length > 0 ? sessions[0].start + sessions[0].work : 0; + const breakEndTime = + sessions.length > 0 ? workEndTime + sessions[0].break : 0; + const isWorking = now.unix() < breakEndTime; + const isWork = now.unix() < workEndTime; useEffect(() => { const timer = setInterval(() => { @@ -39,6 +44,46 @@ function App() { return () => clearInterval(timer); }, []); + const workStateRef = useRef(); + + useEffect(() => { + const workState = isWorking ? (isWork ? 1 : 2) : 0; + if (workState != workStateRef.current) { + switch (workState) { + case 1: + new Audio(chime3).play(); + break; + case 2: + new Audio(chime1).play(); + break; + case 0: + new Audio(chime2).play(); + break; + default: + break; + } + } + workStateRef.current = workState; + }, [isWork, isWorking]); + + const updateTitle = () => { + if (isWorking) { + const secondsLeft = + (isWork ? workEndTime : breakEndTime) - now.unix() - 1; + const minutesLeft = Math.floor(secondsLeft / 60); + let minutes = minutesLeft.toString(); + if (minutesLeft < 10) minutes = "0" + minutes; + let seconds = (secondsLeft % 60).toString(); + if (secondsLeft % 60 < 10) seconds = "0" + seconds; + const time = `⦗${minutes}:${seconds}⦘ `; + document.title = time + (isWork ? `Working...` : `Break time!`); + } else { + document.title = "Brain pls work"; + } + }; + + useEffect(updateTitle, [now]); + return (
diff --git a/src/assets/chime.mp3 b/src/assets/chime.mp3 deleted file mode 100644 index d49e6dc..0000000 Binary files a/src/assets/chime.mp3 and /dev/null differ diff --git a/src/assets/notification-1.mp3 b/src/assets/notification-1.mp3 new file mode 100644 index 0000000..9cf960e Binary files /dev/null and b/src/assets/notification-1.mp3 differ diff --git a/src/assets/notification-2.mp3 b/src/assets/notification-2.mp3 new file mode 100644 index 0000000..2aa2229 Binary files /dev/null and b/src/assets/notification-2.mp3 differ diff --git a/src/assets/notification-3.mp3 b/src/assets/notification-3.mp3 new file mode 100644 index 0000000..dc511d2 Binary files /dev/null and b/src/assets/notification-3.mp3 differ diff --git a/src/components/SessionList.tsx b/src/components/SessionList.tsx index 82b0849..02ae474 100644 --- a/src/components/SessionList.tsx +++ b/src/components/SessionList.tsx @@ -49,13 +49,14 @@ const SessionList: React.FC = ({ }, [trueSessions, isWorking, now]); const renderTime = (seconds: number, size: number, className: string) => { + const fullBarSize = 25 * 60; let tempSeconds = seconds; const widths = []; - while (tempSeconds > 3600) { + while (tempSeconds > fullBarSize) { widths.push(100); - tempSeconds -= 3600; + tempSeconds -= fullBarSize; } - widths.push(Math.floor((100 * tempSeconds) / 3600)); + widths.push(Math.floor((100 * tempSeconds) / fullBarSize)); return (
{widths.map((w, i) => ( @@ -85,9 +86,9 @@ const SessionList: React.FC = ({ {sessionData.map((day, i) => (
  • -
    +
    = ({ : dayjs.unix(day.timestamp + 24 * 3600).fromNow()}
    -
    +
    {renderTime( day.workSeconds, diff --git a/src/components/WorkView.tsx b/src/components/WorkView.tsx index 39302d3..5a8ed7d 100644 --- a/src/components/WorkView.tsx +++ b/src/components/WorkView.tsx @@ -4,7 +4,6 @@ import { Session } from "../App"; import Countdown from "./Countdown"; import clsx from "clsx"; import { IoClose } from "react-icons/io5"; -import chime from "../assets/chime.mp3"; interface WorkViewProps { sessions: Session[]; @@ -13,11 +12,10 @@ interface WorkViewProps { } function WorkView({ sessions, setSessions, now }: WorkViewProps) { - const audio = new Audio(chime); - const isWork = - sessions.length > 0 - ? now.unix() <= sessions[0].start + sessions[0].work - : false; + const workEndTime = + sessions.length > 0 ? sessions[0].start + sessions[0].work : 0; + + const isWork = sessions.length > 0 ? now.unix() <= workEndTime : false; const endEarly = () => { if (sessions.length > 0) { @@ -32,15 +30,6 @@ function WorkView({ sessions, setSessions, now }: WorkViewProps) { } }; - const isWorkRef = useRef(); - - useEffect(() => { - if (!isWork && !!isWorkRef.current) { - audio.play(); - } - isWorkRef.current = isWork; - }, [isWork]); - return (