okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

redesign episode 2

Browse source
This commit is contained in:
booploops 2022-05-26 21:21:38 -07:00
parent bc55e6fe1a
commit 3102db4fa0
5 changed files with 542 additions and 250 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/renderer/less/directives.less
View file

@ -1,3 +1,13 @@
@colorMixRate: 1%;
@transparencyRate: 50%;
@keyColor : #fc3c44;
@ciderColor: #ff2654;
@baseColor: #1e1e1e;
@baseColorMix: mix(@baseColor, transparent, @transparencyRate);
@sidebarColor: #2e2e2e;
@sidebarColorMix: mix(@sidebarColor, transparent, @transparencyRate);
#app.navbar {
--navigationBarHeight: 38px;
}
@ -8,13 +18,57 @@
--chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
.app-chrome {
&:not(.chrome-bottom) {
.app-chrome--center {
flex: 1;
.top-nav-group {
background: @baseColor;
border: 1px solid lighten(@baseColor, 8);
border-radius: 10px;
display: flex;
height: 32px;
.app-sidebar-item {
background-color: @baseColor;
border-radius: 10px!important;
border:0px;
min-width: 120px;
padding:6px;
justify-content: center;
align-items: center;
margin: 0px;
height: 100%;
&:after {
display: none;
}
&:hover {
background-color: lighten(@baseColor, @colorMixRate * 5);
}
&.active {
background-color: lighten(@baseColor, @colorMixRate * 5);
}
&.md-btn-primary {
box-shadow: 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8);
background-color: lighten(@baseColor, @colorMixRate * 5);
z-index: 1;
}
}
}
}
}
.app-mainmenu {
width: 30px;
height: 30px;
}
.search-input {
width: 300px;
width: 180px;
}
height: var(--chromeHeight1);

9
src/renderer/less/elements.less
View file

@ -570,6 +570,7 @@
&:hover {
background: rgb(200 200 200 / 10%);
box-shadow: var(--mediaItemShadow);
.overlay-play {
opacity: 1;
@ -578,10 +579,13 @@
&.mediaitem-selected {
background: var(--selected);
box-shadow: var(--mediaItemShadow);
}
&:active {
background: var(--selected-click);
box-shadow: var(--mediaItemShadow);
color: #eee;
}
@ -1089,11 +1093,12 @@
&.mediaitem-card {
background: #ccc;
background: var(--spcolor);
height: 272px;
height: 298px;
width: 230px;
overflow: hidden;
position: relative;
border-radius: calc(var(--mediaItemRadius) * 2);
box-shadow: var(--mediaItemShadow-ShadowSubtle);
.artwork {
width: 230px;
@ -1158,10 +1163,10 @@
overflow: hidden;
max-height: 3.8em;
z-index: 1;
padding-top: 6px;
}
&::after {
box-shadow: var(--mediaItemShadow);
content: "";
width: 100%;
height: 100%;

4
src/renderer/style.less
View file

@ -1917,6 +1917,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
display: flex;
flex-flow: wrap;
justify-content: center;
.cd-mediaitem-square-container{
align-items: center;
}
.cd-mediaitem-square {
width: 220px;
height: 260px;
@ -1951,7 +1954,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.reasonSP{

675
src/renderer/views/app/chrome-top.ejs
View file

@ -1,239 +1,466 @@
<div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
<div class="app-chrome--left">
<div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'left' && !chrome.nativeControls">
<div class="window-controls-macos">
<div class="close" @click="ipcRenderer.send('close')"></div>
<div class="minimize" @click="ipcRenderer.send('minimize')"></div>
<div class="minmax restore" v-if="chrome.maximized"
@click="ipcRenderer.send('maximize')">
</div>
<div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
</div>
</div>
<div class="app-chrome-item full-height" v-else>
<button class="app-mainmenu"
@blur="mainMenuVisibility(false)"
@click="mainMenuVisibility(true)"
:class="{active: chrome.menuOpened}"
:aria-label="$root.getLz('term.quickNav')"></button>
</div>
<template v-if="getThemeDirective('appNavigation') != 'seperate'">
<div class="vdiv display--large" v-if="getThemeDirective('windowLayout') == 'twopanel'"></div>
<div class="app-chrome-item">
<button class="playback-button navigation" @click="navigateBack()"
:title="$root.getLz('term.navigateBack')" v-b-tooltip.hover>
<%- include('../svg/chevron-left.svg') %>
<div
class="app-chrome"
:style="{'display': chrome.topChromeVisible ? '' : 'none'}"
>
<div class="app-chrome--left">
<div
class="app-chrome-item full-height"
v-if="chrome.windowControlPosition == 'left' && !chrome.nativeControls"
>
<div class="window-controls-macos">
<div class="close" @click="ipcRenderer.send('close')"></div>
<div class="minimize" @click="ipcRenderer.send('minimize')"></div>
<div
class="minmax restore"
v-if="chrome.maximized"
@click="ipcRenderer.send('maximize')"
></div>
<div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
</div>
</div>
<div class="app-chrome-item full-height" v-else>
<button
class="app-mainmenu"
@blur="mainMenuVisibility(false)"
@click="mainMenuVisibility(true)"
:class="{active: chrome.menuOpened}"
:aria-label="$root.getLz('term.quickNav')"
></button>
</div>
<template v-if="getThemeDirective('appNavigation') != 'seperate'">
<div
class="vdiv display--large"
v-if="getThemeDirective('windowLayout') == 'twopanel'"
></div>
<div class="app-chrome-item">
<button
class="playback-button navigation"
@click="navigateBack()"
:title="$root.getLz('term.navigateBack')"
v-b-tooltip.hover
>
<%- include('../svg/chevron-left.svg') %>
</button>
</div>
<div class="app-chrome-item">
<button
class="playback-button navigation"
@click="navigateForward()"
:title="$root.getLz('term.navigateForward')"
v-b-tooltip.hover
>
<%- include('../svg/chevron-right.svg') %>
</button>
</div>
<div
class="vdiv display--large"
v-if="getThemeDirective('windowLayout') != 'twopanel'"
></div>
</template>
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item display--large">
<button
class="playback-button--small shuffle"
v-if="mk.shuffleMode == 0"
:class="isDisabled() && 'disabled'"
@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 class="app-chrome-item display--large">
<button
class="playback-button previous"
@click="prevButton()"
:class="isPrevDisabled() && 'disabled'"
:title="$root.getLz('term.previous')"
v-b-tooltip.hover
></button>
</div>
<div class="app-chrome-item display--large">
<button
class="playback-button stop"
@click="mk.stop()"
v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
:title="$root.getLz('term.stop')"
v-b-tooltip.hover
></button>
<button
class="playback-button pause"
@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 class="app-chrome-item display--large">
<button
class="playback-button next"
@click="skipToNextItem()"
:class="isNextDisabled() && 'disabled'"
:title="$root.getLz('term.next')"
v-b-tooltip.hover
></button>
</div>
<div class="app-chrome-item display--large">
<button
class="playback-button--small repeat"
v-if="mk.repeatMode == 0"
:class="isDisabled() && 'disabled'"
@click="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="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>
</template>
</div>
<div class="app-chrome--center">
<div
class="app-chrome-item playback-controls"
v-if="getThemeDirective('windowLayout') != 'twopanel'"
>
<template v-if="mkReady()">
<div
class="app-playback-controls"
@mouseover="chrome.progresshover = true"
@mouseleave="chrome.progresshover = false"
@contextmenu="nowPlayingContextMenu"
>
<div class="artwork" id="artworkLCD">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<b-popover
custom-class="mediainfo-popover"
target="artworkLCD"
triggers="hover"
placement="bottom"
>
<div class="content">
<div class="shadow-artwork">
<mediaitem-artwork
:url="currentArtUrl"
:url="currentArtUrlRaw"
></mediaitem-artwork>
</div>
<div class="popover-artwork">
<mediaitem-artwork
:size="210"
:url="currentArtUrlRaw"
></mediaitem-artwork>
</div>
<div class="song-name">
{{ mk.nowPlayingItem["attributes"]["name"] }}
</div>
<div
class="song-artist"
@click="getNowPlayingItemDetailed(`artist`)"
>
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div>
<div
class="song-album"
@click="getNowPlayingItemDetailed(`album`)"
>
{{
mk.nowPlayingItem["attributes"]["albumName"]
? mk.nowPlayingItem["attributes"]["albumName"]
: ""
}}
</div>
<hr />
<div class="btn-group" style="width: 100%">
<button
class="md-btn md-btn-small"
style="width: 100%"
@click="drawer.open = false; miniPlayer(true)"
>
{{ $root.getLz("term.miniplayer") }}
</button>
</div>
<div class="app-chrome-item">
<button class="playback-button navigation" @click="navigateForward()"
:title="$root.getLz('term.navigateForward')" v-b-tooltip.hover>
<%- include('../svg/chevron-right.svg') %>
<button
class="md-btn md-btn-small"
style="width: 100%"
@click="drawer.open = false; fullscreen(true)"
>
{{ $root.getLz("term.fullscreenView") }}
</button>
</div>
</div>
<div class="vdiv display--large" v-if="getThemeDirective('windowLayout') != 'twopanel'"></div>
</template>
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item display--large">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'"
@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>
</b-popover>
<div class="playback-info">
<div class="chrome-icon-container">
<div
class="audio-type private-icon"
v-if="cfg.general.privateEnabled === true"
></div>
<div
class="audio-type ppe-icon"
v-if="cfg.audio.maikiwiAudio.ciderPPE === true"
></div>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button previous" @click="prevButton()" :class="isPrevDisabled() && 'disabled'"
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
<div
class="song-name"
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']"
>
{{ mk.nowPlayingItem["attributes"]["name"] }}
<div
class="explicit-icon"
v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
style="display: inline-block"
></div>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button stop" @click="mk.stop()" v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
<button class="playback-button pause" @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 class="app-chrome-item display--large">
<button class="playback-button next" @click="skipToNextItem()" :class="isNextDisabled() && 'disabled'"
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0" :class="isDisabled() && 'disabled'"
@click="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="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>
</template>
</div>
<div class="app-chrome--center">
<div class="app-chrome-item playback-controls" v-if="getThemeDirective('windowLayout') != 'twopanel'">
<template v-if="mkReady()">
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
<div class="artwork" id="artworkLCD">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="bottom">
<div class="content">
<div class="shadow-artwork">
<mediaitem-artwork :url="currentArtUrl" :url="currentArtUrlRaw"></mediaitem-artwork>
</div>
<div class="popover-artwork">
<mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
</div>
<div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
<div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{ mk.nowPlayingItem["attributes"]["artistName"] }}</div>
<div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</div>
<hr>
<div class="btn-group" style="width:100%;">
<button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; miniPlayer(true)">{{ $root.getLz("term.miniplayer") }}</button>
<button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; fullscreen(true)">{{ $root.getLz("term.fullscreenView") }}</button>
</div>
</div>
</b-popover>
<div class="playback-info">
<div class="chrome-icon-container">
<div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
<div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
</div>
<div class="song-name"
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">
{{ mk.nowPlayingItem["attributes"]["name"] }}
<div class="explicit-icon"
v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
style="display: inline-block"></div>
</div>
<div class="song-artist-album">
<div 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' : '']"
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
<div class="item-navigate song-artist" style="display: inline-block"
@click="getNowPlayingItemDetailed(`artist`)">
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div>
<div class="song-artist item-navigate" style="display: inline-block"
@click="getNowPlayingItemDetailed('album')"
v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
<div class="separator" style="display: inline-block;">{{"—"}}</div>
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</div>
</div>
</div>
<div class="song-progress">
<div class="song-duration"
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(mk.currentPlaybackDuration) }}
</p>
</div>
<input type="range" step="0.01" min="0" :style="progressBarStyle()"
@input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
@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);"
:max="mk.currentPlaybackDuration" :value="getSongProgress()">
</div>
</div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
<div class="actions">
<button class="lcdMenu" @click="nowPlayingContextMenu"
:title="$root.getLz('term.more')" v-b-tooltip.hover>
<div class="svg-icon"></div>
</button>
</div>
</template>
<div class="song-artist-album">
<div
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' : '']"
style="
display: inline-block;
-webkit-box-orient: horizontal;
white-space: nowrap;
"
>
<div
class="item-navigate song-artist"
style="display: inline-block"
@click="getNowPlayingItemDetailed(`artist`)"
>
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div>
</template>
</div>
<div class="app-chrome-item" v-else>
<div class="search-input-container">
<div class="search-input--icon"></div>
<input type="search" spellcheck="false" @click="showSearch()" @focus="search.showHints = true"
@blur="setTimeout(()=>{search.showHints = false}, 300)"
v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
@input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term"
ref="searchInput" class="search-input">
<div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
<div class="search-hints">
<button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
@click="search.term = hint;search.showHints = false;searchQuery(hint)">
{{ hint }}
</button>
</div>
<div
class="song-artist item-navigate"
style="display: inline-block"
@click="getNowPlayingItemDetailed('album')"
v-if="mk.nowPlayingItem['attributes']['albumName'] != ''"
>
<div class="separator" style="display: inline-block">
{{ "—" }}
</div>
{{
mk.nowPlayingItem["attributes"]["albumName"]
? mk.nowPlayingItem["attributes"]["albumName"]
: ""
}}
</div>
</div>
</div>
<div class="song-progress">
<div
class="song-duration"
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(mk.currentPlaybackDuration) }}
</p>
</div>
<input
type="range"
step="0.01"
min="0"
:style="progressBarStyle()"
@input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
@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);"
:max="mk.currentPlaybackDuration"
:value="getSongProgress()"
/>
</div>
</div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
<div class="actions">
<button
class="lcdMenu"
@click="nowPlayingContextMenu"
:title="$root.getLz('term.more')"
v-b-tooltip.hover
>
<div class="svg-icon"></div>
</button>
</div>
</template>
</div>
</template>
</div>
<div class="app-chrome--right">
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item volume display--large">
<button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover></button>
<input 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 class="app-chrome-item generic">
<button 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'))"
v-b-tooltip.hover
></button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small queue"
:title="$root.getLz('term.queue')"
v-b-tooltip.hover
:class="{'active': drawer.panel == 'queue'}"
@click="invokeDrawer('queue')"></button>
</div>
<div class="app-chrome-item generic">
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
<button class="playback-button--small lyrics"
:title="$root.getLz('term.lyrics')"
v-b-tooltip.hover
:class="{'active': drawer.panel == 'lyrics'}"
@click="invokeDrawer('lyrics')"></button>
</template>
<template v-else>
<button class="playback-button--small lyrics"
:style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
</template>
</div>
<div class="app-chrome-item" v-else>
<div class="top-nav-group">
<sidebar-library-item
:name="$root.getLz('home.title')"
svg-icon="./assets/feather/home.svg"
page="home"
>
</sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.listenNow')"
svg-icon="./assets/feather/play-circle.svg"
page="listen_now"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.browse')"
svg-icon="./assets/feather/globe.svg"
page="browse"
>
</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 class="app-chrome--right">
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item volume display--large">
<button
class="volume-button--small volume"
@click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover
></button>
<input
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 class="app-chrome-item generic">
<button
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'))"
v-b-tooltip.hover
></button>
</div>
<div class="app-chrome-item generic">
<button
class="playback-button--small queue"
:title="$root.getLz('term.queue')"
v-b-tooltip.hover
:class="{'active': drawer.panel == 'queue'}"
@click="invokeDrawer('queue')"
></button>
</div>
<div class="app-chrome-item generic">
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
<button
class="playback-button--small lyrics"
:title="$root.getLz('term.lyrics')"
v-b-tooltip.hover
:class="{'active': drawer.panel == 'lyrics'}"
@click="invokeDrawer('lyrics')"
></button>
</template>
<div class="app-chrome-item full-height" id="window-controls-container"
v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls">
<div class="window-controls">
<div class="minimize" @click="ipcRenderer.send('minimize')"></div>
<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="close" @click="ipcRenderer.send('close')"></div>
<template v-else>
<button
class="playback-button--small lyrics"
:style="{'opacity': 0.3, 'pointer-events': 'none'}"
></button>
</template>
</div>
</template>
<template v-else>
<div class="app-chrome-item">
<div class="search-input-container">
<div class="search-input--icon"></div>
<input
type="search"
spellcheck="false"
@click="showSearch()"
@focus="search.showHints = true"
@blur="setTimeout(()=>{search.showHints = false}, 300)"
v-on:keyup.enter="searchQuery();search.showHints = false"
@change="showSearch();"
@input="getSearchHints()"
:placeholder="$root.getLz('term.search') + '...'"
v-model="search.term"
ref="searchInput"
class="search-input"
/>
<div
class="search-hints-container"
v-if="search.showHints && search.hints.length != 0"
>
<div class="search-hints">
<button
class="search-hint text-overflow-elipsis"
v-for="hint in search.hints"
@click="search.term = hint;search.showHints = false;searchQuery(hint)"
>
{{ hint }}
</button>
</div>
</div>
</div>
<div class="app-chrome-item full-height" v-else-if="platform != 'darwin' && !chrome.nativeControls">
<button class="app-mainmenu"
@blur="mainMenuVisibility(false)"
@click="mainMenuVisibility(true)"
:class="{active: chrome.menuOpened}"></button>
</div>
</div>
</template>
<div
class="app-chrome-item full-height"
id="window-controls-container"
v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls"
>
<div class="window-controls">
<div class="minimize" @click="ipcRenderer.send('minimize')"></div>
<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="close" @click="ipcRenderer.send('close')"></div>
</div>
</div>
<div
class="app-chrome-item full-height"
v-else-if="platform != 'darwin' && !chrome.nativeControls"
>
<button
class="app-mainmenu"
@blur="mainMenuVisibility(false)"
@click="mainMenuVisibility(true)"
:class="{active: chrome.menuOpened}"
></button>
</div>
</div>
</div>

48
src/renderer/views/app/sidebar.ejs
View file

@ -22,30 +22,34 @@
</template>
<div class="app-sidebar-content" scrollaxis="y">
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.cider = !cfg.general.sidebarCollapsed.cider"
:class="{collapsed: cfg.general.sidebarCollapsed.cider}">
{{$root.getLz('app.name')}}
</div>
<template v-if="!cfg.general.sidebarCollapsed.cider">
<sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" page="home">
</sidebar-library-item>
<!-- AM Navigation -->
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.cider = !cfg.general.sidebarCollapsed.cider"
:class="{collapsed: cfg.general.sidebarCollapsed.cider}">
{{$root.getLz('app.name')}}
</div>
<template v-if="!cfg.general.sidebarCollapsed.cider">
<sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" page="home">
</sidebar-library-item>
</template>
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.applemusic = !cfg.general.sidebarCollapsed.applemusic"
:class="{collapsed: cfg.general.sidebarCollapsed.applemusic}">
{{$root.getLz('term.appleMusic')}}
</div>
<template v-if="!cfg.general.sidebarCollapsed.applemusic">
<sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg"
page="listen_now"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg"
page="browse">
</sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg"
page="radio"></sidebar-library-item>
</template>
</template>
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.applemusic = !cfg.general.sidebarCollapsed.applemusic"
:class="{collapsed: cfg.general.sidebarCollapsed.applemusic}">
{{$root.getLz('term.appleMusic')}}
</div>
<template v-if="!cfg.general.sidebarCollapsed.applemusic">
<sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg"
page="listen_now"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg"
page="browse">
</sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg"
page="radio"></sidebar-library-item>
</template>
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.library = !cfg.general.sidebarCollapsed.library"