Add Peer-Call

package.json

@@ -16,6 +16,7 @@
     "@reduxjs/toolkit": "^1.9.7",
     "axios": "^1.6.0",
     "dayjs": "^1.11.10",
+    "peerjs": "^1.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",

src/Ubuntu.tsx

@@ -5,11 +5,12 @@ import AppBar from "./components/AppBar/AppBar.tsx";
 import Desktop from "./components/Desktop/Desktop.tsx";
 import IMAGES from "./components/AppBar/Images.ts";
 import { AppConfigType } from "./components/Desktop/AppConfigType.ts";
-import { DefaultApp, Settings } from "./components/Apps/Apps.ts";
+import { DefaultApp, Settings, PeerCall } from "./components/Apps/Apps.ts";
 
 function Ubuntu() {
   const [apps, setApps] = useState<AppModel[]>([
     { name: "Firefox", icon: IMAGES.firefox, app: DefaultApp },
+    { name: "PeerCall", icon: IMAGES.peerCall, app: PeerCall },
     { name: "LibreOffice", icon: IMAGES.libreOffice, app: DefaultApp },
     { name: "Rhythmbox", icon: IMAGES.rhythmBox, app: DefaultApp },
     { name: "Settings", icon: IMAGES.settings, app: Settings },

src/components/AppBar/Images.ts

@@ -1,4 +1,5 @@
 const IMAGES = {
+  peerCall: new URL("/app-icons/peer-call-icon.svg", import.meta.url).href,
   firefox: new URL("/app-icons/firefox-icon.png", import.meta.url).href,
   libreOffice: new URL("/app-icons/libre-office-icon.png", import.meta.url).href,
   rhythmBox: new URL("/app-icons/rhythmbox-icon.png", import.meta.url).href,

src/components/Apps/Apps.ts

@@ -1,5 +1,6 @@
 import Settings from "./Settings/Settings.tsx";
 import DefaultApp from "./Default/DefaultApp.tsx";
+import PeerCall from "./PeerCall/peerCall.tsx";
 
 
-export { Settings, DefaultApp };
+export { Settings, DefaultApp, PeerCall };

src/components/Apps/PeerCall/peerCall.css

@@ -0,0 +1,41 @@
+#peer-call{
+    height: 100%;
+}
+
+#peer-call-menu{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+}
+
+#remote-video {
+    display: none;
+    position: absolute;
+    max-width: 100%;
+    height: calc(100% - 35px);
+    top: 35px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    z-index: 1;
+}
+
+#local-video {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 25%;
+    z-index: 2;
+    transform: scaleX(-1);
+}
+
+#end-call{
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translate(-50%, 0);
+    z-index: 3;
+}