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

v0.0.1 fullscreen UI

Browse source
This commit is contained in:
yazninja 2022-08-08 12:51:31 +08:00
parent 53ff9426f3
commit 0a95f937be
3 changed files with 833 additions and 426 deletions
Download patch file Download diff file Expand all files Collapse all files

173
src/renderer/less/fullscreen.less
View file

@ -24,6 +24,7 @@
.app-content-container {
width : 100%;
height: 100%;
#app-content {
width : 100%;
height: 100%;
@ -34,6 +35,7 @@
background-size : 40%;
background-position: center;
}
input {
padding-left : 2em;
font-size : 2em;
@ -124,6 +126,174 @@
}
}
.nowplaying-page {
position : absolute;
bottom : 0;
left : 0;
right : 0;
width : 100%;
height : calc(100% - var(--chromeHeight1));
/* background-color: white; */
}
.nowplaying-row {
display : flex;
flex-direction : row;
justify-content: center;
align-items : center;
height : 100%;
width : 100%;
/* margin-top : calc(var(--chromeHeight1) * -1); */
}
.nowplaying-row>.artwork-col {
flex : 35%;
margin-top: calc(var(--chromeHeight1) * -1);
}
.nowplaying-row>.right-col {
flex : 65%;
height : 100%;
justify-content: center;
align-items : center;
display : flex;
}
.nowplaying-row>.right-col>.lyrics-col {
height: 90%;
width : 100%;
}
.nowplaying-row>.right-col>.lyrics-col>.lyric-body {
padding-top: 25vh !important;
}
.mediaitem-artwork {
border-radius: 1rem;
box-shadow : 0 0 25px rgba(0, 0, 0, 0.5);
}
.playback-info {
padding : 1rem;
color : #fff;
display : flex;
justify-content: center;
align-items : center;
flex-direction : column;
opacity : 1;
z-index : 2;
}
.song-name {
font-weight : bold;
opacity : 1;
display : flex;
flex-direction: row;
position : relative;
}
.song-artist {
opacity: 0.65;
}
.controls-parents {
display : flex;
position : fixed;
bottom : 0;
left : 0;
right : 0;
height : 15vh;
/* background-color: #fff; */
justify-content : center;
align-items : center;
flex-direction : column;
}
.controls-parents>.song-progress {
width : calc(100% - 6rem);
position: relative;
}
.controls-parents>.song-progress:hover .song-duration {
display : flex !important;
font-size : 12px;
opacity : 0.8;
margin-top: 0.5rem;
left : 0.25rem;
right : 0.25rem;
position : absolute;
}
.controls-parents>.song-progress>input {
--songProgressBackground: rgba(255, 255, 255, 0.25);
width : 100%;
border-radius : 100vmax;
appearance : none;
height : 0.5rem;
margin : 0;
transition : all 0.2s ease-in-out;
}
.controls-parents>.song-progress>input::-webkit-slider-thumb {
-webkit-appearance: none;
height : 0.5rem;
width : 1px;
border-radius : 0;
background : rgba(255, 255, 255, 0.75);
cursor : default;
}
.controls-parents .control-buttons {
display : flex;
flex-direction: row;
margin-block : 1rem;
}
.loadbar-sound,
.loadbar-sound::after,
.loadbar-sound::before {
animation : load-bar 1.3s ease infinite alternate;
box-sizing: border-box;
width : 2.5px;
height : 75%;
box-shadow: inset 0 -12px 0;
}
.loadbar-sound {
position : absolute;
transform : scale(var(--load-bar, 1));
color : var(--textColorLight);
display : flex;
margin-left: -15px;
}
.loadbar-sound::after,
.loadbar-sound::before {
content : "";
position: absolute;
bottom : 0;
}
.loadbar-sound::before {
left : -4.5px;
animation-delay: -2.4s;
}
.loadbar-sound::after {
right : -4.2px;
animation-delay: -3.7s;
}
div.volume {
display : flex;
width : 100%;
justify-content: flex-end;
}
.volume>.input-container {
width: 120px !important;
}
.fs-row {
flex-grow: 0.5;
}
@ -353,6 +523,7 @@
}
.app-playback-controls {
.song-artist,
.song-name {
font-weight : 600;
@ -561,11 +732,13 @@
}
}
}
.playlist-page .mediaContainer {
width : 30vh;
height : 30vh;
aspect-ratio: 1;
}
.playlist-page .playlist-display .playlistInfo .playlist-info {
gap : 16px;
margin-top: 40px;

259
src/renderer/views/components/fullscreen-orig.ejs Normal file
View file

@ -0,0 +1,259 @@
<script type="text/x-template" id="fullscreen-view">
<div class="fullscreen-view" tabindex="0">
<div class="background">
<div class="bgArtworkMaterial">
<div class="bg-artwork-container">
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork a"
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork b"
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
<img v-if="!(app.cfg.visual.bg_artwork_rotation && app.animateBackground)"
class="bg-artwork no-animation" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
</div>
</div>
</div>
<div class="fs-header" v-if="immersiveEnabled">
<div class="top-nav-group">
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('home.title')"
svg-icon="./assets/feather/home.svg" svg-icon-name="home" page="home">
</sidebar-library-item>
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.listenNow')"
svg-icon="./assets/feather/play-circle.svg" svg-icon-name="listenNow"
page="listen_now"></sidebar-library-item>
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.browse')"
svg-icon="./assets/feather/globe.svg" svg-icon-name="browse" page="browse">
</sidebar-library-item>
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.radio')"
svg-icon="./assets/feather/radio.svg" svg-icon-name="radio" page="radio">
</sidebar-library-item>
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.library')"
svg-icon="./assets/feather/radio.svg" svg-icon-name="library" page="library">
</sidebar-library-item>
<sidebar-library-item @click.native="tabMode = ''" :name="$root.getLz('term.nowPlaying')"
svg-icon="./assets/play.svg" svg-icon-name="nowPlaying" page="nowPlaying">
</sidebar-library-item>
<sidebar-library-item @click.native="tabMode = 'catalog'" name="" svg-icon="./assets/search.svg"
svg-icon-name="search" page="search">
</sidebar-library-item>
</div>
</div>
<div class="row fs-row" v-if="tabMode != 'catalog'">
<div class="col artwork-col">
<div class="artwork" @click="app.fullscreen(false)">
<mediaitem-artwork
:size="600"
:video="video"
:videoPriority="true"
:url="(image ?? '').replace('{w}','600').replace('{h}','600')"
></mediaitem-artwork>
</div>
<div class="controls-parents">
<template v-if="app.mkReady()">
<div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
@mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
<div class="playback-info">
<div class="song-name">
{{ app.mk.nowPlayingItem["attributes"]["name"] }}
</div>
<div
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden;">
<div class="item-navigate song-artist" style="display: inline-block;"
@click="app.getNowPlayingItemDetailed(`artist`) && app.fullscreen(false)">
{{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
</div>
<div class="song-artist" style="display: inline-block;">
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? " — " : "" }}
</div>
<div class="song-artist item-navigate" style="display: inline-block;"
@click="app.getNowPlayingItemDetailed('album') && app.fullscreen(false)">
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ?
(app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</div>
</div>
<div class="song-progress">
<div class="song-duration" style="justify-content: space-between; height: 1px;"
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
<p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
<p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
</div>
<input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
@input="app.playerLCD.desiredDuration = $event.target.value;app.playerLCD.userInteraction = true"
@mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
:max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
</div>
</div>
<div class="control-buttons">
<div class="app-chrome-item display--large">
<button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0"
:class="$root.isDisabled() && 'disabled'"
@click="$root.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
v-b-tooltip.hover></button>
<button class="playback-button--small shuffle active" v-else
:class="$root.isDisabled() && 'disabled'"
@click="$root.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="$root.prevButton()"
:class="$root.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="$root.mk.stop()"
v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
<button class="playback-button pause" @click="$root.mk.pause()"
v-else-if="$root.mk.isPlaying"
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
<button class="playback-button play" @click="$root.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="$root.skipToNextItem()"
:class="$root.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="$root.mk.repeatMode == 0"
:class="$root.isDisabled() && 'disabled'"
@click="$root.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="$root.isDisabled() && 'disabled'"
v-else-if="$root.mk.repeatMode == 1"
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
<button class="playback-button--small repeat active"
@click="$root.mk.repeatMode = 0"
:class="$root.isDisabled() && 'disabled'"
v-else-if="$root.mk.repeatMode == 2"
:title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</div>
</div>
<div class="app-chrome-item volume display--large">
<div class="input-container">
<button class="volume-button--small volume" @click="app.muteButtonPressed()"
:class="{'active': app.cfg.audio.volume == 0}"
:title="app.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover></button>
<input type="range" class="slider" @wheel="app.volumeWheel"
:step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume"
v-model="app.mk.volume"
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
</div>
</div>
</div>
</template>
</div>
<div class="col right-col" v-if="tabMode != ''">
<!-- <div class="fs-info">
<div>Name</div>
<div>Name</div>
<div>Name</div>
</div> -->
<div class="lyrics-col" v-if="tabMode == 'lyrics'">
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
:richlyrics="richlyrics"></lyrics-view>
</div>
<div class="queue-col" v-if="tabMode == 'queue'">
<cider-queue v-if="tabMode == 'queue'" ref="queue"></cider-queue>
</div>
</div>
</div>
<div class="app-content-container" v-else>
<app-content-area></app-content-area>
</div>
<div class="tab-toggles">
<div class="lyrics" :class="{active: tabMode == 'lyrics'}"
@click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
<div class="queue" :class="{active: tabMode == 'queue'}"
@click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
<div class="queue" :class="{active: tabMode == 'catalog'}"
v-if="false"
@click="tabMode = (tabMode == 'catalog') ? '' :'catalog'"></div>
</div>
</div>
</script>
<script>
Vue.component('fullscreen-view', {
template: '#fullscreen-view',
props: {
time: {
type: Number,
required: false
},
lyrics: {
type: Array,
required: false
},
richlyrics: {
type: Array,
required: false
},
image: {
type: String,
required: false
},
},
data: function() {
return {
app: this.$root,
tabMode: "lyrics",
video: null,
immersiveEnabled: app.cfg.advanced.experiments.includes("immersive-preview")
}
},
async mounted() {
if (app.mk.nowPlayingItem._container.type == "albums") {
try {
const result = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/${app.mk.nowPlayingItem._container.type}/${app.mk.nowPlayingItem._container.id}`, {
"fields": "editorialArtwork,editorialVideo",
})).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
if (result) {
this.video = result
} else {
this.video = null
}
} catch (e) {
this.video = null
e = null
}
} else if (app.mk.nowPlayingItem._container.type == "library-albums") {
try {
const result = (await app.mk.api.v3.music(`/v1/me/library/albums/${app.mk.nowPlayingItem._container.id}/catalog`
, { "fields": "editorialArtwork,editorialVideo" })).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
if (result) {
this.video = result
} else {
this.video = null
}
} catch (e) {
e = null
this.video = null
}
}
},
beforeMount() {
window.addEventListener('keyup', this.onEscapeKeyUp);
},
beforeDestroy() {
window.removeEventListener('keyup', this.onEscapeKeyUp)
},
methods: {
onEscapeKeyUp(event) {
if (event.which === 27) {
app.fullscreen(false);
console.log('js')
}
},
}
});
</script>

85
src/renderer/views/components/fullscreen.ejs
View file

@ -1,17 +1,5 @@
<script type="text/x-template" id="fullscreen-view">
<div class="fullscreen-view" tabindex="0">
<div class="background">
<div class="bgArtworkMaterial">
<div class="bg-artwork-container">
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork a"
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork b"
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
<img v-if="!(app.cfg.visual.bg_artwork_rotation && app.animateBackground)"
class="bg-artwork no-animation" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
</div>
</div>
</div>
<div class="fs-header" v-if="immersiveEnabled">
<div class="top-nav-group">
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('home.title')"
@ -37,22 +25,30 @@
</sidebar-library-item>
</div>
</div>
<div class="row fs-row" v-if="tabMode != 'catalog'">
<div class="nowplaying-page">
<div class="background">
<div class="bgArtworkMaterial">
<div class="bg-artwork-container">
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork a"
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork b"
:src="(image ?? '').replace('{w}','30').replace('{h}','30')">
<img v-if="!(app.cfg.visual.bg_artwork_rotation && app.animateBackground)"
class="bg-artwork no-animation" :src="(image ?? '').replace('{w}','30').replace('{h}','30')">
</div>
</div>
</div>
<div class="row nowplaying-row" v-if="tabMode != 'catalog'">
<div class="col artwork-col">
<div class="artwork" @click="app.fullscreen(false)">
<mediaitem-artwork
:size="600"
:video="video"
:videoPriority="true"
<mediaitem-artwork :size="600" :video="video" :videoPriority="true"
:url="(image ?? '').replace('{w}','600').replace('{h}','600')"
></mediaitem-artwork>
</div>
<div class="controls-parents">
<template v-if="app.mkReady()">
<div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
@mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
<div class="playback-info">
<div class="song-name">
<div class="loadbar-sound" v-if="app.mk.isPlaying"></div>
{{ app.mk.nowPlayingItem["attributes"]["name"] }}
</div>
<div
@ -70,7 +66,15 @@
(app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</div>
</div>
</div>
</div>
<div class="col right-col" v-if="tabMode != ''">
<div class="lyrics-col" v-if="tabMode == 'lyrics'">
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics" :richlyrics="richlyrics"></lyrics-view>
</div>
</div>
</div>
<div class="controls-parents">
<div class="song-progress">
<div class="song-duration" style="justify-content: space-between; height: 1px;"
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
@ -83,7 +87,6 @@
@mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
:max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
</div>
</div>
<div class="control-buttons">
<div class="app-chrome-item display--large">
<button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0"
@ -132,8 +135,6 @@
:title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</div>
</div>
<div class="app-chrome-item volume display--large">
<div class="input-container">
<button class="volume-button--small volume" @click="app.muteButtonPressed()"
@ -148,40 +149,14 @@
</div>
</div>
</div>
</template>
</div>
<div class="col right-col" v-if="tabMode != ''">
<!-- <div class="fs-info">
<div>Name</div>
<div>Name</div>
<div>Name</div>
</div> -->
<div class="lyrics-col" v-if="tabMode == 'lyrics'">
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
:richlyrics="richlyrics"></lyrics-view>
</div>
<div class="queue-col" v-if="tabMode == 'queue'">
<cider-queue v-if="tabMode == 'queue'" ref="queue"></cider-queue>
</div>
</div>
</div>
<div class="app-content-container" v-else>
<app-content-area></app-content-area>
</div>
<div class="tab-toggles">
<div class="lyrics" :class="{active: tabMode == 'lyrics'}"
@click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
<div class="queue" :class="{active: tabMode == 'queue'}"
@click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
<div class="queue" :class="{active: tabMode == 'catalog'}"
v-if="false"
@click="tabMode = (tabMode == 'catalog') ? '' :'catalog'"></div>
</div>
</div>
</div>
</div>
</script>
<style scoped>
</style>
<script>
Vue.component('fullscreen-view', {
template: '#fullscreen-view',