fixed toggle buttons missing
This commit is contained in:
booploops
parent
ff8fe37d29
commit
b97dd15f5d
1 changed files with 106 additions and 84 deletions
|
|
@ -3,9 +3,12 @@
|
||||||
<div class="background">
|
<div class="background">
|
||||||
<div class="bgArtworkMaterial">
|
<div class="bgArtworkMaterial">
|
||||||
<div class="bg-artwork-container">
|
<div class="bg-artwork-container">
|
||||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork a" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork a"
|
||||||
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork b" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||||
<img v-if="!(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork no-animation" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork b"
|
||||||
|
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||||
|
<img v-if="!(app.cfg.visual.bg_artwork_rotation && app.animateBackground)"
|
||||||
|
class="bg-artwork no-animation" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -55,50 +58,68 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="control-buttons">
|
<div class="control-buttons">
|
||||||
<div class="app-chrome-item display--large">
|
<div class="app-chrome-item display--large">
|
||||||
<button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0" :class="$root.isDisabled() && 'disabled'"
|
<button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0"
|
||||||
@click="$root.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')" v-b-tooltip.hover></button>
|
:class="$root.isDisabled() && 'disabled'"
|
||||||
<button class="playback-button--small shuffle active" v-else :class="$root.isDisabled() && 'disabled'"
|
@click="$root.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
|
||||||
@click="$root.mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
|
v-b-tooltip.hover></button>
|
||||||
|
<button class="playback-button--small shuffle active" v-else
|
||||||
|
:class="$root.isDisabled() && 'disabled'"
|
||||||
|
@click="$root.mk.shuffleMode = 0"
|
||||||
|
:title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item display--large">
|
<div class="app-chrome-item display--large">
|
||||||
<button class="playback-button previous" @click="$root.prevButton()" :class="$root.isPrevDisabled() && 'disabled'"
|
<button class="playback-button previous" @click="$root.prevButton()"
|
||||||
|
:class="$root.isPrevDisabled() && 'disabled'"
|
||||||
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
|
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item display--large">
|
<div class="app-chrome-item display--large">
|
||||||
<button class="playback-button stop" @click="$root.mk.stop()"
|
<button class="playback-button stop" @click="$root.mk.stop()"
|
||||||
v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
|
v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
|
||||||
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
|
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
|
||||||
<button class="playback-button pause" @click="$root.mk.pause()" v-else-if="$root.mk.isPlaying"
|
<button class="playback-button pause" @click="$root.mk.pause()"
|
||||||
|
v-else-if="$root.mk.isPlaying"
|
||||||
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
|
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
|
||||||
<button class="playback-button play" @click="$root.mk.play()" v-else :title="$root.getLz('term.play')"
|
<button class="playback-button play" @click="$root.mk.play()" v-else
|
||||||
|
:title="$root.getLz('term.play')"
|
||||||
v-b-tooltip.hover></button>
|
v-b-tooltip.hover></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item display--large">
|
<div class="app-chrome-item display--large">
|
||||||
<button class="playback-button next" @click="$root.skipToNextItem()" :class="$root.isNextDisabled() && 'disabled'"
|
<button class="playback-button next" @click="$root.skipToNextItem()"
|
||||||
|
:class="$root.isNextDisabled() && 'disabled'"
|
||||||
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
|
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item display--large">
|
<div class="app-chrome-item display--large">
|
||||||
<button class="playback-button--small repeat" v-if="$root.mk.repeatMode == 0" :class="$root.isDisabled() && 'disabled'"
|
<button class="playback-button--small repeat" v-if="$root.mk.repeatMode == 0"
|
||||||
@click="$root.mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button>
|
: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"
|
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
|
||||||
:class="$root.isDisabled() && 'disabled'" v-else-if="$root.mk.repeatMode == 1"
|
:class="$root.isDisabled() && 'disabled'"
|
||||||
|
v-else-if="$root.mk.repeatMode == 1"
|
||||||
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
|
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
|
||||||
<button class="playback-button--small repeat active" @click="$root.mk.repeatMode = 0"
|
<button class="playback-button--small repeat active"
|
||||||
:class="$root.isDisabled() && 'disabled'" v-else-if="$root.mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
|
@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>
|
v-b-tooltip.hover></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item volume display--large">
|
<div class="app-chrome-item volume display--large">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"
|
<button class="volume-button--small volume" @click="app.muteButtonPressed()"
|
||||||
:title="app.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')" v-b-tooltip.hover></button>
|
:class="{'active': app.cfg.audio.volume == 0}"
|
||||||
<input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume" v-model="app.mk.volume"
|
:title="app.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
|
||||||
|
v-b-tooltip.hover></button>
|
||||||
|
<input type="range" class="slider" @wheel="app.volumeWheel"
|
||||||
|
:step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume"
|
||||||
|
v-model="app.mk.volume"
|
||||||
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
|
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
|
||||||
v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
|
v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -113,18 +134,19 @@
|
||||||
:richlyrics="richlyrics"></lyrics-view>
|
:richlyrics="richlyrics"></lyrics-view>
|
||||||
</div>
|
</div>
|
||||||
<div class="queue-col" v-if="tabMode == 'queue'">
|
<div class="queue-col" v-if="tabMode == 'queue'">
|
||||||
<cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>
|
<cider-queue v-if="tabMode == 'queue'" ref="queue"></cider-queue>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-toggles">
|
<div class="tab-toggles">
|
||||||
<div class="lyrics" :class="{active: tabMode == 'lyrics'}" @click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
|
<div class="lyrics" :class="{active: tabMode == 'lyrics'}"
|
||||||
<div class="queue" :class="{active: tabMode == 'queue'}" @click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
|
@click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
|
||||||
|
<div class="queue" :class="{active: tabMode == 'queue'}"
|
||||||
|
@click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -173,7 +195,7 @@
|
||||||
} else if (app.mk.nowPlayingItem._container.type == "library-albums") {
|
} else if (app.mk.nowPlayingItem._container.type == "library-albums") {
|
||||||
try {
|
try {
|
||||||
const result = (await app.mk.api.v3.music(`/v1/me/library/albums/${app.mk.nowPlayingItem._container.id}/catalog`
|
const result = (await app.mk.api.v3.music(`/v1/me/library/albums/${app.mk.nowPlayingItem._container.id}/catalog`
|
||||||
, { "fields": "editorialArtwork,editorialVideo" })).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
, {"fields": "editorialArtwork,editorialVideo"})).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||||
if (result) {
|
if (result) {
|
||||||
this.video = result
|
this.video = result
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue