fix live radio controls on fullscreen, miniplayer and sidebar

This commit is contained in:
vapormusic 2022-06-16 13:06:41 +07:00
parent 6132c62c4f
commit 3f548848c8
3 changed files with 82 additions and 71 deletions

View file

@ -196,6 +196,7 @@
v-if="mk.shuffleMode == 0" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1" @click="mk.shuffleMode = 1"
:title="$root.getLz('term.enableShuffle')" :title="$root.getLz('term.enableShuffle')"
:class="$root.isDisabled() && 'disabled'"
v-b-tooltip.hover.righttop v-b-tooltip.hover.righttop
></button> ></button>
<button <button
@ -203,6 +204,7 @@
v-else v-else
@click="mk.shuffleMode = 0" @click="mk.shuffleMode = 0"
:title="$root.getLz('term.disableShuffle')" :title="$root.getLz('term.disableShuffle')"
:class="$root.isDisabled() && 'disabled'"
v-b-tooltip.hover.righttop v-b-tooltip.hover.righttop
></button> ></button>
</div> </div>
@ -210,31 +212,26 @@
<button <button
class="playback-button previous" class="playback-button previous"
@click="prevButton()" @click="prevButton()"
:class="$root.isPrevDisabled() && 'disabled'"
:title="$root.getLz('term.previous')" :title="$root.getLz('term.previous')"
v-b-tooltip.hover v-b-tooltip.hover
></button> ></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item">
<button <button class="playback-button stop" @click="$root.mk.stop()"
class="playback-button pause" v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
@click="mk.pause()" :title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
v-if="mk.isPlaying" <button class="playback-button pause" @click="$root.mk.pause()" v-else-if="$root.mk.isPlaying"
:title="$root.getLz('term.pause')" :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
v-b-tooltip.hover <button class="playback-button play" @click="$root.mk.play()" v-else :title="$root.getLz('term.play')"
></button> 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>
<div class="app-chrome-item"> <div class="app-chrome-item">
<button <button
class="playback-button next" class="playback-button next"
@click="skipToNextItem()" @click="skipToNextItem()"
:title="$root.getLz('term.next')" :title="$root.getLz('term.next')"
:class="$root.isNextDisabled() && 'disabled'"
v-b-tooltip.hover v-b-tooltip.hover
></button> ></button>
</div> </div>
@ -243,6 +240,7 @@
class="playback-button--small repeat" class="playback-button--small repeat"
v-if="mk.repeatMode == 0" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1" @click="mk.repeatMode = 1"
:class="$root.isDisabled() && 'disabled'"
:title="$root.getLz('term.enableRepeatOne')" :title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover v-b-tooltip.hover
></button> ></button>
@ -251,6 +249,7 @@
@click="mk.repeatMode = 2" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1" v-else-if="mk.repeatMode == 1"
:title="$root.getLz('term.disableRepeatOne')" :title="$root.getLz('term.disableRepeatOne')"
:class="$root.isDisabled() && 'disabled'"
v-b-tooltip.hover v-b-tooltip.hover
></button> ></button>
<button <button
@ -258,6 +257,7 @@
@click="mk.repeatMode = 0" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2" v-else-if="mk.repeatMode == 2"
:title="$root.getLz('term.disableRepeat')" :title="$root.getLz('term.disableRepeat')"
:class="$root.isDisabled() && 'disabled'"
v-b-tooltip.hover v-b-tooltip.hover
></button> ></button>
</div> </div>

View file

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

View file

@ -66,29 +66,39 @@
</div> </div>
</div> </div>
<div class="control-buttons"> <div class="control-buttons">
<div class="app-chrome-item"> <div class="app-chrome-item display--large">
<button class="playback-button--small shuffle" v-if="app.mk.shuffleMode == 0" <button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0" :class="$root.isDisabled() && 'disabled'"
@click="app.mk.shuffleMode = 1"></button> @click="$root.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="$root.isDisabled() && 'disabled'"
@click="app.mk.shuffleMode = 0"></button> @click="$root.mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item display--large">
<button class="playback-button previous" @click="app.prevButton()"></button> <button class="playback-button previous" @click="$root.prevButton()" :class="$root.isPrevDisabled() && 'disabled'"
</div> :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
<div class="app-chrome-item"> </div>
<button class="playback-button pause" @click="app.mk.pause()" v-if="app.mk.isPlaying"></button> <div class="app-chrome-item display--large">
<button class="playback-button play" @click="app.mk.play()" v-else></button> <button class="playback-button stop" @click="$root.mk.stop()"
</div> v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
<div class="app-chrome-item"> :title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
<button class="playback-button next" @click="app.skipToNextItem()"></button> <button class="playback-button pause" @click="$root.mk.pause()" v-else-if="$root.mk.isPlaying"
</div> :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
<div class="app-chrome-item"> <button class="playback-button play" @click="$root.mk.play()" v-else :title="$root.getLz('term.play')"
<button class="playback-button--small repeat" v-if="app.mk.repeatMode == 0" v-b-tooltip.hover></button>
@click="app.mk.repeatMode = 1"></button> </div>
<button class="playback-button--small repeat repeatOne" @click="app.mk.repeatMode = 2" <div class="app-chrome-item display--large">
v-else-if="app.mk.repeatMode == 1"></button> <button class="playback-button next" @click="$root.skipToNextItem()" :class="$root.isNextDisabled() && 'disabled'"
<button class="playback-button--small repeat active" @click="app.mk.repeatMode = 0" :title="$root.getLz('term.next')" v-b-tooltip.hover></button>
v-else-if="app.mk.repeatMode == 2"></button> </div>
<div class="app-chrome-item display--large">
<button class="playback-button--small repeat" v-if="$root.mk.repeatMode == 0" :class="$root.isDisabled() && 'disabled'"
@click="$root.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="$root.isDisabled() && 'disabled'" v-else-if="$root.mk.repeatMode == 1"
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
<button class="playback-button--small repeat active" @click="$root.mk.repeatMode = 0"
:class="$root.isDisabled() && 'disabled'" v-else-if="$root.mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</div> </div>
</div> </div>
<div class="app-chrome-item volume display--large"> <div class="app-chrome-item volume display--large">