Electron: Added support for changing main window background

receivers/common/web/MimeTypes.ts

@@ -15,6 +15,14 @@ export const supportedVideoTypes = [
     'video/3gpp2',
 ];
 
+export const supportedVideoExtensions = [
+    '.mp4', '.m4v',
+    '.webm',
+    '.mkv',
+    '.3gp',
+    '.3g2',
+];
+
 export const supportedAudioTypes = [
     'audio/aac',
     'audio/flac',
@@ -40,6 +48,18 @@ export const supportedImageTypes = [
     'image/webp'
 ];
 
+export const supportedImageExtensions = [
+    '.apng',
+    '.avif',
+    '.bmp',
+    '.gif',
+    '.ico',
+    '.jpeg', '.jpg', '.jpe', '.jif', '.jfif', '.jfi',
+    '.png',
+    '.svg',
+    '.webp'
+];
+
 export const supportedPlayerTypes = streamingMediaTypes.concat(
     supportedVideoTypes,
     supportedAudioTypes,

receivers/common/web/main/Preload.ts

@@ -43,6 +43,24 @@ if (TARGET === 'electron') {
         preloadData.subscribedKeys.keyUp = value.keyUp;
     })
 
+    electronAPI.ipcRenderer.on('update-background', (_event, path: string, isVideo: boolean) => {
+        const imageBackground = document.getElementById('image-background') as HTMLImageElement;
+        const videoBackground = document.getElementById('video-player') as HTMLVideoElement;
+
+        if (isVideo) {
+            videoBackground.src = path;
+
+            imageBackground.style.display = 'none';
+            videoBackground.style.display = 'block';
+        }
+        else {
+            imageBackground.src = path;
+
+            imageBackground.style.display = 'block';
+            videoBackground.style.display = 'none';
+        }
+    })
+
     electronAPI.ipcRenderer.on('toast', (_event, message: string, icon: ToastIcon = ToastIcon.INFO, duration: number = 5000) => {
         toast(message, icon, duration);
     })

receivers/common/web/main/common.css

@@ -9,6 +9,13 @@ body, html {
     overflow: hidden;
 }
 
+#image-background {
+    height: 100%;
+    width: 100%;
+    display: none;
+    object-fit: cover;
+}
+
 .video {
     height: 100%;
     width: 100%;

receivers/electron/src/Main.ts

@@ -1,19 +1,21 @@
 import { BrowserWindow, ipcMain, IpcMainEvent, nativeImage, Tray, Menu, dialog, shell } from 'electron';
 import { ToastIcon } from 'common/components/Toast';
-import { Opcode, PlaybackErrorMessage, PlaybackUpdateMessage, VolumeUpdateMessage, PlayMessage, PlayUpdateMessage, EventMessage, EventType, ContentObject, ContentType, PlaylistContent, SeekMessage, SetVolumeMessage, SetSpeedMessage, SetPlaylistItemMessage } from 'common/Packets';
+import { Opcode, PlaybackErrorMessage, PlaybackUpdateMessage, VolumeUpdateMessage, PlayMessage, PlayUpdateMessage, EventMessage, EventType, PlaylistContent, SeekMessage, SetVolumeMessage, SetSpeedMessage, SetPlaylistItemMessage } from 'common/Packets';
 import { DiscoveryService } from 'common/DiscoveryService';
 import { TcpListenerService } from 'common/TcpListenerService';
 import { WebSocketListenerService } from 'common/WebSocketListenerService';
 import { ConnectionMonitor } from 'common/ConnectionMonitor';
 import { Logger, LoggerType } from 'common/Logger';
 import { MediaCache } from 'common/MediaCache';
+import { supportedImageExtensions, supportedVideoExtensions } from 'common/MimeTypes';
 import { Settings } from 'common/Settings';
+import { preparePlayMessage } from 'common/UtilityBackend';
 import { Updater } from './Updater';
+import * as fs from 'fs';
 import * as os from 'os';
 import * as path from 'path';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-import { preparePlayMessage } from 'common/UtilityBackend';
 const cp = require('child_process');
 let logger = null;
 
@@ -426,6 +428,25 @@ export class Main {
 
             networkWorker.loadFile(path.join(__dirname, 'main/worker.html'));
         });
+
+        Main.mainWindow.webContents.once('dom-ready', () => {
+            if (Settings.json.ui.mainWindowBackground !== '') {
+                if (fs.existsSync(Settings.json.ui.mainWindowBackground)) {
+                    if (supportedVideoExtensions.find(ext => ext === path.extname(Settings.json.ui.mainWindowBackground).toLocaleLowerCase())) {
+                        Main.mainWindow?.webContents?.send("update-background", Settings.json.ui.mainWindowBackground, true);
+                    }
+                    else if (supportedImageExtensions.find(ext => ext === path.extname(Settings.json.ui.mainWindowBackground).toLocaleLowerCase())) {
+                        Main.mainWindow?.webContents?.send("update-background", Settings.json.ui.mainWindowBackground, false);
+                    }
+                    else {
+                        logger.warn(`Custom background at ${Settings.json.ui.mainWindowBackground} is not of a supported file format. Ignoring...`);
+                    }
+                }
+                else {
+                    logger.warn(`Custom background at ${Settings.json.ui.mainWindowBackground} does not exist. Ignoring...`);
+                }
+            }
+        });
     }
 
     static async main(app: Electron.App) {

receivers/electron/src/main/index.html

@@ -11,6 +11,7 @@
 </head>
 <body>
     <div id="main-container">
+        <img id="image-background"/>
         <video id="video-player" class="video" autoplay loop>
             <source src="../assets/video/background.mp4" type="video/mp4">
         </video>