From bead1af4c20e2b6ec7d3e05d53b32b268b7239c2 Mon Sep 17 00:00:00 2001
From: Amaru8 <52407090+Amaru8@users.noreply.github.com>
Date: Fri, 15 Jul 2022 13:24:28 +0200
Subject: [PATCH] kinda worki

---
 src/main/base/browserwindow.ts                |   8 +
 src/main/base/vcomponents.json                |   2 +
 src/renderer/less/partyfullscreen.less        | 612 ++++++++++++++++++
 src/renderer/main/vueapp.js                   |  17 +
 src/renderer/style.less                       |   1 +
 src/renderer/views/app/app-navigation.ejs     |   2 +-
 src/renderer/views/app/chrome-top.ejs         |   5 +
 .../views/components/party-fullscreen.ejs     |  24 +-
 src/renderer/views/components/party-queue.ejs |  24 +-
 src/renderer/views/main.ejs                   |   6 +
 10 files changed, 675 insertions(+), 26 deletions(-)
 create mode 100644 src/renderer/less/partyfullscreen.less

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 @@
     </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>
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 948bb41a..0dbcc595 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -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">
diff --git a/src/renderer/views/components/party-fullscreen.ejs b/src/renderer/views/components/party-fullscreen.ejs
index afaca2b9..436c95dd 100644
--- a/src/renderer/views/components/party-fullscreen.ejs
+++ b/src/renderer/views/components/party-fullscreen.ejs
@@ -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')
                 }
             },
diff --git a/src/renderer/views/components/party-queue.ejs b/src/renderer/views/components/party-queue.ejs
index 1b7274f9..7b3d015d 100644
--- a/src/renderer/views/components/party-queue.ejs
+++ b/src/renderer/views/components/party-queue.ejs
@@ -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) {
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index b83e2b05..201afcf2 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -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">