new info rect for masking long titles
This commit is contained in:
yazninja
parent
464c2788ff
commit
273af0b1df
2 changed files with 126 additions and 336 deletions
|
|
@ -1242,6 +1242,15 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-chrome .app-chrome-item > .app-playback-controls {
|
.app-chrome .app-chrome-item > .app-playback-controls {
|
||||||
|
.info-rect{
|
||||||
|
mask-image: linear-gradient(-90deg, transparent 0%, black 10%, black 90%, transparent 100%);
|
||||||
|
-webkit-mask-image: linear-gradient(-90deg, transparent 3%, black 10%, black 90%, transparent 100%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
.song-name {
|
.song-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -1515,7 +1524,7 @@ div[data-type="musicVideo"] .info-rect .title::before {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-chrome .app-chrome-item > .app-playback-controls > div > .song-artist-album {
|
.app-chrome .app-chrome-item > .app-playback-controls .song-artist-album {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
|
|
@ -1,62 +1,34 @@
|
||||||
<div
|
<div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
|
||||||
class="app-chrome"
|
|
||||||
:style="{'display': chrome.topChromeVisible ? '' : 'none'}"
|
|
||||||
>
|
|
||||||
<div class="app-chrome--left">
|
<div class="app-chrome--left">
|
||||||
<div
|
<div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'left' && !chrome.nativeControls">
|
||||||
class="app-chrome-item full-height"
|
|
||||||
v-if="chrome.windowControlPosition == 'left' && !chrome.nativeControls"
|
|
||||||
>
|
|
||||||
<div class="window-controls-macos">
|
<div class="window-controls-macos">
|
||||||
<div class="close" @click="ipcRenderer.send('close')"></div>
|
<div class="close" @click="ipcRenderer.send('close')"></div>
|
||||||
<div class="minimize" @click="ipcRenderer.send('minimize')"></div>
|
<div class="minimize" @click="ipcRenderer.send('minimize')"></div>
|
||||||
<div
|
<div class="minmax restore" v-if="chrome.maximized" @click="ipcRenderer.send('maximize')"></div>
|
||||||
class="minmax restore"
|
|
||||||
v-if="chrome.maximized"
|
|
||||||
@click="ipcRenderer.send('maximize')"
|
|
||||||
></div>
|
|
||||||
<div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
|
<div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item full-height" v-else>
|
<div class="app-chrome-item full-height" v-else>
|
||||||
<button
|
<button class="app-mainmenu" @blur="mainMenuVisibility(false, true)" @click="mainMenuVisibility(true, false)"
|
||||||
class="app-mainmenu"
|
@contextmenu="mainMenuVisibility(true, true)" :class="{active: chrome.menuOpened}"
|
||||||
@blur="mainMenuVisibility(false, true)"
|
:aria-label="$root.getLz('term.quickNav')"></button>
|
||||||
@click="mainMenuVisibility(true, false)"
|
|
||||||
@contextmenu="mainMenuVisibility(true, true)"
|
|
||||||
:class="{active: chrome.menuOpened}"
|
|
||||||
:aria-label="$root.getLz('term.quickNav')"
|
|
||||||
></button>
|
|
||||||
</div>
|
</div>
|
||||||
<template v-if="getThemeDirective('appNavigation') != 'seperate'">
|
<template v-if="getThemeDirective('appNavigation') != 'seperate'">
|
||||||
<div
|
<div class="vdiv" v-if="getThemeDirective('windowLayout') == 'twopanel'"></div>
|
||||||
class="vdiv"
|
|
||||||
v-if="getThemeDirective('windowLayout') == 'twopanel'"
|
|
||||||
></div>
|
|
||||||
<div class="app-chrome-item">
|
<div class="app-chrome-item">
|
||||||
<button
|
<button class="playback-button navigation" @click="navigateBack()" :title="$root.getLz('term.navigateBack')"
|
||||||
class="playback-button navigation"
|
v-b-tooltip.hover>
|
||||||
@click="navigateBack()"
|
|
||||||
:title="$root.getLz('term.navigateBack')"
|
|
||||||
v-b-tooltip.hover
|
|
||||||
>
|
|
||||||
<%- include('../svg/chevron-left.svg') %>
|
<%- include('../svg/chevron-left.svg') %>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item">
|
<div class="app-chrome-item">
|
||||||
<button
|
<button class="playback-button navigation" @click="navigateForward()"
|
||||||
class="playback-button navigation"
|
:title="$root.getLz('term.navigateForward')" v-b-tooltip.hover>
|
||||||
@click="navigateForward()"
|
|
||||||
:title="$root.getLz('term.navigateForward')"
|
|
||||||
v-b-tooltip.hover
|
|
||||||
>
|
|
||||||
<%- include('../svg/chevron-right.svg') %>
|
<%- include('../svg/chevron-right.svg') %>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item" v-if="getThemeDirective('windowLayout') == 'twopanel'">
|
<div class="app-chrome-item" v-if="getThemeDirective('windowLayout') == 'twopanel'">
|
||||||
<button
|
<button class="playback-button collapseLibrary" v-b-tooltip.hover
|
||||||
class="playback-button collapseLibrary"
|
|
||||||
v-b-tooltip.hover
|
|
||||||
:title="chrome.sidebarCollapsed ? getLz('action.showLibrary') : getLz('action.hideLibrary')"
|
:title="chrome.sidebarCollapsed ? getLz('action.showLibrary') : getLz('action.hideLibrary')"
|
||||||
@click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
|
@click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
|
||||||
<transition name="fade">
|
<transition name="fade">
|
||||||
|
|
@ -68,146 +40,67 @@
|
||||||
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="vdiv display--large" v-if="getThemeDirective('windowLayout') != 'twopanel'"></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 display--large">
|
||||||
<button
|
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'"
|
||||||
class="playback-button--small shuffle"
|
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')" v-b-tooltip.hover></button>
|
||||||
v-if="mk.shuffleMode == 0"
|
<button class="playback-button--small shuffle active" v-else :class="isDisabled() && 'disabled'"
|
||||||
:class="isDisabled() && 'disabled'"
|
@click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
|
||||||
@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>
|
||||||
<div class="app-chrome-item display--large">
|
<div class="app-chrome-item display--large">
|
||||||
<button
|
<button class="playback-button previous" @click="prevButton()" :class="isPrevDisabled() && 'disabled'"
|
||||||
class="playback-button previous"
|
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
|
||||||
@click="prevButton()"
|
|
||||||
:class="isPrevDisabled() && 'disabled'"
|
|
||||||
: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
|
<button class="playback-button stop" @click="mk.stop()"
|
||||||
class="playback-button stop"
|
|
||||||
@click="mk.stop()"
|
|
||||||
v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
|
v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
|
||||||
:title="$root.getLz('term.stop')"
|
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
|
||||||
v-b-tooltip.hover
|
<button class="playback-button pause" @click="mk.pause()" v-else-if="mk.isPlaying"
|
||||||
></button>
|
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
|
||||||
<button
|
<button class="playback-button play" @click="mk.play()" v-else :title="$root.getLz('term.play')"
|
||||||
class="playback-button pause"
|
v-b-tooltip.hover></button>
|
||||||
@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>
|
||||||
<div class="app-chrome-item display--large">
|
<div class="app-chrome-item display--large">
|
||||||
<button
|
<button class="playback-button next" @click="skipToNextItem()" :class="isNextDisabled() && 'disabled'"
|
||||||
class="playback-button next"
|
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
|
||||||
@click="skipToNextItem()"
|
|
||||||
:class="isNextDisabled() && 'disabled'"
|
|
||||||
: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
|
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0" :class="isDisabled() && 'disabled'"
|
||||||
class="playback-button--small repeat"
|
@click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button>
|
||||||
v-if="mk.repeatMode == 0"
|
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
|
||||||
:class="isDisabled() && 'disabled'"
|
:class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 1"
|
||||||
@click="mk.repeatMode = 1"
|
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
|
||||||
:title="$root.getLz('term.enableRepeatOne')"
|
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
|
||||||
v-b-tooltip.hover
|
:class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
|
||||||
></button>
|
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>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome--center">
|
<div class="app-chrome--center">
|
||||||
<div
|
<div class="app-chrome-item playback-controls" v-if="getThemeDirective('windowLayout') != 'twopanel'">
|
||||||
class="app-chrome-item playback-controls"
|
|
||||||
v-if="getThemeDirective('windowLayout') != 'twopanel'"
|
|
||||||
>
|
|
||||||
<template v-if="mkReady()">
|
<template v-if="mkReady()">
|
||||||
<div
|
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
|
||||||
class="app-playback-controls"
|
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
|
||||||
@mouseover="chrome.progresshover = true"
|
|
||||||
@mouseleave="chrome.progresshover = false"
|
|
||||||
@contextmenu="nowPlayingContextMenu"
|
|
||||||
>
|
|
||||||
<div class="artwork" id="artworkLCD">
|
<div class="artwork" id="artworkLCD">
|
||||||
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
|
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
|
||||||
</div>
|
</div>
|
||||||
<b-popover
|
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="bottom">
|
||||||
custom-class="mediainfo-popover"
|
|
||||||
target="artworkLCD"
|
|
||||||
triggers="hover"
|
|
||||||
placement="bottom"
|
|
||||||
>
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="shadow-artwork">
|
<div class="shadow-artwork">
|
||||||
<mediaitem-artwork
|
<mediaitem-artwork :url="currentArtUrl" :url="currentArtUrlRaw"></mediaitem-artwork>
|
||||||
:url="currentArtUrl"
|
|
||||||
:url="currentArtUrlRaw"
|
|
||||||
></mediaitem-artwork>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="popover-artwork">
|
<div class="popover-artwork">
|
||||||
<mediaitem-artwork
|
<mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
|
||||||
:size="210"
|
|
||||||
:url="currentArtUrlRaw"
|
|
||||||
></mediaitem-artwork>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="song-name">
|
<div class="song-name">
|
||||||
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">
|
||||||
class="song-artist"
|
|
||||||
@click="getNowPlayingItemDetailed(`artist`)"
|
|
||||||
>
|
|
||||||
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
|
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
|
||||||
class="song-album"
|
|
||||||
@click="getNowPlayingItemDetailed(`album`)"
|
|
||||||
>
|
|
||||||
{{
|
{{
|
||||||
mk.nowPlayingItem["attributes"]["albumName"]
|
mk.nowPlayingItem["attributes"]["albumName"]
|
||||||
? mk.nowPlayingItem["attributes"]["albumName"]
|
? mk.nowPlayingItem["attributes"]["albumName"]
|
||||||
|
|
@ -216,18 +109,10 @@
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<div class="btn-group" style="width: 100%">
|
<div class="btn-group" style="width: 100%">
|
||||||
<button
|
<button class="md-btn md-btn-small" style="width: 100%" @click="drawer.open = false; miniPlayer(true)">
|
||||||
class="md-btn md-btn-small"
|
|
||||||
style="width: 100%"
|
|
||||||
@click="drawer.open = false; miniPlayer(true)"
|
|
||||||
>
|
|
||||||
{{ $root.getLz("term.miniplayer") }}
|
{{ $root.getLz("term.miniplayer") }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button class="md-btn md-btn-small" style="width: 100%" @click="drawer.open = false; fullscreen(true)">
|
||||||
class="md-btn md-btn-small"
|
|
||||||
style="width: 100%"
|
|
||||||
@click="drawer.open = false; fullscreen(true)"
|
|
||||||
>
|
|
||||||
{{ $root.getLz("term.fullscreenView") }}
|
{{ $root.getLz("term.fullscreenView") }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -235,49 +120,31 @@
|
||||||
</b-popover>
|
</b-popover>
|
||||||
<div class="playback-info">
|
<div class="playback-info">
|
||||||
<div class="chrome-icon-container">
|
<div class="chrome-icon-container">
|
||||||
<div
|
<div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
|
||||||
class="audio-type private-icon"
|
<div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
|
||||||
v-if="cfg.general.privateEnabled === true"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="audio-type ppe-icon"
|
|
||||||
v-if="cfg.audio.maikiwiAudio.ciderPPE === true"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="info-rect">
|
||||||
class="song-name"
|
<div class="song-name"
|
||||||
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']"
|
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">
|
||||||
>
|
|
||||||
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
||||||
<div
|
<div class="explicit-icon" v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
|
||||||
class="explicit-icon"
|
style="display: inline-block"></div>
|
||||||
v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
|
|
||||||
style="display: inline-block"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="song-artist-album">
|
<div class="song-artist-album">
|
||||||
<div
|
<div class="song-artist-album-content"
|
||||||
class="song-artist-album-content"
|
|
||||||
:class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
|
:class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
|
||||||
style="
|
style="
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-box-orient: horizontal;
|
-webkit-box-orient: horizontal;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
"
|
">
|
||||||
>
|
<div class="item-navigate song-artist" style="display: inline-block"
|
||||||
<div
|
@click="getNowPlayingItemDetailed(`artist`)">
|
||||||
class="item-navigate song-artist"
|
|
||||||
style="display: inline-block"
|
|
||||||
@click="getNowPlayingItemDetailed(`artist`)"
|
|
||||||
>
|
|
||||||
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
|
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="song-artist item-navigate" style="display: inline-block"
|
||||||
class="song-artist item-navigate"
|
|
||||||
style="display: inline-block"
|
|
||||||
@click="getNowPlayingItemDetailed('album')"
|
@click="getNowPlayingItemDetailed('album')"
|
||||||
v-if="mk.nowPlayingItem['attributes']['albumName'] != ''"
|
v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
|
||||||
>
|
|
||||||
<div class="separator" style="display: inline-block">
|
<div class="separator" style="display: inline-block">
|
||||||
{{ "—" }}
|
{{ "—" }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -289,40 +156,27 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="song-progress">
|
<div class="song-progress">
|
||||||
<div
|
<div class="song-duration" style="justify-content: space-between; height: 1px"
|
||||||
class="song-duration"
|
:style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
|
||||||
style="justify-content: space-between; height: 1px"
|
|
||||||
:style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]"
|
|
||||||
>
|
|
||||||
<p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
|
<p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
|
||||||
<p style="width: auto">
|
<p style="width: auto">
|
||||||
{{ convertTime(mk.currentPlaybackDuration) }}
|
{{ convertTime(mk.currentPlaybackDuration) }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input
|
<input type="range" step="0.01" min="0" :style="progressBarStyle()"
|
||||||
type="range"
|
|
||||||
step="0.01"
|
|
||||||
min="0"
|
|
||||||
:style="progressBarStyle()"
|
|
||||||
@input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
|
@input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
|
||||||
@mouseup="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
|
@mouseup="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
|
||||||
@touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
|
@touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
|
||||||
:max="mk.currentPlaybackDuration"
|
:max="mk.currentPlaybackDuration" :value="getSongProgress()" />
|
||||||
:value="getSongProgress()"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
|
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<button
|
<button class="lcdMenu" @click="nowPlayingContextMenu" :title="$root.getLz('term.more')"
|
||||||
class="lcdMenu"
|
v-b-tooltip.hover>
|
||||||
@click="nowPlayingContextMenu"
|
|
||||||
:title="$root.getLz('term.more')"
|
|
||||||
v-b-tooltip.hover
|
|
||||||
>
|
|
||||||
<div class="svg-icon"></div>
|
<div class="svg-icon"></div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -332,86 +186,43 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item" v-else>
|
<div class="app-chrome-item" v-else>
|
||||||
<div class="top-nav-group">
|
<div class="top-nav-group">
|
||||||
<sidebar-library-item
|
<sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" page="home">
|
||||||
:name="$root.getLz('home.title')"
|
|
||||||
svg-icon="./assets/feather/home.svg"
|
|
||||||
page="home"
|
|
||||||
>
|
|
||||||
</sidebar-library-item>
|
</sidebar-library-item>
|
||||||
<sidebar-library-item
|
<sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg"
|
||||||
:name="$root.getLz('term.listenNow')"
|
page="listen_now"></sidebar-library-item>
|
||||||
svg-icon="./assets/feather/play-circle.svg"
|
<sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg" page="browse">
|
||||||
page="listen_now"
|
</sidebar-library-item>
|
||||||
></sidebar-library-item>
|
<sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" page="radio">
|
||||||
<sidebar-library-item
|
|
||||||
:name="$root.getLz('term.browse')"
|
|
||||||
svg-icon="./assets/feather/globe.svg"
|
|
||||||
page="browse"
|
|
||||||
>
|
|
||||||
</sidebar-library-item>
|
</sidebar-library-item>
|
||||||
<sidebar-library-item
|
|
||||||
:name="$root.getLz('term.radio')"
|
|
||||||
svg-icon="./assets/feather/radio.svg"
|
|
||||||
page="radio"
|
|
||||||
></sidebar-library-item>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome--right">
|
<div class="app-chrome--right">
|
||||||
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
|
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
|
||||||
<div class="app-chrome-item volume display--large">
|
<div class="app-chrome-item volume display--large">
|
||||||
<button
|
<button class="volume-button--small volume" @click="muteButtonPressed()"
|
||||||
class="volume-button--small volume"
|
|
||||||
@click="muteButtonPressed()"
|
|
||||||
:class="{'active': this.cfg.audio.volume == 0}"
|
:class="{'active': this.cfg.audio.volume == 0}"
|
||||||
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
|
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')" v-b-tooltip.hover></button>
|
||||||
v-b-tooltip.hover
|
<input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
|
||||||
></button>
|
v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()" v-b-tooltip.hover
|
||||||
<input
|
:title="formatVolumeTooltip()" />
|
||||||
type="range"
|
|
||||||
@wheel="volumeWheel"
|
|
||||||
:step="cfg.audio.volumeStep"
|
|
||||||
min="0"
|
|
||||||
:max="cfg.audio.maxVolume"
|
|
||||||
v-model="mk.volume"
|
|
||||||
v-if="typeof mk.volume != 'undefined'"
|
|
||||||
@change="checkMuteChange()"
|
|
||||||
v-b-tooltip.hover
|
|
||||||
:title="formatVolumeTooltip()"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item generic">
|
<div class="app-chrome-item generic">
|
||||||
<button
|
<button class="playback-button--small cast" :title="$root.getLz('term.cast')"
|
||||||
class="playback-button--small cast"
|
|
||||||
:title="$root.getLz('term.cast')"
|
|
||||||
@click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
|
@click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
|
||||||
v-b-tooltip.hover
|
v-b-tooltip.hover></button>
|
||||||
></button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item generic">
|
<div class="app-chrome-item generic">
|
||||||
<button
|
<button class="playback-button--small queue" :title="$root.getLz('term.queue')" v-b-tooltip.hover
|
||||||
class="playback-button--small queue"
|
:class="{'active': drawer.panel == 'queue'}" @click="invokeDrawer('queue')"></button>
|
||||||
:title="$root.getLz('term.queue')"
|
|
||||||
v-b-tooltip.hover
|
|
||||||
:class="{'active': drawer.panel == 'queue'}"
|
|
||||||
@click="invokeDrawer('queue')"
|
|
||||||
></button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item generic">
|
<div class="app-chrome-item generic">
|
||||||
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
|
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
|
||||||
<button
|
<button class="playback-button--small lyrics" :title="$root.getLz('term.lyrics')" v-b-tooltip.hover
|
||||||
class="playback-button--small lyrics"
|
:class="{'active': drawer.panel == 'lyrics'}" @click="invokeDrawer('lyrics')"></button>
|
||||||
:title="$root.getLz('term.lyrics')"
|
|
||||||
v-b-tooltip.hover
|
|
||||||
:class="{'active': drawer.panel == 'lyrics'}"
|
|
||||||
@click="invokeDrawer('lyrics')"
|
|
||||||
></button>
|
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<button
|
<button class="playback-button--small lyrics" :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
|
||||||
class="playback-button--small lyrics"
|
|
||||||
:style="{'opacity': 0.3, 'pointer-events': 'none'}"
|
|
||||||
></button>
|
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -419,31 +230,16 @@
|
||||||
<div class="app-chrome-item search">
|
<div class="app-chrome-item search">
|
||||||
<div class="search-input-container">
|
<div class="search-input-container">
|
||||||
<div class="search-input--icon"></div>
|
<div class="search-input--icon"></div>
|
||||||
<input
|
<input type="search" spellcheck="false" @click="showSearch()" @focus="search.showHints = true"
|
||||||
type="search"
|
|
||||||
spellcheck="false"
|
|
||||||
@click="showSearch()"
|
|
||||||
@focus="search.showHints = true"
|
|
||||||
@blur="setTimeout(()=>{search.showHints = false}, 300)"
|
@blur="setTimeout(()=>{search.showHints = false}, 300)"
|
||||||
v-on:keyup.enter="searchQuery();search.showHints = false"
|
v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();" @input="getSearchHints()"
|
||||||
@change="showSearch();"
|
:placeholder="$root.getLz('term.search') + '...'" v-model="search.term" ref="searchInput"
|
||||||
@input="getSearchHints()"
|
class="search-input" />
|
||||||
:placeholder="$root.getLz('term.search') + '...'"
|
|
||||||
v-model="search.term"
|
|
||||||
ref="searchInput"
|
|
||||||
class="search-input"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
<div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
|
||||||
class="search-hints-container"
|
|
||||||
v-if="search.showHints && search.hints.length != 0"
|
|
||||||
>
|
|
||||||
<div class="search-hints">
|
<div class="search-hints">
|
||||||
<button
|
<button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
|
||||||
class="search-hint text-overflow-elipsis"
|
@click="search.term = hint;search.showHints = false;searchQuery(hint)">
|
||||||
v-for="hint in search.hints"
|
|
||||||
@click="search.term = hint;search.showHints = false;searchQuery(hint)"
|
|
||||||
>
|
|
||||||
{{ hint }}
|
{{ hint }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -451,33 +247,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div
|
<div class="app-chrome-item full-height" id="window-controls-container"
|
||||||
class="app-chrome-item full-height"
|
v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls">
|
||||||
id="window-controls-container"
|
|
||||||
v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls"
|
|
||||||
>
|
|
||||||
<div class="window-controls">
|
<div class="window-controls">
|
||||||
<div class="minimize" @click="ipcRenderer.send('minimize')"></div>
|
<div class="minimize" @click="ipcRenderer.send('minimize')"></div>
|
||||||
<div
|
<div class="minmax restore" v-if="chrome.maximized" @click="ipcRenderer.send('maximize')"></div>
|
||||||
class="minmax restore"
|
|
||||||
v-if="chrome.maximized"
|
|
||||||
@click="ipcRenderer.send('maximize')"
|
|
||||||
></div>
|
|
||||||
<div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
|
<div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
|
||||||
<div class="close" @click="ipcRenderer.send('close')"></div>
|
<div class="close" @click="ipcRenderer.send('close')"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="app-chrome-item full-height" v-else-if="platform != 'darwin' && !chrome.nativeControls">
|
||||||
class="app-chrome-item full-height"
|
<button class="app-mainmenu" @blur="mainMenuVisibility(false, true)" @click="mainMenuVisibility(true, false)"
|
||||||
v-else-if="platform != 'darwin' && !chrome.nativeControls"
|
@contextmenu="mainMenuVisibility(true, true)" :class="{active: chrome.menuOpened}"></button>
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="app-mainmenu"
|
|
||||||
@blur="mainMenuVisibility(false, true)"
|
|
||||||
@click="mainMenuVisibility(true, false)"
|
|
||||||
@contextmenu="mainMenuVisibility(true, true)"
|
|
||||||
:class="{active: chrome.menuOpened}"
|
|
||||||
></button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue