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

kinda worki

Browse source
This commit is contained in:
Amaru8 2022-07-15 13:24:28 +02:00
parent 2084654842
commit bead1af4c2
10 changed files with 675 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/main/base/browserwindow.ts
View file

@ -102,6 +102,7 @@ export class BrowserWindow {
"components/equalizer",
"components/add-to-playlist",
"components/queue",
"components/party-queue",
"components/mediaitem-scroller-horizontal",
"components/mediaitem-scroller-horizontal-large",
"components/mediaitem-scroller-horizontal-sp",
@ -117,6 +118,7 @@ export class BrowserWindow {
"components/listitem-horizontal",
"components/lyrics-view",
"components/fullscreen",
"components/party-fullscreen",
"components/miniplayer",
"components/castmenu",
"components/pathmenu",
@ -1357,6 +1359,12 @@ export class BrowserWindow {
});
ipcMain.on('get-remote-pair-ip-address', (_event, _) => { // Linux and Windows
let url = `http://${BrowserWindow.getIP()}:${this.remotePort}`;
BrowserWindow.win.webContents.send('send-remote-pair-ip-address', (`https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=${Buffer.from(encodeURI(url))}&bgcolor=250-35-59&color=235-235-235&margin=10`).toString());
});
if (process.platform === "darwin") { //macOS
app.setUserActivity('com.CiderCollective.remote.pair', {
ip: `${BrowserWindow.getIP()}`

2
src/main/base/vcomponents.json
View file

@ -43,6 +43,7 @@
"components/equalizer",
"components/add-to-playlist",
"components/queue",
"components/party-queue",
"components/mediaitem-scroller-horizontal",
"components/mediaitem-scroller-horizontal-large",
"components/mediaitem-scroller-horizontal-sp",
@ -57,6 +58,7 @@
"components/listitem-horizontal",
"components/lyrics-view",
"components/fullscreen",
"components/party-fullscreen",
"components/miniplayer",
"components/castmenu",
"components/pathmenu",

612
src/renderer/less/partyfullscreen.less Normal file
View file

@ -0,0 +1,612 @@
.party-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;
}
.party-fullscreen-view {
width: 100%;
height: 100%;
background: black;
display: flex;
justify-content: center;
align-items: center;
--chromeHeight1: 70px;
.app-content-container {
width:100%;
height:100%;
#app-content {
width:100%;
height:100%;
.fs-search {
.search-input--icon {
width: 4em;
background-size: 40%;
background-position: center;
}
input {
padding-left: 2em;
font-size: 2em;
border-radius: var(--mediaItemRadius)
}
}
}
}
.fs-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--chromeHeight1);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
.top-nav-group {
background : #1e1e1e99;
border : 1px solid lighten(@baseColor, 8);
border-radius: 12px;
display : flex;
height : 55px;
width: 90%;
backdrop-filter: var(--glassFilter);
.app-sidebar-item {
background-color: #1e1e1e00;
border-radius : 10px !important;
border : 0px;
min-width : 120px;
padding : 6px;
justify-content : center;
align-items : center;
margin : 0px;
height : 100%;
position : relative;
font-size: 1.1em;
font-weight: 500;
&:before {
--dist : 1px;
content : '';
position : absolute;
top : var(--dist);
left : var(--dist);
right : var(--dist);
bottom : var(--dist);
background-color: #fff;
opacity : 0;
border-radius : 10px;
transform : scale(0.5);
transition : transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
&:after {
display: none;
}
&:hover {
background-color: transparent;
&:before {
transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
opacity : .1;
transform : scale(1);
}
}
&.active {
background-color: transparent;
&:before {
opacity : .2;
transform: scale(1);
}
}
&.md-btn-primary {
box-shadow : 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8);
background-color: lighten(@baseColor, @colorMixRate * 5);
z-index : 1;
}
}
}
}
.fs-row {
flex-grow: 0.5;
}
.playback-button--small.active {
background-color: rgb(200 200 200 / 25%);
}
.playback-button--small {
opacity: 0.7;
}
.right-col {
height: 50vh;
}
.bg-artwork-container {
display: block !important;
}
@media only screen and (max-width: 1121px) {
.display--large {
display: flex !important;
}
}
.display--large {
display: flex;
.slider {
width: 100%;
z-index: 1;
}
.input-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%
}
.volume-button--small {
border-radius: 6px;
color: inherit;
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
height: 15px;
width: 30px;
border: 0px;
box-shadow: unset;
opacity: 0.70;
background-image: url("./assets/feather/volume-2.svg");
}
.volume-button--small:active {
transform: scale(0.9);
}
.volume-button--small.active {
background-image: url("./assets/feather/volume.svg");
}
input[type=range] {
-webkit-appearance: none;
height: 4px;
background: rgba(255, 255, 255, 0.4);
border-radius: 5px;
background-size: 70% 100%;
background-repeat: no-repeat;
&::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: rgb(50 50 50);
cursor: default;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
transition: all var(--appleTransition);
}
&::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2);
}
&::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
transform: scale(1);
}
&::-webkit-slider-runnable-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
}
}
.background {
position: absolute;
background-size: cover;
width: 100%;
height: 100%;
.bgArtworkMaterial {
position: absolute;
width: 100%;
height: 100%;
.bg-artwork-container {
z-index: unset;
}
.bg-artwork-container .bg-artwork {
filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
}
}
}
.lyrics-col {
height: 62vh;
display: flex;
justify-content: center;
align-content: center;
width: 80%;
::-webkit-scrollbar-thumb {
box-shadow: unset;
}
&:hover ::-webkit-scrollbar-thumb {
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
}
.no-lyrics {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.lyric-line {
font-size: 35px;
}
}
.queue-col {
margin-top: 50px;
.queue-title {
font-size: 14px;
}
.queue-panel > * {
z-index: 3;
}
.party-queue-body {
overflow: overlay;
}
.party-queue-subtitle {
font-size: 0.7em;
}
::-webkit-scrollbar-thumb {
box-shadow: unset;
}
&:hover ::-webkit-scrollbar-thumb {
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
}
}
.tab-toggles {
display: flex;
position: absolute;
bottom: 0;
right: 0;
width: 15vh;
height: 5vh;
justify-content: space-evenly;
.volume {
background-image: url("./assets/feathers/volume.svg");
padding: 0.5vh;
width: 2vh;
height: 2vh;
background-origin: content-box;
background-repeat: no-repeat;
}
.queue {
background-image: url("./assets/list.svg");
padding: 0.5vh;
width: 2.5vh;
height: 2.5vh;
background-origin: content-box;
background-repeat: no-repeat;
}
.lyrics {
background-image: url("./assets/quote-right.svg");
padding: 0.5vh;
width: 2.5vh;
height: 2.5vh;
background-origin: content-box;
background-repeat: no-repeat;
}
.active {
background-color: rgba(200, 200, 200, 0.7);
border-radius: 3px;
}
}
.artwork-col {
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
.controls-parents {
width: 50vh;
}
.app-playback-controls {
.song-artist, .song-name {
font-weight: 600;
text-align: center;
font-size: 0.9em;
height: 1.2em;
line-height: 0.9em;
overflow: hidden;
text-overflow: ellipsis;
max-width: 360px;
.song-name-normal {
height: inherit;
}
&.song-artist-marquee {
> marquee {
//margin-bottom: -3px;
}
}
}
.song-artist {
font-size: 0.875em;
font-weight: 400;
}
.song-name {
width: unset !important;
margin-top: 0.15vh;
display: -webkit-box;
line-height: 1.2;
text-overflow: ellipsis;
text-align: center;
}
}
.app-playback-controls .playback-info {
margin-top: 0.5vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
input[type="range"] {
width: 100%;
}
> div {
width: 100%;
text-align: center;
}
}
.app-playback-controls .song-progress {
@bgColor: transparent;
//height: 16px;
position: absolute;
bottom: -1.5vh;
left: 0px;
background: @bgColor;
.song-duration p {
font-weight: 400;
font-size: 10px;
height: 1.2em;
line-height: 1.3em;
overflow: hidden;
margin: 0 0 0 0.25em;
}
&:hover {
> input[type=range] {
&::-webkit-slider-thumb {
opacity: 1;
transform: scale(1);
z-index: 1;
}
}
}
input[type=range] {
appearance: none;
width: 100%;
height: 4px;
background-color: rgb(200 200 200 / 10%);
border-radius: 2px;
&::-webkit-slider-thumb {
opacity: 0;
transform: scale(0.5);
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 100%;
background: var(--songProgressColor);
cursor: default;
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
&::-moz-range-thumb {
width: 8px;
height: 8px;
border-radius: 100%;
background: var(--songProgressColor);
cursor: default;
}
}
}
.control-buttons {
margin-top: 2vh;
display: inline-flex;
width: 100%;
justify-content: center;
}
}
.cd-mediaitem-square {
font-size: 17px;
font-weight: 500;
}
.cd-mediaitem-square .artwork-container .artwork {
box-shadow: var(--mediaItemShadow-Shadow);
}
.cd-mediaitem-list-item {
height: 80px;
}
.cd-mediaitem-list-item .title {
font-size: 1.2em;
font-weight: 450;
}
.cd-mediaitem-list-item .subtitle {
font-size: 1.1em;
font-weight: 380;
}
.cd-mediaitem-list-item .duration {
font-size: 1.2em;
}
.cd-mediaitem-list-item .artwork {
width: 50px;
height: 50px;
}
.cd-btn-seeall {
font-size: 1.2em;
}
h1 {
font-size: 3em;
}
h3 {
font-size: 1.5rem;
}
.home-page .well.artistfeed-well {
height: 512px;
}
.header-text {
font-size: 3em;
height: 3em;
padding-left: 0.2em;
}
.grouping-container .grouping-btn {
font-size: 1.3em;
color: var(--textColor);
background-color: var(--sidebarColor);
font-weight: 600;
padding: 32px;
//box-shadow: var(--ciderShadow-Generic);
}
.content-inner.playlist-page {
display: flex;
flex-direction: row;
}
.playlist-page .playlist-display {
width: 100%;
max-width: 500px;
flex:1;
text-align: center;
.playlistInfo {
>.row {
justify-content: center;
}
}
.playlist-controls {
div {
width:100%;
}
}
}
.playlist-page .mediaContainer {
width: 30vh;
height: 30vh;
aspect-ratio: 1;
}
.playlist-page .playlist-display .playlistInfo .playlist-info {
gap: 16px;
margin-top: 40px;
}
.playlist-page .playlist-display .playlistInfo .playlist-hero {
transform: unset;
}
.artist-page .artist-header {
min-height: 60vh;
}
.artist-page .artist-image {
width: 20vh;
height: 20vh;
aspect-ratio: 1;
}
.artist-page.animated .artist-header {
min-height: 80vh;
}
.playlist-page .playlist-body {
flex: 1;
}
}
.party-qr-code {
margin: 10px;
border-radius: 20px;
}

17
src/renderer/main/vueapp.js
View file

@ -4491,6 +4491,23 @@ const app = new Vue({
app.appMode = 'player';
}
},
// TODO: Fix multiple modes. Currently both buttons open party mode.
partyFullscreen(flag) {
this.fullscreenState = flag;
if (flag) {
ipcRenderer.send('setFullScreen', true);
app.appMode = 'fullscreen';
document.addEventListener('keydown', event => {
if (event.key === 'Escape' && app.appMode === 'fullscreen') {
this.partyFullscreen(false);
}
});
} else {
ipcRenderer.send('setFullScreen', false);
app.appMode = 'player';
}
},
pip() {
document.querySelector('video#apple-music-video-player').requestPictureInPicture()
// .then(pictureInPictureWindow => {

1
src/renderer/style.less
View file

@ -2096,6 +2096,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
animation: unset !important;
}
@import url("less/partyfullscreen.less");
@import url("less/fullscreen.less");
@import url("less/miniplayer.less");

2
src/renderer/views/app/app-navigation.ejs
View file

@ -157,7 +157,7 @@
</transition>
<transition name="drawertransition">
<div class="app-drawer" v-if="drawer.open && drawer.panel == 'queue'">
<cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
<cider-party-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-party-queue>
</div>
</transition>
</div>

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

@ -116,6 +116,11 @@
{{ $root.getLz("term.fullscreenView") }}
</button>
</div>
<div>
<button class="md-btn md-btn-small" style="width: 100%; margin-top: 5px;" @click="drawer.open = false; partyFullscreen(true)">
Party Mode
</button>
</div>
</div>
</b-popover>
<div class="playback-info">

24
src/renderer/views/components/party-fullscreen.ejs
View file

@ -1,6 +1,12 @@
<script type="text/x-template" id="fullscreen-view">
<div class="fullscreen-view" tabindex="0">
<script type="text/x-template" id="party-fullscreen-view">
<div class="party-fullscreen-view" tabindex="0">
<div class="background">
<div style="margin-top: 10px; display: flex; justify-content: right;">
<div style="display: flex; flex-direction: column; align-items: center;">
Scan to add Music
<img id="qr" class="party-qr-code" src="https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=https%3A%2F%2Fcider.sh%2F&bgcolor=250-35-59&color=235-235-235&margin=10">
</div>
</div>
<div class="bgArtworkMaterial">
<div class="bg-artwork-container">
<img v-if="(app.cfg.visual.bg_artwork_rotation && app.animateBackground)" class="bg-artwork a"
@ -32,7 +38,7 @@
</div>
<div class="row fs-row" v-if="tabMode != 'catalog'">
<div class="col artwork-col">
<div class="artwork" @click="app.fullscreen(false)">
<div class="artwork" @click="app.partyFullscreen(false)">
<mediaitem-artwork
:size="600"
:video="video"
@ -138,7 +144,7 @@
</div>
</div>
<div class="queue-col">
<cider-queue ref="queue"></cider-queue>
<cider-party-queue ref="queue"></cider-party-queue>
</div>
</div>
</template>
@ -164,8 +170,8 @@
</script>
<script>
Vue.component('fullscreen-view', {
template: '#fullscreen-view',
Vue.component('party-fullscreen-view', {
template: '#party-fullscreen-view',
props: {
time: {
type: Number,
@ -221,6 +227,10 @@
this.video = null
}
}
ipcRenderer.send('get-remote-pair-ip-address')
ipcRenderer.on('send-remote-pair-ip-address', (event, url) => {
document.getElementById('qr').src = url;
})
},
beforeMount() {
window.addEventListener('keyup', this.onEscapeKeyUp);
@ -231,7 +241,7 @@
methods: {
onEscapeKeyUp(event) {
if (event.which === 27) {
app.fullscreen(false);
app.partyFullscreen(false);
console.log('js')
}
},

24
src/renderer/views/components/party-queue.ejs
View file

@ -1,9 +1,8 @@
<script type="text/x-template" id="cider-queue">
<script type="text/x-template" id="cider-party-queue">
<div class="queue-panel">
<div class="row">
<div class="col">
<h3 class="queue-header-text" v-if="page == 'queue'">{{app.getLz('term.queue')}}</h3>
<h3 class="queue-header-text" v-if="page == 'history'">{{app.getLz('term.history')}}</h3>
<h3 class="queue-header-text">{{app.getLz('term.queue')}}</h3>
</div>
<div class="col-auto flex-center">
<button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}"
@ -13,10 +12,7 @@
</button>
</div>
</div>
<div class="queue-body" v-if="page == 'history'">
<mediaitem-list-item :show-library-status="false" v-for="item in history" :item="item"></mediaitem-list-item>
</div>
<div class="queue-body" v-if="page == 'queue'">
<div class="party-queue-body">
<draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
<template v-for="(queueItem, position) in displayQueueItems">
<div class="cd-queue-item"
@ -32,7 +28,7 @@
</div>
<div class="col queue-info">
<div class="queue-title text-overflow-elipsis">{{ queueItem.item.attributes.name }}</div>
<div class="queue-subtitle text-overflow-elipsis">{{ queueItem.item.attributes.artistName }} — {{ queueItem.item.attributes.albumName }}</div>
<div class="party-queue-subtitle text-overflow-elipsis">{{ queueItem.item.attributes.artistName }} — {{ queueItem.item.attributes.albumName }}</div>
</div>
<div class="queue-explicit-icon flex-center" v-if="queueItem.item.attributes.contentRating == 'explicit'">
<div class="explicit-icon"></div>
@ -46,10 +42,6 @@
</draggable>
</div>
<div class="queue-footer">
<div class="btn-group" style="width:100%;">
<button class="md-btn md-btn-small" :class="{'md-btn-primary': (page == 'queue')}" @click="page = 'queue'">{{app.getLz('term.queue')}}</button>
<button class="md-btn md-btn-small" :class="{'md-btn-primary': (page == 'history')}" @click="getHistory();page = 'history'">{{app.getLz('term.history')}}</button>
</div>
<button class="md-btn md-btn-small" style="width:100%;margin-top:6px;" v-if="queueItems.length > 1" @click="app.mk.clearQueue();updateQueue()">{{app.getLz('term.clearAll')}}</button>
</div>
</div>
@ -57,8 +49,8 @@
<script>
Vue.component('cider-queue', {
template: '#cider-queue',
Vue.component('cider-party-queue', {
template: '#cider-party-queue',
data: function () {
return {
drag: false,
@ -82,10 +74,6 @@
this.updateQueue()
},
methods: {
async getHistory() {
let history = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`, { l : this.$root.mklang})
this.history = history.data.data
},
select(e, position) {
if (e.ctrlKey || e.shiftKey) {
if (this.selectedItems.indexOf(position) == -1) {

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

@ -90,6 +90,12 @@
:richlyrics="richlyrics"></fullscreen-view>
</div>
</transition>
<transition name="fsModeSwitch">
<div class="party-fullscreen-view-container" v-if="appMode == 'fullscreen'">
<party-fullscreen-view :image="currentArtUrlRaw" :time="mk.currentPlaybackTime - lyricOffset" :lyrics="lyrics"
:richlyrics="richlyrics"></party-fullscreen-view>
</div>
</transition>
<transition name="fsModeSwitch">
<div class="fullscreen-view-container" v-if="appMode == 'mini'">
<mini-view :image="currentArtUrlRaw" :time="mk.currentPlaybackTime - lyricOffset" :lyrics="lyrics" :richlyrics="richlyrics">