setting up for potential hot reloadability
This commit is contained in:
booploops
parent
5309c987f0
commit
54515fea6b
2 changed files with 68 additions and 57 deletions
|
|
@ -245,6 +245,7 @@ const app = new Vue({
|
||||||
notyf: notyf,
|
notyf: notyf,
|
||||||
idleTimer: null,
|
idleTimer: null,
|
||||||
idleState: false,
|
idleState: false,
|
||||||
|
appVisible: true
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
cfg: {
|
cfg: {
|
||||||
|
|
@ -276,6 +277,12 @@ const app = new Vue({
|
||||||
}, false)
|
}, false)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
hotReload() {
|
||||||
|
this.appVisible = false
|
||||||
|
setTimeout(() => {
|
||||||
|
this.appVisible = true
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
setWindowHash(route = "") {
|
setWindowHash(route = "") {
|
||||||
window.location.hash = `#${route}`;
|
window.location.hash = `#${route}`;
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -2,23 +2,23 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin />
|
<link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin/>
|
||||||
<link rel="preconnect" href="https://api.music.apple.com/" crossorigin />
|
<link rel="preconnect" href="https://api.music.apple.com/" crossorigin/>
|
||||||
<link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin />
|
<link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin/>
|
||||||
<link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin />
|
<link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin/>
|
||||||
<link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin />
|
<link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin/>
|
||||||
<link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin />
|
<link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin/>
|
||||||
<link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin />
|
<link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin/>
|
||||||
<link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin />
|
<link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin/>
|
||||||
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin />
|
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin/>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||||
<title>Cider</title>
|
<title>Cider</title>
|
||||||
<link rel="stylesheet/less" type="text/css" href="style.less" />
|
<link rel="stylesheet/less" type="text/css" href="style.less"/>
|
||||||
<link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less" />
|
<link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>
|
||||||
<script src="./lib/less.js"></script>
|
<script src="./lib/less.js"></script>
|
||||||
<script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js" ) %>"></script>
|
<script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js") %>"></script>
|
||||||
<script src="./lib/vue-horizontal.js"></script>
|
<script src="./lib/vue-horizontal.js"></script>
|
||||||
<script src="./lib/smoothscroll.js"></script>
|
<script src="./lib/smoothscroll.js"></script>
|
||||||
<script src="./lib/vuex.min.js"></script>
|
<script src="./lib/vuex.min.js"></script>
|
||||||
|
|
@ -55,7 +55,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#LOADER>svg {
|
#LOADER > svg {
|
||||||
width: 128px;
|
width: 128px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -67,56 +67,60 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>" platform="<%= env.platform %>">
|
<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>"
|
||||||
<div id="LOADER">
|
platform="<%= env.platform %>">
|
||||||
<%- include("../assets/cider-round.svg") %>
|
<div id="LOADER">
|
||||||
</div>
|
<%- include("../assets/cider-round.svg") %>
|
||||||
<div id="app" :class="getAppClasses()"
|
</div>
|
||||||
:window-state="chrome.windowState"
|
<div id="app" :class="getAppClasses()"
|
||||||
:style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout">
|
v-if="appVisible"
|
||||||
<transition name="fsModeSwitch">
|
:window-state="chrome.windowState"
|
||||||
<div id="app-main" v-show="appMode == 'player'">
|
:style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)"
|
||||||
<%- include('app/chrome-top'); %>
|
:window-style="cfg.visual.directives.windowLayout">
|
||||||
<%- include('app/app-navigation'); %>
|
<transition name="fsModeSwitch">
|
||||||
<%- include('app/chrome-bottom'); %>
|
<div id="app-main" v-show="appMode == 'player'">
|
||||||
</div>
|
<%- include('app/chrome-top'); %>
|
||||||
</transition>
|
<%- include('app/app-navigation'); %>
|
||||||
<transition name="fsModeSwitch">
|
<%- include('app/chrome-bottom'); %>
|
||||||
<div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
|
</div>
|
||||||
<fullscreen-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics"
|
</transition>
|
||||||
:richlyrics="richlyrics"></fullscreen-view>
|
<transition name="fsModeSwitch">
|
||||||
</div>
|
<div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
|
||||||
</transition>
|
<fullscreen-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics"
|
||||||
<transition name="fsModeSwitch">
|
:richlyrics="richlyrics"></fullscreen-view>
|
||||||
<div class="fullscreen-view-container" v-if="appMode == 'mini'">
|
</div>
|
||||||
<mini-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics">
|
</transition>
|
||||||
</mini-view>
|
<transition name="fsModeSwitch">
|
||||||
</div>
|
<div class="fullscreen-view-container" v-if="appMode == 'mini'">
|
||||||
</transition>
|
<mini-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics">
|
||||||
<transition name="fsModeSwitch">
|
</mini-view>
|
||||||
<div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
|
</div>
|
||||||
<cider-oobe></cider-oobe>
|
</transition>
|
||||||
</div>
|
<transition name="fsModeSwitch">
|
||||||
</transition>
|
<div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
|
||||||
<%- include('app/panels'); %>
|
<cider-oobe></cider-oobe>
|
||||||
<div class="cursor" v-if="chrome.showCursor"></div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
|
<%- include('app/panels'); %>
|
||||||
|
<div class="cursor" v-if="chrome.showCursor"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<% for(var i=0; i < Object.keys(env.components).length ; i++) {%>
|
<% for(var i = 0; i < Object.keys(env.components).length ; i++) { %>
|
||||||
<%- include(env.components[i]); %>
|
<%- include(env.components[i]); %>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
|
<script async
|
||||||
|
src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js") %>"
|
||||||
|
data-web-components>
|
||||||
|
</script>
|
||||||
|
<script src="index.js?v=1"></script>
|
||||||
|
|
||||||
<script async src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js" ) %>" data-web-components>
|
<script type="text/x-template" id="am-musiccovershelf">
|
||||||
</script>
|
|
||||||
<script src="index.js?v=1"></script>
|
|
||||||
|
|
||||||
<script type="text/x-template" id="am-musiccovershelf">
|
|
||||||
<h1>{{ component.attributes.title.stringForDisplay }}</h1>
|
<h1>{{ component.attributes.title.stringForDisplay }}</h1>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Sidebar Item -->
|
<!-- Sidebar Item -->
|
||||||
<script type="text/x-template" id="sidebar-library-item">
|
<script type="text/x-template" id="sidebar-library-item">
|
||||||
<button class="app-sidebar-item"
|
<button class="app-sidebar-item"
|
||||||
:class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
|
:class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
|
||||||
<div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div>
|
<div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue