Signalling proto

apps/desktop/forge.config.ts

@@ -3,6 +3,7 @@ import { MakerSquirrel } from '@electron-forge/maker-squirrel'
 import { MakerZIP } from '@electron-forge/maker-zip'
 import { MakerDeb } from '@electron-forge/maker-deb'
 import { MakerRpm } from '@electron-forge/maker-rpm'
+import { MakerDMG } from '@electron-forge/maker-dmg'
 import { VitePlugin } from '@electron-forge/plugin-vite'
 import { FusesPlugin } from '@electron-forge/plugin-fuses'
 import { FuseV1Options, FuseVersion } from '@electron/fuses'
@@ -26,6 +27,7 @@ const config: ForgeConfig = {
     new MakerZIP({}, ['darwin']),
     new MakerRpm({}),
     new MakerDeb({}),
+    new MakerDMG({}),
   ],
   plugins: [
     new VitePlugin({
@@ -34,7 +36,7 @@ const config: ForgeConfig = {
       build: [
         {
           // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
-          entry: 'src/main/index.ts',
+          entry: 'src/main.ts',
           config: 'vite.main.config.ts',
         },
         {
@@ -48,8 +50,8 @@ const config: ForgeConfig = {
           config: 'vite.renderer.menu.config.ts',
         },
         {
-          name: 'picture_window',
-          config: 'vite.renderer.picture.config.ts',
+          name: 'intercom_window',
+          config: 'vite.renderer.intercom.config.ts',
         },
       ],
     }),

apps/desktop/forge.env.d.ts

@@ -7,8 +7,8 @@ declare global {
   const MENU_WINDOW_VITE_DEV_SERVER_URL: string
   const MENU_WINDOW_VITE_NAME: string
 
-  const PICTURE_WINDOW_VITE_DEV_SERVER_URL: string
-  const PICTURE_WINDOW_VITE_NAME: string
+  const INTERCOM_WINDOW_VITE_DEV_SERVER_URL: string
+  const INTERCOM_WINDOW_VITE_NAME: string
 
   namespace NodeJS {
     interface Process {

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "desktop",
   "private": true,
   "version": "0.0.0",
-  "main": ".vite/build/index.js",
+  "main": ".vite/build/main.js",
   "scripts": {
     "dev": "electron-forge start",
     "package": "electron-forge package",
@@ -14,11 +14,13 @@
   },
   "dependencies": {
     "electron-squirrel-startup": "^1.0.0",
-    "lucide": "^0.378.0"
+    "lucide": "^0.378.0",
+    "ws": "^8.17.0"
   },
   "devDependencies": {
     "@electron-forge/cli": "^7.4.0",
     "@electron-forge/maker-deb": "^7.4.0",
+    "@electron-forge/maker-dmg": "^7.4.0",
     "@electron-forge/maker-rpm": "^7.4.0",
     "@electron-forge/maker-squirrel": "^7.4.0",
     "@electron-forge/maker-zip": "^7.4.0",

apps/desktop/src/components/menuButton.ts

@@ -5,7 +5,7 @@ import { customElement } from 'lit/decorators.js'
 export class MenuButton extends LitElement {
   protected render() {
     return html`
-      <button>
+      <button part="base">
         <slot></slot>
       </button>
     `

apps/desktop/src/features/control.ts

@@ -12,12 +12,29 @@ export class Control extends LitElement {
   @property({ type: Array })
   readonly members?: IMember[]
 
+  @property({ type: Object })
+  readonly initialConstraints?: MediaStreamConstraints
+
   @state()
   private _constraints: MediaStreamConstraints = {
     video: false,
     audio: false,
   }
 
+  connectedCallback(): void {
+    super.connectedCallback()
+
+    if (this.initialConstraints) {
+      if (this.initialConstraints.video) {
+        this._turnViewerVideo()
+      }
+
+      if (this.initialConstraints.audio) {
+        this._turnViewerAudio()
+      }
+    }
+  }
+
   private async _updateStream() {
     if (!this.viewer) return
     if (!this.viewer.stream) return
@@ -185,7 +202,6 @@ export class Control extends LitElement {
 
   static styles = css`
     :host {
-      width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;

apps/desktop/src/intercom/incomingCall.ts

@@ -0,0 +1,93 @@
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
+
+// SVG
+import PhoneSVG from '../assets/svg/phone.svg?raw'
+import PhoneOffSVG from '../assets/svg/phone-off.svg?raw'
+
+@customElement('bell-incoming-call')
+export class IncomingCall extends LitElement {
+  private _acceptIncomingCall() {
+    console.log('accept call')
+
+    this.dispatchEvent(new CustomEvent('call:accept'))
+  }
+
+  private _rejectIncomingCall() {
+    console.log('reject call')
+
+    this.dispatchEvent(new CustomEvent('call:reject'))
+  }
+
+  render() {
+    return html`
+      <div class="overlay"></div>
+
+      <div class="info">
+        <span>Donatello</span>
+        <p>is calling you</p>
+      </div>
+
+      <div class="actions">
+        <bell-button @click=${this._rejectIncomingCall}>
+          ${unsafeHTML(PhoneOffSVG)}
+        </bell-button>
+        <bell-button @click=${this._acceptIncomingCall}>
+          ${unsafeHTML(PhoneSVG)}
+        </bell-button>
+      </div>
+    `
+  }
+
+  static styles = css`
+    :host {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      padding: 18px 0 8px 0;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+    }
+
+    .overlay {
+      width: 100%;
+      height: 100%;
+      background: #ffffff57;
+      backdrop-filter: blur(2px);
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .info {
+      z-index: 1;
+      text-align: center;
+
+      span {
+        font-size: 26px;
+        font-weight: 700;
+      }
+
+      p {
+        font-size: 13px;
+        font-weight: 400;
+        margin: 0;
+      }
+    }
+
+    .actions {
+      display: flex;
+      gap: 10px;
+
+      bell-button {
+        stroke: #00b607 !important; // #EF2727
+      }
+    }
+  `
+}

apps/desktop/src/intercom/main.ts

@@ -0,0 +1,79 @@
+import { BrowserWindow, screen, ipcMain } from 'electron'
+import path from 'path'
+import type { WebSocket } from 'ws'
+
+// TODO: нельзя что бы это окно было открыто дважды !!!
+export function createWindow(
+  ws: WebSocket,
+  id: string,
+  type: 'outgoing' | 'incoming',
+  remoteSDP?: RTCSessionDescription
+) {
+  const windowWidth = 400
+
+  const window = new BrowserWindow({
+    width: windowWidth,
+    height: 225,
+    frame: false,
+    // transparent: true,
+    minimizable: false,
+    maximizable: false,
+    alwaysOnTop: true,
+    skipTaskbar: true,
+
+    // vibrancy: 'window',
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+    },
+  })
+
+  const display = screen.getPrimaryDisplay()
+  const left = display.bounds.width - windowWidth - 20
+  window.setPosition(left, 0)
+
+  window.setAspectRatio(16 / 9, {
+    width: 400,
+    height: 225,
+  })
+
+  window.setVisibleOnAllWorkspaces(true, {
+    visibleOnFullScreen: true,
+  })
+
+  if (INTERCOM_WINDOW_VITE_DEV_SERVER_URL) {
+    window.loadURL(INTERCOM_WINDOW_VITE_DEV_SERVER_URL)
+  } else {
+    window.loadFile(
+      path.join(
+        __dirname,
+        `../renderer/${INTERCOM_WINDOW_VITE_NAME}/index.html`
+      )
+    )
+  }
+
+  window.webContents.on('did-finish-load', () => {
+    if (remoteSDP) {
+      window.webContents.send('remote-sdp', remoteSDP)
+    }
+    window.webContents.send('type', type)
+  })
+
+  // TODO: нужно получить оффер и передать его в ws вместе с id
+  ipcMain.on('local-sdp', (_, sdp) => {
+    console.log(sdp.type)
+    const eventData = {
+      eventName: sdp.type === 'offer' ? 'offer' : 'answer',
+      data: {
+        to: id,
+        sdp: sdp,
+      },
+    }
+    ws.send(JSON.stringify(eventData))
+
+    // dialog.showErrorBox('hello', 'sdsds')
+  })
+
+  // window.setAlwaysOnTop(true, 'pop-up-menu')
+
+  return window
+}

apps/desktop/src/intercom/outgoingCall.ts

@@ -0,0 +1,51 @@
+import { LitElement, css, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+@customElement('bell-outgoing-call')
+export class OutgoingCall extends LitElement {
+  render() {
+    return html`
+      <div class="overlay"></div>
+
+      <div class="info">
+        <p>Connecting ...</p>
+      </div>
+    `
+  }
+
+  static styles = css`
+    :host {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+    }
+
+    .overlay {
+      width: 100%;
+      height: 100%;
+      background: #ffffff57;
+      backdrop-filter: blur(2px);
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .info {
+      z-index: 1;
+      text-align: center;
+
+      p {
+        font-size: 13px;
+        font-weight: 400;
+        margin: 0;
+      }
+    }
+  `
+}