Merge branch 'develop'

src/web-remote/index.js

@@ -13,6 +13,7 @@ var app = new Vue({
         player: {
             currentMediaItem: {},
             songActions: false,
+            maxVolume: 1,
             lyrics: {},
             lyricsMediaItem: {},
             lyricsDebug: {
@@ -54,6 +55,21 @@ var app = new Vue({
         // url: "localhost",
     },
     methods: {
+        isElectron() {
+            // Renderer process
+            if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
+                return true;
+            }
+            // Main process
+            if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
+                return true;
+            }
+            // Detect the user agent when the `nodeIntegration` option is set to true
+            if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
+                return true;
+            }
+            return false;
+        },
         searchScroll(e) {
             this.search.lastY = e.target.scrollTop;
         },
@@ -161,6 +177,11 @@ var app = new Vue({
                 volume: volume
             }));
         },
+        getVolumeMax() {
+            socket.send(JSON.stringify({
+                action: "volumeMax",
+            }));
+        },
         getQueue() {
             socket.send(JSON.stringify({
                 action: "get-queue"
@@ -423,7 +444,7 @@ var app = new Vue({
                 '--textColor3': `#${data['artwork']['textColor3'] ?? 'ffffff'}`,
                 '--textColor4': `#${data['artwork']['textColor4'] ?? 'ffffff'}`
             }
-            return palette } else { 
+            return palette } else {
               let u =  {
                     '--bgColor': `#${'000000'}`,
                     '--textColor1': `#${ 'ffffff'}`,
@@ -570,6 +591,9 @@ var app = new Vue({
                                 self.updatePlaybackState(response.data)
                             }
                         break;
+                    case "maxVolume":
+                        this.player.maxVolume = response.data;
+                        break;
                 }
                 // console.log(e.data);
             }

src/web-remote/views/components/mediaitem-square.ejs

@@ -153,7 +153,7 @@
                 }
             },
             revisedRandId() {
-                return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
+                return Math.random().toString(36).replace(/[^a-z]+/g, '').slice(2, 10);
             },
             async isInLibrary() {
                 if (this.item.type && !this.item.type.includes("library")) {

src/web-remote/views/index.ejs

@@ -172,7 +172,7 @@
                                     <div class="player-volume-glyph decrease"></div>
                                 </div>
                                 <div class="col">
-                                    <input type="range" class="web-slider volume-slider" max="1" min="0" step="0.01"
+                                    <input type="range" class="web-slider volume-slider" :max="player.maxVolume" min="0" step="0.01" :pseudo-value="getVolumeMax()"
                                         @input="setVolume($event.target.value)" :value="player.currentMediaItem.volume">
                                 </div>
                                 <div class="col-auto">