From b94ababce21e1f65911b2fa5a7e0c2c42233e4cf Mon Sep 17 00:00:00 2001
From: yazninja <yazlesean@gmail.com>
Date: Tue, 24 May 2022 10:04:32 +0800
Subject: [PATCH] fix chrome bottom, add disabled on playbackButtons

---
 src/renderer/less/elements.less          |  2 +-
 src/renderer/main/vueapp.js              | 15 ++++++++++++++-
 src/renderer/views/app/chrome-bottom.ejs | 18 +++++++++---------
 src/renderer/views/app/chrome-top.ejs    | 14 +++++++-------
 4 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index f5e1b5b9..01fef618 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -1619,7 +1619,7 @@ input[type=checkbox][switch]:checked:active::before {
   background-size: 60%;
   background-position: center;
 }
-.playback-button.disabled {
+.playback-button.disabled, .playback-button--small.disabled {
   opacity: 0.25 !important;
   pointer-events: none;
   transform: none !important;
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index d1a2168d..c4065435 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -1803,11 +1803,24 @@ const app = new Vue({
             }
         },
         isDisabled() {
-            if(!app.mk.nowPlayingItem || app.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation' || app.mk.queue._position + 1 == app.mk.queue.length) {
+            if(!app.mk.nowPlayingItem || app.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation') {
                 return true;
             }
             return false;
         },
+        isPrevDisabled() {
+            if(this.isDisabled()  || (app.mk.queue._position == 0 && app.mk.currentPlaybackTime <= 2)) {
+                return true;
+            }
+            return false;
+        },
+        isNextDisabled() {
+            if(this.isDisabled()  || app.mk.queue._position + 1 == app.mk.queue.length) {
+                return true;
+            }
+            return false;
+        },
+        
         async getNowPlayingItemDetailed(target) {
             try {
                 let u = await app.mkapi(app.mk.nowPlayingItem.playParams.kind,
diff --git a/src/renderer/views/app/chrome-bottom.ejs b/src/renderer/views/app/chrome-bottom.ejs
index 5ca6a9a3..3917244a 100644
--- a/src/renderer/views/app/chrome-bottom.ejs
+++ b/src/renderer/views/app/chrome-bottom.ejs
@@ -55,18 +55,18 @@
     <div class="app-chrome--center">
         <div class="app-chrome-playback-controls">
             <div class="app-chrome-item">
-                <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
+                <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'"
                         @click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
                         v-b-tooltip.hover></button>
-                <button class="playback-button--small shuffle active" v-else
+                <button class="playback-button--small shuffle active" v-else :class="isDisabled() && 'disabled'"
                         @click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
                         v-b-tooltip.hover></button>
             </div>
             <div class="app-chrome-item">
-                <button class="playback-button previous" @click="prevButton()"
+                <button class="playback-button previous" @click="prevButton()" :class="isPrevDisabled() && 'disabled'"
                         :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
             </div>
-            <div class="app-chrome-item display--large">
+            <div class="app-chrome-item">
                 <button class="playback-button stop" @click="mk.stop()" v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
                         :title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
                 <button class="playback-button pause" @click="mk.pause()" v-else-if="mk.isPlaying"
@@ -74,18 +74,18 @@
                 <button class="playback-button play" @click="mk.play()" v-else
                         :title="$root.getLz('term.play')" v-b-tooltip.hover></button>
             </div>
-            <div class="app-chrome-item display--large">
-                <button class="playback-button next" @click="skipToNextItem()" :class="isDisabled() && 'disabled'"
+            <div class="app-chrome-item">
+                <button class="playback-button next" @click="skipToNextItem()" :class="isNextDisabled() && 'disabled'"
                         :title="$root.getLz('term.next')" v-b-tooltip.hover></button>
             </div>
             <div class="app-chrome-item">
-                <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
+                <button class="playback-button--small repeat" v-if="mk.repeatMode == 0" :class="isDisabled() && 'disabled'"
                         @click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
                         v-b-tooltip.hover></button>
-                <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
+                <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2" :class="isDisabled() && 'disabled'"
                         v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
                         v-b-tooltip.hover></button>
-                <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
+                <button class="playback-button--small repeat active" @click="mk.repeatMode = 0" :class="isDisabled() && 'disabled'"
                         v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
                         v-b-tooltip.hover></button>
             </div>
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 471bdbee..7a49dbf0 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -35,15 +35,15 @@
         </template>
         <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
             <div class="app-chrome-item display--large">
-                <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
+                <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'"
                         @click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
                         v-b-tooltip.hover></button>
-                <button class="playback-button--small shuffle active" v-else
+                <button class="playback-button--small shuffle active" v-else :class="isDisabled() && 'disabled'"
                         @click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
                         v-b-tooltip.hover></button>
             </div>
             <div class="app-chrome-item display--large">
-                <button class="playback-button previous" @click="prevButton()"
+                <button class="playback-button previous" @click="prevButton()" :class="isPrevDisabled() && 'disabled'"
                         :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
             </div>
             <div class="app-chrome-item display--large">
@@ -55,17 +55,17 @@
                         :title="$root.getLz('term.play')" v-b-tooltip.hover></button>
             </div>
             <div class="app-chrome-item display--large">
-                <button class="playback-button next" @click="skipToNextItem()" :class="isDisabled() && 'disabled'"
+                <button class="playback-button next" @click="skipToNextItem()" :class="isNextDisabled() && 'disabled'"
                         :title="$root.getLz('term.next')" v-b-tooltip.hover></button>
             </div>
             <div class="app-chrome-item display--large">
-                <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
+                <button class="playback-button--small repeat" v-if="mk.repeatMode == 0" :class="isDisabled() && 'disabled'"
                         @click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
                         v-b-tooltip.hover></button>
-                <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
+                <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2" :class="isDisabled() && 'disabled'"
                         v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
                         v-b-tooltip.hover></button>
-                <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
+                <button class="playback-button--small repeat active" @click="mk.repeatMode = 0" :class="isDisabled() && 'disabled'"
                         v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
                         v-b-tooltip.hover></button>
             </div>