putting code in place for alternate main views (fullscreen)
This commit is contained in:
booploops
parent
55109f8baf
commit
1431bc7efb
4 changed files with 492 additions and 380 deletions
|
|
@ -101,6 +101,7 @@ class NavigationEvent {
|
|||
const app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
appMode: "player",
|
||||
ipcRenderer: ipcRenderer,
|
||||
cfg: ipcRenderer.sendSync("getStore"),
|
||||
isDev: ipcRenderer.sendSync("is-dev"),
|
||||
|
|
|
|||
|
|
@ -183,6 +183,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#app-sidebar {
|
||||
|
|
@ -2897,6 +2898,44 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
}
|
||||
|
||||
.fullscreen-view-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fullscreen-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.fs-row {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.artwork-col {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
.artwork {
|
||||
width: 50vh;
|
||||
height: 50vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Cider */
|
||||
|
||||
/* Transitions */
|
||||
|
|
@ -2944,6 +2983,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
.fsModeSwitch-enter-active,
|
||||
.fsModeSwitch-leave-active {
|
||||
transition: transform 1s var(--appleEase), opacity 1s var(--appleEase);
|
||||
}
|
||||
|
||||
.fsModeSwitch-enter,
|
||||
.fsModeSwitch-leave-to {
|
||||
transform: scale(1.10);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.drawertransition-enter-active,
|
||||
.drawertransition-leave-active {
|
||||
transition: right .25s var(--appleEase);
|
||||
|
|
|
|||
34
src/renderer/views/components/fullscreen.ejs
Normal file
34
src/renderer/views/components/fullscreen.ejs
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<script type="text/x-template" id="fullscreen-view">
|
||||
<div class="fullscreen-view">
|
||||
<div class="row fs-row">
|
||||
<div class="col artwork-col">
|
||||
<div class="artwork">
|
||||
<mediaitem-artwork
|
||||
:size="600"
|
||||
url=""
|
||||
></mediaitem-artwork>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="fs-info">
|
||||
<div>Name</div>
|
||||
<div>Name</div>
|
||||
<div>Name</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('fullscreen-view', {
|
||||
template: '#fullscreen-view',
|
||||
methods: {
|
||||
sayHello: function () {
|
||||
alert('Hello world!');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -29,407 +29,426 @@
|
|||
|
||||
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
|
||||
<div id="app">
|
||||
<div id="app-main">
|
||||
<div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
|
||||
<div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
|
||||
<div class="app-chrome--left">
|
||||
<div class="app-chrome-item full-height">
|
||||
<div class="app-title"></div>
|
||||
<transition name="fsModeSwitch">
|
||||
<div id="app-main" v-show="appMode == 'player'">
|
||||
<div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
|
||||
<div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
|
||||
<div class="app-chrome--left">
|
||||
<div class="app-chrome-item full-height">
|
||||
<div class="app-title"></div>
|
||||
</div>
|
||||
<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>
|
||||
</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 play" @click="mk.play()" v-else></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button next" @click="mk.skipToNextItem()"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
|
||||
@click="mk.repeatMode = 1"></button>
|
||||
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
|
||||
v-else-if="mk.repeatMode == 1"></button>
|
||||
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0"
|
||||
v-else-if="mk.repeatMode == 2"></button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</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 play" @click="mk.play()" v-else></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button next" @click="mk.skipToNextItem()"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
|
||||
@click="mk.repeatMode = 1"></button>
|
||||
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
|
||||
v-else-if="mk.repeatMode == 1"></button>
|
||||
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0"
|
||||
v-else-if="mk.repeatMode == 2"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-chrome--center">
|
||||
<div class="app-chrome-item playback-controls">
|
||||
<template v-if="mkReady()">
|
||||
<div class="app-playback-controls" @mouseover="chrome.progresshover = true" @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
|
||||
<div class="artwork"></div>
|
||||
<div class="playback-info">
|
||||
<div class="song-name" >
|
||||
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div class="song-artist " 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 class="app-chrome--center">
|
||||
<div class="app-chrome-item playback-controls">
|
||||
<template v-if="mkReady()">
|
||||
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
|
||||
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
|
||||
<div class="artwork"></div>
|
||||
<div class="playback-info">
|
||||
<div class="song-name">
|
||||
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div class="song-artist item-navigate" style="display: inline-block;" @click="getNowPlayingItemDetailed('album')">
|
||||
{{ (mk.nowPlayingItem["attributes"]["albumName"]) ? (" - " + mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
</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">{{ convertToMins(getSongProgress()) }}</p>
|
||||
<p style="width: auto">{{ convertToMins(mk.currentPlaybackDuration) }}</p>
|
||||
<div class="song-artist "
|
||||
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')">
|
||||
{{ (mk.nowPlayingItem["attributes"]["albumName"]) ? (" - " +
|
||||
mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
</div>
|
||||
</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);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
|
||||
:max="mk.currentPlaybackDuration" :value="getSongProgress()">
|
||||
<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">{{ convertToMins(getSongProgress()) }}</p>
|
||||
<p style="width: auto">{{ convertToMins(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);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
|
||||
:max="mk.currentPlaybackDuration" :value="getSongProgress()">
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
|
||||
<div class="actions"
|
||||
v-if="isInLibrary(mk.nowPlayingItem['attributes']['playParams'])">
|
||||
❤️
|
||||
</div>
|
||||
<div class="actions" v-else>🖤</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
|
||||
<div class="actions" v-if="isInLibrary(mk.nowPlayingItem['attributes']['playParams'])">
|
||||
❤️
|
||||
</div>
|
||||
<div class="actions" v-else>🖤</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-chrome--right">
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<div class="app-chrome-item volume-icon"></div>
|
||||
<input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume"
|
||||
v-if="typeof mk.volume != 'undefined'">
|
||||
</div>
|
||||
<div class="app-chrome-item generic" v-if="false">
|
||||
<button class="playback-button--small">
|
||||
<%- include("svg/cast.svg") %>
|
||||
</button>
|
||||
</div>
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}" @click="invokeDrawer('queue')"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small lyrics" :class="{'active': drawer.panel == 'lyrics'}"
|
||||
@click="invokeDrawer('lyrics')"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item full-height">
|
||||
<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>
|
||||
</div>
|
||||
<div class="app-navigation" v-cloak>
|
||||
<div id="app-sidebar">
|
||||
<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"
|
||||
@blur="setTimeout(()=>{search.showHints = false}, 300)"
|
||||
v-on:keyup.enter="searchQuery();search.showHints = false"
|
||||
@change="showSearch();" @input="getSearchHints()" placeholder="Search..."
|
||||
v-model="search.term"
|
||||
ref="searchInput"
|
||||
class="search-input">
|
||||
<div class="app-chrome--right">
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<div class="app-chrome-item volume-icon"></div>
|
||||
<input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume"
|
||||
v-if="typeof mk.volume != 'undefined'">
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
|
||||
<div class="search-hints">
|
||||
<button class="search-hint" v-for="hint in search.hints"
|
||||
@click="search.term = hint;search.showHints = false;searchQuery(hint)">
|
||||
{{ hint }}
|
||||
<div class="app-chrome-item generic" v-if="false">
|
||||
<button class="playback-button--small">
|
||||
<%- include("svg/cast.svg") %>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-sidebar-content">
|
||||
<div class="app-sidebar-header-text">
|
||||
Apple Music
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
|
||||
@click="invokeDrawer('queue')"></button>
|
||||
</div>
|
||||
<sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
|
||||
<sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
|
||||
<sidebar-library-item name="Radio" page="radio"></sidebar-library-item>
|
||||
<div class="app-sidebar-header-text">
|
||||
Library
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small lyrics" :class="{'active': drawer.panel == 'lyrics'}"
|
||||
@click="invokeDrawer('lyrics')"></button>
|
||||
</div>
|
||||
<sidebar-library-item name="Recently Added" page="library-recentlyadded"></sidebar-library-item>
|
||||
<sidebar-library-item name="Songs" page="library-songs"></sidebar-library-item>
|
||||
<sidebar-library-item name="Albums" page="library-albums"></sidebar-library-item>
|
||||
<sidebar-library-item name="Artists" page="library-artists"></sidebar-library-item>
|
||||
<sidebar-library-item name="Made For You" page="library-madeforyou"></sidebar-library-item>
|
||||
<div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
|
||||
Playlists
|
||||
</div>
|
||||
<button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id"
|
||||
v-if="item.attributes.name"
|
||||
@contextmenu="playlistContextMenu($event, item.id)"
|
||||
@dragover="()=>{}"
|
||||
:href="item.href"
|
||||
@click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(page.substring(9))'>
|
||||
{{ item.attributes.name }}
|
||||
</button>
|
||||
</div>
|
||||
<transition name="wpfade">
|
||||
<div class="usermenu-container" v-if="chrome.menuOpened">
|
||||
<div class="usermenu-body">
|
||||
<button class="usermenu-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
|
||||
<div class="row nopadding">
|
||||
<div class="col nopadding">
|
||||
Show Personal Info
|
||||
</div>
|
||||
<div class="col-auto nopadding" v-if="!chrome.hideUserInfo">
|
||||
✔️
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="usermenu-item" @click="mk.privateEnabled = !mk.privateEnabled">
|
||||
<div class="row nopadding">
|
||||
<div class="col nopadding">
|
||||
Private Session
|
||||
</div>
|
||||
<div class="col-auto nopadding" v-if="mk.privateEnabled">
|
||||
✔️
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="usermenu-item">
|
||||
About
|
||||
</button>
|
||||
<button class="usermenu-item" @click="window.open('https://discord.gg/applemusic')">
|
||||
Discord
|
||||
</button>
|
||||
<button class="usermenu-item" @click="appRoute('settings')">
|
||||
Settings
|
||||
</button>
|
||||
<button class="usermenu-item" @click="mk.unauthorize()">
|
||||
Sign Out
|
||||
</button>
|
||||
<div class="app-chrome-item full-height">
|
||||
<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>
|
||||
</transition>
|
||||
<div class="app-sidebar-footer">
|
||||
<input type="range" class="web-slider display--small" step="0.01" min="0" max="1"
|
||||
v-model="mk.volume"
|
||||
v-if="typeof mk.volume != 'undefined'">
|
||||
<button class="app-sidebar-button" style="width:100%"
|
||||
:class="{active: chrome.menuOpened}"
|
||||
@blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"
|
||||
@click="(chrome.userinfo.id) ? chrome.menuOpened = !chrome.menuOpened : false">
|
||||
|
||||
<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)"/>
|
||||
|
||||
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
|
||||
<template v-if="chrome.userinfo.id">
|
||||
<div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}
|
||||
</div>
|
||||
<div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div @click="mk.authorize()">
|
||||
Sign In
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="sidebar-user-text" v-else>
|
||||
Cider
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="app-sidebar-notification" v-if="library.downloadNotification.show">
|
||||
<div>{{ library.downloadNotification.message }}</div>
|
||||
<div>{{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }}</div>
|
||||
<div style="width: 100%">
|
||||
<progress style="width: 80%;" :value="library.downloadNotification.progress"
|
||||
:max="library.downloadNotification.total"></progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app-content">
|
||||
<div id="navigation-bar">
|
||||
<button class="nav-item" @click="navigateBack()"><%- include('svg/chevron-left.svg') %></button>
|
||||
<button class="nav-item" @click="navigateForward()"><%- include('svg/chevron-right.svg') %></button>
|
||||
</div>
|
||||
<!-- Artist Page -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'artist-page' && artistPage.data.attributes">
|
||||
<cider-artist :data="artistPage.data"></cider-artist>
|
||||
</template>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<%- include('pages/zoo') %>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<%- include('pages/webview') %>
|
||||
</transition>
|
||||
<!-- Collection List -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'collection-list'">
|
||||
<cider-collection-list :data="collectionList.response" :type="collectionList.type" :title="collectionList.title"></cider-collection-list>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Playlist / Album page-->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page.includes('playlist_')">
|
||||
<cider-playlist :data="showingPlaylist"></cider-playlist>
|
||||
</template>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<template v-if="page.includes('album_')">
|
||||
<cider-playlist :data="showingPlaylist"></cider-playlist>
|
||||
</template>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<template v-if="page.includes('recordLabel_')">
|
||||
<cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
|
||||
</template>
|
||||
</transition>
|
||||
|
||||
<transition name="wpfade">
|
||||
<template v-if="page.includes('curator_')">
|
||||
<cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Browse -->
|
||||
<transition v-on:enter="getBrowsePage(); console.log('browse')" name="wpfade">
|
||||
<template v-if="page == 'browse'">
|
||||
<!-- <div class="content-inner">
|
||||
<div class="app-navigation" v-cloak>
|
||||
<div id="app-sidebar">
|
||||
<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"
|
||||
@blur="setTimeout(()=>{search.showHints = false}, 300)"
|
||||
v-on:keyup.enter="searchQuery();search.showHints = false"
|
||||
@change="showSearch();" @input="getSearchHints()" placeholder="Search..."
|
||||
v-model="search.term"
|
||||
ref="searchInput"
|
||||
class="search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
|
||||
<div class="search-hints">
|
||||
<button class="search-hint" v-for="hint in search.hints"
|
||||
@click="search.term = hint;search.showHints = false;searchQuery(hint)">
|
||||
{{ hint }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-sidebar-content">
|
||||
<div class="app-sidebar-header-text">
|
||||
Apple Music
|
||||
</div>
|
||||
<sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
|
||||
<sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
|
||||
<sidebar-library-item name="Radio" page="radio"></sidebar-library-item>
|
||||
<div class="app-sidebar-header-text">
|
||||
Library
|
||||
</div>
|
||||
<sidebar-library-item name="Recently Added" page="library-recentlyadded"></sidebar-library-item>
|
||||
<sidebar-library-item name="Songs" page="library-songs"></sidebar-library-item>
|
||||
<sidebar-library-item name="Albums" page="library-albums"></sidebar-library-item>
|
||||
<sidebar-library-item name="Artists" page="library-artists"></sidebar-library-item>
|
||||
<sidebar-library-item name="Made For You" page="library-madeforyou"></sidebar-library-item>
|
||||
<div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
|
||||
Playlists
|
||||
</div>
|
||||
<button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id"
|
||||
v-if="item.attributes.name"
|
||||
@contextmenu="playlistContextMenu($event, item.id)"
|
||||
@dragover="()=>{}"
|
||||
:href="item.href"
|
||||
@click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(page.substring(9))'>
|
||||
{{ item.attributes.name }}
|
||||
</button>
|
||||
</div>
|
||||
<transition name="wpfade">
|
||||
<div class="usermenu-container" v-if="chrome.menuOpened">
|
||||
<div class="usermenu-body">
|
||||
<button class="usermenu-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
|
||||
<div class="row nopadding">
|
||||
<div class="col nopadding">
|
||||
Show Personal Info
|
||||
</div>
|
||||
<div class="col-auto nopadding" v-if="!chrome.hideUserInfo">
|
||||
✔️
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="usermenu-item" @click="mk.privateEnabled = !mk.privateEnabled">
|
||||
<div class="row nopadding">
|
||||
<div class="col nopadding">
|
||||
Private Session
|
||||
</div>
|
||||
<div class="col-auto nopadding" v-if="mk.privateEnabled">
|
||||
✔️
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="usermenu-item">
|
||||
About
|
||||
</button>
|
||||
<button class="usermenu-item" @click="window.open('https://discord.gg/applemusic')">
|
||||
Discord
|
||||
</button>
|
||||
<button class="usermenu-item" @click="appRoute('settings')">
|
||||
Settings
|
||||
</button>
|
||||
<button class="usermenu-item" @click="mk.unauthorize()">
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="app-sidebar-footer">
|
||||
<input type="range" class="web-slider display--small" step="0.01" min="0" max="1"
|
||||
v-model="mk.volume"
|
||||
v-if="typeof mk.volume != 'undefined'">
|
||||
<button class="app-sidebar-button" style="width:100%"
|
||||
:class="{active: chrome.menuOpened}"
|
||||
@blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"
|
||||
@click="(chrome.userinfo.id) ? chrome.menuOpened = !chrome.menuOpened : false">
|
||||
|
||||
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
|
||||
MusicKit
|
||||
</button>
|
||||
<button id="apple-music-unauthorize" class="md-btn md-btn-primary"
|
||||
@click="unauthorize()">
|
||||
Stop
|
||||
MusicKit
|
||||
</button>
|
||||
<br>
|
||||
<template v-if="mk.nowPlayingItem">
|
||||
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
|
||||
<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)"/>
|
||||
|
||||
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
|
||||
<template v-if="chrome.userinfo.id">
|
||||
<div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}
|
||||
</div>
|
||||
<div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div @click="mk.authorize()">
|
||||
Sign In
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="sidebar-user-text" v-else>
|
||||
Cider
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="app-sidebar-notification" v-if="library.downloadNotification.show">
|
||||
<div>{{ library.downloadNotification.message }}</div>
|
||||
<div>{{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }}
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progress style="width: 80%;" :value="library.downloadNotification.progress"
|
||||
:max="library.downloadNotification.total"></progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app-content">
|
||||
<div id="navigation-bar">
|
||||
<button class="nav-item" @click="navigateBack()"><%- include('svg/chevron-left.svg') %></button>
|
||||
<button class="nav-item"
|
||||
@click="navigateForward()"><%- include('svg/chevron-right.svg') %></button>
|
||||
</div>
|
||||
<!-- Artist Page -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'artist-page' && artistPage.data.attributes">
|
||||
<cider-artist :data="artistPage.data"></cider-artist>
|
||||
</template>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<%- include('pages/zoo') %>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<%- include('pages/webview') %>
|
||||
</transition>
|
||||
<!-- Collection List -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'collection-list'">
|
||||
<cider-collection-list :data="collectionList.response" :type="collectionList.type"
|
||||
:title="collectionList.title"></cider-collection-list>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Playlist / Album page-->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page.includes('playlist_')">
|
||||
<cider-playlist :data="showingPlaylist"></cider-playlist>
|
||||
</template>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<template v-if="page.includes('album_')">
|
||||
<cider-playlist :data="showingPlaylist"></cider-playlist>
|
||||
</template>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<template v-if="page.includes('recordLabel_')">
|
||||
<cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
|
||||
</template>
|
||||
</transition>
|
||||
|
||||
<transition name="wpfade">
|
||||
<template v-if="page.includes('curator_')">
|
||||
<cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Browse -->
|
||||
<transition v-on:enter="getBrowsePage(); console.log('browse')" name="wpfade">
|
||||
<template v-if="page == 'browse'">
|
||||
<!-- <div class="content-inner">
|
||||
|
||||
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
|
||||
MusicKit
|
||||
</button>
|
||||
<button id="apple-music-unauthorize" class="md-btn md-btn-primary"
|
||||
@click="unauthorize()">
|
||||
Stop
|
||||
MusicKit
|
||||
</button>
|
||||
<br>
|
||||
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
|
||||
</template>
|
||||
<div><input type="text" v-model="quickPlayQuery">
|
||||
<button @click="quickPlay(quickPlayQuery)">Play</button>
|
||||
</div>
|
||||
<h1 class="header-text">Browse</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu
|
||||
tincidunt
|
||||
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
|
||||
</p>
|
||||
<div class="media-item--small">
|
||||
<div class="artwork">
|
||||
<template v-if="mk.nowPlayingItem">
|
||||
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
|
||||
<br>
|
||||
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
|
||||
</template>
|
||||
<div><input type="text" v-model="quickPlayQuery">
|
||||
<button @click="quickPlay(quickPlayQuery)">Play</button>
|
||||
</div>
|
||||
<h1 class="header-text">Browse</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu
|
||||
tincidunt
|
||||
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
|
||||
</p>
|
||||
<div class="media-item--small">
|
||||
<div class="artwork">
|
||||
|
||||
</div>
|
||||
<div class="text">
|
||||
Text
|
||||
</div>
|
||||
<div class="subtext">
|
||||
Subtext
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
Text
|
||||
</div>
|
||||
<div class="subtext">
|
||||
Subtext
|
||||
<br>
|
||||
<br>
|
||||
<h1 class="header-text">Listen Now</h1>
|
||||
<div class="winbox">
|
||||
<div class="fancy">990kbps</div>
|
||||
<div class="">
|
||||
<button class="md-btn md-btn-primary">Audio Quality Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
|
||||
<button class="md-btn">Button</button>
|
||||
<button class="md-btn md-btn-primary">Button</button>
|
||||
</div> -->
|
||||
<cider-browse :data="browsepage"></cider-browse>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Listen Now -->
|
||||
<transition v-on:enter="getListenNow()" name="wpfade">
|
||||
<template v-if="page == 'listen_now'" @created="console.log('listennow')">
|
||||
<cider-listen-now :data="listennow"></cider-listen-now>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Radio -->
|
||||
<transition v-on:enter="getRadioStations()" name="wpfade">
|
||||
<template v-if="page == 'radio'" @created="console.log('radio')">
|
||||
<div class="content-inner">
|
||||
<h1 class="header-text">Radio</h1>
|
||||
<h3>Recent Stations</h3>
|
||||
<mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<h1 class="header-text">Listen Now</h1>
|
||||
<div class="winbox">
|
||||
<div class="fancy">990kbps</div>
|
||||
<div class="">
|
||||
<button class="md-btn md-btn-primary">Audio Quality Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
|
||||
<button class="md-btn">Button</button>
|
||||
<button class="md-btn md-btn-primary">Button</button>
|
||||
</div> -->
|
||||
<cider-browse :data="browsepage"></cider-browse>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Listen Now -->
|
||||
<transition v-on:enter="getListenNow()" name="wpfade">
|
||||
<template v-if="page == 'listen_now'" @created="console.log('listennow')">
|
||||
<cider-listen-now :data="listennow"></cider-listen-now>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Radio -->
|
||||
<transition v-on:enter="getRadioStations()" name="wpfade">
|
||||
<template v-if="page == 'radio'" @created="console.log('radio')">
|
||||
<div class="content-inner">
|
||||
<h1 class="header-text">Radio</h1>
|
||||
<h3>Recent Stations</h3>
|
||||
<mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
|
||||
</div>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Settings -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'settings'">
|
||||
<cider-settings></cider-settings>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Search -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'search'">
|
||||
<cider-search :search="search"></cider-search>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Library - Recently Added -->
|
||||
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
|
||||
<%- include('pages/library-recentlyadded') %>');
|
||||
</transition>
|
||||
<!-- Library - Songs -->
|
||||
<transition name="wpfade" v-on:enter="getLibrarySongsFull()">
|
||||
<%- include('pages/library-songs') %>
|
||||
</transition>
|
||||
<!-- Library - Albums -->
|
||||
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
|
||||
<%- include('pages/library-albums') %>');
|
||||
%>
|
||||
</transition>
|
||||
<!-- Library - Made For You -->
|
||||
<transition name="wpfade" v-on:enter="getMadeForYou()">
|
||||
<template v-if="page == 'library-madeforyou'" >
|
||||
<%- include('pages/madeforyou') %>');
|
||||
%>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Library - Artists-->
|
||||
<transition name="wpfade" v-on:enter="getLibraryArtistsFull(null, 0);">
|
||||
<template v-if="page == 'library-artists'">
|
||||
<%- include('pages/library-artists') %>');
|
||||
%>
|
||||
</template>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<template v-if="page.includes('appleCurator')" >
|
||||
<cider-applecurator :data="appleCurator"></cider-applecurator>
|
||||
</template>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
<transition name="drawertransition">
|
||||
<div class="app-drawer" v-if="drawer.open">
|
||||
<lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics"></lyrics-view>
|
||||
<cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Settings -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'settings'">
|
||||
<cider-settings></cider-settings>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Search -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'search'">
|
||||
<cider-search :search="search"></cider-search>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Library - Recently Added -->
|
||||
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
|
||||
<%- include('pages/library-recentlyadded') %>');
|
||||
</transition>
|
||||
<!-- Library - Songs -->
|
||||
<transition name="wpfade" v-on:enter="getLibrarySongsFull()">
|
||||
<%- include('pages/library-songs') %>
|
||||
</transition>
|
||||
<!-- Library - Albums -->
|
||||
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
|
||||
<%- include('pages/library-albums') %>');
|
||||
%>
|
||||
</transition>
|
||||
<!-- Library - Made For You -->
|
||||
<transition name="wpfade" v-on:enter="getMadeForYou()">
|
||||
<template v-if="page == 'library-madeforyou'">
|
||||
<%- include('pages/madeforyou') %>');
|
||||
%>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Library - Artists-->
|
||||
<transition name="wpfade" v-on:enter="getLibraryArtistsFull(null, 0);">
|
||||
<template v-if="page == 'library-artists'">
|
||||
<%- include('pages/library-artists') %>');
|
||||
%>
|
||||
</template>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<template v-if="page.includes('appleCurator')">
|
||||
<cider-applecurator :data="appleCurator"></cider-applecurator>
|
||||
</template>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="drawertransition">
|
||||
<div class="app-drawer" v-if="drawer.open">
|
||||
<lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
|
||||
:richlyrics="richlyrics"></lyrics-view>
|
||||
<cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fsModeSwitch">
|
||||
<div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
|
||||
<fullscreen-view></fullscreen-view>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<img v-show="chrome.artworkReady" @load="chrome.artworkReady = true" class="bg-artwork"
|
||||
>
|
||||
|
|
@ -450,15 +469,20 @@
|
|||
fill-rule="nonzero"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="captions">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ?
|
||||
lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ?
|
||||
(lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "") : '')}}
|
||||
<div id="captions">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] &&
|
||||
lyrics[currentLyricsLine].line ) ?
|
||||
lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ? ((lyrics.length
|
||||
> 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ?
|
||||
(lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "") :
|
||||
'')}}
|
||||
</div>
|
||||
<div id="player-pip" @click="document.querySelector('video#apple-music-video-player').requestPictureInPicture()"
|
||||
<div id="player-pip"
|
||||
@click="document.querySelector('video#apple-music-video-player').requestPictureInPicture()"
|
||||
title="Picture-in-Picture">
|
||||
<%- include("svg/fullscreen.svg") %>
|
||||
</div>
|
||||
<div id="player-fullscreen" @click="document.querySelector('video#apple-music-video-player').requestFullscreen()"
|
||||
<div id="player-fullscreen"
|
||||
@click="document.querySelector('video#apple-music-video-player').requestFullscreen()"
|
||||
title="Fullscreen">
|
||||
<%- include("svg/fullscreen.svg") %>
|
||||
</div>
|
||||
|
|
@ -541,6 +565,8 @@
|
|||
<%- include('components/animatedartwork-view') %>
|
||||
<!-- Lyrics View -->
|
||||
<%- include('components/lyrics-view') %>
|
||||
<!-- Fullscreen View -->
|
||||
<%- include('components/fullscreen') %>
|
||||
|
||||
<script src="musickit.js?v=1"></script>
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue