-
- - - - - - -
- - - diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_call_end_filled.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_call_end_filled.svg deleted file mode 100644 index 5ce74d3cda..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/images/ic_call_end_filled.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_mic.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_mic.svg deleted file mode 100644 index afebf258d3..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/images/ic_mic.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_mic_off.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_mic_off.svg deleted file mode 100644 index 941dc182a0..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/images/ic_mic_off.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_phone_in_talk.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_phone_in_talk.svg deleted file mode 100644 index 43cfd7cb9f..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/images/ic_phone_in_talk.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_screen_share.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_screen_share.svg deleted file mode 100644 index 979af2b073..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/images/ic_screen_share.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_stop_screen_share.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_stop_screen_share.svg deleted file mode 100644 index 92e1ff338c..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/images/ic_stop_screen_share.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_videocam_filled.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_videocam_filled.svg deleted file mode 100644 index def80d4719..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/images/ic_videocam_filled.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_videocam_off.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_videocam_off.svg deleted file mode 100644 index 07557e277e..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/images/ic_videocam_off.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_volume_down.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_volume_down.svg deleted file mode 100644 index 19999e82af..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/images/ic_volume_down.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_volume_off.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_volume_off.svg deleted file mode 100644 index 2767d8d48d..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/images/ic_volume_off.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_volume_up.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_volume_up.svg deleted file mode 100644 index 2857a913f9..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/images/ic_volume_up.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/simplex-chat-webrtc/src/desktop/style.css b/packages/simplex-chat-webrtc/src/desktop/style.css deleted file mode 100644 index 5110c7c7d6..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/style.css +++ /dev/null @@ -1,227 +0,0 @@ -html, -body { - padding: 0; - margin: 0; - background-color: black; - font-family: Arial, Helvetica, sans-serif; -} - -#remote-video-stream.inline { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; -} - -#remote-video-stream.collapsed { - position: absolute; - width: 20%; - max-width: 20%; - height: 15.03vw; - object-fit: cover; - margin: 16px; - border-radius: 16px; - bottom: 80px; - right: 0; -} - -#remote-video-stream.collapsed-pip { - position: absolute; - max-width: 30%; - max-height: 30%; - object-fit: cover; - margin: 8px; - border-radius: 8px; - bottom: 0; - right: 0; -} - -#remote-screen-video-stream.inline { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; -} - -#local-video-stream.inline { - background-color: black; - position: absolute; - width: 20%; - max-width: 20%; - height: 15.03vw; - object-fit: cover; - margin: 16px; - border-radius: 16px; - top: 0; - right: 0; -} - -#local-screen-video-stream.inline { - position: absolute; - width: 20%; - max-width: 20%; - object-fit: cover; - margin: 16px; - border-radius: 16px; - top: 33%; - right: 0; -} - -#remote-video-stream.fullscreen { - position: absolute; - height: 100%; - width: 100%; - object-fit: cover; -} - -#remote-screen-video-stream.fullscreen { - position: absolute; - height: 100%; - width: 100%; - object-fit: cover; -} - -#local-video-stream.fullscreen { - position: absolute; - height: 100%; - width: 100%; - object-fit: cover; -} - -#local-screen-video-stream.fullscreen { - position: absolute; - height: 100%; - width: 100%; - object-fit: cover; -} - -*::-webkit-media-controls { - display: none !important; - -webkit-appearance: none !important; -} -*::-webkit-media-controls-panel { - display: none !important; - -webkit-appearance: none !important; -} -*::-webkit-media-controls-play-button { - display: none !important; - -webkit-appearance: none !important; -} -*::-webkit-media-controls-start-playback-button { - display: none !important; - -webkit-appearance: none !important; -} - -#manage-call { - position: absolute; - width: fit-content; - bottom: 15px; - left: 50%; - transform: translate(-50%, 0); - display: grid; - grid-auto-flow: column; - grid-column-gap: 38px; -} - -#manage-call button { - border: none; - cursor: pointer; - appearance: none; - background-color: #ffffff33; - border-radius: 50%; - padding: 13px; - width: 61px; - height: 61px; -} - -#manage-call img { - width: 35px; - height: 35px; -} - -#manage-call button .video { - background: #00000033; -} - -#progress { - position: absolute; - left: 50%; - top: 50%; - margin-left: -52px; - margin-top: -52px; - border-radius: 50%; - border-top: 5px solid white; - border-right: 5px solid white; - border-bottom: 5px solid white; - border-left: 5px solid black; - width: 100px; - height: 100px; - -webkit-animation: spin 2s linear infinite; - animation: spin 2s linear infinite; -} - -#permission-denied { - position: absolute; - width: 100%; - text-align: center; - height: 100%; - align-content: center; - color: white; -} - -#permission-denied-title { - font-weight: bold; -} - -#permission-denied-desc { - font-style: italic; -} - -@-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - } -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -#info-block { - position: absolute; - color: white; - opacity: 0.8; - width: 200px; -} - -#info-block.audio { - text-align: center; - left: 50%; - top: 50%; - margin-left: -100px; - margin-top: 100px; -} - -#info-block.video { - left: 16px; - top: 2px; -} - -#audio-call-icon { - position: absolute; - display: none; - left: 50%; - top: 50%; - margin-left: -50px; - margin-top: -44px; - width: 100px; - height: 100px; -} diff --git a/packages/simplex-chat-webrtc/src/desktop/ui.ts b/packages/simplex-chat-webrtc/src/desktop/ui.ts deleted file mode 100644 index 862c727bd5..0000000000 --- a/packages/simplex-chat-webrtc/src/desktop/ui.ts +++ /dev/null @@ -1,211 +0,0 @@ -// Override defaults to enable worker on Chrome and Safari -useWorker = typeof window.Worker !== "undefined" -isDesktop = true - -// Create WebSocket connection. location.search carries the per-call ?token=... capability required by the server. -const socket = new WebSocket(`ws://${location.host}${location.search}`) - -socket.addEventListener("open", (_event) => { - console.log("Opened socket") - sendMessageToNative = (msg: WVApiMessage) => { - console.log("Message to server") - socket.send(JSON.stringify(msg)) - reactOnMessageToServer(msg) - } -}) - -socket.addEventListener("message", (event) => { - const parsed = JSON.parse(event.data) - reactOnMessageFromServer(parsed) - processCommand(parsed) - console.log("Message from server") -}) - -socket.addEventListener("close", (_event) => { - console.log("Closed socket") - sendMessageToNative = (_msg: WVApiMessage) => { - console.log("Tried to send message to native but the socket was closed already") - } - window.close() -}) - -function endCallManually() { - sendMessageToNative({resp: {type: "end"}}) -} - -function toggleMicManually() { - const enable = activeCall ? !activeCall.localMediaSources.mic : !inactiveCallMediaSources.mic - const apiCall: WVAPICall = { - command: {type: "media", source: CallMediaSource.Mic, enable: enable}, - } - processCommand(apiCall) -} - -function toggleSpeakerManually() { - if (activeCall?.remoteStream && activeCall.peerMediaSources.mic) { - enableSpeakerIcon(togglePeerMedia(activeCall.remoteStream, CallMediaType.Audio), !activeCall.peerMediaSources.mic) - } -} - -function toggleCameraManually() { - const enable = activeCall ? !activeCall.localMediaSources.camera : !inactiveCallMediaSources.camera - const apiCall: WVAPICall = { - command: {type: "media", source: CallMediaSource.Camera, enable: enable}, - } - processCommand(apiCall) -} - -async function toggleScreenManually() { - await toggleScreenShare() -} - -// override function in call.ts to adapt UI to enabled media sources -localOrPeerMediaSourcesChanged = (call: Call) => { - enableMicIcon(call.localMediaSources.mic) - enableCameraIcon(call.localMediaSources.camera) - enableScreenIcon(call.localMediaSources.screenVideo) - - const className = - localMedia(call) == CallMediaType.Video || peerMedia(call) == CallMediaType.Video ? CallMediaType.Video : CallMediaType.Audio - document.getElementById("info-block")!.className = className - - if (call.connection.iceConnectionState == "connected") { - document.getElementById("audio-call-icon")!.style.display = className == CallMediaType.Audio ? "block" : "none" - } - - // document.getElementById("media-sources")!.innerText = mediaSourcesStatus(call) - document.getElementById("manage-call")!.className = localMedia(call) == CallMediaType.Video ? CallMediaType.Video : "" -} - -// override function in call.ts to adapt UI to enabled media sources -inactiveCallMediaSourcesChanged = (inactiveCallMediaSources: CallMediaSources) => { - const mic = inactiveCallMediaSources.mic - const camera = inactiveCallMediaSources.camera - const screenVideo = inactiveCallMediaSources.screenVideo - enableMicIcon(mic) - enableCameraIcon(camera) - enableScreenIcon(screenVideo) - - const className = camera ? CallMediaType.Video : CallMediaType.Audio - document.getElementById("info-block")!.className = className - // document.getElementById("media-sources")!.innerText = inactiveCallMediaSourcesStatus(inactiveCallMediaSources) -} - -failedToGetPermissions = (title: string, description: string) => { - document.getElementById("info-block")!.style.visibility = "hidden" - document.getElementById("progress")!.style.visibility = "hidden" - - document.getElementById("permission-denied-title")!.innerText = title - document.getElementById("permission-denied-desc")!.innerText = description - - document.getElementById("toggle-mic")!.style.visibility = "hidden" - document.getElementById("toggle-camera")!.style.visibility = "hidden" - document.getElementById("toggle-screen")!.style.visibility = "hidden" - document.getElementById("toggle-speaker")!.style.visibility = "hidden" -} - -function enableMicIcon(enabled: boolean) { - document.getElementById("toggle-mic")!.innerHTML = enabled - ? '
'
- : '
'
-}
-
-function enableCameraIcon(enabled: boolean) {
- document.getElementById("toggle-camera")!.innerHTML = enabled
- ? '
'
- : '
'
-}
-
-function enableScreenIcon(enabled: boolean) {
- document.getElementById("toggle-screen")!.innerHTML = enabled
- ? '
'
- : '
'
-}
-
-function enableSpeakerIcon(enabled: boolean, muted: boolean) {
- document.getElementById("toggle-speaker")!!.innerHTML = muted
- ? '
'
- : enabled
- ? '
'
- : '
'
- document.getElementById("toggle-speaker")!!.style.opacity = muted ? "0.7" : "1"
-}
-
-function mediaSourcesStatus(call: Call): string {
- let status = "local"
- if (call.localMediaSources.mic) status += " mic"
- if (call.localMediaSources.camera) status += " cam"
- if (call.localMediaSources.screenAudio) status += " scrA"
- if (call.localMediaSources.screenVideo) status += " scrV"
-
- status += " | peer"
-
- if (call.peerMediaSources.mic) status += " mic"
- if (call.peerMediaSources.camera) status += " cam"
- if (call.peerMediaSources.screenAudio) status += " scrA"
- if (call.peerMediaSources.screenVideo) status += " scrV"
- return status
-}
-
-function inactiveCallMediaSourcesStatus(inactiveCallMediaSources: CallMediaSources): string {
- let status = "local"
- const mic = inactiveCallMediaSources.mic
- const camera = inactiveCallMediaSources.camera
- const screenAudio = inactiveCallMediaSources.screenAudio
- const screenVideo = inactiveCallMediaSources.screenVideo
- if (mic) status += " mic"
- if (camera) status += " cam"
- if (screenAudio) status += " scrA"
- if (screenVideo) status += " scrV"
- return status
-}
-
-function reactOnMessageFromServer(msg: WVApiMessage) {
- // screen is not allowed to be enabled before connection estabilished
- if (msg.command?.type == "capabilities" || msg.command?.type == "offer") {
- document.getElementById("toggle-screen")!!.style.opacity = "0.7"
- } else if (activeCall) {
- document.getElementById("toggle-screen")!!.style.opacity = "1"
- }
- switch (msg.command?.type) {
- case "capabilities":
- case "offer":
- case "start":
- document.getElementById("info-block")!!.className = msg.command.media
- document.getElementById("toggle-mic")!!.style.display = "inline-block"
- document.getElementById("toggle-speaker")!!.style.display = "inline-block"
- document.getElementById("toggle-camera")!!.style.display = "inline-block"
- document.getElementById("toggle-screen")!!.style.display = "inline-block"
- enableSpeakerIcon(true, true)
- break
- case "description":
- updateCallInfoView(msg.command.state, msg.command.description)
- if (activeCall?.connection.connectionState == "connected") {
- document.getElementById("progress")!.style.display = "none"
- document.getElementById("audio-call-icon")!.style.display =
- document.getElementById("info-block")!!.className == CallMediaType.Audio ? "block" : "none"
- }
- break
- }
-}
-
-function reactOnMessageToServer(msg: WVApiMessage) {
- if (!activeCall) return
-
- switch (msg.resp?.type) {
- case "peerMedia":
- const className = localMedia(activeCall) == CallMediaType.Video || peerMedia(activeCall) == CallMediaType.Video ? "video" : "audio"
- document.getElementById("info-block")!!.className = className
- document.getElementById("audio-call-icon")!.style.display = className == CallMediaType.Audio ? "block" : "none"
- enableSpeakerIcon(
- activeCall.remoteStream.getAudioTracks().every((elem) => elem.enabled),
- !activeCall.peerMediaSources.mic
- )
- break
- }
-}
-
-function updateCallInfoView(state: string, description: string) {
- document.getElementById("state")!!.innerText = state
- document.getElementById("description")!!.innerText = description
-}