diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts
index 10b472da..fa4b37ae 100644
--- a/src/main/base/browserwindow.ts
+++ b/src/main/base/browserwindow.ts
@@ -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()}`
diff --git a/src/main/base/vcomponents.json b/src/main/base/vcomponents.json
index fcbc115c..9e59075c 100644
--- a/src/main/base/vcomponents.json
+++ b/src/main/base/vcomponents.json
@@ -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",
diff --git a/src/renderer/less/partyfullscreen.less b/src/renderer/less/partyfullscreen.less
new file mode 100644
index 00000000..73cd6b45
--- /dev/null
+++ b/src/renderer/less/partyfullscreen.less
@@ -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;
+}
\ No newline at end of file
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index b01fcf98..3a96b976 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -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 => {
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 99a94b71..ec75edbf 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -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");
diff --git a/src/renderer/views/app/app-navigation.ejs b/src/renderer/views/app/app-navigation.ejs
index 2f072641..f12ca2a7 100644
--- a/src/renderer/views/app/app-navigation.ejs
+++ b/src/renderer/views/app/app-navigation.ejs
@@ -157,7 +157,7 @@