fix live radio controls on fullscreen, miniplayer and sidebar
This commit is contained in:
parent
6132c62c4f
commit
3f548848c8
3 changed files with 82 additions and 71 deletions
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue