Receivers: Added connect/disconenct notifications to player window

receivers/common/web/player/Preload.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { PlaybackErrorMessage, PlaybackUpdateMessage, VolumeUpdateMessage } from 'common/Packets';
+import { PlaybackErrorMessage, PlaybackUpdateMessage, VolumeUpdateMessage, Opcode } from 'common/Packets';
 export {};
 
 declare global {
@@ -28,8 +28,11 @@ if (TARGET === 'electron') {
         onPause: (callback: any) => electronAPI.ipcRenderer.on("pause", callback),
         onResume: (callback: any) => electronAPI.ipcRenderer.on("resume", callback),
         onSeek: (callback: any) => electronAPI.ipcRenderer.on("seek", callback),
-        onSetVolume: (callback: any) => electronAPI.ipcRenderer.on("setvolume", callback),
-        onSetSpeed: (callback: any) => electronAPI.ipcRenderer.on("setspeed", callback)
+        sendSessionMessage: (opcode: Opcode, message: any) => electronAPI.ipcRenderer.send('send-session-message', { opcode: opcode, message: message }),
+        disconnectDevice: (session: string) => electronAPI.ipcRenderer.send('disconnect-device', session),
+        onConnect: (callback: any) => electronAPI.ipcRenderer.on('connect', callback),
+        onDisconnect: (callback: any) => electronAPI.ipcRenderer.on('disconnect', callback),
+        onPing: (callback: any) => electronAPI.ipcRenderer.on('ping', callback),
     });
 
 // @ts-ignore

receivers/common/web/player/Renderer.ts

@@ -2,6 +2,8 @@ import dashjs from 'modules/dashjs';
 import Hls, { LevelLoadedData } from 'modules/hls.js';
 import { PlaybackUpdateMessage, PlayMessage, SeekMessage, SetSpeedMessage, SetVolumeMessage } from 'common/Packets';
 import { Player, PlayerType } from './Player';
+import * as connectionMonitor from '../ConnectionMonitor';
+import { toast, ToastIcon } from '../components/Toast';
 import {
     targetPlayerCtrlStateUpdate,
     targetKeyDownEventListener,
@@ -330,6 +332,17 @@ function onPlay(_event, value: PlayMessage) {
     window.targetAPI.onSetSpeed((_event, value: SetSpeedMessage) => { player.setPlaybackRate(value.speed); playerCtrlStateUpdate(PlayerControlEvent.SetPlaybackRate); });
 };
 
+connectionMonitor.setUiUpdateCallbacks({
+    onConnect: (connections: string[], connectionInfo: any) => {
+        console.log(`Device connected: ${JSON.stringify(connectionInfo)}`);
+        toast('Device connected', ToastIcon.INFO);
+    },
+    onDisconnect: (connections: string[], connectionInfo: any) => {
+        console.log(`Device disconnected: ${JSON.stringify(connectionInfo)}`);
+        toast('Device disconnected. If you experience playback issues, please reconnect.', ToastIcon.INFO);
+    },
+});
+
 window.targetAPI.onPlay(onPlay);
 
 let scrubbing = false;

receivers/common/web/player/common.css

@@ -456,3 +456,140 @@ body {
     background-size: cover;
     opacity: 0;
 }
+
+#toast-notification {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 16px 20px;
+
+    position: relative;
+    top: calc(-100% + 20px);
+    margin: auto;
+    max-width: 25%;
+    width: fit-content;
+
+    background: rgba(0, 0, 0, 0.7);
+    border: 3px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.33), 0px 64.8148px 46.8519px rgba(0, 0, 0, 0.250556), 0px 38.5185px 25.4815px rgba(0, 0, 0, 0.200444), 0px 20px 13px rgba(0, 0, 0, 0.165), 0px 8.14815px 6.51852px rgba(0, 0, 0, 0.129556), 0px 1.85185px 3.14815px rgba(0, 0, 0, 0.0794444);
+    border-radius: 12px;
+    opacity: 0;
+}
+
+#toast-icon {
+    width: 88px;
+    height: 88px;
+    background-image: url(../assets/icons/app/info.svg);
+    background-size: cover;
+    filter: grayscale(0.5);
+    flex-shrink: 0;
+}
+
+#toast-text {
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    margin-right: 5px;
+
+    font-family: InterVariable;
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 400;
+}
+
+.toast-fade-in {
+    animation: toast-fade-in 1.0s cubic-bezier(0.5, 0, 0.5, 1) 1;
+}
+
+.toast-fade-out {
+    animation: toast-fade-out 1.0s cubic-bezier(0.5, 0, 0.5, 1) 1;
+}
+
+@keyframes toast-fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes toast-fade-out {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+/* Display scaling (Minimum supported resolution is 960x540) */
+@media only screen and ((min-width: 2560px) or (min-height: 1440px)) {
+    #toast-notification {
+        padding: 12px;
+    }
+
+    #toast-icon {
+        width: 70px;
+        height: 70px;
+        margin: 5px 10px;
+        margin-right: 15px;
+    }
+
+    #toast-text {
+        font-size: 28px;
+    }
+}
+
+@media only screen and ((max-width: 2559px) or (max-height: 1439px)) {
+    #toast-notification {
+        padding: 12px;
+    }
+
+    #toast-icon {
+        width: 60px;
+        height: 60px;
+        margin: 5px 5px;
+        margin-right: 10px;
+    }
+
+    #toast-text {
+        font-size: 22px;
+    }
+}
+
+@media only screen and ((max-width: 1919px) or (max-height: 1079px)) {
+    #toast-notification {
+        padding: 8px;
+    }
+
+    #toast-icon {
+        width: 40px;
+        height: 40px;
+        margin: 5px 5px;
+        margin-right: 10px;
+    }
+
+    #toast-text {
+        font-size: 16px;
+    }
+}
+
+@media only screen and ((max-width: 1279px) or (max-height: 719px)) {
+    #toast-notification {
+        padding: 4px;
+    }
+
+    #toast-icon {
+        width: 32px;
+        height: 32px;
+        margin: 5px 5px;
+    }
+
+    #toast-text {
+        font-size: 14px;
+    }
+}