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",
+    "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"
   },
   "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,70 +1,64 @@
-// @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;
+  #ringing: HTMLAudioElement;
-    #failed: HTMLAudioElement;
+  #failed: HTMLAudioElement;
-    #answer: HTMLAudioElement;
+  #answer: HTMLAudioElement;
-    #remote: HTMLAudioElement;
+  #remote: HTMLAudioElement;
 
+  constructor() {
+    this.#ringing = new Audio(chrome.runtime.getURL("audios/ringing.mp3"));
+    this.#ringing.loop = true;
+    this.#ringing.volume = 0.8;
+    this.#failed = new Audio(chrome.runtime.getURL("audios/failed.mp3"));
+    this.#failed.volume = 0.3;
+    this.#answer = new Audio(chrome.runtime.getURL("audios/failed.mp3"));
+    this.#answer.volume = 0.3;
+    this.#remote = new Audio();
+  }
 
-    constructor() {
+  playRinging(volume: number | undefined): void {
-        this.#ringing = new Audio();
+    if (volume) {
-        this.#ringing.loop = true;
+      this.#ringing.volume = volume;
-        this.#ringing.src = ringingURL;
-        this.#ringing.volume = 0.8;
-        this.#failed = new Audio();
-        this.#failed.src = failedURL;
-        this.#failed.volume = 0.3;
-        this.#answer = new Audio();
-        this.#answer.src = answeredURL;
-        this.#answer.volume = 0.3;
-        this.#remote = new Audio();
     }
+    this.#ringing.play();
+  }
 
-    playRinging(volume: number | undefined): void {
+  pauseRinging(): void {
-        if (volume) {
+    if (!this.#ringing.paused) {
-            this.#ringing.volume = volume;
+      this.#ringing.pause();
-        }
-        this.#ringing.play();
     }
+  }
 
-    pauseRinging(): void {
+  playFailed(volume: number | undefined): void {
-        if (!this.#ringing.paused) {
+    this.pauseRinging();
-            this.#ringing.pause();
+    if (volume) {
-        }
+      this.#failed.volume = volume;
     }
+    this.#failed.play();
+  }
 
-    playFailed(volume: number | undefined): void {
+  playAnswer(volume: number | undefined): void {
-        this.pauseRinging();
+    this.pauseRinging();
-        if (volume) {
+    // if (volume) {
-            this.#failed.volume = volume;
+    //   this.#answer.volume = volume;
-        }
+    // }
-        this.#failed.play();
+    // this.#answer.play();
-    }
+  }
 
-    playAnswer(volume: number | undefined): void {
+  isRemoteAudioPaused(): boolean {
-        this.pauseRinging();
+    return this.#remote.paused;
-        if (volume) {
+  }
-            this.#answer.volume = volume;
-        }
-        this.#answer.play();
-    }
 
-    isRemoteAudioPaused(): boolean {
+  playRemote(stream: MediaStream) {
-        return this.#remote.paused;
+    this.#remote.srcObject = stream;
-    }
+    this.#remote.play();
+  }
 
-    playRemote(stream: MediaStream) {
+  isPLaying(audio: HTMLAudioElement) {
-        this.#remote.srcObject = stream;
+    return (
-        this.#remote.play();
+      audio.currentTime > 0 &&
-    }
+      !audio.paused &&
-
+      !audio.ended &&
-    isPLaying(audio: HTMLAudioElement) {
+      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,78 +82,80 @@ export const Settings = () => {
     }
   }, []);
   return (
-    <form onSubmit={handleSubmit}>
+    <ChakraProvider theme={settingsThem}>
-      <VStack spacing={4}>
+      <form onSubmit={handleSubmit}>
-        <FormControl id="jambonz_sip_domain">
+        <VStack spacing={2}>
-          <FormLabel>Jambonz SIP Domain</FormLabel>
+          <FormControl id="jambonz_sip_domain">
-          <Input
+            <FormLabel>Jambonz SIP Domain</FormLabel>
-            type="text"
+            <Input
-            placeholder="Domain"
+              type="text"
-            isRequired
+              placeholder="Domain"
-            value={sipDomain}
+              isRequired
-            onChange={(e) => setSipDomain(e.target.value)}
+              value={sipDomain}
-          />
+              onChange={(e) => setSipDomain(e.target.value)}
-        </FormControl>
+            />
+          </FormControl>
 
-        <FormControl id="jambonz_server_address">
+          <FormControl id="jambonz_server_address">
-          <FormLabel>Jambonz Server Address</FormLabel>
+            <FormLabel>Jambonz Server Address</FormLabel>
-          <Input
+            <Input
-            type="text"
+              type="text"
-            placeholder="Server address"
+              placeholder="Server address"
-            isRequired
+              isRequired
-            value={sipServerAddress}
+              value={sipServerAddress}
-            onChange={(e) => setSipServerAddress(e.target.value)}
+              onChange={(e) => setSipServerAddress(e.target.value)}
-          />
+            />
-        </FormControl>
+          </FormControl>
 
-        <FormControl id="username">
+          <FormControl id="username">
-          <FormLabel>SIP Username</FormLabel>
+            <FormLabel>SIP Username</FormLabel>
-          <Input
+            <Input
-            type="text"
+              type="text"
-            placeholder="Username"
+              placeholder="Username"
-            isRequired
+              isRequired
-            value={sipUsername}
+              value={sipUsername}
-            onChange={(e) => setSipUsername(e.target.value)}
+              onChange={(e) => setSipUsername(e.target.value)}
-          />
+            />
-        </FormControl>
+          </FormControl>
 
-        <FormControl id="password">
+          <FormControl id="password">
-          <FormLabel>SIP Password</FormLabel>
+            <FormLabel>SIP Password</FormLabel>
-          <Input
+            <Input
-            type="password"
+              type="password"
-            placeholder="Enter your password"
+              placeholder="Enter your password"
-            isRequired
+              isRequired
-            value={sipPassword}
+              value={sipPassword}
-            onChange={(e) => setSipPassword(e.target.value)}
+              onChange={(e) => setSipPassword(e.target.value)}
-          />
+            />
-        </FormControl>
+          </FormControl>
 
-        <FormControl id="sip_display_name">
+          <FormControl id="sip_display_name">
-          <FormLabel>SIP Display Name</FormLabel>
+            <FormLabel>SIP Display Name</FormLabel>
-          <Input
+            <Input
-            type="text"
+              type="text"
-            placeholder="Display name"
+              placeholder="Display name"
-            isRequired
+              isRequired
-            value={sipDisplayName}
+              value={sipDisplayName}
-            onChange={(e) => setSipDisplayName(e.target.value)}
+              onChange={(e) => setSipDisplayName(e.target.value)}
-          />
+            />
-        </FormControl>
+          </FormControl>
 
-        <FormControl id="api_key">
+          <FormControl id="api_key">
-          <FormLabel>API Key (optional)</FormLabel>
+            <FormLabel>API Key (optional)</FormLabel>
-          <Input
+            <Input
-            type="password"
+              type="password"
-            placeholder="API Key"
+              placeholder="API Key"
-            value={apiKey}
+              value={apiKey}
-            onChange={(e) => setApiKey(e.target.value)}
+              onChange={(e) => setApiKey(e.target.value)}
-          />
+            />
-        </FormControl>
+          </FormControl>
 
-        <Button colorScheme="pink" type="submit" w="80%">
+          <Button colorScheme="pink" type="submit" w="80%">
-          Save
+            Save
-        </Button>
+          </Button>
-      </VStack>
+        </VStack>
-    </form>
+      </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,
+          test: /\.txt$/i,
-          use: [
+          type: "asset/source",
-            {
-              loader: "file-loader",
-            },
-          ],
         },
       ],
     },
     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: [
+    plugins: [...getHtmlPlugins(["index"])],
-      new CopyPlugin({
-        patterns: [{ from: "manifest.json", to: "../manifest.json" }],
-      }),
-      ...getHtmlPlugins(["index"]),
-    ],
     resolve: {
       alias: {
         src: path.resolve(__dirname, "src/"),