Merge pull request #2 from jambonz/fix/audio_settings

fix review comment

package-lock.json

@@ -32,6 +32,7 @@
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.8.1",
         "file-loader": "^6.2.0",
+        "raw-loader": "^4.0.2",
         "sass": "^1.64.1",
         "sass-loader": "^13.3.2",
         "style-loader": "^3.3.3",
@@ -16168,6 +16169,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",

package.json

@@ -3,36 +3,36 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/react": "^2.8.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "buffer": "^6.0.3",
+    "google-libphonenumber": "^3.2.33",
+    "jssip": "^3.2.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
-    "@chakra-ui/react": "^2.8.0",
-    "jssip": "^3.2.17",
-    "react-feather": "^2.0.10",
-    "buffer": "^6.0.3",
-    "google-libphonenumber": "^3.2.33"
+    "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@types/chrome": "^0.0.242",
     "@types/google-libphonenumber": "^7.4.27",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.53",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
-    "@types/chrome": "^0.0.242",
-    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4",
     "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "file-loader": "^6.2.0",
     "sass": "^1.64.1",
     "sass-loader": "^13.3.2",
-    "ts-loader": "^9.4.4",
-    "file-loader": "^6.2.0",
     "style-loader": "^3.3.3",
-    "css-loader": "^6.8.1"
+    "ts-loader": "^9.4.4",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
   },
   "scripts": {
     "build": "webpack --config webpack.config.js",

public/manifest.json

@@ -7,11 +7,5 @@
     "default_popup": "js/index.html",
     "default_title": "Webrtc Chrome Extension"
   },
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["js/content.js"]
-    }
-  ],
   "permissions": ["activeTab", "storage"]
 }

src/content/index.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import { Call, CallAction, Message, MessageEvent } from "./../common/types";
-import { openPhonePopup } from "./../utils";
 
 export const ContentApp = () => {
   const [selectedText, setSelectedText] = useState("");
-  const [counting, setCounting] = useState(0);
   const [position, setPosition] = useState({ x: 0, y: 0 });
 
   useEffect(() => {

src/declarations.d.ts

@@ -1 +1,2 @@
 declare module "*.png";
+declare module "*.txt";

src/lib/SipAudioElements.ts

@@ -1,26 +1,16 @@
-// @ts-ignore
-
-const ringingURL: string = "https://vibe-public.s3.eu-west-1.amazonaws.com/Tone-Telephone-UK-Ring+Tone-Loop.mp3";
-const failedURL: string = "https://vibe-public.s3.eu-west-1.amazonaws.com/windows-error-sound-effect-35894.mp3";
-const answeredURL: string = "https://vibe-public.s3.eu-west-1.amazonaws.com/lazer-96499.mp3";
-
 export default class SipAudioElements {
   #ringing: HTMLAudioElement;
   #failed: HTMLAudioElement;
   #answer: HTMLAudioElement;
   #remote: HTMLAudioElement;
 
-
   constructor() {
-        this.#ringing = new Audio();
+    this.#ringing = new Audio(chrome.runtime.getURL("audios/ringing.mp3"));
     this.#ringing.loop = true;
-        this.#ringing.src = ringingURL;
     this.#ringing.volume = 0.8;
-        this.#failed = new Audio();
-        this.#failed.src = failedURL;
+    this.#failed = new Audio(chrome.runtime.getURL("audios/failed.mp3"));
     this.#failed.volume = 0.3;
-        this.#answer = new Audio();
-        this.#answer.src = answeredURL;
+    this.#answer = new Audio(chrome.runtime.getURL("audios/failed.mp3"));
     this.#answer.volume = 0.3;
     this.#remote = new Audio();
   }
@@ -48,10 +38,10 @@ export default class SipAudioElements {
 
   playAnswer(volume: number | undefined): void {
     this.pauseRinging();
-        if (volume) {
-            this.#answer.volume = volume;
-        }
-        this.#answer.play();
+    // if (volume) {
+    //   this.#answer.volume = volume;
+    // }
+    // this.#answer.play();
   }
 
   isRemoteAudioPaused(): boolean {
@@ -64,7 +54,11 @@ export default class SipAudioElements {
   }
 
   isPLaying(audio: HTMLAudioElement) {
-        return audio.currentTime > 0 && !audio.paused && !audio.ended
-            && audio.readyState > audio.HAVE_CURRENT_DATA;
+    return (
+      audio.currentTime > 0 &&
+      !audio.paused &&
+      !audio.ended &&
+      audio.readyState > audio.HAVE_CURRENT_DATA
+    );
   }
 }

src/window/settings.tsx

@@ -1,16 +1,35 @@
 import {
+  ChakraProvider,
   Button,
   FormControl,
   FormLabel,
   Input,
   VStack,
   useToast,
+  extendTheme,
 } from "@chakra-ui/react";
 import React, { useEffect, useState } from "react";
 import { DEFAULT_TOAST_DURATION } from "src/common/constants";
 import { AppSettings } from "src/common/types";
 import { getSettings, saveSettings } from "src/storage";
 
+const settingsThem = extendTheme({
+  components: {
+    FormLabel: {
+      baseStyle: {
+        fontSize: "12px",
+      },
+    },
+    Input: {
+      baseStyle: {
+        field: {
+          fontSize: "12px", // Change this as per your requirement
+        },
+      },
+    },
+  },
+});
+
 export const Settings = () => {
   const [sipDomain, setSipDomain] = useState("");
   const [sipServerAddress, setSipServerAddress] = useState("");
@@ -63,8 +82,9 @@ export const Settings = () => {
     }
   }, []);
   return (
+    <ChakraProvider theme={settingsThem}>
       <form onSubmit={handleSubmit}>
-      <VStack spacing={4}>
+        <VStack spacing={2}>
           <FormControl id="jambonz_sip_domain">
             <FormLabel>Jambonz SIP Domain</FormLabel>
             <Input
@@ -135,6 +155,7 @@ export const Settings = () => {
           </Button>
         </VStack>
       </form>
+    </ChakraProvider>
   );
 };
 

webpack.config.js

@@ -28,7 +28,7 @@ module.exports = [
       ],
     },
     resolve: {
-      extensions: [".ts", ".tsx",".js"],
+      extensions: [".ts", ".tsx", ".js"],
     },
   },
   {
@@ -67,18 +67,14 @@ module.exports = [
           ],
         },
         {
-          test: /\.(png|jpe?g|gif|svg)$/i,
-          use: [
-            {
-              loader: "file-loader",
-            },
-          ],
+          test: /\.txt$/i,
+          type: "asset/source",
         },
       ],
     },
     plugins: [
       new CopyPlugin({
-        patterns: [{ from: "manifest.json", to: "../manifest.json" }],
+        patterns: [{ from: "public", to: ".." }],
       }),
       ...getHtmlPlugins(["index"]),
     ],
@@ -86,7 +82,7 @@ module.exports = [
       alias: {
         src: path.resolve(__dirname, "src/"),
       },
-      extensions: [".tsx", ".ts", ".js"],
+      extensions: [".tsx", ".ts", ".js", ".txt"],
     },
     output: {
       path: path.join(__dirname, "dist/js"),
@@ -142,12 +138,7 @@ module.exports = [
         },
       ],
     },
-    plugins: [
-      new CopyPlugin({
-        patterns: [{ from: "manifest.json", to: "../manifest.json" }],
-      }),
-      ...getHtmlPlugins(["index"]),
-    ],
+    plugins: [...getHtmlPlugins(["index"])],
     resolve: {
       alias: {
         src: path.resolve(__dirname, "src/"),