oobe test

This commit is contained in:
booploops 2022-06-04 22:46:29 -07:00
parent d627a182e2
commit 4c1d9cdd5c
8 changed files with 836 additions and 768 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 164 KiB

View file

@ -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;

View file

@ -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;
box-shadow: 0px 2px 6px rgb(0 0 0 / 25%);
transition : 0.25s all;
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);
}
}
}
}

View file

@ -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()
}

View file

@ -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);
}