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

vue devtools in dev env

Browse source
This commit is contained in:
booploops 2021-12-25 03:06:11 -08:00
parent 8e4f219000
commit 98a70494a4
27 changed files with 12450 additions and 310 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/renderer/index.js
View file

@ -1,13 +1,5 @@
Vue.use(VueObserveVisibility);
Vue.component('sidebar-library-item', {
template: '#sidebar-library-item',
props: ['name', 'page', 'cd-click'],
methods: {}
});
// This is going to suck to code
var CiderContextMenu = {
Menu: function (event) {
@ -109,6 +101,7 @@ class NavigationEvent {
const app = new Vue({
el: "#app",
data: {
ipcRenderer: ipcRenderer,
cfg: ipcRenderer.sendSync("getStore"),
isDev: ipcRenderer.sendSync("is-dev"),
drawertest: false,
@ -269,6 +262,12 @@ const app = new Vue({
},
},
methods: {
navigateBack() {
history.back()
},
navigateForward() {
history.forward()
},
getHTMLStyle() {
switch(this.cfg.visual.window_transparency) {
case "acrylic":
@ -2265,6 +2264,17 @@ const app = new Vue({
}
})
Vue.component('sidebar-library-item', {
template: '#sidebar-library-item',
props: ['name', 'page', 'cd-click'],
data: function () {
return {
app: app
}
},
methods: {}
});
// Key binds
document.addEventListener('keydown', function (e) {
if (e.keyCode === 70 && e.ctrlKey) {
@ -2317,6 +2327,19 @@ document.addEventListener('musickitloaded', function () {
// });
// }
const getBase64FromUrl = async (url) => {
const data = await fetch(url);
const blob = await data.blob();
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = reader.result;
resolve(base64data);
}
});
}
function uuidv4() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)

11
src/renderer/style.less
View file

@ -2810,6 +2810,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
opacity: 0;
}
.wpfade_transform-enter-active,
.wpfade_transform-leave-active {
transition: opacity .1s var(--appleEase), transform .1s var(--appleEase);
}
.wpfade_transform-enter,
.wpfade_transform-leave-to {
transform: scale(0.90);
opacity: 0;
}
.fabfade-enter-active,
.fabfade-leave-active {
transition: transform .1s var(--appleEase), opacity .1s var(--appleEase);

3
src/renderer/views/components/add-to-playlist.ejs
View file

@ -39,7 +39,8 @@
return {
playlistSorted: [],
searchQuery: "",
focused: ""
focused: "",
app: this.$root,
}
},
props: {

30
src/renderer/views/components/animatedartwork-view.ejs
View file

@ -1,32 +1,32 @@
<script type="text/x-template" id="animatedartwork-view">
<template v-if="video">
<div class="animated" v-bind:vid="app.hashCode(video).toString()">
<video ref="video" class="animated-artwork-video" loop id="animated-artwork"></video>
</div>
</template>
<div class="animated" v-bind:vid="app.hashCode(video).toString()" v-if="video">
<video ref="video" class="animated-artwork-video" loop id="animated-artwork"></video>
</div>
</script>
<script>
Vue.component('animatedartwork-view', {
template: '#animatedartwork-view',
data: function () {
return {
app: this.$root,
hls: null,
}
},
props: {
video: {
type: String,
required: true
},
hls: {
type: Object,
default: ''
},
priority: {
type: Boolean,
default: false
}
},
async mounted() {
if(!this.priority && app.cfg.visual.animated_artwork == "limited") {
async mounted() {
if (!this.priority && app.cfg.visual.animated_artwork == "limited") {
return
}else if(app.cfg.visual.animated_artwork == "disabled") {
} else if (app.cfg.visual.animated_artwork == "disabled") {
return
}
if (this.video) {
@ -60,13 +60,13 @@
this.hls.attachMedia(this.$refs.video);
this.hls.loadSource(this.video);
this.hls.loadLevel = parseInt(app.cfg.visual.animated_artwork_qualityLevel || 1);
}
}
})
}
},
async beforeDestroy() {
if(this.hls) {
await this.hls.destroy();
if (this.hls) {
await this.hls.destroy();
this.hls = null
}
}

15
src/renderer/views/components/lyrics-view.ejs
View file

@ -2,7 +2,7 @@
<div ref="lyricsview" class="md-body lyric-body">
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
<template v-for="(lyric, index) in lyrics" v-if="lyric && lyric.line && lyric.line != 'lrcInstrumental'">
<h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)"
<h3 class="lyric-line" @click="seekTo(lyric.startTime)"
v-bind:line-index="index.toString()">
<template v-if="richlyrics && richlyrics != [] && richlyrics.length > 0">
<div class="richl" >
@ -22,7 +22,7 @@
</h3>
</template>
<template v-else>
<h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)"
<h3 class="lyric-line" @click="seekTo(lyric.startTime)"
:start="lyric.startTime"
:end="lyric.endTime" v-bind:line-index="index.toString()">
<div class="lyricWaiting">
@ -35,7 +35,7 @@
</template>
<template v-else>
<div class="no-lyrics">
Loading... / Lyrics not found./ Instrumental.
Loading... / Lyrics not found./ Instrumental.</div>
</template>
</div>
</script>
@ -43,7 +43,13 @@
Vue.component('lyrics-view', {
template: '#lyrics-view',
props: ["time", "lyrics", "richlyrics", "translation", "onindex"],
data: function () {
return {
app: this.$root,
}
},
watch: {
time: function () {
if (app.lyricon && app.drawer.open && this.$refs.lyricsview) {
let currentLine = this.$refs.lyricsview.querySelector(`.lyric-line.active`)
@ -109,6 +115,9 @@
},
methods: {
seekTo(startTime) {
if(startTime != 9999999) this.app.seekTo(startTime, false);
},
getActiveLyric() {
// console.log(this.time);
const delayfix = 0.1

28
src/renderer/views/components/mediaitem-artwork.ejs
View file

@ -1,22 +1,13 @@
<script type="text/x-template" id="mediaitem-artwork">
<template v-if="type == 'artists'">
<div class="mediaitem-artwork rounded" :key="url" :style="getStyle()">
<img :src="app.getMediaItemArtwork(url, size, width)"
decoding="async"
class="mediaitem-artwork--img">
<div class="mediaitem-artwork" :class="{'rounded': (type == 'artists')}" :key="url" :style="getStyle()"
v-observe-visibility="{callback: visibilityChanged}">
<img :src="app.getMediaItemArtwork(url, size, width)"
decoding="async"
class="mediaitem-artwork--img">
<div v-if="video && isVisible && getVideoPriority()" class="animatedartwork-view-box">
<animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>
</div>
</template>
<template v-else>
<div class="mediaitem-artwork" :key="url" :style="getStyle()"
v-observe-visibility="{callback: visibilityChanged}">
<img :src="app.getMediaItemArtwork(url, size, width)"
decoding="async"
class="mediaitem-artwork--img">
<div v-if="video && isVisible && getVideoPriority()" class="animatedartwork-view-box">
<animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>
</div>
</div>
</template>
</div>
</script>
<script>
@ -28,7 +19,7 @@
default: '120'
},
width: {
type: String,
type: Number,
required: false
},
url: {
@ -54,6 +45,7 @@
},
data: function () {
return {
app:this.$root,
isVisible: false,
style: {
"box-shadow": ""

5
src/renderer/views/components/mediaitem-hrect.ejs
View file

@ -27,6 +27,11 @@
Vue.component('mediaitem-hrect', {
template: '#mediaitem-hrect',
props: ['item'],
data: function () {
return {
app: this.$root,
}
},
methods: {}
});
</script>

141
src/renderer/views/components/mediaitem-list-item.ejs
View file

@ -1,67 +1,66 @@
<script type="text/x-template" id="mediaitem-list-item">
<template>
<div v-observe-visibility="{callback: visibilityChanged}"
@contextmenu="contextMenu"
@click="select"
:data-id="item.attributes.playParams.id ?? item.id"
:data-type="getDataType()"
:data-index="index"
:data-guid="guid"
:data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
class="cd-mediaitem-list-item"
:class="{'mediaitem-selected': app.select_hasMediaItem(guid)}">
<template v-if="isVisible">
<div class="isLibrary" v-if="showLibraryStatus == true">
<button @click="addToLibrary()"
v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤
</button>
<button v-else @click="removeFromLibrary()" >❤️</button>
<div v-observe-visibility="{callback: visibilityChanged}"
@contextmenu="contextMenu"
@click="select"
:data-id="item.attributes.playParams.id ?? item.id"
:data-type="getDataType()"
:data-index="index"
:data-guid="guid"
:data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
class="cd-mediaitem-list-item"
:class="{'mediaitem-selected': app.select_hasMediaItem(guid)}">
<template v-if="isVisible">
<div class="isLibrary" v-if="showLibraryStatus == true">
<button @click="addToLibrary()"
v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤
</button>
<button v-else @click="removeFromLibrary()">❤️</button>
</div>
<div class="artwork" v-if="showArtwork == true">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="50"
:type="item.type"></mediaitem-artwork>
<button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button>
</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-if="showArtwork == true">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="50"
:type="item.type"></mediaitem-artwork>
<button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button>
</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="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
<template v-if="item.attributes.artistName">
<div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
<template v-if="item.attributes.artistName">
<div class="artist item-navigate text-overflow-elipsis"
@click="app.searchAndNavigate(item,'artist')">
{{ item.attributes.artistName }}
</div>
<template v-if="item.attributes.albumName">&nbsp;-&nbsp;</template>
<template v-if="item.attributes.albumName">
<div class="artist item-navigate text-overflow-elipsis"
@click="app.searchAndNavigate(item,'artist')">
{{ item.attributes.artistName }}
@click="app.searchAndNavigate(item,'album')">
{{ item.attributes.albumName }}
</div>
<template v-if="item.attributes.albumName">&nbsp;-&nbsp;</template>
<template v-if="item.attributes.albumName">
<div class="artist item-navigate text-overflow-elipsis"
@click="app.searchAndNavigate(item,'album')">
{{ item.attributes.albumName }}
</div>
</template>
</template>
</div>
</template>
</div>
<div class="content-rating" v-if="item.attributes.contentRating" @dblclick="app.routeView(item)">
{{ item.attributes.contentRating }}
</div>
<div class="content-rating" v-if="item.attributes.contentRating" @dblclick="app.routeView(item)">
{{ item.attributes.contentRating }}
</div>
<template v-if="showMetaData == true" @dblclick="app.routeView(item)">
<div class="metainfo">
{{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString()
: "" }}
</div>
<template v-if="showMetaData == true" @dblclick="app.routeView(item)">
<div class="metainfo">
{{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString()
: "" }}
</div>
<div class="metainfo">
{{ item.attributes.genreNames[0] ?? "" }}
</div>
</template>
<div class="duration" v-if="showDuration" @dblclick="app.routeView(item)">
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
<div class="metainfo">
{{ item.attributes.genreNames[0] ?? "" }}
</div>
</template>
</div>
</template>
<div class="duration" v-if="showDuration" @dblclick="app.routeView(item)">
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
</div>
</template>
</div>
</script>
<script>
@ -71,13 +70,14 @@
return {
isVisible: false,
addedToLibrary: false,
guid: uuidv4()
guid: uuidv4(),
app: this.$root
}
},
props: {
'item': {type: Object, required: true},
'parent': {type: Object, required: false},
'index': {type: Object, required: false, default: -1},
'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},
@ -85,10 +85,15 @@
'contextExt': {type: Object, required: false},
},
methods: {
msToMinSec(ms) {
var minutes = Math.floor(ms / 60000);
var seconds = ((ms % 60000) / 1000).toFixed(0);
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
},
getDataType() {
if(this.item.attributes.playParams.isLibrary) {
if (this.item.attributes.playParams.isLibrary) {
return this.item.type
}else{
} else {
return this.item.attributes.playParams.kind
}
},
@ -100,7 +105,7 @@
if (e.shiftKey) {
if (this.index != -1) {
if(app.selectedMediaItems.length == 0) {
if (app.selectedMediaItems.length == 0) {
app.select_selectMediaItem(item_id, this.getDataType(), this.index, this.guid, isLibrary)
}
let allMediaItems = document.querySelectorAll(".cd-mediaitem-list-item[data-index]")
@ -269,12 +274,12 @@
]
}
}
if(this.contextExt) {
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) {
if (this.contextExt.normal) {
menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
}
if(this.contextExt.multiple) {
if (this.contextExt.multiple) {
menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
}
}
@ -297,12 +302,12 @@
},
async removeFromLibrary() {
let item = this.item
let params = {"fields[songs]": "inLibrary","fields[albums]": "inLibrary","relate" : "library"}
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);
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) {
@ -319,7 +324,7 @@
let item = this.item
let parent = this.parent
let childIndex = this.index
console.log(item,parent,childIndex)
console.log(item, parent, childIndex)
if (parent != null && childIndex != null) {
app.queueParentandplayChild(parent, childIndex, item);
} else {

67
src/renderer/views/components/mediaitem-mvview-sp.ejs
View file

@ -1,63 +1,66 @@
<script type="text/x-template" id="mediaitem-mvview-sp">
<template>
<div style="position: relative; display: inline-flex;">
<div @click.self='app.routeView(item)'
class="cd-mediaitem-mvview">
<div style="height: 70px; min-height: 70px; max-height: 70px; width: 100%; margin-left: 5px;">
<div class="title-browse-sp bold " @click='app.routeView(item)' style = "color: darkgrey;">
{{ badge ? badge.designBadge : ''}}
</div>
<div class="title-browse-sp " >
{{ (badge != null && badge.designTag != null) ? badge.designTag : (item.attributes.name ?? '') }}
</div>
<div class="title-browse-sp semibold" style = "color: darkgrey;" >
{{ (item.attributes.artistName ?? (item.attributes.curatorName ?? '')) }}
</div>
<div style="position: relative; display: inline-flex;">
<div @click.self='app.routeView(item)'
class="cd-mediaitem-mvview">
<div style="height: 70px; min-height: 70px; max-height: 70px; width: 100%; margin-left: 5px;">
<div class="title-browse-sp bold " @click='app.routeView(item)' style="color: darkgrey;">
{{ badge ? badge.designBadge : ''}}
</div>
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
:size="516" :width="900"
></mediaitem-artwork>
<div class="title-browse-sp ">
{{ (badge != null && badge.designTag != null) ? badge.designTag : (item.attributes.name ?? '') }}
</div>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'>
<div class="button" style="
<div class="title-browse-sp semibold" style="color: darkgrey;">
{{ (item.attributes.artistName ?? (item.attributes.curatorName ?? '')) }}
</div>
</div>
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
:size="516" :width="900"
></mediaitem-artwork>
</div>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'>
<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')) ? {'margin': '205px',
: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',
height: '30px',} :
{margin: '35px', 'margin-left': '95px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
<%- include("../svg/play.svg") %>
</div>
</div>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)' tabindex="0">
<div class="button" style="
</div>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)' tabindex="0">
<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')) ? {'margin': '205px',
: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',
height: '30px',} :
{margin: '35px', 'margin-left': '95px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
<%- include("../svg/play.svg") %>
</div>
</div>
</template>
</div>
</script>
<script>
Vue.component('mediaitem-mvview-sp', {
template: '#mediaitem-mvview-sp',
props: ['item', "imagesize","badge"],
props: ['item', "imagesize", "badge"],
data: function () {
return {
app: this.$root,
}
},
methods: {}
});
</script>

5
src/renderer/views/components/mediaitem-mvview.ejs
View file

@ -54,6 +54,11 @@
Vue.component('mediaitem-mvview', {
template: '#mediaitem-mvview',
props: ['item', "imagesize"],
data: function () {
return {
app: this.$root,
}
},
methods: {}
});
</script>

15
src/renderer/views/components/mediaitem-scroller-horizontal-large.ejs
View file

@ -1,10 +1,8 @@
<script type="text/x-template" id="mediaitem-scroller-horizontal-large">
<template>
<div class="cd-hmedia-scroller">
<mediaitem-square :item="item"
v-for="item in items"></mediaitem-square>
</div>
</template>
<div class="cd-hmedia-scroller">
<mediaitem-square :item="item"
v-for="item in items"></mediaitem-square>
</div>
</script>
@ -12,6 +10,11 @@
Vue.component('mediaitem-scroller-horizontal-large', {
template: '#mediaitem-scroller-horizontal-large',
props: ['items'],
data: function () {
return {
app: this.$root,
}
},
methods: {}
});
</script>

37
src/renderer/views/components/mediaitem-scroller-horizontal-mvview.ejs
View file

@ -1,16 +1,18 @@
<script type="text/x-template" id="mediaitem-scroller-horizontal-mvview">
<template>
<div class="cd-hmedia-scroller">
<template v-if="browsesp">
<mediaitem-mvview-sp :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
:badge="item.attributes" v-for="item in items"></mediaitem-mvview-sp>
</template>
<template v-else>
<mediaitem-square :kind="kind" size="600" :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
v-for="item in items"></mediaitem-square>
</template>
</div>
</template>
<div class="cd-hmedia-scroller">
<template v-if="browsesp">
<mediaitem-mvview-sp
:item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
:imagesize="imagesize"
:badge="item.attributes" v-for="item in items"></mediaitem-mvview-sp>
</template>
<template v-else>
<mediaitem-square :kind="kind" size="600"
:item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
:imagesize="imagesize"
v-for="item in items"></mediaitem-square>
</template>
</div>
</script>
@ -23,12 +25,12 @@
required: true
},
imagesize: {
type: String,
required: true
type: Number,
required: false
},
browsesp: {
type: Boolean,
required: true
required: false
},
kind: {
type: String,
@ -36,6 +38,11 @@
default: ""
}
},
data: function () {
return {
app: this.$root,
}
},
methods: {}
});
</script>

5
src/renderer/views/components/mediaitem-scroller-horizontal-sp.ejs
View file

@ -11,6 +11,11 @@
Vue.component('mediaitem-scroller-horizontal-sp', {
template: '#mediaitem-scroller-horizontal-sp',
props: ['items'],
data: function () {
return {
app: this.$root,
}
},
methods: {}
});
</script>

5
src/renderer/views/components/mediaitem-scroller-horizontal.ejs
View file

@ -11,6 +11,11 @@
Vue.component('mediaitem-scroller-horizontal', {
template: '#mediaitem-scroller-horizontal',
props: ['items'],
data: function () {
return {
app: this.$root,
}
},
methods: {}
});
</script>

5
src/renderer/views/components/mediaitem-square-large.ejs
View file

@ -74,6 +74,11 @@
Vue.component('mediaitem-square-large', {
template: '#mediaitem-square-large',
props: ['item'],
data: function () {
return {
app: this.$root,
}
},
methods: {
clickContext() {
var evt = document.createEvent('MouseEvent');

124
src/renderer/views/components/mediaitem-square-sp.ejs
View file

@ -1,101 +1,114 @@
<script type="text/x-template" id="mediaitem-square-sp">
<template>
<div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu">
<div @click.self='app.routeView(item)'
class="cd-mediaitem-square-sp" ref="main2" :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="300"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
:type="item.type"></mediaitem-artwork>
</div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
<div class="button" style="
<div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu">
<div @click.self='app.routeView(item)'
class="cd-mediaitem-square-sp" ref="main2"
:style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="300"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
:type="item.type"></mediaitem-artwork>
</div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
<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')) ? {'margin': '153px','position': 'absolute','margin-left': '153px',
: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': '153px','position': 'absolute','margin-left': '153px',
width: '30px',
height: '30px',} :
{margin: '35px',display:'none',
width: '120px',
height: '120px',}]" @click="clickContext()" >
<%- include("../svg/more.svg") %>
</div>
<div class="button" style="
height: '120px',}]" @click="clickContext()">
<%- include("../svg/more.svg") %>
</div>
<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')) ? {'position': 'absolute','margin': '153px',
: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')) ? {'position': 'absolute','margin': '153px',
width: '30px', 'margin-left': '8px',
height: '30px',} :
{margin: '35px','position': 'absolute',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
<%- include("../svg/play.svg") %>
</div>
<div class="title text-overflow-elipsis"
:style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" style="font-weight: 600">
{{ item.attributes.name }}
</div>
<div class="subtitle text-overflow-elipsis "
:class="{'item-navigate': ((item.attributes.editorialNotes == null) && item.attributes.artistName)}"
:style="{ 'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : '' ,'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;"
@click="if((item.attributes.editorialNotes == null) && item.attributes.artistName)app.searchAndNavigate(item,'artist')"
>
{{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
:(item.attributes.artistName ?? '') }}
</div>
</div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)' tabindex="0">
<div class="button" style="
<div class="title text-overflow-elipsis"
:style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
style="font-weight: 600">
{{ item.attributes.name }}
</div>
<div class="subtitle text-overflow-elipsis "
:class="{'item-navigate': ((item.attributes.editorialNotes == null) && item.attributes.artistName)}"
:style="{ 'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : '' ,'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;"
@click="subtitleSearchNavigate(item)"
>
{{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
:(item.attributes.artistName ?? '') }}
</div>
</div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)' tabindex="0">
<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')) ? {'margin': '153px','position': 'absolute','margin-left': '153px',
: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': '153px','position': 'absolute','margin-left': '153px',
width: '30px',
height: '30px',} :
{margin: '35px','position': 'absolute', display: 'none',
width: '120px',
height: '120px',}]" @click="clickContext()">
<%- include("../svg/more.svg") %>
</div>
<div class="button" style="
<%- include("../svg/more.svg") %>
</div>
<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')) ? {'position': 'absolute','margin': '153px',
: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')) ? {'position': 'absolute','margin': '153px',
width: '30px', 'margin-left': '8px',
height: '30px',} :
{margin: '35px','position': 'absolute',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)" >
<%- include("../svg/play.svg") %>
</div>
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
</div>
</template>
</div>
</script>
<script>
Vue.component('mediaitem-square-sp', {
template: '#mediaitem-square-sp',
props: ['item'],
methods: { clickContext() {
var evt = document.createEvent('MouseEvent');
data: function () {
return {
app: this.$root,
}
},
methods: {
subtitleSearchNavigate(item) {
if((item.attributes.editorialNotes == null) && item.attributes.artistName)app.searchAndNavigate(item,'artist')
},
clickContext() {
var evt = document.createEvent('MouseEvent');
var rect = this.$refs.main2.getBoundingClientRect();
evt.initMouseEvent(
"contextmenu",
true /* bubble */, true /* cancelable */,
window, null,
0, 0, rect.x + 100, rect.y +100, /* coordinates */
0, 0, rect.x + 100, rect.y + 100, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/, null
);
this.$refs.main.dispatchEvent(evt);
}
,contextMenu(event) {
if (!event){event = this.$refs.main} else {console.log(event)}
}
, contextMenu(event) {
if (!event) {
event = this.$refs.main
} else {
console.log(event)
}
let self = this
let useMenu = "normal"
if (app.selectedMediaItems.length <= 1) {
@ -152,7 +165,7 @@
},
normal: {
items: [
{
"name": "Play Next",
"action": function () {
@ -169,11 +182,12 @@
app.selectedMediaItems = []
}
},
]
}
}
CiderContextMenu.Create(event, menus[useMenu])
},}
},
}
});
</script>

73
src/renderer/views/components/mediaitem-square.ejs
View file

@ -1,30 +1,32 @@
<script type="text/x-template" id="mediaitem-square">
<template>
<div tabindex="0"
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
<template v-if="isVisible">
<div class="artwork-container">
<div class="artwork" @click='app.routeView(item)'>
<mediaitem-artwork
:url="getArtworkUrl()"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
:size="size"
shadow="subtle"
:type="item.type"></mediaitem-artwork>
</div>
<button class="menu-btn" v-if="!nomenu.includes(item.type)" @click="contextMenu"><%- include("../svg/more.svg") %></button>
<button class="play-btn" v-if="!noplay.includes(item.type)" @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
</div>
<div class="title item-navigate text-overflow-elipsis" @click.self='app.routeView(item)'>
{{ item.attributes.name }}
</div>
<div class="subtitle item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')" v-if="item.attributes.artistName">
{{ item.attributes.artistName }}
</div>
<div class="subtitle" v-else>&nbsp;</div>
</template>
</div>
</template>
<div tabindex="0"
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu"
v-observe-visibility="{callback: visibilityChanged}">
<template v-if="isVisible">
<div class="artwork-container">
<div class="artwork" @click='app.routeView(item)'>
<mediaitem-artwork
:url="getArtworkUrl()"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
:size="size"
shadow="subtle"
:type="item.type"></mediaitem-artwork>
</div>
<button class="menu-btn" v-if="!nomenu.includes(item.type)"
@click="contextMenu"><%- include("../svg/more.svg") %></button>
<button class="play-btn" v-if="!noplay.includes(item.type)"
@click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
</div>
<div class="title item-navigate text-overflow-elipsis" @click.self='app.routeView(item)'>
{{ item.attributes.name }}
</div>
<div class="subtitle item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')"
v-if="item.attributes.artistName">
{{ item.attributes.artistName }}
</div>
<div class="subtitle" v-else>&nbsp;</div>
</template>
</div>
</script>
<script>
@ -50,7 +52,8 @@
addedToLibrary: false,
guid: uuidv4(),
noplay: ["apple-curators"],
nomenu: ["artists", "stations", "apple-curators"]
nomenu: ["artists", "stations", "apple-curators"],
app: this.$root
}
},
methods: {
@ -86,10 +89,14 @@
this.isVisible = isVisible
},
contextMenu(event) {
if(this.nomenu.includes(this.item.type)) {
if (this.nomenu.includes(this.item.type)) {
return
}
if (!event) { event = this.$refs.main } else { console.log(event) }
if (!event) {
event = this.$refs.main
} else {
console.log(event)
}
let self = this
let useMenu = "normal"
if (app.selectedMediaItems.length <= 1) {
@ -115,7 +122,7 @@
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playNext({ [kind + "s"]: itemsToPlay[kind] })
app.mk.playNext({[kind + "s"]: itemsToPlay[kind]})
}
}
console.log(itemsToPlay)
@ -136,7 +143,7 @@
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
app.mk.playLater({[kind + "s"]: itemsToPlay[kind]})
}
}
app.selectedMediaItems = []
@ -149,7 +156,7 @@
{
"name": "Play Next",
"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})
app.mk.queue._reindex()
app.selectedMediaItems = []
}
@ -157,7 +164,7 @@
{
"name": "Play Later",
"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})
app.mk.queue._reindex()
app.selectedMediaItems = []
}

3
src/renderer/views/components/queue.ejs
View file

@ -48,7 +48,8 @@
queuePosition: 0,
queueItems: [],
selected: -1,
selectedItems: []
selectedItems: [],
app: this.$root
}
},
mounted() {

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

@ -17,7 +17,7 @@
<title>Cider</title>
<link rel="stylesheet/less" type="text/css" href="style.less"/>
<script src="less.js"></script>
<script src="vue.js"></script>
<script src="<%- (env.dev ? "vue.js" : "vue.dev.js") %>"></script>
<script src="sortable.min.js"></script>
<script src="vue-observe-visibility.min.js"></script>
<script src="sortable.min.js"></script>
@ -71,10 +71,10 @@
{{ mk.nowPlayingItem["attributes"]["name"] }}
</div>
<div class="song-artist " style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
<div class="item-navigate song-artist" style="display: inline-block;" @click="app.getNowPlayingItemDetailed(`artist`)">
<div class="item-navigate song-artist" style="display: inline-block;" @click="getNowPlayingItemDetailed(`artist`)">
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div>
<div class="song-artist item-navigate" style="display: inline-block;" @click="app.getNowPlayingItemDetailed('album')">
<div class="song-artist item-navigate" style="display: inline-block;" @click="getNowPlayingItemDetailed('album')">
{{ (mk.nowPlayingItem["attributes"]["albumName"]) ? (" - " + mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</div>
</div>
@ -177,7 +177,7 @@
@contextmenu="playlistContextMenu($event, item.id)"
@dragover="()=>{}"
:href="item.href"
@click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
@click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(page.substring(9))'>
{{ item.attributes.name }}
</button>
</div>
@ -261,8 +261,8 @@
</div>
<div id="app-content">
<div id="navigation-bar">
<button class="nav-item" @click="history.back()"><%- include('svg/chevron-left.svg') %></button>
<button class="nav-item" @click="history.forward()"><%- include('svg/chevron-right.svg') %></button>
<button class="nav-item" @click="navigateBack()"><%- include('svg/chevron-left.svg') %></button>
<button class="nav-item" @click="navigateForward()"><%- include('svg/chevron-right.svg') %></button>
</div>
<!-- Artist Page -->
<transition name="wpfade">
@ -304,7 +304,7 @@
</template>
</transition>
<!-- Browse -->
<transition v-on:enter="app.getBrowsePage(); console.log('browse')" name="wpfade">
<transition v-on:enter="getBrowsePage(); console.log('browse')" name="wpfade">
<template v-if="page == 'browse'">
<!-- <div class="content-inner">
@ -426,14 +426,14 @@
>
</transition>
<transition name="wpfade">
<div class="bg-artwork--placeholder" v-else></div>
<div class="bg-artwork--placeholder"></div>
</transition>
<transition name="modal">
<add-to-playlist :playlists="playlists.listing" v-if="modals.addToPlaylist"></add-to-playlist>
</transition>
<div id="apple-music-video-container">
<div id="apple-music-video-player-controls">
<div id="player-exit" title="Close" onclick="app.exitMV()">
<div id="player-exit" title="Close" onclick="exitMV()">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
aria-role="presentation" focusable="false">
<path
@ -458,7 +458,6 @@
</div>
</div>
<!-- Media Item Artwork-->
<%- include("components/mediaitem-artwork"); %>
<!-- Browse -->
@ -495,7 +494,7 @@
<!-- Sidebar Item -->
<script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)" @click="app.appRoute(page)">
:class="$parent.getSidebarItemClass(page)" @click="$root.appRoute(page)">
{{ name }}
</button>
</script>
@ -531,7 +530,6 @@
<!-- Lyrics View -->
<%- include('components/lyrics-view') %>
<script src="musickit.js?v=1"></script>
<script>
if (typeof MusicKit == 'undefined') {
document.write(unescape("%3Cscript src='https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js' type='text/javascript'%3E%3C/script%3E"));

3
src/renderer/views/pages/artist.ejs
View file

@ -128,7 +128,8 @@
props: ['data'],
data: function () {
return {
topSongsExpanded: false
topSongsExpanded: false,
app: this.$root
}
},
methods: {

7
src/renderer/views/pages/browse.ejs
View file

@ -36,6 +36,11 @@
<script>
Vue.component('cider-browse', {
template: "#cider-browse",
props: ["data"]
props: ["data"],
data: function () {
return {
app: this.$root
}
},
})
</script>

93
src/renderer/views/pages/cider-playlist.ejs
View file

@ -1,10 +1,10 @@
<script type="text/x-template" id="cider-playlist">
<template>
<div class="content-inner playlist-page" 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">Loading...</div>
</template>
<template v-if="app.playlists.loadingState == 1">
<div class="content-inner playlist-page" 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">Loading...</div>
</template>
<template v-if="app.playlists.loadingState == 1">
<div class="playlist-display row"
:style="{
background: (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : '',
@ -23,11 +23,19 @@
<div class="col playlist-info">
<template v-if="!editorialNotesExpanded">
<div>
<div class="playlist-name" @click="editPlaylistName()" v-show="!nameEditing">{{data.attributes ? (data.attributes.name ??
<div class="playlist-name" @click="editPlaylistName()" v-show="!nameEditing">
{{data.attributes ? (data.attributes.name ??
(data.attributes.title ?? '') ?? '') : ''}}
</div>
<div class="playlist-name" v-show="nameEditing"><input type="text" spellcheck="false" class="nameEdit" v-model="data.attributes.name" @blur="editPlaylist" @change="editPlaylist" @keydown.enter="editPlaylist"/></div>
<div class="playlist-artist item-navigate" v-if="data.attributes && data.attributes.artistName" @click="if(data.attributes && data.attributes.artistName){ app.searchAndNavigate(data,'artist')}">
<div class="playlist-name" v-show="nameEditing"><input type="text" spellcheck="false"
class="nameEdit"
v-model="data.attributes.name"
@blur="editPlaylist"
@change="editPlaylist"
@keydown.enter="editPlaylist"/></div>
<div class="playlist-artist item-navigate"
v-if="data.attributes && data.attributes.artistName"
@click="if(data.attributes && data.attributes.artistName){ app.searchAndNavigate(data,'artist')}">
{{data.attributes ? (data.attributes.artistName ?? '') :''}}
</div>
<div class="playlist-desc" v-if="data.attributes.editorialNotes">
@ -57,33 +65,35 @@
Shuffle
</button>
<button class="wr-btn" style="min-width: 120px;" v-if="inLibrary!=null"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString())">
{{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
</button>
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString())">
{{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
</button>
</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()">
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" :context-ext="buildContextMenu()"
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
:context-ext="buildContextMenu()"
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
</draggable>
</div>
</div>
<div class="playlist-time">
<div class="playlist-time">
{{data.attributes.releaseDate}}
</div>
<div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') " style="width: 50%;">
<div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') "
style="width: 50%;">
{{data.attributes.copyright}}
</div>
<div class="playlist-time">{{app.getTotalTime()}}</div>
</div>
</template>
</div>
</template>
</script>
<script>
@ -95,7 +105,8 @@
editorialNotesExpanded: false,
drag: false,
nameEditing: false,
inLibrary: null
inLibrary: null,
app: this.$root
}
},
mounted: function () {
@ -103,20 +114,22 @@
this.isInLibrary()
})
},
watch:{
data: function () {
watch: {
data: function () {
this.isInLibrary()
}
},
methods: {
async isInLibrary () {
if (this.data.type && !this.data.type.includes("library")){
async isInLibrary() {
if (this.data.type && !this.data.type.includes("library")) {
// please keep using vars here
var params = {"fields[playlists]": "inLibrary","fields[albums]": "inLibrary","relate" : "library"}
var res = await app.mkapi(this.data.attributes.playParams.kind ?? this.data.type, this.data.attributes.playParams.isLibrary ?? false , this.data.attributes.playParams.id ?? this.data.id, params);
this.inLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
console.log(res)
} else {this.inLibrary = true}
var params = {"fields[playlists]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library"}
var res = await app.mkapi(this.data.attributes.playParams.kind ?? this.data.type, this.data.attributes.playParams.isLibrary ?? false, this.data.attributes.playParams.id ?? this.data.id, params);
this.inLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
console.log(res)
} else {
this.inLibrary = true
}
},
editPlaylist() {
app.editPlaylist(this.data.id, this.data.attributes.name);
@ -126,29 +139,29 @@
app.mk.addToLibrary(id)
this.inLibrary = true
},
async removeFromLibrary(id) {
var params = {"fields[somgs]": "inLibrary","fields[albums]": "inLibrary","relate" : "library"}
async removeFromLibrary(id) {
var params = {"fields[somgs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library"}
var id = this.data.id ?? this.data.attributes.playParams.id
var res = await app.mkapi(this.data.attributes.playParams.kind ?? this.data.type, this.data.attributes.playParams.isLibrary ?? false , this.data.attributes.playParams.id ?? this.data.id, params);
var res = await app.mkapi(this.data.attributes.playParams.kind ?? this.data.type, this.data.attributes.playParams.isLibrary ?? false, this.data.attributes.playParams.id ?? this.data.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.data.attributes.playParams.kind ?? this.data.type ?? '';
var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
app.mk.api.library.remove({[truekind]: id })
app.mk.api.library.remove({[truekind]: id})
this.inLibrary = false
},
editPlaylistName() {
if(this.data.attributes.canEdit && this.data.type == "library-playlists") {
if (this.data.attributes.canEdit && this.data.type == "library-playlists") {
this.nameEditing = true
setTimeout(() => {
document.querySelector(".nameEdit").focus()
}, 100)
}
},
buildContextMenu (index) {
buildContextMenu(index) {
let self = this
if(!this.data.attributes.canEdit) {
if (!this.data.attributes.canEdit) {
return
}
return {
@ -171,20 +184,20 @@
}
},
async put() {
if(!this.data.attributes.canEdit) {
if (!this.data.attributes.canEdit) {
return
}
await app.mk.api.library.putPlaylistTracklisting(this.data.attributes.playParams.id, this.convert())
},
async remove () {
if(!this.data.attributes.canEdit) {
async remove() {
if (!this.data.attributes.canEdit) {
return
}
// for each app.selectedMediaItems splice the items from the playlist
for(let i = 0; i < app.selectedMediaItems.length; i++) {
for (let i = 0; i < app.selectedMediaItems.length; i++) {
let item = app.selectedMediaItems[i]
let index = this.data.relationships.tracks.data.findIndex(x => x.id == item.id)
if(index > -1) {
if (index > -1) {
this.data.relationships.tracks.data.splice(index, 1)
}
}

5
src/renderer/views/pages/search.ejs
View file

@ -51,6 +51,11 @@
Vue.component('cider-search', {
template: "#cider-search",
props: ['search'],
data: function() {
return {
app: this.$root
}
},
methods: {
getTopResult() {
if (this.search.results["meta"]) {

1
src/renderer/views/pages/settings.ejs
View file

@ -503,6 +503,7 @@
props: [],
data: function () {
return {
app: this.$root
}
},
methods: {

12014
src/renderer/vue.dev.js Normal file
View file

File diff suppressed because it is too large Load diff