okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added bootbox, moved some files in renderer

Browse source
This commit is contained in:
booploops 2022-01-21 19:16:15 -08:00
parent 5804e1e52d
commit 0cd8293472
17 changed files with 1355 additions and 12617 deletions
Download patch file Download diff file Expand all files Collapse all files

0
src/renderer/WSAPI_Interop.js → src/renderer/js/WSAPI_Interop.js
View file

1
src/renderer/js/bootbox.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

7
src/renderer/js/bootstrap.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

4
src/renderer/js/jquery-3.2.1.slim.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

0
src/renderer/less.js → src/renderer/js/less.js
View file

5
src/renderer/js/popper.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

0
src/renderer/sortable.min.js → src/renderer/js/sortable.min.js vendored
View file

0
src/renderer/vue-observe-visibility.min.js → src/renderer/js/vue-observe-visibility.min.js vendored
View file

0
src/renderer/vue.dev.js → src/renderer/js/vue.dev.js
View file

0
src/renderer/vue.js → src/renderer/js/vue.js
View file

0
src/renderer/vuedraggable.umd.min.js → src/renderer/js/vuedraggable.umd.min.js vendored
View file

0
src/renderer/vuex.min.js → src/renderer/js/vuex.min.js vendored
View file

1091
src/renderer/less/bootstrap.less vendored Normal file
View file

File diff suppressed because it is too large Load diff

1
src/renderer/style.less
View file

@ -5,6 +5,7 @@
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
@import url("less/bootstrap.less");
:root { :root {
--appleEase: cubic-bezier(0.42, 0, 0.58, 1); --appleEase: cubic-bezier(0.42, 0, 0.58, 1);

12492
src/renderer/vibrant.min.js vendored
View file

File diff suppressed because it is too large Load diff

82
src/renderer/views/components/cider-modal.ejs Normal file
View file

@ -0,0 +1,82 @@
<script type="text/x-template" id="add-to-playlist">
<template>
<div class="modal-fullscreen modal-generic" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">Add to Playlist</div>
<button class="close-btn" @click="app.resetState()"></button>
</div>
<div class="modal-content">
<button class="playlist-item"
:class="{ focused: playlist.id == focused }"
@click="addToPlaylist(playlist.id)" style="width:100%;" v-for="playlist in playlistSorted" v-if="playlist.attributes.canEdit && playlist.type != 'library-playlist-folders'">
<div class="icon"><%- include("../svg/playlist.svg") %></div>
<div class="name">{{ playlist.attributes.name }}</div>
</button>
</div>
<div class="modal-search">
<div class="search-input-container" style="width:100%;margin: 16px 0;">
<div class="search-input--icon"></div>
<input type="search"
ref="searchInput"
style="width:100%;"
spellcheck="false"
placeholder="Search..."
v-model="searchQuery"
@input="search()"
class="search-input">
</div>
</div>
</div>
</div>
</template>
</script>
<script>
Vue.component('add-to-playlist', {
template: '#add-to-playlist',
data: function () {
return {
playlistSorted: [],
searchQuery: "",
focused: "",
app: this.$root,
}
},
props: {
playlists: {
type: Array,
required: true
}
},
mounted() {
this.search()
this.$refs.searchInput.focus()
this.$refs.searchInput.addEventListener('keydown', (e) => {
if (e.keyCode == 13) {
if (this.focused != "") {
this.addToPlaylist(this.focused)
}
}
})
},
methods: {
addToPlaylist(id) {
app.addSelectedToPlaylist(id)
},
search() {
this.focused = ""
if (this.searchQuery == "") {
this.playlistSorted = this.playlists
} else {
this.playlistSorted = this.playlists.filter(playlist => {
return playlist.attributes.name.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1
})
if (this.playlistSorted.length == 1) {
this.focused = this.playlistSorted[0].id
}
}
},
}
});
</script>

289
src/renderer/views/main.ejs
View file

@ -16,17 +16,19 @@
<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"/>
<script src="less.js"></script> <script src="./js/less.js"></script>
<script src="<%- (env.dev ? "vue.js" : "vue.dev.js") %>"></script> <script src="<%- (env.dev ? "./js/vue.js" : "./js/vue.dev.js") %>"></script>
<script src="vuex.min.js"></script> <script src="./js/vuex.min.js"></script>
<script src="sortable.min.js"></script> <script src="./js/sortable.min.js"></script>
<script src="vue-observe-visibility.min.js"></script> <script src="./js/vue-observe-visibility.min.js"></script>
<script src="sortable.min.js"></script> <script src="./js/vuedraggable.umd.min.js"></script>
<script src="vibrant.min.js"></script>
<script src="vuedraggable.umd.min.js"></script>
<link rel="manifest" href="./manifest.json?v=2"> <link rel="manifest" href="./manifest.json?v=2">
<script src="https://js-cdn.music.apple.com/hls.js/2.141.0/hls.js/hls.js"></script> <script src="https://js-cdn.music.apple.com/hls.js/2.141.0/hls.js/hls.js"></script>
<script src="hlscider.js"></script> <script src="hlscider.js"></script>
<script src="./js/jquery-3.2.1.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootbox.min.js"></script>
</head> </head>
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>"> <body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
@ -40,7 +42,8 @@
<div class="window-controls"> <div class="window-controls">
<div class="close" @click="ipcRenderer.send('close')"></div> <div class="close" @click="ipcRenderer.send('close')"></div>
<div class="minimize" @click="ipcRenderer.send('minimize')"></div> <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
<div class="minmax restore" v-if="chrome.maximized" @click="ipcRenderer.send('maximize')"> <div class="minmax restore" v-if="chrome.maximized"
@click="ipcRenderer.send('maximize')">
</div> </div>
<div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div> <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
</div> </div>
@ -83,21 +86,23 @@
</div> </div>
<div class="playback-info"> <div class="playback-info">
<div class="song-name" style="-webkit-box-orient: horizontal;" <div class="song-name" style="-webkit-box-orient: horizontal;"
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']" :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']"
:style="[mk.nowPlayingItem['attributes']['contentRating'] == 'explicit' ? {'margin-left' : '23px'} : {'margin-left' : '0px'} ]"> :style="[mk.nowPlayingItem['attributes']['contentRating'] == 'explicit' ? {'margin-left' : '23px'} : {'margin-left' : '0px'} ]">
{{ mk.nowPlayingItem["attributes"]["name"] }} {{ mk.nowPlayingItem["attributes"]["name"] }}
<div class="explicit-icon" <div class="explicit-icon"
v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'" v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
style="display: inline-block"></div> style="display: inline-block"></div>
</div> </div>
<div class="song-artist" :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-artist') ? 'marquee' : '']" <div class="song-artist"
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-artist') ? 'marquee' : '']"
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;"> style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
<div class="item-navigate song-artist" style="display: inline-block" <div class="item-navigate song-artist" style="display: inline-block"
@click="getNowPlayingItemDetailed(`artist`)"> @click="getNowPlayingItemDetailed(`artist`)">
{{ mk.nowPlayingItem["attributes"]["artistName"] }} {{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div> </div>
<div class="song-artist item-navigate" style="display: inline-block" <div class="song-artist item-navigate" style="display: inline-block"
@click="getNowPlayingItemDetailed('album')" v-if="mk.nowPlayingItem['attributes']['albumName'] != ''"> @click="getNowPlayingItemDetailed('album')"
v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
<div class="separator" style="display: inline-block;">{{"—"}}</div> <div class="separator" style="display: inline-block;">{{"—"}}</div>
{{(mk.nowPlayingItem["attributes"]["albumName"]) ? {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }} (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
@ -105,10 +110,12 @@
</div> </div>
<div class="song-progress"> <div class="song-progress">
<div class="song-duration" style="justify-content: space-between; height: 1px;" <div class="song-duration"
style="justify-content: space-between; height: 1px;"
:style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]"> :style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
<p style="width: auto">{{ convertToMins(getSongProgress()) }}</p> <p style="width: auto">{{ convertToMins(getSongProgress()) }}</p>
<p style="width: auto">{{ convertToMins(mk.currentPlaybackDuration) }}</p> <p style="width: auto">{{ convertToMins(mk.currentPlaybackDuration) }}
</p>
</div> </div>
<input type="range" step="0.01" min="0" :style="progressBarStyle()" <input type="range" step="0.01" min="0" :style="progressBarStyle()"
@ -132,11 +139,10 @@
</div> </div>
<div class="app-chrome--right"> <div class="app-chrome--right">
<div class="app-chrome-item volume display--large"> <div class="app-chrome-item volume display--large">
<button class="volume-button--small volume" @click="muteButtonPressed()" :class="{'active': this.cfg.audio.volume == 0}"></button> <button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
v-model="mk.volume" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()">
v-if="typeof mk.volume != 'undefined'"
@change="checkMuteChange()">
</div> </div>
<div class="app-chrome-item generic" v-if="false"> <div class="app-chrome-item generic" v-if="false">
<button class="playback-button--small"> <button class="playback-button--small">
@ -149,7 +155,8 @@
</div> </div>
<div class="app-chrome-item generic"> <div class="app-chrome-item generic">
<template v-if="lyrics && lyrics != [] && lyrics.length > 0"> <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
<button class="playback-button--small lyrics" :class="{'active': drawer.panel == 'lyrics'}" <button class="playback-button--small lyrics"
:class="{'active': drawer.panel == 'lyrics'}"
@click="invokeDrawer('lyrics')"></button> @click="invokeDrawer('lyrics')"></button>
</template> </template>
@ -157,7 +164,8 @@
<div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'right'"> <div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'right'">
<div class="window-controls"> <div class="window-controls">
<div class="minimize" @click="ipcRenderer.send('minimize')"></div> <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
<div class="minmax restore" v-if="chrome.maximized" @click="ipcRenderer.send('maximize')"> <div class="minmax restore" v-if="chrome.maximized"
@click="ipcRenderer.send('maximize')">
</div> </div>
<div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div> <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
<div class="close" @click="ipcRenderer.send('close')"></div> <div class="close" @click="ipcRenderer.send('close')"></div>
@ -173,11 +181,9 @@
<input type="search" spellcheck="false" @click="showSearch()" <input type="search" spellcheck="false" @click="showSearch()"
@focus="search.showHints = true" @focus="search.showHints = true"
@blur="setTimeout(()=>{search.showHints = false}, 300)" @blur="setTimeout(()=>{search.showHints = false}, 300)"
v-on:keyup.enter="searchQuery();search.showHints = false" v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
@change="showSearch();" @input="getSearchHints()" placeholder="Search..." @input="getSearchHints()" placeholder="Search..." v-model="search.term"
v-model="search.term" ref="searchInput" class="search-input">
ref="searchInput"
class="search-input">
</div> </div>
</div> </div>
<div class="search-hints-container" v-if="search.showHints && search.hints.length != 0"> <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
@ -192,17 +198,17 @@
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Cider Cider
</div> </div>
<sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg" <sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg" page="home">
page="home"></sidebar-library-item> </sidebar-library-item>
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Apple Music Apple Music
</div> </div>
<sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg" <sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg"
page="listen_now"></sidebar-library-item> page="listen_now"></sidebar-library-item>
<sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg" <sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg" page="browse">
page="browse"></sidebar-library-item> </sidebar-library-item>
<sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg" <sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg" page="radio">
page="radio"></sidebar-library-item> </sidebar-library-item>
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Library Library
</div> </div>
@ -214,13 +220,13 @@
page="library-albums"></sidebar-library-item> page="library-albums"></sidebar-library-item>
<sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg" <sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg"
page="library-artists"></sidebar-library-item> page="library-artists"></sidebar-library-item>
<sidebar-library-item name="Podcasts" svg-icon="./assets/feather/mic.svg" <sidebar-library-item name="Podcasts" svg-icon="./assets/feather/mic.svg" page="podcasts">
page="podcasts"></sidebar-library-item> </sidebar-library-item>
<div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu"> <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
Playlists Playlists
</div> </div>
<sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item">
:item="item"></sidebar-playlist> </sidebar-playlist>
</div> </div>
<transition name="wpfade"> <transition name="wpfade">
<div class="usermenu-container" v-if="chrome.menuOpened"> <div class="usermenu-container" v-if="chrome.menuOpened">
@ -294,22 +300,21 @@
@click="mk.repeatMode = 1"></button> @click="mk.repeatMode = 1"></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2" <button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button> v-else-if="mk.repeatMode == 1"></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0" <button class="playback-button--small repeat repeatOne"
v-else-if="mk.repeatMode == 2"></button> @click="mk.repeatMode = 0" v-else-if="mk.repeatMode == 2"></button>
</div> </div>
</div> </div>
<div class="app-chrome-item volume"> <div class="app-chrome-item volume">
<div class="input-container"> <div class="input-container">
<button class="volume-button--small volume" @click="muteButtonPressed()" :class="{'active': this.cfg.audio.volume == 0}"></button> <button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
v-model="mk.volume" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
v-if="typeof mk.volume != 'undefined'"
@change="checkMuteChange()"> @change="checkMuteChange()">
</div> </div>
</div> </div>
</div> </div>
<button class="app-sidebar-button" style="width:100%" <button class="app-sidebar-button" style="width:100%" :class="{active: chrome.menuOpened}"
:class="{active: chrome.menuOpened}"
@blur="setTimeout(()=>{chrome.menuOpened = false}, 100)" @blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"
@click="(chrome.userinfo.id) ? chrome.menuOpened = !chrome.menuOpened : false"> @click="(chrome.userinfo.id) ? chrome.menuOpened = !chrome.menuOpened : false">
@ -318,9 +323,11 @@
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo"> <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
<template v-if="chrome.userinfo.id"> <template v-if="chrome.userinfo.id">
<div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }} <div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name
}}
</div> </div>
<div class="handle-text text-overflow-elipsis">{{ chrome.userinfo.attributes.handle <div class="handle-text text-overflow-elipsis">{{
chrome.userinfo.attributes.handle
}} }}
</div> </div>
</template> </template>
@ -335,7 +342,8 @@
</div> </div>
</button> </button>
</div> </div>
<div class="app-sidebar-notification libraryNotification" v-if="library.downloadNotification.show"> <div class="app-sidebar-notification libraryNotification"
v-if="library.downloadNotification.show">
<div class="message">{{ library.downloadNotification.message }} ({{ <div class="message">{{ library.downloadNotification.message }} ({{
library.downloadNotification.progress }} / {{ library.downloadNotification.total }}) library.downloadNotification.progress }} / {{ library.downloadNotification.total }})
</div> </div>
@ -343,9 +351,12 @@
</div> </div>
<div id="app-content"> <div id="app-content">
<div id="navigation-bar"> <div id="navigation-bar">
<button class="nav-item" @click="navigateBack()"><%- include('svg/chevron-left.svg') %></button> <button class="nav-item" @click="navigateBack()">
<button class="nav-item" <%- include('svg/chevron-left.svg') %>
@click="navigateForward()"><%- include('svg/chevron-right.svg') %></button> </button>
<button class="nav-item" @click="navigateForward()">
<%- include('svg/chevron-right.svg') %>
</button>
</div> </div>
<!-- Podcasts --> <!-- Podcasts -->
@ -425,53 +436,53 @@
<template v-if="page == 'browse'"> <template v-if="page == 'browse'">
<!-- <div class="content-inner"> <!-- <div class="content-inner">
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
MusicKit MusicKit
</button> </button>
<button id="apple-music-unauthorize" class="md-btn md-btn-primary" <button id="apple-music-unauthorize" class="md-btn md-btn-primary"
@click="unauthorize()"> @click="unauthorize()">
Stop Stop
MusicKit MusicKit
</button> </button>
<br>
<template v-if="mk.nowPlayingItem">
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
<br> <br>
<template v-if="mk.nowPlayingItem"> currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }} </template>
<br> <div><input type="text" v-model="quickPlayQuery">
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }} <button @click="quickPlay(quickPlayQuery)">Play</button>
</template> </div>
<div><input type="text" v-model="quickPlayQuery"> <h1 class="header-text">Browse</h1>
<button @click="quickPlay(quickPlayQuery)">Play</button> <p>
</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu
<h1 class="header-text">Browse</h1> tincidunt
<p> consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu </p>
tincidunt <div class="media-item--small">
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi. <div class="artwork">
</p>
<div class="media-item--small">
<div class="artwork">
</div>
<div class="text">
Text
</div>
<div class="subtext">
Subtext
</div>
</div> </div>
<br> <div class="text">
<br> Text
<h1 class="header-text">Listen Now</h1>
<div class="winbox">
<div class="fancy">990kbps</div>
<div class="">
<button class="md-btn md-btn-primary">Audio Quality Settings</button>
</div>
</div> </div>
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button> <div class="subtext">
<button class="md-btn">Button</button> Subtext
<button class="md-btn md-btn-primary">Button</button> </div>
</div> --> </div>
<br>
<br>
<h1 class="header-text">Listen Now</h1>
<div class="winbox">
<div class="fancy">990kbps</div>
<div class="">
<button class="md-btn md-btn-primary">Audio Quality Settings</button>
</div>
</div>
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
<button class="md-btn">Button</button>
<button class="md-btn md-btn-primary">Button</button>
</div> -->
<cider-browse :data="browsepage"></cider-browse> <cider-browse :data="browsepage"></cider-browse>
</template> </template>
</transition> </transition>
@ -577,10 +588,8 @@
<transition name="wpfade"> <transition name="wpfade">
<div class="bg-artwork-container" v-if="cfg.visual.window_background_style == 'artwork'" <div class="bg-artwork-container" v-if="cfg.visual.window_background_style == 'artwork'"
:class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}"> :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
<img @load="chrome.artworkReady = true" class="bg-artwork a " <img @load="chrome.artworkReady = true" class="bg-artwork a ">
> <img class="bg-artwork b">
<img class="bg-artwork b"
>
</div> </div>
</transition> </transition>
<transition name="wpfade"> <transition name="wpfade">
@ -604,9 +613,11 @@
</div> </div>
<div id="captions">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] && <div id="captions">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] &&
lyrics[currentLyricsLine].line ) ? lyrics[currentLyricsLine].line ) ?
lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ? ((lyrics.length lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ?
((lyrics.length
> 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ? > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ?
(lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "") : (lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "")
:
'')}} '')}}
</div> </div>
<div id="player-pip" <div id="player-pip"
@ -670,12 +681,14 @@
<!-- About --> <!-- About -->
<%- include('pages/about') %> <%- include('pages/about') %>
<script type="text/x-template" id="am-musiccovershelf"> <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.appRoute(page)"> :class="$parent.getSidebarItemClass(page)" @click="$root.appRoute(page)">
<div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div> <div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div>
@ -688,54 +701,80 @@
<!-- Menu Panel --> <!-- Menu Panel -->
<%- include('components/menu-panel') %> <%- include('components/menu-panel') %>
<!-- Playlist Listing --> <!-- Playlist Listing -->
<%- include('components/sidebar-playlist') %> <%- include('components/sidebar-playlist')
%>
<!-- Spatial Properties --> <!-- Spatial Properties -->
<%- include('components/spatial-properties') %> <%- include('components/spatial-properties')
%>
<!-- Add to playlist --> <!-- Add to playlist -->
<%- include('components/add-to-playlist') %> <%- include('components/add-to-playlist')
%>
<!-- Queue --> <!-- Queue -->
<%- include('components/queue') %> <%- include('components/queue')
%>
<!-- Queue Item --> <!-- Queue Item -->
<%- include('components/queue-item') %> <%- include('components/queue-item')
%>
<!-- Horizontal MediaItem Scroller --> <!-- Horizontal MediaItem Scroller -->
<%- include('components/mediaitem-scroller-horizontal') %> <%- include('components/mediaitem-scroller-horizontal')
%>
<!-- Horizontal MediaItem Scroller (Large) --> <!-- Horizontal MediaItem Scroller (Large) -->
<%- include('components/mediaitem-scroller-horizontal-large') %> <%- include('components/mediaitem-scroller-horizontal-large')
%>
<!-- Horizontal MediaItem Scroller (SP : Special) --> <!-- Horizontal MediaItem Scroller (SP : Special) -->
<%- include('components/mediaitem-scroller-horizontal-sp') %> <%- include('components/mediaitem-scroller-horizontal-sp')
%>
<!-- Horizontal MediaItem Scroller (MV) --> <!-- Horizontal MediaItem Scroller (MV) -->
<%- include('components/mediaitem-scroller-horizontal-mvview') %> <%- include('components/mediaitem-scroller-horizontal-mvview')
%>
<!-- MediaItem List Item --> <!-- MediaItem List Item -->
<%- include('components/mediaitem-list-item') %> <%- include('components/mediaitem-list-item')
%>
<!-- MediaItem Horizontal Rectangle --> <!-- MediaItem Horizontal Rectangle -->
<%- include('components/mediaitem-hrect') %> <%- include('components/mediaitem-hrect')
%>
<!-- MediaItem Square --> <!-- MediaItem Square -->
<%- include('components/mediaitem-square') %> <%- include('components/mediaitem-square')
%>
<!-- MediaItem Square SP --> <!-- MediaItem Square SP -->
<%- include('components/mediaitem-square-sp') %> <%- include('components/mediaitem-square-sp')
%>
<!-- MediaItem MusicVideo --> <!-- MediaItem MusicVideo -->
<%- include('components/mediaitem-mvview') %> <%- include('components/mediaitem-mvview')
%>
<!-- MediaItem MusicVideo --> <!-- MediaItem MusicVideo -->
<%- include('components/libraryartist-item') %> <%- include('components/libraryartist-item')
<%- include('components/listennow-child') %> %>
<%- include('components/listennow-child')
%>
<!-- MediaItem MusicVideo SP --> <!-- MediaItem MusicVideo SP -->
<%- include('components/mediaitem-mvview-sp') %> <%- include('components/mediaitem-mvview-sp')
%>
<!-- Animated Artwork View --> <!-- Animated Artwork View -->
<%- include('components/animatedartwork-view') %> <%- include('components/animatedartwork-view')
%>
<!-- Lyrics View --> <!-- Lyrics View -->
<%- include('components/lyrics-view') %> <%- include('components/lyrics-view')
%>
<!-- Fullscreen View --> <!-- Fullscreen View -->
<%- include('components/fullscreen') %> <%- include('components/fullscreen')
%>
<script src="musickit.js?v=1"></script> <script
src="musickit.js?v=1"></script>
<script> <script>
if (typeof MusicKit == 'undefined') { if (typeof MusicKit == 'undefined') {
document.write(unescape("%3Cscript src='https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js' type='text/javascript'%3E%3C/script%3E")); document.write(unescape("%3Cscript src='https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js' type='text/javascript'%3E%3C/script%3E"));
} }
</script> </script>
<script src="index.js?v=1"></script> <script
<script src="https://cdn.jsdelivr.net/npm/resonance-audio/build/resonance-audio.min.js"></script> src="index.js?v=1"></script>
<script src="/audio/audio.js?v=1"></script> <script
<script src="/WSAPI_Interop.js"></script> src="https://cdn.jsdelivr.net/npm/resonance-audio/build/resonance-audio.min.js"></script>
<script
src="/audio/audio.js?v=1"></script>
<script
src="./js/WSAPI_Interop.js"></script>
</body> </body>
</html>
</html>