fix review comment

2025-12-19 04:47:45 +00:00 · 2023-09-28 17:56:12 +07:00
parent 1fbfb81068
commit bbf4dac587
10 changed files with 186 additions and 158 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/public/audios/failed.mp3
+++ b/public/audios/failed.mp3
--- a/public/audios/ringing.mp3
+++ b/public/audios/ringing.mp3
--- a/public/manifest.json
+++ b/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"]
 }
--- a/src/content/index.tsx
+++ b/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(() => {
--- a/src/declarations.d.ts
+++ b/src/declarations.d.ts
@@ -1 +1,2 @@
 declare module "*.png";
+declare module "*.txt";
--- a/src/lib/SipAudioElements.ts
+++ b/src/lib/SipAudioElements.ts
@@ -1,70 +1,72 @@
-// @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";
+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;
+  #ringing: HTMLAudioElement;
+  #failed: HTMLAudioElement;
+  #answer: 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();
+    this.#answer.src = answeredURL;
+    this.#answer.volume = 0.3;
+    this.#remote = new Audio();
+  }

-    constructor() {
-        this.#ringing = new Audio();
-        this.#ringing.loop = true;
-        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();
+  playRinging(volume: number | undefined): void {
+    if (volume) {
+      this.#ringing.volume = volume;
    }
+    this.#ringing.play();
+  }

-    playRinging(volume: number | undefined): void {
-        if (volume) {
-            this.#ringing.volume = volume;
-        }
-        this.#ringing.play();
+  pauseRinging(): void {
+    if (!this.#ringing.paused) {
+      this.#ringing.pause();
    }
+  }

-    pauseRinging(): void {
-        if (!this.#ringing.paused) {
-            this.#ringing.pause();
-        }
+  playFailed(volume: number | undefined): void {
+    this.pauseRinging();
+    if (volume) {
+      this.#failed.volume = volume;
    }
+    this.#failed.play();
+  }

-    playFailed(volume: number | undefined): void {
-        this.pauseRinging();
-        if (volume) {
-            this.#failed.volume = volume;
-        }
-        this.#failed.play();
-    }
+  playAnswer(volume: number | undefined): void {
+    this.pauseRinging();
+    // if (volume) {
+    //   this.#answer.volume = volume;
+    // }
+    // this.#answer.play();
+  }

-    playAnswer(volume: number | undefined): void {
-        this.pauseRinging();
-        if (volume) {
-            this.#answer.volume = volume;
-        }
-        this.#answer.play();
-    }
+  isRemoteAudioPaused(): boolean {
+    return this.#remote.paused;
+  }

-    isRemoteAudioPaused(): boolean {
-        return this.#remote.paused;
-    }
+  playRemote(stream: MediaStream) {
+    this.#remote.srcObject = stream;
+    this.#remote.play();
+  }

-    playRemote(stream: MediaStream) {
-        this.#remote.srcObject = stream;
-        this.#remote.play();
-    }
-
-    isPLaying(audio: HTMLAudioElement) {
-        return audio.currentTime > 0 && !audio.paused && !audio.ended
-            && audio.readyState > audio.HAVE_CURRENT_DATA;
-    }
-}
+  isPLaying(audio: HTMLAudioElement) {
+    return (
+      audio.currentTime > 0 &&
+      !audio.paused &&
+      !audio.ended &&
+      audio.readyState > audio.HAVE_CURRENT_DATA
+    );
+  }
+}
--- a/src/window/settings.tsx
+++ b/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}>
-      <VStack spacing={4}>
-        <FormControl id="jambonz_sip_domain">
-          <FormLabel>Jambonz SIP Domain</FormLabel>
-          <Input
-            type="text"
-            placeholder="Domain"
-            isRequired
-            value={sipDomain}
-            onChange={(e) => setSipDomain(e.target.value)}
-          />
-        </FormControl>
+    <ChakraProvider theme={settingsThem}>
+      <form onSubmit={handleSubmit}>
+        <VStack spacing={2}>
+          <FormControl id="jambonz_sip_domain">
+            <FormLabel>Jambonz SIP Domain</FormLabel>
+            <Input
+              type="text"
+              placeholder="Domain"
+              isRequired
+              value={sipDomain}
+              onChange={(e) => setSipDomain(e.target.value)}
+            />
+          </FormControl>

-        <FormControl id="jambonz_server_address">
-          <FormLabel>Jambonz Server Address</FormLabel>
-          <Input
-            type="text"
-            placeholder="Server address"
-            isRequired
-            value={sipServerAddress}
-            onChange={(e) => setSipServerAddress(e.target.value)}
-          />
-        </FormControl>
+          <FormControl id="jambonz_server_address">
+            <FormLabel>Jambonz Server Address</FormLabel>
+            <Input
+              type="text"
+              placeholder="Server address"
+              isRequired
+              value={sipServerAddress}
+              onChange={(e) => setSipServerAddress(e.target.value)}
+            />
+          </FormControl>

-        <FormControl id="username">
-          <FormLabel>SIP Username</FormLabel>
-          <Input
-            type="text"
-            placeholder="Username"
-            isRequired
-            value={sipUsername}
-            onChange={(e) => setSipUsername(e.target.value)}
-          />
-        </FormControl>
+          <FormControl id="username">
+            <FormLabel>SIP Username</FormLabel>
+            <Input
+              type="text"
+              placeholder="Username"
+              isRequired
+              value={sipUsername}
+              onChange={(e) => setSipUsername(e.target.value)}
+            />
+          </FormControl>

-        <FormControl id="password">
-          <FormLabel>SIP Password</FormLabel>
-          <Input
-            type="password"
-            placeholder="Enter your password"
-            isRequired
-            value={sipPassword}
-            onChange={(e) => setSipPassword(e.target.value)}
-          />
-        </FormControl>
+          <FormControl id="password">
+            <FormLabel>SIP Password</FormLabel>
+            <Input
+              type="password"
+              placeholder="Enter your password"
+              isRequired
+              value={sipPassword}
+              onChange={(e) => setSipPassword(e.target.value)}
+            />
+          </FormControl>

-        <FormControl id="sip_display_name">
-          <FormLabel>SIP Display Name</FormLabel>
-          <Input
-            type="text"
-            placeholder="Display name"
-            isRequired
-            value={sipDisplayName}
-            onChange={(e) => setSipDisplayName(e.target.value)}
-          />
-        </FormControl>
+          <FormControl id="sip_display_name">
+            <FormLabel>SIP Display Name</FormLabel>
+            <Input
+              type="text"
+              placeholder="Display name"
+              isRequired
+              value={sipDisplayName}
+              onChange={(e) => setSipDisplayName(e.target.value)}
+            />
+          </FormControl>

-        <FormControl id="api_key">
-          <FormLabel>API Key (optional)</FormLabel>
-          <Input
-            type="password"
-            placeholder="API Key"
-            value={apiKey}
-            onChange={(e) => setApiKey(e.target.value)}
-          />
-        </FormControl>
+          <FormControl id="api_key">
+            <FormLabel>API Key (optional)</FormLabel>
+            <Input
+              type="password"
+              placeholder="API Key"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+            />
+          </FormControl>

-        <Button colorScheme="pink" type="submit" w="80%">
-          Save
-        </Button>
-      </VStack>
-    </form>
+          <Button colorScheme="pink" type="submit" w="80%">
+            Save
+          </Button>
+        </VStack>
+      </form>
+    </ChakraProvider>
  );
 };

--- a/webpack.config.js
+++ b/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/"),