Finalize the finalize the finalize (I swear its finalized)

This commit is contained in:
Maikiwi 2022-01-24 23:15:15 -08:00
parent 2eb8985245
commit 946c235a58
17 changed files with 94 additions and 94 deletions

View file

@ -3,7 +3,7 @@
<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-window">
<div class="modal-header"> <div class="modal-header">
<div class="modal-title">{{$root.getLz('action.addToLibrary')}}</div> <div class="modal-title">{{app.getLz('action.addToLibrary')}}</div>
<button class="close-btn" @click="app.resetState()"></button> <button class="close-btn" @click="app.resetState()"></button>
</div> </div>
<div class="modal-content"> <div class="modal-content">
@ -21,7 +21,7 @@
ref="searchInput" ref="searchInput"
style="width:100%;" style="width:100%;"
spellcheck="false" spellcheck="false"
:placeholder="$root.getLz('term.search') + '...'" :placeholder="app.getLz('term.search') + '...'"
v-model="searchQuery" v-model="searchQuery"
@input="search()" @input="search()"
class="search-input"> class="search-input">

View file

@ -3,7 +3,7 @@
<div class="modal-fullscreen modal-generic" @click.self="app.resetState()" @contextmenu.self="app.resetState()"> <div class="modal-fullscreen modal-generic" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
<div class="modal-window"> <div class="modal-window">
<div class="modal-header"> <div class="modal-header">
<div class="modal-title">{{$root.getLz('action.addToLibrary')}}</div> <div class="modal-title">{{app.getLz('action.addToLibrary')}}</div>
<button class="close-btn" @click="app.resetState()"></button> <button class="close-btn" @click="app.resetState()"></button>
</div> </div>
<div class="modal-content"> <div class="modal-content">
@ -21,7 +21,7 @@
ref="searchInput" ref="searchInput"
style="width:100%;" style="width:100%;"
spellcheck="false" spellcheck="false"
:placeholder="$root.getLz('term.search') + '...'" :placeholder="app.getLz('term.search') + '...'"
v-model="searchQuery" v-model="searchQuery"
@input="search()" @input="search()"
class="search-input"> class="search-input">

View file

@ -98,7 +98,7 @@
normal: { normal: {
items: [ items: [
{ {
"name": $root.getLz('action.goToArtist'), "name": app.getLz('action.goToArtist'),
"icon": "./assets/feather/user.svg", "icon": "./assets/feather/user.svg",
"action": function () { "action": function () {
app.searchAndNavigate(self.item, 'artist') app.searchAndNavigate(self.item, 'artist')
@ -107,7 +107,7 @@
}, },
{ {
"icon": "./assets/feather/radio.svg", "icon": "./assets/feather/radio.svg",
"name": $root.getLz('action.startRadio'), "name": app.getLz('action.startRadio'),
"action": function () { "action": function () {
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => { app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
app.mk.play() app.mk.play()
@ -117,7 +117,7 @@
}, },
{ {
"icon": "./assets/feather/share.svg", "icon": "./assets/feather/share.svg",
"name": $root.getLz('action.share'), "name": app.getLz('action.share'),
"action": function () { "action": function () {
if (!self.item.attributes.url && self.item.relationships){ if (!self.item.attributes.url && self.item.relationships){
if (self.item.relationships.catalog){ if (self.item.relationships.catalog){

View file

@ -231,7 +231,7 @@
multiple: { multiple: {
items: [ items: [
{ {
"name": $root.getLz('action.addToPlaylist'), "name": app.getLz('action.addToPlaylist'),
"icon": "./assets/feather/plus.svg", "icon": "./assets/feather/plus.svg",
"action": function () { "action": function () {
app.promptAddToPlaylist() app.promptAddToPlaylist()
@ -287,7 +287,7 @@
{ {
"icon": "./assets/feather/heart.svg", "icon": "./assets/feather/heart.svg",
"id": "love", "id": "love",
"name": this.$root.getLz('action.love'), "name": this.app.getLz('action.love'),
"hidden": false, "hidden": false,
"disabled": true, "disabled": true,
"action": function () { "action": function () {
@ -298,7 +298,7 @@
"icon": "./assets/feather/heart.svg", "icon": "./assets/feather/heart.svg",
"id": "unlove", "id": "unlove",
"active": true, "active": true,
"name": this.$root.getLz('action.unload'), "name": this.app.getLz('action.unload'),
"hidden": true, "hidden": true,
"action": function () { "action": function () {
app.unlove(self.item) app.unlove(self.item)
@ -307,7 +307,7 @@
{ {
"icon": "./assets/feather/thumbs-down.svg", "icon": "./assets/feather/thumbs-down.svg",
"id": "dislike", "id": "dislike",
"name": this.$root.getLz('action.dislike'), "name": this.app.getLz('action.dislike'),
"hidden": false, "hidden": false,
"disabled": true, "disabled": true,
"action": function () { "action": function () {
@ -317,7 +317,7 @@
{ {
"icon": "./assets/feather/thumbs-down.svg", "icon": "./assets/feather/thumbs-down.svg",
"id": "undo_dislike", "id": "undo_dislike",
"name": this.$root.getLz('action.undoDislike'), "name": this.app.getLz('action.undoDislike'),
"active": true, "active": true,
"hidden": true, "hidden": true,
"action": function () { "action": function () {
@ -329,7 +329,7 @@
{ {
"id": "addToLibrary", "id": "addToLibrary",
"icon": "./assets/feather/plus.svg", "icon": "./assets/feather/plus.svg",
"name": this.$root.getLz('action.addToLibrary'), "name": this.app.getLz('action.addToLibrary'),
"hidden": false, "hidden": false,
"disabled": true, "disabled": true,
"action": function () { "action": function () {
@ -339,7 +339,7 @@
{ {
"id": "removeFromLibrary", "id": "removeFromLibrary",
"icon": "./assets/feather/x-circle.svg", "icon": "./assets/feather/x-circle.svg",
"name": $root.getLz('action.removeFromLibrary'), "name": app.getLz('action.removeFromLibrary'),
"hidden": true, "hidden": true,
"action": function () { "action": function () {
self.removeFromLibrary() self.removeFromLibrary()
@ -347,13 +347,13 @@
}, },
{ {
"icon": "./assets/feather/list.svg", "icon": "./assets/feather/list.svg",
"name": $root.getLz('action.addToPlaylist'), "name": app.getLz('action.addToPlaylist'),
"action": function () { "action": function () {
app.promptAddToPlaylist() app.promptAddToPlaylist()
} }
}, },
{ {
"name": $root.getLz('action.playNext'), "name": app.getLz('action.playNext'),
"icon": "./assets/arrow-bend-up.svg", "icon": "./assets/arrow-bend-up.svg",
"action": function () { "action": function () {
app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id}) app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
@ -362,7 +362,7 @@
} }
}, },
{ {
"name": $root.getLz('action.playLater'), "name": app.getLz('action.playLater'),
"icon": "./assets/arrow-bend-down.svg", "icon": "./assets/arrow-bend-down.svg",
"action": function () { "action": function () {
app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id}) app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
@ -372,7 +372,7 @@
}, },
{ {
"icon": "./assets/feather/radio.svg", "icon": "./assets/feather/radio.svg",
"name": $root.getLz('action.startRadio'), "name": app.getLz('action.startRadio'),
"action": function () { "action": function () {
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => { app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
app.mk.play() app.mk.play()
@ -382,21 +382,21 @@
}, },
{ {
"icon": "./assets/feather/user.svg", "icon": "./assets/feather/user.svg",
"name": $root.getLz('action.goToArtist'), "name": app.getLz('action.goToArtist'),
"action": function () { "action": function () {
app.searchAndNavigate(self.item, 'artist') app.searchAndNavigate(self.item, 'artist')
} }
}, },
{ {
"icon": "./assets/feather/disc.svg", "icon": "./assets/feather/disc.svg",
"name": $root.getLz('action.goToAlbum'), "name": app.getLz('action.goToAlbum'),
"action": function () { "action": function () {
app.searchAndNavigate(self.item, 'album') app.searchAndNavigate(self.item, 'album')
} }
}, },
{ {
"icon": "./assets/feather/share.svg", "icon": "./assets/feather/share.svg",
"name": $root.getLz('action.share'), "name": app.getLz('action.share'),
"action": function () { "action": function () {
if (!self.item.attributes.url && self.item.relationships){ if (!self.item.attributes.url && self.item.relationships){
if (self.item.relationships.catalog){ if (self.item.relationships.catalog){

View file

@ -299,7 +299,7 @@
{ {
"icon": "./assets/feather/heart.svg", "icon": "./assets/feather/heart.svg",
"id": "love", "id": "love",
"name": $root.getLz('action.love'), "name": app.getLz('action.love'),
"hidden": false, "hidden": false,
"disabled": true, "disabled": true,
"action": function () { "action": function () {
@ -310,7 +310,7 @@
"icon": "./assets/feather/heart.svg", "icon": "./assets/feather/heart.svg",
"id": "unlove", "id": "unlove",
"active": true, "active": true,
"name": $root.getLz('action.unlove'), "name": app.getLz('action.unlove'),
"hidden": true, "hidden": true,
"action": function () { "action": function () {
app.unlove(self.item) app.unlove(self.item)
@ -319,7 +319,7 @@
{ {
"icon": "./assets/feather/thumbs-down.svg", "icon": "./assets/feather/thumbs-down.svg",
"id": "dislike", "id": "dislike",
"name": $root.getLz('action.dislike'), "name": app.getLz('action.dislike'),
"hidden": false, "hidden": false,
"disabled": true, "disabled": true,
"action": function () { "action": function () {
@ -329,7 +329,7 @@
{ {
"icon": "./assets/feather/thumbs-down.svg", "icon": "./assets/feather/thumbs-down.svg",
"id": "undo_dislike", "id": "undo_dislike",
"name": $root.getLz('action.undoDislike'), "name": app.getLz('action.undoDislike'),
"active": true, "active": true,
"hidden": true, "hidden": true,
"action": function () { "action": function () {
@ -341,7 +341,7 @@
{ {
"icon": "./assets/feather/list.svg", "icon": "./assets/feather/list.svg",
"id": "addToPlaylist", "id": "addToPlaylist",
"name": $root.getLz('action.addToPlaylist'), "name": app.getLz('action.addToPlaylist'),
"action": function () { "action": function () {
app.promptAddToPlaylist() app.promptAddToPlaylist()
} }
@ -349,7 +349,7 @@
{ {
"id": "addToLibrary", "id": "addToLibrary",
"icon": "./assets/feather/plus.svg", "icon": "./assets/feather/plus.svg",
"name": $root.getLz('action.addToLibrary'), "name": app.getLz('action.addToLibrary'),
"hidden": false, "hidden": false,
"disabled": true, "disabled": true,
"action": function () { "action": function () {
@ -362,7 +362,7 @@
{ {
"id": "removeFromLibrary", "id": "removeFromLibrary",
"icon": "./assets/feather/x-circle.svg", "icon": "./assets/feather/x-circle.svg",
"name": $root.getLz('action.removeFromLibrary'), "name": app.getLz('action.removeFromLibrary'),
"hidden": true, "hidden": true,
"action": async function () { "action": async function () {
console.log("remove"); console.log("remove");
@ -373,7 +373,7 @@
} }
}, },
{ {
"name": $root.getLz('action.playNext'), "name": app.getLz('action.playNext'),
"icon": "./assets/arrow-bend-up.svg", "icon": "./assets/arrow-bend-up.svg",
"action": function () { "action": function () {
app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id}) app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
@ -382,7 +382,7 @@
} }
}, },
{ {
"name": $root.getLz('action.playLater'), "name": app.getLz('action.playLater'),
"icon": "./assets/arrow-bend-down.svg", "icon": "./assets/arrow-bend-down.svg",
"action": function () { "action": function () {
app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id}) app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
@ -392,7 +392,7 @@
}, },
{ {
"icon": "./assets/feather/share.svg", "icon": "./assets/feather/share.svg",
"name": $root.getLz('action.share'), "name": app.getLz('action.share'),
"action": function () { "action": function () {
self.app.copyToClipboard(self.item.attributes.url) self.app.copyToClipboard(self.item.attributes.url)
} }

View file

@ -2,7 +2,7 @@
<div class="queue-panel"> <div class="queue-panel">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3 class="queue-header-text">{{$root.getLz('term.queue')}}</h3> <h3 class="queue-header-text">{{app.getLz('term.queue')}}</h3>
</div> </div>
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}" @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled"> <img class="infinity"></button> <button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}" @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled"> <img class="infinity"></button>
@ -33,7 +33,7 @@
</draggable> </draggable>
</div> </div>
<div class="queue-footer"> <div class="queue-footer">
<button class="md-btn" style="width:100%;" v-if="queueItems.length > 1" @click="app.mk.clearQueue();updateQueue()">{{$root.getLz('term.clearAll')}}</button> <button class="md-btn" style="width:100%;" v-if="queueItems.length > 1" @click="app.mk.clearQueue();updateQueue()">{{app.getLz('term.clearAll')}}</button>
</div> </div>
</div> </div>
</script> </script>
@ -76,7 +76,7 @@
let menus = { let menus = {
single: { single: {
items: [{ items: [{
"name": $root.getLz('action.removeFromQueue'), "name": app.getLz('action.removeFromQueue'),
"action": function () { "action": function () {
self.queueItems.splice(position, 1) self.queueItems.splice(position, 1)
app.mk.queue._queueItems = self.queueItems; app.mk.queue._queueItems = self.queueItems;
@ -84,7 +84,7 @@
} }
}, },
{ {
"name": $root.getLz('action.startRadio'), "name": app.getLz('action.startRadio'),
"action": function () { "action": function () {
app.mk.setStationQueue({ app.mk.setStationQueue({
song: item.attributes.playParams.id ?? item.id song: item.attributes.playParams.id ?? item.id

View file

@ -105,7 +105,7 @@
let menu = { let menu = {
items: { items: {
"moveToParent": { "moveToParent": {
name: $root.getLz('action.moveToTop'), name: this.$root.getLz('action.moveToTop'),
action: () => { action: () => {
let self = this let self = this
this.move(this.item, { this.move(this.item, {
@ -116,7 +116,7 @@
} }
}, },
"rename": { "rename": {
name: $root.getLz('action.rename'), name: this.$root.getLz('action.rename'),
action: () => { action: () => {
this.renaming = true this.renaming = true
setTimeout(()=>{ setTimeout(()=>{
@ -126,13 +126,13 @@
} }
}, },
"deleteFromPlaylist": { "deleteFromPlaylist": {
name: $root.getLz('action.removeFromLibrary'), name: this.$root.getLz('action.removeFromLibrary'),
action: () => { action: () => {
this.$root.deletePlaylist(playlist_id) this.$root.deletePlaylist(playlist_id)
} }
}, },
"addToFavorites": { "addToFavorites": {
name: $root.getLz('action.addToFavorites'), name: this.$root.getLz('action.addToFavorites'),
disabled: true, disabled: true,
hidden: true, hidden: true,
action: () => { action: () => {

View file

@ -5,7 +5,7 @@
<div class="col"> <div class="col">
<div class="row nopadding"> <div class="row nopadding">
<div class="col nopadding"> <div class="col nopadding">
<h3>{{$root.getLz('home.followedArtists')}}</h3> <h3>{{app.getLz('home.followedArtists')}}</h3>
</div> </div>
</div> </div>
<div class="well"> <div class="well">
@ -15,7 +15,7 @@
<button @click="unfollow(artist.id)" class="md-btn md-btn-glyph" style="display:flex;"> <button @click="unfollow(artist.id)" class="md-btn md-btn-glyph" style="display:flex;">
<div class="sidebar-icon"> <div class="sidebar-icon">
<div class="svg-icon" :style="{'--url': 'url(./assets/feather/x-circle.svg)'}"></div> <div class="svg-icon" :style="{'--url': 'url(./assets/feather/x-circle.svg)'}"></div>
</div> {{$root.getLz('action.unfollow')}} </div> {{app.getLz('action.unfollow')}}
</button> </button>
</div> </div>
</mediaitem-scroller-horizontal> </mediaitem-scroller-horizontal>
@ -30,7 +30,7 @@
<div class="col"> <div class="col">
<div class="row nopadding"> <div class="row nopadding">
<div class="col nopadding"> <div class="col nopadding">
<h3>{{$root.getLz('home.artistsFeed')}}</h3> <h3>{{app.getLz('home.artistsFeed')}}</h3>
</div> </div>
</div> </div>
<div class="well" style="margin-top:0;"> <div class="well" style="margin-top:0;">

View file

@ -60,7 +60,7 @@
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col-auto" v-if="data.views['latest-release'].data.length != 0"> <div class="col-auto" v-if="data.views['latest-release'].data.length != 0">
<h3>{{$root.getLz('term.latestReleases')}}</h3> <h3>{{app.getLz('term.latestReleases')}}</h3>
<div style="width: auto;margin: 0 auto;"> <div style="width: auto;margin: 0 auto;">
<mediaitem-square kind="card" v-for="song in data.views['latest-release'].data" <mediaitem-square kind="card" v-for="song in data.views['latest-release'].data"
:item="song"> :item="song">
@ -70,10 +70,10 @@
<div class="col" v-if="data.views['top-songs']"> <div class="col" v-if="data.views['top-songs']">
<div class="row"> <div class="row">
<div class="col" style="padding:0;"> <div class="col" style="padding:0;">
<h3>{{$root.getLz('term.topSongs')}}</h3> <h3>{{app.getLz('term.topSongs')}}</h3>
</div> </div>
<div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 10" style="padding:0;"> <div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 10" style="padding:0;">
<button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">{{$root.getLz('term.seeAll')}}</button> <button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">{{app.getLz('term.seeAll')}}</button>
</div> </div>
</div> </div>
<mediaitem-list-item <mediaitem-list-item
@ -83,10 +83,10 @@
<button class="showmoreless" <button class="showmoreless"
@click="topSongsExpanded = !topSongsExpanded"> @click="topSongsExpanded = !topSongsExpanded">
<template v-if="!topSongsExpanded"> <template v-if="!topSongsExpanded">
{{$root.getLz('term.showMore')}} {{app.getLz('term.showMore')}}
</template> </template>
<template v-else> <template v-else>
{{$root.getLz('term.showLess')}} {{app.getLz('term.showLess')}}
</template> </template>
</button> </button>
</div> </div>
@ -120,7 +120,7 @@
</template> </template>
<div class="row"> <div class="row">
<div class="col" v-if="data.attributes.artistBio"> <div class="col" v-if="data.attributes.artistBio">
<h3>{{ $root.getLz('term.about') }} {{ data.attributes.name }}</h3> <h3>{{ app.getLz('term.about') }} {{ data.attributes.name }}</h3>
<p v-html="data.attributes.artistBio"></p> <p v-html="data.attributes.artistBio"></p>
</div> </div>
<div class="col"> <div class="col">
@ -164,14 +164,14 @@
let followActions = { let followActions = {
follow: { follow: {
icon: "./assets/feather/plus-circle.svg", icon: "./assets/feather/plus-circle.svg",
name: $root.getLz('action.follow'), name: app.getLz('action.follow'),
action: ()=>{ action: ()=>{
self.app.cfg.home.followedArtists.push(self.data.id) self.app.cfg.home.followedArtists.push(self.data.id)
} }
}, },
unfollow: { unfollow: {
icon: "./assets/feather/x-circle.svg", icon: "./assets/feather/x-circle.svg",
name: $root.getLz('action.unfollow'), name: app.getLz('action.unfollow'),
action: ()=>{ action: ()=>{
let index = self.app.cfg.home.followedArtists.indexOf(self.data.id) let index = self.app.cfg.home.followedArtists.indexOf(self.data.id)
if (index > -1) { if (index > -1) {
@ -187,7 +187,7 @@
items: [ items: [
{ {
icon: "./assets/feather/play.svg", icon: "./assets/feather/play.svg",
name: $root.getLz('action.startRadio'), name: app.getLz('action.startRadio'),
action: ()=>{ action: ()=>{
app.mk.setStationQueue({artist:self.data.id}).then(()=>{ app.mk.setStationQueue({artist:self.data.id}).then(()=>{
app.mk.play() app.mk.play()
@ -197,7 +197,7 @@
followActions[followAction], followActions[followAction],
{ {
icon: "./assets/feather/share.svg", icon: "./assets/feather/share.svg",
name: $root.getLz('action.share'), name: app.getLz('action.share'),
action: ()=>{ action: ()=>{
self.app.copyToClipboard(self.data.attributes.url) self.app.copyToClipboard(self.data.attributes.url)
} }

View file

@ -48,7 +48,7 @@
<div v-else-if="data.attributes.description.standard" class="content" v-html="data.attributes.description.standard"></div> <div v-else-if="data.attributes.description.standard" class="content" v-html="data.attributes.description.standard"></div>
<button v-if="data.attributes.description.short" class="more-btn" <button v-if="data.attributes.description.short" class="more-btn"
@click="editorialNotesExpanded = !editorialNotesExpanded"> @click="editorialNotesExpanded = !editorialNotesExpanded">
{{$root.getLz('term.showMore')}} {{app.getLz('term.showMore')}}
</button> </button>
</div> </div>
</div> </div>
@ -57,26 +57,26 @@
<div class="playlist-desc-expanded"> <div class="playlist-desc-expanded">
<div class="content" <div class="content"
v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.standard ?? (data.attributes.editorialNotes.short ?? '') ) : (data.attributes.description ? (data.attributes.description.standard ?? (data.attributes.description.short ?? '')) : ''))"></div> v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.standard ?? (data.attributes.editorialNotes.short ?? '') ) : (data.attributes.description ? (data.attributes.description.standard ?? (data.attributes.description.short ?? '')) : ''))"></div>
<button class="more-btn" @click="editorialNotesExpanded = !editorialNotesExpanded">{{$root.getLz('term.showLess')}} <button class="more-btn" @click="editorialNotesExpanded = !editorialNotesExpanded">{{app.getLz('term.showLess')}}
</button> </button>
</div> </div>
</template> </template>
<div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}"> <div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}">
<button class="md-btn" style="min-width: 100px;" <button class="md-btn" style="min-width: 100px;"
@click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play"> @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
{{$root.getLz('term.play')}} {{app.getLz('term.play')}}
</button> </button>
<button class="md-btn" style="min-width: 100px;" <button class="md-btn" style="min-width: 100px;"
@click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle"> @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
{{$root.getLz('term.shuffle')}} {{app.getLz('term.shuffle')}}
</button> </button>
<button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true" <button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'"> @click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{ (!inLibrary) ? $root.getLz('action.addToLibrary') : $root.getLz("action.removeFromLibrary") }} {{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }}
</button> </button>
<button class="md-btn" style="min-width: 180px;" v-if="confirm==true" <button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'"> @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{$root.getLz('term.confirm')}} {{app.getLz('term.confirm')}}
</button> </button>
<button class="more-btn-round" style="float:right;" @click="menu"> <button class="more-btn-round" style="float:right;" @click="menu">
<div class="svg-icon"></div> <div class="svg-icon"></div>
@ -100,19 +100,19 @@
<div> <div>
<button class="md-btn" style="min-width: 100px;" <button class="md-btn" style="min-width: 100px;"
@click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play"> @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
{{$root.getLz('term.play')}} {{app.getLz('term.play')}}
</button> </button>
<button class="md-btn" style="min-width: 100px;" <button class="md-btn" style="min-width: 100px;"
@click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle"> @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
{{$root.getLz('term.shuffle')}} {{app.getLz('term.shuffle')}}
</button> </button>
<button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true" <button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'"> @click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{ (!inLibrary) ? $root.getLz('action.addToLibrary') : $root.getLz("action.removeFromLibrary") }} {{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }}
</button> </button>
<button class="md-btn" style="min-width: 180px;" v-if="confirm==true" <button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'"> @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{$root.getLz('term.confirm')}} {{app.getLz('term.confirm')}}
</button> </button>
</div> </div>
</div> </div>
@ -318,7 +318,7 @@
return { return {
normal: [ normal: [
{ {
name: $root.getLz('action.removeFromPlaylist'), name: app.getLz('action.removeFromPlaylist'),
action: () => { action: () => {
self.remove() self.remove()
} }
@ -326,7 +326,7 @@
], ],
multiple: [ multiple: [
{ {
name: $root.getLz('action.removeFromPlaylist'), name: app.getLz('action.removeFromPlaylist'),
action: () => { action: () => {
self.remove() self.remove()
} }
@ -429,13 +429,13 @@
if (date == null || date === "") return ""; if (date == null || date === "") return "";
switch (date) { switch (date) {
case this.data.attributes.releaseDate: case this.data.attributes.releaseDate:
prefix = this.$root.getLz('term.time.released')+ ' ' prefix = this.app.getLz('term.time.released')+ ' '
break; break;
case this.data.attributes.lastModifiedDate: case this.data.attributes.lastModifiedDate:
prefix = this.$root.getLz('term.time.updated')+ ' ' prefix = this.app.getLz('term.time.updated')+ ' '
break; break;
case this.data.attributes.dateAdded: case this.data.attributes.dateAdded:
prefix = this.$root.getLz('term.time.added')+ ' ' prefix = this.app.getLz('term.time.added')+ ' '
break; break;
} }
let month, year; let month, year;

View file

@ -15,7 +15,7 @@
</template> </template>
</template> </template>
<button v-if="triggerEnabled" style="opacity:0;height: 32px;" <button v-if="triggerEnabled" style="opacity:0;height: 32px;"
v-observe-visibility="{callback: visibilityChanged}">{{$root.getLz('term.showMore')}} v-observe-visibility="{callback: visibilityChanged}">{{this.app.getLz('term.showMore')}}
</button> </button>
</div> </div>
<transition name="fabfade"> <transition name="fabfade">

View file

@ -3,7 +3,7 @@
<div v-if="page == 'main'"> <div v-if="page == 'main'">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3>{{$root.getLz('home.recentlyPlayed')}}</h3> <h3>{{app.getLz('home.recentlyPlayed')}}</h3>
<div class="well artistfeed-well"> <div class="well artistfeed-well">
<template v-if="isSectionReady('recentlyPlayed')"> <template v-if="isSectionReady('recentlyPlayed')">
<mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" <mediaitem-list-item v-for="item in recentlyPlayed.limit(6)"
@ -15,10 +15,10 @@
<div class="col"> <div class="col">
<div class="row nopadding"> <div class="row nopadding">
<div class="col nopadding"> <div class="col nopadding">
<h3>{{$root.getLz('home.artistsFeed')}}</h3> <h3>{{app.getLz('home.artistsFeed')}}</h3>
</div> </div>
<div class="col-auto nopadding flex-center"> <div class="col-auto nopadding flex-center">
<button class="cd-btn-seeall" @click="app.appRoute('artist-feed')">{{$root.getLz('term.seeAll')}}</button> <button class="cd-btn-seeall" @click="app.appRoute('artist-feed')">{{app.getLz('term.seeAll')}}</button>
</div> </div>
</div> </div>
<div class="well artistfeed-well" style="margin-top:0;"> <div class="well artistfeed-well" style="margin-top:0;">
@ -26,7 +26,7 @@
<mediaitem-list-item v-for="item in artistFeed.limit(6)" :item="item"></mediaitem-list-item> <mediaitem-list-item v-for="item in artistFeed.limit(6)" :item="item"></mediaitem-list-item>
</template> </template>
<div class="spinner" v-else-if="followedArtists.length > 0"></div> <div class="spinner" v-else-if="followedArtists.length > 0"></div>
<div class="no-artist" v-else> {{$root.getLz('home.artistsFeed.noArtist')}}</div> <div class="no-artist" v-else> {{app.getLz('home.artistsFeed.noArtist')}}</div>
</div> </div>
</div> </div>
</div> </div>
@ -44,7 +44,7 @@
<!-- </div>--> <!-- </div>-->
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3>{{$root.getLz('home.madeForYou')}}</h3> <h3>{{app.getLz('home.madeForYou')}}</h3>
<div class="well"> <div class="well">
<template v-if="isSectionReady('madeForYou')"> <template v-if="isSectionReady('madeForYou')">
<mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square> <mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
@ -57,10 +57,10 @@
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col nopadding"> <div class="col nopadding">
<h3>{{$root.getLz('home.friendsListeningTo')}}</h3> <h3>{{app.getLz('home.friendsListeningTo')}}</h3>
</div> </div>
<div class="col-auto nopadding flex-center"> <div class="col-auto nopadding flex-center">
<button class="cd-btn-seeall" @click="app.showSocialListeningTo()">{{$root.getLz('term.seeAll')}}</button> <button class="cd-btn-seeall" @click="app.showSocialListeningTo()">{{app.getLz('term.seeAll')}}</button>
</div> </div>
</div> </div>
<div class="well"> <div class="well">

View file

@ -10,7 +10,7 @@
<input type="search" <input type="search"
style="width:100%;" style="width:100%;"
spellcheck="false" spellcheck="false"
:placeholder="$root.getLz('term.search') + '...'" :placeholder="app.getLz('term.search') + '...'"
@input="$root.searchLibrarySongs" @input="$root.searchLibrarySongs"
v-model="library.songs.search" class="search-input"> v-model="library.songs.search" class="search-input">
</div> </div>
@ -19,24 +19,24 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<select class="md-select" v-model="prefs.sort" @change="$root.searchLibrarySongs()"> <select class="md-select" v-model="prefs.sort" @change="$root.searchLibrarySongs()">
<optgroup :label="$root.getLz('term.sortBy')"> <optgroup :label="app.getLz('term.sortBy')">
<option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}</option> <option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}</option>
</optgroup> </optgroup>
</select> </select>
</div> </div>
<div class="col"> <div class="col">
<select class="md-select" v-model="prefs.sortOrder" @change="$root.searchLibrarySongs()"> <select class="md-select" v-model="prefs.sortOrder" @change="$root.searchLibrarySongs()">
<optgroup :label="$root.getLz('term.sortOrder')"> <optgroup :label="app.getLz('term.sortOrder')">
<option value="asc">{{$root.getLz('term.sortOrder.ascending')}}</option> <option value="asc">{{app.getLz('term.sortOrder.ascending')}}</option>
<option value="desc">{{$root.getLz('term.sortOrder.descending')}}</option> <option value="desc">{{app.getLz('term.sortOrder.descending')}}</option>
</optgroup> </optgroup>
</select> </select>
</div> </div>
<div class="col"> <div class="col">
<select class="md-select" v-model="prefs.size" @change="$root.searchLibrarySongs()"> <select class="md-select" v-model="prefs.size" @change="$root.searchLibrarySongs()">
<optgroup :label="$root.getLz('term.size')"> <optgroup :label="app.getLz('term.size')">
<option value="normal">{{$root.getLz('term.size.normal')}}</option> <option value="normal">{{app.getLz('term.size.normal')}}</option>
<option value="compact">{{$root.getLz('term.size.compact')}}</option> <option value="compact">{{app.getLz('term.size.compact')}}</option>
</optgroup> </optgroup>
</select> </select>
</div> </div>

View file

@ -1,6 +1,6 @@
<script type="text/x-template" id="cider-listen-now"> <script type="text/x-template" id="cider-listen-now">
<div class="content-inner"> <div class="content-inner">
<h1 class="header-text">{{$root.getLz('term.listenNow')}}</h1> <h1 class="header-text">{{app.getLz('term.listenNow')}}</h1>
<template v-for="recom in data.data"> <template v-for="recom in data.data">
<listennow-child :recom="recom"></listennow-child> <listennow-child :recom="recom"></listennow-child>
</template> </template>

View file

@ -33,7 +33,7 @@
<h3>{{ data.views["latest-releases"].attributes.title ?? ""}}</h3> <h3>{{ data.views["latest-releases"].attributes.title ?? ""}}</h3>
</div> </div>
<div class="col-auto flex-center" v-if="data.views['latest-releases'].data.length >= 10"> <div class="col-auto flex-center" v-if="data.views['latest-releases'].data.length >= 10">
<button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Latest Releases', 'latest-releases')">{{$root.getLz('term.seeAll')}}</button> <button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Latest Releases', 'latest-releases')">{{app.getLz('term.seeAll')}}</button>
</div> </div>
</div> </div>
<mediaitem-square :item="item" v-for="item in data.views['latest-releases'].data"> <mediaitem-square :item="item" v-for="item in data.views['latest-releases'].data">
@ -45,7 +45,7 @@
<h3>{{ data.views["top-releases"].attributes.title ?? ""}}</h3> <h3>{{ data.views["top-releases"].attributes.title ?? ""}}</h3>
</div> </div>
<div class="col-auto flex-center" v-if="data.views['top-releases'].data.length >= 10"> <div class="col-auto flex-center" v-if="data.views['top-releases'].data.length >= 10">
<button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Top Releases', 'top-releases')">{{$root.getLz('term.seeAll')}}</button> <button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Top Releases', 'top-releases')">{{app.getLz('term.seeAll')}}</button>
</div> </div>
</div> </div>
<mediaitem-square :item="item" v-for="item in data.views['top-releases'].data"> <mediaitem-square :item="item" v-for="item in data.views['top-releases'].data">
@ -57,7 +57,7 @@
<h3>Playlists</h3> <h3>Playlists</h3>
</div> </div>
<div class="col-auto flex-center" v-if="data.relationships.playlists.data.length >= 5"> <div class="col-auto flex-center" v-if="data.relationships.playlists.data.length >= 5">
<button class="cd-btn-seeall" @click="app.showCollection(data.relationships.playlists, data.attributes.name + ' - Playlists', 'curator')">{{$root.getLz('term.seeAll')}}</button> <button class="cd-btn-seeall" @click="app.showCollection(data.relationships.playlists, data.attributes.name + ' - Playlists', 'curator')">{{app.getLz('term.seeAll')}}</button>
</div> </div>
</div> </div>
<mediaitem-square :item="item" v-for="item in data.relationships.playlists.data.limit(5)"> <mediaitem-square :item="item" v-for="item in data.relationships.playlists.data.limit(5)">

View file

@ -20,7 +20,7 @@
<div class="col-auto flex-center" <div class="col-auto flex-center"
@click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))" @click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))"
v-if="search.results.song.data.length >= 6"> v-if="search.results.song.data.length >= 6">
<button class="cd-btn-seeall">{{$root.getLz('term.seeAll')}}</button> <button class="cd-btn-seeall">{{app.getLz('term.seeAll')}}</button>
</div> </div>
</div> </div>
<div> <div>
@ -61,7 +61,7 @@
</div> </div>
<div class="col-auto flex-center" v-if="search.resultsSocial.playlist.data.length >= 10"> <div class="col-auto flex-center" v-if="search.resultsSocial.playlist.data.length >= 10">
<button class="cd-btn-seeall" <button class="cd-btn-seeall"
@click="app.showCollection(search.resultsSocial.playlist, 'Shared Playlists', 'default')">{{$root.getLz('term.seeAll')}} @click="app.showCollection(search.resultsSocial.playlist, 'Shared Playlists', 'default')">{{app.getLz('term.seeAll')}}
</button> </button>
</div> </div>
</div> </div>
@ -75,7 +75,7 @@
</div> </div>
<div class="col-auto flex-center" v-if="search.resultsSocial.profile.data.length >= 10"> <div class="col-auto flex-center" v-if="search.resultsSocial.profile.data.length >= 10">
<button class="cd-btn-seeall" <button class="cd-btn-seeall"
@click="app.showCollection(search.resultsSocial.profile, 'People', 'default')">{{$root.getLz('term.seeAll')}} @click="app.showCollection(search.resultsSocial.profile, 'People', 'default')">{{app.getLz('term.seeAll')}}
</button> </button>
</div> </div>
</div> </div>

View file

@ -20,7 +20,7 @@
</div> </div>
<div class="md-option-line"> <div class="md-option-line">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.header.audio.seamlessTransition')}} {{$root.getLz('settings.option.audio.seamlessTransition')}}
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.audio.seamless_audio" switch/> <input type="checkbox" v-model="app.cfg.audio.seamless_audio" switch/>
@ -28,7 +28,7 @@
</div> </div>
<div class="md-option-line"> <div class="md-option-line">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.header.audio.enableAdvancedFunctionality')}} {{$root.getLz('settings.option.audio.enableAdvancedFunctionality')}}
<br> <br>
<small>{{$root.getLz('settings.header.audio.enableAdvancedFunctionality.description')}}</small> <small>{{$root.getLz('settings.header.audio.enableAdvancedFunctionality.description')}}</small>
</div> </div>
@ -467,7 +467,7 @@
</div> </div>
<div class="md-option-segment md-btn md-option-segment_auto"> <div class="md-option-segment md-btn md-option-segment_auto">
<label class="list-button list-element" id="lfmConnect" ref="lfmConnect" <label class="list-button list-element" id="lfmConnect" ref="lfmConnect"
onclick="app.LastFMAuthenticate()">Connect</label> onclick="app.LastFMAuthenticate()">{{$root.getLz('term.connect')}}</label>
</div> </div>
</div> </div>
<div class="md-option-line" v-show ="app.cfg.lastfm.enabled"> <div class="md-option-line" v-show ="app.cfg.lastfm.enabled">
@ -506,7 +506,7 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto" > <div class="md-option-segment md-option-segment_auto" >
<button class="md-btn" :class="{'md-btn-primary': app.cfg.advanced.experiments.includes('compactui')}" @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')"> <button class="md-btn" :class="{'md-btn-primary': app.cfg.advanced.experiments.includes('compactui')}" @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')">
{{app.cfg.advanced.experiments.includes('compactui') ? 'Enabled' : 'Disabled'}} {{app.cfg.advanced.experiments.includes('compactui') ? $root.getLz('term.enabled') : $root.getLz('term.disabled')}}
</button> </button>
</div> </div>
</div> </div>