CHONKY BOY
This commit is contained in:
Core
parent
31ed921a1a
commit
c15f55d0ee
213 changed files with 64188 additions and 55736 deletions
|
|
@ -1,88 +1,90 @@
|
|||
<script type="text/x-template" id="add-to-playlist">
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
|
||||
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<button class="playlist-item"
|
||||
@click="app.addSelectedToNewPlaylist()" style="width:100%;">
|
||||
<div class="icon"><%- include("../svg/plus.svg") %></div>
|
||||
<div class="name">{{app.getLz('action.createPlaylist')}}</div>
|
||||
</button>
|
||||
<sidebar-playlist :playlist-select="playlistSelect" :relate-media-items="relateItems" v-for="item in $root.getPlaylistFolderChildren('p.playlistsroot')" :item="item">
|
||||
</sidebar-playlist>
|
||||
</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="app.getLz('term.search') + '...'"
|
||||
v-model="searchQuery"
|
||||
@input="search()"
|
||||
class="search-input">
|
||||
</div>
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
|
||||
@contextmenu.self="app.resetState()">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
|
||||
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<button class="playlist-item"
|
||||
@click="app.addSelectedToNewPlaylist()" style="width:100%;">
|
||||
<div class="icon"><%- include("../svg/plus.svg") %></div>
|
||||
<div class="name">{{app.getLz('action.createPlaylist')}}</div>
|
||||
</button>
|
||||
<sidebar-playlist :playlist-select="playlistSelect" :relate-media-items="relateItems"
|
||||
v-for="item in $root.getPlaylistFolderChildren('p.playlistsroot')" :item="item">
|
||||
</sidebar-playlist>
|
||||
</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="app.getLz('term.search') + '...'"
|
||||
v-model="searchQuery"
|
||||
@input="search()"
|
||||
class="search-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('add-to-playlist', {
|
||||
template: '#add-to-playlist',
|
||||
data: function () {
|
||||
return {
|
||||
playlistSorted: [],
|
||||
searchQuery: "",
|
||||
focused: "",
|
||||
app: this.$root,
|
||||
relateItems: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
playlists: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.relateItems = [this.$root.selectedMediaItems[0].id]
|
||||
this.search()
|
||||
this.$refs.searchInput.focus()
|
||||
this.$refs.searchInput.addEventListener('keydown', (e) => {
|
||||
if (e.keyCode == 13) {
|
||||
if (this.focused != "") {
|
||||
this.addToPlaylist(this.focused)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
playlistSelect(playlist) {
|
||||
if (playlist.type != "library-playlist-folders") {
|
||||
this.addToPlaylist(playlist.id)
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
Vue.component('add-to-playlist', {
|
||||
template: '#add-to-playlist',
|
||||
data: function() {
|
||||
return {
|
||||
playlistSorted: [],
|
||||
searchQuery: "",
|
||||
focused: "",
|
||||
app: this.$root,
|
||||
relateItems: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
playlists: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.relateItems = [this.$root.selectedMediaItems[0].id]
|
||||
this.search()
|
||||
this.$refs.searchInput.focus()
|
||||
this.$refs.searchInput.addEventListener('keydown', (e) => {
|
||||
if (e.keyCode == 13) {
|
||||
if (this.focused != "") {
|
||||
this.addToPlaylist(this.focused)
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
playlistSelect(playlist) {
|
||||
if (playlist.type != "library-playlist-folders") {
|
||||
this.addToPlaylist(playlist.id)
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,45 @@
|
|||
<script type="text/x-template" id="airplay-modal">
|
||||
<div class="spatialproperties-panel castmenu modal-fullscreen airplay-modal" @click.self="close()" @contextmenu.self="close()">
|
||||
<div class="modal-window airplay-modal">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{'Enter password'}}</div>
|
||||
<button class="close-btn" @click="close()" :aria-label="this.$root.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content" style="overflow-y: overlay; padding: 3%">
|
||||
<input type="text" v-model="passcode"/>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<div class="row">
|
||||
<div class="col" >
|
||||
<button style="width:100%" @click="enterPassword()" class="md-btn md-btn-block md-btn-primary">{{'OK'}}</button>
|
||||
<div class="spatialproperties-panel castmenu modal-fullscreen airplay-modal" @click.self="close()"
|
||||
@contextmenu.self="close()">
|
||||
<div class="modal-window airplay-modal">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{'Enter password'}}</div>
|
||||
<button class="close-btn" @click="close()" :aria-label="this.$root.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content" style="overflow-y: overlay; padding: 3%">
|
||||
<input type="text" v-model="passcode" />
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button style="width:100%" @click="enterPassword()" class="md-btn md-btn-block md-btn-primary">
|
||||
{{'OK'}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('airplay-modal', {
|
||||
template: '#airplay-modal',
|
||||
data: function () {
|
||||
return {
|
||||
passcode: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$root.modals.airplayPW = false
|
||||
},
|
||||
enterPassword() {
|
||||
console.log('Entered passCode: ', this.passcode)
|
||||
ipcRenderer.send("setAirPlayPasscode",this.passcode)
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Vue.component('airplay-modal', {
|
||||
template: '#airplay-modal',
|
||||
data: function() {
|
||||
return {
|
||||
passcode: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$root.modals.airplayPW = false
|
||||
},
|
||||
enterPassword() {
|
||||
console.log('Entered passCode: ', this.passcode)
|
||||
ipcRenderer.send("setAirPlayPasscode", this.passcode)
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,93 +5,98 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('animatedartwork-view', {
|
||||
template: '#animatedartwork-view',
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
hls: null,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
video: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
priority: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
if (!this.priority && app.cfg.visual.animated_artwork == "limited") {
|
||||
return
|
||||
} else if (app.cfg.visual.animated_artwork == "disabled") {
|
||||
return
|
||||
}
|
||||
if (this.video) {
|
||||
this.$nextTick(function () {
|
||||
var config = {
|
||||
backBufferLength: 0,
|
||||
enableWebVTT: false,
|
||||
enableCEA708Captions: false,
|
||||
emeEnabled: false,
|
||||
abrEwmaDefaultEstimate: 10000,
|
||||
testBandwidth: false,
|
||||
};
|
||||
if (this.hls) {
|
||||
this.hls.detachMedia();
|
||||
} else {
|
||||
Vue.component('animatedartwork-view', {
|
||||
template: '#animatedartwork-view',
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
hls: null,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
video: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
priority: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
if (!this.priority && app.cfg.visual.animated_artwork == "limited") {
|
||||
return
|
||||
} else if (app.cfg.visual.animated_artwork == "disabled") {
|
||||
return
|
||||
}
|
||||
if (this.video) {
|
||||
this.$nextTick(function() {
|
||||
var config = {
|
||||
backBufferLength: 0,
|
||||
enableWebVTT: false,
|
||||
enableCEA708Captions: false,
|
||||
emeEnabled: false,
|
||||
abrEwmaDefaultEstimate: 10000,
|
||||
testBandwidth: false,
|
||||
};
|
||||
if (this.hls) {
|
||||
this.hls.detachMedia();
|
||||
} else {
|
||||
|
||||
this.hls = new CiderHls(config);
|
||||
}
|
||||
// bind them together
|
||||
if (this.$refs.video) {
|
||||
let d = "WIDEVINE_SOFTWARE"
|
||||
let h = {
|
||||
initDataTypes: ["cenc", "keyids"],
|
||||
distinctiveIdentifier: "optional",
|
||||
persistentState: "required"
|
||||
}
|
||||
let p = {
|
||||
platformInfo: {requiresCDMAttachOnStart: !0, maxSecurityLevel: d, keySystemConfig: h},
|
||||
appData: {serviceName: "Apple Music"}
|
||||
}
|
||||
|
||||
this.hls.attachMedia(this.$refs.video);
|
||||
this.hls.loadSource(this.video, p);
|
||||
let u = this.hls;
|
||||
var quality = app.cfg.visual.animated_artwork_qualityLevel;
|
||||
setTimeout(() => {
|
||||
let levelsnum = u.levels.map((level)=>{return level.width})
|
||||
if (levelsnum.length > 0) {
|
||||
let qualities = []
|
||||
let qualities2 = []
|
||||
for (let i = 0; i < levelsnum.length; i++) {
|
||||
if (qualities2.indexOf(levelsnum[i]) == -1) {
|
||||
qualities.push({level: i, quality: levelsnum[i]})
|
||||
qualities2.push(levelsnum[i])
|
||||
}
|
||||
}
|
||||
let actualnum = Math.floor(qualities[qualities.length -1 ].level * (quality / 4))
|
||||
if (quality != 0 ){
|
||||
quality = qualities[Math.min(actualnum,qualities.length -1 )].level
|
||||
}
|
||||
if (quality == 4 ){
|
||||
quality = qualities[qualities.length - 1].level
|
||||
}
|
||||
}
|
||||
try{
|
||||
this.hls.loadLevel = parseInt( quality || 1);} catch(e){}},200)
|
||||
}
|
||||
})
|
||||
this.hls = new CiderHls(config);
|
||||
}
|
||||
// bind them together
|
||||
if (this.$refs.video) {
|
||||
let d = "WIDEVINE_SOFTWARE"
|
||||
let h = {
|
||||
initDataTypes: ["cenc", "keyids"],
|
||||
distinctiveIdentifier: "optional",
|
||||
persistentState: "required"
|
||||
}
|
||||
},
|
||||
async beforeDestroy() {
|
||||
if (this.hls) {
|
||||
await this.hls.destroy();
|
||||
this.hls = null
|
||||
let p = {
|
||||
platformInfo: { requiresCDMAttachOnStart: !0, maxSecurityLevel: d, keySystemConfig: h },
|
||||
appData: { serviceName: "Apple Music" }
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
this.hls.attachMedia(this.$refs.video);
|
||||
this.hls.loadSource(this.video, p);
|
||||
let u = this.hls;
|
||||
var quality = app.cfg.visual.animated_artwork_qualityLevel;
|
||||
setTimeout(() => {
|
||||
let levelsnum = u.levels.map((level) => {
|
||||
return level.width
|
||||
})
|
||||
if (levelsnum.length > 0) {
|
||||
let qualities = []
|
||||
let qualities2 = []
|
||||
for (let i = 0; i < levelsnum.length; i++) {
|
||||
if (qualities2.indexOf(levelsnum[i]) == -1) {
|
||||
qualities.push({ level: i, quality: levelsnum[i] })
|
||||
qualities2.push(levelsnum[i])
|
||||
}
|
||||
}
|
||||
let actualnum = Math.floor(qualities[qualities.length - 1].level * (quality / 4))
|
||||
if (quality != 0) {
|
||||
quality = qualities[Math.min(actualnum, qualities.length - 1)].level
|
||||
}
|
||||
if (quality == 4) {
|
||||
quality = qualities[qualities.length - 1].level
|
||||
}
|
||||
}
|
||||
try {
|
||||
this.hls.loadLevel = parseInt(quality || 1);
|
||||
} catch (e) {
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
async beforeDestroy() {
|
||||
if (this.hls) {
|
||||
await this.hls.destroy();
|
||||
this.hls = null
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@
|
|||
<transition
|
||||
<% if(env.appRoutes[i].onEnter) {
|
||||
%>
|
||||
v-on:enter="<%- env.appRoutes[i].onEnter %>"
|
||||
v-on:enter="<%- env.appRoutes[i].onEnter; %>"
|
||||
<%
|
||||
}
|
||||
%>
|
||||
:name="$root.chrome.desiredPageTransition">
|
||||
<template
|
||||
v-if="<%- env.appRoutes[i].condition %>">
|
||||
<%- env.appRoutes[i].component %>
|
||||
v-if="<%- env.appRoutes[i].condition; %>">
|
||||
<%- env.appRoutes[i].component; %>
|
||||
</template>
|
||||
</transition>
|
||||
<% } %>
|
||||
|
|
@ -38,14 +38,13 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('app-content-area', {
|
||||
template: '#app-content-area',
|
||||
data: function () {
|
||||
return {
|
||||
scrollPos: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Vue.component('app-content-area', {
|
||||
template: '#app-content-area',
|
||||
data: function() {
|
||||
return {
|
||||
scrollPos: 0
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,53 @@
|
|||
<script type="text/x-template" id="artist-chip">
|
||||
<div class="artist-chip" @click.self="route" tabindex="0">
|
||||
<div class="artist-chip__image" v-if="image" :style="{backgroundColor: '#' + (artist.attributes.artwork?.bgColor ?? '000')}">
|
||||
<mediaitem-artwork v-if="artist.id != null" :url="artist.attributes.artwork.url" :size="80"></mediaitem-artwork>
|
||||
<div class="artist-chip__image" v-if="image"
|
||||
:style="{backgroundColor: '#' + (artist.attributes.artwork?.bgColor ?? '000')}">
|
||||
<mediaitem-artwork v-if="artist.id != null" :url="artist.attributes.artwork.url"
|
||||
:size="80"></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="artist-chip__image" v-else>
|
||||
</div>
|
||||
<div class="artist-chip__name">
|
||||
<span>{{ item.attributes.name }}</span>
|
||||
</div>
|
||||
<button @click="$root.setArtistFavorite(artist.id, true)" title="Follow" v-if="!$root.followingArtist(artist.id)" class="artist-chip__follow codicon codicon-add"></button>
|
||||
<button @click="$root.setArtistFavorite(artist.id, false)" title="Following" v-else class="artist-chip__follow codicon codicon-check"></button>
|
||||
<button @click="$root.setArtistFavorite(artist.id, true)" title="Follow"
|
||||
v-if="!$root.followingArtist(artist.id)" class="artist-chip__follow codicon codicon-add"></button>
|
||||
<button @click="$root.setArtistFavorite(artist.id, false)" title="Following" v-else
|
||||
class="artist-chip__follow codicon codicon-check"></button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('artist-chip', {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
image: false,
|
||||
artist: {
|
||||
id: null
|
||||
}
|
||||
}
|
||||
},
|
||||
template: '#artist-chip',
|
||||
async mounted() {
|
||||
let artistId = this.item.id
|
||||
if (typeof this.item.relationships == "object") {
|
||||
artistId = this.item.relationships.catalog.data[0].id
|
||||
}
|
||||
app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${artistId}`).then(response => {
|
||||
this.artist = response.data.data[0];
|
||||
this.image = true;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
route() {
|
||||
app.appRoute(`artist/${this.artist.id}`);
|
||||
}
|
||||
Vue.component('artist-chip', {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
image: false,
|
||||
artist: {
|
||||
id: null
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
},
|
||||
template: '#artist-chip',
|
||||
async mounted() {
|
||||
let artistId = this.item.id
|
||||
if (typeof this.item.relationships == "object") {
|
||||
artistId = this.item.relationships.catalog.data[0].id
|
||||
}
|
||||
app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${artistId}`).then(response => {
|
||||
this.artist = response.data.data[0];
|
||||
this.image = true;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
route() {
|
||||
app.appRoute(`artist/${this.artist.id}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,36 @@
|
|||
<script type="text/x-template" id="artwork-material">
|
||||
<div class="artworkMaterial">
|
||||
<mediaitem-artwork :url="src" :size="500" v-for="image in images"/>
|
||||
<mediaitem-artwork :url="src" :size="500" v-for="image in images" />
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('artwork-material', {
|
||||
template: '#artwork-material',
|
||||
data: function () {
|
||||
return {
|
||||
src: ""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.src = app.getMediaItemArtwork(this.url, this.size)
|
||||
},
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
size: {
|
||||
type: [String, Number],
|
||||
required: false,
|
||||
default: '32'
|
||||
},
|
||||
images: {
|
||||
type: [String, Number],
|
||||
required: false,
|
||||
default: '2'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Vue.component('artwork-material', {
|
||||
template: '#artwork-material',
|
||||
data: function() {
|
||||
return {
|
||||
src: ""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.src = app.getMediaItemArtwork(this.url, this.size)
|
||||
},
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
size: {
|
||||
type: [String, Number],
|
||||
required: false,
|
||||
default: '32'
|
||||
},
|
||||
images: {
|
||||
type: [String, Number],
|
||||
required: false,
|
||||
default: '2'
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{app.getLz('term.audioControls')}}</div>
|
||||
<button class="close-btn" @click="app.modals.audioControls = false" :aria-label="app.getLz('action.close')"></button>
|
||||
<button class="close-btn" @click="app.modals.audioControls = false"
|
||||
:aria-label="app.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<div class="md-option-line">
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto percent">
|
||||
<input type="number"
|
||||
style="width: 100%; text-align: center; margin-right: 5px;" min="0"
|
||||
step="2" v-model="volume"/>
|
||||
step="2" v-model="volume" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
|
|
@ -23,7 +24,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto percent">
|
||||
<input type="number" style="width: 100%; text-align: center; margin-right: 5px;" min="0"
|
||||
v-model="volumeStep"/>
|
||||
v-model="volumeStep" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
|
|
@ -32,66 +33,66 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto percent">
|
||||
<input type="number" style="width: 100%; text-align: center; margin-right: 5px;" min="0"
|
||||
v-model="maxVolume"/>
|
||||
v-model="maxVolume" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.option.audio.advanced')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.audio.advanced" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.option.audio.advanced')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.audio.advanced" switch/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('audio-controls', {
|
||||
template: '#audio-controls',
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
maxVolume: this.$root.cfg.audio.maxVolume * 100,
|
||||
volumeStep: this.$root.cfg.audio.volumeStep * 100,
|
||||
volume: this.$root.cfg.audio.volume * 100
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
maxVolume: function (newValue, _oldValue) {
|
||||
if (newValue > 100) {
|
||||
newValue = 100
|
||||
} else {
|
||||
newValue = Math.round(newValue)
|
||||
}
|
||||
this.$root.cfg.audio.maxVolume = newValue / 100
|
||||
this.maxVolume = newValue
|
||||
console.log(newValue, _oldValue)
|
||||
},
|
||||
volume: function (newValue, _oldValue) {
|
||||
if (newValue > this.maxVolume) {
|
||||
newValue = 100
|
||||
} else {
|
||||
newValue = Math.round(newValue)
|
||||
}
|
||||
this.$root.mk.volume = newValue / 100
|
||||
this.volume = newValue
|
||||
console.log(newValue, _oldValue)
|
||||
},
|
||||
volumeStep: function (newValue, _oldValue) {
|
||||
if (newValue > this.maxVolume) {
|
||||
newValue = 100
|
||||
} else {
|
||||
newValue = Math.round(newValue)
|
||||
}
|
||||
this.$root.cfg.audio.volumeStep = newValue / 100
|
||||
this.volumeStep = newValue
|
||||
console.log(newValue, _oldValue)
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Vue.component('audio-controls', {
|
||||
template: '#audio-controls',
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
maxVolume: this.$root.cfg.audio.maxVolume * 100,
|
||||
volumeStep: this.$root.cfg.audio.volumeStep * 100,
|
||||
volume: this.$root.cfg.audio.volume * 100
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
maxVolume: function(newValue, _oldValue) {
|
||||
if (newValue > 100) {
|
||||
newValue = 100
|
||||
} else {
|
||||
newValue = Math.round(newValue)
|
||||
}
|
||||
this.$root.cfg.audio.maxVolume = newValue / 100
|
||||
this.maxVolume = newValue
|
||||
console.log(newValue, _oldValue)
|
||||
},
|
||||
volume: function(newValue, _oldValue) {
|
||||
if (newValue > this.maxVolume) {
|
||||
newValue = 100
|
||||
} else {
|
||||
newValue = Math.round(newValue)
|
||||
}
|
||||
this.$root.mk.volume = newValue / 100
|
||||
this.volume = newValue
|
||||
console.log(newValue, _oldValue)
|
||||
},
|
||||
volumeStep: function(newValue, _oldValue) {
|
||||
if (newValue > this.maxVolume) {
|
||||
newValue = 100
|
||||
} else {
|
||||
newValue = Math.round(newValue)
|
||||
}
|
||||
this.$root.cfg.audio.volumeStep = newValue / 100
|
||||
this.volumeStep = newValue
|
||||
console.log(newValue, _oldValue)
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
|
||||
<button class="close-btn" @click="app.modals.audioPlaybackRate = false" :aria-label="app.getLz('action.close')"></button>
|
||||
<button class="close-btn" @click="app.modals.audioPlaybackRate = false"
|
||||
:aria-label="app.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<div class="md-option-line">
|
||||
|
|
@ -15,7 +16,8 @@
|
|||
{{playbackRate}} ×
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<input type="range" :step="0.05" min="0.25" :max="2" @wheel="playbackRateWheel" v-model="playbackRate">
|
||||
<input type="range" :step="0.05" min="0.25" :max="2" @wheel="playbackRateWheel"
|
||||
v-model="playbackRate">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -24,36 +26,36 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('audio-playbackrate', {
|
||||
template: '#audio-playbackrate',
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
playbackRate: this.$root.cfg.audio.playbackRate
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
playbackRate: function (newValue, _oldValue) {
|
||||
this.saveValue(newValue);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
playbackRateWheel(event) {
|
||||
if (app.checkScrollDirectionIsUp(event)) {
|
||||
this.saveValue(this.$root.cfg.audio.playbackRate + 0.05);
|
||||
} else {
|
||||
this.saveValue(this.$root.cfg.audio.playbackRate - 0.05);
|
||||
}
|
||||
},
|
||||
saveValue(newValue) {
|
||||
newValue = Number(newValue);
|
||||
if (newValue >= 0.25 && newValue <= 2) {
|
||||
newValue = String(newValue).length > 4 ? newValue.toFixed(2) : newValue;
|
||||
this.$root.mk.playbackRate = newValue;
|
||||
this.$root.cfg.audio.playbackRate = newValue;
|
||||
this.playbackRate = newValue;
|
||||
}
|
||||
}
|
||||
Vue.component('audio-playbackrate', {
|
||||
template: '#audio-playbackrate',
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
playbackRate: this.$root.cfg.audio.playbackRate
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
playbackRate: function(newValue, _oldValue) {
|
||||
this.saveValue(newValue);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
playbackRateWheel(event) {
|
||||
if (app.checkScrollDirectionIsUp(event)) {
|
||||
this.saveValue(this.$root.cfg.audio.playbackRate + 0.05);
|
||||
} else {
|
||||
this.saveValue(this.$root.cfg.audio.playbackRate - 0.05);
|
||||
}
|
||||
});
|
||||
},
|
||||
saveValue(newValue) {
|
||||
newValue = Number(newValue);
|
||||
if (newValue >= 0.25 && newValue <= 2) {
|
||||
newValue = String(newValue).length > 4 ? newValue.toFixed(2) : newValue;
|
||||
this.$root.mk.playbackRate = newValue;
|
||||
this.$root.cfg.audio.playbackRate = newValue;
|
||||
this.playbackRate = newValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<script type="text/x-template" id="audio-settings">
|
||||
<template>
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioSettings = false" @contextmenu.self="app.modals.audioSettings = false">
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioSettings = false"
|
||||
@contextmenu.self="app.modals.audioSettings = false">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{app.getLz('term.audioSettings')}}</div>
|
||||
<button class="close-btn" @click="app.modals.audioSettings = false" :aria-label="app.getLz('action.close')"></button>
|
||||
<button class="close-btn" @click="app.modals.audioSettings = false"
|
||||
:aria-label="app.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<button class="playlist-item"
|
||||
|
|
@ -34,29 +36,30 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('audio-settings', {
|
||||
template: '#audio-settings',
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
openEqualizer() {
|
||||
app.modals.equalizer = true
|
||||
app.modals.audioSettings = false
|
||||
},
|
||||
openAudioControls() {
|
||||
app.modals.audioControls = true
|
||||
app.modals.audioSettings = false
|
||||
},
|
||||
openAudioPlaybackRate() {
|
||||
app.modals.audioPlaybackRate = true
|
||||
app.modals.audioSettings = false
|
||||
},
|
||||
},
|
||||
Vue.component('audio-settings', {
|
||||
template: '#audio-settings',
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
},
|
||||
props: {},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
openEqualizer() {
|
||||
app.modals.equalizer = true
|
||||
app.modals.audioSettings = false
|
||||
},
|
||||
openAudioControls() {
|
||||
app.modals.audioControls = true
|
||||
app.modals.audioSettings = false
|
||||
},
|
||||
openAudioPlaybackRate() {
|
||||
app.modals.audioPlaybackRate = true
|
||||
app.modals.audioSettings = false
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,130 +1,151 @@
|
|||
<script type="text/x-template" id="castmenu">
|
||||
<div class="spatialproperties-panel castmenu modal-fullscreen" @click.self="close()" @contextmenu.self="close()">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{$root.getLz('action.cast.todevices')}}</div>
|
||||
<button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content" style="overflow-y: overlay; padding: 3%">
|
||||
<div class="md-labeltext">{{$root.getLz('action.cast.chromecast')}}</div>
|
||||
<div class="md-option-container" style="margin-top: 12px;margin-bottom: 12px;overflow-y: scroll;">
|
||||
<template v-if="!scanning">
|
||||
<template v-for="(device) in devices.cast">
|
||||
<div class="md-option-line" style="cursor: pointer" @click="setCast(device)">
|
||||
<div class="md-option-segment">
|
||||
{{ device.name }}
|
||||
<br>
|
||||
<small>{{ device.host }}</small>
|
||||
</div>
|
||||
<div class="md-option-segment_auto" style="display: flex;justify-content: center;align-items: center" v-if="activeCasts.includes(device)">
|
||||
Connected
|
||||
</div>
|
||||
<div class="md-option-segment_auto" v-else style="display: flex;justify-content: center;align-items: center">
|
||||
<svg width="20" height="20" viewBox="0 0 34 34" fill="#fff" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="castPlayIndicator"><path d="M28.228,18.327l-16.023,8.983c-0.99,0.555 -2.205,-0.17 -2.205,-1.318l0,-17.984c0,-1.146 1.215,-1.873 2.205,-1.317l16.023,8.982c1.029,0.577 1.029,2.077 0,2.654Z" style="fill-rule:nonzero"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="md-option-line" style="cursor: pointer">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('action.cast.scanning')}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="md-labeltext" >{{$root.getLz('action.cast.airplay')}}</div>
|
||||
<div class="md-option-container" style="margin-top: 12px;margin-bottom: 12px;overflow-y: scroll;">
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{'EXPERIMENTAL!!! Supports Homepods / Apple TVs / Shairport for now, AirPlay on Samsung/LG/Sony devices will be added later'}}
|
||||
<!-- {{$root.getLz('action.cast.airplay.underdevelopment')}} -->
|
||||
<template v-if="true" v-for="(device) in devices.airplay">
|
||||
<div class="md-option-line" style="cursor: pointer" @click="setAirPlayCast(device)">
|
||||
<div class="spatialproperties-panel castmenu modal-fullscreen" @click.self="close()" @contextmenu.self="close()">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{$root.getLz('action.cast.todevices')}}</div>
|
||||
<button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content" style="overflow-y: overlay; padding: 3%">
|
||||
<div class="md-labeltext">{{$root.getLz('action.cast.chromecast')}}</div>
|
||||
<div class="md-option-container" style="margin-top: 12px;margin-bottom: 12px;overflow-y: scroll;">
|
||||
<template v-if="!scanning">
|
||||
<template v-for="(device) in devices.cast">
|
||||
<div class="md-option-line" style="cursor: pointer" @click="setCast(device)">
|
||||
<div class="md-option-segment">
|
||||
{{ device.name }}
|
||||
<br>
|
||||
<small>{{ device.host }}</small>
|
||||
</div>
|
||||
<div class="md-option-segment_auto"
|
||||
style="display: flex;justify-content: center;align-items: center"
|
||||
v-if="activeCasts.includes(device)">
|
||||
Connected
|
||||
</div>
|
||||
<div class="md-option-segment_auto" v-else
|
||||
style="display: flex;justify-content: center;align-items: center">
|
||||
<svg width="20" height="20" viewBox="0 0 34 34" fill="#fff" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xml:space="preserve" class="castPlayIndicator"><path
|
||||
d="M28.228,18.327l-16.023,8.983c-0.99,0.555 -2.205,-0.17 -2.205,-1.318l0,-17.984c0,-1.146 1.215,-1.873 2.205,-1.317l16.023,8.982c1.029,0.577 1.029,2.077 0,2.654Z"
|
||||
style="fill-rule:nonzero"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="md-option-line" style="cursor: pointer">
|
||||
<div class="md-option-segment">
|
||||
{{ device.name }}
|
||||
<br>
|
||||
<small>{{ device.host }}</small>
|
||||
</div>
|
||||
<div class="md-option-segment_auto" style="display: flex;justify-content: center;align-items: center" v-if="activeCasts.includes(device)">
|
||||
Connected
|
||||
</div>
|
||||
<div class="md-option-segment_auto" v-else style="display: flex;justify-content: center;align-items: center">
|
||||
<svg width="20" height="20" viewBox="0 0 34 34" fill="#fff" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="castPlayIndicator"><path d="M28.228,18.327l-16.023,8.983c-0.99,0.555 -2.205,-0.17 -2.205,-1.318l0,-17.984c0,-1.146 1.215,-1.873 2.205,-1.317l16.023,8.982c1.029,0.577 1.029,2.077 0,2.654Z" style="fill-rule:nonzero"></path></svg>
|
||||
{{$root.getLz('action.cast.scanning')}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="md-labeltext">{{$root.getLz('action.cast.airplay')}}</div>
|
||||
<div class="md-option-container" style="margin-top: 12px;margin-bottom: 12px;overflow-y: scroll;">
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{'EXPERIMENTAL!!! Supports Homepods / Apple TVs / Shairport for now, AirPlay on
|
||||
Samsung/LG/Sony devices will be added later'}}
|
||||
<!-- {{$root.getLz('action.cast.airplay.underdevelopment')}} -->
|
||||
<template v-if="true" v-for="(device) in devices.airplay">
|
||||
<div class="md-option-line" style="cursor: pointer" @click="setAirPlayCast(device)">
|
||||
<div class="md-option-segment">
|
||||
{{ device.name }}
|
||||
<br>
|
||||
<small>{{ device.host }}</small>
|
||||
</div>
|
||||
<div class="md-option-segment_auto"
|
||||
style="display: flex;justify-content: center;align-items: center"
|
||||
v-if="activeCasts.includes(device)">
|
||||
Connected
|
||||
</div>
|
||||
<div class="md-option-segment_auto" v-else
|
||||
style="display: flex;justify-content: center;align-items: center">
|
||||
<svg width="20" height="20" viewBox="0 0 34 34" fill="#fff" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xml:space="preserve"
|
||||
class="castPlayIndicator"><path
|
||||
d="M28.228,18.327l-16.023,8.983c-0.99,0.555 -2.205,-0.17 -2.205,-1.318l0,-17.984c0,-1.146 1.215,-1.873 2.205,-1.317l16.023,8.982c1.029,0.577 1.029,2.077 0,2.654Z"
|
||||
style="fill-rule:nonzero"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<div class="row">
|
||||
<div class="col" v-if="activeCasts.length != 0">
|
||||
<button style="width:100%" @click="stopCasting()" class="md-btn md-btn-block md-btn-primary">
|
||||
{{$root.getLz('action.cast.stop')}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button style="width:100%" class="md-btn md-btn-block" @click="scan()">
|
||||
{{$root.getLz('action.cast.scan')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<div class="row">
|
||||
<div class="col" v-if="activeCasts.length != 0">
|
||||
<button style="width:100%" @click="stopCasting()" class="md-btn md-btn-block md-btn-primary">{{$root.getLz('action.cast.stop')}}</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button style="width:100%" class="md-btn md-btn-block" @click="scan()">{{$root.getLz('action.cast.scan')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('castmenu', {
|
||||
template: '#castmenu',
|
||||
data: function () {
|
||||
return {
|
||||
devices: {
|
||||
cast: [],
|
||||
airplay: []
|
||||
},
|
||||
scanning: false,
|
||||
activeCasts: this.$root.activeCasts,
|
||||
Vue.component('castmenu', {
|
||||
template: '#castmenu',
|
||||
data: function() {
|
||||
return {
|
||||
devices: {
|
||||
cast: [],
|
||||
airplay: []
|
||||
},
|
||||
scanning: false,
|
||||
activeCasts: this.$root.activeCasts,
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.scan();
|
||||
},
|
||||
watch:{
|
||||
activeCasts: function (newVal, oldVal) {
|
||||
this.$root.activeCasts = this.activeCasts;
|
||||
}},
|
||||
methods: {
|
||||
close() {
|
||||
this.$root.modals.castMenu = false
|
||||
},
|
||||
scan() {
|
||||
let self = this;
|
||||
this.scanning = true;
|
||||
ipcRenderer.send('getChromeCastDevices', '');
|
||||
ipcRenderer.send("getAirplayDevice","")
|
||||
setTimeout(() => {
|
||||
self.devices.cast = ipcRenderer.sendSync("getKnownCastDevices");
|
||||
self.devices.airplay = ipcRenderer.sendSync("getKnownAirplayDevices");
|
||||
self.scanning = false;
|
||||
}, 2000);
|
||||
console.log(this.devices);
|
||||
// vm.$forceUpdate();
|
||||
},
|
||||
setCast(device) {
|
||||
CiderAudio.sendAudio();
|
||||
this.activeCasts.push(device);
|
||||
ipcRenderer.send('performGCCast', device, "Cider", "Playing ...", "Test build", '');
|
||||
},
|
||||
setAirPlayCast(device) {
|
||||
this.activeCasts.push(device);
|
||||
ipcRenderer.send("performAirplayPCM",device.host,device.port,null,"","","","",device.txt,device.airplay2)
|
||||
},
|
||||
stopCasting() {
|
||||
CiderAudio.stopAudio();
|
||||
ipcRenderer.send('disconnectAirplay', '');
|
||||
ipcRenderer.send('stopGCast', '');
|
||||
this.activeCasts = [];
|
||||
// vm.$forceUpdate();
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.scan();
|
||||
},
|
||||
watch: {
|
||||
activeCasts: function(newVal, oldVal) {
|
||||
this.$root.activeCasts = this.activeCasts;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$root.modals.castMenu = false
|
||||
},
|
||||
scan() {
|
||||
let self = this;
|
||||
this.scanning = true;
|
||||
ipcRenderer.send('getChromeCastDevices', '');
|
||||
ipcRenderer.send("getAirplayDevice", "")
|
||||
setTimeout(() => {
|
||||
self.devices.cast = ipcRenderer.sendSync("getKnownCastDevices");
|
||||
self.devices.airplay = ipcRenderer.sendSync("getKnownAirplayDevices");
|
||||
self.scanning = false;
|
||||
}, 2000);
|
||||
console.log(this.devices);
|
||||
// vm.$forceUpdate();
|
||||
},
|
||||
setCast(device) {
|
||||
CiderAudio.sendAudio();
|
||||
this.activeCasts.push(device);
|
||||
ipcRenderer.send('performGCCast', device, "Cider", "Playing ...", "Test build", '');
|
||||
},
|
||||
setAirPlayCast(device) {
|
||||
this.activeCasts.push(device);
|
||||
ipcRenderer.send("performAirplayPCM", device.host, device.port, null, "", "", "", "", device.txt, device.airplay2)
|
||||
},
|
||||
stopCasting() {
|
||||
CiderAudio.stopAudio();
|
||||
ipcRenderer.send('disconnectAirplay', '');
|
||||
ipcRenderer.send('stopGCast', '');
|
||||
this.activeCasts = [];
|
||||
// vm.$forceUpdate();
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,15 +4,17 @@
|
|||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{app.getLz('action.addToLibrary')}}</div>
|
||||
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
|
||||
<button class="close-btn" @click="app.resetState()"
|
||||
:aria-label="app.getLz('action.close')"></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>
|
||||
: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;">
|
||||
|
|
@ -33,50 +35,50 @@
|
|||
</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
|
||||
}
|
||||
}
|
||||
},
|
||||
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)
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
})
|
||||
},
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,434 +1,483 @@
|
|||
<script type="text/x-template" id="eq-view">
|
||||
<div class="modal-fullscreen equalizer-panel" @click.self="close()" @contextmenu.self="close()">
|
||||
<div class="modal-window" >
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{$root.getLz('term.equalizer')}}</div>
|
||||
<button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<select class="md-select" style="width:220px;text-align:center;margin-right:245px" v-model="$root.cfg.audio.equalizer.preset" v-on:change="changePreset($root.cfg.audio.equalizer.preset)">
|
||||
<optgroup :label="$root.getLz('term.userPresets')">
|
||||
<option v-for="preset in $root.cfg.audio.equalizer.presets" :value="preset.preset">{{preset.name}}</option>
|
||||
</optgroup>
|
||||
<optgroup :label="$root.getLz('term.defaultPresets')">
|
||||
<option v-for="preset in defaultPresets" :value="preset.preset">{{preset.name}}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<!-- BANDS = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000]; -->
|
||||
<div class="inputs-container">
|
||||
<div class="input-container mini">
|
||||
{{$root.cfg.audio.equalizer.vibrantBass}}
|
||||
<input tabindex="0" type="range" class="eq-slider mini" orient="vertical" min="-15" max="15" step="1" v-model="$root.cfg.audio.equalizer.vibrantBass" @change="changeVibrantBass()">
|
||||
Vibrant Bass
|
||||
</div>
|
||||
<div class="input-container mini">
|
||||
{{$root.cfg.audio.equalizer.mix}}
|
||||
<input tabindex="0" type="range" class="eq-slider mini" orient="vertical" min="0" max="2" step="0.1" v-model="$root.cfg.audio.equalizer.mix" @change="changeMix()">
|
||||
Mix
|
||||
</div>
|
||||
<div class="input-container header mini">
|
||||
Gain
|
||||
<input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" >
|
||||
<div class="freq-header">Freq</div>
|
||||
<div>Q</div>
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[0]" @change="changeGain(0)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[0]" @change="changeGain(0)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="22" max="44" step="2" v-model="$root.cfg.audio.equalizer.frequencies[0]" @change="changeFreq(0)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[0]" @change="changeQ(0)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[1]" @change="changeGain(1)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[1]" @change="changeGain(1)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="44" max="88" step="4" v-model="$root.cfg.audio.equalizer.frequencies[1]" @change="changeFreq(1)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[1]" @change="changeQ(1)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="88" max="177" step="8" v-model="$root.cfg.audio.equalizer.frequencies[2]" @change="changeFreq(2)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[2]" @change="changeQ(2)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[3]" @change="changeGain(3)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[3]" @change="changeGain(3)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="177" max="355" step="16" v-model="$root.cfg.audio.equalizer.frequencies[3]" @change="changeFreq(3)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[3]" @change="changeQ(3)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[4]" @change="changeGain(4)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[4]" @change="changeGain(4)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="355" max="710" step="32" v-model="$root.cfg.audio.equalizer.frequencies[4]" @change="changeFreq(4)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[4]" @change="changeQ(4)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[5]" @change="changeGain(5)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[5]" @change="changeGain(5)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="710" max="1420" step="64" v-model="$root.cfg.audio.equalizer.frequencies[5]" @change="changeFreq(5)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[5]" @change="changeQ(5)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[6]" @change="changeGain(6)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[6]" @change="changeGain(6)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="1420" max="2840" step="128" v-model="$root.cfg.audio.equalizer.frequencies[6]" @change="changeFreq(6)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[6]" @change="changeQ(6)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[7]" @change="changeGain(7)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[7]" @change="changeGain(7)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="2840" max="5680" step="256" v-model="$root.cfg.audio.equalizer.frequencies[7]" @change="changeFreq(7)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[7]" @change="changeQ(7)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[8]" @change="changeGain(8)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[8]" @change="changeGain(8)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="5680" max="11360" step="512" v-model="$root.cfg.audio.equalizer.frequencies[8]" @change="changeFreq(8)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[8]" @change="changeQ(8)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[9]" @change="changeGain(9)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[9]" @change="changeGain(9)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="11360" max="22720" step="1024" v-model="$root.cfg.audio.equalizer.frequencies[9]" @change="changeFreq(9)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[9]" @change="changeQ(9)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-lowercontent">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="md-btn" style="width:100%" @click="resetGain()">{{$root.getLz('term.reset')}}</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="md-btn" style="width:100%" @click="presetOptions($event)">{{$root.getLz('term.menu')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('eq-view', {
|
||||
template: '#eq-view',
|
||||
data: function () {
|
||||
return {
|
||||
// app: this.$root,
|
||||
eqPreset: function () {
|
||||
this.preset = uuidv4()
|
||||
this.name = ""
|
||||
this.frequencies = []
|
||||
this.gain = []
|
||||
this.Q = []
|
||||
this.mix = 1
|
||||
this.vibrantBass = 0
|
||||
this.userGenerated = true
|
||||
},
|
||||
defaultPresets: [
|
||||
{
|
||||
'preset': 'default',
|
||||
'name': 'Default',
|
||||
'frequencies': [32, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000],
|
||||
'gain': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
'Q': [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'boostAiriness',
|
||||
'name': 'Boost Airiness',
|
||||
'frequencies': [1169, 1733, 5962, 8688, 14125, 18628, 18628, 19000, 19500, 20000],
|
||||
'gain': [-1.41, 0.25, 3.33, 0.22, -0.53, 0.2, 3.64, 0, 0, 0],
|
||||
'Q': [0.405, 2.102, 0.025, 2.5, 7.071, 1.768, 1.146, 1, 1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'acoustic',
|
||||
'name': 'Acoustic',
|
||||
'frequencies': [32, 75, 125, 220, 700, 1000, 2000, 4000, 10000, 16000],
|
||||
'gain': [0, -8, 0, -0.1, -3, 0, 0, 0, 4, 0],
|
||||
'Q': [1, 0.2, 1, 2.0, 1.4, 1, 1, 1, 0.1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'clearVocal',
|
||||
'name': 'Clear Vocal',
|
||||
'frequencies': [20, 63, 125, 250, 400, 1000, 2000, 4000, 8000, 20000],
|
||||
'gain': [-22, 0, 0, 0, -3, 0, 1.8, 0, 0, 3.5],
|
||||
'Q': [0.3, 1, 1, 1, 2.0, 1, 0.7, 1, 1, 0.8],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'instrumentClarity',
|
||||
'name': 'Instrument Clarity',
|
||||
'frequencies': [20, 63, 155, 250, 500, 1000, 2000, 5000, 11000, 16000],
|
||||
'gain': [-15, 0, -3, 0, 0, 0, 0, 3.1, 0, 0],
|
||||
'Q': [0.5, 1, 2, 1, 1, 1, 1, 1.5, 0.1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'reduceHarshness',
|
||||
'name': 'Reduce Harshness',
|
||||
'frequencies': [32, 63, 125, 250, 500, 1128, 2000, 4057, 8000, 16000],
|
||||
'gain': [0, 0, 0, 0, 0, 2, 0, -6.4, 0, 0],
|
||||
'Q': [1, 1, 1, 1, 1, 2, 1, 1, 1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'smileyFace',
|
||||
'name': 'Smiley Face',
|
||||
'frequencies': [35, 63, 125, 250, 500, 800, 2000, 4000, 8000, 20000],
|
||||
'gain': [5, 0, 0, 0, 0, -5, 0, 0, 0, 5],
|
||||
'Q': [0.1, 1, 1, 1, 1, 0.6, 1, 1, 1, 0.2],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
},
|
||||
{
|
||||
'preset': 'bassBoostSurgical',
|
||||
'name': 'Surgical Bass Boost',
|
||||
'frequencies': [32, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000],
|
||||
'gain': [2.7, 2.2, 1.6, 1.4, 0.6, 0, 0, 0, 0, 0],
|
||||
'Q': [1.4, 1.4, 1.4, 1.4, 1.4, 1, 1, 1, 1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'bassBoostClassic',
|
||||
'name': 'Classic Bass Boost',
|
||||
'frequencies': [32, 63, 160, 250, 500, 1000, 2000, 3500, 8000, 20000],
|
||||
'gain': [2.7, 2.2, 1.6, 1.4, 0.6, 0, 0, 0, 0, 0],
|
||||
'Q': [0.7, 0.7, 0.7, 0.7, 0.7, 1, 1, 1, 1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}]
|
||||
}
|
||||
},
|
||||
props: ["src", "url"],
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
presetOptions(event) {
|
||||
let menu = {
|
||||
items: {
|
||||
"new": {
|
||||
"icon": "./assets/feather/plus.svg",
|
||||
"name": app.getLz('action.newpreset'),
|
||||
action: () => {
|
||||
this.addPreset()
|
||||
}
|
||||
},
|
||||
"delete": {
|
||||
"icon": "./assets/feather/x-circle.svg",
|
||||
"name": app.getLz('action.deletepreset'),
|
||||
action: () => {
|
||||
this.deletePreset()
|
||||
}
|
||||
},
|
||||
"import": {
|
||||
"icon": "./assets/feather/share.svg",
|
||||
"name": app.getLz('action.import'),
|
||||
action: () => {
|
||||
this.importPreset()
|
||||
}
|
||||
},
|
||||
"export": {
|
||||
"icon": "./assets/feather/share.svg",
|
||||
"name": app.getLz('action.export'),
|
||||
action: () => {
|
||||
this.exportPreset()
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.$root.cfg.audio.equalizer.userGenerated) {
|
||||
delete menu.items.delete
|
||||
}
|
||||
|
||||
app.showMenuPanel(menu, event)
|
||||
},
|
||||
sharePreset(event) {
|
||||
let menu = {
|
||||
items: [
|
||||
{
|
||||
"icon": "./assets/feather/share.svg",
|
||||
"name": app.getLz('action.import'),
|
||||
"action": function () {
|
||||
notyf.error("Not implemented yet")
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/share.svg",
|
||||
"name": app.getLz('action.export'),
|
||||
"action": function () {
|
||||
notyf.error("Not implemented yet")
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
app.showMenuPanel(menu, event)
|
||||
},
|
||||
deletePreset() {
|
||||
let presets = this.$root.cfg.audio.equalizer.presets
|
||||
app.confirm(app.getLz('term.deletepreset.warn'), (result) => {
|
||||
if (result) {
|
||||
this.changePreset("default")
|
||||
// find the preset by id (preset) and remove it
|
||||
let index = presets.findIndex(p => p.preset == this.preset)
|
||||
presets.splice(index, 1)
|
||||
notyf.success(app.getLz('term.deletedpreset'))
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
app.modals.equalizer = false
|
||||
},
|
||||
changeVibrantBass() {
|
||||
if (app.cfg.audio.equalizer.vibrantBass !== '0') {
|
||||
try {
|
||||
for (var i = 0; i < 21; i++) {
|
||||
CiderAudio.audioNodes.vibrantbassNode[i].gain.value = app.cfg.audio.maikiwiAudio.vibrantBass.gain[i] * (app.cfg.audio.equalizer.vibrantBass / 10);
|
||||
} CiderAudio.intelliGainComp_n0_0();
|
||||
}
|
||||
catch (e) {
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
}
|
||||
|
||||
else {
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
},
|
||||
changeMix() {
|
||||
if (Math.max(...app.cfg.audio.equalizer.gain) != 0) {
|
||||
try {
|
||||
for (var i = 0; i < 10; i++) {
|
||||
CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer.gain[i] * app.cfg.audio.equalizer.mix
|
||||
}
|
||||
CiderAudio.intelliGainComp_n0_0();
|
||||
} catch (e) { CiderAudio.hierarchical_loading(); }
|
||||
}
|
||||
},
|
||||
changeGain(i) {
|
||||
if (Math.max(...app.cfg.audio.equalizer.gain) != 0) {
|
||||
try {
|
||||
CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer.gain[i] * app.cfg.audio.equalizer.mix
|
||||
CiderAudio.intelliGainComp_n0_0();
|
||||
}
|
||||
catch (e) { CiderAudio.hierarchical_loading(); }
|
||||
}
|
||||
else {
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
},
|
||||
changeFreq(i) {
|
||||
CiderAudio.audioNodes.audioBands[i].frequency.value = app.cfg.audio.equalizer.frequencies[i]
|
||||
},
|
||||
changeQ(i) {
|
||||
CiderAudio.audioNodes.audioBands[i].Q.value = app.cfg.audio.equalizer.Q[i]
|
||||
},
|
||||
resetGain() {
|
||||
this.applyPreset({
|
||||
'frequencies': [32, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000],
|
||||
'gain': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
'Q': [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
})
|
||||
if (app.cfg.audio.equalizer.userGenerated) {
|
||||
this.saveSelectedPreset()
|
||||
}
|
||||
},
|
||||
addPreset() {
|
||||
let self = this
|
||||
app.prompt(app.getLz('term.newpreset.name'), (res) => {
|
||||
if (res) {
|
||||
let eqSettings = Clone(app.cfg.audio.equalizer)
|
||||
let newPreset = new self.eqPreset()
|
||||
newPreset.name = res
|
||||
newPreset.frequencies = eqSettings.frequencies
|
||||
newPreset.gain = eqSettings.gain
|
||||
newPreset.Q = eqSettings.Q
|
||||
newPreset.mix = eqSettings.mix
|
||||
newPreset.vibrantBass = eqSettings.vibrantBass
|
||||
app.cfg.audio.equalizer.presets.push(newPreset)
|
||||
notyf.success(app.getLz('term.addedpreset'))
|
||||
self.changePreset(newPreset.preset)
|
||||
}
|
||||
})
|
||||
},
|
||||
saveSelectedPreset() {
|
||||
// Save the current settings to the selected preset
|
||||
let self = this
|
||||
//let preset = app.cfg.audio.equalizer.presets[app.cfg.audio.equalizer.preset]
|
||||
// find the preset by its id (preset)
|
||||
let preset = app.cfg.audio.equalizer.presets.find(p => p.preset == app.cfg.audio.equalizer.preset)
|
||||
preset.frequencies = app.cfg.audio.equalizer.frequencies
|
||||
preset.gain = app.cfg.audio.equalizer.gain
|
||||
preset.Q = app.cfg.audio.equalizer.Q
|
||||
preset.mix = app.cfg.audio.equalizer.mix
|
||||
preset.vibrantBass = app.cfg.audio.equalizer.vibrantBass
|
||||
notyf.success("Saved Preset")
|
||||
},
|
||||
exportPreset() {
|
||||
let preset = app.cfg.audio.equalizer.presets.find(p => p.preset == app.cfg.audio.equalizer.preset)
|
||||
this.$root.copyToClipboard(btoa(JSON.stringify(preset)))
|
||||
},
|
||||
importPreset() {
|
||||
let self = this
|
||||
app.prompt("Enter preset share code", (res) => {
|
||||
if (res) {
|
||||
let preset = JSON.parse(atob(res))
|
||||
if (preset.frequencies && preset.gain && preset.Q && preset.mix && preset.vibrantBass) {
|
||||
// self.applyPreset(preset)
|
||||
app.cfg.audio.equalizer.presets.push(preset)
|
||||
notyf.success(`${preset.name} has been imported.`)
|
||||
}
|
||||
else {
|
||||
notyf.error("Invalid Preset")
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
applyPreset(preset) {
|
||||
Object.assign(this.$root.cfg.audio.equalizer, preset)
|
||||
this.changeVibrantBass()
|
||||
for (var i = 0; i < 10; i++) {
|
||||
try { CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer.gain[i] * app.cfg.audio.equalizer.mix }
|
||||
catch (e) {
|
||||
CiderAudio.hierarchical_loading();
|
||||
CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer.gain[i] * app.cfg.audio.equalizer.mix
|
||||
}
|
||||
|
||||
CiderAudio.audioNodes.audioBands[i].frequency.value = app.cfg.audio.equalizer.frequencies[i]
|
||||
CiderAudio.audioNodes.audioBands[i].Q.value = app.cfg.audio.equalizer.Q[i]
|
||||
}
|
||||
CiderAudio.intelliGainComp_n0_0();
|
||||
},
|
||||
changePreset(id) {
|
||||
let userPresets = app.cfg.audio.equalizer.presets
|
||||
let defaultPresets = Clone(this.defaultPresets)
|
||||
|
||||
let presets = defaultPresets.concat(userPresets)
|
||||
console.log(presets)
|
||||
let preset = presets.find(p => p.preset == id)
|
||||
|
||||
console.log(preset)
|
||||
|
||||
if (preset) {
|
||||
this.applyPreset(preset)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script type="text/x-template" id="eq-view">
|
||||
<div class="modal-fullscreen equalizer-panel" @click.self="close()" @contextmenu.self="close()">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{$root.getLz('term.equalizer')}}</div>
|
||||
<button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<select class="md-select" style="width:220px;text-align:center;margin-right:245px"
|
||||
v-model="$root.cfg.audio.equalizer.preset"
|
||||
v-on:change="changePreset($root.cfg.audio.equalizer.preset)">
|
||||
<optgroup :label="$root.getLz('term.userPresets')">
|
||||
<option v-for="preset in $root.cfg.audio.equalizer.presets" :value="preset.preset">
|
||||
{{preset.name}}
|
||||
</option>
|
||||
</optgroup>
|
||||
<optgroup :label="$root.getLz('term.defaultPresets')">
|
||||
<option v-for="preset in defaultPresets" :value="preset.preset">{{preset.name}}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<!-- BANDS = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000]; -->
|
||||
<div class="inputs-container">
|
||||
<div class="input-container mini">
|
||||
{{$root.cfg.audio.equalizer.vibrantBass}}
|
||||
<input tabindex="0" type="range" class="eq-slider mini" orient="vertical" min="-15" max="15"
|
||||
step="1" v-model="$root.cfg.audio.equalizer.vibrantBass" @change="changeVibrantBass()">
|
||||
Vibrant Bass
|
||||
</div>
|
||||
<div class="input-container mini">
|
||||
{{$root.cfg.audio.equalizer.mix}}
|
||||
<input tabindex="0" type="range" class="eq-slider mini" orient="vertical" min="0" max="2"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.mix" @change="changeMix()">
|
||||
Mix
|
||||
</div>
|
||||
<div class="input-container header mini">
|
||||
Gain
|
||||
<input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1">
|
||||
<div class="freq-header">Freq</div>
|
||||
<div>Q</div>
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[0]" @change="changeGain(0)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[0]" @change="changeGain(0)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="22" max="44" step="2"
|
||||
v-model="$root.cfg.audio.equalizer.frequencies[0]" @change="changeFreq(0)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1"
|
||||
v-model="$root.cfg.audio.equalizer.Q[0]" @change="changeQ(0)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[1]" @change="changeGain(1)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[1]" @change="changeGain(1)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="44" max="88" step="4"
|
||||
v-model="$root.cfg.audio.equalizer.frequencies[1]" @change="changeFreq(1)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1"
|
||||
v-model="$root.cfg.audio.equalizer.Q[1]" @change="changeQ(1)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="88" max="177" step="8"
|
||||
v-model="$root.cfg.audio.equalizer.frequencies[2]" @change="changeFreq(2)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1"
|
||||
v-model="$root.cfg.audio.equalizer.Q[2]" @change="changeQ(2)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[3]" @change="changeGain(3)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[3]" @change="changeGain(3)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="177" max="355" step="16"
|
||||
v-model="$root.cfg.audio.equalizer.frequencies[3]" @change="changeFreq(3)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1"
|
||||
v-model="$root.cfg.audio.equalizer.Q[3]" @change="changeQ(3)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[4]" @change="changeGain(4)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[4]" @change="changeGain(4)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="355" max="710" step="32"
|
||||
v-model="$root.cfg.audio.equalizer.frequencies[4]" @change="changeFreq(4)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1"
|
||||
v-model="$root.cfg.audio.equalizer.Q[4]" @change="changeQ(4)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[5]" @change="changeGain(5)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[5]" @change="changeGain(5)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="710" max="1420" step="64"
|
||||
v-model="$root.cfg.audio.equalizer.frequencies[5]" @change="changeFreq(5)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1"
|
||||
v-model="$root.cfg.audio.equalizer.Q[5]" @change="changeQ(5)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[6]" @change="changeGain(6)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[6]" @change="changeGain(6)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="1420" max="2840" step="128"
|
||||
v-model="$root.cfg.audio.equalizer.frequencies[6]" @change="changeFreq(6)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1"
|
||||
v-model="$root.cfg.audio.equalizer.Q[6]" @change="changeQ(6)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[7]" @change="changeGain(7)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[7]" @change="changeGain(7)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="2840" max="5680" step="256"
|
||||
v-model="$root.cfg.audio.equalizer.frequencies[7]" @change="changeFreq(7)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1"
|
||||
v-model="$root.cfg.audio.equalizer.Q[7]" @change="changeQ(7)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[8]" @change="changeGain(8)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[8]" @change="changeGain(8)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="5680" max="11360" step="512"
|
||||
v-model="$root.cfg.audio.equalizer.frequencies[8]" @change="changeFreq(8)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1"
|
||||
v-model="$root.cfg.audio.equalizer.Q[8]" @change="changeQ(8)">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[9]" @change="changeGain(9)">
|
||||
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12"
|
||||
step="0.1" v-model="$root.cfg.audio.equalizer.gain[9]" @change="changeGain(9)">
|
||||
<input type="number" class="eq-freq" orient="vertical" min="11360" max="22720" step="1024"
|
||||
v-model="$root.cfg.audio.equalizer.frequencies[9]" @change="changeFreq(9)">
|
||||
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1"
|
||||
v-model="$root.cfg.audio.equalizer.Q[9]" @change="changeQ(9)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-lowercontent">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="md-btn" style="width:100%" @click="resetGain()">{{$root.getLz('term.reset')}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="md-btn" style="width:100%" @click="presetOptions($event)">
|
||||
{{$root.getLz('term.menu')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('eq-view', {
|
||||
template: '#eq-view',
|
||||
data: function() {
|
||||
return {
|
||||
// app: this.$root,
|
||||
eqPreset: function() {
|
||||
this.preset = uuidv4()
|
||||
this.name = ""
|
||||
this.frequencies = []
|
||||
this.gain = []
|
||||
this.Q = []
|
||||
this.mix = 1
|
||||
this.vibrantBass = 0
|
||||
this.userGenerated = true
|
||||
},
|
||||
defaultPresets: [
|
||||
{
|
||||
'preset': 'default',
|
||||
'name': 'Default',
|
||||
'frequencies': [32, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000],
|
||||
'gain': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
'Q': [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'boostAiriness',
|
||||
'name': 'Boost Airiness',
|
||||
'frequencies': [1169, 1733, 5962, 8688, 14125, 18628, 18628, 19000, 19500, 20000],
|
||||
'gain': [-1.41, 0.25, 3.33, 0.22, -0.53, 0.2, 3.64, 0, 0, 0],
|
||||
'Q': [0.405, 2.102, 0.025, 2.5, 7.071, 1.768, 1.146, 1, 1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'acoustic',
|
||||
'name': 'Acoustic',
|
||||
'frequencies': [32, 75, 125, 220, 700, 1000, 2000, 4000, 10000, 16000],
|
||||
'gain': [0, -8, 0, -0.1, -3, 0, 0, 0, 4, 0],
|
||||
'Q': [1, 0.2, 1, 2.0, 1.4, 1, 1, 1, 0.1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'clearVocal',
|
||||
'name': 'Clear Vocal',
|
||||
'frequencies': [20, 63, 125, 250, 400, 1000, 2000, 4000, 8000, 20000],
|
||||
'gain': [-22, 0, 0, 0, -3, 0, 1.8, 0, 0, 3.5],
|
||||
'Q': [0.3, 1, 1, 1, 2.0, 1, 0.7, 1, 1, 0.8],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'instrumentClarity',
|
||||
'name': 'Instrument Clarity',
|
||||
'frequencies': [20, 63, 155, 250, 500, 1000, 2000, 5000, 11000, 16000],
|
||||
'gain': [-15, 0, -3, 0, 0, 0, 0, 3.1, 0, 0],
|
||||
'Q': [0.5, 1, 2, 1, 1, 1, 1, 1.5, 0.1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'reduceHarshness',
|
||||
'name': 'Reduce Harshness',
|
||||
'frequencies': [32, 63, 125, 250, 500, 1128, 2000, 4057, 8000, 16000],
|
||||
'gain': [0, 0, 0, 0, 0, 2, 0, -6.4, 0, 0],
|
||||
'Q': [1, 1, 1, 1, 1, 2, 1, 1, 1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'smileyFace',
|
||||
'name': 'Smiley Face',
|
||||
'frequencies': [35, 63, 125, 250, 500, 800, 2000, 4000, 8000, 20000],
|
||||
'gain': [5, 0, 0, 0, 0, -5, 0, 0, 0, 5],
|
||||
'Q': [0.1, 1, 1, 1, 1, 0.6, 1, 1, 1, 0.2],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
},
|
||||
{
|
||||
'preset': 'bassBoostSurgical',
|
||||
'name': 'Surgical Bass Boost',
|
||||
'frequencies': [32, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000],
|
||||
'gain': [2.7, 2.2, 1.6, 1.4, 0.6, 0, 0, 0, 0, 0],
|
||||
'Q': [1.4, 1.4, 1.4, 1.4, 1.4, 1, 1, 1, 1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}, {
|
||||
'preset': 'bassBoostClassic',
|
||||
'name': 'Classic Bass Boost',
|
||||
'frequencies': [32, 63, 160, 250, 500, 1000, 2000, 3500, 8000, 20000],
|
||||
'gain': [2.7, 2.2, 1.6, 1.4, 0.6, 0, 0, 0, 0, 0],
|
||||
'Q': [0.7, 0.7, 0.7, 0.7, 0.7, 1, 1, 1, 1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
'userGenerated': false
|
||||
}]
|
||||
}
|
||||
},
|
||||
props: ["src", "url"],
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
presetOptions(event) {
|
||||
let menu = {
|
||||
items: {
|
||||
"new": {
|
||||
"icon": "./assets/feather/plus.svg",
|
||||
"name": app.getLz('action.newpreset'),
|
||||
action: () => {
|
||||
this.addPreset()
|
||||
}
|
||||
},
|
||||
"delete": {
|
||||
"icon": "./assets/feather/x-circle.svg",
|
||||
"name": app.getLz('action.deletepreset'),
|
||||
action: () => {
|
||||
this.deletePreset()
|
||||
}
|
||||
},
|
||||
"import": {
|
||||
"icon": "./assets/feather/share.svg",
|
||||
"name": app.getLz('action.import'),
|
||||
action: () => {
|
||||
this.importPreset()
|
||||
}
|
||||
},
|
||||
"export": {
|
||||
"icon": "./assets/feather/share.svg",
|
||||
"name": app.getLz('action.export'),
|
||||
action: () => {
|
||||
this.exportPreset()
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.$root.cfg.audio.equalizer.userGenerated) {
|
||||
delete menu.items.delete
|
||||
}
|
||||
|
||||
app.showMenuPanel(menu, event)
|
||||
},
|
||||
sharePreset(event) {
|
||||
let menu = {
|
||||
items: [
|
||||
{
|
||||
"icon": "./assets/feather/share.svg",
|
||||
"name": app.getLz('action.import'),
|
||||
"action": function() {
|
||||
notyf.error("Not implemented yet")
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/share.svg",
|
||||
"name": app.getLz('action.export'),
|
||||
"action": function() {
|
||||
notyf.error("Not implemented yet")
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
app.showMenuPanel(menu, event)
|
||||
},
|
||||
deletePreset() {
|
||||
let presets = this.$root.cfg.audio.equalizer.presets
|
||||
app.confirm(app.getLz('term.deletepreset.warn'), (result) => {
|
||||
if (result) {
|
||||
this.changePreset("default")
|
||||
// find the preset by id (preset) and remove it
|
||||
let index = presets.findIndex(p => p.preset == this.preset)
|
||||
presets.splice(index, 1)
|
||||
notyf.success(app.getLz('term.deletedpreset'))
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
app.modals.equalizer = false
|
||||
},
|
||||
changeVibrantBass() {
|
||||
if (app.cfg.audio.equalizer.vibrantBass !== '0') {
|
||||
try {
|
||||
for (var i = 0; i < 21; i++) {
|
||||
CiderAudio.audioNodes.vibrantbassNode[i].gain.value = app.cfg.audio.maikiwiAudio.vibrantBass.gain[i] * (app.cfg.audio.equalizer.vibrantBass / 10);
|
||||
}
|
||||
CiderAudio.intelliGainComp_n0_0();
|
||||
} catch (e) {
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
} else {
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
},
|
||||
changeMix() {
|
||||
if (Math.max(...app.cfg.audio.equalizer.gain) != 0) {
|
||||
try {
|
||||
for (var i = 0; i < 10; i++) {
|
||||
CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer.gain[i] * app.cfg.audio.equalizer.mix
|
||||
}
|
||||
CiderAudio.intelliGainComp_n0_0();
|
||||
} catch (e) {
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
}
|
||||
},
|
||||
changeGain(i) {
|
||||
if (Math.max(...app.cfg.audio.equalizer.gain) != 0) {
|
||||
try {
|
||||
CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer.gain[i] * app.cfg.audio.equalizer.mix
|
||||
CiderAudio.intelliGainComp_n0_0();
|
||||
} catch (e) {
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
} else {
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
},
|
||||
changeFreq(i) {
|
||||
CiderAudio.audioNodes.audioBands[i].frequency.value = app.cfg.audio.equalizer.frequencies[i]
|
||||
},
|
||||
changeQ(i) {
|
||||
CiderAudio.audioNodes.audioBands[i].Q.value = app.cfg.audio.equalizer.Q[i]
|
||||
},
|
||||
resetGain() {
|
||||
this.applyPreset({
|
||||
'frequencies': [32, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000],
|
||||
'gain': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
'Q': [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
'mix': 1,
|
||||
'vibrantBass': 0,
|
||||
})
|
||||
if (app.cfg.audio.equalizer.userGenerated) {
|
||||
this.saveSelectedPreset()
|
||||
}
|
||||
},
|
||||
addPreset() {
|
||||
let self = this
|
||||
app.prompt(app.getLz('term.newpreset.name'), (res) => {
|
||||
if (res) {
|
||||
let eqSettings = Clone(app.cfg.audio.equalizer)
|
||||
let newPreset = new self.eqPreset()
|
||||
newPreset.name = res
|
||||
newPreset.frequencies = eqSettings.frequencies
|
||||
newPreset.gain = eqSettings.gain
|
||||
newPreset.Q = eqSettings.Q
|
||||
newPreset.mix = eqSettings.mix
|
||||
newPreset.vibrantBass = eqSettings.vibrantBass
|
||||
app.cfg.audio.equalizer.presets.push(newPreset)
|
||||
notyf.success(app.getLz('term.addedpreset'))
|
||||
self.changePreset(newPreset.preset)
|
||||
}
|
||||
})
|
||||
},
|
||||
saveSelectedPreset() {
|
||||
// Save the current settings to the selected preset
|
||||
let self = this
|
||||
//let preset = app.cfg.audio.equalizer.presets[app.cfg.audio.equalizer.preset]
|
||||
// find the preset by its id (preset)
|
||||
let preset = app.cfg.audio.equalizer.presets.find(p => p.preset == app.cfg.audio.equalizer.preset)
|
||||
preset.frequencies = app.cfg.audio.equalizer.frequencies
|
||||
preset.gain = app.cfg.audio.equalizer.gain
|
||||
preset.Q = app.cfg.audio.equalizer.Q
|
||||
preset.mix = app.cfg.audio.equalizer.mix
|
||||
preset.vibrantBass = app.cfg.audio.equalizer.vibrantBass
|
||||
notyf.success("Saved Preset")
|
||||
},
|
||||
exportPreset() {
|
||||
let preset = app.cfg.audio.equalizer.presets.find(p => p.preset == app.cfg.audio.equalizer.preset)
|
||||
this.$root.copyToClipboard(btoa(JSON.stringify(preset)))
|
||||
},
|
||||
importPreset() {
|
||||
let self = this
|
||||
app.prompt("Enter preset share code", (res) => {
|
||||
if (res) {
|
||||
let preset = JSON.parse(atob(res))
|
||||
if (preset.frequencies && preset.gain && preset.Q && preset.mix && preset.vibrantBass) {
|
||||
// self.applyPreset(preset)
|
||||
app.cfg.audio.equalizer.presets.push(preset)
|
||||
notyf.success(`${preset.name} has been imported.`)
|
||||
} else {
|
||||
notyf.error("Invalid Preset")
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
applyPreset(preset) {
|
||||
Object.assign(this.$root.cfg.audio.equalizer, preset)
|
||||
this.changeVibrantBass()
|
||||
for (var i = 0; i < 10; i++) {
|
||||
try {
|
||||
CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer.gain[i] * app.cfg.audio.equalizer.mix
|
||||
} catch (e) {
|
||||
CiderAudio.hierarchical_loading();
|
||||
CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer.gain[i] * app.cfg.audio.equalizer.mix
|
||||
}
|
||||
|
||||
CiderAudio.audioNodes.audioBands[i].frequency.value = app.cfg.audio.equalizer.frequencies[i]
|
||||
CiderAudio.audioNodes.audioBands[i].Q.value = app.cfg.audio.equalizer.Q[i]
|
||||
}
|
||||
CiderAudio.intelliGainComp_n0_0();
|
||||
},
|
||||
changePreset(id) {
|
||||
let userPresets = app.cfg.audio.equalizer.presets
|
||||
let defaultPresets = Clone(this.defaultPresets)
|
||||
|
||||
let presets = defaultPresets.concat(userPresets)
|
||||
console.log(presets)
|
||||
let preset = presets.find(p => p.preset == id)
|
||||
|
||||
console.log(preset)
|
||||
|
||||
if (preset) {
|
||||
this.applyPreset(preset)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -14,19 +14,26 @@
|
|||
</div>
|
||||
<div class="fs-header" v-if="immersiveEnabled">
|
||||
<div class="top-nav-group">
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" svg-icon-name="home" page="home">
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('home.title')"
|
||||
svg-icon="./assets/feather/home.svg" svg-icon-name="home" page="home">
|
||||
</sidebar-library-item>
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg" svg-icon-name="listenNow"
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.listenNow')"
|
||||
svg-icon="./assets/feather/play-circle.svg" svg-icon-name="listenNow"
|
||||
page="listen_now"></sidebar-library-item>
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg" svg-icon-name="browse" page="browse">
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.browse')"
|
||||
svg-icon="./assets/feather/globe.svg" svg-icon-name="browse" page="browse">
|
||||
</sidebar-library-item>
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" svg-icon-name="radio" page="radio">
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.radio')"
|
||||
svg-icon="./assets/feather/radio.svg" svg-icon-name="radio" page="radio">
|
||||
</sidebar-library-item>
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.library')" svg-icon="./assets/feather/radio.svg" svg-icon-name="library" page="library">
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.library')"
|
||||
svg-icon="./assets/feather/radio.svg" svg-icon-name="library" page="library">
|
||||
</sidebar-library-item>
|
||||
<sidebar-library-item @click.native="tabMode = ''" :name="$root.getLz('term.nowPlaying')" svg-icon="./assets/play.svg" svg-icon-name="nowPlaying" page="nowPlaying">
|
||||
<sidebar-library-item @click.native="tabMode = ''" :name="$root.getLz('term.nowPlaying')"
|
||||
svg-icon="./assets/play.svg" svg-icon-name="nowPlaying" page="nowPlaying">
|
||||
</sidebar-library-item>
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" name="" svg-icon="./assets/search.svg" svg-icon-name="search" page="search">
|
||||
<sidebar-library-item @click.native="tabMode = 'catalog'" name="" svg-icon="./assets/search.svg"
|
||||
svg-icon-name="search" page="search">
|
||||
</sidebar-library-item>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -59,7 +66,8 @@
|
|||
</div>
|
||||
<div class="song-artist item-navigate" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed('album') && app.fullscreen(false)">
|
||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? (app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ?
|
||||
(app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -139,7 +147,7 @@
|
|||
v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="col right-col" v-if="tabMode != ''">
|
||||
|
|
@ -175,77 +183,77 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('fullscreen-view', {
|
||||
template: '#fullscreen-view',
|
||||
props: {
|
||||
time: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
lyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
richlyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
tabMode: "lyrics",
|
||||
video: null,
|
||||
immersiveEnabled: app.cfg.advanced.experiments.includes("immersive-preview")
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
if (app.mk.nowPlayingItem._container.type == "albums") {
|
||||
try {
|
||||
const result = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/${app.mk.nowPlayingItem._container.type}/${app.mk.nowPlayingItem._container.id}`, {
|
||||
"fields": "editorialArtwork,editorialVideo",
|
||||
})).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||
if (result) {
|
||||
this.video = result
|
||||
} else {
|
||||
this.video = null
|
||||
}
|
||||
} catch (e) {
|
||||
this.video = null
|
||||
e = null
|
||||
}
|
||||
} else if (app.mk.nowPlayingItem._container.type == "library-albums") {
|
||||
try {
|
||||
const result = (await app.mk.api.v3.music(`/v1/me/library/albums/${app.mk.nowPlayingItem._container.id}/catalog`
|
||||
, {"fields": "editorialArtwork,editorialVideo"})).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||
if (result) {
|
||||
this.video = result
|
||||
} else {
|
||||
this.video = null
|
||||
}
|
||||
} catch (e) {
|
||||
e = null
|
||||
this.video = null
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener('keyup', this.onEscapeKeyUp);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('keyup', this.onEscapeKeyUp)
|
||||
},
|
||||
methods: {
|
||||
onEscapeKeyUp(event) {
|
||||
if (event.which === 27) {
|
||||
app.fullscreen(false);
|
||||
console.log('js')
|
||||
}
|
||||
},
|
||||
Vue.component('fullscreen-view', {
|
||||
template: '#fullscreen-view',
|
||||
props: {
|
||||
time: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
lyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
richlyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
tabMode: "lyrics",
|
||||
video: null,
|
||||
immersiveEnabled: app.cfg.advanced.experiments.includes("immersive-preview")
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
if (app.mk.nowPlayingItem._container.type == "albums") {
|
||||
try {
|
||||
const result = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/${app.mk.nowPlayingItem._container.type}/${app.mk.nowPlayingItem._container.id}`, {
|
||||
"fields": "editorialArtwork,editorialVideo",
|
||||
})).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||
if (result) {
|
||||
this.video = result
|
||||
} else {
|
||||
this.video = null
|
||||
}
|
||||
} catch (e) {
|
||||
this.video = null
|
||||
e = null
|
||||
}
|
||||
});
|
||||
</script>
|
||||
} else if (app.mk.nowPlayingItem._container.type == "library-albums") {
|
||||
try {
|
||||
const result = (await app.mk.api.v3.music(`/v1/me/library/albums/${app.mk.nowPlayingItem._container.id}/catalog`
|
||||
, { "fields": "editorialArtwork,editorialVideo" })).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
|
||||
if (result) {
|
||||
this.video = result
|
||||
} else {
|
||||
this.video = null
|
||||
}
|
||||
} catch (e) {
|
||||
e = null
|
||||
this.video = null
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener('keyup', this.onEscapeKeyUp);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('keyup', this.onEscapeKeyUp)
|
||||
},
|
||||
methods: {
|
||||
onEscapeKeyUp(event) {
|
||||
if (event.which === 27) {
|
||||
app.fullscreen(false);
|
||||
console.log('js')
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
var hw = Vue.component('hello-world', {
|
||||
template: '#hello-world',
|
||||
methods: {
|
||||
sayHello: function () {
|
||||
alert('Hello world!');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
var hw = Vue.component('hello-world', {
|
||||
template: '#hello-world',
|
||||
methods: {
|
||||
sayHello: function() {
|
||||
alert('Hello world!');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<template v-if="item.type == 'artists'">
|
||||
<mediaitem-square :item="item"></mediaitem-square>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-else>
|
||||
<mediaitem-list-item
|
||||
v-if="getKind(item) == 'song'"
|
||||
:index="key"
|
||||
|
|
@ -14,11 +14,13 @@
|
|||
<mediaitem-square v-else :item="item" :type="getKind(item)"></mediaitem-square>
|
||||
</template>
|
||||
</template>
|
||||
<button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{this.app.getLz('term.showMore')}}
|
||||
<button v-if="triggerEnabled" style="opacity:0;height: 32px;"
|
||||
v-observe-visibility="{callback: visibilityChanged}">{{this.app.getLz('term.showMore')}}
|
||||
</button>
|
||||
</div>
|
||||
<transition name="fabfade">
|
||||
<button class="top-fab" v-show="showFab" @click="scrollToTop()" :aria-label="app.getLz('action.scrollToTop')">
|
||||
<button class="top-fab" v-show="showFab" @click="scrollToTop()"
|
||||
:aria-label="app.getLz('action.scrollToTop')">
|
||||
<%- include("../svg/arrow-up.svg") %>
|
||||
</button>
|
||||
</transition>
|
||||
|
|
@ -28,104 +30,104 @@
|
|||
</div>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('inline-collection-list', {
|
||||
template: "#inline-collection-list",
|
||||
props: {
|
||||
data: {
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "artists"
|
||||
},
|
||||
parentSelector: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
triggerEnabled: true,
|
||||
canSeeTrigger: false,
|
||||
showFab: false,
|
||||
commonKind: "song",
|
||||
api: this.$root.mk.api,
|
||||
loading: false,
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getKind(item) {
|
||||
if (typeof item.kind != "undefined") {
|
||||
this.commonKind = item.kind;
|
||||
return item.kind
|
||||
}
|
||||
if (typeof item.attributes.playParams != "undefined") {
|
||||
this.commonKind = item.attributes.playParams.kind
|
||||
return item.attributes.playParams.kind
|
||||
}
|
||||
return this.commonKind
|
||||
},
|
||||
scrollToTop() {
|
||||
let target = document.querySelector(".header-text")
|
||||
document.querySelector(this.parentSelector ?? ".collection-page").scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
},
|
||||
getNext() {
|
||||
let self = this
|
||||
this.triggerEnabled = false;
|
||||
if (typeof this.data.next == "undefined") {
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
|
||||
this.api.v3.music(this.data.next, app.collectionList.requestBody).then((response) => {
|
||||
console.log(response)
|
||||
if (!app.collectionList.response.groups) {
|
||||
this.data.data = this.data.data.concat(response.data.data);
|
||||
if (response.data.next) {
|
||||
this.data.next = response.data.next;
|
||||
this.triggerEnabled = true;
|
||||
}
|
||||
this.loading = false
|
||||
} else {
|
||||
if (!response.data.results[app.collectionList.response.groups]) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
this.data.data = this.data.data.concat(response.data.results[app.collectionList.response.groups].data);
|
||||
if (response.data.results[app.collectionList.response.groups].next) {
|
||||
this.data.next = response.data.results[app.collectionList.response.groups].next;
|
||||
this.triggerEnabled = true;
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
headerVisibility: function(isVisible, entry) {
|
||||
if (isVisible) {
|
||||
this.showFab = false;
|
||||
} else {
|
||||
this.showFab = true;
|
||||
}
|
||||
},
|
||||
visibilityChanged: function(isVisible, entry) {
|
||||
if (isVisible) {
|
||||
this.canSeeTrigger = true;
|
||||
this.getNext();
|
||||
} else {
|
||||
this.canSeeTrigger = false;
|
||||
}
|
||||
}
|
||||
Vue.component('inline-collection-list', {
|
||||
template: "#inline-collection-list",
|
||||
props: {
|
||||
data: {
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "artists"
|
||||
},
|
||||
parentSelector: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
triggerEnabled: true,
|
||||
canSeeTrigger: false,
|
||||
showFab: false,
|
||||
commonKind: "song",
|
||||
api: this.$root.mk.api,
|
||||
loading: false,
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getKind(item) {
|
||||
if (typeof item.kind != "undefined") {
|
||||
this.commonKind = item.kind;
|
||||
return item.kind
|
||||
}
|
||||
})
|
||||
</script>
|
||||
if (typeof item.attributes.playParams != "undefined") {
|
||||
this.commonKind = item.attributes.playParams.kind
|
||||
return item.attributes.playParams.kind
|
||||
}
|
||||
return this.commonKind
|
||||
},
|
||||
scrollToTop() {
|
||||
let target = document.querySelector(".header-text")
|
||||
document.querySelector(this.parentSelector ?? ".collection-page").scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
},
|
||||
getNext() {
|
||||
let self = this
|
||||
this.triggerEnabled = false;
|
||||
if (typeof this.data.next == "undefined") {
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
|
||||
this.api.v3.music(this.data.next, app.collectionList.requestBody).then((response) => {
|
||||
console.log(response)
|
||||
if (!app.collectionList.response.groups) {
|
||||
this.data.data = this.data.data.concat(response.data.data);
|
||||
if (response.data.next) {
|
||||
this.data.next = response.data.next;
|
||||
this.triggerEnabled = true;
|
||||
}
|
||||
this.loading = false
|
||||
} else {
|
||||
if (!response.data.results[app.collectionList.response.groups]) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
this.data.data = this.data.data.concat(response.data.results[app.collectionList.response.groups].data);
|
||||
if (response.data.results[app.collectionList.response.groups].next) {
|
||||
this.data.next = response.data.results[app.collectionList.response.groups].next;
|
||||
this.triggerEnabled = true;
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
headerVisibility: function(isVisible, entry) {
|
||||
if (isVisible) {
|
||||
this.showFab = false;
|
||||
} else {
|
||||
this.showFab = true;
|
||||
}
|
||||
},
|
||||
visibilityChanged: function(isVisible, entry) {
|
||||
if (isVisible) {
|
||||
this.canSeeTrigger = true;
|
||||
this.getNext();
|
||||
} else {
|
||||
this.canSeeTrigger = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<template v-for="segment in lyrics" v-if="segmentInRange(segment.ts, segment.te, segment.x)">
|
||||
<div class="verse-group active">
|
||||
<template v-for="(verse, verseIndex) in segment.l"
|
||||
v-if="verseInRange(segment.ts, segment.te, verse.o)">
|
||||
v-if="verseInRange(segment.ts, segment.te, verse.o)">
|
||||
<span class="verse verse-active">{{ verse.c }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -17,4 +17,4 @@
|
|||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,192 +1,197 @@
|
|||
<script type="text/x-template" id="libraryartist-item">
|
||||
<div v-observe-visibility="{callback: visibilityChanged}"
|
||||
<div v-observe-visibility="{callback: visibilityChanged}"
|
||||
@click="select"
|
||||
class="cd-mediaitem-list-item"
|
||||
:class="{'mediaitem-selected': app.select_hasMediaItem(guid)}"
|
||||
@contextmenu="contextMenu">
|
||||
<div class="artwork" v-show="isVisible" v-if="showArtwork == true">
|
||||
<mediaitem-artwork
|
||||
:url="getArtwork()"
|
||||
size="50"
|
||||
:type="item.type"></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}"
|
||||
@dblclick="app.routeView(item)">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
<div class="artwork" v-show="isVisible" v-if="showArtwork == true">
|
||||
<mediaitem-artwork
|
||||
:url="getArtwork()"
|
||||
size="50"
|
||||
:type="item.type"></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}"
|
||||
@dblclick="app.routeView(item)">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('libraryartist-item', {
|
||||
template: '#libraryartist-item',
|
||||
data: function () {
|
||||
return {
|
||||
isVisible: false,
|
||||
addedToLibrary: false,
|
||||
guid: this.uuidv4(),
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
props: {
|
||||
'item': {type: Object, required: true},
|
||||
'parent': {type: String, required: false},
|
||||
'index': {type: Number, required: false, default: -1},
|
||||
'show-artwork': {type: Boolean, default: true},
|
||||
'show-library-status': {type: Boolean, default: true},
|
||||
'show-meta-data': {type: Boolean, default: false},
|
||||
'show-duration': {type: Boolean, default: true},
|
||||
'contextExt': {type: Object, required: false},
|
||||
},
|
||||
methods: {
|
||||
uuidv4() {
|
||||
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
|
||||
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
||||
);
|
||||
},
|
||||
msToMinSec(ms) {
|
||||
var minutes = Math.floor(ms / 60000);
|
||||
var seconds = ((ms % 60000) / 1000).toFixed(0);
|
||||
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
|
||||
},
|
||||
getDataType() {
|
||||
return this.item.type
|
||||
},
|
||||
async select(e) {
|
||||
let u = this.item
|
||||
let u1 = await app.mk.api.v3.music(`/v1/me/library/artists/${u.id}/albums`, {
|
||||
"platform": "web",
|
||||
"include[library-albums]": "artists,tracks",
|
||||
"include[library-artists]": "catalog",
|
||||
"fields[artists]": "url",
|
||||
"includeOnly": "catalog,artists"
|
||||
})
|
||||
app.showCollection({data : Object.assign({},u1.data.data)}, u.attributes.name?? '', '');
|
||||
app.select_selectMediaItem(u.id, this.getDataType(), this.index, this.guid, true)
|
||||
},
|
||||
getArtwork(){
|
||||
let u = ""
|
||||
try{
|
||||
u = this.item.relationships.catalog.data[0].attributes.artwork.url}
|
||||
catch (e){};
|
||||
return u;
|
||||
},
|
||||
contextMenu(event) {
|
||||
|
||||
let self = this
|
||||
let data_type = this.getDataType()
|
||||
|
||||
let item = self.item
|
||||
item.attributes.artistName = item.attributes.name;
|
||||
|
||||
let useMenu = "normal"
|
||||
if (app.selectedMediaItems.length <= 1) {
|
||||
app.selectedMediaItems = []
|
||||
app.select_selectMediaItem(this.item.id, data_type, this.index, this.guid, true)
|
||||
} else {
|
||||
useMenu = "multiple"
|
||||
}
|
||||
|
||||
let menus = {
|
||||
multiple: {
|
||||
items: [] //
|
||||
},
|
||||
normal: {
|
||||
items: [
|
||||
{
|
||||
"name": app.getLz('action.goToArtist'),
|
||||
"icon": "./assets/feather/user.svg",
|
||||
"action": function () {
|
||||
app.searchAndNavigate(self.item, 'artist')
|
||||
console.log(self.item)
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/radio.svg",
|
||||
"name": app.getLz('action.startRadio'),
|
||||
"action": function () {
|
||||
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
|
||||
app.mk.play()
|
||||
app.selectedMediaItems = []
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/share.svg",
|
||||
"name": app.getLz('action.share'),
|
||||
"action": function () {
|
||||
if (!self.item.attributes.url && self.item.relationships){
|
||||
if (self.item.relationships.catalog){
|
||||
app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => {self.app.copyToClipboard((u.data.data.length && u.data.data.length > 0)? u.data.data[0].attributes.url : u.data.data.attributes.url)})
|
||||
}
|
||||
} else {
|
||||
self.app.copyToClipboard(self.item.attributes.url)}
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
if (this.contextExt) {
|
||||
// if this.context-ext.normal is true append all options to the 'normal' menu which is a kvp of arrays
|
||||
if (this.contextExt.normal) {
|
||||
menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
|
||||
}
|
||||
if (this.contextExt.multiple) {
|
||||
menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
|
||||
}
|
||||
}
|
||||
//CiderContextMenu.Create(event, menus[useMenu]); // Depreciated Context Menu
|
||||
app.showMenuPanel(menus[useMenu], event);
|
||||
|
||||
},
|
||||
visibilityChanged: function (isVisible, entry) {
|
||||
this.isVisible = isVisible
|
||||
},
|
||||
addToLibrary() {
|
||||
let item = this.item
|
||||
if (item.attributes.playParams.id) {
|
||||
console.log('adding to library', item.attributes.playParams.id)
|
||||
app.addToLibrary(item.attributes.playParams.id.toString())
|
||||
this.addedToLibrary = true
|
||||
} else if (item.id) {
|
||||
console.log('adding to library', item.id)
|
||||
app.addToLibrary(item.id.toString())
|
||||
this.addedToLibrary = true
|
||||
}
|
||||
},
|
||||
async removeFromLibrary() {
|
||||
let item = this.item
|
||||
let params = {"fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library"}
|
||||
let id = item.id ?? item.attributes.playParams.id
|
||||
let res = await app.mkapi(item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.playParams.id ?? item.id, params);
|
||||
if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
|
||||
id = res.relationships.library.data[0].id
|
||||
}
|
||||
let kind = this.item.attributes.playParams.kind ?? this.data.item ?? '';
|
||||
let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
|
||||
if (item.attributes.playParams.id) {
|
||||
console.log('remove from library', id)
|
||||
app.removeFromLibrary(truekind, id)
|
||||
this.addedToLibrary = false
|
||||
} else if (item.id) {
|
||||
console.log('remove from library', id)
|
||||
app.removeFromLibrary(truekind, id)
|
||||
this.addedToLibrary = false
|
||||
}
|
||||
},
|
||||
playTrack() {
|
||||
let item = this.item
|
||||
let parent = this.parent
|
||||
let childIndex = this.index
|
||||
console.log(item, parent, childIndex)
|
||||
if (parent != null && childIndex != null) {
|
||||
app.queueParentandplayChild(parent, childIndex, item);
|
||||
} else {
|
||||
app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
|
||||
}
|
||||
}
|
||||
Vue.component('libraryartist-item', {
|
||||
template: '#libraryartist-item',
|
||||
data: function() {
|
||||
return {
|
||||
isVisible: false,
|
||||
addedToLibrary: false,
|
||||
guid: this.uuidv4(),
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
props: {
|
||||
'item': { type: Object, required: true },
|
||||
'parent': { type: String, required: false },
|
||||
'index': { type: Number, required: false, default: -1 },
|
||||
'show-artwork': { type: Boolean, default: true },
|
||||
'show-library-status': { type: Boolean, default: true },
|
||||
'show-meta-data': { type: Boolean, default: false },
|
||||
'show-duration': { type: Boolean, default: true },
|
||||
'contextExt': { type: Object, required: false },
|
||||
},
|
||||
methods: {
|
||||
uuidv4() {
|
||||
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
|
||||
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
||||
);
|
||||
},
|
||||
msToMinSec(ms) {
|
||||
var minutes = Math.floor(ms / 60000);
|
||||
var seconds = ((ms % 60000) / 1000).toFixed(0);
|
||||
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
|
||||
},
|
||||
getDataType() {
|
||||
return this.item.type
|
||||
},
|
||||
async select(e) {
|
||||
let u = this.item
|
||||
let u1 = await app.mk.api.v3.music(`/v1/me/library/artists/${u.id}/albums`, {
|
||||
"platform": "web",
|
||||
"include[library-albums]": "artists,tracks",
|
||||
"include[library-artists]": "catalog",
|
||||
"fields[artists]": "url",
|
||||
"includeOnly": "catalog,artists"
|
||||
})
|
||||
app.showCollection({ data: Object.assign({}, u1.data.data) }, u.attributes.name ?? '', '');
|
||||
app.select_selectMediaItem(u.id, this.getDataType(), this.index, this.guid, true)
|
||||
},
|
||||
getArtwork() {
|
||||
let u = ""
|
||||
try {
|
||||
u = this.item.relationships.catalog.data[0].attributes.artwork.url
|
||||
} catch (e) {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
;
|
||||
return u;
|
||||
},
|
||||
contextMenu(event) {
|
||||
|
||||
let self = this
|
||||
let data_type = this.getDataType()
|
||||
|
||||
let item = self.item
|
||||
item.attributes.artistName = item.attributes.name;
|
||||
|
||||
let useMenu = "normal"
|
||||
if (app.selectedMediaItems.length <= 1) {
|
||||
app.selectedMediaItems = []
|
||||
app.select_selectMediaItem(this.item.id, data_type, this.index, this.guid, true)
|
||||
} else {
|
||||
useMenu = "multiple"
|
||||
}
|
||||
|
||||
let menus = {
|
||||
multiple: {
|
||||
items: [] //
|
||||
},
|
||||
normal: {
|
||||
items: [
|
||||
{
|
||||
"name": app.getLz('action.goToArtist'),
|
||||
"icon": "./assets/feather/user.svg",
|
||||
"action": function() {
|
||||
app.searchAndNavigate(self.item, 'artist')
|
||||
console.log(self.item)
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/radio.svg",
|
||||
"name": app.getLz('action.startRadio'),
|
||||
"action": function() {
|
||||
app.mk.setStationQueue({ song: self.item.attributes.playParams.id ?? self.item.id }).then(() => {
|
||||
app.mk.play()
|
||||
app.selectedMediaItems = []
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/share.svg",
|
||||
"name": app.getLz('action.share'),
|
||||
"action": function() {
|
||||
if (!self.item.attributes.url && self.item.relationships) {
|
||||
if (self.item.relationships.catalog) {
|
||||
app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => {
|
||||
self.app.copyToClipboard((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
self.app.copyToClipboard(self.item.attributes.url)
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
if (this.contextExt) {
|
||||
// if this.context-ext.normal is true append all options to the 'normal' menu which is a kvp of arrays
|
||||
if (this.contextExt.normal) {
|
||||
menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
|
||||
}
|
||||
if (this.contextExt.multiple) {
|
||||
menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
|
||||
}
|
||||
}
|
||||
//CiderContextMenu.Create(event, menus[useMenu]); // Depreciated Context Menu
|
||||
app.showMenuPanel(menus[useMenu], event);
|
||||
|
||||
},
|
||||
visibilityChanged: function(isVisible, entry) {
|
||||
this.isVisible = isVisible
|
||||
},
|
||||
addToLibrary() {
|
||||
let item = this.item
|
||||
if (item.attributes.playParams.id) {
|
||||
console.log('adding to library', item.attributes.playParams.id)
|
||||
app.addToLibrary(item.attributes.playParams.id.toString())
|
||||
this.addedToLibrary = true
|
||||
} else if (item.id) {
|
||||
console.log('adding to library', item.id)
|
||||
app.addToLibrary(item.id.toString())
|
||||
this.addedToLibrary = true
|
||||
}
|
||||
},
|
||||
async removeFromLibrary() {
|
||||
let item = this.item
|
||||
let params = { "fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library" }
|
||||
let id = item.id ?? item.attributes.playParams.id
|
||||
let res = await app.mkapi(item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.playParams.id ?? item.id, params);
|
||||
if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
|
||||
id = res.relationships.library.data[0].id
|
||||
}
|
||||
let kind = this.item.attributes.playParams.kind ?? this.data.item ?? '';
|
||||
let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
|
||||
if (item.attributes.playParams.id) {
|
||||
console.log('remove from library', id)
|
||||
app.removeFromLibrary(truekind, id)
|
||||
this.addedToLibrary = false
|
||||
} else if (item.id) {
|
||||
console.log('remove from library', id)
|
||||
app.removeFromLibrary(truekind, id)
|
||||
this.addedToLibrary = false
|
||||
}
|
||||
},
|
||||
playTrack() {
|
||||
let item = this.item
|
||||
let parent = this.parent
|
||||
let childIndex = this.index
|
||||
console.log(item, parent, childIndex)
|
||||
if (parent != null && childIndex != null) {
|
||||
app.queueParentandplayChild(parent, childIndex, item);
|
||||
} else {
|
||||
app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,92 +1,106 @@
|
|||
<script type="text/x-template" id="listennow-child">
|
||||
<div v-observe-visibility="{callback: visibilityChanged}">
|
||||
<template v-if="isVisible && recom.attributes.display.kind != 'MusicSuperHeroShelf'">
|
||||
<div class="row">
|
||||
<div class="col" v-if="recom?.relationships['primary-content']?.data?.length > 0" style="display: flex; margin-block:1rem;">
|
||||
<div @click="navigateContent(recom?.relationships['primary-content']?.data[0] ?? recom?.attributes?.title?.contentIds[0] ?? '')" class="listennow-chip" style="height: 40px;width: 40px;align-self: center;margin-right: 10px;" :class="{ 'circle': recom?.relationships['primary-content']?.data[0]?.type == 'artists' }">
|
||||
<mediaitem-artwork v-if="recom?.relationships['primary-content']?.data[0]?.attributes?.artwork != null" :url="recom?.relationships['primary-content']?.data[0]?.attributes?.artwork?.url" :size="100"></mediaitem-artwork>
|
||||
</div>
|
||||
<div @click="navigateContent(recom?.relationships['primary-content']?.data[0] ?? recom?.attributes?.title?.contentIds[0] ?? '')" style="width: fit-content;" :class="{'item-navigate' : (recom?.attributes?.title?.contentIds?.length ?? 0) > 0 | recom?.relationships['primary-content']?.data?.length > 0}">
|
||||
<span style="opacity: 0.5; font-weight: bold;"> {{ recom.attributes.titleWithoutName.stringForDisplay }} </span>
|
||||
<h3 style="margin-block: 0"> {{ recom?.relationships['primary-content']?.data[0].attributes?.name ?? recom.attributes.title.stringForDisplay.replace(recom.attributes.titleWithoutName.stringForDisplay, '') }}</h3>
|
||||
<template v-if="isVisible && recom.attributes.display.kind != 'MusicSuperHeroShelf'">
|
||||
<div class="row">
|
||||
<div class="col" v-if="recom?.relationships['primary-content']?.data?.length > 0"
|
||||
style="display: flex; margin-block:1rem;">
|
||||
<div @click="navigateContent(recom?.relationships['primary-content']?.data[0] ?? recom?.attributes?.title?.contentIds[0] ?? '')"
|
||||
class="listennow-chip" style="height: 40px;width: 40px;align-self: center;margin-right: 10px;"
|
||||
:class="{ 'circle': recom?.relationships['primary-content']?.data[0]?.type == 'artists' }">
|
||||
<mediaitem-artwork
|
||||
v-if="recom?.relationships['primary-content']?.data[0]?.attributes?.artwork != null"
|
||||
:url="recom?.relationships['primary-content']?.data[0]?.attributes?.artwork?.url"
|
||||
:size="100"></mediaitem-artwork>
|
||||
</div>
|
||||
<div @click="navigateContent(recom?.relationships['primary-content']?.data[0] ?? recom?.attributes?.title?.contentIds[0] ?? '')"
|
||||
style="width: fit-content;"
|
||||
:class="{'item-navigate' : (recom?.attributes?.title?.contentIds?.length ?? 0) > 0 | recom?.relationships['primary-content']?.data?.length > 0}">
|
||||
<span style="opacity: 0.5; font-weight: bold;"> {{ recom.attributes.titleWithoutName.stringForDisplay }} </span>
|
||||
<h3 style="margin-block: 0"> {{
|
||||
recom?.relationships['primary-content']?.data[0].attributes?.name ??
|
||||
recom.attributes.title.stringForDisplay.replace(recom.attributes.titleWithoutName.stringForDisplay,
|
||||
'') }}</h3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else style="display: flex; margin-block:1rem;">
|
||||
<h3 @click="navigateContent(recom?.relationships['primary-content']?.data[0] ?? recom?.attributes?.title?.contentIds[0] ?? '')"
|
||||
style="width: fit-content; margin-block:0;"
|
||||
:class="{'item-navigate' : (recom?.attributes?.title?.contentIds?.length ?? 0) > 0 | recom?.relationships['primary-content']?.data?.length > 0}">
|
||||
{{ recom.attributes.title ? recom.attributes.title.stringForDisplay : " "}}</h3>
|
||||
</div>
|
||||
<div class="col-auto cider-flex-center" v-if="recom.relationships.contents.data.length >= 10">
|
||||
<button class="cd-btn-seeall" @click="showCollection(recom)">{{app.getLz('term.seeAll')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else style="display: flex; margin-block:1rem;">
|
||||
<h3 @click="navigateContent(recom?.relationships['primary-content']?.data[0] ?? recom?.attributes?.title?.contentIds[0] ?? '')" style="width: fit-content; margin-block:0;" :class="{'item-navigate' : (recom?.attributes?.title?.contentIds?.length ?? 0) > 0 | recom?.relationships['primary-content']?.data?.length > 0}">
|
||||
{{ recom.attributes.title ? recom.attributes.title.stringForDisplay : " "}}</h3>
|
||||
</div>
|
||||
<div class="col-auto cider-flex-center" v-if="recom.relationships.contents.data.length >= 10">
|
||||
<button class="cd-btn-seeall" @click="showCollection(recom)" >{{app.getLz('term.seeAll')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="recom.attributes.display.kind == 'MusicCoverShelf' || recom.attributes.display.kind == 'MusicCircleCoverShelf'">
|
||||
<mediaitem-scroller-horizontal-large
|
||||
:items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
|
||||
<template
|
||||
v-if="recom.attributes.display.kind == 'MusicCoverShelf' || recom.attributes.display.kind == 'MusicCircleCoverShelf'">
|
||||
<mediaitem-scroller-horizontal-large
|
||||
:items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
|
||||
</template>
|
||||
<template v-else>
|
||||
<mediaitem-scroller-horizontal-sp
|
||||
:withReason="index==0"
|
||||
:items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<mediaitem-scroller-horizontal-sp
|
||||
:withReason="index==0"
|
||||
:items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>
|
||||
<template v-else-if="recom.attributes.display.kind != 'MusicSuperHeroShelf'">
|
||||
<div style="height:330px"></div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="recom.attributes.display.kind != 'MusicSuperHeroShelf'">
|
||||
<div style="height:330px"> </div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('listennow-child', {
|
||||
template: "#listennow-child",
|
||||
props: ["recom","index"],
|
||||
data: function () {
|
||||
return {
|
||||
isVisible: true,
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
visibilityChanged: function (isVisible, entry) {
|
||||
// this.isVisible = isVisible
|
||||
},
|
||||
showCollection: function (recom) {
|
||||
console.debug(recom)
|
||||
app.showCollection(recom.relationships.contents, recom.attributes.title ? recom.attributes.title.stringForDisplay : '', 'listen_now')
|
||||
},
|
||||
navigateContent: async function (id) {
|
||||
Vue.component('listennow-child', {
|
||||
template: "#listennow-child",
|
||||
props: ["recom", "index"],
|
||||
data: function() {
|
||||
return {
|
||||
isVisible: true,
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
visibilityChanged: function(isVisible, entry) {
|
||||
// this.isVisible = isVisible
|
||||
},
|
||||
showCollection: function(recom) {
|
||||
console.debug(recom)
|
||||
app.showCollection(recom.relationships.contents, recom.attributes.title ? recom.attributes.title.stringForDisplay : '', 'listen_now')
|
||||
},
|
||||
navigateContent: async function(id) {
|
||||
|
||||
if (typeof id != "string") {
|
||||
app.routeView(id)
|
||||
} else {
|
||||
try{
|
||||
let a = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}?ids[albums]=${id}`)
|
||||
let q1 = a.data?.data[0]
|
||||
if (q1) {
|
||||
app.routeView(q1)
|
||||
} else {
|
||||
let b = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}?ids[artists]=${id}`)
|
||||
let q2 = b.data?.data[0]
|
||||
if (q2) {
|
||||
app.routeView(q2)
|
||||
} else {
|
||||
let c = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}?ids[playlists]=${id}`)
|
||||
let q3 = c.data?.data[0]
|
||||
if (q3) {
|
||||
app.routeView(q3)
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
let b = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}?ids[artists]=${id}`)
|
||||
let q2 = b.data?.data[0]
|
||||
if (q2) {
|
||||
app.routeView(q2)
|
||||
}
|
||||
}
|
||||
if (typeof id != "string") {
|
||||
app.routeView(id)
|
||||
} else {
|
||||
try {
|
||||
let a = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}?ids[albums]=${id}`)
|
||||
let q1 = a.data?.data[0]
|
||||
if (q1) {
|
||||
app.routeView(q1)
|
||||
} else {
|
||||
let b = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}?ids[artists]=${id}`)
|
||||
let q2 = b.data?.data[0]
|
||||
if (q2) {
|
||||
app.routeView(q2)
|
||||
} else {
|
||||
let c = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}?ids[playlists]=${id}`)
|
||||
let q3 = c.data?.data[0]
|
||||
if (q3) {
|
||||
app.routeView(q3)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
let b = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}?ids[artists]=${id}`)
|
||||
let q2 = b.data?.data[0]
|
||||
if (q2) {
|
||||
app.routeView(q2)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,69 +1,74 @@
|
|||
<script type="text/x-template" id="listitem-horizontal">
|
||||
<div class="listitem-horizontal">
|
||||
<vue-horizontal>
|
||||
<div v-for="items in itemPages">
|
||||
<mediaitem-list-item
|
||||
v-for="(song, index) in items" :show-library-status="showLibraryStatus" :parent="'listitem-hr' + simplifiedParent"
|
||||
:index="song.index"
|
||||
:item="song"></mediaitem-list-item>
|
||||
</div>
|
||||
</vue-horizontal>
|
||||
</div>
|
||||
<div class="listitem-horizontal">
|
||||
<vue-horizontal>
|
||||
<div v-for="items in itemPages">
|
||||
<mediaitem-list-item
|
||||
v-for="(song, index) in items" :show-library-status="showLibraryStatus"
|
||||
:parent="'listitem-hr' + simplifiedParent"
|
||||
:index="song.index"
|
||||
:item="song"></mediaitem-list-item>
|
||||
</div>
|
||||
</vue-horizontal>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('listitem-horizontal', {
|
||||
template: '#listitem-horizontal',
|
||||
name: "listitem-horizontal",
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
showLibraryStatus: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
itemPages: [],
|
||||
simplifiedParent : []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// give every item an id
|
||||
this.items.forEach(function (item, index) {
|
||||
item.id = index;
|
||||
});
|
||||
// split items into pages
|
||||
this.itemPages = app.arrayToChunk(this.items, 4);
|
||||
try{
|
||||
this.simplifiedParent = JSON.stringify(this.items.map ( function(x){return x.attributes.playParams}));
|
||||
console.debug("simplifiedParent: " + this.simplifiedParent);
|
||||
}
|
||||
catch (e){}
|
||||
|
||||
},
|
||||
watch: {
|
||||
items: function (items) {
|
||||
// give every item an id
|
||||
this.items.forEach(function (item, index) {
|
||||
item.id = index;
|
||||
});
|
||||
// split items into pages
|
||||
this.itemPages = app.arrayToChunk(this.items, 4);
|
||||
try{
|
||||
this.simplifiedParent = JSON.stringify(this.items.map ( function(x){return x.attributes.playParams}));
|
||||
console.log("simplifiedParent: " + this.simplifiedParent);
|
||||
}
|
||||
catch (e){}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sayHello: function () {
|
||||
alert('Hello world!');
|
||||
}
|
||||
Vue.component('listitem-horizontal', {
|
||||
template: '#listitem-horizontal',
|
||||
name: "listitem-horizontal",
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
showLibraryStatus: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
itemPages: [],
|
||||
simplifiedParent: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// give every item an id
|
||||
this.items.forEach(function(item, index) {
|
||||
item.id = index;
|
||||
});
|
||||
// split items into pages
|
||||
this.itemPages = app.arrayToChunk(this.items, 4);
|
||||
try {
|
||||
this.simplifiedParent = JSON.stringify(this.items.map(function(x) {
|
||||
return x.attributes.playParams
|
||||
}));
|
||||
console.debug("simplifiedParent: " + this.simplifiedParent);
|
||||
} catch (e) {
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
items: function(items) {
|
||||
// give every item an id
|
||||
this.items.forEach(function(item, index) {
|
||||
item.id = index;
|
||||
});
|
||||
// split items into pages
|
||||
this.itemPages = app.arrayToChunk(this.items, 4);
|
||||
try {
|
||||
this.simplifiedParent = JSON.stringify(this.items.map(function(x) {
|
||||
return x.attributes.playParams
|
||||
}));
|
||||
console.log("simplifiedParent: " + this.simplifiedParent);
|
||||
} catch (e) {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sayHello: function() {
|
||||
alert('Hello world!');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,16 +5,17 @@
|
|||
<h3 class="lyric-line" @click="seekTo(lyric.startTime)" :class="{unsynced : lyric.startTime == 9999999}"
|
||||
v-bind:line-index="index.toString()">
|
||||
<template v-if="richlyrics && richlyrics != [] && richlyrics.length > 0">
|
||||
<div class="richl" >
|
||||
<template v-for="verse in getVerseLine(index-1)" >
|
||||
<span class="verse" :lyricstart="lyric.startTime" :versestart="verse.o" >{{ verse.c }}</span>
|
||||
<div class="richl">
|
||||
<template v-for="verse in getVerseLine(index-1)">
|
||||
<span class="verse" :lyricstart="lyric.startTime"
|
||||
:versestart="verse.o">{{ verse.c }}</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="norm" >
|
||||
{{ lyric.line }}
|
||||
</div>
|
||||
<div class="norm">
|
||||
{{ lyric.line }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="lyrics-translation" v-if="lyric.translation && lyric.translation != ''">
|
||||
{{ lyric.translation }}
|
||||
|
|
@ -35,173 +36,182 @@
|
|||
</template>
|
||||
<template v-else>
|
||||
<div class="no-lyrics">
|
||||
{{app.getLz('term.noLyrics')}}</div>
|
||||
{{app.getLz('term.noLyrics')}}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('lyrics-view', {
|
||||
template: '#lyrics-view',
|
||||
props: ["time", "lyrics", "richlyrics", "translation", "onindex", "yoffset"],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
Vue.component('lyrics-view', {
|
||||
template: '#lyrics-view',
|
||||
props: ["time", "lyrics", "richlyrics", "translation", "onindex", "yoffset"],
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
time: function() {
|
||||
if (((app.lyricon && app.drawer.open) || app.appMode == 'fullscreen') && this.$refs.lyricsview) {
|
||||
let currentLine = this.$refs.lyricsview.querySelector(`.lyric-line.active`)
|
||||
if (currentLine && currentLine.getElementsByClassName('lyricWaiting').length > 0) {
|
||||
let duration = currentLine.getAttribute("end") - currentLine.getAttribute("start");
|
||||
let u = (this.time - currentLine.getAttribute("start")) / duration;
|
||||
if (u < 0.25 && !currentLine.classList.contains('mode1')) {
|
||||
try {
|
||||
currentLine.classList.add('mode1');
|
||||
currentLine.classList.remove('mode3');
|
||||
currentLine.classList.remove('mode2');
|
||||
} catch (e) {
|
||||
}
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 0.25;
|
||||
currentLine.getElementsByClassName('WaitingDot3')[0].style.opacity = 0.25;
|
||||
|
||||
} else if (u >= 0.25 && u < 0.5 && !currentLine.classList.contains('mode2')) {
|
||||
try {
|
||||
currentLine.classList.add('mode2');
|
||||
currentLine.classList.remove('mode1');
|
||||
currentLine.classList.remove('mode3');
|
||||
} catch (e) {
|
||||
}
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
|
||||
currentLine.getElementsByClassName('WaitingDot3')[0].style.opacity = 0.25;
|
||||
} else if (u >= 0.5 && u < 0.75 && !currentLine.classList.contains('mode3')) {
|
||||
try {
|
||||
currentLine.classList.add('mode3');
|
||||
currentLine.classList.remove('mode1');
|
||||
currentLine.classList.remove('mode2');
|
||||
} catch (e) {
|
||||
}
|
||||
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 1;
|
||||
} else if (u >= 0.75 && currentLine.classList.contains('mode3')) {
|
||||
try {
|
||||
currentLine.classList.remove('mode1');
|
||||
currentLine.classList.remove('mode2');
|
||||
currentLine.classList.remove('mode3');
|
||||
} catch (e) {
|
||||
}
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 1;
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
time: function () {
|
||||
if (((app.lyricon && app.drawer.open) || app.appMode == 'fullscreen') && this.$refs.lyricsview) {
|
||||
let currentLine = this.$refs.lyricsview.querySelector(`.lyric-line.active`)
|
||||
if (currentLine && currentLine.getElementsByClassName('lyricWaiting').length > 0) {
|
||||
let duration = currentLine.getAttribute("end") - currentLine.getAttribute("start");
|
||||
let u = (this.time - currentLine.getAttribute("start")) / duration;
|
||||
if (u < 0.25 && !currentLine.classList.contains('mode1')) {
|
||||
try {
|
||||
currentLine.classList.add('mode1');
|
||||
currentLine.classList.remove('mode3');
|
||||
currentLine.classList.remove('mode2');
|
||||
} catch (e) {
|
||||
}
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 0.25;
|
||||
currentLine.getElementsByClassName('WaitingDot3')[0].style.opacity = 0.25;
|
||||
|
||||
} else if (u >= 0.25 && u < 0.5 && !currentLine.classList.contains('mode2')) {
|
||||
try {
|
||||
currentLine.classList.add('mode2');
|
||||
currentLine.classList.remove('mode1');
|
||||
currentLine.classList.remove('mode3');
|
||||
} catch (e) {
|
||||
}
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
|
||||
currentLine.getElementsByClassName('WaitingDot3')[0].style.opacity = 0.25;
|
||||
} else if (u >= 0.5 && u < 0.75 && !currentLine.classList.contains('mode3')) {
|
||||
try {
|
||||
currentLine.classList.add('mode3');
|
||||
currentLine.classList.remove('mode1');
|
||||
currentLine.classList.remove('mode2');
|
||||
} catch (e) {
|
||||
}
|
||||
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 1;
|
||||
} else if (u >= 0.75 && currentLine.classList.contains('mode3')) {
|
||||
try {
|
||||
currentLine.classList.remove('mode1');
|
||||
currentLine.classList.remove('mode2');
|
||||
currentLine.classList.remove('mode3');
|
||||
} catch (e) {
|
||||
}
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
|
||||
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
|
||||
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 1;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
this.getActiveLyric();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
seekTo(startTime) {
|
||||
if (startTime != 9999999) this.app.seekTo(startTime, false);
|
||||
},
|
||||
getActiveLyric() {
|
||||
const delayfix = 0.1
|
||||
const prevLine = app.currentLyricsLine;
|
||||
for (var i = 0; i < this.lyrics.length; i++) {
|
||||
if (this.time + delayfix >= this.lyrics[i].startTime && this.time + delayfix <= app.lyrics[i].endTime) {
|
||||
if (app.currentLyricsLine != i) {
|
||||
app.currentLyricsLine = i;
|
||||
if (((app.lyricon && app.drawer.open) || app.appMode == 'fullscreen') && this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`)) {
|
||||
if (this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`)) {
|
||||
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).classList.remove("active");
|
||||
}
|
||||
this.getActiveLyric();
|
||||
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).classList.add("active")
|
||||
if (this.checkIfScrollIsStatic) {
|
||||
let lyricElement = this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`)
|
||||
// this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).scrollIntoView({
|
||||
// behavior: "smooth",
|
||||
// block: "nearest", inline: 'start'
|
||||
// })
|
||||
let parent = lyricElement.parentElement
|
||||
let parentRect = parent.getBoundingClientRect()
|
||||
let lyricElementRect = lyricElement.getBoundingClientRect()
|
||||
let parentScrollTop = parent.scrollTop
|
||||
let parentScrollLeft = parent.scrollLeft
|
||||
let parentScrollTopDiff = parentScrollTop - parentRect.top
|
||||
let parentScrollLeftDiff = parentScrollLeft - parentRect.left
|
||||
let lyricElementScrollTop = lyricElementRect.top + parentScrollTopDiff
|
||||
let lyricElementScrollLeft = lyricElementRect.left + parentScrollLeftDiff
|
||||
let scrollTopDiff = lyricElementScrollTop - parentScrollTop
|
||||
let scrollLeftDiff = lyricElementScrollLeft - parentScrollLeft
|
||||
let scrollTop = parent.scrollTop + scrollTopDiff
|
||||
let scrollLeft = parent.scrollLeft + scrollLeftDiff
|
||||
parent.scrollTo({
|
||||
top: scrollTop - (this.yoffset ?? 128),
|
||||
left: scrollLeft,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
} else if (app.currentLyricsLine == 0 && app.drawer.open) {
|
||||
if (this.$refs.lyricsview.querySelector(`.lyric-line[line-index="0"]`) && !this.$refs.lyricsview.querySelector(`.lyric-line[line-index="0"]`).classList.contains("active"))
|
||||
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="0"]`).classList.add("active");
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
seekTo(startTime) {
|
||||
if (startTime != 9999999) this.app.seekTo(startTime, false);
|
||||
},
|
||||
getActiveLyric() {
|
||||
const delayfix = 0.1
|
||||
const prevLine = app.currentLyricsLine;
|
||||
for (var i = 0; i < this.lyrics.length; i++) {
|
||||
if (this.time + delayfix >= this.lyrics[i].startTime && this.time + delayfix <= app.lyrics[i].endTime) {
|
||||
if (app.currentLyricsLine != i) {
|
||||
app.currentLyricsLine = i;
|
||||
if (((app.lyricon && app.drawer.open) || app.appMode == 'fullscreen') && this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`)) {
|
||||
if (this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`)) {this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).classList.remove("active");}
|
||||
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).classList.add("active")
|
||||
if (this.checkIfScrollIsStatic) {
|
||||
let lyricElement = this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`)
|
||||
// this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).scrollIntoView({
|
||||
// behavior: "smooth",
|
||||
// block: "nearest", inline: 'start'
|
||||
// })
|
||||
let parent = lyricElement.parentElement
|
||||
let parentRect = parent.getBoundingClientRect()
|
||||
let lyricElementRect = lyricElement.getBoundingClientRect()
|
||||
let parentScrollTop = parent.scrollTop
|
||||
let parentScrollLeft = parent.scrollLeft
|
||||
let parentScrollTopDiff = parentScrollTop - parentRect.top
|
||||
let parentScrollLeftDiff = parentScrollLeft - parentRect.left
|
||||
let lyricElementScrollTop = lyricElementRect.top + parentScrollTopDiff
|
||||
let lyricElementScrollLeft = lyricElementRect.left + parentScrollLeftDiff
|
||||
let scrollTopDiff = lyricElementScrollTop - parentScrollTop
|
||||
let scrollLeftDiff = lyricElementScrollLeft - parentScrollLeft
|
||||
let scrollTop = parent.scrollTop + scrollTopDiff
|
||||
let scrollLeft = parent.scrollLeft + scrollLeftDiff
|
||||
parent.scrollTo({
|
||||
top: scrollTop - (this.yoffset ?? 128),
|
||||
left: scrollLeft,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
} else if (app.currentLyricsLine == 0 && app.drawer.open) {
|
||||
if (this.$refs.lyricsview.querySelector(`.lyric-line[line-index="0"]`) && !this.$refs.lyricsview.querySelector(`.lyric-line[line-index="0"]`).classList.contains("active"))
|
||||
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="0"]`).classList.add("active");
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
try{
|
||||
if ((app.drawer.open) || app.appMode == 'fullscreen'){
|
||||
try{this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).childNodes.classList.remove("verse-active");} catch(e){}
|
||||
for (child of this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${app.currentLyricsLine}"]`).querySelectorAll(".verse")){
|
||||
if (this.time + 0.1 >= child.getAttribute("lyricstart") * 1 + child.getAttribute("versestart") * 1){
|
||||
child.classList.add("verse-active");
|
||||
} else {child.classList.remove("verse-active");}}
|
||||
}
|
||||
} catch(e){}
|
||||
|
||||
},
|
||||
getActiveVerse(timeStart, timeEnd, verseTime) {
|
||||
let relativeTime = this.time - timeStart
|
||||
console.log(this.time,timeEnd,timeStart,relativeTime >= verseTime && relativeTime <= timeEnd - timeStart)
|
||||
return relativeTime >= verseTime && relativeTime <= timeEnd - timeStart
|
||||
},
|
||||
getVerseLine(index) {
|
||||
if (this.richlyrics[index] != null && this.richlyrics[index].l != null) {
|
||||
return this.richlyrics[index].l
|
||||
}
|
||||
else return []
|
||||
},
|
||||
qqInstrumental(lyrics) {
|
||||
for(lyric of lyrics){
|
||||
if (lyric.line.includes("纯音乐") && lyric.line.includes("欣赏")){
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
checkIfScrollIsStatic : setInterval(() => {
|
||||
break;
|
||||
}
|
||||
}
|
||||
try {
|
||||
if ((app.drawer.open) || app.appMode == 'fullscreen') {
|
||||
try {
|
||||
if (position === this.$refs.lyricsview.scrollTop) {
|
||||
clearInterval(checkIfScrollIsStatic)
|
||||
// do something
|
||||
}
|
||||
position = this.$refs.lyricsview.scrollTop
|
||||
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).childNodes.classList.remove("verse-active");
|
||||
} catch (e) {
|
||||
}
|
||||
}, 50)
|
||||
,
|
||||
for (child of this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${app.currentLyricsLine}"]`).querySelectorAll(".verse")) {
|
||||
if (this.time + 0.1 >= child.getAttribute("lyricstart") * 1 + child.getAttribute("versestart") * 1) {
|
||||
child.classList.add("verse-active");
|
||||
} else {
|
||||
child.classList.remove("verse-active");
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
},
|
||||
getActiveVerse(timeStart, timeEnd, verseTime) {
|
||||
let relativeTime = this.time - timeStart
|
||||
console.log(this.time, timeEnd, timeStart, relativeTime >= verseTime && relativeTime <= timeEnd - timeStart)
|
||||
return relativeTime >= verseTime && relativeTime <= timeEnd - timeStart
|
||||
},
|
||||
getVerseLine(index) {
|
||||
if (this.richlyrics[index] != null && this.richlyrics[index].l != null) {
|
||||
return this.richlyrics[index].l
|
||||
} else return []
|
||||
},
|
||||
qqInstrumental(lyrics) {
|
||||
for (lyric of lyrics) {
|
||||
if (lyric.line.includes("纯音乐") && lyric.line.includes("欣赏")) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
checkIfScrollIsStatic: setInterval(() => {
|
||||
try {
|
||||
if (position === this.$refs.lyricsview.scrollTop) {
|
||||
clearInterval(checkIfScrollIsStatic)
|
||||
// do something
|
||||
}
|
||||
position = this.$refs.lyricsview.scrollTop
|
||||
} catch (e) {
|
||||
}
|
||||
}, 50)
|
||||
,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script type="text/x-template" id="mediaitem-artwork">
|
||||
<div class="mediaitem-artwork" :style="awStyle" @contextmenu="contextMenu" :class="[{'rounded': (type == 'artists')}, classes]" :key="url">
|
||||
<div class="mediaitem-artwork" :style="awStyle" @contextmenu="contextMenu"
|
||||
:class="[{'rounded': (type == 'artists')}, classes]" :key="url">
|
||||
<img :src="imgSrc"
|
||||
ref="image"
|
||||
decoding="async"
|
||||
|
|
@ -14,138 +15,138 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('mediaitem-artwork', {
|
||||
template: '#mediaitem-artwork',
|
||||
props: {
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: '120'
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
required: false
|
||||
},
|
||||
bgcolor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
video: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
videoPriority: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
shadow: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
upscaling: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
Vue.component('mediaitem-artwork', {
|
||||
template: '#mediaitem-artwork',
|
||||
props: {
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: '120'
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
required: false
|
||||
},
|
||||
bgcolor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
video: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
videoPriority: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
shadow: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
upscaling: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
isVisible: false,
|
||||
style: {
|
||||
"box-shadow": ""
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
isVisible: false,
|
||||
style: {
|
||||
"box-shadow": ""
|
||||
},
|
||||
awStyle: {
|
||||
background: this.bgcolor
|
||||
},
|
||||
imgStyle: {
|
||||
opacity: 0,
|
||||
transition: "opacity .25s linear"
|
||||
},
|
||||
classes: [],
|
||||
imgSrc: ""
|
||||
}
|
||||
awStyle: {
|
||||
background: this.bgcolor
|
||||
},
|
||||
computed: {
|
||||
windowRelativeScale: function () {
|
||||
return app.$store.state.windowRelativeScale;
|
||||
}
|
||||
imgStyle: {
|
||||
opacity: 0,
|
||||
transition: "opacity .25s linear"
|
||||
},
|
||||
watch: {
|
||||
windowRelativeScale: function (newValue, oldValue) {
|
||||
this.swapImage(newValue)
|
||||
},
|
||||
url: function (newValue, oldValue) {
|
||||
this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getClasses()
|
||||
this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
|
||||
},
|
||||
methods: {
|
||||
swapImage(newValue) {
|
||||
if(!this.upscaling || window.devicePixelRatio !== 1) return
|
||||
if (newValue > 1.5) {
|
||||
this.imgSrc = app.getMediaItemArtwork(this.url, parseInt(this.size * 2.0), parseInt(this.size * 2.0));
|
||||
}
|
||||
},
|
||||
imgLoaded() {
|
||||
this.imgStyle.opacity = 1
|
||||
this.swapImage(app.$store.state.windowRelativeScale)
|
||||
// this.awStyle.background = ""
|
||||
},
|
||||
contextMenu(event) {
|
||||
let self = this
|
||||
app.showMenuPanel({
|
||||
items: {
|
||||
"save": {
|
||||
name: app.getLz('action.openArtworkInBrowser'),
|
||||
action: () => {
|
||||
window.open(app.getMediaItemArtwork(self.url, 1024, 1024))
|
||||
}
|
||||
}
|
||||
}
|
||||
}, event)
|
||||
},
|
||||
getVideoPriority() {
|
||||
if (app.cfg.visual.animated_artwork == "always") {
|
||||
return true;
|
||||
} else if (this.videoPriority && app.cfg.visual.animated_artwork == "limited") {
|
||||
return true
|
||||
} else if (app.cfg.visual.animated_artwork == "disabled") {
|
||||
return false
|
||||
}
|
||||
return this.videoPriority
|
||||
},
|
||||
getClasses() {
|
||||
switch (this.shadow) {
|
||||
case "none":
|
||||
this.classes.push("no-shadow")
|
||||
break;
|
||||
case "large":
|
||||
this.classes.push("shadow")
|
||||
break;
|
||||
case "subtle":
|
||||
this.classes.push("subtle-shadow")
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return this.classes;
|
||||
},
|
||||
getArtworkStyle() {
|
||||
return {
|
||||
width: this.size + 'px',
|
||||
height: this.size + 'px'
|
||||
};
|
||||
}
|
||||
classes: [],
|
||||
imgSrc: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
windowRelativeScale: function() {
|
||||
return app.$store.state.windowRelativeScale;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
windowRelativeScale: function(newValue, oldValue) {
|
||||
this.swapImage(newValue)
|
||||
},
|
||||
url: function(newValue, oldValue) {
|
||||
this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getClasses()
|
||||
this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
|
||||
},
|
||||
methods: {
|
||||
swapImage(newValue) {
|
||||
if (!this.upscaling || window.devicePixelRatio !== 1) return
|
||||
if (newValue > 1.5) {
|
||||
this.imgSrc = app.getMediaItemArtwork(this.url, parseInt(this.size * 2.0), parseInt(this.size * 2.0));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
},
|
||||
imgLoaded() {
|
||||
this.imgStyle.opacity = 1
|
||||
this.swapImage(app.$store.state.windowRelativeScale)
|
||||
// this.awStyle.background = ""
|
||||
},
|
||||
contextMenu(event) {
|
||||
let self = this
|
||||
app.showMenuPanel({
|
||||
items: {
|
||||
"save": {
|
||||
name: app.getLz('action.openArtworkInBrowser'),
|
||||
action: () => {
|
||||
window.open(app.getMediaItemArtwork(self.url, 1024, 1024))
|
||||
}
|
||||
}
|
||||
}
|
||||
}, event)
|
||||
},
|
||||
getVideoPriority() {
|
||||
if (app.cfg.visual.animated_artwork == "always") {
|
||||
return true;
|
||||
} else if (this.videoPriority && app.cfg.visual.animated_artwork == "limited") {
|
||||
return true
|
||||
} else if (app.cfg.visual.animated_artwork == "disabled") {
|
||||
return false
|
||||
}
|
||||
return this.videoPriority
|
||||
},
|
||||
getClasses() {
|
||||
switch (this.shadow) {
|
||||
case "none":
|
||||
this.classes.push("no-shadow")
|
||||
break;
|
||||
case "large":
|
||||
this.classes.push("shadow")
|
||||
break;
|
||||
case "subtle":
|
||||
this.classes.push("subtle-shadow")
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return this.classes;
|
||||
},
|
||||
getArtworkStyle() {
|
||||
return {
|
||||
width: this.size + 'px',
|
||||
height: this.size + 'px'
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('mediaitem-hrect', {
|
||||
template: '#mediaitem-hrect',
|
||||
props: ['item'],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
Vue.component('mediaitem-hrect', {
|
||||
template: '#mediaitem-hrect',
|
||||
props: ['item'],
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -24,7 +24,7 @@
|
|||
<div class="button" style="
|
||||
border-radius: 50%;
|
||||
background: rgba(50,50,50,0.7);"
|
||||
:style="[(!(item.attributes?.playParams ? (item.attributes?.playParams?.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes?.playParams ? (item.attributes?.playParams?.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ?
|
||||
:style="[(!(item.attributes?.playParams ? (item.attributes?.playParams?.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes?.playParams ? (item.attributes?.playParams?.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ?
|
||||
{'margin': '205px',
|
||||
'margin-left': '260px', 'margin-bottom': '140px',
|
||||
width: '30px',
|
||||
|
|
@ -57,18 +57,18 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('mediaitem-mvview-sp', {
|
||||
template: '#mediaitem-mvview-sp',
|
||||
props: ['item', "imagesize", "badge"],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
log(item) {
|
||||
console.log(item);
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Vue.component('mediaitem-mvview-sp', {
|
||||
template: '#mediaitem-mvview-sp',
|
||||
props: ['item', "imagesize", "badge"],
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
log(item) {
|
||||
console.log(item);
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,9 @@
|
|||
<div class="title text-overflow-elipsis" @click='app.routeView(item)'>
|
||||
{{ item.attributes.name ?? '' }}
|
||||
</div>
|
||||
<div class="subtitle text-overflow-elipsis item-navigate" v-if="item.attributes.artistName" :style = "{'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : ''}" @click="if (item.attributes.artistName)app.searchAndNavigate(item,'artist')">
|
||||
<div class="subtitle text-overflow-elipsis item-navigate" v-if="item.attributes.artistName"
|
||||
:style="{'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : ''}"
|
||||
@click="if (item.attributes.artistName)app.searchAndNavigate(item,'artist')">
|
||||
{{ item.attributes.artistName ?? '' }}
|
||||
</div>
|
||||
|
||||
|
|
@ -51,14 +53,14 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('mediaitem-mvview', {
|
||||
template: '#mediaitem-mvview',
|
||||
props: ['item', "imagesize"],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
Vue.component('mediaitem-mvview', {
|
||||
template: '#mediaitem-mvview',
|
||||
props: ['item', "imagesize"],
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal-large">
|
||||
<vue-horizontal>
|
||||
<mediaitem-square :item="item" :key="item?.id ?? ''"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</vue-horizontal>
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
Vue.component('mediaitem-scroller-horizontal-large', {
|
||||
template: '#mediaitem-scroller-horizontal-large',
|
||||
props: ['items']
|
||||
});
|
||||
</script>
|
||||
Vue.component('mediaitem-scroller-horizontal-large', {
|
||||
template: '#mediaitem-scroller-horizontal-large',
|
||||
props: ['items']
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
<vue-horizontal>
|
||||
<template v-if="browsesp">
|
||||
<mediaitem-mvview-sp
|
||||
:item="
|
||||
:item="
|
||||
((item?.attributes?.kind != null || item?.attributes?.type == 'editorial-elements')
|
||||
? item :
|
||||
? item :
|
||||
((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) ?? (item)"
|
||||
:imagesize="imagesize"
|
||||
:badge="item.attributes ?? [] " v-for="item in items"></mediaitem-mvview-sp>
|
||||
</template>
|
||||
<template v-else>
|
||||
<mediaitem-square :kind="kind" size="600" :key="item?.id ?? ''"
|
||||
<mediaitem-square :kind="kind" size="600" :key="item?.id ?? ''"
|
||||
:item="item ? ((item.attributes?.kind != null || item.type == 'editorial-elements') ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
|
||||
:imagesize="imagesize"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
|
|
@ -20,34 +20,34 @@
|
|||
|
||||
|
||||
<script>
|
||||
Vue.component('mediaitem-scroller-horizontal-mvview', {
|
||||
template: '#mediaitem-scroller-horizontal-mvview',
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
imagesize: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
browsesp: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
kind: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
// mounted(){
|
||||
// console.log('hes',this.items)
|
||||
// }
|
||||
});
|
||||
</script>
|
||||
Vue.component('mediaitem-scroller-horizontal-mvview', {
|
||||
template: '#mediaitem-scroller-horizontal-mvview',
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
imagesize: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
browsesp: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
kind: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
// mounted(){
|
||||
// console.log('hes',this.items)
|
||||
// }
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
|
||||
<div class="cd-hmedia-scroller hmedia-scroller-card">
|
||||
<vue-horizontal>
|
||||
<template>
|
||||
<mediaitem-square kind="card" :item="item" size="300" :reasonShown="withReason"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</template>
|
||||
</vue-horizontal>
|
||||
</div>
|
||||
<div class="cd-hmedia-scroller hmedia-scroller-card">
|
||||
<vue-horizontal>
|
||||
<template>
|
||||
<mediaitem-square kind="card" :item="item" size="300" :reasonShown="withReason"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</template>
|
||||
</vue-horizontal>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('mediaitem-scroller-horizontal-sp', {
|
||||
template: '#mediaitem-scroller-horizontal-sp',
|
||||
props: {
|
||||
'items': { type: Array , required: false },
|
||||
'withReason': { type: Boolean, required: false, default: false },
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
Vue.component('mediaitem-scroller-horizontal-sp', {
|
||||
template: '#mediaitem-scroller-horizontal-sp',
|
||||
props: {
|
||||
'items': { type: Array, required: false },
|
||||
'withReason': { type: Boolean, required: false, default: false },
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,27 +6,27 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('mediaitem-scroller-horizontal', {
|
||||
template: '#mediaitem-scroller-horizontal',
|
||||
props: {
|
||||
'items': {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
'kind': {
|
||||
type: String,
|
||||
required: false,
|
||||
defualt: ""
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.horizontal.refresh()
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
Vue.component('mediaitem-scroller-horizontal', {
|
||||
template: '#mediaitem-scroller-horizontal',
|
||||
props: {
|
||||
'items': {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
'kind': {
|
||||
type: String,
|
||||
required: false,
|
||||
defualt: ""
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.horizontal.refresh()
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -36,105 +36,105 @@
|
|||
|
||||
|
||||
<script>
|
||||
Vue.component('cider-menu-panel', {
|
||||
template: '#cider-menu-panel',
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
menuPanel: this.$root.menuPanel,
|
||||
content: this.$root.menuPanel.content,
|
||||
getSvgIcon: this.$root.getSvgIcon,
|
||||
position: [0, 0],
|
||||
size: [0, 0],
|
||||
event: this.$root.menuPanel.event,
|
||||
direction: "down",
|
||||
elStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.event) {
|
||||
this.position = [this.event.clientX, this.event.clientY];
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
// this.size = [document.querySelector(".menu-panel-body").offsetWidth, document.querySelector(".menu-panel-body").offsetHeight];
|
||||
// ugly hack
|
||||
setTimeout(this.getStyle, 1)
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getBodyClasses() {
|
||||
if (this.direction == "down") {
|
||||
return ["menu-panel-body-down"]
|
||||
} else if (this.direction == "up") {
|
||||
return ["menu-panel-body-up"]
|
||||
} else {
|
||||
return ["foo"]
|
||||
}
|
||||
},
|
||||
getClasses(item) {
|
||||
if (item["active"]) {
|
||||
return "active";
|
||||
}
|
||||
},
|
||||
getStyle() {
|
||||
let style = {}
|
||||
this.size = [this.$refs.menubody.offsetWidth, this.$refs.menubody.offsetHeight];
|
||||
if (this.event) {
|
||||
style["position"] = "absolute";
|
||||
style["left"] = this.event.clientX + "px";
|
||||
style["top"] = this.event.clientY + "px";
|
||||
// make sure the menu panel isnt off the screen
|
||||
if (this.event.clientX + this.size[0] > window.innerWidth) {
|
||||
style["left"] = (this.event.clientX - this.size[0]) + "px";
|
||||
}
|
||||
if (this.event.clientY + this.size[1] > window.innerHeight) {
|
||||
style["top"] = (this.event.clientY - this.size[1]) + "px";
|
||||
}
|
||||
|
||||
|
||||
// if the panel is above the mouse, set the direction to up
|
||||
if (this.event.clientY < this.size[1]) {
|
||||
this.direction = "up";
|
||||
} else {
|
||||
this.direction = "down";
|
||||
}
|
||||
// check if the panel is too long and goes off the screen vertically,
|
||||
// if so move it upwards
|
||||
if (this.event.clientY + this.size[1] > window.innerHeight) {
|
||||
style["top"] = (this.event.clientY - this.size[1]) + "px";
|
||||
}
|
||||
}
|
||||
style["opacity"] = 1
|
||||
this.elStyle = style;
|
||||
},
|
||||
getItemStyle(item) {
|
||||
let style = {}
|
||||
if (item["disabled"]) {
|
||||
style = Object.assign(style, {
|
||||
"pointer-events": "none",
|
||||
"opacity": "0.5",
|
||||
});
|
||||
}
|
||||
return style
|
||||
},
|
||||
canDisplay(item) {
|
||||
if (!item["hidden"]) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
async getActions() {
|
||||
return this.content.items;
|
||||
},
|
||||
action(item) {
|
||||
item.action()
|
||||
if (!item["keepOpen"]) {
|
||||
this.menuPanel.visible = false
|
||||
}
|
||||
}
|
||||
Vue.component('cider-menu-panel', {
|
||||
template: '#cider-menu-panel',
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
menuPanel: this.$root.menuPanel,
|
||||
content: this.$root.menuPanel.content,
|
||||
getSvgIcon: this.$root.getSvgIcon,
|
||||
position: [0, 0],
|
||||
size: [0, 0],
|
||||
event: this.$root.menuPanel.event,
|
||||
direction: "down",
|
||||
elStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.event) {
|
||||
this.position = [this.event.clientX, this.event.clientY];
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
// this.size = [document.querySelector(".menu-panel-body").offsetWidth, document.querySelector(".menu-panel-body").offsetHeight];
|
||||
// ugly hack
|
||||
setTimeout(this.getStyle, 1)
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getBodyClasses() {
|
||||
if (this.direction == "down") {
|
||||
return ["menu-panel-body-down"]
|
||||
} else if (this.direction == "up") {
|
||||
return ["menu-panel-body-up"]
|
||||
} else {
|
||||
return ["foo"]
|
||||
}
|
||||
},
|
||||
getClasses(item) {
|
||||
if (item["active"]) {
|
||||
return "active";
|
||||
}
|
||||
},
|
||||
getStyle() {
|
||||
let style = {}
|
||||
this.size = [this.$refs.menubody.offsetWidth, this.$refs.menubody.offsetHeight];
|
||||
if (this.event) {
|
||||
style["position"] = "absolute";
|
||||
style["left"] = this.event.clientX + "px";
|
||||
style["top"] = this.event.clientY + "px";
|
||||
// make sure the menu panel isnt off the screen
|
||||
if (this.event.clientX + this.size[0] > window.innerWidth) {
|
||||
style["left"] = (this.event.clientX - this.size[0]) + "px";
|
||||
}
|
||||
if (this.event.clientY + this.size[1] > window.innerHeight) {
|
||||
style["top"] = (this.event.clientY - this.size[1]) + "px";
|
||||
}
|
||||
|
||||
|
||||
// if the panel is above the mouse, set the direction to up
|
||||
if (this.event.clientY < this.size[1]) {
|
||||
this.direction = "up";
|
||||
} else {
|
||||
this.direction = "down";
|
||||
}
|
||||
// check if the panel is too long and goes off the screen vertically,
|
||||
// if so move it upwards
|
||||
if (this.event.clientY + this.size[1] > window.innerHeight) {
|
||||
style["top"] = (this.event.clientY - this.size[1]) + "px";
|
||||
}
|
||||
}
|
||||
style["opacity"] = 1
|
||||
this.elStyle = style;
|
||||
},
|
||||
getItemStyle(item) {
|
||||
let style = {}
|
||||
if (item["disabled"]) {
|
||||
style = Object.assign(style, {
|
||||
"pointer-events": "none",
|
||||
"opacity": "0.5",
|
||||
});
|
||||
}
|
||||
return style
|
||||
},
|
||||
canDisplay(item) {
|
||||
if (!item["hidden"]) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
async getActions() {
|
||||
return this.content.items;
|
||||
},
|
||||
action(item) {
|
||||
item.action()
|
||||
if (!item["keepOpen"]) {
|
||||
this.menuPanel.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,186 +2,206 @@
|
|||
<div class="mini-view" tabindex="0">
|
||||
<div class="background">
|
||||
</div>
|
||||
<div class="player-pin" title="Pin to Top" v-if="app.cfg.visual.miniplayer_top_toggle === false" @click="app.pinMiniPlayer()">
|
||||
<div class="player-pin" title="Pin to Top" v-if="app.cfg.visual.miniplayer_top_toggle === false"
|
||||
@click="app.pinMiniPlayer()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="none" class="feather feather-pin">
|
||||
<path d="M7.05664 16.3613C7.05664 17.1523 7.59277 17.6797 8.42773 17.6797H13.1299V21.8369C13.1299 23.0762 13.7539 24.3242 14 24.3242C14.2373 24.3242 14.8613 23.0762 14.8613 21.8369V17.6797H19.5635C20.3984 17.6797 20.9346 17.1523 20.9346 16.3613C20.9346 14.4717 19.4316 12.5293 16.9531 11.6152L16.6631 7.52832C17.9727 6.78125 19.0098 5.96387 19.4668 5.38379C19.7041 5.06738 19.8271 4.75098 19.8271 4.46973C19.8271 3.88965 19.3789 3.45898 18.7197 3.45898H9.27148C8.6123 3.45898 8.16406 3.88965 8.16406 4.46973C8.16406 4.75098 8.28711 5.06738 8.52441 5.38379C8.98145 5.96387 10.0186 6.78125 11.3281 7.52832L11.0469 11.6152C8.55957 12.5293 7.05664 14.4717 7.05664 16.3613Z" fill="#ff2654"/>
|
||||
<path d="M7.05664 16.3613C7.05664 17.1523 7.59277 17.6797 8.42773 17.6797H13.1299V21.8369C13.1299 23.0762 13.7539 24.3242 14 24.3242C14.2373 24.3242 14.8613 23.0762 14.8613 21.8369V17.6797H19.5635C20.3984 17.6797 20.9346 17.1523 20.9346 16.3613C20.9346 14.4717 19.4316 12.5293 16.9531 11.6152L16.6631 7.52832C17.9727 6.78125 19.0098 5.96387 19.4668 5.38379C19.7041 5.06738 19.8271 4.75098 19.8271 4.46973C19.8271 3.88965 19.3789 3.45898 18.7197 3.45898H9.27148C8.6123 3.45898 8.16406 3.88965 8.16406 4.46973C8.16406 4.75098 8.28711 5.06738 8.52441 5.38379C8.98145 5.96387 10.0186 6.78125 11.3281 7.52832L11.0469 11.6152C8.55957 12.5293 7.05664 14.4717 7.05664 16.3613Z"
|
||||
fill="#ff2654" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="player-pin" title="Unpin to Top" v-if="app.cfg.visual.miniplayer_top_toggle === true" @click="app.pinMiniPlayer(false)">
|
||||
<div class="player-pin" title="Unpin to Top" v-if="app.cfg.visual.miniplayer_top_toggle === true"
|
||||
@click="app.pinMiniPlayer(false)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="none" class="feather feather-pin-slashed">
|
||||
<path d="M9.271 3.459c-.659 0-1.107.43-1.107 1.01 0 .282.114.59.352.897.448.59 1.494 1.415 2.777 2.162l-.07 1.02 8.99 8.991c.458-.202.722-.615.722-1.178 0-1.89-1.503-3.832-3.947-4.746l-.29-4.087c1.275-.747 2.312-1.555 2.76-2.144.246-.308.37-.633.37-.914 0-.58-.45-1.011-1.108-1.011H9.27ZM5.15 6.061l16.076 16.057c.272.281.73.273.993 0a.703.703 0 0 0 0-.984L6.15 5.076a.716.716 0 0 0-1.002 0 .711.711 0 0 0 0 .985Zm1.908 10.3c0 .791.536 1.319 1.37 1.319h4.703v4.157c0 1.24.624 2.487.861 2.487.246 0 .87-1.248.87-2.487V17.81h.413l-5.537-5.545c-1.678 1.002-2.68 2.557-2.68 4.095Z" fill="#ff2654"/>
|
||||
<path d="M9.271 3.459c-.659 0-1.107.43-1.107 1.01 0 .282.114.59.352.897.448.59 1.494 1.415 2.777 2.162l-.07 1.02 8.99 8.991c.458-.202.722-.615.722-1.178 0-1.89-1.503-3.832-3.947-4.746l-.29-4.087c1.275-.747 2.312-1.555 2.76-2.144.246-.308.37-.633.37-.914 0-.58-.45-1.011-1.108-1.011H9.27ZM5.15 6.061l16.076 16.057c.272.281.73.273.993 0a.703.703 0 0 0 0-.984L6.15 5.076a.716.716 0 0 0-1.002 0 .711.711 0 0 0 0 .985Zm1.908 10.3c0 .791.536 1.319 1.37 1.319h4.703v4.157c0 1.24.624 2.487.861 2.487.246 0 .87-1.248.87-2.487V17.81h.413l-5.537-5.545c-1.678 1.002-2.68 2.557-2.68 4.095Z"
|
||||
fill="#ff2654" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="player-exit" title="Close" @click="app.miniPlayer(false)">
|
||||
<svg fill="#323232e3" width="21" height="21" viewBox="0 0 21 21" aria-role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg fill="#323232e3" width="21" height="21" viewBox="0 0 21 21" aria-role="presentation" focusable="false"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<radialGradient gradientUnits="userSpaceOnUse" cx="10.5" cy="10.5" r="10.5" id="gradient-0">
|
||||
<stop offset="0" style="stop-color: rgba(168, 163, 163, 1)"/>
|
||||
<stop offset="1" style="stop-color: rgba(118, 111, 111, 1)"/>
|
||||
<stop offset="0" style="stop-color: rgba(168, 163, 163, 1)" />
|
||||
<stop offset="1" style="stop-color: rgba(118, 111, 111, 1)" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<path d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z"
|
||||
fill-rule="nonzero" style="stroke-miterlimit: 11; vector-effect: non-scaling-stroke; stroke-width: 31px; fill: url(#gradient-0);"/>
|
||||
fill-rule="nonzero"
|
||||
style="stroke-miterlimit: 11; vector-effect: non-scaling-stroke; stroke-width: 31px; fill: url(#gradient-0);" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col artwork-col">
|
||||
<div class="artwork" @click="app.miniPlayer(false)">
|
||||
<div class="artwork" @click="app.miniPlayer(false)">
|
||||
<mediaitem-artwork
|
||||
:size="600"
|
||||
:url="image ?? ''"
|
||||
></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="controls-parents">
|
||||
<template v-if="app.mkReady()">
|
||||
<div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
|
||||
@mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
|
||||
<div class="playback-info">
|
||||
<div class="song-name">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div
|
||||
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden; margin-bottom: 5px;">
|
||||
<div class="item-navigate song-artist" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed(`artist`)">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||
<template v-if="app.mkReady()">
|
||||
<div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
|
||||
@mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
|
||||
<div class="playback-info">
|
||||
<div class="song-name">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div class="song-artist item-navigate" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed('album')">
|
||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? (" — " +
|
||||
app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="song-progress">
|
||||
<div class="song-duration" style="justify-content: space-between; height: 1px; margin-bottom: 1px;"
|
||||
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
|
||||
<p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
|
||||
<p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
|
||||
<div
|
||||
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden; margin-bottom: 5px;">
|
||||
<div class="item-navigate song-artist" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed(`artist`)">
|
||||
{{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||
</div>
|
||||
<div class="song-artist item-navigate" style="display: inline-block;"
|
||||
@click="app.getNowPlayingItemDetailed('album')">
|
||||
{{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? (" — " +
|
||||
app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
|
||||
@input="app.playerLCD.desiredDuration = $event.target.value;app.playerLCD.userInteraction = true"
|
||||
@mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
|
||||
:max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
|
||||
<div class="song-progress">
|
||||
<div class="song-duration"
|
||||
style="justify-content: space-between; height: 1px; margin-bottom: 1px;"
|
||||
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
|
||||
<p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
|
||||
<p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
|
||||
</div>
|
||||
|
||||
<input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
|
||||
@input="app.playerLCD.desiredDuration = $event.target.value;app.playerLCD.userInteraction = true"
|
||||
@mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
|
||||
:max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-buttons">
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
|
||||
v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small shuffle active" v-else
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button previous" @click="$root.prevButton()"
|
||||
:class="$root.isPrevDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button stop" @click="$root.mk.stop()"
|
||||
v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
|
||||
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button pause" @click="$root.mk.pause()"
|
||||
v-else-if="$root.mk.isPlaying"
|
||||
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button play" @click="$root.mk.play()" v-else
|
||||
:title="$root.getLz('term.play')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button next" @click="$root.skipToNextItem()"
|
||||
:class="$root.isNextDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small repeat" v-if="$root.mk.repeatMode == 0"
|
||||
:class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
|
||||
v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
|
||||
:class="$root.isDisabled() && 'disabled'" v-else-if="$root.mk.repeatMode == 1"
|
||||
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat active" @click="$root.mk.repeatMode = 0"
|
||||
:class="$root.isDisabled() && 'disabled'" v-else-if="$root.mk.repeatMode == 2"
|
||||
:title="$root.getLz('term.disableRepeat')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<div class="input-container">
|
||||
<button class="volume-button--small volume" @click="app.muteButtonPressed()"
|
||||
:class="{'active': app.cfg.audio.volume == 0}"></button>
|
||||
<input type="range" class="slider" @wheel="app.volumeWheel"
|
||||
:step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume"
|
||||
v-model="app.mk.volume"
|
||||
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-buttons">
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small shuffle" v-if="$root.mk.shuffleMode == 0" :class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small shuffle active" v-else :class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button previous" @click="$root.prevButton()" :class="$root.isPrevDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button stop" @click="$root.mk.stop()"
|
||||
v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
|
||||
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button pause" @click="$root.mk.pause()" v-else-if="$root.mk.isPlaying"
|
||||
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button play" @click="$root.mk.play()" v-else :title="$root.getLz('term.play')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button next" @click="$root.skipToNextItem()" :class="$root.isNextDisabled() && 'disabled'"
|
||||
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<button class="playback-button--small repeat" v-if="$root.mk.repeatMode == 0" :class="$root.isDisabled() && 'disabled'"
|
||||
@click="$root.mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
|
||||
:class="$root.isDisabled() && 'disabled'" v-else-if="$root.mk.repeatMode == 1"
|
||||
:title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button--small repeat active" @click="$root.mk.repeatMode = 0"
|
||||
:class="$root.isDisabled() && 'disabled'" v-else-if="$root.mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
|
||||
v-b-tooltip.hover></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<div class="input-container">
|
||||
<button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"></button>
|
||||
<input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume" v-model="app.mk.volume"
|
||||
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row fs-row">
|
||||
|
||||
<div class="col right-col" v-if="tabMode != ''">
|
||||
<div class="fs-info">
|
||||
<div>Name</div>
|
||||
<div>Name</div>
|
||||
<div>Name</div>
|
||||
</div>
|
||||
<div class="lyrics-col" v-if="tabMode == 'lyrics'">
|
||||
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
|
||||
:richlyrics="richlyrics"></lyrics-view>
|
||||
</div>
|
||||
<div class="queue-col" v-if="tabMode == 'queue'">
|
||||
<cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row fs-row">
|
||||
|
||||
<div class="col right-col" v-if="tabMode != ''">
|
||||
<div class="fs-info">
|
||||
<div>Name</div>
|
||||
<div>Name</div>
|
||||
<div>Name</div>
|
||||
</div>
|
||||
<div class="lyrics-col" v-if="tabMode == 'lyrics'">
|
||||
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
|
||||
:richlyrics="richlyrics"></lyrics-view>
|
||||
</div>
|
||||
<div class="queue-col" v-if="tabMode == 'queue'">
|
||||
<cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="tab-toggles">
|
||||
<div class="lyrics" :class="{active: tabMode == 'lyrics'}" @click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
|
||||
<div class="queue" :class="{active: tabMode == 'queue'}" @click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
|
||||
</div> -->
|
||||
</div> -->
|
||||
<!-- <div class="tab-toggles">
|
||||
<div class="lyrics" :class="{active: tabMode == 'lyrics'}" @click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
|
||||
<div class="queue" :class="{active: tabMode == 'queue'}" @click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('mini-view', {
|
||||
template: '#mini-view',
|
||||
props: {
|
||||
time: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
lyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
richlyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
tabMode: "",
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener('keyup', this.onEscapeKeyUp);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('keyup', this.onEscapeKeyUp)
|
||||
},
|
||||
mounted() {
|
||||
app.pinMiniPlayer(true)
|
||||
},
|
||||
methods: {
|
||||
onEscapeKeyUp(event) {
|
||||
if (event.which === 27) {
|
||||
app.miniPlayer(false);
|
||||
console.log('js')
|
||||
}
|
||||
},
|
||||
Vue.component('mini-view', {
|
||||
template: '#mini-view',
|
||||
props: {
|
||||
time: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
lyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
richlyrics: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
tabMode: "",
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener('keyup', this.onEscapeKeyUp);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('keyup', this.onEscapeKeyUp)
|
||||
},
|
||||
mounted() {
|
||||
app.pinMiniPlayer(true)
|
||||
},
|
||||
methods: {
|
||||
onEscapeKeyUp(event) {
|
||||
if (event.which === 27) {
|
||||
app.miniPlayer(false);
|
||||
console.log('js')
|
||||
}
|
||||
});
|
||||
</script>
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script type="text/x-template" id="moreinfo-modal">
|
||||
<div class="modal-fullscreen spatialproperties-panel moreinfo-modal" @click.self="if(timedelay) close()">
|
||||
<div class="modal-window" >
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{data.title}}</div>
|
||||
<div class="modal-subtitle modal-title">{{data.subtitle ?? ""}}</div>
|
||||
|
|
@ -15,28 +15,28 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('moreinfo-modal', {
|
||||
template: '#moreinfo-modal',
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
timedelay: false,
|
||||
}
|
||||
},
|
||||
props: ["data"],
|
||||
mounted() {
|
||||
let self = this;
|
||||
this.$nextTick(()=>{
|
||||
setTimeout(function(){
|
||||
self.timedelay = true
|
||||
}, 1000);
|
||||
})
|
||||
Vue.component('moreinfo-modal', {
|
||||
template: '#moreinfo-modal',
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
timedelay: false,
|
||||
}
|
||||
},
|
||||
props: ["data"],
|
||||
mounted() {
|
||||
let self = this;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(function() {
|
||||
self.timedelay = true
|
||||
}, 1000);
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
app.modals.moreInfo = false;
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
app.modals.moreInfo = false;
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,38 @@
|
|||
<script type="text/x-template" id="pagination">
|
||||
<div class="pagination-container" v-if="!isInfinite">
|
||||
<button
|
||||
class="md-btn page-btn"
|
||||
:disabled="effectivePage === 1"
|
||||
@click="goToPage(1)"
|
||||
class="md-btn page-btn"
|
||||
:disabled="effectivePage === 1"
|
||||
@click="goToPage(1)"
|
||||
>
|
||||
<img class="md-ico-first"/>
|
||||
<img class="md-ico-first" />
|
||||
</button>
|
||||
<button
|
||||
class="md-btn page-btn prev"
|
||||
:disabled="effectivePage === 1"
|
||||
@click="goToPrevious()"
|
||||
class="md-btn page-btn prev"
|
||||
:disabled="effectivePage === 1"
|
||||
@click="goToPrevious()"
|
||||
>
|
||||
<img class="md-ico-prev"/>
|
||||
<img class="md-ico-prev" />
|
||||
</button>
|
||||
<button
|
||||
:class="`md-btn page-btn${ isCurrentPage(page) ? ' md-btn-primary': ''}`"
|
||||
@click="goToPage(page)"
|
||||
v-for="page in pagesToShow"
|
||||
>{{ page }}</button>
|
||||
<button
|
||||
class="md-btn page-btn next"
|
||||
:disabled="effectivePage === numPages"
|
||||
@click="goToNext()"
|
||||
>
|
||||
<img class="md-ico-next"/>
|
||||
:class="`md-btn page-btn${ isCurrentPage(page) ? ' md-btn-primary': ''}`"
|
||||
@click="goToPage(page)"
|
||||
v-for="page in pagesToShow"
|
||||
>{{ page }}
|
||||
</button>
|
||||
<button
|
||||
class="md-btn page-btn last"
|
||||
:disabled="effectivePage === numPages"
|
||||
@click="goToEnd()"
|
||||
class="md-btn page-btn next"
|
||||
:disabled="effectivePage === numPages"
|
||||
@click="goToNext()"
|
||||
>
|
||||
<img class="md-ico-last"/>
|
||||
<img class="md-ico-next" />
|
||||
</button>
|
||||
<button
|
||||
class="md-btn page-btn last"
|
||||
:disabled="effectivePage === numPages"
|
||||
@click="goToEnd()"
|
||||
>
|
||||
<img class="md-ico-last" />
|
||||
</button>
|
||||
<div class="page-btn md-input-number">
|
||||
<input type="number" min="1" :max="numPages" :value="effectivePage" @change="changePage" />
|
||||
|
|
@ -41,135 +42,135 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('pagination', {
|
||||
template: "#pagination",
|
||||
props: {
|
||||
'length': { type: Number, required: true },
|
||||
'pageSize': { type: Number, required: true },
|
||||
'scroll': { type: String, required: true },
|
||||
'scrollSelector': { type: String, required: true }
|
||||
},
|
||||
data: function () {
|
||||
return { currentPage: 1 }
|
||||
},
|
||||
mounted() {
|
||||
document.querySelector(this.scrollSelector)
|
||||
.addEventListener("scroll", this.handleScroll)
|
||||
},
|
||||
destroyed() {
|
||||
document.querySelector(this.scrollSelector)
|
||||
.removeEventListener("scroll", this.handleScroll)
|
||||
},
|
||||
watch: {
|
||||
'length': function () {
|
||||
if (this.isInfinite) {
|
||||
// If a search reduces the number of things to show, we want to limit
|
||||
// the number of songs shown as well. This is to prevent you scrolling
|
||||
// to load your entire library, searching for one song, and then having
|
||||
// th re-render the entire library
|
||||
if (this.currentPage > this.numPages) {
|
||||
this.currentPage = this.numPages;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
} else {
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
},
|
||||
'scroll': function () {
|
||||
// When changing modes, set the page to 1. This is primarily to
|
||||
// prevent going to a high page (e.g., 50) and then switching to infinite
|
||||
// and showing 12.5k songs
|
||||
this.currentPage = 1;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isInfinite: function () {
|
||||
return this.scroll === "infinite"
|
||||
},
|
||||
currentRange: function () {
|
||||
if (this.isInfinite) {
|
||||
return [0, this.currentPage * this.pageSize];
|
||||
} else {
|
||||
const startingPage = Math.min(this.numPages, this.currentPage);
|
||||
|
||||
return [
|
||||
(startingPage - 1) * this.pageSize,
|
||||
startingPage * this.pageSize
|
||||
];
|
||||
}
|
||||
},
|
||||
effectivePage: function () {
|
||||
return Math.min(this.currentPage, this.numPages)
|
||||
},
|
||||
numPages: function () {
|
||||
return Math.ceil(this.length / this.pageSize) || 1;
|
||||
},
|
||||
pagesToShow: function () {
|
||||
let start = this.currentPage - 2;
|
||||
let end = this.currentPage + 2;
|
||||
|
||||
if (start < 1) {
|
||||
end += (1 - start);
|
||||
start = 1;
|
||||
}
|
||||
|
||||
const endDifference = end - this.numPages;
|
||||
if (endDifference > 0) {
|
||||
end = this.numPages;
|
||||
start = Math.max(1, start - endDifference);
|
||||
}
|
||||
|
||||
const array = [];
|
||||
for (let idx = start; idx <= end; idx++) {
|
||||
array.push(idx);
|
||||
}
|
||||
return array;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// Infinite Scrolling
|
||||
handleScroll: function (event) {
|
||||
if (this.isInfinite &&
|
||||
this.currentPage < this.numPages &&
|
||||
event.target.scrollTop >= event.target.scrollHeight - event.target.clientHeight) {
|
||||
this.currentPage += 1;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
},
|
||||
// Pagination
|
||||
isCurrentPage: function (idx) {
|
||||
return idx === this.currentPage ||
|
||||
(idx === this.numPages && this.currentPage > this.numPages);
|
||||
},
|
||||
changePage: function (event) {
|
||||
const value = event.target.valueAsNumber;
|
||||
|
||||
if (!isNaN(value) && value >= 1 && value <= this.numPages) {
|
||||
this.currentPage = value;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
},
|
||||
goToPage: function (page) {
|
||||
this.currentPage = page;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
},
|
||||
goToPrevious: function () {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage -= 1;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
},
|
||||
goToNext: function () {
|
||||
if (this.currentPage < this.numPages) {
|
||||
this.currentPage += 1;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
},
|
||||
goToEnd: function () {
|
||||
this.currentPage = this.numPages;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
Vue.component('pagination', {
|
||||
template: "#pagination",
|
||||
props: {
|
||||
'length': { type: Number, required: true },
|
||||
'pageSize': { type: Number, required: true },
|
||||
'scroll': { type: String, required: true },
|
||||
'scrollSelector': { type: String, required: true }
|
||||
},
|
||||
data: function() {
|
||||
return { currentPage: 1 }
|
||||
},
|
||||
mounted() {
|
||||
document.querySelector(this.scrollSelector)
|
||||
.addEventListener("scroll", this.handleScroll)
|
||||
},
|
||||
destroyed() {
|
||||
document.querySelector(this.scrollSelector)
|
||||
.removeEventListener("scroll", this.handleScroll)
|
||||
},
|
||||
watch: {
|
||||
'length': function() {
|
||||
if (this.isInfinite) {
|
||||
// If a search reduces the number of things to show, we want to limit
|
||||
// the number of songs shown as well. This is to prevent you scrolling
|
||||
// to load your entire library, searching for one song, and then having
|
||||
// th re-render the entire library
|
||||
if (this.currentPage > this.numPages) {
|
||||
this.currentPage = this.numPages;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
} else {
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
},
|
||||
'scroll': function() {
|
||||
// When changing modes, set the page to 1. This is primarily to
|
||||
// prevent going to a high page (e.g., 50) and then switching to infinite
|
||||
// and showing 12.5k songs
|
||||
this.currentPage = 1;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isInfinite: function() {
|
||||
return this.scroll === "infinite"
|
||||
},
|
||||
currentRange: function() {
|
||||
if (this.isInfinite) {
|
||||
return [0, this.currentPage * this.pageSize];
|
||||
} else {
|
||||
const startingPage = Math.min(this.numPages, this.currentPage);
|
||||
|
||||
return [
|
||||
(startingPage - 1) * this.pageSize,
|
||||
startingPage * this.pageSize
|
||||
];
|
||||
}
|
||||
},
|
||||
effectivePage: function() {
|
||||
return Math.min(this.currentPage, this.numPages)
|
||||
},
|
||||
numPages: function() {
|
||||
return Math.ceil(this.length / this.pageSize) || 1;
|
||||
},
|
||||
pagesToShow: function() {
|
||||
let start = this.currentPage - 2;
|
||||
let end = this.currentPage + 2;
|
||||
|
||||
if (start < 1) {
|
||||
end += (1 - start);
|
||||
start = 1;
|
||||
}
|
||||
|
||||
const endDifference = end - this.numPages;
|
||||
if (endDifference > 0) {
|
||||
end = this.numPages;
|
||||
start = Math.max(1, start - endDifference);
|
||||
}
|
||||
|
||||
const array = [];
|
||||
for (let idx = start; idx <= end; idx++) {
|
||||
array.push(idx);
|
||||
}
|
||||
return array;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// Infinite Scrolling
|
||||
handleScroll: function(event) {
|
||||
if (this.isInfinite &&
|
||||
this.currentPage < this.numPages &&
|
||||
event.target.scrollTop >= event.target.scrollHeight - event.target.clientHeight) {
|
||||
this.currentPage += 1;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
},
|
||||
// Pagination
|
||||
isCurrentPage: function(idx) {
|
||||
return idx === this.currentPage ||
|
||||
(idx === this.numPages && this.currentPage > this.numPages);
|
||||
},
|
||||
changePage: function(event) {
|
||||
const value = event.target.valueAsNumber;
|
||||
|
||||
if (!isNaN(value) && value >= 1 && value <= this.numPages) {
|
||||
this.currentPage = value;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
},
|
||||
goToPage: function(page) {
|
||||
this.currentPage = page;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
},
|
||||
goToPrevious: function() {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage -= 1;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
},
|
||||
goToNext: function() {
|
||||
if (this.currentPage < this.numPages) {
|
||||
this.currentPage += 1;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
},
|
||||
goToEnd: function() {
|
||||
this.currentPage = this.numPages;
|
||||
this.$emit("onRangeChange", this.currentRange);
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,65 +1,66 @@
|
|||
<script type="text/x-template" id="pathmenu">
|
||||
<div class="spatialproperties-panel castmenu pathmenu modal-fullscreen" @click.self="close()" @contextmenu.self="close()">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{'Edit Paths'}}</div>
|
||||
<button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<template v-for="folder of folders">
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{folder}}
|
||||
<div class="spatialproperties-panel castmenu pathmenu modal-fullscreen" @click.self="close()"
|
||||
@contextmenu.self="close()">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{'Edit Paths'}}</div>
|
||||
<button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<template v-for="folder of folders">
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{folder}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn" @click="remove(folder)">
|
||||
{{'Remove'}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn" @click="remove(folder)">
|
||||
{{'Remove'}}
|
||||
<button class="md-btn" @click="add()">
|
||||
{{'Add Path'}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn" @click="add()">
|
||||
{{'Add Path'}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('pathmenu', {
|
||||
template: '#pathmenu',
|
||||
data: function () {
|
||||
return {
|
||||
folders: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.folders = this.$root.cfg.libraryPrefs.localPaths;
|
||||
},
|
||||
watch:{},
|
||||
methods: {
|
||||
close() {
|
||||
this.$root.modals.pathMenu = false
|
||||
},
|
||||
async add(){
|
||||
const result = await ipcRenderer.invoke('folderSelector')
|
||||
for (i of result){
|
||||
if (this.folders.findIndex(x => x.startsWith(i)) == -1){
|
||||
this.folders.push(i)
|
||||
}
|
||||
}
|
||||
this.$root.cfg.libraryPrefs.localPaths = this.folders;
|
||||
ipcRenderer.invoke("scanLibrary")
|
||||
},
|
||||
remove(dir){
|
||||
this.folders = this.folders.filter(item => item !== dir)
|
||||
this.$root.cfg.libraryPrefs.localPaths = this.folders;
|
||||
ipcRenderer.invoke("scanLibrary")
|
||||
}
|
||||
Vue.component('pathmenu', {
|
||||
template: '#pathmenu',
|
||||
data: function() {
|
||||
return {
|
||||
folders: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.folders = this.$root.cfg.libraryPrefs.localPaths;
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
close() {
|
||||
this.$root.modals.pathMenu = false
|
||||
},
|
||||
async add() {
|
||||
const result = await ipcRenderer.invoke('folderSelector')
|
||||
for (i of result) {
|
||||
if (this.folders.findIndex(x => x.startsWith(i)) == -1) {
|
||||
this.folders.push(i)
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
this.$root.cfg.libraryPrefs.localPaths = this.folders;
|
||||
ipcRenderer.invoke("scanLibrary")
|
||||
},
|
||||
remove(dir) {
|
||||
this.folders = this.folders.filter(item => item !== dir)
|
||||
this.$root.cfg.libraryPrefs.localPaths = this.folders;
|
||||
ipcRenderer.invoke("scanLibrary")
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script type="text/x-template" id="plugin-menu">
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
|
||||
@contextmenu.self="app.resetState()">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{$root.getLz('term.pluginMenu')}}</div>
|
||||
|
|
@ -10,30 +11,32 @@
|
|||
<span class="icon"><%- include("../svg/x.svg") %></span>
|
||||
<span class="name" style="top: 0.5px;">{{$root.getLz('term.pluginMenu.none')}}</span>
|
||||
</span>
|
||||
<button class="playlist-item" @click="entry.onClick(); closeMenu();" v-for="entry in app.pluginMenuEntries">
|
||||
<span class="icon"><%- include("../svg/grid.svg") %></span>
|
||||
<span class="name" style="top: 0.5px;">{{ entry.name }}</span>
|
||||
</button>
|
||||
<button class="playlist-item" @click="entry.onClick(); closeMenu();"
|
||||
v-for="entry in app.pluginMenuEntries">
|
||||
<span class="icon"><%- include("../svg/grid.svg") %></span>
|
||||
<span class="name" style="top: 0.5px;">{{ entry.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('plugin-menu', {
|
||||
template: '#plugin-menu',
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
closeMenu() {
|
||||
app.modals.pluginMenu = false
|
||||
},
|
||||
},
|
||||
Vue.component('plugin-menu', {
|
||||
template: '#plugin-menu',
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
},
|
||||
props: {},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
closeMenu() {
|
||||
app.modals.pluginMenu = false
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
<script type="text/x-template" id="qrcode-modal">
|
||||
<div class="modal-fullscreen spatialproperties-panel">
|
||||
<div class="modal-window" >
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{`Web Remote QR : ` + url }}</div>
|
||||
<button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<img class="qrimg" :src="src"/>
|
||||
<img class="qrimg" :src="src" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('qrcode-modal', {
|
||||
template: '#qrcode-modal',
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
Vue.component('qrcode-modal', {
|
||||
template: '#qrcode-modal',
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
|
||||
}
|
||||
},
|
||||
props: ["src","url"],
|
||||
mounted() {
|
||||
}
|
||||
},
|
||||
props: ["src", "url"],
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
app.resetState()
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
app.resetState()
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="queue-body" v-if="page == 'history'">
|
||||
<mediaitem-list-item :show-library-status="false" v-for="item in history" :item="item"></mediaitem-list-item>
|
||||
<mediaitem-list-item :show-library-status="false" v-for="item in history"
|
||||
:item="item"></mediaitem-list-item>
|
||||
</div>
|
||||
<div class="queue-body" v-if="page == 'queue'">
|
||||
<draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
|
||||
|
|
@ -27,18 +28,26 @@
|
|||
<div class="row">
|
||||
<div class="col-auto cider-flex-center">
|
||||
<div class="artwork">
|
||||
<mediaitem-artwork :url="queueItem.item.attributes.artwork ? queueItem.item.attributes.artwork.url : ''" :size="32"></mediaitem-artwork>
|
||||
<mediaitem-artwork
|
||||
:url="queueItem.item.attributes.artwork ? queueItem.item.attributes.artwork.url : ''"
|
||||
:size="32"></mediaitem-artwork>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col queue-info">
|
||||
<div class="queue-title text-overflow-elipsis">{{ queueItem.item.attributes.name }}</div>
|
||||
<div class="queue-subtitle text-overflow-elipsis">{{ queueItem.item.attributes.artistName }} — {{ queueItem.item.attributes.albumName }}</div>
|
||||
<div class="queue-title text-overflow-elipsis">{{ queueItem.item.attributes.name }}
|
||||
</div>
|
||||
<div class="queue-subtitle text-overflow-elipsis">{{
|
||||
queueItem.item.attributes.artistName }} — {{ queueItem.item.attributes.albumName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="queue-explicit-icon cider-flex-center" v-if="queueItem.item.attributes.contentRating == 'explicit'">
|
||||
<div class="queue-explicit-icon cider-flex-center"
|
||||
v-if="queueItem.item.attributes.contentRating == 'explicit'">
|
||||
<div class="explicit-icon"></div>
|
||||
</div>
|
||||
<div class="col queue-duration-info">
|
||||
<div class="queue-duration cider-flex-center">{{convertTimeToString(queueItem.item.attributes.durationInMillis)}}</div>
|
||||
<div class="queue-duration cider-flex-center">
|
||||
{{convertTimeToString(queueItem.item.attributes.durationInMillis)}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -47,138 +56,144 @@
|
|||
</div>
|
||||
<div class="queue-footer">
|
||||
<div class="btn-group" style="width:100%;">
|
||||
<button class="md-btn md-btn-small" :class="{'md-btn-primary': (page == 'queue')}" @click="page = 'queue'">{{app.getLz('term.queue')}}</button>
|
||||
<button class="md-btn md-btn-small" :class="{'md-btn-primary': (page == 'history')}" @click="getHistory();page = 'history'">{{app.getLz('term.history')}}</button>
|
||||
<button class="md-btn md-btn-small" :class="{'md-btn-primary': (page == 'queue')}"
|
||||
@click="page = 'queue'">{{app.getLz('term.queue')}}
|
||||
</button>
|
||||
<button class="md-btn md-btn-small" :class="{'md-btn-primary': (page == 'history')}"
|
||||
@click="getHistory();page = 'history'">{{app.getLz('term.history')}}
|
||||
</button>
|
||||
</div>
|
||||
<button class="md-btn md-btn-small" style="width:100%;margin-top:6px;" v-if="queueItems.length > 1" @click="app.mk.clearQueue();updateQueue()">{{app.getLz('term.clearAll')}}</button>
|
||||
<button class="md-btn md-btn-small" style="width:100%;margin-top:6px;" v-if="queueItems.length > 1"
|
||||
@click="app.mk.clearQueue();updateQueue()">{{app.getLz('term.clearAll')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
Vue.component('cider-queue', {
|
||||
template: '#cider-queue',
|
||||
data: function () {
|
||||
return {
|
||||
drag: false,
|
||||
queuePosition: 0,
|
||||
queueItems: [],
|
||||
selected: -1,
|
||||
selectedItems: [],
|
||||
history: [],
|
||||
page: "queue",
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
displayQueueItems() {
|
||||
const displayLimit = 50;
|
||||
const lastDisplayPosition = Math.min(displayLimit + this.queuePosition, this.queueItems.length);
|
||||
return this.queueItems.slice(this.queuePosition, lastDisplayPosition);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updateQueue()
|
||||
},
|
||||
methods: {
|
||||
async getHistory() {
|
||||
let history = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`, { l : this.$root.mklang})
|
||||
this.history = history.data.data
|
||||
},
|
||||
select(e, position) {
|
||||
if (e.ctrlKey || e.shiftKey) {
|
||||
if (this.selectedItems.indexOf(position) == -1) {
|
||||
this.selectedItems.push(position)
|
||||
} else {
|
||||
this.selectedItems.splice(this.selectedItems.indexOf(position), 1)
|
||||
}
|
||||
} else {
|
||||
this.selectedItems = [position]
|
||||
}
|
||||
},
|
||||
queueContext(event, item, position) {
|
||||
let self = this
|
||||
let useMenu = "single"
|
||||
if (this.selectedItems.length > 1) {
|
||||
useMenu = "multiple"
|
||||
}
|
||||
let menus = {
|
||||
single: {
|
||||
items: [{
|
||||
"name": app.getLz('action.removeFromQueue'),
|
||||
"action": function () {
|
||||
self.queueItems.splice(position, 1)
|
||||
app.mk.queue._queueItems = self.queueItems;
|
||||
app.mk.queue._reindex()
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": app.getLz('action.startRadio'),
|
||||
"action": function () {
|
||||
app.mk.setStationQueue({
|
||||
song: item.attributes.playParams.id ?? item.id
|
||||
}).then(() => {
|
||||
app.mk.play()
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": app.getLz('action.goToArtist'),
|
||||
"action": function () {
|
||||
app.searchAndNavigate(item,'artist')
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": app.getLz('action.goToAlbum'),
|
||||
"action": function () {
|
||||
app.searchAndNavigate(item,'album')
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
multiple: {
|
||||
items: [{
|
||||
"name": app.getLz('action.removeTracks').replace('${self.selectedItems.length}', self.selectedItems.length.toString()),
|
||||
"action": function () {
|
||||
// add property to items to be removed
|
||||
self.selectedItems.forEach(function (item) {
|
||||
self.queueItems[item].remove = true
|
||||
})
|
||||
// remove items
|
||||
self.queueItems = self.queueItems.filter(function (item) {
|
||||
return !item.remove
|
||||
})
|
||||
app.mk.queue._reindex()
|
||||
self.selectedItems = []
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
app.showMenuPanel(menus[useMenu], event);
|
||||
},
|
||||
playQueueItem(id) {
|
||||
app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(id))
|
||||
},
|
||||
updateQueue() {
|
||||
this.selected = -1
|
||||
if (app.mk.queue) {
|
||||
this.queuePosition = app.mk.queue.position;
|
||||
this.queueItems = app.mk.queue._queueItems;
|
||||
} else {
|
||||
this.queuePosition = 0;
|
||||
this.queueItems = [];
|
||||
}
|
||||
},
|
||||
move() {
|
||||
this.selected = -1
|
||||
app.mk.queue._queueItems = this.queueItems;
|
||||
app.mk.queue._reindex()
|
||||
},
|
||||
convertTimeToString(timeInMilliseconds) {
|
||||
var seconds = ((timeInMilliseconds % 60000) / 1000).toFixed(0);
|
||||
return Math.floor(timeInMilliseconds/60000) + ":" + (seconds < 10 ? '0' : '') + seconds;
|
||||
}
|
||||
Vue.component('cider-queue', {
|
||||
template: '#cider-queue',
|
||||
data: function() {
|
||||
return {
|
||||
drag: false,
|
||||
queuePosition: 0,
|
||||
queueItems: [],
|
||||
selected: -1,
|
||||
selectedItems: [],
|
||||
history: [],
|
||||
page: "queue",
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
displayQueueItems() {
|
||||
const displayLimit = 50;
|
||||
const lastDisplayPosition = Math.min(displayLimit + this.queuePosition, this.queueItems.length);
|
||||
return this.queueItems.slice(this.queuePosition, lastDisplayPosition);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updateQueue()
|
||||
},
|
||||
methods: {
|
||||
async getHistory() {
|
||||
let history = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`, { l: this.$root.mklang })
|
||||
this.history = history.data.data
|
||||
},
|
||||
select(e, position) {
|
||||
if (e.ctrlKey || e.shiftKey) {
|
||||
if (this.selectedItems.indexOf(position) == -1) {
|
||||
this.selectedItems.push(position)
|
||||
} else {
|
||||
this.selectedItems.splice(this.selectedItems.indexOf(position), 1)
|
||||
}
|
||||
} else {
|
||||
this.selectedItems = [position]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
},
|
||||
queueContext(event, item, position) {
|
||||
let self = this
|
||||
let useMenu = "single"
|
||||
if (this.selectedItems.length > 1) {
|
||||
useMenu = "multiple"
|
||||
}
|
||||
let menus = {
|
||||
single: {
|
||||
items: [{
|
||||
"name": app.getLz('action.removeFromQueue'),
|
||||
"action": function() {
|
||||
self.queueItems.splice(position, 1)
|
||||
app.mk.queue._queueItems = self.queueItems;
|
||||
app.mk.queue._reindex()
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": app.getLz('action.startRadio'),
|
||||
"action": function() {
|
||||
app.mk.setStationQueue({
|
||||
song: item.attributes.playParams.id ?? item.id
|
||||
}).then(() => {
|
||||
app.mk.play()
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": app.getLz('action.goToArtist'),
|
||||
"action": function() {
|
||||
app.searchAndNavigate(item, 'artist')
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": app.getLz('action.goToAlbum'),
|
||||
"action": function() {
|
||||
app.searchAndNavigate(item, 'album')
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
multiple: {
|
||||
items: [{
|
||||
"name": app.getLz('action.removeTracks').replace('${self.selectedItems.length}', self.selectedItems.length.toString()),
|
||||
"action": function() {
|
||||
// add property to items to be removed
|
||||
self.selectedItems.forEach(function(item) {
|
||||
self.queueItems[item].remove = true
|
||||
})
|
||||
// remove items
|
||||
self.queueItems = self.queueItems.filter(function(item) {
|
||||
return !item.remove
|
||||
})
|
||||
app.mk.queue._reindex()
|
||||
self.selectedItems = []
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
app.showMenuPanel(menus[useMenu], event);
|
||||
},
|
||||
playQueueItem(id) {
|
||||
app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(id))
|
||||
},
|
||||
updateQueue() {
|
||||
this.selected = -1
|
||||
if (app.mk.queue) {
|
||||
this.queuePosition = app.mk.queue.position;
|
||||
this.queueItems = app.mk.queue._queueItems;
|
||||
} else {
|
||||
this.queuePosition = 0;
|
||||
this.queueItems = [];
|
||||
}
|
||||
},
|
||||
move() {
|
||||
this.selected = -1
|
||||
app.mk.queue._queueItems = this.queueItems;
|
||||
app.mk.queue._reindex()
|
||||
},
|
||||
convertTimeToString(timeInMilliseconds) {
|
||||
var seconds = ((timeInMilliseconds % 60000) / 1000).toFixed(0);
|
||||
return Math.floor(timeInMilliseconds / 60000) + ":" + (seconds < 10 ? '0' : '') + seconds;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script type="text/x-template" id="keybinds-settings">
|
||||
<div class="keybinds-page">
|
||||
<div class="md-option-header">
|
||||
<span>{{$root.getLz('settings.option.general.keybindings')}}</span>
|
||||
</div>
|
||||
<div class="md-option-header">
|
||||
<span>{{$root.getLz('settings.option.general.keybindings')}}</span>
|
||||
</div>
|
||||
<div class="settings-option-body">
|
||||
<div class="md-option-header-sub">
|
||||
<span>{{$root.getLz('settings.option.general.keybindings.library')}}</span>
|
||||
|
|
@ -207,7 +207,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<button class="md-btn md-btn-large md-btn-block" @click="keyBindReset()">
|
||||
{{$root.getLz('term.reset')}}
|
||||
{{$root.getLz('term.reset')}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -215,109 +215,109 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('keybinds-settings', {
|
||||
template: "#keybinds-settings",
|
||||
props: [],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
keyBindUpdate: function (action) {
|
||||
const blur = document.createElement('div');
|
||||
blur.className = 'blur';
|
||||
blur.style.backgroundColor = 'rgba(0,0,0,0.25)';
|
||||
blur.style.position = 'fixed';
|
||||
blur.style.top = '0';
|
||||
blur.style.left = '0';
|
||||
blur.style.width = '100%';
|
||||
blur.style.height = '100%';
|
||||
blur.style.zIndex = '9999';
|
||||
blur.style.display = 'flex';
|
||||
blur.style.alignItems = 'center';
|
||||
blur.style.justifyContent = 'center';
|
||||
blur.style.fontSize = '2em';
|
||||
blur.style.color = 'white';
|
||||
blur.innerHTML = `<center>${app.getLz('settings.option.general.keybindings.pressCombination')}<br />${app.getLz('settings.option.general.keybindings.pressEscape')}</center>`
|
||||
document.body.appendChild(blur);
|
||||
Vue.component('keybinds-settings', {
|
||||
template: "#keybinds-settings",
|
||||
props: [],
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
keyBindUpdate: function(action) {
|
||||
const blur = document.createElement('div');
|
||||
blur.className = 'blur';
|
||||
blur.style.backgroundColor = 'rgba(0,0,0,0.25)';
|
||||
blur.style.position = 'fixed';
|
||||
blur.style.top = '0';
|
||||
blur.style.left = '0';
|
||||
blur.style.width = '100%';
|
||||
blur.style.height = '100%';
|
||||
blur.style.zIndex = '9999';
|
||||
blur.style.display = 'flex';
|
||||
blur.style.alignItems = 'center';
|
||||
blur.style.justifyContent = 'center';
|
||||
blur.style.fontSize = '2em';
|
||||
blur.style.color = 'white';
|
||||
blur.innerHTML = `<center>${app.getLz('settings.option.general.keybindings.pressCombination')}<br />${app.getLz('settings.option.general.keybindings.pressEscape')}</center>`
|
||||
document.body.appendChild(blur);
|
||||
|
||||
let keyBind = [];
|
||||
const keyBindTimeout = setTimeout(function () {
|
||||
keyBind = [];
|
||||
document.body.removeChild(blur);
|
||||
}, 30000);
|
||||
const keyBindUpdate = function (e) {
|
||||
if (document.body.contains(blur)) {
|
||||
if (e.key == 'Escape') {
|
||||
document.body.removeChild(blur);
|
||||
clearTimeout(keyBindTimeout);
|
||||
return;
|
||||
} else {
|
||||
if (e.keyCode >= 65 && e.keyCode <= 90 && e.keyCode <= 97 && e.keyCode <= 122) {
|
||||
keyBind.push(e.key.toUpperCase());
|
||||
} else {
|
||||
keyBind.push(e.key);
|
||||
}
|
||||
if (keyBind.length === 2) {
|
||||
if (keyBind[0] !== keyBind[1]) {
|
||||
app.cfg.general.keybindings[action] = keyBind
|
||||
document.body.removeChild(blur);
|
||||
clearTimeout(keyBindTimeout);
|
||||
notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
|
||||
app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
|
||||
if (ok) ipcRenderer.invoke("relaunchApp")
|
||||
})
|
||||
} else {
|
||||
keyBind = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', keyBindUpdate);
|
||||
},
|
||||
keyBindReset: function () {
|
||||
app.cfg.general.keybindings.search = [app.platform == "darwin" ? "Command" : "Control", "F"];
|
||||
app.cfg.general.keybindings.listnow = [app.platform == "darwin" ? "Command" : "Control", "L"];
|
||||
app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
|
||||
app.cfg.general.keybindings.recentAdd = [app.platform == "darwin" ? "Command" : "Control", "G"];
|
||||
app.cfg.general.keybindings.songs = [app.platform == "darwin" ? "Command" : "Control", "J"];
|
||||
app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "A"];
|
||||
app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
|
||||
app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
|
||||
app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "W"];
|
||||
app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "A"];
|
||||
app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "P"];
|
||||
app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "C"];
|
||||
app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Command" : "Control", ","];
|
||||
app.cfg.general.keybindings.zoomn = [app.platform == "darwin" ? "Command" : "Control", "numadd"];
|
||||
app.cfg.general.keybindings.zoomt = [app.platform == "darwin" ? "Command" : "Control", "numsub"];
|
||||
app.cfg.general.keybindings.zoomrst = [app.platform == "darwin" ? "Command" : "Control", "num0"];
|
||||
app.cfg.general.keybindings.openDeveloperTools = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : "Shift", "I"];
|
||||
notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
|
||||
app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
|
||||
let keyBind = [];
|
||||
const keyBindTimeout = setTimeout(function() {
|
||||
keyBind = [];
|
||||
document.body.removeChild(blur);
|
||||
}, 30000);
|
||||
const keyBindUpdate = function(e) {
|
||||
if (document.body.contains(blur)) {
|
||||
if (e.key == 'Escape') {
|
||||
document.body.removeChild(blur);
|
||||
clearTimeout(keyBindTimeout);
|
||||
return;
|
||||
} else {
|
||||
if (e.keyCode >= 65 && e.keyCode <= 90 && e.keyCode <= 97 && e.keyCode <= 122) {
|
||||
keyBind.push(e.key.toUpperCase());
|
||||
} else {
|
||||
keyBind.push(e.key);
|
||||
}
|
||||
if (keyBind.length === 2) {
|
||||
if (keyBind[0] !== keyBind[1]) {
|
||||
app.cfg.general.keybindings[action] = keyBind
|
||||
document.body.removeChild(blur);
|
||||
clearTimeout(keyBindTimeout);
|
||||
notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
|
||||
app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
|
||||
if (ok) ipcRenderer.invoke("relaunchApp")
|
||||
})
|
||||
},
|
||||
getLanguages: function () {
|
||||
let langs = this.$root.lzListing
|
||||
let categories = {
|
||||
"main": [],
|
||||
"fun": [],
|
||||
"unsorted": []
|
||||
})
|
||||
} else {
|
||||
keyBind = [];
|
||||
}
|
||||
// sort by category if category is undefined or empty put it in "unsorted"
|
||||
for (let i = 0; i < langs.length; i++) {
|
||||
if (langs[i].category === undefined || langs[i].category === "") {
|
||||
categories.unsorted.push(langs[i])
|
||||
} else {
|
||||
categories[langs[i].category].push(langs[i])
|
||||
}
|
||||
}
|
||||
// return
|
||||
return categories
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', keyBindUpdate);
|
||||
},
|
||||
keyBindReset: function() {
|
||||
app.cfg.general.keybindings.search = [app.platform == "darwin" ? "Command" : "Control", "F"];
|
||||
app.cfg.general.keybindings.listnow = [app.platform == "darwin" ? "Command" : "Control", "L"];
|
||||
app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
|
||||
app.cfg.general.keybindings.recentAdd = [app.platform == "darwin" ? "Command" : "Control", "G"];
|
||||
app.cfg.general.keybindings.songs = [app.platform == "darwin" ? "Command" : "Control", "J"];
|
||||
app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "A"];
|
||||
app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
|
||||
app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
|
||||
app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "W"];
|
||||
app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "A"];
|
||||
app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "P"];
|
||||
app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "C"];
|
||||
app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Command" : "Control", ","];
|
||||
app.cfg.general.keybindings.zoomn = [app.platform == "darwin" ? "Command" : "Control", "numadd"];
|
||||
app.cfg.general.keybindings.zoomt = [app.platform == "darwin" ? "Command" : "Control", "numsub"];
|
||||
app.cfg.general.keybindings.zoomrst = [app.platform == "darwin" ? "Command" : "Control", "num0"];
|
||||
app.cfg.general.keybindings.openDeveloperTools = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : "Shift", "I"];
|
||||
notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
|
||||
app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
|
||||
if (ok) ipcRenderer.invoke("relaunchApp")
|
||||
})
|
||||
},
|
||||
getLanguages: function() {
|
||||
let langs = this.$root.lzListing
|
||||
let categories = {
|
||||
"main": [],
|
||||
"fun": [],
|
||||
"unsorted": []
|
||||
}
|
||||
})
|
||||
</script>
|
||||
// sort by category if category is undefined or empty put it in "unsorted"
|
||||
for (let i = 0; i < langs.length; i++) {
|
||||
if (langs[i].category === undefined || langs[i].category === "") {
|
||||
categories.unsorted.push(langs[i])
|
||||
} else {
|
||||
categories[langs[i].category].push(langs[i])
|
||||
}
|
||||
}
|
||||
// return
|
||||
return categories
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@
|
|||
<div class="row">
|
||||
<div class="col cider-flex-center">
|
||||
<div>
|
||||
<h4 class="repo-name">{{ (repo.description != null) ? repo.description : repo.full_name }}</h4>
|
||||
<h4 class="repo-name">{{ (repo.description != null) ? repo.description :
|
||||
repo.full_name }}</h4>
|
||||
<div>⭐ {{ repo.stargazers_count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -37,7 +38,8 @@
|
|||
<div>
|
||||
<h3 class="repo-preview-name">{{ openRepo.description }}</h3>
|
||||
<div>
|
||||
<div class="svg-icon inline" :style="{'--url': 'url(\'./assets/github.svg\')'}"></div>
|
||||
<div class="svg-icon inline"
|
||||
:style="{'--url': 'url(\'./assets/github.svg\')'}"></div>
|
||||
<a class="repo-url" target="_blank" :href="openRepo.html_url">{{ openRepo.full_name
|
||||
}}</a></div>
|
||||
<div>⭐ {{ openRepo.stargazers_count }}</div>
|
||||
|
|
@ -62,127 +64,127 @@
|
|||
</div>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('plugins-github', {
|
||||
template: "#plugins-github",
|
||||
props: [],
|
||||
data: function () {
|
||||
return {
|
||||
repos: [],
|
||||
openRepo: {
|
||||
id: -1,
|
||||
name: '',
|
||||
description: '',
|
||||
html_url: '',
|
||||
stargazers_count: 0,
|
||||
owner: {
|
||||
avatar_url: ''
|
||||
},
|
||||
readme: ""
|
||||
},
|
||||
themesInstalled: []
|
||||
}
|
||||
Vue.component('plugins-github', {
|
||||
template: "#plugins-github",
|
||||
props: [],
|
||||
data: function() {
|
||||
return {
|
||||
repos: [],
|
||||
openRepo: {
|
||||
id: -1,
|
||||
name: '',
|
||||
description: '',
|
||||
html_url: '',
|
||||
stargazers_count: 0,
|
||||
owner: {
|
||||
avatar_url: ''
|
||||
},
|
||||
readme: ""
|
||||
},
|
||||
mounted() {
|
||||
this.getRepos();
|
||||
// this.getInstalledThemes();
|
||||
},
|
||||
methods: {
|
||||
getInstalledThemes() {
|
||||
let self = this
|
||||
const themes = ipcRenderer.sendSync("get-themes")
|
||||
// for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
|
||||
themes.forEach(theme => {
|
||||
if (theme.github_repo !== "") {
|
||||
self.themesInstalled.push(theme.github_repo)
|
||||
}
|
||||
})
|
||||
},
|
||||
showRepo(repo) {
|
||||
const self = this
|
||||
const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
themesInstalled: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getRepos();
|
||||
// this.getInstalledThemes();
|
||||
},
|
||||
methods: {
|
||||
getInstalledThemes() {
|
||||
let self = this
|
||||
const themes = ipcRenderer.sendSync("get-themes")
|
||||
// for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
|
||||
themes.forEach(theme => {
|
||||
if (theme.github_repo !== "") {
|
||||
self.themesInstalled.push(theme.github_repo)
|
||||
}
|
||||
})
|
||||
},
|
||||
showRepo(repo) {
|
||||
const self = this
|
||||
const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch(readmeUrl, requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = self.convertReadMe(result);
|
||||
})
|
||||
.catch(error => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = `This repository doesn't have a README.md file.`;
|
||||
console.log('error', error)
|
||||
});
|
||||
},
|
||||
convertReadMe(text) {
|
||||
return marked.parse(text)
|
||||
},
|
||||
installThemeRepo(repo) {
|
||||
let self = this
|
||||
let msg = app.stringTemplateParser(app.getLz('settings.option.visual.plugin.github.install.confirm'), {
|
||||
repo: repo.full_name
|
||||
});
|
||||
app.confirm(msg, (res) => {
|
||||
if (res) {
|
||||
ipcRenderer.once("plugin-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = []
|
||||
notyf.success(app.getLz('settings.notyf.visual.plugin.install.success'));
|
||||
app.confirm(app.getLz("settings.prompt.visual.plugin.github.success"), (ok)=>{
|
||||
if (ok) {
|
||||
ipcRenderer.invoke("relaunchApp")
|
||||
} else {
|
||||
return
|
||||
}
|
||||
})
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.plugin.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-plugin", repo.html_url)
|
||||
}
|
||||
fetch(readmeUrl, requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = self.convertReadMe(result);
|
||||
})
|
||||
.catch(error => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = `This repository doesn't have a README.md file.`;
|
||||
console.log('error', error)
|
||||
});
|
||||
},
|
||||
convertReadMe(text) {
|
||||
return marked.parse(text)
|
||||
},
|
||||
installThemeRepo(repo) {
|
||||
let self = this
|
||||
let msg = app.stringTemplateParser(app.getLz('settings.option.visual.plugin.github.install.confirm'), {
|
||||
repo: repo.full_name
|
||||
});
|
||||
app.confirm(msg, (res) => {
|
||||
if (res) {
|
||||
ipcRenderer.once("plugin-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = []
|
||||
notyf.success(app.getLz('settings.notyf.visual.plugin.install.success'));
|
||||
app.confirm(app.getLz("settings.prompt.visual.plugin.github.success"), (ok) => {
|
||||
if (ok) {
|
||||
ipcRenderer.invoke("relaunchApp")
|
||||
} else {
|
||||
return
|
||||
}
|
||||
})
|
||||
},
|
||||
installThemeURL() {
|
||||
let self = this
|
||||
app.prompt(app.getLz('settings.prompt.visual.plugin.github.URL'), (result) => {
|
||||
if (result) {
|
||||
ipcRenderer.once("plugin-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = ipcRenderer.sendSync("get-themes")
|
||||
app.confirm(app.getLz("settings.prompt.visual.plugin.github.success"), (ok)=>{
|
||||
if (ok) {
|
||||
ipcRenderer.invoke("relaunchApp")
|
||||
} else {
|
||||
return
|
||||
}
|
||||
})
|
||||
notyf.success(app.getLz('settings.notyf.visual.plugin.install.success'));
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.plugin.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-plugin", result)
|
||||
}
|
||||
});
|
||||
},
|
||||
getRepos() {
|
||||
let self = this
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.plugin.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-plugin", repo.html_url)
|
||||
}
|
||||
})
|
||||
},
|
||||
installThemeURL() {
|
||||
let self = this
|
||||
app.prompt(app.getLz('settings.prompt.visual.plugin.github.URL'), (result) => {
|
||||
if (result) {
|
||||
ipcRenderer.once("plugin-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = ipcRenderer.sendSync("get-themes")
|
||||
app.confirm(app.getLz("settings.prompt.visual.plugin.github.success"), (ok) => {
|
||||
if (ok) {
|
||||
ipcRenderer.invoke("relaunchApp")
|
||||
} else {
|
||||
return
|
||||
}
|
||||
})
|
||||
notyf.success(app.getLz('settings.notyf.visual.plugin.install.success'));
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.plugin.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-plugin", result)
|
||||
}
|
||||
});
|
||||
},
|
||||
getRepos() {
|
||||
let self = this
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch("https://api.github.com/search/repositories?q=topic:cidermusicplugin fork:true&per_page=100", requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
self.repos = JSON.parse(result).items
|
||||
})
|
||||
.catch(error => console.log('error', error));
|
||||
}
|
||||
}
|
||||
})
|
||||
fetch("https://api.github.com/search/repositories?q=topic:cidermusicplugin fork:true&per_page=100", requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
self.repos = JSON.parse(result).items
|
||||
})
|
||||
.catch(error => console.log('error', error));
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -78,120 +78,120 @@
|
|||
</div>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('themes-github', {
|
||||
template: "#themes-github",
|
||||
props: [],
|
||||
data: function () {
|
||||
return {
|
||||
repos: [],
|
||||
openRepo: {
|
||||
id: -1,
|
||||
name: '',
|
||||
description: '',
|
||||
html_url: '',
|
||||
stargazers_count: 0,
|
||||
owner: {
|
||||
avatar_url: ''
|
||||
},
|
||||
readme: ""
|
||||
},
|
||||
themesInstalled: [],
|
||||
themes: []
|
||||
}
|
||||
Vue.component('themes-github', {
|
||||
template: "#themes-github",
|
||||
props: [],
|
||||
data: function() {
|
||||
return {
|
||||
repos: [],
|
||||
openRepo: {
|
||||
id: -1,
|
||||
name: '',
|
||||
description: '',
|
||||
html_url: '',
|
||||
stargazers_count: 0,
|
||||
owner: {
|
||||
avatar_url: ''
|
||||
},
|
||||
readme: ""
|
||||
},
|
||||
mounted() {
|
||||
this.themes = ipcRenderer.sendSync("get-themes")
|
||||
this.getRepos();
|
||||
this.getInstalledThemes();
|
||||
},
|
||||
methods: {
|
||||
openThemesFolder() {
|
||||
ipcRenderer.invoke("open-path", "themes")
|
||||
},
|
||||
getInstalledThemes() {
|
||||
let self = this
|
||||
const themes = ipcRenderer.sendSync("get-themes")
|
||||
// for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
|
||||
themes.forEach(theme => {
|
||||
if (theme.github_repo !== "" && typeof theme.commit != "") {
|
||||
self.themesInstalled.push(theme.github_repo.toLowerCase())
|
||||
}
|
||||
})
|
||||
},
|
||||
showRepo(repo) {
|
||||
const self = this
|
||||
const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
themesInstalled: [],
|
||||
themes: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.themes = ipcRenderer.sendSync("get-themes")
|
||||
this.getRepos();
|
||||
this.getInstalledThemes();
|
||||
},
|
||||
methods: {
|
||||
openThemesFolder() {
|
||||
ipcRenderer.invoke("open-path", "themes")
|
||||
},
|
||||
getInstalledThemes() {
|
||||
let self = this
|
||||
const themes = ipcRenderer.sendSync("get-themes")
|
||||
// for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
|
||||
themes.forEach(theme => {
|
||||
if (theme.github_repo !== "" && typeof theme.commit != "") {
|
||||
self.themesInstalled.push(theme.github_repo.toLowerCase())
|
||||
}
|
||||
})
|
||||
},
|
||||
showRepo(repo) {
|
||||
const self = this
|
||||
const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch(readmeUrl, requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = self.convertReadMe(result);
|
||||
})
|
||||
.catch(error => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = `This repository doesn't have a README.md file.`;
|
||||
console.log('error', error)
|
||||
});
|
||||
},
|
||||
convertReadMe(text) {
|
||||
return marked.parse(text)
|
||||
},
|
||||
installThemeRepo(repo) {
|
||||
let self = this
|
||||
let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
|
||||
repo: repo.full_name
|
||||
});
|
||||
app.confirm(msg, (res) => {
|
||||
if (res) {
|
||||
ipcRenderer.once("theme-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = ipcRenderer.sendSync("get-themes")
|
||||
self.getInstalledThemes()
|
||||
notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-theme", repo.html_url)
|
||||
}
|
||||
})
|
||||
},
|
||||
installThemeURL() {
|
||||
let self = this
|
||||
app.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
|
||||
if (result) {
|
||||
ipcRenderer.once("theme-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = ipcRenderer.sendSync("get-themes")
|
||||
notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-theme", result)
|
||||
}
|
||||
});
|
||||
},
|
||||
getRepos() {
|
||||
let self = this
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
fetch(readmeUrl, requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = self.convertReadMe(result);
|
||||
})
|
||||
.catch(error => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = `This repository doesn't have a README.md file.`;
|
||||
console.log('error', error)
|
||||
});
|
||||
},
|
||||
convertReadMe(text) {
|
||||
return marked.parse(text)
|
||||
},
|
||||
installThemeRepo(repo) {
|
||||
let self = this
|
||||
let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
|
||||
repo: repo.full_name
|
||||
});
|
||||
app.confirm(msg, (res) => {
|
||||
if (res) {
|
||||
ipcRenderer.once("theme-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = ipcRenderer.sendSync("get-themes")
|
||||
self.getInstalledThemes()
|
||||
notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-theme", repo.html_url)
|
||||
}
|
||||
})
|
||||
},
|
||||
installThemeURL() {
|
||||
let self = this
|
||||
app.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
|
||||
if (result) {
|
||||
ipcRenderer.once("theme-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = ipcRenderer.sendSync("get-themes")
|
||||
notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-theme", result)
|
||||
}
|
||||
});
|
||||
},
|
||||
getRepos() {
|
||||
let self = this
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch("https://api.github.com/search/repositories?q=topic:cidermusictheme fork:true&per_page=100", requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
let items = JSON.parse(result).items
|
||||
self.repos = items
|
||||
})
|
||||
.catch(error => console.log('error', error));
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
fetch("https://api.github.com/search/repositories?q=topic:cidermusictheme fork:true&per_page=100", requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
let items = JSON.parse(result).items
|
||||
self.repos = items
|
||||
})
|
||||
.catch(error => console.log('error', error));
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -32,9 +32,9 @@
|
|||
<ul class="list-group list-group-flush">
|
||||
<template v-for="theme in themes">
|
||||
<li @click="addStyle(theme.file)"
|
||||
@contextmenu="contextMenu($event, theme)"
|
||||
class="list-group-item list-group-item-dark"
|
||||
:class="{'applied': $root.cfg.visual.styles.includes(theme.file)}">
|
||||
@contextmenu="contextMenu($event, theme)"
|
||||
class="list-group-item list-group-item-dark"
|
||||
:class="{'applied': $root.cfg.visual.styles.includes(theme.file)}">
|
||||
|
||||
<b-row>
|
||||
<b-col class="themeLabel">{{theme.name}}</b-col>
|
||||
|
|
@ -51,33 +51,34 @@
|
|||
<button class="themeContextMenu codicon codicon-package"></button>
|
||||
</b-col>
|
||||
<b-col sm="auto">
|
||||
<button @click.stop="contextMenu($event, theme)" class="themeContextMenu codicon codicon-list-unordered"></button>
|
||||
<button @click.stop="contextMenu($event, theme)"
|
||||
class="themeContextMenu codicon codicon-list-unordered"></button>
|
||||
</b-col>
|
||||
</template>
|
||||
|
||||
</b-row>
|
||||
</li>
|
||||
<li @click="addStyle(packEntry.file)"
|
||||
@contextmenu="contextMenu($event, theme)"
|
||||
class="list-group-item list-group-item-dark addon"
|
||||
v-for="packEntry in theme.pack"
|
||||
:class="{'applied': $root.cfg.visual.styles.includes(packEntry.file)}"
|
||||
v-if="theme.pack">
|
||||
@contextmenu="contextMenu($event, theme)"
|
||||
class="list-group-item list-group-item-dark addon"
|
||||
v-for="packEntry in theme.pack"
|
||||
:class="{'applied': $root.cfg.visual.styles.includes(packEntry.file)}"
|
||||
v-if="theme.pack">
|
||||
|
||||
<b-row>
|
||||
<b-col class="themeLabel">{{packEntry.name}}</b-col>
|
||||
<template v-if="$root.cfg.visual.styles.includes(packEntry.file)">
|
||||
<b-col sm="auto">
|
||||
<button class="themeContextMenu codicon codicon-check"></button>
|
||||
</b-col>
|
||||
</template>
|
||||
<template v-else>
|
||||
<b-col sm="auto">
|
||||
<button class="themeContextMenu codicon codicon-diff-added"></button>
|
||||
</b-col>
|
||||
</template>
|
||||
</b-row>
|
||||
</li>
|
||||
<b-row>
|
||||
<b-col class="themeLabel">{{packEntry.name}}</b-col>
|
||||
<template v-if="$root.cfg.visual.styles.includes(packEntry.file)">
|
||||
<b-col sm="auto">
|
||||
<button class="themeContextMenu codicon codicon-check"></button>
|
||||
</b-col>
|
||||
</template>
|
||||
<template v-else>
|
||||
<b-col sm="auto">
|
||||
<button class="themeContextMenu codicon codicon-diff-added"></button>
|
||||
</b-col>
|
||||
</template>
|
||||
</b-row>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -86,17 +87,17 @@
|
|||
<div class="repo-header">
|
||||
<h4>{{ $root.getLz("settings.option.visual.theme.github.applied") }} </h4>
|
||||
</div>
|
||||
<stylestack-editor ref="stackEditor" v-if="themes.length != 0" :themes="themes"/>
|
||||
<stylestack-editor ref="stackEditor" v-if="themes.length != 0" :themes="themes" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// do not translate
|
||||
Vue.component('stylestack-editor', {
|
||||
/*html*/
|
||||
template: `
|
||||
// do not translate
|
||||
Vue.component('stylestack-editor', {
|
||||
/*html*/
|
||||
template: `
|
||||
<div class="stylestack-editor" >
|
||||
<draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()">
|
||||
<b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme">
|
||||
|
|
@ -113,255 +114,255 @@
|
|||
</draggable>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
themes: {
|
||||
type: Array,
|
||||
default: [],
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
selected: null,
|
||||
newTheme: null,
|
||||
themeList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.themes)
|
||||
this.themeList = [...this.themes]
|
||||
props: {
|
||||
themes: {
|
||||
type: Array,
|
||||
default: [],
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
selected: null,
|
||||
newTheme: null,
|
||||
themeList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.themes)
|
||||
this.themeList = [...this.themes]
|
||||
|
||||
this.themeList.forEach(theme => {
|
||||
if (theme.pack) {
|
||||
theme.pack.forEach(packEntry => {
|
||||
packEntry.file = theme.file.replace('index.less', '') + packEntry.file
|
||||
this.themeList.push(packEntry)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
gitHubExplore() {
|
||||
this.$root.openSettingsPage("github-themes")
|
||||
},
|
||||
getThemeName(filename) {
|
||||
try {
|
||||
return this.themeList.find(theme => theme.file === filename).name;
|
||||
} catch (e) {
|
||||
return filename;
|
||||
}
|
||||
},
|
||||
moveUp() {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(this.selected)
|
||||
if (index > 0) {
|
||||
styles.splice(index, 1)
|
||||
styles.splice(index - 1, 0, this.selected)
|
||||
}
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
moveDown() {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(this.selected)
|
||||
if (index < styles.length - 1) {
|
||||
styles.splice(index, 1)
|
||||
styles.splice(index + 1, 0, this.selected)
|
||||
}
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
remove(style) {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(style)
|
||||
styles.splice(index, 1)
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
addStyle(style) {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
styles.push(style)
|
||||
this.$root.reloadStyles()
|
||||
}
|
||||
this.themeList.forEach(theme => {
|
||||
if (theme.pack) {
|
||||
theme.pack.forEach(packEntry => {
|
||||
packEntry.file = theme.file.replace('index.less', '') + packEntry.file
|
||||
this.themeList.push(packEntry)
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
gitHubExplore() {
|
||||
this.$root.openSettingsPage("github-themes")
|
||||
},
|
||||
getThemeName(filename) {
|
||||
try {
|
||||
return this.themeList.find(theme => theme.file === filename).name;
|
||||
} catch (e) {
|
||||
return filename;
|
||||
}
|
||||
},
|
||||
moveUp() {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(this.selected)
|
||||
if (index > 0) {
|
||||
styles.splice(index, 1)
|
||||
styles.splice(index - 1, 0, this.selected)
|
||||
}
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
moveDown() {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(this.selected)
|
||||
if (index < styles.length - 1) {
|
||||
styles.splice(index, 1)
|
||||
styles.splice(index + 1, 0, this.selected)
|
||||
}
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
remove(style) {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(style)
|
||||
styles.splice(index, 1)
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
addStyle(style) {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
styles.push(style)
|
||||
this.$root.reloadStyles()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('installed-themes', {
|
||||
template: "#installed-themes",
|
||||
props: [],
|
||||
data: function () {
|
||||
return {
|
||||
repos: [],
|
||||
openRepo: {
|
||||
id: -1,
|
||||
name: '',
|
||||
description: '',
|
||||
html_url: '',
|
||||
stargazers_count: 0,
|
||||
owner: {
|
||||
avatar_url: ''
|
||||
},
|
||||
readme: ""
|
||||
},
|
||||
themesInstalled: [],
|
||||
themes: []
|
||||
}
|
||||
Vue.component('installed-themes', {
|
||||
template: "#installed-themes",
|
||||
props: [],
|
||||
data: function() {
|
||||
return {
|
||||
repos: [],
|
||||
openRepo: {
|
||||
id: -1,
|
||||
name: '',
|
||||
description: '',
|
||||
html_url: '',
|
||||
stargazers_count: 0,
|
||||
owner: {
|
||||
avatar_url: ''
|
||||
},
|
||||
readme: ""
|
||||
},
|
||||
mounted() {
|
||||
this.getThemesList();
|
||||
},
|
||||
methods: {
|
||||
getThemesList() {
|
||||
let self = this
|
||||
let themes = ipcRenderer.sendSync("get-themes")
|
||||
themes.unshift({
|
||||
name: "Acrylic Grain",
|
||||
file: "grain.less"
|
||||
})
|
||||
themes.unshift({
|
||||
name: "Sweetener",
|
||||
file: "sweetener.less"
|
||||
})
|
||||
themes.unshift({
|
||||
name: "Reduce Visuals",
|
||||
file: "reduce_visuals.less"
|
||||
})
|
||||
// themes.unshift({
|
||||
// name: "Inline Drawer",
|
||||
// file: "inline_drawer.less"
|
||||
// })
|
||||
themes.unshift({
|
||||
name: "Dark",
|
||||
file: "dark.less"
|
||||
})
|
||||
this.themes = themes
|
||||
},
|
||||
contextMenu(event, theme) {
|
||||
let self = this
|
||||
let menu = {
|
||||
items: {
|
||||
"uninstall": {
|
||||
name: app.getLz("settings.option.visual.theme.uninstall"),
|
||||
disabled: true,
|
||||
action: () => {
|
||||
app.confirm(app.stringTemplateParser(app.getLz("settings.prompt.visual.theme.uninstallTheme"), {
|
||||
theme: theme.name ?? theme.file
|
||||
}), (res) => {
|
||||
if (res) {
|
||||
console.debug(theme)
|
||||
ipcRenderer.once("theme-uninstalled", (event, args) => {
|
||||
console.debug(event, args)
|
||||
self.getThemesList()
|
||||
})
|
||||
ipcRenderer.invoke("uninstall-theme", theme.path)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
"viewInfo": {
|
||||
name: app.getLz("settings.option.visual.theme.viewInfo"),
|
||||
disabled: true,
|
||||
action: () => {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (theme.path) {
|
||||
menu.items.uninstall.disabled = false
|
||||
}
|
||||
this.$root.showMenuPanel(menu, event)
|
||||
},
|
||||
openThemesFolder() {
|
||||
ipcRenderer.invoke("open-path", "themes")
|
||||
},
|
||||
getInstalledThemes() {
|
||||
let self = this
|
||||
const themes = ipcRenderer.sendSync("get-themes")
|
||||
// for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
|
||||
themes.forEach(theme => {
|
||||
if (theme.github_repo !== "" && typeof theme.commit != "") {
|
||||
self.themesInstalled.push(theme.github_repo.toLowerCase())
|
||||
}
|
||||
})
|
||||
},
|
||||
addStyle(filename) {
|
||||
this.$refs.stackEditor.addStyle(filename)
|
||||
},
|
||||
showRepo(repo) {
|
||||
const self = this
|
||||
const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch(readmeUrl, requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = self.convertReadMe(result);
|
||||
themesInstalled: [],
|
||||
themes: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getThemesList();
|
||||
},
|
||||
methods: {
|
||||
getThemesList() {
|
||||
let self = this
|
||||
let themes = ipcRenderer.sendSync("get-themes")
|
||||
themes.unshift({
|
||||
name: "Acrylic Grain",
|
||||
file: "grain.less"
|
||||
})
|
||||
themes.unshift({
|
||||
name: "Sweetener",
|
||||
file: "sweetener.less"
|
||||
})
|
||||
themes.unshift({
|
||||
name: "Reduce Visuals",
|
||||
file: "reduce_visuals.less"
|
||||
})
|
||||
// themes.unshift({
|
||||
// name: "Inline Drawer",
|
||||
// file: "inline_drawer.less"
|
||||
// })
|
||||
themes.unshift({
|
||||
name: "Dark",
|
||||
file: "dark.less"
|
||||
})
|
||||
this.themes = themes
|
||||
},
|
||||
contextMenu(event, theme) {
|
||||
let self = this
|
||||
let menu = {
|
||||
items: {
|
||||
"uninstall": {
|
||||
name: app.getLz("settings.option.visual.theme.uninstall"),
|
||||
disabled: true,
|
||||
action: () => {
|
||||
app.confirm(app.stringTemplateParser(app.getLz("settings.prompt.visual.theme.uninstallTheme"), {
|
||||
theme: theme.name ?? theme.file
|
||||
}), (res) => {
|
||||
if (res) {
|
||||
console.debug(theme)
|
||||
ipcRenderer.once("theme-uninstalled", (event, args) => {
|
||||
console.debug(event, args)
|
||||
self.getThemesList()
|
||||
})
|
||||
.catch(error => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = `This repository doesn't have a README.md file.`;
|
||||
console.log('error', error)
|
||||
});
|
||||
},
|
||||
convertReadMe(text) {
|
||||
return marked.parse(text)
|
||||
},
|
||||
installThemeRepo(repo) {
|
||||
let self = this
|
||||
let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
|
||||
repo: repo.full_name
|
||||
});
|
||||
app.confirm(msg, (res) => {
|
||||
if (res) {
|
||||
ipcRenderer.once("theme-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = ipcRenderer.sendSync("get-themes")
|
||||
self.getInstalledThemes()
|
||||
notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-theme", repo.html_url)
|
||||
}
|
||||
ipcRenderer.invoke("uninstall-theme", theme.path)
|
||||
}
|
||||
})
|
||||
},
|
||||
installThemeURL() {
|
||||
let self = this
|
||||
app.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
|
||||
if (result) {
|
||||
ipcRenderer.once("theme-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = ipcRenderer.sendSync("get-themes")
|
||||
notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-theme", result)
|
||||
}
|
||||
});
|
||||
},
|
||||
getRepos() {
|
||||
let self = this
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch("https://api.github.com/search/repositories?q=topic:cidermusictheme fork:true", requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
let items = JSON.parse(result).items
|
||||
self.repos = items
|
||||
})
|
||||
.catch(error => console.log('error', error));
|
||||
}
|
||||
},
|
||||
"viewInfo": {
|
||||
name: app.getLz("settings.option.visual.theme.viewInfo"),
|
||||
disabled: true,
|
||||
action: () => {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
if (theme.path) {
|
||||
menu.items.uninstall.disabled = false
|
||||
}
|
||||
this.$root.showMenuPanel(menu, event)
|
||||
},
|
||||
openThemesFolder() {
|
||||
ipcRenderer.invoke("open-path", "themes")
|
||||
},
|
||||
getInstalledThemes() {
|
||||
let self = this
|
||||
const themes = ipcRenderer.sendSync("get-themes")
|
||||
// for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
|
||||
themes.forEach(theme => {
|
||||
if (theme.github_repo !== "" && typeof theme.commit != "") {
|
||||
self.themesInstalled.push(theme.github_repo.toLowerCase())
|
||||
}
|
||||
})
|
||||
},
|
||||
addStyle(filename) {
|
||||
this.$refs.stackEditor.addStyle(filename)
|
||||
},
|
||||
showRepo(repo) {
|
||||
const self = this
|
||||
const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch(readmeUrl, requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = self.convertReadMe(result);
|
||||
})
|
||||
.catch(error => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = `This repository doesn't have a README.md file.`;
|
||||
console.log('error', error)
|
||||
});
|
||||
},
|
||||
convertReadMe(text) {
|
||||
return marked.parse(text)
|
||||
},
|
||||
installThemeRepo(repo) {
|
||||
let self = this
|
||||
let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
|
||||
repo: repo.full_name
|
||||
});
|
||||
app.confirm(msg, (res) => {
|
||||
if (res) {
|
||||
ipcRenderer.once("theme-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = ipcRenderer.sendSync("get-themes")
|
||||
self.getInstalledThemes()
|
||||
notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-theme", repo.html_url)
|
||||
}
|
||||
})
|
||||
},
|
||||
installThemeURL() {
|
||||
let self = this
|
||||
app.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
|
||||
if (result) {
|
||||
ipcRenderer.once("theme-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = ipcRenderer.sendSync("get-themes")
|
||||
notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-theme", result)
|
||||
}
|
||||
});
|
||||
},
|
||||
getRepos() {
|
||||
let self = this
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch("https://api.github.com/search/repositories?q=topic:cidermusictheme fork:true", requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
let items = JSON.parse(result).items
|
||||
self.repos = items
|
||||
})
|
||||
.catch(error => console.log('error', error));
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<b-tab>
|
||||
<template #title>
|
||||
<div>
|
||||
<svg-icon url="./assets/settings.svg" classes="svg-md" name="settings-general"/>
|
||||
<svg-icon url="./assets/settings.svg" classes="svg-md" name="settings-general" />
|
||||
</div>
|
||||
<div>
|
||||
{{ $root.getLz('settings.header.general') }}
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<label>
|
||||
<input type="checkbox" v-model="$root.cfg.general.privateEnabled"
|
||||
v-on:change="$root.mk.privateEnabled = $root.cfg.general.privateEnabled"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.general.onStartup.enabled" switch/>
|
||||
<input type="checkbox" v-model="app.cfg.general.onStartup.enabled" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.general.onStartup.hidden" switch/>
|
||||
<input type="checkbox" v-model="app.cfg.general.onStartup.hidden" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
<label>
|
||||
<input type="checkbox"
|
||||
v-model="app.cfg.general.sidebarItems.recentlyAdded"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
<label>
|
||||
<input type="checkbox"
|
||||
v-model="app.cfg.general.sidebarItems.songs"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -187,7 +187,7 @@
|
|||
<label>
|
||||
<input type="checkbox"
|
||||
v-model="app.cfg.general.sidebarItems.albums"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
<label>
|
||||
<input type="checkbox"
|
||||
v-model="app.cfg.general.sidebarItems.artists"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -211,7 +211,7 @@
|
|||
<label>
|
||||
<input type="checkbox"
|
||||
v-model="app.cfg.general.sidebarItems.videos"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
<label>
|
||||
<input type="checkbox"
|
||||
v-model="app.cfg.general.sidebarItems.podcasts"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -247,7 +247,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.general.themeUpdateNotification"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -258,7 +258,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.general.showLovedTracksInline"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -279,7 +279,7 @@
|
|||
<b-tab>
|
||||
<template #title>
|
||||
<div>
|
||||
<svg-icon url="./assets/feather/headphones.svg" classes="svg-md" name="settings-audio"/>
|
||||
<svg-icon url="./assets/feather/headphones.svg" classes="svg-md" name="settings-audio" />
|
||||
</div>
|
||||
<div>
|
||||
{{ $root.getLz('settings.header.audio') }}
|
||||
|
|
@ -343,7 +343,7 @@
|
|||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.audio.seamless_audio"
|
||||
v-on:change="app.mk._bag.features['seamless-audio-transitions'] = app.cfg.audio.seamless_audio"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -372,7 +372,7 @@
|
|||
<input type="checkbox" v-model="app.cfg.audio.normalization"
|
||||
v-on:change="toggleNormalization"
|
||||
:disabled="app.cfg.audio.maikiwiAudio.spatial === true || app.cfg.audio.maikiwiAudio.ciderPPE === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer1 === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer2 === true"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -385,7 +385,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.audio.dBSPL" switch/>
|
||||
<input type="checkbox" v-model="app.cfg.audio.dBSPL" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -397,7 +397,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="number" v-model="app.cfg.audio.dBSPLcalibration"/>
|
||||
<input type="number" v-model="app.cfg.audio.dBSPLcalibration" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -408,33 +408,33 @@
|
|||
<b-tab>
|
||||
<template #title>
|
||||
<div>
|
||||
<svg-icon url="./assets/feather/zap.svg" classes="svg-md" name="settings-audiolabs"/>
|
||||
<svg-icon url="./assets/feather/zap.svg" classes="svg-md" name="settings-audiolabs" />
|
||||
</div>
|
||||
<div>
|
||||
{{ $root.getLz('settings.option.audio.audioLab') }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="settings-tab-content">
|
||||
<audiolabs-page/>
|
||||
<audiolabs-page />
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template #title>
|
||||
<div>
|
||||
<svg-icon url="./assets/feather/style.svg" classes="svg-md" name="settings-styles"/>
|
||||
<svg-icon url="./assets/feather/style.svg" classes="svg-md" name="settings-styles" />
|
||||
</div>
|
||||
<div>
|
||||
{{ $root.getLz('settings.header.visual.styles') }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="settings-tab-content">
|
||||
<installed-themes/>
|
||||
<installed-themes />
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template #title>
|
||||
<div>
|
||||
<svg-icon url="./assets/feather/pen-tool.svg" classes="svg-md" name="settings-visual"/>
|
||||
<svg-icon url="./assets/feather/pen-tool.svg" classes="svg-md" name="settings-visual" />
|
||||
</div>
|
||||
<div>
|
||||
{{ $root.getLz('settings.header.visual') }}
|
||||
|
|
@ -504,7 +504,7 @@
|
|||
{{$root.getLz('settings.option.visual.windowColor')}}
|
||||
</div>
|
||||
<div class="md-option-segment_auto">
|
||||
<input type="color" v-model="app.cfg.visual.windowColor"/>
|
||||
<input type="color" v-model="app.cfg.visual.windowColor" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
|
|
@ -513,7 +513,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment_auto">
|
||||
<input type="checkbox" v-model="app.cfg.visual.customAccentColor"
|
||||
:disabled="app.cfg.visual.purplePodcastPlaybackBar" switch/>
|
||||
:disabled="app.cfg.visual.purplePodcastPlaybackBar" switch />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line child" v-if="app.cfg.visual.customAccentColor">
|
||||
|
|
@ -521,7 +521,7 @@
|
|||
{{$root.getLz('settings.option.visual.accentColor')}}
|
||||
</div>
|
||||
<div class="md-option-segment_auto">
|
||||
<input type="color" v-model="app.cfg.visual.accentColor"/>
|
||||
<input type="color" v-model="app.cfg.visual.accentColor" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
|
|
@ -530,7 +530,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment_auto">
|
||||
<input type="checkbox" v-model="app.cfg.visual.purplePodcastPlaybackBar"
|
||||
:disabled="app.cfg.visual.customAccentColor" switch/>
|
||||
:disabled="app.cfg.visual.customAccentColor" switch />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
|
|
@ -538,7 +538,7 @@
|
|||
{{$root.getLz('settings.option.visual.compactArtistHeader')}}
|
||||
</div>
|
||||
<div class="md-option-segment_auto">
|
||||
<input type="checkbox" v-model="app.cfg.visual.compactArtistHeader" switch/>
|
||||
<input type="checkbox" v-model="app.cfg.visual.compactArtistHeader" switch />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
|
|
@ -569,7 +569,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.visual.showuserinfo"
|
||||
v-on:change="toggleUserInfo" switch/>
|
||||
v-on:change="toggleUserInfo" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -604,7 +604,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.general.close_button_hide" switch/>
|
||||
<input type="checkbox" v-model="app.cfg.general.close_button_hide" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -616,7 +616,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch
|
||||
@change="promptForRelaunch()"/>
|
||||
@change="promptForRelaunch()" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -697,7 +697,8 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation"/>
|
||||
<input type="checkbox" switch
|
||||
v-model="app.cfg.visual.bg_artwork_rotation" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -708,20 +709,20 @@
|
|||
<b-tab>
|
||||
<template #title>
|
||||
<div>
|
||||
<svg-icon url="./assets/feather/plugins.svg" classes="svg-md" name="settings-plugins"/>
|
||||
<svg-icon url="./assets/feather/plugins.svg" classes="svg-md" name="settings-plugins" />
|
||||
</div>
|
||||
<div>
|
||||
{{ $root.getLz('term.plugins') }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="settings-tab-content">
|
||||
<plugins-github/>
|
||||
<plugins-github />
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template #title>
|
||||
<div>
|
||||
<svg-icon url="./assets/feather/mic.svg" classes="svg-md" name="settings-lyrics"/>
|
||||
<svg-icon url="./assets/feather/mic.svg" classes="svg-md" name="settings-lyrics" />
|
||||
</div>
|
||||
<div>
|
||||
{{ $root.getLz('settings.header.lyrics') }}
|
||||
|
|
@ -740,7 +741,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch/>
|
||||
<input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -750,7 +751,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch/>
|
||||
<input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -844,7 +845,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.lyrics.enable_yt" switch/>
|
||||
<input type="checkbox" v-model="app.cfg.lyrics.enable_yt" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -854,7 +855,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.lyrics.enable_qq" switch/>
|
||||
<input type="checkbox" v-model="app.cfg.lyrics.enable_qq" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -865,7 +866,7 @@
|
|||
<b-tab>
|
||||
<template #title>
|
||||
<div>
|
||||
<svg-icon url="./assets/feather/radio.svg" classes="svg-md" name="settings-connectivity"/>
|
||||
<svg-icon url="./assets/feather/radio.svg" classes="svg-md" name="settings-connectivity" />
|
||||
</div>
|
||||
<div>
|
||||
{{ $root.getLz('settings.header.connectivity') }}
|
||||
|
|
@ -886,7 +887,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.general.playbackNotifications"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -899,7 +900,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.enabled"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -926,7 +927,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
v-model="app.cfg.connectivity.discord_rpc.clear_on_pause" switch/>
|
||||
v-model="app.cfg.connectivity.discord_rpc.clear_on_pause" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -938,7 +939,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
v-model="app.cfg.connectivity.discord_rpc.hide_buttons" switch/>
|
||||
v-model="app.cfg.connectivity.discord_rpc.hide_buttons" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -950,14 +951,14 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
v-model="app.cfg.connectivity.discord_rpc.hide_timestamp" switch/>
|
||||
v-model="app.cfg.connectivity.discord_rpc.hide_timestamp" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.option.connectivity.discordRPC.detailsFormat')}}<br/>
|
||||
{{$root.getLz('settings.option.connectivity.discordRPC.detailsFormat')}}<br />
|
||||
<small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title},
|
||||
{album},
|
||||
{trackNumber}</small>
|
||||
|
|
@ -965,7 +966,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="text"
|
||||
v-model="app.cfg.connectivity.discord_rpc.details_format"/>
|
||||
v-model="app.cfg.connectivity.discord_rpc.details_format" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -979,7 +980,8 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="text" v-model="app.cfg.connectivity.discord_rpc.state_format"/>
|
||||
<input type="text"
|
||||
v-model="app.cfg.connectivity.discord_rpc.state_format" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1018,9 +1020,9 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<form @submit.prevent="submitToken">
|
||||
<input type="text" autofocus id="lfmToken"/>
|
||||
<input type="text" autofocus id="lfmToken" />
|
||||
<input type="submit" class="md-btn"
|
||||
@value="$root.getLz('action.submit')"/>
|
||||
@value="$root.getLz('action.submit')" />
|
||||
</form>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -1032,7 +1034,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="number" min="50" max="100"
|
||||
v-model="app.cfg.connectivity.lastfm.scrobble_after"/>
|
||||
v-model="app.cfg.connectivity.lastfm.scrobble_after" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1044,7 +1046,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.connectivity.lastfm.filter_loop"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1055,7 +1057,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.connectivity.lastfm.remove_featured"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1077,7 +1079,7 @@
|
|||
<b-tab>
|
||||
<template #title>
|
||||
<div>
|
||||
<svg-icon url="./assets/feather/hard-drive.svg" classes="svg-md" name="settings-advanced"/>
|
||||
<svg-icon url="./assets/feather/hard-drive.svg" classes="svg-md" name="settings-advanced" />
|
||||
</div>
|
||||
<div>
|
||||
{{$root.getLz('settings.header.advanced')}}
|
||||
|
|
@ -1118,7 +1120,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.advanced.disableLogging" switch/>
|
||||
<input type="checkbox" v-model="app.cfg.advanced.disableLogging" switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1161,7 +1163,7 @@
|
|||
<input type="checkbox"
|
||||
v-model="app.cfg.advanced.experiments.includes('immersive-preview')"
|
||||
@click="app.cfg.advanced.experiments.includes('immersive-preview') ? removeExperiment('immersive-preview') : addExperiment('immersive-preview')"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1177,7 +1179,7 @@
|
|||
<input type="checkbox"
|
||||
v-model="app.cfg.advanced.experiments.includes('unknown-sources')"
|
||||
@click="app.cfg.advanced.experiments.includes('unknown-sources') ? removeExperiment('unknown-sources') : addExperiment('unknown-sources')"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1192,7 +1194,7 @@
|
|||
<input type="checkbox"
|
||||
v-model="app.cfg.advanced.experiments.includes('ampv3')"
|
||||
@click="app.cfg.advanced.experiments.includes('ampv3') ? removeExperiment('ampv3') : addExperiment('ampv3')"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1206,7 +1208,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.advanced.playlistTrackMapping"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1221,7 +1223,7 @@
|
|||
<input type="checkbox"
|
||||
v-model="app.cfg.advanced.experiments.includes('compactui')"
|
||||
@click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')"
|
||||
switch :disabled="!!app.getThemeDirective('forceUI')"/>
|
||||
switch :disabled="!!app.getThemeDirective('forceUI')" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1235,7 +1237,7 @@
|
|||
<input type="checkbox" disabled
|
||||
v-model="app.cfg.advanced.experiments.includes('inline-playlists')"
|
||||
@click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')"
|
||||
switch/>
|
||||
switch />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1248,7 +1250,7 @@
|
|||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" v-model="app.cfg.visual.transparent" switch
|
||||
@change="promptForRelaunch()"/>
|
||||
@change="promptForRelaunch()" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1280,14 +1282,14 @@
|
|||
<!--keybinds Settings -->
|
||||
<b-tab id="hid">
|
||||
<template>
|
||||
<keybinds-settings/>
|
||||
<keybinds-settings />
|
||||
</template>
|
||||
</b-tab>
|
||||
<!--keybinds-settings -->
|
||||
<!--Github-theme-settings -->
|
||||
<b-tab id="hid">
|
||||
<template>
|
||||
<themes-github/>
|
||||
<themes-github />
|
||||
</template>
|
||||
</b-tab>
|
||||
<!--Github-theme-settings -->
|
||||
|
|
@ -1383,164 +1385,164 @@
|
|||
</div>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component("settings-window", {
|
||||
template: "#settings-window",
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
themes: ipcRenderer.sendSync("get-themes"),
|
||||
tabIndex: 0,
|
||||
canChangeHash: false,
|
||||
lastfmConnecting: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tabIndex: function (val) {
|
||||
if (this.canChangeHash) {
|
||||
// window.location.hash = `#settings/${val}`
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sidebarVis() {
|
||||
const tabIndex = app.$store.state.pageState['settings'].currentTabIndex
|
||||
if (tabIndex == 3 || tabIndex == 5 || tabIndex == 10) {
|
||||
return true;
|
||||
}
|
||||
return false
|
||||
},
|
||||
close() {
|
||||
this.$root.modals.settings = false
|
||||
},
|
||||
windowBgStyleChange() {
|
||||
this.$root.getNowPlayingArtworkBG(undefined, true)
|
||||
if (this.$root.cfg.visual.window_background_style === "mica") {
|
||||
this.$root.spawnMica()
|
||||
}
|
||||
},
|
||||
reinstallWidevineCDM() {
|
||||
app.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
|
||||
if (ok) {
|
||||
ipcRenderer.invoke("reinstall-widevine-cdm");
|
||||
}
|
||||
})
|
||||
},
|
||||
gitHubExplore() {
|
||||
app.openSettingsPage("github-themes")
|
||||
},
|
||||
copyLogs() {
|
||||
ipcRenderer.send('fetch-log')
|
||||
notyf.success(app.getLz('term.share.success'));
|
||||
},
|
||||
openAppData() {
|
||||
ipcRenderer.send('open-appdata')
|
||||
},
|
||||
getLanguages: function () {
|
||||
let langs = this.$root.lzListing
|
||||
let categories = {
|
||||
"main": [],
|
||||
"fun": [],
|
||||
"unsorted": []
|
||||
}
|
||||
// sort by category if category is undefined or empty put it in "unsorted"
|
||||
for (let i = 0; i < langs.length; i++) {
|
||||
if (langs[i].category === undefined || langs[i].category === "") {
|
||||
categories.unsorted.push(langs[i])
|
||||
} else {
|
||||
categories[langs[i].category].push(langs[i])
|
||||
}
|
||||
}
|
||||
// return
|
||||
return categories
|
||||
},
|
||||
addExperiment(flag) {
|
||||
app.cfg.advanced.experiments.push(flag);
|
||||
},
|
||||
removeExperiment(flag) {
|
||||
app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
|
||||
},
|
||||
toggleNormalization: function () {
|
||||
if (app.cfg.audio.normalization) {
|
||||
CiderAudio.normalizerOn()
|
||||
} else {
|
||||
CiderAudio.normalizerOff()
|
||||
}
|
||||
},
|
||||
changeAudioQuality: function () {
|
||||
app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
|
||||
},
|
||||
toggleUserInfo: function () {
|
||||
app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
|
||||
},
|
||||
sendDataToMTT: function () {
|
||||
ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
|
||||
// setStoreValue does not change plugin store values somehow
|
||||
ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
|
||||
},
|
||||
checkIfUpdateDisabled() {
|
||||
if (app.cfg.main.UPDATABLE) return;
|
||||
|
||||
let updateFields = document.getElementsByClassName('update-check');
|
||||
for (let i = 0; i < updateFields.length; i++) {
|
||||
updateFields[i].style = "opacity: 0.5; pointer-events: none;";
|
||||
updateFields[i].title = "Not available on this type of build";
|
||||
}
|
||||
|
||||
},
|
||||
promptForRelaunch() {
|
||||
app.confirm(app.getLz('action.relaunch.confirm'), function (result) {
|
||||
if (result) {
|
||||
ipcRenderer.send('relaunchApp', '');
|
||||
}
|
||||
});
|
||||
},
|
||||
authCC() {
|
||||
ipcRenderer.send('cc-auth')
|
||||
},
|
||||
logoutCC() {
|
||||
ipcRenderer.send('cc-logout')
|
||||
},
|
||||
reloadDiscordRPC() {
|
||||
ipcRenderer.send('reloadRPC')
|
||||
},
|
||||
lfmDisconnect() {
|
||||
this.$root.cfg.connectivity.lastfm.enabled = false;
|
||||
this.$root.cfg.connectivity.lastfm.secrets.username = "";
|
||||
this.$root.cfg.connectivity.lastfm.secrets.key = "";
|
||||
ipcRenderer.send('lastfm:disconnect');
|
||||
},
|
||||
async lfmAuthorize() {
|
||||
this.lastfmConnecting = true;
|
||||
window.open(await ipcRenderer.invoke('lastfm:url'));
|
||||
app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connecting'));
|
||||
|
||||
/* Just a timeout for the button */
|
||||
setTimeout(() => {
|
||||
if (!this.$root.cfg.connectivity.lastfm.enabled) {
|
||||
app.notyf.error(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectError'));
|
||||
console.warn('[lastfm:authorize] Last.fm authorization timed out.');
|
||||
this.lastfmConnecting = false;
|
||||
}
|
||||
}, 20000);
|
||||
|
||||
ipcRenderer.once('lastfm:authenticated', (_e, session) => {
|
||||
this.$root.cfg.connectivity.lastfm.secrets.username = session.username
|
||||
this.$root.cfg.connectivity.lastfm.secrets.key = session.key
|
||||
this.$root.cfg.connectivity.lastfm.enabled = true
|
||||
this.lastfmConnecting = false;
|
||||
app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectSuccess'));
|
||||
})
|
||||
},
|
||||
filterChange(e) {
|
||||
this.$root.cfg.connectivity.lastfm.filter_types[e.target.value] = e.target.checked;
|
||||
},
|
||||
submitToken() {
|
||||
const token = document.getElementById('lfmToken').value;
|
||||
ipcRenderer.send('lastfm:auth', token);
|
||||
},
|
||||
openLocalSongsPathMenu() {
|
||||
app.modals.pathMenu = true
|
||||
}
|
||||
Vue.component("settings-window", {
|
||||
template: "#settings-window",
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root,
|
||||
themes: ipcRenderer.sendSync("get-themes"),
|
||||
tabIndex: 0,
|
||||
canChangeHash: false,
|
||||
lastfmConnecting: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tabIndex: function(val) {
|
||||
if (this.canChangeHash) {
|
||||
// window.location.hash = `#settings/${val}`
|
||||
}
|
||||
})
|
||||
</script>
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sidebarVis() {
|
||||
const tabIndex = app.$store.state.pageState['settings'].currentTabIndex
|
||||
if (tabIndex == 3 || tabIndex == 5 || tabIndex == 10) {
|
||||
return true;
|
||||
}
|
||||
return false
|
||||
},
|
||||
close() {
|
||||
this.$root.modals.settings = false
|
||||
},
|
||||
windowBgStyleChange() {
|
||||
this.$root.getNowPlayingArtworkBG(undefined, true)
|
||||
if (this.$root.cfg.visual.window_background_style === "mica") {
|
||||
this.$root.spawnMica()
|
||||
}
|
||||
},
|
||||
reinstallWidevineCDM() {
|
||||
app.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
|
||||
if (ok) {
|
||||
ipcRenderer.invoke("reinstall-widevine-cdm");
|
||||
}
|
||||
})
|
||||
},
|
||||
gitHubExplore() {
|
||||
app.openSettingsPage("github-themes")
|
||||
},
|
||||
copyLogs() {
|
||||
ipcRenderer.send('fetch-log')
|
||||
notyf.success(app.getLz('term.share.success'));
|
||||
},
|
||||
openAppData() {
|
||||
ipcRenderer.send('open-appdata')
|
||||
},
|
||||
getLanguages: function() {
|
||||
let langs = this.$root.lzListing
|
||||
let categories = {
|
||||
"main": [],
|
||||
"fun": [],
|
||||
"unsorted": []
|
||||
}
|
||||
// sort by category if category is undefined or empty put it in "unsorted"
|
||||
for (let i = 0; i < langs.length; i++) {
|
||||
if (langs[i].category === undefined || langs[i].category === "") {
|
||||
categories.unsorted.push(langs[i])
|
||||
} else {
|
||||
categories[langs[i].category].push(langs[i])
|
||||
}
|
||||
}
|
||||
// return
|
||||
return categories
|
||||
},
|
||||
addExperiment(flag) {
|
||||
app.cfg.advanced.experiments.push(flag);
|
||||
},
|
||||
removeExperiment(flag) {
|
||||
app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
|
||||
},
|
||||
toggleNormalization: function() {
|
||||
if (app.cfg.audio.normalization) {
|
||||
CiderAudio.normalizerOn()
|
||||
} else {
|
||||
CiderAudio.normalizerOff()
|
||||
}
|
||||
},
|
||||
changeAudioQuality: function() {
|
||||
app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
|
||||
},
|
||||
toggleUserInfo: function() {
|
||||
app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
|
||||
},
|
||||
sendDataToMTT: function() {
|
||||
ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
|
||||
// setStoreValue does not change plugin store values somehow
|
||||
ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
|
||||
},
|
||||
checkIfUpdateDisabled() {
|
||||
if (app.cfg.main.UPDATABLE) return;
|
||||
|
||||
let updateFields = document.getElementsByClassName('update-check');
|
||||
for (let i = 0; i < updateFields.length; i++) {
|
||||
updateFields[i].style = "opacity: 0.5; pointer-events: none;";
|
||||
updateFields[i].title = "Not available on this type of build";
|
||||
}
|
||||
|
||||
},
|
||||
promptForRelaunch() {
|
||||
app.confirm(app.getLz('action.relaunch.confirm'), function(result) {
|
||||
if (result) {
|
||||
ipcRenderer.send('relaunchApp', '');
|
||||
}
|
||||
});
|
||||
},
|
||||
authCC() {
|
||||
ipcRenderer.send('cc-auth')
|
||||
},
|
||||
logoutCC() {
|
||||
ipcRenderer.send('cc-logout')
|
||||
},
|
||||
reloadDiscordRPC() {
|
||||
ipcRenderer.send('reloadRPC')
|
||||
},
|
||||
lfmDisconnect() {
|
||||
this.$root.cfg.connectivity.lastfm.enabled = false;
|
||||
this.$root.cfg.connectivity.lastfm.secrets.username = "";
|
||||
this.$root.cfg.connectivity.lastfm.secrets.key = "";
|
||||
ipcRenderer.send('lastfm:disconnect');
|
||||
},
|
||||
async lfmAuthorize() {
|
||||
this.lastfmConnecting = true;
|
||||
window.open(await ipcRenderer.invoke('lastfm:url'));
|
||||
app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connecting'));
|
||||
|
||||
/* Just a timeout for the button */
|
||||
setTimeout(() => {
|
||||
if (!this.$root.cfg.connectivity.lastfm.enabled) {
|
||||
app.notyf.error(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectError'));
|
||||
console.warn('[lastfm:authorize] Last.fm authorization timed out.');
|
||||
this.lastfmConnecting = false;
|
||||
}
|
||||
}, 20000);
|
||||
|
||||
ipcRenderer.once('lastfm:authenticated', (_e, session) => {
|
||||
this.$root.cfg.connectivity.lastfm.secrets.username = session.username
|
||||
this.$root.cfg.connectivity.lastfm.secrets.key = session.key
|
||||
this.$root.cfg.connectivity.lastfm.enabled = true
|
||||
this.lastfmConnecting = false;
|
||||
app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectSuccess'));
|
||||
})
|
||||
},
|
||||
filterChange(e) {
|
||||
this.$root.cfg.connectivity.lastfm.filter_types[e.target.value] = e.target.checked;
|
||||
},
|
||||
submitToken() {
|
||||
const token = document.getElementById('lfmToken').value;
|
||||
ipcRenderer.send('lastfm:auth', token);
|
||||
},
|
||||
openLocalSongsPathMenu() {
|
||||
app.modals.pathMenu = true
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<script type="text/x-template" id="add-to-playlist">
|
||||
<template>
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
|
||||
@contextmenu.self="app.resetState()">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
|
||||
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
|
||||
<button class="close-btn" @click="app.resetState()"
|
||||
:aria-label="app.getLz('action.close')"></button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<button class="playlist-item"
|
||||
|
|
@ -12,7 +14,8 @@
|
|||
<div class="icon"><%- include("../svg/plus.svg") %></div>
|
||||
<div class="name">{{app.getLz('action.createPlaylist')}}</div>
|
||||
</button>
|
||||
<sidebar-playlist :playlist-select="playlistSelect" v-for="item in $root.getPlaylistFolderChildren('p.playlistsroot')" :item="item">
|
||||
<sidebar-playlist :playlist-select="playlistSelect"
|
||||
v-for="item in $root.getPlaylistFolderChildren('p.playlistsroot')" :item="item">
|
||||
</sidebar-playlist>
|
||||
</div>
|
||||
<div class="modal-search">
|
||||
|
|
@ -34,55 +37,55 @@
|
|||
</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: {
|
||||
playlistSelect(playlist) {
|
||||
if (playlist.type != "library-playlist-folders") {
|
||||
this.addToPlaylist(playlist.id)
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
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)
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
playlistSelect(playlist) {
|
||||
if (playlist.type != "library-playlist-folders") {
|
||||
this.addToPlaylist(playlist.id)
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script type="text/x-template" id="sidebar-playlist">
|
||||
<div class="sidebar-playlist" :key="item.id">
|
||||
<button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id"
|
||||
<button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id"
|
||||
:class="item.type != 'library-playlist-folders' ? {'active': $root.page.includes(item.id)} : ['playlist-folder', {'folder-button-active': folderOpened}, isPlaylistSelected]"
|
||||
@contextmenu="playlistContextMenu($event, item.id)"
|
||||
@dragstart="startDrag($event, item)"
|
||||
|
|
@ -9,14 +9,17 @@
|
|||
:href="item.href"
|
||||
@click='clickEvent()'>
|
||||
<template v-if="!renaming">
|
||||
<svg-icon :url="icon" name="sidebar-playlist"/> {{ item.attributes.name }}
|
||||
<svg-icon :url="icon" name="sidebar-playlist" />
|
||||
{{ item.attributes.name }}
|
||||
<small class="presentNotice" v-if="hasRelatedMediaItems">(Track present)</small>
|
||||
</template>
|
||||
<input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
|
||||
<input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()"
|
||||
@keydown.enter="rename()" v-else>
|
||||
</button>
|
||||
<div class="folder-body" v-if="item.type === 'library-playlist-folders' && folderOpened">
|
||||
<template v-if="children.length != 0">
|
||||
<sidebar-playlist v-for="item in children" :relate-media-items="relateMediaItems" :playlist-select="playlistSelect" :item="item" :key="item.id"></sidebar-playlist>
|
||||
<sidebar-playlist v-for="item in children" :relate-media-items="relateMediaItems"
|
||||
:playlist-select="playlistSelect" :item="item" :key="item.id"></sidebar-playlist>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="spinner"></div>
|
||||
|
|
@ -26,263 +29,265 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('sidebar-playlist', {
|
||||
template: '#sidebar-playlist',
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
playlistSelect: {
|
||||
type: Function,
|
||||
required: false
|
||||
},
|
||||
relateMediaItems: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
folderOpened: false,
|
||||
children: [],
|
||||
playlistRoot: "p.playlistsroot",
|
||||
renaming: false,
|
||||
icon: "",
|
||||
hasRelatedMediaItems: false
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
if (this.item.type !== "library-playlist-folders") {
|
||||
this.icon = ("./assets/feather/list.svg")
|
||||
} else {
|
||||
this.icon = ("./assets/feather/folder.svg")
|
||||
}
|
||||
let playlistMap = this.$root.playlists.trackMapping
|
||||
if (this.relateMediaItems.length != 0) {
|
||||
if (playlistMap[this.relateMediaItems[0]]) {
|
||||
if (playlistMap[this.relateMediaItems[0]].includes(this.item.id)) {
|
||||
this.hasRelatedMediaItems = true
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
if (this.item.type != "library-playlist-folders") {
|
||||
if (this.playlistSelect) {
|
||||
this.playlistSelect(this.item)
|
||||
} else {
|
||||
this.openPlaylist(this.item)
|
||||
}
|
||||
} else {
|
||||
this.getPlaylistChildren(this.item)
|
||||
}
|
||||
},
|
||||
rename() {
|
||||
this.renaming = false
|
||||
|
||||
if (this.item.type === "library-playlist-folders") {
|
||||
this.$root.editPlaylistFolder(this.item.id, this.item.attributes.name)
|
||||
} else {
|
||||
this.$root.editPlaylist(this.item.id, this.item.attributes.name)
|
||||
}
|
||||
},
|
||||
async getChildren() {
|
||||
let self = this
|
||||
this.children = []
|
||||
this.children = this.$root.playlists.listing.filter(child => {
|
||||
if (child.parent == self.item.id) {
|
||||
return child
|
||||
}
|
||||
})
|
||||
},
|
||||
async move(item, sendTo) {
|
||||
let self = this
|
||||
console.log(sendTo)
|
||||
let type = item.type.replace("library-", "")
|
||||
let typeTo = sendTo.type
|
||||
this.$root.mk.api.v3.music(`/v1/me/library/${type}/${item.id}/parent`, {}, {
|
||||
fetchOptions: {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({
|
||||
data: [{
|
||||
id: sendTo.id,
|
||||
type: typeTo
|
||||
}]
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// find the item in this.$root.playlists.listing and store it in a variable
|
||||
this.$root.playlists.listing.filter(playlist => {
|
||||
if (playlist.id == item.id) {
|
||||
console.log(playlist)
|
||||
playlist.parent = sendTo.id
|
||||
|
||||
}
|
||||
})
|
||||
if (typeof this.$root.getChildren == "function") {
|
||||
this.$root.getChildren()
|
||||
console.log(this.$root.children)
|
||||
}
|
||||
await this.getChildren()
|
||||
this.$root.sortPlaylists()
|
||||
// await this.$root.refreshPlaylists()
|
||||
},
|
||||
playlistContextMenu(event, playlist_id) {
|
||||
let menu = {
|
||||
items: {
|
||||
"moveToParent": {
|
||||
name: this.$root.getLz('action.moveToTop'),
|
||||
action: () => {
|
||||
let self = this
|
||||
this.move(this.item, {
|
||||
id: this.playlistRoot,
|
||||
type: "library-playlist-folders"
|
||||
})
|
||||
setTimeout(() => { self.getChildren() }, 2000)
|
||||
}
|
||||
},
|
||||
"rename": {
|
||||
name: this.$root.getLz('action.rename'),
|
||||
action: () => {
|
||||
this.renaming = true
|
||||
setTimeout(() => {
|
||||
document.querySelector(".pl-rename-field").focus()
|
||||
document.querySelector(".pl-rename-field").select()
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
"deleteFromPlaylist": {
|
||||
name: this.$root.getLz('action.removeFromLibrary'),
|
||||
action: () => {
|
||||
this.$root.deletePlaylist(playlist_id)
|
||||
}
|
||||
},
|
||||
"addToFavorites": {
|
||||
name: this.$root.getLz('action.addToFavorites'),
|
||||
disabled: true,
|
||||
hidden: true,
|
||||
action: () => {
|
||||
this.addFavorite(playlist_id, "library-playlists")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.item.type === "library-playlist-folders") {
|
||||
menu.items.addToFavorites.disabled = true
|
||||
}
|
||||
app.showMenuPanel(menu, event)
|
||||
},
|
||||
dragOver(evt) {
|
||||
evt.preventDefault();
|
||||
evt.dataTransfer.dropEffect = "move";
|
||||
},
|
||||
onDrop(evt) {
|
||||
let data = JSON.parse(evt.dataTransfer.getData("text/plain"))
|
||||
evt.preventDefault();
|
||||
if (data.id == this.item.id) {
|
||||
return;
|
||||
}
|
||||
console.log(data)
|
||||
if (data) {
|
||||
if (this.item.type == "library-playlists" || this.item.type == "library-playlist-folders") {
|
||||
if (data.type == "library-playlists" && this.item.type == "library-playlists") {
|
||||
return
|
||||
}
|
||||
this.move(data, this.item)
|
||||
}
|
||||
}
|
||||
},
|
||||
startDrag(evt) {
|
||||
evt.dataTransfer.dropEffect = 'move'
|
||||
evt.dataTransfer.effectAllowed = 'move'
|
||||
evt.dataTransfer.setData('text/plain', JSON.stringify(this.item))
|
||||
},
|
||||
openPlaylist(item) {
|
||||
this.$root.appRoute(`playlist_` + item.id);
|
||||
this.$root.showingPlaylist = [];
|
||||
if (item.id == 'ciderlocal') {
|
||||
this.$root.showingPlaylist = {
|
||||
"id": "ciderlocal",
|
||||
"type": "library-playlists",
|
||||
"href": "",
|
||||
"attributes": {
|
||||
"artwork": {
|
||||
"width": null,
|
||||
"height": null,
|
||||
"url": "",
|
||||
"hasP3": false
|
||||
},
|
||||
"dateAdded": "2021-02-16T03:39:47Z",
|
||||
"name": "Local Songs",
|
||||
"canDelete": true,
|
||||
"hasCatalog": true,
|
||||
"canEdit": true,
|
||||
"playParams": {
|
||||
"id": "ciderlocal",
|
||||
"kind": "playlist",
|
||||
"isLibrary": true,
|
||||
},
|
||||
"isPublic": true,
|
||||
"description": {
|
||||
"standard": ""
|
||||
}
|
||||
},
|
||||
"relationships": {
|
||||
"tracks": {
|
||||
"href": "",
|
||||
"data": this.$root.library.localsongs
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$root.playlists.loadingState = 1;
|
||||
} else {
|
||||
this.$root.getPlaylistFromID(this.$root.page.substring(9), true)
|
||||
}
|
||||
},
|
||||
getPlaylistChildren(item) {
|
||||
let self = this
|
||||
this.children = []
|
||||
this.getChildren()
|
||||
this.toggleFolder()
|
||||
|
||||
this.$root.mk.api.v3.music(`v1/me/library/playlist-folders/${item.id}/children`).then(data => {
|
||||
let children = data.data.data;
|
||||
children.forEach(child => {
|
||||
if (!self.$root.playlists.listing.find(listing => listing.id == child.id)) {
|
||||
child.parent = self.item.id
|
||||
self.$root.playlists.listing.push(child)
|
||||
}
|
||||
})
|
||||
|
||||
self.$root.playlists.listing.sort((a, b) => {
|
||||
if (a.type === 'library-playlist-folders' && b.type !== 'library-playlist-folders') {
|
||||
return -1
|
||||
} else if (a.type !== 'library-playlist-folders' && b.type === 'library-playlist-folders') {
|
||||
return 1
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
})
|
||||
self.getChildren()
|
||||
})
|
||||
},
|
||||
isPlaylistSelected(item) {
|
||||
if (this.$root.showingPlaylist.id == item.id) {
|
||||
return ["active"]
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
toggleFolder() {
|
||||
this.folderOpened = !this.folderOpened;
|
||||
}
|
||||
Vue.component('sidebar-playlist', {
|
||||
template: '#sidebar-playlist',
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
playlistSelect: {
|
||||
type: Function,
|
||||
required: false
|
||||
},
|
||||
relateMediaItems: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
folderOpened: false,
|
||||
children: [],
|
||||
playlistRoot: "p.playlistsroot",
|
||||
renaming: false,
|
||||
icon: "",
|
||||
hasRelatedMediaItems: false
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
if (this.item.type !== "library-playlist-folders") {
|
||||
this.icon = ("./assets/feather/list.svg")
|
||||
} else {
|
||||
this.icon = ("./assets/feather/folder.svg")
|
||||
}
|
||||
let playlistMap = this.$root.playlists.trackMapping
|
||||
if (this.relateMediaItems.length != 0) {
|
||||
if (playlistMap[this.relateMediaItems[0]]) {
|
||||
if (playlistMap[this.relateMediaItems[0]].includes(this.item.id)) {
|
||||
this.hasRelatedMediaItems = true
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
if (this.item.type != "library-playlist-folders") {
|
||||
if (this.playlistSelect) {
|
||||
this.playlistSelect(this.item)
|
||||
} else {
|
||||
this.openPlaylist(this.item)
|
||||
}
|
||||
} else {
|
||||
this.getPlaylistChildren(this.item)
|
||||
}
|
||||
},
|
||||
rename() {
|
||||
this.renaming = false
|
||||
|
||||
if (this.item.type === "library-playlist-folders") {
|
||||
this.$root.editPlaylistFolder(this.item.id, this.item.attributes.name)
|
||||
} else {
|
||||
this.$root.editPlaylist(this.item.id, this.item.attributes.name)
|
||||
}
|
||||
},
|
||||
async getChildren() {
|
||||
let self = this
|
||||
this.children = []
|
||||
this.children = this.$root.playlists.listing.filter(child => {
|
||||
if (child.parent == self.item.id) {
|
||||
return child
|
||||
}
|
||||
})
|
||||
},
|
||||
async move(item, sendTo) {
|
||||
let self = this
|
||||
console.log(sendTo)
|
||||
let type = item.type.replace("library-", "")
|
||||
let typeTo = sendTo.type
|
||||
this.$root.mk.api.v3.music(`/v1/me/library/${type}/${item.id}/parent`, {}, {
|
||||
fetchOptions: {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({
|
||||
data: [{
|
||||
id: sendTo.id,
|
||||
type: typeTo
|
||||
}]
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// find the item in this.$root.playlists.listing and store it in a variable
|
||||
this.$root.playlists.listing.filter(playlist => {
|
||||
if (playlist.id == item.id) {
|
||||
console.log(playlist)
|
||||
playlist.parent = sendTo.id
|
||||
|
||||
}
|
||||
})
|
||||
if (typeof this.$root.getChildren == "function") {
|
||||
this.$root.getChildren()
|
||||
console.log(this.$root.children)
|
||||
}
|
||||
await this.getChildren()
|
||||
this.$root.sortPlaylists()
|
||||
// await this.$root.refreshPlaylists()
|
||||
},
|
||||
playlistContextMenu(event, playlist_id) {
|
||||
let menu = {
|
||||
items: {
|
||||
"moveToParent": {
|
||||
name: this.$root.getLz('action.moveToTop'),
|
||||
action: () => {
|
||||
let self = this
|
||||
this.move(this.item, {
|
||||
id: this.playlistRoot,
|
||||
type: "library-playlist-folders"
|
||||
})
|
||||
setTimeout(() => {
|
||||
self.getChildren()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
"rename": {
|
||||
name: this.$root.getLz('action.rename'),
|
||||
action: () => {
|
||||
this.renaming = true
|
||||
setTimeout(() => {
|
||||
document.querySelector(".pl-rename-field").focus()
|
||||
document.querySelector(".pl-rename-field").select()
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
"deleteFromPlaylist": {
|
||||
name: this.$root.getLz('action.removeFromLibrary'),
|
||||
action: () => {
|
||||
this.$root.deletePlaylist(playlist_id)
|
||||
}
|
||||
},
|
||||
"addToFavorites": {
|
||||
name: this.$root.getLz('action.addToFavorites'),
|
||||
disabled: true,
|
||||
hidden: true,
|
||||
action: () => {
|
||||
this.addFavorite(playlist_id, "library-playlists")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.item.type === "library-playlist-folders") {
|
||||
menu.items.addToFavorites.disabled = true
|
||||
}
|
||||
app.showMenuPanel(menu, event)
|
||||
},
|
||||
dragOver(evt) {
|
||||
evt.preventDefault();
|
||||
evt.dataTransfer.dropEffect = "move";
|
||||
},
|
||||
onDrop(evt) {
|
||||
let data = JSON.parse(evt.dataTransfer.getData("text/plain"))
|
||||
evt.preventDefault();
|
||||
if (data.id == this.item.id) {
|
||||
return;
|
||||
}
|
||||
console.log(data)
|
||||
if (data) {
|
||||
if (this.item.type == "library-playlists" || this.item.type == "library-playlist-folders") {
|
||||
if (data.type == "library-playlists" && this.item.type == "library-playlists") {
|
||||
return
|
||||
}
|
||||
this.move(data, this.item)
|
||||
}
|
||||
}
|
||||
},
|
||||
startDrag(evt) {
|
||||
evt.dataTransfer.dropEffect = 'move'
|
||||
evt.dataTransfer.effectAllowed = 'move'
|
||||
evt.dataTransfer.setData('text/plain', JSON.stringify(this.item))
|
||||
},
|
||||
openPlaylist(item) {
|
||||
this.$root.appRoute(`playlist_` + item.id);
|
||||
this.$root.showingPlaylist = [];
|
||||
if (item.id == 'ciderlocal') {
|
||||
this.$root.showingPlaylist = {
|
||||
"id": "ciderlocal",
|
||||
"type": "library-playlists",
|
||||
"href": "",
|
||||
"attributes": {
|
||||
"artwork": {
|
||||
"width": null,
|
||||
"height": null,
|
||||
"url": "",
|
||||
"hasP3": false
|
||||
},
|
||||
"dateAdded": "2021-02-16T03:39:47Z",
|
||||
"name": "Local Songs",
|
||||
"canDelete": true,
|
||||
"hasCatalog": true,
|
||||
"canEdit": true,
|
||||
"playParams": {
|
||||
"id": "ciderlocal",
|
||||
"kind": "playlist",
|
||||
"isLibrary": true,
|
||||
},
|
||||
"isPublic": true,
|
||||
"description": {
|
||||
"standard": ""
|
||||
}
|
||||
},
|
||||
"relationships": {
|
||||
"tracks": {
|
||||
"href": "",
|
||||
"data": this.$root.library.localsongs
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$root.playlists.loadingState = 1;
|
||||
} else {
|
||||
this.$root.getPlaylistFromID(this.$root.page.substring(9), true)
|
||||
}
|
||||
},
|
||||
getPlaylistChildren(item) {
|
||||
let self = this
|
||||
this.children = []
|
||||
this.getChildren()
|
||||
this.toggleFolder()
|
||||
|
||||
this.$root.mk.api.v3.music(`v1/me/library/playlist-folders/${item.id}/children`).then(data => {
|
||||
let children = data.data.data;
|
||||
children.forEach(child => {
|
||||
if (!self.$root.playlists.listing.find(listing => listing.id == child.id)) {
|
||||
child.parent = self.item.id
|
||||
self.$root.playlists.listing.push(child)
|
||||
}
|
||||
})
|
||||
|
||||
self.$root.playlists.listing.sort((a, b) => {
|
||||
if (a.type === 'library-playlist-folders' && b.type !== 'library-playlist-folders') {
|
||||
return -1
|
||||
} else if (a.type !== 'library-playlist-folders' && b.type === 'library-playlist-folders') {
|
||||
return 1
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
})
|
||||
self.getChildren()
|
||||
})
|
||||
},
|
||||
isPlaylistSelected(item) {
|
||||
if (this.$root.showingPlaylist.id == item.id) {
|
||||
return ["active"]
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
toggleFolder() {
|
||||
this.folderOpened = !this.folderOpened;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -140,12 +140,12 @@
|
|||
</template>
|
||||
<template v-if="$root.cfg.libraryPrefs.localPaths.length != 0">
|
||||
<div class="app-sidebar-header-text"
|
||||
@click="$root.cfg.general.sidebarCollapsed.localLibrary = !$root.cfg.general.sidebarCollapsed.localLibrary"
|
||||
:class="{collapsed: $root.cfg.general.sidebarCollapsed.localLibrary}">
|
||||
Local Library
|
||||
@click="$root.cfg.general.sidebarCollapsed.localLibrary = !$root.cfg.general.sidebarCollapsed.localLibrary"
|
||||
:class="{collapsed: $root.cfg.general.sidebarCollapsed.localLibrary}">
|
||||
Local Library
|
||||
</div>
|
||||
<template v-if="!$root.cfg.general.sidebarCollapsed.localLibrary">
|
||||
<sidebar-playlist :item="{attributes: { name:'Songs'} , id:'ciderlocal'}"></sidebar-playlist>
|
||||
<sidebar-playlist :item="{attributes: { name:'Songs'} , id:'ciderlocal'}"></sidebar-playlist>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="$root.getPlaylistFolderChildren('p.applemusic').length != 0">
|
||||
|
|
@ -310,7 +310,7 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component("cider-app-sidebar", {
|
||||
template: "#cider-app-sidebar"
|
||||
})
|
||||
</script>
|
||||
Vue.component("cider-app-sidebar", {
|
||||
template: "#cider-app-sidebar"
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue