add div for app-playback-buttons

This commit is contained in:
yazninja 2022-07-15 21:10:25 +08:00
parent 763a835269
commit 58f890e141

View file

@ -43,38 +43,40 @@
<div class="vdiv display--large" v-if="getThemeDirective('windowLayout') != 'twopanel'"></div> <div class="vdiv display--large" v-if="getThemeDirective('windowLayout') != 'twopanel'"></div>
</template> </template>
<template v-if="getThemeDirective('windowLayout') != 'twopanel'"> <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item display--large"> <div class="app-chrome-item playback-control-buttons">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'" <div class="app-chrome-item display--large">
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')" v-b-tooltip.hover></button> <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'"
<button class="playback-button--small shuffle active" v-else :class="isDisabled() && 'disabled'" @click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')" v-b-tooltip.hover></button>
@click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button> <button class="playback-button--small shuffle active" v-else :class="isDisabled() && 'disabled'"
</div> @click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
<div class="app-chrome-item display--large"> </div>
<button class="playback-button previous" @click="prevButton()" :class="isPrevDisabled() && 'disabled'" <div class="app-chrome-item display--large">
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button> <button class="playback-button previous" @click="prevButton()" :class="isPrevDisabled() && 'disabled'"
</div> :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
<div class="app-chrome-item display--large"> </div>
<button class="playback-button stop" @click="mk.stop()" <div class="app-chrome-item display--large">
v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'" <button class="playback-button stop" @click="mk.stop()"
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button> v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
<button class="playback-button pause" @click="mk.pause()" v-else-if="mk.isPlaying" :title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button> <button class="playback-button pause" @click="mk.pause()" v-else-if="mk.isPlaying"
<button class="playback-button play" @click="mk.play()" v-else :title="$root.getLz('term.play')" :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
v-b-tooltip.hover></button> <button class="playback-button play" @click="mk.play()" v-else :title="$root.getLz('term.play')"
</div> v-b-tooltip.hover></button>
<div class="app-chrome-item display--large"> </div>
<button class="playback-button next" @click="skipToNextItem()" :class="isNextDisabled() && 'disabled'" <div class="app-chrome-item display--large">
:title="$root.getLz('term.next')" v-b-tooltip.hover></button> <button class="playback-button next" @click="skipToNextItem()" :class="isNextDisabled() && 'disabled'"
</div> :title="$root.getLz('term.next')" v-b-tooltip.hover></button>
<div class="app-chrome-item display--large"> </div>
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0" :class="isDisabled() && 'disabled'" <div class="app-chrome-item display--large">
@click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button> <button class="playback-button--small repeat" v-if="mk.repeatMode == 0" :class="isDisabled() && 'disabled'"
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2" @click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button>
:class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 1" <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button> :class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 1"
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0" :title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
:class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')" <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
v-b-tooltip.hover></button> :class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</div> </div>
</template> </template>
</div> </div>