fix: multiple countdown instances

rortan134 · Sep 3, 2022 · c233a24 · c233a24
1 parent f8244a6
commit c233a24
Showing 1 changed file with 36 additions and 35 deletions.
diff --git a/src/renderer/backdrop.tsx b/src/renderer/backdrop.tsx
@@ -1,11 +1,3 @@
-// Prevent Alt+F4
-window.addEventListener('keydown', (e) => {
- const { key, altKey } = e;
- if (key === 'F4' && altKey) {
- e.preventDefault();
- }
-});
-
 const root = document.getElementById('root') as HTMLElement;
 
 function formatSeconds(duration: number) {
@@ -35,36 +27,37 @@ const timingIndicatorContent = timingIndicator.textContent?.slice();
 
 let mouseActivityTimeout: NodeJS.Timeout | undefined;
 let timerUntilClose: NodeJS.Timeout | undefined;
-let secondTimer: NodeJS.Timeout | undefined;
 
 let started = false;
 
 function inactive() {
  // reset state
  timingIndicator.style.opacity = '0';
  clearInterval(timerUntilClose);
- clearTimeout(secondTimer);
  started = false;
 }
 
 function checkActivity() {
  mouseActivityTimeout = setTimeout(inactive, 500);
 }
 
+function setTimingIndicator(timeLeft: number) {
+ timingIndicator.textContent = `${timingIndicatorContent} ${timeLeft} seconds`;
+}
+
 function detectMouseMovement() {
  clearTimeout(mouseActivityTimeout);
 
  if (!started) {
  let timeLeft = 2;
- timingIndicator.textContent = `${timingIndicatorContent} ${timeLeft} seconds`;
+ setTimingIndicator(timeLeft);
 
- secondTimer = setInterval(() => {
+ timerUntilClose = setInterval(() => {
  timeLeft -= 1;
- timingIndicator.textContent = `${timingIndicatorContent} ${timeLeft} seconds`;
+ setTimingIndicator(timeLeft);
 
  if (timeLeft <= 0) {
- clearInterval(secondTimer);
- timingIndicator.textContent = `${timingIndicatorContent} ${timeLeft} seconds`;
+ clearInterval(timerUntilClose);
  started = false;
  window.electron.ipcRenderer.sendMessage('activate', [false]);
  }
@@ -80,44 +73,52 @@ function detectMouseMovement() {
 
 const subtitle = document.getElementById('clean-subtitle') as HTMLElement;
 const content = subtitle.textContent?.slice();
+let countdown: NodeJS.Timeout | undefined;
 
-window.electron.ipcRenderer.on('backdrop', (val) => {
- const isActive = (val as unknown as boolean[])[0];
+function setSubtitle(timeLeft: number) {
+ subtitle.textContent = `${content} ${formatSeconds(timeLeft)} ${
+ timeLeft > 60 ? 'm' : 's'
+ }`;
+}
 
- // 5 minutes in seconds
- let countdown: number | null = 300;
+function endCountdown() {
+ clearInterval(countdown);
+ subtitle.textContent = content ?? null; // reset
+}
 
- const timer = setInterval(() => {
- if (!countdown) return;
+function startCountdown() {
+ let timeLeft = 300; // 5 minutes in seconds
+ setSubtitle(timeLeft);
 
- if (countdown <= 0) {
- window.clearInterval(timer);
- countdown = null;
- return;
- }
+ countdown = setInterval(() => {
+ timeLeft -= 1;
+ setSubtitle(timeLeft);
 
- countdown -= 1;
- subtitle.textContent = `${content} ${formatSeconds(countdown)}m`;
+ if (timeLeft <= 0) {
+ window.electron.ipcRenderer.sendMessage('activate', [false]);
+ }
  }, 1000);
+}
+
+window.electron.ipcRenderer.on('backdrop', (val) => {
+ const isActive = (val as unknown as boolean[])[0];
 
  if (isActive) {
+ startCountdown();
+
  setTimeout(() => {
  root.addEventListener('mousemove', detectMouseMovement, false);
  }, 1000);
 
- subtitle.textContent = `${content} ${formatSeconds(countdown)}m`;
-
+ // slide animation
  root.style.animation =
  'show 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards';
  } else {
+ endCountdown();
+
  root.removeEventListener('mousemove', detectMouseMovement, false);
 
  root.style.animation =
  'hide 0.1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards';
-
- window.clearInterval(timer);
- subtitle.textContent = content ?? null;
- // reset counter
- countdown = 300;
  }
 });