oobe test
This commit is contained in:
parent
d627a182e2
commit
4c1d9cdd5c
8 changed files with 836 additions and 768 deletions
BIN
src/renderer/assets/oobe/maverick.png
Normal file
BIN
src/renderer/assets/oobe/maverick.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 346 KiB |
BIN
src/renderer/assets/oobe/mojave.png
Normal file
BIN
src/renderer/assets/oobe/mojave.png
Normal file
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 |
|
@ -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;
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue