feat: prevent computer from going to sleep mode every breaks. Mention…

… here #84

app/src/contexts/CounterContext.tsx

@@ -11,7 +11,7 @@ import {
   SPECIAL_BREAK,
   SettingTypes,
 } from "store";
-import { useNotification } from "hooks";
+import { useNotification, useSleepMode } from "hooks";
 
 import shortBreakStart from "assets/audios/short-break-start.wav";
 import shortBreakFinished from "assets/audios/short-break-finished.wav";
@@ -57,6 +57,8 @@ const CounterProvider: React.FC = ({ children }) => {
 
   const [shouldFullscreen, setShouldFullscreen] = useState(false);
 
+  const { preventSleep, allowSleep } = useSleepMode();
+
   const notification = useNotification(
     {
       icon: settings.enableDarkTheme ? notificationIconDark : notificationIcon,
@@ -100,6 +102,14 @@ const CounterProvider: React.FC = ({ children }) => {
     setTimerDuration,
   ]);
 
+  useEffect(() => {
+    if (timer.playing && timer.timerType !== STAY_FOCUS) {
+      preventSleep();
+    } else {
+      allowSleep();
+    }
+  }, [timer.playing, timer.timerType, preventSleep, allowSleep]);
+
   useEffect(() => {
     let interval: number;
 

app/src/declarations.d.ts

@@ -3,3 +3,5 @@ declare module "*.woff2";
 declare module "*.png";
 declare module "*.jpg";
 declare module "*.wav";
+declare module "*.mp4";
+declare module "*.ogv";

app/src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from "./useInputHandler";
 export * from "./useTargetOutside";
 export * from "./useRippleEffect";
 export * from "./useNotification";
+export * from "./useSleepMode";

app/src/hooks/useSleepMode.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from "react";
+
+import VideoMp4 from "assets/videos/muted-blank.mp4";
+import VideoOGV from "assets/videos/muted-blank.ogv";
+
+const useSleepMode = () => {
+  const _video = useRef(document.createElement("video"));
+
+  useEffect(() => {
+    const _videoStyle: React.CSSProperties = {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "0",
+      height: "0",
+    };
+
+    Object.assign(_video.current.style, _videoStyle);
+
+    const _source_mp4 = document.createElement("source");
+    _source_mp4.setAttribute("src", VideoMp4);
+    _source_mp4.setAttribute("type", "video/mp4");
+
+    _video.current.appendChild(_source_mp4);
+
+    const _source_ogg = document.createElement("source");
+    _source_ogg.setAttribute("src", VideoOGV);
+    _source_ogg.setAttribute("type", "video/ogg");
+
+    _video.current.appendChild(_source_ogg);
+
+    document.body.appendChild(_video.current);
+  }, [_video]);
+
+  const preventSleep = () => {
+    _video.current.setAttribute("loop", "loop");
+    _video.current.play();
+  };
+
+  const allowSleep = () => {
+    _video.current.removeAttribute("loop");
+    _video.current.pause();
+  };
+
+  return { preventSleep, allowSleep };
+};
+
+export { useSleepMode };