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

Sidebar sections are now collapsible, added create new button above playlists

Browse source
This commit is contained in:
booploops 2022-04-08 00:58:28 -07:00
parent 477c3e606c
commit 08e38763fa
5 changed files with 140 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/i18n/en_US.json
View file

@ -256,6 +256,7 @@
"action.cast.airplay.underdevelopment": "AirPlay is still under development",
"action.cast.scan": "Scan",
"action.cast.scanning": "Scanning...",
"action.createNew": "Create New...",
"settings.header.general": "General",
"settings.header.general.description": "Adjust the general settings for Cider.",
"settings.option.general.language": "Language",

1
src/i18n/source/en_US.json
View file

@ -256,6 +256,7 @@
"action.cast.airplay.underdevelopment": "AirPlay is still under development",
"action.cast.scan": "Scan",
"action.cast.scanning": "Scanning...",
"action.createNew": "Create New...",
"settings.header.general": "General",
"settings.header.general.description": "Adjust the general settings for Cider.",
"settings.option.general.language": "Language",

7
src/main/base/store.ts
View file

@ -30,6 +30,13 @@ export class Store {
"videos": true,
"podcasts": true
},
"sidebarCollapsed": {
"cider": false,
"applemusic": false,
"library": false,
"amplaylists": false,
"playlists": false
},
"onStartup": {
"enabled": false,
"hidden": false,

21
src/renderer/style.less
View file

@ -471,9 +471,26 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.app-sidebar-header-text {
font-size: 11px;
margin: 6px 3px;
padding: 6px 6px;
font-weight: 600;
opacity: 0.50;
opacity: 0.5;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtNiA5IDYgNiA2LTYiPjwvcGF0aD4KPC9zdmc+");
background-size: 16px;
background-repeat: no-repeat;
background-position: 98%;
border-radius: 3px;
&.collapsed {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtMTggMTUtNi02LTYgNiI+PC9wYXRoPgo8L3N2Zz4=");
}
&:hover {
background-color: var(--selected);
}
&:active {
background-color: var(--selected-click);
}
}
.app-sidebar-footer {

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

@ -2,12 +2,10 @@
<div class="app-sidebar-header">
<div class="search-input-container">
<div class="search-input--icon"></div>
<input type="search" spellcheck="false" @click="showSearch()"
@focus="search.showHints = true"
<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"
@input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term"
ref="searchInput" class="search-input">
</div>
</div>
@ -20,59 +18,85 @@
</div>
</div>
<div class="app-sidebar-content" scrollaxis="y">
<div class="app-sidebar-header-text">
<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>
<sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg"
page="home">
<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>
<div class="app-sidebar-header-text">
</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>
<sidebar-library-item :name="$root.getLz('term.listenNow')"
svg-icon="./assets/feather/play-circle.svg"
<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 :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" page="radio">
</sidebar-library-item>
<div class="app-sidebar-header-text">
</template>
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.library = !cfg.general.sidebarCollapsed.library"
:class="{collapsed: cfg.general.sidebarCollapsed.library}">
{{$root.getLz('term.library')}}
</div>
<sidebar-library-item :name="$root.getLz('term.recentlyAdded')"
svg-icon="./assets/feather/plus-circle.svg"
v-if="cfg.general.sidebarItems.recentlyAdded"
page="library-recentlyadded"></sidebar-library-item>
<template v-if="!cfg.general.sidebarCollapsed.library">
<sidebar-library-item :name="$root.getLz('term.recentlyAdded')" svg-icon="./assets/feather/plus-circle.svg"
v-if="cfg.general.sidebarItems.recentlyAdded" page="library-recentlyadded"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg"
v-if="cfg.general.sidebarItems.songs"
page="library-songs"></sidebar-library-item>
v-if="cfg.general.sidebarItems.songs" page="library-songs"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.albums')" svg-icon="./assets/feather/disc.svg"
v-if="cfg.general.sidebarItems.albums"
page="library-albums"></sidebar-library-item>
v-if="cfg.general.sidebarItems.albums" page="library-albums"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
v-if="cfg.general.sidebarItems.artists"
page="library-artists"></sidebar-library-item>
v-if="cfg.general.sidebarItems.artists" page="library-artists"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg"
v-if="cfg.general.sidebarItems.videos"
page="library-videos"></sidebar-library-item>
v-if="cfg.general.sidebarItems.videos" page="library-videos"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg"
v-if="cfg.general.sidebarItems.podcasts"
page="podcasts">
v-if="cfg.general.sidebarItems.podcasts" page="podcasts">
</sidebar-library-item>
</template>
<template v-if="getPlaylistFolderChildren('p.applemusic').length != 0">
<div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.amplaylists = !cfg.general.sidebarCollapsed.amplaylists"
@contextmenu="playlistHeaderContextMenu"
:class="{collapsed: cfg.general.sidebarCollapsed.amplaylists}">
{{ $root.getLz('term.appleMusic') }} {{ $root.getLz('term.playlists') }}
</div>
<template v-if="!cfg.general.sidebarCollapsed.amplaylists">
<sidebar-playlist v-for="item in getPlaylistFolderChildren('p.applemusic')" :item="item">
</sidebar-playlist>
</template>
<div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
</template>
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.playlists = !cfg.general.sidebarCollapsed.playlists"
@contextmenu="playlistHeaderContextMenu"
:class="{collapsed: cfg.general.sidebarCollapsed.playlists}">
{{ $root.getLz('term.playlists') }}
</div>
<template v-if="!cfg.general.sidebarCollapsed.playlists">
<button class="app-sidebar-item" @click="playlistHeaderContextMenu">
<div class="sidebar-icon">
<svg width="46" height="46" fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5v14"></path>
<path d="M5 12h14"></path>
</svg>
</div>
{{ getLz('action.createNew') }}
</button>
<sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item">
</sidebar-playlist>
</template>
</div>
<transition name="wpfade">
<div class="usermenu-container" v-if="chrome.menuOpened">
@ -80,7 +104,7 @@
<button class="app-sidebar-button" style="width:100%" @click="appRoute('apple-account-settings')">
<img class="sidebar-user-icon" loading="lazy"
:src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"/>
:src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)" />
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
<template v-if="chrome.userinfo.id || mk.isAuthorized">
@ -106,34 +130,45 @@
</div>
</button>
<button class="usermenu-item" @click="appRoute('remote-pair')">
<span class="usermenu-item-icon"><%- include("../svg/smartphone.svg") %></span>
<span class="usermenu-item-icon">
<%- include("../svg/smartphone.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('action.showWebRemoteQR')}}</span>
</button>
<button class="usermenu-item" v-if="cfg.advanced.AudioContext" @click="modals.castMenu = true">
<span class="usermenu-item-icon"><%- include("../svg/cast.svg") %></span>
<span class="usermenu-item-icon">
<%- include("../svg/cast.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.cast')}}</span>
</button>
<button class="usermenu-item" v-if="cfg.advanced.AudioContext"
@click="modals.audioSettings = true">
<span class="usermenu-item-icon"><%- include("../svg/headphones.svg") %></span>
<button class="usermenu-item" v-if="cfg.advanced.AudioContext" @click="modals.audioSettings = true">
<span class="usermenu-item-icon">
<%- include("../svg/headphones.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.audioSettings')}}</span>
</button>
<button class="usermenu-item" v-if="pluginInstalled"
@click="modals.pluginMenu = true">
<span class="usermenu-item-icon"><%- include("../svg/grid.svg") %></span>
<button class="usermenu-item" v-if="pluginInstalled" @click="modals.pluginMenu = true">
<span class="usermenu-item-icon">
<%- include("../svg/grid.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.plugin')}}</span>
</button>
<button class="usermenu-item" @click="appRoute('about')">
<span class="usermenu-item-icon"><%- include("../svg/info.svg") %></span>
<span class="usermenu-item-icon">
<%- include("../svg/info.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.about')}}</span>
</button>
<button class="usermenu-item" @click="appRoute('settings')">
<span class="usermenu-item-icon"><%- include("../svg/settings.svg") %></span>
<span class="usermenu-item-icon">
<%- include("../svg/settings.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.settings')}}</span>
</button>
<button class="usermenu-item" @click="unauthorize()">
<span class="usermenu-item-icon"
style="right:2.5px;"><%- include("../svg/log-out.svg") %></span>
<span class="usermenu-item-icon" style="right:2.5px;">
<%- include("../svg/log-out.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.logout')}}</span>
</button>
</div>
@ -141,21 +176,18 @@
</transition>
<div class="app-sidebar-footer display--small app-sidebar-footer--controls">
<div class="app-playback-controls " v-if="mkReady()"
@contextmenu="nowPlayingContextMenu">
<div class="app-playback-controls " v-if="mkReady()" @contextmenu="nowPlayingContextMenu">
<div class="control-buttons">
<div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button>
<button class="playback-button--small shuffle active" v-else @click="mk.shuffleMode = 0"></button>
</div>
<div class="app-chrome-item">
<button class="playback-button previous" @click="prevButton()"></button>
</div>
<div class="app-chrome-item">
<button class="playback-button pause" @click="mk.pause()"
v-if="mk.isPlaying"></button>
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button>
</div>
<div class="app-chrome-item">
@ -166,8 +198,8 @@
@click="mk.repeatMode = 1"></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
<button class="playback-button--small repeat active"
@click="mk.repeatMode = 0" v-else-if="mk.repeatMode == 2"></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
</div>
</div>
<div class="app-chrome-item volume">
@ -175,16 +207,14 @@
<button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
<input type="range" class="" @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="`${(Math.log10(mk.volume) * 20).toFixed(2)} dB`">
:max="cfg.audio.maxVolume" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
@change="checkMuteChange()" v-b-tooltip.hover
:title="`${(Math.log10(mk.volume) * 20).toFixed(2)} dB`">
</div>
</div>
</div>
</div>
<div class="app-sidebar-notification backgroundNotification"
v-if="library.backgroundNotification.show">
<div class="app-sidebar-notification backgroundNotification" v-if="library.backgroundNotification.show">
<div class="message">{{ library.backgroundNotification.message }} ({{
library.backgroundNotification.progress }} / {{ library.backgroundNotification.total }})
</div>