From b6a730e202231be571712beb17096a7cf3e31478 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 29 Jun 2022 18:56:30 -0700
Subject: [PATCH] added immersive fullscreen experiment

---
 src/i18n/en_US.json                           |   1 +
 src/renderer/less/fullscreen.less             | 172 ++++++++++++++++++
 src/renderer/style.css                        |   5 +-
 src/renderer/views/components/fullscreen.ejs  |  21 ++-
 .../views/components/settings-window.ejs      |  15 ++
 src/renderer/views/pages/cider-playlist.ejs   |   3 +
 src/renderer/views/pages/search.ejs           |  17 ++
 7 files changed, 232 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
index a75588dd..032191ad 100644
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -205,6 +205,7 @@
   "term.zoomout" : "Zoom Out",
   "term.zoomreset" : "Reset Zoom",
   "term.fullscreen" : "Fullscreen",
+  "term.nowPlaying": "Now Playing",
   "home.syncFavorites": "Sync Favorites",
   "home.syncFavorites.gettingArtists": "Getting Favorited Artists...",
   "home.title": "Home",
diff --git a/src/renderer/less/fullscreen.less b/src/renderer/less/fullscreen.less
index 3c4ef17d..d1f7466e 100644
--- a/src/renderer/less/fullscreen.less
+++ b/src/renderer/less/fullscreen.less
@@ -19,6 +19,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  --chromeHeight1: 60px;
 
   .app-content-container {
     width:100%;
@@ -26,11 +27,102 @@
     #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);
+    background: var(--color1);
+    backdrop-filter: var(--glassFilter);
+    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       : 42px;
+      width: 90%;
 
+      .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;
+
+        &: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;
@@ -389,4 +481,84 @@
     }
 
   }
+
+  .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 .artwork {
+    width: 50px;
+    height: 50px;
+  }
+
+  .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-body {
+    flex: 1;
+  }
 }
diff --git a/src/renderer/style.css b/src/renderer/style.css
index 6b649983..8fbc9118 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -12074,7 +12074,7 @@ input[type=checkbox][switch]:checked:active::before {
   align-items: center;
   color: white;
 }
-.playback-button.navigation > svg {
+.playback-button.navigation > ._svg-icon {
   height: 16px;
   width: 16px;
   pointer-events: none;
@@ -14663,6 +14663,9 @@ input[type=checkbox][switch]:checked:active::before {
   padding-top: 48px;
   border-left: 1px solid var(--borderColor);
 }
+#hid___BV_tab_button__ {
+  display: none;
+}
 :root {
   --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
   --borderColor: rgba(200, 200, 200, 0.16);
diff --git a/src/renderer/views/components/fullscreen.ejs b/src/renderer/views/components/fullscreen.ejs
index 1d191de3..23704f20 100644
--- a/src/renderer/views/components/fullscreen.ejs
+++ b/src/renderer/views/components/fullscreen.ejs
@@ -12,6 +12,24 @@
                 </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="$root.getLz('term.search')" 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)">
@@ -180,7 +198,8 @@
             return {
                 app: this.$root,
                 tabMode: "lyrics",
-                video: null
+                video: null,
+                immersiveEnabled: app.cfg.advanced.experiments.includes("immersive-preview")
             }
         },
         async mounted() {
diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index d1614bdc..baac65f4 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -1220,6 +1220,21 @@
                                     </button>
                                 </div>
                             </div>
+
+                            <div class="md-option-line">
+                                <div class="md-option-segment">
+                                    Immersive Fullscreen Test
+                                </div>
+                                <div class="md-option-segment md-option-segment_auto">
+                                    <label>
+                                        <input type="checkbox"
+                                               v-model="app.cfg.advanced.experiments.includes('immersive-preview')"
+                                               @click="app.cfg.advanced.experiments.includes('immersive-preview') ? removeExperiment('immersive-preview') : addExperiment('immersive-preview')"
+                                               switch />
+                                    </label>
+                                </div>
+                            </div>
+
                             <div class="md-option-line">
                                 <div class="md-option-segment">
                                     {{$root.getLz('settings.option.experimental.unknownPlugin')}}
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 5860b1f1..eaae58b8 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -333,6 +333,9 @@
         },
         methods: {
             minClass(val) {
+                if(app.appMode == 'fullscreen') {
+                    return
+                }
                 if (val) {
                     this.classes = ["plmin"]
                 } else {
diff --git a/src/renderer/views/pages/search.ejs b/src/renderer/views/pages/search.ejs
index 966404e8..602b6c75 100644
--- a/src/renderer/views/pages/search.ejs
+++ b/src/renderer/views/pages/search.ejs
@@ -1,5 +1,22 @@
 <script type="text/x-template" id="cider-search">
     <div class="content-inner search-page">
+        <div class="search-input-container fs-search" v-if="$root.appMode == 'fullscreen'" >
+            <div class="search-input--icon"></div>
+            <input type="search" spellcheck="false" @focus="$root.search.showHints = true"
+                   @blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)"
+                   v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false" @input="$root.getSearchHints()"
+                   :placeholder="$root.getLz('term.search') + '...'" v-model="$root.search.term"
+                   class="search-input" />
+
+            <div class="search-hints-container" v-if="$root.search.showHints && $root.search.hints.length != 0">
+                <div class="search-hints">
+                    <button class="search-hint text-overflow-elipsis" v-for="hint in $root.search.hints"
+                            @click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint)">
+                        {{ hint }}
+                    </button>
+                </div>
+            </div>
+        </div>
         <div class="btn-group searchToggle">
             <button
                     @click="searchType = 'catalog'"