oobe test

src/renderer/index.js

@@ -117,10 +117,9 @@ function fallbackinitMusicKit() {
   );
   request.send();
 }
-document.addEventListener("musickitloaded", function () {
+
-  console.log("MusicKit loaded");
-  // MusicKit global is now defined
 function initMusicKit() {
+
   let parsedJson = JSON.parse(this.responseText);
   MusicKit.configure({
     developerToken: parsedJson.token,
@@ -146,6 +145,7 @@ document.addEventListener("musickitloaded", function () {
   });
 }
 
+function capiInit() {
   const request = new XMLHttpRequest();
   request.timeout = 5000;
   request.addEventListener("load", initMusicKit);
@@ -156,13 +156,17 @@ document.addEventListener("musickitloaded", function () {
   };
   request.open("GET", "https://api.cider.sh/v1/");
   request.send();
+}
 
-  // check for widevine failure and reconfigure the instance.
+document.addEventListener("musickitloaded", function () {
+  if (showOobe()) return;
+  console.log("MusicKit loaded");
+  // MusicKit global is now defined
+  capiInit()
+});
 window.addEventListener("drmUnsupported", function () {
   initMusicKit();
 });
-});
-
 if ("serviceWorker" in navigator) {
   // Use the window load event to keep the page load performant
   window.addEventListener("load", () => {
@@ -287,6 +291,22 @@ function isJson(item) {
 
 webGPU().then();
 
+function showOobe() {
+  if (localStorage.getItem("mk-player-tsid") && localStorage.getItem("seenOOBE")) {
+    return false
+  } else {
+    function waitForApp() {
+      if (typeof app.init !== "undefined") {
+        app.oobeInit();
+      } else {
+        setTimeout(waitForApp, 250);
+      }
+    }
+    waitForApp();
+    return true
+  }
+}
+
 let screenWidth = screen.width;
 let screenHeight = screen.height;
 

src/renderer/less/pages.less

@@ -868,8 +868,7 @@
       transition: min-height 0.5s ease-in-out;
       min-height: 200px;
 
-      .playlistInfo {
+      .playlistInfo {}
-      }
 
       .mediaContainer {
         transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
@@ -1698,6 +1697,8 @@
       background   : #ffffff0d;
       border-radius: 20px;
       padding      : 3em;
+      overflow-y   : scroll;
+      overflow-x   : hidden;
 
       &.text {
         white-space: pre-wrap;
@@ -1716,31 +1717,46 @@
           border-radius: 10px;
           overflow     : hidden;
           cursor       : pointer;
-          transition: .25s all;
+          transition   : 0.25s all;
-          box-shadow: 0px 2px 6px rgb(0 0 0 / 25%);
+          box-shadow   : 0px 2px 6px rgba(0, 0, 0, 0.25);
+          width        : 450px;
+          margin       : 0 auto;
 
           .visualPreview {
             pointer-events: none;
             transition    : .25s all;
             width         : 100%;
-            filter: drop-shadow(0px 8px 6px rgb(0 0 0 / 30%));
+          }
+
+          .card-body {
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
           }
 
           .card-footer {
             font-size  : 1.25em;
             font-weight: 500;
+            position   : absolute;
+            bottom     : 0;
+            left       : 0;
+            width      : 100%;
+            border:0px;
+            text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+            font-weight: bold;
+          }
+
+          &.style-active {
+            outline: 4px solid var(--keyColor);
           }
 
 
 
           &:hover {
-            transform: scale(1.10) translateZ(-1px);
+            transform : scale(1.10) translateZ(-1px) translateY(10px);
             z-index   : 1;
             box-shadow: 0px 12px 16px rgb(0 0 0 / 25%);
-
-            .visualPreview {
-              transform: scale(1.5) translateZ(-1px);
-            }
           }
         }
       }

src/renderer/main/vueapp.js

@@ -628,7 +628,9 @@ const app = new Vue({
         },
         async init() {
             let self = this
-
+            if(!localStorage.getItem("seenOOBE")) {
+                localStorage.setItem("seenOOBE", 1)
+            }
             if (this.cfg.visual.styles.length != 0) {
                 await this.reloadStyles()
             }

src/renderer/views/pages/oobe.ejs

@@ -1,7 +1,7 @@
 <script type="text/x-template" id="cider-oobe">
     <div class="content-inner oobe">
 <!--        before_we_start-->
-        <transition name="wpfade">
+        <!-- <transition name=""> -->
             <div class="oobe-view" v-if="screen == 'before_we_start'">
                 <div class="oobe-header">
                     {{ getLz("oobe.amupsell.title") }}
@@ -13,10 +13,10 @@
                     </div>
                 </div>
             </div>
-        </transition>
+        <!-- </transition> -->
 
         <!--     Welcome   -->
-        <transition name="wpfade">
+        <!-- <transition name=""> -->
             <div class="oobe-view" v-if="screen == 'welcome'">
                 <div class="oobe-header">
                     {{ getLz("oobe.intro.title") }}
@@ -29,10 +29,10 @@
                     </div>
                 </div>
             </div>
-        </transition>
+        <!-- </transition> -->
 
         <!--     General   -->
-        <transition name="wpfade">
+        <!-- <transition name=""> -->
             <div class="oobe-view" v-if="screen == 'general'">
                 <div class="oobe-header">
                     {{ getLz("oobe.general.title") }}
@@ -45,10 +45,10 @@
                     </div>
                 </div>
             </div>
-        </transition>
+        <!-- </transition> -->
 
         <!--     Visual   -->
-        <transition name="wpfade">
+        <!-- <transition name=""> -->
             <div class="oobe-view" v-if="screen == 'visual'">
                 <div class="oobe-header">
                     {{ getLz("oobe.visual.title") }}
@@ -56,9 +56,9 @@
                 <div class="oobe-body visual">
                     <b-row>
                         <b-col>
-                            <div class="card bg-dark text-white stylePicker">
+                            <div class="card bg-dark text-white stylePicker" @click="$root.cfg.visual.directives.windowLayout = 'twopanel'" :class="{'style-active': ($root.cfg.visual.directives.windowLayout == 'twopanel')}">
                                 <div class="card-body">
-                                    <img class="visualPreview" src="./assets/oobe/ss1.png" alt="TEMP">
+                                    <img class="visualPreview" src="./assets/oobe/mojave.png" alt="TEMP">
                                 </div>
                                 <div class="card-footer">
                                     Mojave
@@ -66,9 +66,9 @@
                             </div>
                         </b-col>
                         <b-col>
-                            <div class="card bg-dark text-white stylePicker">
+                            <div class="card bg-dark text-white stylePicker" @click="$root.cfg.visual.directives.windowLayout = 'default'" :class="{'style-active': ($root.cfg.visual.directives.windowLayout == 'default')}">
                                 <div class="card-body">
-                                    <img class="visualPreview" src="./assets/oobe/ss2.png" alt="TEMP">
+                                    <img class="visualPreview" src="./assets/oobe/maverick.png" alt="TEMP">
                                 </div>
                                 <div class="card-footer">
                                     Maverick
@@ -85,10 +85,10 @@
                     </div>
                 </div>
             </div>
-        </transition>
+        <!-- </transition> -->
 
         <!--     Audio   -->
-        <transition name="wpfade">
+        <!-- <transition name=""> -->
             <div class="oobe-view" v-if="screen == 'audio'">
                 <div class="oobe-header">
                     {{ getLz("oobe.audio.title") }}
@@ -110,17 +110,39 @@
                                     </label>
                                 </div>
                             </div>
+                            <div class="md-option-line" v-show="$root.cfg.advanced.AudioContext === true">
+                                <div class="md-option-segment">
+                                    {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPE')}}
+                                    <br>
+                                    <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPE.description')}}</small>
+                                </div>
+                                <div class="md-option-segment md-option-segment_auto">
+                                    <input type="checkbox" v-model="$root.cfg.audio.maikiwiAudio.ciderPPE"
+                                           switch/>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="oobe-footer">
                     <div class="btn-group">
                         <div class="md-btn" @click="screen = 'visual'">{{ getLz("oobe.previous") }}</div>
-                        <div class="md-btn">{{ getLz("oobe.next") }}</div>
+                        <div class="md-btn" @click="signIn()">{{ getLz("oobe.next") }}</div>
                     </div>
                 </div>
             </div>
-        </transition>
+        <!-- </transition> -->
+        <div class="oobe-view" v-if="screen == 'signin'">
+            <div class="oobe-header">
+                Sign in with Apple Music
+            </div>
+            <div class="oobe-body">
+                <div class="blurb"></div>
+            </div>
+            <div class="oobe-footer">
+
+            </div>
+        </div>
     </div>
 </script>
 <script>
@@ -135,6 +157,14 @@
 
         },
         methods: {
+            signIn() {
+                if(localStorage.getItem("mk-player-tsid")) {
+                    localStorage.setItem("seenOOBE", 1)
+                    window.location.reload()
+                }
+                this.screen = "signin"
+                capiInit()
+            },
             getLz() {
                 return this.$root.getLz.apply(this.$root, arguments);
             }