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

putting code in place for alternate main views (fullscreen)

Browse source
This commit is contained in:
booploops 2021-12-27 00:43:03 -08:00
parent 55109f8baf
commit 1431bc7efb
4 changed files with 492 additions and 380 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/renderer/index.js
View file

@ -101,6 +101,7 @@ class NavigationEvent {
const app = new Vue({ const app = new Vue({
el: "#app", el: "#app",
data: { data: {
appMode: "player",
ipcRenderer: ipcRenderer, ipcRenderer: ipcRenderer,
cfg: ipcRenderer.sendSync("getStore"), cfg: ipcRenderer.sendSync("getStore"),
isDev: ipcRenderer.sendSync("is-dev"), isDev: ipcRenderer.sendSync("is-dev"),

51
src/renderer/style.less
View file

@ -183,6 +183,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
opacity: 1;
} }
#app-sidebar { #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 */ /* Cider */
/* Transitions */ /* Transitions */
@ -2944,6 +2983,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
transform: scale(0.5); 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-enter-active,
.drawertransition-leave-active { .drawertransition-leave-active {
transition: right .25s var(--appleEase); transition: right .25s var(--appleEase);

34
src/renderer/views/components/fullscreen.ejs Normal file
View 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>

68
src/renderer/views/main.ejs
View file

@ -29,7 +29,8 @@
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>"> <body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
<div id="app"> <div id="app">
<div id="app-main"> <transition name="fsModeSwitch">
<div id="app-main" v-show="appMode == 'player'">
<div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div> <div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
<div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}"> <div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
<div class="app-chrome--left"> <div class="app-chrome--left">
@ -64,23 +65,29 @@
<div class="app-chrome--center"> <div class="app-chrome--center">
<div class="app-chrome-item playback-controls"> <div class="app-chrome-item playback-controls">
<template v-if="mkReady()"> <template v-if="mkReady()">
<div class="app-playback-controls" @mouseover="chrome.progresshover = true" @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu"> <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
<div class="artwork"></div> <div class="artwork"></div>
<div class="playback-info"> <div class="playback-info">
<div class="song-name" > <div class="song-name">
{{ mk.nowPlayingItem["attributes"]["name"] }} {{ mk.nowPlayingItem["attributes"]["name"] }}
</div> </div>
<div class="song-artist " style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;"> <div class="song-artist "
<div class="item-navigate song-artist" style="display: inline-block;" @click="getNowPlayingItemDetailed(`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"] }} {{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div> </div>
<div class="song-artist item-navigate" style="display: inline-block;" @click="getNowPlayingItemDetailed('album')"> <div class="song-artist item-navigate" style="display: inline-block;"
{{ (mk.nowPlayingItem["attributes"]["albumName"]) ? (" - " + mk.nowPlayingItem["attributes"]["albumName"]) : "" }} @click="getNowPlayingItemDetailed('album')">
{{ (mk.nowPlayingItem["attributes"]["albumName"]) ? (" - " +
mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</div> </div>
</div> </div>
<div class="song-progress"> <div class="song-progress">
<div class="song-duration" style="justify-content: space-between; height: 1px;" :style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]"> <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(getSongProgress()) }}</p>
<p style="width: auto">{{ convertToMins(mk.currentPlaybackDuration) }}</p> <p style="width: auto">{{ convertToMins(mk.currentPlaybackDuration) }}</p>
</div> </div>
@ -92,7 +99,8 @@
</div> </div>
</div> </div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']"> <template v-if="mk.nowPlayingItem['attributes']['playParams']">
<div class="actions" v-if="isInLibrary(mk.nowPlayingItem['attributes']['playParams'])"> <div class="actions"
v-if="isInLibrary(mk.nowPlayingItem['attributes']['playParams'])">
❤️ ❤️
</div> </div>
<div class="actions" v-else>🖤</div> <div class="actions" v-else>🖤</div>
@ -115,7 +123,8 @@
</button> </button>
</div> </div>
<div class="app-chrome-item generic"> <div class="app-chrome-item generic">
<button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}" @click="invokeDrawer('queue')"></button> <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
@click="invokeDrawer('queue')"></button>
</div> </div>
<div class="app-chrome-item generic"> <div class="app-chrome-item generic">
<button class="playback-button--small lyrics" :class="{'active': drawer.panel == 'lyrics'}" <button class="playback-button--small lyrics" :class="{'active': drawer.panel == 'lyrics'}"
@ -253,7 +262,8 @@
</div> </div>
<div class="app-sidebar-notification" v-if="library.downloadNotification.show"> <div class="app-sidebar-notification" v-if="library.downloadNotification.show">
<div>{{ library.downloadNotification.message }}</div> <div>{{ library.downloadNotification.message }}</div>
<div>{{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }}</div> <div>{{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }}
</div>
<div style="width: 100%"> <div style="width: 100%">
<progress style="width: 80%;" :value="library.downloadNotification.progress" <progress style="width: 80%;" :value="library.downloadNotification.progress"
:max="library.downloadNotification.total"></progress> :max="library.downloadNotification.total"></progress>
@ -263,7 +273,8 @@
<div id="app-content"> <div id="app-content">
<div id="navigation-bar"> <div id="navigation-bar">
<button class="nav-item" @click="navigateBack()"><%- include('svg/chevron-left.svg') %></button> <button class="nav-item" @click="navigateBack()"><%- include('svg/chevron-left.svg') %></button>
<button class="nav-item" @click="navigateForward()"><%- include('svg/chevron-right.svg') %></button> <button class="nav-item"
@click="navigateForward()"><%- include('svg/chevron-right.svg') %></button>
</div> </div>
<!-- Artist Page --> <!-- Artist Page -->
<transition name="wpfade"> <transition name="wpfade">
@ -280,7 +291,8 @@
<!-- Collection List --> <!-- Collection List -->
<transition name="wpfade"> <transition name="wpfade">
<template v-if="page == 'collection-list'"> <template v-if="page == 'collection-list'">
<cider-collection-list :data="collectionList.response" :type="collectionList.type" :title="collectionList.title"></cider-collection-list> <cider-collection-list :data="collectionList.response" :type="collectionList.type"
:title="collectionList.title"></cider-collection-list>
</template> </template>
</transition> </transition>
<!-- Playlist / Album page--> <!-- Playlist / Album page-->
@ -403,7 +415,7 @@
</transition> </transition>
<!-- Library - Made For You --> <!-- Library - Made For You -->
<transition name="wpfade" v-on:enter="getMadeForYou()"> <transition name="wpfade" v-on:enter="getMadeForYou()">
<template v-if="page == 'library-madeforyou'" > <template v-if="page == 'library-madeforyou'">
<%- include('pages/madeforyou') %>'); <%- include('pages/madeforyou') %>');
%> %>
</template> </template>
@ -416,7 +428,7 @@
</template> </template>
</transition> </transition>
<transition name="wpfade"> <transition name="wpfade">
<template v-if="page.includes('appleCurator')" > <template v-if="page.includes('appleCurator')">
<cider-applecurator :data="appleCurator"></cider-applecurator> <cider-applecurator :data="appleCurator"></cider-applecurator>
</template> </template>
</transition> </transition>
@ -424,12 +436,19 @@
</div> </div>
<transition name="drawertransition"> <transition name="drawertransition">
<div class="app-drawer" v-if="drawer.open"> <div class="app-drawer" v-if="drawer.open">
<lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics"></lyrics-view> <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> <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
</div> </div>
</transition> </transition>
</div> </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"> <transition name="wpfade">
<img v-show="chrome.artworkReady" @load="chrome.artworkReady = true" class="bg-artwork" <img v-show="chrome.artworkReady" @load="chrome.artworkReady = true" class="bg-artwork"
> >
@ -450,15 +469,20 @@
fill-rule="nonzero"/> fill-rule="nonzero"/>
</svg> </svg>
</div> </div>
<div id="captions">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ? <div id="captions">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] &&
lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ? lyrics[currentLyricsLine].line ) ?
(lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "") : '')}} lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ? ((lyrics.length
> 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ?
(lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "") :
'')}}
</div> </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"> title="Picture-in-Picture">
<%- include("svg/fullscreen.svg") %> <%- include("svg/fullscreen.svg") %>
</div> </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"> title="Fullscreen">
<%- include("svg/fullscreen.svg") %> <%- include("svg/fullscreen.svg") %>
</div> </div>
@ -541,6 +565,8 @@
<%- include('components/animatedartwork-view') %> <%- include('components/animatedartwork-view') %>
<!-- Lyrics View --> <!-- Lyrics View -->
<%- include('components/lyrics-view') %> <%- include('components/lyrics-view') %>
<!-- Fullscreen View -->
<%- include('components/fullscreen') %>
<script src="musickit.js?v=1"></script> <script src="musickit.js?v=1"></script>
<script> <script>