Miniplayer Stream Widget

Added a redesigned miniplayer with more optimized screen space for use with live streaming, and a setting to toggle between them

main.js

@@ -1272,38 +1272,75 @@ async function createWindow() {
     async function windowMiniplayer() {
         if (miniplayer) miniplayer.show()
         else {
-            miniplayer = new BrowserWindow({
-                title: __.trans('LABEL_MINIPLAYER'),
-                icon: iconDefault,
-                modal: false,
-                frame: false,
-                center: false,
-                resizable: settingsProvider.get(
-                    'settings-miniplayer-resizable'
-                ),
-                alwaysOnTop: settingsProvider.get(
-                    'settings-miniplayer-always-top'
-                ),
-                width: settingsProvider.get('settings-miniplayer-size'),
-                height: settingsProvider.get('settings-miniplayer-size'),
-                backgroundColor: '#232323',
-                minWidth: 100,
-                minHeight: 100,
-                autoHideMenuBar: true,
-                skipTaskbar: !settingsProvider.get(
-                    'settings-miniplayer-show-task'
-                ),
-                webPreferences: {
-                    nodeIntegration: true,
-                    enableRemoteModule: true,
-                },
-            })
-            await miniplayer.loadFile(
-                path.join(
-                    app.getAppPath(),
-                    '/src/pages/miniplayer/miniplayer.html'
+            if (settingsProvider.get('settings-miniplayer-stream-config')) {
+                miniplayer = new BrowserWindow({
+                    title: __.trans('LABEL_MINIPLAYER'),
+                    icon: iconDefault,
+                    modal: false,
+                    frame: false,
+                    center: false,
+
+                    width: 500,
+                    height: 100,
+                    resizable: false,
+                    skipTaskbar: false,
+
+                    alwaysOnTop: settingsProvider.get(
+                        'settings-miniplayer-always-top'
+                    ),
+
+                    backgroundColor: '#232323',
+                    minWidth: 100,
+                    minHeight: 100,
+                    autoHideMenuBar: true,
+                    webPreferences: {
+                        nodeIntegration: true,
+                        enableRemoteModule: true,
+                    },
+                })
+            } else {
+                miniplayer = new BrowserWindow({
+                    title: __.trans('LABEL_MINIPLAYER'),
+                    icon: iconDefault,
+                    modal: false,
+                    frame: false,
+                    center: false,
+
+                    resizable: settingsProvider.get('settings-miniplayer-resizable'),
+                    skipTaskbar: !settingsProvider.get('settings-miniplayer-show-task'),
+                    width: settingsProvider.get('settings-miniplayer-size'),
+                    height: settingsProvider.get('settings-miniplayer-size'),
+
+                    alwaysOnTop: settingsProvider.get(
+                        'settings-miniplayer-always-top'
+                    ),
+
+                    backgroundColor: '#232323',
+                    minWidth: 100,
+                    minHeight: 100,
+                    autoHideMenuBar: true,
+                    webPreferences: {
+                        nodeIntegration: true,
+                        enableRemoteModule: true,
+                    },
+                })
+            }
+
+            if (!settingsProvider.get('settings-miniplayer-stream-config')) {
+                miniplayer.loadFile(
+                    path.join(
+                        app.getAppPath(),
+                        '/src/pages/miniplayer/miniplayer.html'
+                    )
                 )
-            )
+            } else {
+                miniplayer.loadFile(
+                    path.join(
+                        app.getAppPath(),
+                        '/src/pages/miniplayer/streamPlayer.html'
+                    )
+                )
+            }
 
             let miniplayerPosition = settingsProvider.get('miniplayer-position')
             if (miniplayerPosition !== undefined)
@@ -1326,13 +1363,15 @@ async function createWindow() {
             })
 
             miniplayer.on('resize', (e) => {
-                try {
-                    let size = Math.min(...miniplayer.getSize())
-                    miniplayer.setSize(size, size)
-                    settingsProvider.set('settings-miniplayer-size', size)
-                    e.preventDefault()
-                } catch (_) {
-                    writeLog({ type: 'warn', data: 'error miniplayer resize' })
+                if (!settingsProvider.get('settings-miniplayer-stream-config')) {
+                    try {
+                        let size = Math.min(...miniplayer.getSize())
+                        miniplayer.setSize(size, size)
+                        settingsProvider.set('settings-miniplayer-size', size)
+                        e.preventDefault()
+                    } catch (_) {
+                        writeLog({ type: 'warn', data: 'error miniplayer resize' })
+                    }
                 }
             })
 

src/pages/miniplayer/miniplayer.css

@@ -52,6 +52,24 @@ body.showinfo #background {
     margin-top: calc(10vmin - 4px);
 }
 
+/*
+    Album is a data call used in the stream player but not in the default.
+    Due to the .js file calling this data I maintain parity with these base files.
+    I have set the opacity to 0 and the position to absolute to not interfere.
+    Just get rid of those settings to add it to the default mini player.
+*/
+.album {
+    opacity: 0;
+    position: absolute;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+    white-space: nowrap;
+    font-size: 18vmin;
+    margin-top: -6vmin;
+    margin-left: 22.5vmax;
+}
+
 .author {
     overflow: hidden;
     text-overflow: ellipsis;

src/pages/miniplayer/miniplayer.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8" />
@@ -52,6 +52,10 @@
                 <span id="title">Title</span>
             </div>
 
+            <div class="album center">
+                <span id="album">Album</span>
+            </div>
+
             <div class="author center">
                 <span id="author">Author</span>
             </div>

src/pages/miniplayer/miniplayer.js

@@ -12,6 +12,7 @@ let body = document.getElementsByTagName('body')[0]
 let background = document.getElementById('background')
 let title = document.getElementById('title')
 let author = document.getElementById('author')
+let album = document.getElementById('album')
 
 let current = document.getElementById('current')
 let duration = document.getElementById('duration')
@@ -86,6 +87,7 @@ function setPlayerInfo(data) {
     background.style.backgroundImage = `url(${data.track.cover})`
     title.innerHTML = data.track.title || 'Title'
     author.innerHTML = data.track.author || 'Author'
+    album.innerHTML = data.track.album || 'Album'
     current.innerHTML = data.player.seekbarCurrentPositionHuman || '0:00'
     duration.innerHTML = data.track.durationHuman || '0:00'
     progress.style.width = data.player.statePercent * 100 + '%'

src/pages/miniplayer/streamPlayer.css

@@ -0,0 +1,136 @@
+body:hover .player-info,
+body:hover .cmd-btn,
+body.showinfo .player-info,
+body.showinfo .cmd-btn {
+    filter: none;
+}
+
+.player-info {
+    height: 78vmin;
+}
+
+.cmd-bar {
+    margin: 4px 4px 0;
+    height: 10vmin;
+}
+
+.cmd-btn {
+    width: 20px;
+    height: 20px;
+}
+
+.cmd-btn i {
+    font-size: 12vmin;
+    margin-right: -1vmin;
+}
+
+#btn-drag {
+    opacity: 0;
+}
+
+#btn-like,
+#btn-dislike,
+#btn-next,
+#btn-previous,
+#btn-play-pause {
+    margin-top: 100vmax;
+    opacity: 0;
+}
+
+.title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+    white-space: nowrap;
+    font-weight: bold;
+    font-size: 22vmin;
+    margin-top: -13vmin;
+    margin-left: 22.5vmax;
+}
+
+.album {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+    white-space: nowrap;
+    font-size: 18vmin;
+    margin-top: -6vmin;
+    margin-left: 22.5vmax;
+}
+
+.author {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+    white-space: nowrap;
+    font-size: 16vmin;
+    margin-top: -5vmin;
+    margin-left: 22.5vmax;
+}
+
+.duration {
+    text-align: left;
+    font-size: 14vmin;
+    margin-top: -4vmin;
+    margin-left: 22.5vmax;
+}
+
+.progress-bar {
+    margin-top: 15vmin;
+    height: 5vmin;
+    width: 80vmax;
+    margin-left: 20vmax;
+}
+
+#progress {
+    height: 100%;
+    width: 0;
+    background: #fff;
+}
+
+#content,
+#secondsEffect {
+    position: absolute;
+    top: 0;
+    width: 100vmax;
+    height: 100vmin;
+    z-index: 1;
+}
+
+#content {
+    text-shadow: 0 0 3 #000;
+}
+
+#background {
+    background-repeat: no-repeat;
+    background-size: 100px 100px;
+    background-position: center;
+    position: absolute;
+    width: 100vmin;
+    height: 100vmin;
+    z-index: 0;
+}
+
+#loading {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    z-index: 1;
+}
+
+#secondsEffect {
+    display: none;
+}
+
+#secondsEffect.left {
+    left: -40vmin;
+    display: block;
+}
+
+#secondsEffect.right {
+    right: -40vmin;
+    transform: rotate(180deg);
+    display: block;
+}