Add offscreen for audio sounds

Stigmatoz · Stigmatoz · commit 5c45b03167b8 · 2024-02-17T22:48:31.000+03:00
diff --git a/src/manifest.json b/src/manifest.json
@@ -19,7 +19,8 @@
     "idle",
     "unlimitedStorage",
     "alarms",
-    "notifications"
+    "notifications",
+    "offscreen"
   ],
   "offline_enabled": true,
   "background": {
diff --git a/src/offscreen.html b/src/offscreen.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Offscreen</title>
+  </head>
+
+  <body>
+    <audio></audio>
+    <script type="module" src="./offscreen.ts"></script>
+  </body>
+</html>
diff --git a/src/offscreen.ts b/src/offscreen.ts
@@ -0,0 +1,23 @@
+import Browser from 'webextension-polyfill';
+import { Messages } from './utils/messages';
+
+console.log('ofscreen');
+
+Browser.runtime.onMessage.addListener(msg => {
+  console.log('ofscreen message');
+  if (msg.message == Messages.PlayAudio) {
+    if (msg.offscreen == undefined) return;
+
+    playAudio(msg.sound);
+  }
+});
+
+function playAudio(sound: string) {
+  const audio = document.querySelector('audio');
+  if (!audio) return;
+
+  const path = Browser.runtime.getURL(`../assets/pomodoro-sounds/${sound}`);
+  audio.src = path;
+  audio.volume = 1;
+  audio.play();
+}
diff --git a/src/offscreen/index.ts b/src/offscreen/index.ts
@@ -0,0 +1,12 @@
+import Browser from 'webextension-polyfill';
+
+export async function createOffscreen() {
+  const path = 'src/offscreen.html';
+  const offscreenUrl = Browser.runtime.getURL(path);
+  if (await chrome.offscreen.hasDocument()) return;
+  await chrome.offscreen.createDocument({
+    url: offscreenUrl,
+    reasons: ['AUDIO_PLAYBACK'],
+    justification: 'Play audio sounds',
+  });
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -55,7 +55,7 @@ export default defineConfig(({ mode }) => ({
     webExtension({
       manifest: generateManifest,
       watchFilePaths: ['package.json', 'manifest.json'],
-      additionalInputs: ['src/block.html', 'src/welcome.html'],
+      additionalInputs: ['src/block.html', 'src/welcome.html', 'src/offscreen.html'],
     }),
     copy({
       targets: [
