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

1
index.js
View file

@ -86,6 +86,7 @@ app.on('ready', () => {
console.log('[Cider] Application is Ready. Creating Window.') console.log('[Cider] Application is Ready. Creating Window.')
if (!app.isPackaged) { if (!app.isPackaged) {
console.info('[Cider] Running in development mode.') console.info('[Cider] Running in development mode.')
require('vue-devtools').install()
} }
CreateWindow() CreateWindow()
}); });

3
src/main/cider-base.js
View file

@ -194,7 +194,8 @@ const CiderBase = {
EnvironmentVariables: { EnvironmentVariables: {
"env": { "env": {
platform: os.platform() platform: os.platform(),
dev: app.isPackaged
} }
}, },

39
src/renderer/index.js
View file

@ -1,13 +1,5 @@
Vue.use(VueObserveVisibility); 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 // This is going to suck to code
var CiderContextMenu = { var CiderContextMenu = {
Menu: function (event) { Menu: function (event) {
@ -109,6 +101,7 @@ class NavigationEvent {
const app = new Vue({ const app = new Vue({
el: "#app", el: "#app",
data: { data: {
ipcRenderer: ipcRenderer,
cfg: ipcRenderer.sendSync("getStore"), cfg: ipcRenderer.sendSync("getStore"),
isDev: ipcRenderer.sendSync("is-dev"), isDev: ipcRenderer.sendSync("is-dev"),
drawertest: false, drawertest: false,
@ -269,6 +262,12 @@ const app = new Vue({
}, },
}, },
methods: { methods: {
navigateBack() {
history.back()
},
navigateForward() {
history.forward()
},
getHTMLStyle() { getHTMLStyle() {
switch(this.cfg.visual.window_transparency) { switch(this.cfg.visual.window_transparency) {
case "acrylic": 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 // Key binds
document.addEventListener('keydown', function (e) { document.addEventListener('keydown', function (e) {
if (e.keyCode === 70 && e.ctrlKey) { 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() { function uuidv4() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) (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; 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-enter-active,
.fabfade-leave-active { .fabfade-leave-active {
transition: transform .1s var(--appleEase), opacity .1s var(--appleEase); 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 { return {
playlistSorted: [], playlistSorted: [],
searchQuery: "", searchQuery: "",
focused: "" focused: "",
app: this.$root,
} }
}, },
props: { props: {

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

@ -1,32 +1,32 @@
<script type="text/x-template" id="animatedartwork-view"> <script type="text/x-template" id="animatedartwork-view">
<template v-if="video"> <div class="animated" v-bind:vid="app.hashCode(video).toString()" 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>
<video ref="video" class="animated-artwork-video" loop id="animated-artwork"></video> </div>
</div>
</template>
</script> </script>
<script> <script>
Vue.component('animatedartwork-view', { Vue.component('animatedartwork-view', {
template: '#animatedartwork-view', template: '#animatedartwork-view',
data: function () {
return {
app: this.$root,
hls: null,
}
},
props: { props: {
video: { video: {
type: String, type: String,
required: true required: true
}, },
hls: {
type: Object,
default: ''
},
priority: { priority: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
async mounted() { async mounted() {
if(!this.priority && app.cfg.visual.animated_artwork == "limited") { if (!this.priority && app.cfg.visual.animated_artwork == "limited") {
return return
}else if(app.cfg.visual.animated_artwork == "disabled") { } else if (app.cfg.visual.animated_artwork == "disabled") {
return return
} }
if (this.video) { if (this.video) {
@ -65,8 +65,8 @@
} }
}, },
async beforeDestroy() { async beforeDestroy() {
if(this.hls) { if (this.hls) {
await this.hls.destroy(); await this.hls.destroy();
this.hls = null 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"> <div ref="lyricsview" class="md-body lyric-body">
<template v-if="lyrics && lyrics != [] && lyrics.length > 0"> <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
<template v-for="(lyric, index) in lyrics" v-if="lyric && lyric.line && lyric.line != 'lrcInstrumental'"> <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()"> v-bind:line-index="index.toString()">
<template v-if="richlyrics && richlyrics != [] && richlyrics.length > 0"> <template v-if="richlyrics && richlyrics != [] && richlyrics.length > 0">
<div class="richl" > <div class="richl" >
@ -22,7 +22,7 @@
</h3> </h3>
</template> </template>
<template v-else> <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" :start="lyric.startTime"
:end="lyric.endTime" v-bind:line-index="index.toString()"> :end="lyric.endTime" v-bind:line-index="index.toString()">
<div class="lyricWaiting"> <div class="lyricWaiting">
@ -35,7 +35,7 @@
</template> </template>
<template v-else> <template v-else>
<div class="no-lyrics"> <div class="no-lyrics">
Loading... / Lyrics not found./ Instrumental. Loading... / Lyrics not found./ Instrumental.</div>
</template> </template>
</div> </div>
</script> </script>
@ -43,7 +43,13 @@
Vue.component('lyrics-view', { Vue.component('lyrics-view', {
template: '#lyrics-view', template: '#lyrics-view',
props: ["time", "lyrics", "richlyrics", "translation", "onindex"], props: ["time", "lyrics", "richlyrics", "translation", "onindex"],
data: function () {
return {
app: this.$root,
}
},
watch: { watch: {
time: function () { time: function () {
if (app.lyricon && app.drawer.open && this.$refs.lyricsview) { if (app.lyricon && app.drawer.open && this.$refs.lyricsview) {
let currentLine = this.$refs.lyricsview.querySelector(`.lyric-line.active`) let currentLine = this.$refs.lyricsview.querySelector(`.lyric-line.active`)
@ -109,6 +115,9 @@
}, },
methods: { methods: {
seekTo(startTime) {
if(startTime != 9999999) this.app.seekTo(startTime, false);
},
getActiveLyric() { getActiveLyric() {
// console.log(this.time); // console.log(this.time);
const delayfix = 0.1 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"> <script type="text/x-template" id="mediaitem-artwork">
<template v-if="type == 'artists'"> <div class="mediaitem-artwork" :class="{'rounded': (type == 'artists')}" :key="url" :style="getStyle()"
<div class="mediaitem-artwork rounded" :key="url" :style="getStyle()"> v-observe-visibility="{callback: visibilityChanged}">
<img :src="app.getMediaItemArtwork(url, size, width)" <img :src="app.getMediaItemArtwork(url, size, width)"
decoding="async" decoding="async"
class="mediaitem-artwork--img"> 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>
<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>
</script> </script>
<script> <script>
@ -28,7 +19,7 @@
default: '120' default: '120'
}, },
width: { width: {
type: String, type: Number,
required: false required: false
}, },
url: { url: {
@ -54,6 +45,7 @@
}, },
data: function () { data: function () {
return { return {
app:this.$root,
isVisible: false, isVisible: false,
style: { style: {
"box-shadow": "" "box-shadow": ""

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

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

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

@ -1,67 +1,66 @@
<script type="text/x-template" id="mediaitem-list-item"> <script type="text/x-template" id="mediaitem-list-item">
<template> <div v-observe-visibility="{callback: visibilityChanged}"
<div v-observe-visibility="{callback: visibilityChanged}" @contextmenu="contextMenu"
@contextmenu="contextMenu" @click="select"
@click="select" :data-id="item.attributes.playParams.id ?? item.id"
:data-id="item.attributes.playParams.id ?? item.id" :data-type="getDataType()"
:data-type="getDataType()" :data-index="index"
:data-index="index" :data-guid="guid"
:data-guid="guid" :data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
:data-islibrary="this.item.attributes.playParams.isLibrary ?? false" class="cd-mediaitem-list-item"
class="cd-mediaitem-list-item" :class="{'mediaitem-selected': app.select_hasMediaItem(guid)}">
:class="{'mediaitem-selected': app.select_hasMediaItem(guid)}"> <template v-if="isVisible">
<template v-if="isVisible"> <div class="isLibrary" v-if="showLibraryStatus == true">
<div class="isLibrary" v-if="showLibraryStatus == true"> <button @click="addToLibrary()"
<button @click="addToLibrary()" v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤
v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤 </button>
</button> <button v-else @click="removeFromLibrary()">❤️</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>
<div class="artwork" v-if="showArtwork == true"> <div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
<mediaitem-artwork <template v-if="item.attributes.artistName">
:url="item.attributes.artwork ? item.attributes.artwork.url : ''" <div class="artist item-navigate text-overflow-elipsis"
size="50" @click="app.searchAndNavigate(item,'artist')">
:type="item.type"></mediaitem-artwork> {{ item.attributes.artistName }}
<button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button> </div>
</div> <template v-if="item.attributes.albumName">&nbsp;-&nbsp;</template>
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}" @dblclick="app.routeView(item)"> <template v-if="item.attributes.albumName">
<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="artist item-navigate text-overflow-elipsis" <div class="artist item-navigate text-overflow-elipsis"
@click="app.searchAndNavigate(item,'artist')"> @click="app.searchAndNavigate(item,'album')">
{{ item.attributes.artistName }} {{ item.attributes.albumName }}
</div> </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> </template>
</div> </template>
</div> </div>
<div class="content-rating" v-if="item.attributes.contentRating" @dblclick="app.routeView(item)"> </div>
{{ item.attributes.contentRating }} <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> </div>
<template v-if="showMetaData == true" @dblclick="app.routeView(item)"> <div class="metainfo">
<div class="metainfo"> {{ item.attributes.genreNames[0] ?? "" }}
{{ 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> </div>
</template> </template>
</div> <div class="duration" v-if="showDuration" @dblclick="app.routeView(item)">
</template> {{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
</div>
</template>
</div>
</script> </script>
<script> <script>
@ -71,13 +70,14 @@
return { return {
isVisible: false, isVisible: false,
addedToLibrary: false, addedToLibrary: false,
guid: uuidv4() guid: uuidv4(),
app: this.$root
} }
}, },
props: { props: {
'item': {type: Object, required: true}, 'item': {type: Object, required: true},
'parent': {type: Object, required: false}, 'parent': {type: String, required: false},
'index': {type: Object, required: false, default: -1}, 'index': {type: Number, required: false, default: -1},
'show-artwork': {type: Boolean, default: true}, 'show-artwork': {type: Boolean, default: true},
'show-library-status': {type: Boolean, default: true}, 'show-library-status': {type: Boolean, default: true},
'show-meta-data': {type: Boolean, default: false}, 'show-meta-data': {type: Boolean, default: false},
@ -85,10 +85,15 @@
'contextExt': {type: Object, required: false}, 'contextExt': {type: Object, required: false},
}, },
methods: { methods: {
msToMinSec(ms) {
var minutes = Math.floor(ms / 60000);
var seconds = ((ms % 60000) / 1000).toFixed(0);
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
},
getDataType() { getDataType() {
if(this.item.attributes.playParams.isLibrary) { if (this.item.attributes.playParams.isLibrary) {
return this.item.type return this.item.type
}else{ } else {
return this.item.attributes.playParams.kind return this.item.attributes.playParams.kind
} }
}, },
@ -100,7 +105,7 @@
if (e.shiftKey) { if (e.shiftKey) {
if (this.index != -1) { 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) app.select_selectMediaItem(item_id, this.getDataType(), this.index, this.guid, isLibrary)
} }
let allMediaItems = document.querySelectorAll(".cd-mediaitem-list-item[data-index]") 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.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) 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) menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
} }
} }
@ -297,9 +302,9 @@
}, },
async removeFromLibrary() { async removeFromLibrary() {
let item = this.item 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 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) { if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
id = res.relationships.library.data[0].id id = res.relationships.library.data[0].id
} }
@ -319,7 +324,7 @@
let item = this.item let item = this.item
let parent = this.parent let parent = this.parent
let childIndex = this.index let childIndex = this.index
console.log(item,parent,childIndex) console.log(item, parent, childIndex)
if (parent != null && childIndex != null) { if (parent != null && childIndex != null) {
app.queueParentandplayChild(parent, childIndex, item); app.queueParentandplayChild(parent, childIndex, item);
} else { } 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"> <script type="text/x-template" id="mediaitem-mvview-sp">
<template> <div style="position: relative; display: inline-flex;">
<div style="position: relative; display: inline-flex;"> <div @click.self='app.routeView(item)'
<div @click.self='app.routeView(item)' class="cd-mediaitem-mvview">
class="cd-mediaitem-mvview"> <div style="height: 70px; min-height: 70px; max-height: 70px; width: 100%; margin-left: 5px;">
<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;">
<div class="title-browse-sp bold " @click='app.routeView(item)' style = "color: darkgrey;"> {{ badge ? badge.designBadge : ''}}
{{ 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> </div>
<div class="artwork"> <div class="title-browse-sp ">
<mediaitem-artwork {{ (badge != null && badge.designTag != null) ? badge.designTag : (item.attributes.name ?? '') }}
: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>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'> <div class="title-browse-sp semibold" style="color: darkgrey;">
<div class="button" style=" {{ (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%; border-radius: 50%;
background: rgba(50,50,50,0.7);" 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', 'margin-left': '260px', 'margin-bottom': '140px',
width: '30px', width: '30px',
height: '30px',} : height: '30px',} :
{margin: '35px', 'margin-left': '95px', {margin: '35px', 'margin-left': '95px',
width: '120px', width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)"> height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %> <%- include("../svg/play.svg") %>
</div>
</div> </div>
</div> </div>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)' tabindex="0"> </div>
<div class="button" style=" <div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)' tabindex="0">
<div class="button" style="
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" 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', 'margin-left': '260px', 'margin-bottom': '140px',
width: '30px', width: '30px',
height: '30px',} : height: '30px',} :
{margin: '35px', 'margin-left': '95px', {margin: '35px', 'margin-left': '95px',
width: '120px', width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)"> height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %> <%- include("../svg/play.svg") %>
</div>
</div> </div>
</div> </div>
</template> </div>
</script> </script>
<script> <script>
Vue.component('mediaitem-mvview-sp', { Vue.component('mediaitem-mvview-sp', {
template: '#mediaitem-mvview-sp', template: '#mediaitem-mvview-sp',
props: ['item', "imagesize","badge"], props: ['item', "imagesize", "badge"],
data: function () {
return {
app: this.$root,
}
},
methods: {} methods: {}
}); });
</script> </script>

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

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

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

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

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

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

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

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

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

@ -1,101 +1,114 @@
<script type="text/x-template" id="mediaitem-square-sp"> <script type="text/x-template" id="mediaitem-square-sp">
<template> <div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu">
<div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu"> <div @click.self='app.routeView(item)'
<div @click.self='app.routeView(item)' class="cd-mediaitem-square-sp" ref="main2"
class="cd-mediaitem-square-sp" ref="main2" :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}"> :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
<div class="artwork"> <div class="artwork">
<mediaitem-artwork <mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''" :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="300" 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 : '')) : '' " :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> :type="item.type"></mediaitem-artwork>
</div> </div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'> <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
<div class="button" style=" <div class="button" style="
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" 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', width: '30px',
height: '30px',} : height: '30px',} :
{margin: '35px',display:'none', {margin: '35px',display:'none',
width: '120px', width: '120px',
height: '120px',}]" @click="clickContext()" > height: '120px',}]" @click="clickContext()">
<%- include("../svg/more.svg") %> <%- include("../svg/more.svg") %>
</div> </div>
<div class="button" style=" <div class="button" style="
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" 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', width: '30px', 'margin-left': '8px',
height: '30px',} : height: '30px',} :
{margin: '35px','position': 'absolute', {margin: '35px','position': 'absolute',
width: '120px', width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)"> height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %> <%- include("../svg/play.svg") %>
</div>
</div> </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>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)' tabindex="0"> <div class="title text-overflow-elipsis"
<div class="button" style=" :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%; border-radius: 50%;
background: rgba(50,50,50,0.7);" 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', width: '30px',
height: '30px',} : height: '30px',} :
{margin: '35px','position': 'absolute', display: 'none', {margin: '35px','position': 'absolute', display: 'none',
width: '120px', width: '120px',
height: '120px',}]" @click="clickContext()"> height: '120px',}]" @click="clickContext()">
<%- include("../svg/more.svg") %> <%- include("../svg/more.svg") %>
</div> </div>
<div class="button" style=" <div class="button" style="
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" 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', width: '30px', 'margin-left': '8px',
height: '30px',} : height: '30px',} :
{margin: '35px','position': 'absolute', {margin: '35px','position': 'absolute',
width: '120px', width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)" > height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %> <%- include("../svg/play.svg") %>
</div>
</div> </div>
</div> </div>
</template> </div>
</script> </script>
<script> <script>
Vue.component('mediaitem-square-sp', { Vue.component('mediaitem-square-sp', {
template: '#mediaitem-square-sp', template: '#mediaitem-square-sp',
props: ['item'], props: ['item'],
methods: { clickContext() { data: function () {
var evt = document.createEvent('MouseEvent'); 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(); var rect = this.$refs.main2.getBoundingClientRect();
evt.initMouseEvent( evt.initMouseEvent(
"contextmenu", "contextmenu",
true /* bubble */, true /* cancelable */, true /* bubble */, true /* cancelable */,
window, null, 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 */ false, false, false, false, /* modifier keys */
0 /*left*/, null 0 /*left*/, null
); );
this.$refs.main.dispatchEvent(evt); this.$refs.main.dispatchEvent(evt);
} }
,contextMenu(event) { , contextMenu(event) {
if (!event){event = this.$refs.main} else {console.log(event)} if (!event) {
event = this.$refs.main
} else {
console.log(event)
}
let self = this let self = this
let useMenu = "normal" let useMenu = "normal"
if (app.selectedMediaItems.length <= 1) { if (app.selectedMediaItems.length <= 1) {
@ -174,6 +187,7 @@
} }
} }
CiderContextMenu.Create(event, menus[useMenu]) CiderContextMenu.Create(event, menus[useMenu])
},} },
}
}); });
</script> </script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

File diff suppressed because it is too large Load diff