Amaru8
GitHub
commit
fe12512138
24 changed files with 2294 additions and 2329 deletions
13
src/renderer/less/bootstrap.less
vendored
13
src/renderer/less/bootstrap.less
vendored
|
|
@ -991,6 +991,18 @@
|
|||
opacity : 0;
|
||||
}
|
||||
|
||||
.fade {
|
||||
transition: opacity 0.15s var(--appleEase);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.fade:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modal.fade .modal-dialog {
|
||||
transition: none;
|
||||
|
|
@ -2424,6 +2436,7 @@ fieldset:disabled .btn {
|
|||
-webkit-user-drag: none;
|
||||
// transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
|
||||
font-weight: 500;
|
||||
margin: 0px 4px;
|
||||
&:hover {
|
||||
// transition: transform .35s var(--appleEase), background-color 0s var(--appleEase);
|
||||
background-color: var(--hover);
|
||||
|
|
|
|||
|
|
@ -1861,4 +1861,107 @@ input[type=checkbox][switch]:checked:active::before {
|
|||
|
||||
.search-tab.active {
|
||||
background: var(--keyColor);
|
||||
}
|
||||
|
||||
// fancy pills
|
||||
.nav-pills {
|
||||
position : relative;
|
||||
.nav-link {
|
||||
transition: transform .3s var(--appleEase);
|
||||
position : relative;
|
||||
|
||||
|
||||
&:after {
|
||||
--dist: 1px;
|
||||
content : "";
|
||||
position : absolute;
|
||||
top : var(--dist);
|
||||
bottom : var(--dist);
|
||||
left : var(--dist);
|
||||
right : var(--dist);
|
||||
// width : 100%;
|
||||
// height : 100%;
|
||||
background-color: transparent;
|
||||
border-radius : 50px;
|
||||
z-index : -1;
|
||||
opacity : 0;
|
||||
transition: background-color .5s var(--appleEase), opacity 0.25s var(--appleEase), border-radius .32s var(--appleEase);
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
outline : none;
|
||||
transform : scale(1.1);
|
||||
// background: #eee;
|
||||
background : transparent;
|
||||
color : #333;
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
background-color: #eee;
|
||||
transition: background-color .25s var(--appleEase),
|
||||
border-radius .25s var(--appleEase),
|
||||
color .0s var(--appleEase),
|
||||
opacity 0.0s var(--appleEase);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
outline : none;
|
||||
transform : scale(1.1);
|
||||
// background: #eee;
|
||||
background : transparent;
|
||||
color : #333;
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.nav-link.active {
|
||||
outline : none;
|
||||
transform : scale(1.0);
|
||||
background: transparent;
|
||||
color: #eee;
|
||||
transform : scale(1.0);
|
||||
|
||||
&:after {
|
||||
background : rgb(200 200 200 / 15%);
|
||||
opacity : 1;
|
||||
transition: color 0s;
|
||||
// border-radius: 5px;
|
||||
--dist: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform : scale(1.1);
|
||||
z-index : 1;
|
||||
color : #333;
|
||||
|
||||
&:after {
|
||||
background: #eee;
|
||||
border-radius: inherit;
|
||||
--dist: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content : '';
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
bottom : 0;
|
||||
right : 0;
|
||||
background : rgb(200 200 200 / 10%);
|
||||
border-radius : 50px;
|
||||
z-index : 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -493,10 +493,51 @@
|
|||
//background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%);
|
||||
top : 0;
|
||||
padding-top : var(--navigationBarHeight);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.mediaContainer {
|
||||
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
|
||||
width: 260px;height:260px;
|
||||
}
|
||||
|
||||
.playlist-body {
|
||||
padding : var(--contentInnerPadding) 2em;
|
||||
margin-top: -75px;
|
||||
padding : 32px;
|
||||
// margin-top: -75px;
|
||||
overflow-y:overlay;
|
||||
height:100%;
|
||||
padding:0px;
|
||||
background-color: var(--color1);
|
||||
|
||||
&.scrollbody {
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
|
||||
.nav-link {
|
||||
text-transform:capitalize;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin:0px;
|
||||
.tab-pane {
|
||||
height: 100%;
|
||||
overflow-y: overlay;
|
||||
overflow-x:hidden;
|
||||
padding: var(--contentInnerPadding);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent, white 20px);
|
||||
.well {
|
||||
margin:0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.floating-header {
|
||||
|
|
@ -510,12 +551,15 @@
|
|||
background : rgba(0, 0, 0, 0.25);
|
||||
top : var(--navigationBarHeight);
|
||||
transition : opacity 0.1s var(--appleEase);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.playlist-display {
|
||||
padding : var(--contentInnerPadding);
|
||||
min-height: 300px;
|
||||
position : relative;
|
||||
box-shadow: 0px 4px 6px 3px rgb(0 0 0 / 10%);
|
||||
transition: min-height 0.5s ease-in-out;
|
||||
|
||||
.artworkContainer {
|
||||
position : absolute;
|
||||
|
|
@ -593,12 +637,14 @@
|
|||
}
|
||||
|
||||
.playlist-desc {
|
||||
transition: height .2s ease-in-out, opacity .2s ease-in-out;
|
||||
box-sizing : border-box;
|
||||
font-size : 14px;
|
||||
flex-shrink : unset;
|
||||
margin-right: 5px;
|
||||
max-height : 100px;
|
||||
position : relative;
|
||||
height : 4vh;
|
||||
|
||||
.content {
|
||||
height : 4vh;
|
||||
|
|
@ -695,6 +741,8 @@
|
|||
font-size: 0.9em;
|
||||
margin : 6px;
|
||||
opacity : 0.7;
|
||||
transition: height .2s ease-in-out, opacity .2s ease-in-out;
|
||||
height: 0.9em;
|
||||
}
|
||||
|
||||
&.inline-playlist {
|
||||
|
|
@ -739,6 +787,43 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pilldim {
|
||||
.nav-pills {
|
||||
width: max-content;
|
||||
margin: 0 auto;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.plmin {
|
||||
.playlist-display {
|
||||
transition: min-height 0.5s ease-in-out;
|
||||
min-height: 200px;
|
||||
|
||||
.playlistInfo {
|
||||
|
||||
}
|
||||
|
||||
.mediaContainer {
|
||||
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
|
||||
width: 128px!important;
|
||||
height: 128px!important;
|
||||
}
|
||||
|
||||
.playlist-time {
|
||||
transition: height .2s ease-in-out, opacity .2s ease-in-out;
|
||||
height: 0px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.playlist-desc {
|
||||
transition: height .2s ease-in-out, opacity .2s ease-in-out;
|
||||
height: 0px!important;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes playlistArtworkFadeIn {
|
||||
|
|
@ -1064,6 +1149,10 @@
|
|||
font-size : 2em;
|
||||
}
|
||||
|
||||
.settings-option-body-webview {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.settings-option-body {
|
||||
margin: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,12 @@
|
|||
const Events = {
|
||||
InitEvents() {
|
||||
const app = window.app
|
||||
// Key binds
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.keyCode === 70 && e.ctrlKey) {
|
||||
app.$refs.searchInput.focus()
|
||||
app.$refs.searchInput.select()
|
||||
}
|
||||
});
|
||||
|
||||
// add event listener for when window.location.hash changes
|
||||
window.addEventListener("hashchange", function () {
|
||||
app.appRoute(window.location.hash)
|
||||
});
|
||||
|
||||
// Key bind to unjam MusicKit in case it fails: CTRL+F10
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.ctrlKey && event.keyCode == 121) {
|
||||
try {
|
||||
app.mk._services.mediaItemPlayback._currentPlayer.stop()
|
||||
} catch (e) {
|
||||
}
|
||||
try {
|
||||
app.mk._services.mediaItemPlayback._currentPlayer.destroy()
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("mouseup", (e) => {
|
||||
if (e.button === 3) {
|
||||
e.preventDefault()
|
||||
|
|
@ -39,7 +17,50 @@ const Events = {
|
|||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
document.addEventListener('keydown', async function (event) {
|
||||
if (event.keyCode === 70 && event.ctrlKey) {
|
||||
app.$refs.searchInput.focus()
|
||||
app.$refs.searchInput.select()
|
||||
}
|
||||
// CTRL + R
|
||||
if (event.keyCode === 82 && event.ctrlKey) {
|
||||
event.preventDefault()
|
||||
bootbox.confirm("Reload Cider?", (res)=>{
|
||||
if(res) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
// CTRL + SHIFT + R
|
||||
if (event.keyCode === 82 && event.ctrlKey && event.shiftKey) {
|
||||
event.preventDefault()
|
||||
window.location.reload()
|
||||
}
|
||||
// CTRL + E
|
||||
if (event.keyCode === 69 && event.ctrlKey) {
|
||||
app.invokeDrawer('queue')
|
||||
}
|
||||
// CTRL+H
|
||||
if (event.keyCode === 72 && event.ctrlKey) {
|
||||
app.appRoute("home")
|
||||
}
|
||||
// CTRL+SHIFT+H
|
||||
if (event.ctrlKey && event.shiftKey && event.keyCode == 72) {
|
||||
let hist = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`, {
|
||||
l: app.mklang
|
||||
})
|
||||
app.showCollection(hist.data, app.getLz('term.history'))
|
||||
}
|
||||
if (event.ctrlKey && event.keyCode == 121) {
|
||||
try {
|
||||
app.mk._services.mediaItemPlayback._currentPlayer.stop()
|
||||
} catch (e) {
|
||||
}
|
||||
try {
|
||||
app.mk._services.mediaItemPlayback._currentPlayer.destroy()
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
if (event.ctrlKey && event.keyCode == 122) {
|
||||
try {
|
||||
ipcRenderer.send('detachDT', '')
|
||||
|
|
|
|||
|
|
@ -1,30 +1,44 @@
|
|||
const MusicKitTools = {
|
||||
async v3Continuous ({
|
||||
href,
|
||||
options = {},
|
||||
reqOptions = {},
|
||||
onProgress = () => {},
|
||||
onError = () => {},
|
||||
onSuccess = () => {}
|
||||
} = {}) {
|
||||
async v3Backend({
|
||||
route = "", getBody = {}, options = {}
|
||||
}) {
|
||||
return await (await ipcRenderer.invoke("mkv3", {
|
||||
token: MusicKit.getInstance().developerToken,
|
||||
route: route,
|
||||
mediaToken: MusicKit.getInstance().musicUserToken,
|
||||
GETBody: getBody
|
||||
}))
|
||||
},
|
||||
async v3Continuous({
|
||||
href,
|
||||
options = {},
|
||||
reqOptions = {},
|
||||
onProgress = () => {
|
||||
},
|
||||
onError = () => {
|
||||
},
|
||||
onSuccess = () => {
|
||||
}
|
||||
} = {}) {
|
||||
let returnData = []
|
||||
|
||||
async function sendReq(href, options) {
|
||||
const response = await app.mk.api.v3.music(href, options).catch(error => onError)
|
||||
|
||||
|
||||
returnData = returnData.concat(response.data.data)
|
||||
if(response.data.next) {
|
||||
if (response.data.next) {
|
||||
onProgress({
|
||||
response: response,
|
||||
total: returnData.length
|
||||
})
|
||||
try {
|
||||
await sendReq(response.data.next, options)
|
||||
}catch(e){
|
||||
} catch (e) {
|
||||
await sendReq(response.data.next, options)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
await sendReq(href, options)
|
||||
onSuccess(returnData)
|
||||
return returnData
|
||||
|
|
@ -39,4 +53,4 @@ const MusicKitTools = {
|
|||
}
|
||||
}
|
||||
|
||||
export { MusicKitTools }
|
||||
export {MusicKitTools}
|
||||
|
|
@ -1652,7 +1652,8 @@ const app = new Vue({
|
|||
params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright"
|
||||
}
|
||||
|
||||
if (this.cfg.advanced.experiments.includes('inline-playlists')) {
|
||||
// if (this.cfg.advanced.experiments.includes('inline-playlists')) {
|
||||
if(false) {
|
||||
let showModal = kind.toString().includes("album") || kind.toString().includes("playlist")
|
||||
if (app.page.includes("playlist") || app.page.includes("album")) {
|
||||
showModal = false
|
||||
|
|
|
|||
|
|
@ -1228,6 +1228,18 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
|
|||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
// Add Music Video Icons to Songs that are Music Videos
|
||||
div[data-type="library-music-videos"] .info-rect .title::before,
|
||||
div[data-type="musicVideo"] .info-rect .title::before {
|
||||
content: "";
|
||||
background-image: url(./assets/feather/video.svg);
|
||||
background-size: contain;
|
||||
filter:invert(0.6);
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-duration p {
|
||||
font-weight: 400;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<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-window">
|
||||
<div class="modal-header">
|
||||
|
|
@ -30,7 +29,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
|
@ -65,7 +63,7 @@
|
|||
},
|
||||
methods: {
|
||||
playlistSelect(playlist) {
|
||||
if(playlist.type != "library-playlist-folders") {
|
||||
if (playlist.type != "library-playlist-folders") {
|
||||
this.addToPlaylist(playlist.id)
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal">
|
||||
<vue-horizontal>
|
||||
<vue-horizontal ref="horizontal">
|
||||
<slot></slot>
|
||||
<mediaitem-square :key="item?.id ?? ''" :kind="kind" :item="item" v-for="item in items"></mediaitem-square>
|
||||
</vue-horizontal>
|
||||
|
|
@ -24,6 +24,9 @@
|
|||
app: this.$root,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.horizontal.refresh()
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
relateMediaItems: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default () {
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
|
@ -62,30 +62,33 @@
|
|||
this.icon = await this.$root.getSvgIcon("./assets/feather/folder.svg")
|
||||
}
|
||||
let playlistMap = this.$root.playlists.trackMapping
|
||||
if(this.relateMediaItems.length != 0) {
|
||||
if(playlistMap[this.relateMediaItems[0]].includes(this.item.id)) {
|
||||
this.hasRelatedMediaItems = true
|
||||
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) {
|
||||
if (this.item.type != "library-playlist-folders") {
|
||||
if (this.playlistSelect) {
|
||||
this.playlistSelect(this.item)
|
||||
}else{
|
||||
} else {
|
||||
this.openPlaylist(this.item)
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
this.getPlaylistChildren(this.item)
|
||||
}
|
||||
},
|
||||
rename() {
|
||||
this.renaming = false
|
||||
|
||||
if(this.item.type === "library-playlist-folders") {
|
||||
if (this.item.type === "library-playlist-folders") {
|
||||
this.$root.editPlaylistFolder(this.item.id, this.item.attributes.name)
|
||||
}else{
|
||||
} else {
|
||||
this.$root.editPlaylist(this.item.id, this.item.attributes.name)
|
||||
}
|
||||
},
|
||||
|
|
@ -93,7 +96,7 @@
|
|||
let self = this
|
||||
this.children = []
|
||||
this.children = this.$root.playlists.listing.filter(child => {
|
||||
if(child.parent == self.item.id) {
|
||||
if (child.parent == self.item.id) {
|
||||
return child
|
||||
}
|
||||
})
|
||||
|
|
@ -117,13 +120,13 @@
|
|||
|
||||
// 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) {
|
||||
if (playlist.id == item.id) {
|
||||
console.log(playlist)
|
||||
playlist.parent = sendTo.id
|
||||
|
||||
}
|
||||
})
|
||||
if(typeof this.$parent.getChildren == "function") {
|
||||
if (typeof this.$parent.getChildren == "function") {
|
||||
this.$parent.getChildren()
|
||||
console.log(this.$parent.children)
|
||||
}
|
||||
|
|
@ -142,14 +145,14 @@
|
|||
id: this.playlistRoot,
|
||||
type: "library-playlist-folders"
|
||||
})
|
||||
setTimeout(()=>{self.getChildren()}, 2000)
|
||||
setTimeout(() => { self.getChildren() }, 2000)
|
||||
}
|
||||
},
|
||||
"rename": {
|
||||
name: this.$root.getLz('action.rename'),
|
||||
action: () => {
|
||||
this.renaming = true
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
document.querySelector(".pl-rename-field").focus()
|
||||
document.querySelector(".pl-rename-field").select()
|
||||
}, 100)
|
||||
|
|
@ -171,7 +174,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
if(this.item.type === "library-playlist-folders") {
|
||||
if (this.item.type === "library-playlist-folders") {
|
||||
menu.items.addToFavorites.disabled = true
|
||||
}
|
||||
app.showMenuPanel(menu, event)
|
||||
|
|
@ -180,23 +183,23 @@
|
|||
evt.preventDefault();
|
||||
evt.dataTransfer.dropEffect = "move";
|
||||
},
|
||||
onDrop (evt) {
|
||||
onDrop(evt) {
|
||||
let data = JSON.parse(evt.dataTransfer.getData("text/plain"))
|
||||
evt.preventDefault();
|
||||
if(data.id == this.item.id) {
|
||||
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") {
|
||||
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) {
|
||||
startDrag(evt) {
|
||||
evt.dataTransfer.dropEffect = 'move'
|
||||
evt.dataTransfer.effectAllowed = 'move'
|
||||
evt.dataTransfer.setData('text/plain', JSON.stringify(this.item))
|
||||
|
|
@ -211,11 +214,11 @@
|
|||
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)) {
|
||||
if (!self.$root.playlists.listing.find(listing => listing.id == child.id)) {
|
||||
child.parent = self.item.id
|
||||
self.$root.playlists.listing.push(child)
|
||||
}
|
||||
|
|
@ -234,9 +237,9 @@
|
|||
})
|
||||
},
|
||||
isPlaylistSelected(item) {
|
||||
if(this.$root.showingPlaylist.id == item.id) {
|
||||
if (this.$root.showingPlaylist.id == item.id) {
|
||||
return ["active"]
|
||||
} else {
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="settings-option-body">
|
||||
<div class="md-option-line">
|
||||
<b-jumbotron :header="$root.getLz('settings.option.audio.audioLab')"
|
||||
lead="$root.getLz('settings.option.audio.audioLab.subheader')"></b-jumbotron>
|
||||
:lead="$root.getLz('settings.option.audio.audioLab.subheader')"></b-jumbotron>
|
||||
</div>
|
||||
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext === false">
|
||||
<div class="md-option-segment">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script type="text/x-template" id="cider-playlist">
|
||||
<div class="content-inner playlist-page" v-if="data != [] && data.attributes != null"
|
||||
<div class="content-inner playlist-page" :class="classes" v-if="data != [] && data.attributes != null"
|
||||
|
||||
:style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
|
||||
<template v-if="app.playlists.loadingState == 0">
|
||||
<div class="content-inner centered">
|
||||
|
|
@ -8,14 +9,15 @@
|
|||
</template>
|
||||
<template v-if="app.playlists.loadingState == 1">
|
||||
<div class="playlist-display"
|
||||
@mouseover.self="minClass(false)"
|
||||
:style="{
|
||||
'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : '',
|
||||
'--textColor': (data.attributes.artwork != null && data.attributes.artwork['textColor1'] != null) ? ('#' + data.attributes.artwork.textColor1) : ''
|
||||
}">
|
||||
<div class="playlistInfo">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div style="width: 260px;height:260px;">
|
||||
<div class="col-auto flex-center" @mouseover="minClass(false)">
|
||||
<div class="mediaContainer">
|
||||
<mediaitem-artwork
|
||||
shadow="large"
|
||||
:video-priority="true"
|
||||
|
|
@ -28,11 +30,11 @@
|
|||
<div class="col playlist-info">
|
||||
<template v-if="!editorialNotesExpanded">
|
||||
<div>
|
||||
<div class="playlist-name" @click="editPlaylistName()" v-show="!nameEditing">
|
||||
<div class="playlist-name" @mouseover="minClass(false)" @click="editPlaylistName()" v-show="!nameEditing">
|
||||
{{data.attributes ? (data.attributes.name ??
|
||||
(data.attributes.title ?? '') ?? '') : ''}}
|
||||
</div>
|
||||
<div class="playlist-name" v-show="nameEditing"><input type="text"
|
||||
<div class="playlist-name" @mouseover="minClass(false)" v-show="nameEditing"><input type="text"
|
||||
spellcheck="false"
|
||||
class="nameEdit"
|
||||
v-model="data.attributes.name"
|
||||
|
|
@ -50,11 +52,15 @@
|
|||
<artist-chip v-for="artist in data.relationships.artists?.data"
|
||||
:item="artist"></artist-chip>
|
||||
</template>
|
||||
<div class="playlist-desc" v-if="(data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)) || (data.attributes.editorialNotes && (data.attributes.editorialNotes.standard || data.attributes.editorialNotes.short))">
|
||||
<div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null" class="content"
|
||||
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short" @click="openInfoModal()"></div>
|
||||
<div v-else-if="(data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null" class="content"
|
||||
v-html="data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard"></div>
|
||||
<div class="playlist-desc"
|
||||
v-if="(data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)) || (data.attributes.editorialNotes && (data.attributes.editorialNotes.standard || data.attributes.editorialNotes.short))">
|
||||
<div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null"
|
||||
class="content"
|
||||
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"
|
||||
@click="openInfoModal()"></div>
|
||||
<div v-else-if="(data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null"
|
||||
class="content"
|
||||
v-html="data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard"></div>
|
||||
<!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
|
||||
@click="editorialNotesExpanded = !editorialNotesExpanded">
|
||||
{{app.getLz('term.showMore')}}
|
||||
|
|
@ -142,78 +148,93 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-body">
|
||||
<div class="well">
|
||||
<div style="width:100%">
|
||||
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
|
||||
v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
|
||||
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
|
||||
:showIndex="true"
|
||||
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
|
||||
:context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
|
||||
<div class="playlist-body scrollbody">
|
||||
|
||||
<b-tabs pills class="track-pills pilldim" align="center" content-class="mt-3">
|
||||
<b-tab :title="$root.getLz('term.tracks')">
|
||||
<div @wheel="minClass(true)" @scroll="minClass(true)">
|
||||
<div class="">
|
||||
<div style="width:100%" @click="minClass(true)">
|
||||
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
|
||||
v-model="data.relationships.tracks.data" @start="drag=true"
|
||||
@end="drag=false;put()">
|
||||
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
|
||||
:showIndex="true"
|
||||
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
|
||||
:context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div v-for="disc in nestedPlaylist">
|
||||
<div class="playlist-time">{{($root.getLz("term.discNumber") ?? "").replace("${discNumber}",disc.disc)}}</div>
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
|
||||
:showIndex="true"
|
||||
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
|
||||
:context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in disc.tracks"></mediaitem-list-item>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</draggable>
|
||||
<div class="playlist-time">{{($root.getLz("term.discNumber") ??
|
||||
"").replace("${discNumber}",disc.disc)}}
|
||||
</div>
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)"
|
||||
:index="index"
|
||||
:showIndex="true"
|
||||
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
|
||||
:context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in disc.tracks"></mediaitem-list-item>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
</div>
|
||||
<div class="friends-info" v-if="itemBadges.length != 0">
|
||||
<div class="well">
|
||||
<div class="badge-container">
|
||||
<div class="socialBadge" :title="`${badge.attributes.name} - @${badge.attributes.handle}`"
|
||||
v-for="badge in itemBadges">
|
||||
<mediaitem-artwork
|
||||
:url="badge.attributes.artwork.url"
|
||||
:size="60"></mediaitem-artwork>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="friends-info" v-if="itemBadges.length != 0">
|
||||
<div class="well">
|
||||
<div class="badge-container">
|
||||
<div class="socialBadge"
|
||||
:title="`${badge.attributes.name} - @${badge.attributes.handle}`"
|
||||
v-for="badge in itemBadges">
|
||||
<mediaitem-artwork
|
||||
:url="badge.attributes.artwork.url"
|
||||
:size="60"></mediaitem-artwork>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-time">
|
||||
{{getFormattedDate()}}
|
||||
</div>
|
||||
<div class="playlist-time total">{{app.getTotalTime()}}</div>
|
||||
<div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') "
|
||||
style="width: 50%;">
|
||||
{{data.attributes.copyright}}
|
||||
</div>
|
||||
<template
|
||||
v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0">
|
||||
<div class="playlist-time showExtended item-navigate" style="color:#fa586a; font-weight: bold"
|
||||
@click="app.routeView(data.relationships.catalog.data[0])">
|
||||
{{$root.getLz("action.showAlbum")}}
|
||||
</div>
|
||||
</template>
|
||||
<hr>
|
||||
<template v-if="typeof data.meta != 'undefined'">
|
||||
<div v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ data.views[view].attributes.title }}</h3>
|
||||
</div>
|
||||
<div class="playlist-time">
|
||||
{{getFormattedDate()}}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<mediaitem-scroller-horizontal
|
||||
:items="data.views[view].data"></mediaitem-scroller-horizontal>
|
||||
</div>
|
||||
<div class="playlist-time total">{{app.getTotalTime()}}</div>
|
||||
<div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') "
|
||||
style="width: 50%;">
|
||||
{{data.attributes.copyright}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template
|
||||
v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0">
|
||||
<div class="playlist-time showExtended item-navigate"
|
||||
style="color:#fa586a; font-weight: bold"
|
||||
@click="app.routeView(data.relationships.catalog.data[0])">
|
||||
{{$root.getLz("action.showAlbum")}}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</b-tab>
|
||||
<template v-if="typeof data.views != 'undefined'">
|
||||
<b-tab lazy :title="data.views[view].attributes.title" v-for="view in data.meta.views.order"
|
||||
v-if="data.views[view].data.length != 0">
|
||||
<div >
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ data.views[view].attributes.title }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<mediaitem-scroller-horizontal
|
||||
:items="data.views[view].data"></mediaitem-scroller-horizontal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
</template>
|
||||
|
||||
</b-tabs>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -238,6 +259,7 @@
|
|||
headerVisible: true,
|
||||
useArtistChip: false,
|
||||
nestedPlaylist: [],
|
||||
classes: [],
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
|
|
@ -254,31 +276,41 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
openInfoModal(){
|
||||
minClass(val) {
|
||||
if (val) {
|
||||
this.classes = ["plmin"]
|
||||
} else {
|
||||
this.classes = []
|
||||
}
|
||||
},
|
||||
openInfoModal() {
|
||||
app.moreinfodata = [];
|
||||
app.moreinfodata = {
|
||||
title : this.data?.attributes ? (this.data?.attributes?.name ??
|
||||
(this.data?.attributes?.title ?? '') ?? '') : '',
|
||||
title: this.data?.attributes ? (this.data?.attributes?.name ??
|
||||
(this.data?.attributes?.title ?? '') ?? '') : '',
|
||||
subtitle: this.data?.attributes?.artistName ?? '',
|
||||
content: ((this.data?.attributes?.editorialNotes != null ) ? (this.data?.attributes?.editorialNotes?.standard ?? (this.data?.attributes?.editorialNotes?.short ?? '') ) : (data.attributes?.description ? (this.data.attributes?.description?.standard ?? (this.data?.attributes?.description?.short ?? '')) : ''))
|
||||
content: ((this.data?.attributes?.editorialNotes != null) ? (this.data?.attributes?.editorialNotes?.standard ?? (this.data?.attributes?.editorialNotes?.short ?? '')) : (data.attributes?.description ? (this.data.attributes?.description?.standard ?? (this.data?.attributes?.description?.short ?? '')) : ''))
|
||||
}
|
||||
app.modals.moreInfo = true;
|
||||
},
|
||||
generateNestedPlaylist(){
|
||||
generateNestedPlaylist() {
|
||||
this.nestedPlaylist = [];
|
||||
if (this.data?.type?.includes("album")){
|
||||
console.log(this.data.relationships.tracks.data)
|
||||
let songlists = this.data.relationships.tracks.data;
|
||||
let discs = songlists.map(x => {return x.attributes.discNumber}).filter((item, i, ar) => ar.indexOf(item) === i);
|
||||
if (discs && discs.length > 1){
|
||||
for (disc of discs){
|
||||
let songs = songlists.filter(x => x.attributes.discNumber == disc);
|
||||
this.nestedPlaylist.push({disc: disc, tracks: songs})
|
||||
if (this.data?.type?.includes("album")) {
|
||||
console.log(this.data.relationships.tracks.data)
|
||||
let songlists = this.data.relationships.tracks.data;
|
||||
let discs = songlists.map(x => {
|
||||
return x.attributes.discNumber
|
||||
}).filter((item, i, ar) => ar.indexOf(item) === i);
|
||||
if (discs && discs.length > 1) {
|
||||
for (disc of discs) {
|
||||
let songs = songlists.filter(x => x.attributes.discNumber == disc);
|
||||
this.nestedPlaylist.push({disc: disc, tracks: songs})
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(this.nestedPlaylist)
|
||||
console.log(this.nestedPlaylist)
|
||||
|
||||
}},
|
||||
}
|
||||
},
|
||||
isHeaderVisible(visible) {
|
||||
this.headerVisible = visible
|
||||
},
|
||||
|
|
@ -330,7 +362,7 @@
|
|||
if (this.data.type.includes('albums')) {
|
||||
let date = this.data.attributes.releaseDate;
|
||||
if (date == null || date === "") return "";
|
||||
return `${this.data.relationships.tracks.data[0].attributes.genreNames[0]} · ${new Date(date).getFullYear()}`
|
||||
return `${this.data.relationships.tracks.data[0].attributes.genreNames[0]} · ${new Date(date).getFullYear()}`
|
||||
}
|
||||
},
|
||||
async isInLibrary() {
|
||||
|
|
@ -462,19 +494,70 @@
|
|||
}
|
||||
})
|
||||
},
|
||||
menu(event) {
|
||||
async menu(event) {
|
||||
let self = this
|
||||
let artistId = null
|
||||
|
||||
if(typeof this.data.relationships.artists != "undefined") {
|
||||
if (typeof this.data.relationships.artists != "undefined") {
|
||||
artistId = this.data.relationships.artists.data[0].id
|
||||
if(this.data.relationships.artists.data[0].type == "library-artists") {
|
||||
if (this.data.relationships.artists.data[0].type == "library-artists") {
|
||||
artistId = this.data.relationships.artists.data[0].relationships.catalog.data[0].id
|
||||
}
|
||||
}
|
||||
|
||||
let menuItems = {
|
||||
headerItems: [
|
||||
{
|
||||
"icon": "./assets/feather/heart.svg",
|
||||
"id": "love",
|
||||
"name": app.getLz('action.love'),
|
||||
"hidden": false,
|
||||
"disabled": true,
|
||||
"action": function () {
|
||||
app.love(self.data)
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/heart.svg",
|
||||
"id": "unlove",
|
||||
"active": true,
|
||||
"name": app.getLz('action.unlove'),
|
||||
"hidden": true,
|
||||
"action": function () {
|
||||
app.unlove(self.data)
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/thumbs-down.svg",
|
||||
"id": "dislike",
|
||||
"name": app.getLz('action.dislike'),
|
||||
"hidden": false,
|
||||
"disabled": true,
|
||||
"action": function () {
|
||||
app.dislike(self.data)
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/thumbs-down.svg",
|
||||
"id": "undo_dislike",
|
||||
"name": app.getLz('action.undoDislike'),
|
||||
"active": true,
|
||||
"hidden": true,
|
||||
"action": function () {
|
||||
app.unlove(self.data)
|
||||
}
|
||||
},
|
||||
],
|
||||
items: {
|
||||
"addToPlaylist": {
|
||||
name: app.getLz('action.addToPlaylist'),
|
||||
"icon": "./assets/feather/list.svg",
|
||||
action: () => {
|
||||
app.selectedMediaItems = []
|
||||
app.select_selectMediaItem(this.data.attributes.playParams.id ?? this.data.id, this.data.attributes.playParams.kind ?? this.data.type, 0, 0, this.data.attributes.playParams.isLibrary ?? false)
|
||||
app.promptAddToPlaylist()
|
||||
}
|
||||
},
|
||||
"share": {
|
||||
name: app.getLz('term.share'),
|
||||
icon: "./assets/feather/share.svg",
|
||||
|
|
@ -521,23 +604,36 @@
|
|||
},
|
||||
}
|
||||
}
|
||||
app.showMenuPanel(menuItems, event)
|
||||
|
||||
if(artistId != null) {
|
||||
if(app.followingArtist(artistId)){
|
||||
if (artistId != null) {
|
||||
if (app.followingArtist(artistId)) {
|
||||
menuItems.items.follow.hidden = true
|
||||
menuItems.items.unfollow.hidden = false
|
||||
} else {
|
||||
menuItems.items.follow.hidden = false
|
||||
menuItems.items.unfollow.hidden = true
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
menuItems.items.follow.hidden = true
|
||||
menuItems.items.unfollow.hidden = true
|
||||
}
|
||||
try {
|
||||
let rating = await app.getRating(self.data)
|
||||
if (rating == 0) {
|
||||
menuItems.headerItems.find(x => x.id == 'love').disabled = false
|
||||
menuItems.headerItems.find(x => x.id == 'dislike').disabled = false
|
||||
} else if (rating == 1) {
|
||||
menuItems.headerItems.find(x => x.id == 'unlove').hidden = false
|
||||
menuItems.headerItems.find(x => x.id == 'love').hidden = true
|
||||
} else if (rating == -1) {
|
||||
menuItems.headerItems.find(x => x.id == 'undo_dislike').hidden = false
|
||||
menuItems.headerItems.find(x => x.id == 'dislike').hidden = true
|
||||
}
|
||||
} catch (err) {
|
||||
}
|
||||
|
||||
|
||||
app.showMenuPanel(menuItems, event)
|
||||
|
||||
},
|
||||
getItemParent: function (data) {
|
||||
kind = data.attributes.playParams.kind;
|
||||
|
|
@ -625,4 +721,4 @@
|
|||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
|
@ -151,78 +151,85 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-body">
|
||||
<div class="well">
|
||||
<div style="width:100%">
|
||||
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
|
||||
v-model="data.relationships.tracks.data" @start="drag=true"
|
||||
@end="drag=false;put()">
|
||||
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
|
||||
:showIndex="true"
|
||||
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
|
||||
:context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div v-for="disc in nestedPlaylist">
|
||||
<div class="playlist-time">{{($root.getLz("term.discNumber") ?? "").replace("${discNumber}",disc.disc)}}</div>
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
|
||||
:showIndex="true"
|
||||
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
|
||||
:context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in disc.tracks"></mediaitem-list-item>
|
||||
</div>
|
||||
<div class="playlist-body scrollbody">
|
||||
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="friends-info" v-if="itemBadges.length != 0">
|
||||
<div class="well">
|
||||
<div class="badge-container">
|
||||
<div class="socialBadge"
|
||||
:title="`${badge.attributes.name} - @${badge.attributes.handle}`"
|
||||
v-for="badge in itemBadges">
|
||||
<mediaitem-artwork
|
||||
:url="badge.attributes.artwork.url"
|
||||
:size="60"></mediaitem-artwork>
|
||||
<b-tabs pills align="center" content-class="mt-3">
|
||||
<b-tab title="Tracks">
|
||||
<div class="">
|
||||
<div style="width:100%">
|
||||
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
|
||||
v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
|
||||
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
|
||||
:showIndex="true"
|
||||
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
|
||||
:context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div v-for="disc in nestedPlaylist">
|
||||
<div class="playlist-time">{{($root.getLz("term.discNumber") ?? "").replace("${discNumber}",disc.disc)}}</div>
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
|
||||
:showIndex="true"
|
||||
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
|
||||
:context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in disc.tracks"></mediaitem-list-item>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="friends-info" v-if="itemBadges.length != 0">
|
||||
<div class="well">
|
||||
<div class="badge-container">
|
||||
<div class="socialBadge" :title="`${badge.attributes.name} - @${badge.attributes.handle}`"
|
||||
v-for="badge in itemBadges">
|
||||
<mediaitem-artwork
|
||||
:url="badge.attributes.artwork.url"
|
||||
:size="60"></mediaitem-artwork>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-time">
|
||||
{{getFormattedDate()}}
|
||||
</div>
|
||||
<div class="playlist-time total">{{app.getTotalTime()}}</div>
|
||||
<div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') "
|
||||
style="width: 50%;">
|
||||
{{data.attributes.copyright}}
|
||||
</div>
|
||||
<template
|
||||
v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0">
|
||||
<div class="playlist-time showExtended item-navigate" style="color:#fa586a; font-weight: bold"
|
||||
@click="app.routeView(data.relationships.catalog.data[0])">
|
||||
{{$root.getLz("action.showAlbum")}}
|
||||
</div>
|
||||
</template>
|
||||
<hr>
|
||||
<template v-if="typeof data.meta != 'undefined'">
|
||||
<div v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
|
||||
<div class="row">
|
||||
<div class="playlist-time">
|
||||
{{getFormattedDate()}}
|
||||
</div>
|
||||
<div class="playlist-time total">{{app.getTotalTime()}}</div>
|
||||
<div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') "
|
||||
style="width: 50%;">
|
||||
{{data.attributes.copyright}}
|
||||
</div>
|
||||
<template
|
||||
v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0">
|
||||
<div class="playlist-time showExtended item-navigate" style="color:#fa586a; font-weight: bold"
|
||||
@click="app.routeView(data.relationships.catalog.data[0])">
|
||||
{{$root.getLz("action.showAlbum")}}
|
||||
</div>
|
||||
</template>
|
||||
<hr>
|
||||
</b-tab>
|
||||
<template v-if="typeof data.views != 'undefined'">
|
||||
<b-tab lazy :title="data.views[view].attributes.title" v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ data.views[view].attributes.title }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<mediaitem-scroller-horizontal
|
||||
:items="data.views[view].data"></mediaitem-scroller-horizontal>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<mediaitem-scroller-horizontal
|
||||
:items="data.views[view].data"></mediaitem-scroller-horizontal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</b-tab>
|
||||
</template>
|
||||
|
||||
</b-tabs>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -981,7 +981,7 @@
|
|||
{{$root.getLz('settings.option.experimental.inline_playlists')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<input type="checkbox" v-model="app.cfg.advanced.experiments.includes('inline-playlists')" @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')" switch/>
|
||||
<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/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1044,8 +1044,8 @@
|
|||
<div class="md-option-header">
|
||||
<span>{{$root.getLz('settings.header.connect')}}</span>
|
||||
</div>
|
||||
<div class="settings-option-body">
|
||||
<div class="md-option-line update-check">
|
||||
<div class="settings-option-body-webview">
|
||||
<div class="md-option-line update-check" v-if="app.cfg.connectUser == null">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.option.connect.link_account')}}
|
||||
<small>{{$root.getLz('settings.option.connect.link_account.description')}}</small>
|
||||
|
|
@ -1058,9 +1058,11 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="app.cfg.connectUser != null" style="display:inline-flex; width:100%;height: 100%">
|
||||
<iframe :src="`https://connect.cidercollective.dev/setSession/` + encodeURI(JSON.stringify(app.cfg.connectUser))" sandbox="allow-scripts allow-top-navigation allow-same-origin" width="100%" height="100%" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue