Play sound after period

Author: Stigmatoz

src/components/PomodoroSoundsSelector.vue

@@ -29,8 +29,8 @@ export default {
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { PomodoroAudioParams, PomodoroSounds } from '../utils/pomodoro';
-import Browser from 'webextension-polyfill';
 import { injecStorage } from '../storage/inject-storage';
+import { playSound } from '../functions/playSound';
 
 const props = defineProps<{
   option: PomodoroAudioParams;
@@ -42,10 +42,7 @@ const settingsStorage = injecStorage();
 const audioAfterPeriod = ref<PomodoroSounds>(props.value);
 
 function playAudio() {
-  const myAudio = new Audio(
-    Browser.runtime.getURL(`assets/pomodoro-sounds/${audioAfterPeriod.value}`),
-  );
-  myAudio.play();
+  playSound(audioAfterPeriod.value);
 }
 
 async function onAudioChange(target: any) {

src/functions/playSound.ts

@@ -0,0 +1,7 @@
+import Browser from 'webextension-polyfill';
+import { PomodoroSounds } from '../utils/pomodoro';
+
+export function playSound(sound: PomodoroSounds) {
+  const myAudio = new Audio(Browser.runtime.getURL(`assets/pomodoro-sounds/${sound}`));
+  myAudio.play();
+}

src/functions/pomodoro.ts

@@ -5,9 +5,15 @@ import { useBadge, BadgeIcon, BadgeColor } from './useBadge';
 import { Settings } from './settings';
 import Browser from 'webextension-polyfill';
 import { logger } from '../utils/logger';
+import { playSound } from './playSound';
 
 export async function checkPomodoro() {
-  function isTargetPeriod() {
+  type PomodoroPeriod = {
+    isTargetPeriod: boolean;
+    isTargetPeriodFinishedNow: boolean;
+  };
+
+  function isTargetPeriod(): PomodoroPeriod {
     for (let index = 1; index <= frequency; index++) {
       const plusWorkingTime = workTime * (index - 1);
       const plusRestTime = restTime * (index - 1);
@@ -20,9 +26,23 @@ export async function checkPomodoro() {
         now.getTime() >= isPomodoroTargetPeriodStart.getTime() &&
         now.getTime() <= isPomodoroTargetPeriodEnd.getTime();
 
-      if (isTargetPeriod) return true;
+      if (isTargetPeriod)
+        return {
+          isTargetPeriod: true,
+          isTargetPeriodFinishedNow: now.getTime() == isPomodoroTargetPeriodEnd.getTime(),
+        };
+    }
+    return {
+      isTargetPeriod: false,
+      isTargetPeriodFinishedNow: false,
+    };
+  }
+
+  async function play(param: StorageParams) {
+    if (target.isTargetPeriodFinishedNow) {
+      const sound = await storage.getValue(param);
+      playSound(sound);
     }
-    return false;
   }
 
   const storage = injecStorage();
@@ -51,7 +71,9 @@ export async function checkPomodoro() {
 
   const activeTab = await Browser.tabs.query({ active: true });
 
-  if (now > pomodoroEndTime) {
+  if (now >= pomodoroEndTime) {
+    if (now == pomodoroEndTime) await play(StorageParams.POMODORO_AUDIO_AFTER_FINISHED);
+
     await storage.saveValue(StorageParams.IS_POMODORO_ENABLED, false);
     await storage.saveValue(StorageParams.POMODORO_START_TIME, null);
     await useBadge({
@@ -63,7 +85,8 @@ export async function checkPomodoro() {
     return;
   }
 
-  const isWork = isTargetPeriod();
+  const target = isTargetPeriod();
+  const isWork = target.isTargetPeriod;
 
   if (isWork) {
     logger.log('[Pomodoro] Work Time');
@@ -73,6 +96,7 @@ export async function checkPomodoro() {
       color: BadgeColor.none,
       icon: BadgeIcon.pomodoroWorkingTime,
     });
+    await play(StorageParams.POMODORO_AUDIO_AFTER_WORK);
   } else {
     logger.log('[Pomodoro] Rest Time');
     await useBadge({
@@ -81,6 +105,7 @@ export async function checkPomodoro() {
       color: BadgeColor.none,
       icon: BadgeIcon.pomodoroRestTime,
     });
+    await play(StorageParams.POMODORO_AUDIO_AFTER_REST);
   }
 
   return {