From 58f890e141d4ada23a2bf088c758555badf82d75 Mon Sep 17 00:00:00 2001
From: yazninja <yazlesean@gmail.com>
Date: Fri, 15 Jul 2022 21:10:25 +0800
Subject: [PATCH] add div for app-playback-buttons

---
 src/renderer/views/app/chrome-top.ejs | 66 ++++++++++++++-------------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 948bb41a..e2705e5c 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -43,38 +43,40 @@
       <div class="vdiv display--large" v-if="getThemeDirective('windowLayout') != 'twopanel'"></div>
     </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" :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 :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()" :class="isPrevDisabled() && 'disabled'"
-          :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
-      </div>
-      <div class="app-chrome-item display--large">
-        <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"
-          :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
-        <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="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" :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"
-          :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"
-          :class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
-          v-b-tooltip.hover></button>
+      <div class="app-chrome-item playback-control-buttons">
+        <div class="app-chrome-item display--large">
+          <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 :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()" :class="isPrevDisabled() && 'disabled'"
+            :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
+        </div>
+        <div class="app-chrome-item display--large">
+          <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"
+            :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
+          <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="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" :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"
+            :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"
+            :class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
+            v-b-tooltip.hover></button>
+        </div>
       </div>
     </template>
   </div>