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

File structure update - all source files now in src directory, cider-ui renamed to renderer, main/backend-related files in main directory, base implementation of mpris and start of backend rework

Browse source
This commit is contained in:
Core 2021-12-19 06:02:38 +00:00
parent 29be5dd481
commit 7d3e513187
85 changed files with 114 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,59 @@
<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>
</script>
<script>
Vue.component('animatedartwork-view', {
template: '#animatedartwork-view',
props: ['video', 'hls'],
mounted() {
if (this.video) {
this.$nextTick(function () {
var config = {
backBufferLength: 0,
enableWebVTT: false,
enableCEA708Captions: false,
emeEnabled: false,
abrEwmaDefaultEstimate: 10000,
testBandwidth: false
};
if (this.hls) {
console.log('detached');
this.hls.detachMedia();
} else {
this.hls = new CiderHls(config);
}
// bind them together
if (this.$refs.video) {
let d = "WIDEVINE_SOFTWARE"
let h = {
initDataTypes: ["cenc", "keyids"],
distinctiveIdentifier: "optional",
persistentState: "required"
}
let p = {
platformInfo: {requiresCDMAttachOnStart: !0, maxSecurityLevel: d, keySystemConfig: h},
appData: {serviceName: "Apple Music"}
}
this.hls.attachMedia(this.$refs.video);
this.hls.loadSource(this.video);
this.hls.loadLevel = 4;
}
})
}
},
async beforeDestroy() {
if(this.hls) {
await this.hls.destroy();
this.hls = null
console.log('killed')
}
}
});
</script>

14
src/renderer/views/components/editorialNotes.ejs Normal file
View file

@ -0,0 +1,14 @@
<div class="modal-backdrop">
<div class="modal-dialog">
<div class="modal-header">
<button type="button" class="close">&times;</button>
<h4 class="modal-title" v-html="title"></h4>
</div>
<div class="modal-content" v-html="content">
</div>
<div class="modal-footer">
</div>
</div>
</div>

14
src/renderer/views/components/hello-world.ejs Normal file
View file

@ -0,0 +1,14 @@
<script type="text/x-template" id="hello-world">
<button @click="sayHello()">Hello world!</button>
</script>
<script>
Vue.component('hello-world', {
template: '#hello-world',
methods: {
sayHello: function () {
alert('Hello world!');
}
}
});
</script>

20
src/renderer/views/components/karaoke-in.ejs Normal file
View file

@ -0,0 +1,20 @@
<script type="text/x-template" id="karaoke-in">
<div class="karaoke-viewer">
<div class="lyric">
<template v-for="segment in lyrics" v-if="segmentInRange(segment.ts, segment.te, segment.x)">
<div class="verse-group active">
<template v-for="(verse, verseIndex) in segment.l"
v-if="verseInRange(segment.ts, segment.te, verse.o)">
<span class="verse verse-active">{{ verse.c }}</span>
</template>
<template v-else>
<span class="verse">{{ verse.c }}</span>
</template>
</div>
</template>
<template v-else>
<div class="verse-group">{{ segment.x }}</div>
</template>
</div>
</div>
</script>

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

@ -0,0 +1,162 @@
<script type="text/x-template" id="lyrics-view">
<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.line != 'lrcInstrumental'">
<h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)"
v-bind:line-index="index.toString()">
<template v-if="richlyrics && richlyrics != [] && richlyrics.length > 0">
<div class="richl" >
<template v-for="verse in getVerseLine(index-1)" >
<span class="verse" :lyricstart="lyric.startTime" :versestart="verse.o" >{{ verse.c }}</span>
</template>
</div>
</template>
<template v-else>
<div class="norm" >
{{ lyric.line }}
</div>
</template>
<div class="lyrics-translation" v-if="lyric.translation && lyric.translation != ''">
{{ lyric.translation }}
</div>
</h3>
</template>
<template v-else>
<h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)"
:start="lyric.startTime"
:end="lyric.endTime" v-bind:line-index="index.toString()">
<div class="lyricWaiting">
<div class='WaitingDot1'></div>
<div class='WaitingDot2'></div>
<div class='WaitingDot3'></div>
</div>
</h3>
</template>
</template>
<template v-else>
<div class="no-lyrics">
Loading... / Lyrics not found./ Instrumental.
</template>
</div>
</script>
<script>
Vue.component('lyrics-view', {
template: '#lyrics-view',
props: ["time", "lyrics", "richlyrics", "translation", "onindex"],
watch: {
time: function () {
if (app.lyricon && app.drawer.open) {
let currentLine = this.$refs.lyricsview.querySelector(`.lyric-line.active`)
if (currentLine && currentLine.getElementsByClassName('lyricWaiting').length > 0) {
let duration = currentLine.getAttribute("end") - currentLine.getAttribute("start");
let u = (this.time - currentLine.getAttribute("start")) / duration;
if (u < 0.25 && !currentLine.classList.contains('mode1')) {
try {
currentLine.classList.add('mode1');
currentLine.classList.remove('mode3');
currentLine.classList.remove('mode2');
} catch (e) {
}
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 0.25;
currentLine.getElementsByClassName('WaitingDot3')[0].style.opacity = 0.25;
} else if (u >= 0.25 && u < 0.5 && !currentLine.classList.contains('mode2')) {
try {
currentLine.classList.add('mode2');
currentLine.classList.remove('mode1');
currentLine.classList.remove('mode3');
} catch (e) {
}
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
currentLine.getElementsByClassName('WaitingDot3')[0].style.opacity = 0.25;
} else if (u >= 0.5 && u < 0.75 && !currentLine.classList.contains('mode3')) {
try {
currentLine.classList.add('mode3');
currentLine.classList.remove('mode1');
currentLine.classList.remove('mode2');
} catch (e) {
}
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 1;
} else if (u >= 0.75 && currentLine.classList.contains('mode3')) {
try {
currentLine.classList.remove('mode1');
currentLine.classList.remove('mode2');
currentLine.classList.remove('mode3');
} catch (e) {
}
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 1;
}
}
}
this.getActiveLyric();
}
},
methods: {
getActiveLyric() {
// console.log(this.time);
const delayfix = 0.35
const prevLine = app.currentLyricsLine;
for (var i = 0; i < this.lyrics.length; i++) {
if (this.time + delayfix >= this.lyrics[i].startTime && this.time + delayfix <= app.lyrics[i].endTime) {
if (app.currentLyricsLine != i) {
app.currentLyricsLine = i;
if (app.lyricon && this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`)) {
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).classList.remove("active");
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).classList.add("active")
if (checkIfScrollIsStatic) {
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).scrollIntoView({
behavior: "smooth",
block: "center"
})
}
}
} else if (app.currentLyricsLine == 0) {
if (this.$refs.lyricsview.querySelector(`.lyric-line[line-index="0"]`) && !this.$refs.lyricsview.querySelector(`.lyric-line[line-index="0"]`).classList.contains("active"))
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="0"]`).classList.add("active");
}
break;
}
}
try{
try{this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).childNodes.classList.remove("verse-active");} catch(e){
}
for (child of this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${app.currentLyricsLine}"]`).querySelectorAll(".verse")){
if (this.time + 0.1 >= child.getAttribute("lyricstart") * 1 + child.getAttribute("versestart") * 1){
child.classList.add("verse-active");
} else {child.classList.remove("verse-active");}
}
} catch(e){}
},
getActiveVerse(timeStart, timeEnd, verseTime) {
let relativeTime = this.time - timeStart
console.log(this.time,timeEnd,timeStart,relativeTime >= verseTime && relativeTime <= timeEnd - timeStart)
return relativeTime >= verseTime && relativeTime <= timeEnd - timeStart
},
getVerseLine(index) {
if (this.richlyrics[index] != null && this.richlyrics[index].l != null) {
return this.richlyrics[index].l
}
else return []
}
}
});
</script>

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

@ -0,0 +1,62 @@
<script type="text/x-template" id="mediaitem-artwork">
<template v-if="type == 'artists'">
<div class="mediaitem-artwork rounded" :key="url" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}">
<img :src="app.getMediaItemArtwork(url, size)"
class="mediaitem-artwork--img">
</div>
</template>
<template v-else>
<div class="mediaitem-artwork" :key="url" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}"
v-observe-visibility="{callback: visibilityChanged}">
<img :src="app.getMediaItemArtwork(url, size)" v-if="isVisible"
class="mediaitem-artwork--img">
<div v-if="video && isVisible" class="animatedartwork-view-box">
<animatedartwork-view :video="video"></animatedartwork-view>
</div>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-artwork', {
template: '#mediaitem-artwork',
props: {
size: {
type: String,
default: '120'
},
url: {
type: String,
default: ''
},
type: {
type: String,
default: ''
},
video: {
type: String,
required: false
},
shadow: {
type: Boolean,
default: false
}
},
data: function () {
return {
isVisible: false
}
},
methods: {
getArtworkStyle() {
return {
width: this.size + 'px',
height: this.size + 'px'
};
},
visibilityChanged: function (isVisible, entry) {
this.isVisible = isVisible
}
}
});
</script>

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

@ -0,0 +1,32 @@
<script type="text/x-template" id="mediaitem-hrect">
<template>
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
class="cd-mediaitem-hrect">
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="70"
:type="item.type"></mediaitem-artwork>
</div>
<div class="info-rect">
<div class="title text-overflow-elipsis">
{{ item.attributes.name }}
</div>
<div class="subtitle text-overflow-elipsis">
{{ item.type }}
<template v-if="item.attributes.artistName">
∙ {{ item.attributes.artistName }}
</template>
</div>
</div>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-hrect', {
template: '#mediaitem-hrect',
props: ['item'],
methods: {}
});
</script>

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

@ -0,0 +1,269 @@
<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="item.attributes.playParams.kind ?? item.type"
:data-index="index"
:data-guid="guid"
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>❤️</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="playTrack()">
<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"
@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,'album')">
{{ item.attributes.albumName }}
</div>
</template>
</template>
</div>
</div>
<div class="content-rating" v-if="item.attributes.contentRating" @dblclick="playTrack()">
{{ item.attributes.contentRating }}
</div>
<template v-if="showMetaData == true" @dblclick="playTrack()">
<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="playTrack()">
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
</div>
</template>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-list-item', {
template: '#mediaitem-list-item',
data: function () {
return {
isVisible: false,
addedToLibrary: false,
guid: uuidv4()
}
},
props: {
'item': {type: Object, required: true},
'parent': {type: Object, required: false},
'index': {type: Object, required: false, default: -1},
'show-artwork': {type: Boolean, default: true},
'show-library-status': {type: Boolean, default: true},
'show-meta-data': {type: Boolean, default: false},
'show-duration': {type: Boolean, default: true},
},
methods: {
select(e) {
if (e.shiftKey) {
if (this.index != -1) {
if(app.selectedMediaItems.length == 0) {
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
}
let allMediaItems = document.querySelectorAll(".cd-mediaitem-list-item[data-index]")
let startIndex = Math.min(...app.selectedMediaItems.map(item => item.index))
let endIndex = Math.max(...app.selectedMediaItems.map(item => item.index))
if (this.index < startIndex) {
for (let i = this.index; i <= endIndex; i++) {
let item = allMediaItems[i]
if (item) {
app.select_selectMediaItem(item.getAttribute("data-id"),
item.getAttribute("data-type"),
item.getAttribute("data-index"),
item.getAttribute("data-guid"))
}
}
} else if (this.index > endIndex) {
for (let i = startIndex; i <= this.index; i++) {
let item = allMediaItems[i]
if (item) {
app.select_selectMediaItem(item.getAttribute("data-id"),
item.getAttribute("data-type"),
item.getAttribute("data-index"),
item.getAttribute("data-guid"))
}
}
} else {
for (let i = startIndex; i <= endIndex; i++) {
let item = allMediaItems[i]
if (item) {
app.select_selectMediaItem(item.getAttribute("data-id"),
item.getAttribute("data-type"),
item.getAttribute("data-index"),
item.getAttribute("data-guid"))
}
}
}
}
} else if (e.ctrlKey) {
if (app.select_hasMediaItem(this.guid)) {
app.select_removeMediaItem(this.guid)
} else {
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
}
} else {
if (app.select_hasMediaItem(this.guid)) {
app.selectedMediaItems = []
} else {
app.selectedMediaItems = []
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
}
}
},
contextMenu(event) {
let self = this
let useMenu = "normal"
if (app.selectedMediaItems.length <= 1) {
app.selectedMediaItems = []
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
} else {
useMenu = "multiple"
}
let menus = {
multiple: {
items: [
{
name: `Play ${app.selectedMediaItems.length} tracks next`,
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
if (!itemsToPlay[item.kind]) {
itemsToPlay[item.kind] = []
}
itemsToPlay[item.kind].push(item.id)
})
// loop through itemsToPlay
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playNext({[kind + "s"]: itemsToPlay[kind]})
}
}
console.log(itemsToPlay)
app.selectedMediaItems = []
}
},
{
name: `Play ${app.selectedMediaItems.length} tracks later`,
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
if (!itemsToPlay[item.kind]) {
itemsToPlay[item.kind] = []
}
itemsToPlay[item.kind].push(item.id)
})
// loop through itemsToPlay
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playLater({[kind + "s"]: itemsToPlay[kind]})
}
}
app.selectedMediaItems = []
}
},
]
},
normal: {
items: [
{
"name": "Start Radio",
"action": function () {
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
app.mk.play()
app.selectedMediaItems = []
})
}
},
{
"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.queue._reindex()
app.selectedMediaItems = []
}
},
{
"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.queue._reindex()
app.selectedMediaItems = []
}
},
{
"name": "Go to Artist",
"action": function () {
app.searchAndNavigate(self.item, 'artist')
}
},
{
"name": "Go to Album",
"action": function () {
app.searchAndNavigate(self.item, 'album')
}
},
]
}
}
CiderContextMenu.Create(event, menus[useMenu])
},
visibilityChanged: function (isVisible, entry) {
this.isVisible = isVisible
},
addToLibrary() {
let item = this.item
if (item.attributes.playParams.id) {
console.log('adding to library', item.attributes.playParams.id)
app.addToLibrary(item.attributes.playParams.id.toString())
this.addedToLibrary = true
} else if (item.id) {
console.log('adding to library', item.id)
app.addToLibrary(item.id.toString())
this.addedToLibrary = true
}
},
playTrack() {
let item = this.item
let parent = this.parent
let childIndex = this.index
console.log(item,parent,childIndex)
if (parent != null && childIndex != null) {
app.queueParentandplayChild(parent, childIndex);
} else {
app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
}
}
}
});
</script>

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

@ -0,0 +1,61 @@
<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 class="title-browse-sp bold " @click='app.routeView(item)'>
{{ 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" v-if="!(badge != null && badge.designTag != null)" >
{{ (item.attributes.artistName ?? (item.attributes.curatorName ?? '')) }}
</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="imagesize ?? 300"
></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': '200px',
'margin-left': '250px',
width: '40px',
height: '40px',} :
{margin: '35px', 'margin-left': '95px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
</div>
</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': '200px',
'margin-left': '250px',
width: '40px',
height: '40px',} :
{margin: '35px', 'margin-left': '95px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
</div>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-mvview-sp', {
template: '#mediaitem-mvview-sp',
props: ['item', "imagesize","badge"],
methods: {}
});
</script>

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

@ -0,0 +1,59 @@
<script type="text/x-template" id="mediaitem-mvview">
<template>
<div style="position: relative; display: inline-flex;">
<div @click.self='app.routeView(item)'
class="cd-mediaitem-mvview">
<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="imagesize ?? 300"
></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': '140px',
'margin-left': '250px',
width: '40px',
height: '40px',} :
{margin: '35px', 'margin-left': '95px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
</div>
<div class="title text-overflow-elipsis" @click='app.routeView(item)'>
{{ item.attributes.name ?? '' }}
</div>
<div class="subtitle text-overflow-elipsis item-navigate" v-if="item.attributes.artistName" :style = "{'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : ''}" @click="if(item.attributes.artistName)app.searchAndNavigate(item,'artist')">
{{ item.attributes.artistName ?? '' }}
</div>
</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': '140px',
'margin-left': '250px',
width: '40px',
height: '40px',} :
{margin: '35px', 'margin-left': '95px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
</div>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-mvview', {
template: '#mediaitem-mvview',
props: ['item', "imagesize"],
methods: {}
});
</script>

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

@ -0,0 +1,17 @@
<script type="text/x-template" id="mediaitem-scroller-horizontal-large">
<template>
<div class="cd-hmedia-scroller">
<mediaitem-square-large :item="item"
v-for="item in items"></mediaitem-square-large>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-scroller-horizontal-large', {
template: '#mediaitem-scroller-horizontal-large',
props: ['items'],
methods: {}
});
</script>

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

@ -0,0 +1,23 @@
<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-mvview :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-mvview>
</template>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-scroller-horizontal-mvview', {
template: '#mediaitem-scroller-horizontal-mvview',
props: ['items',"imagesize","browsesp"],
methods: {}
});
</script>

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

@ -0,0 +1,16 @@
<script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
<template>
<div class="cd-hmedia-scroller">
<mediaitem-square-sp :item="item"
v-for="item in items"></mediaitem-square-sp>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-scroller-horizontal-sp', {
template: '#mediaitem-scroller-horizontal-sp',
props: ['items'],
methods: {}
});
</script>

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

@ -0,0 +1,16 @@
<script type="text/x-template" id="mediaitem-scroller-horizontal">
<template>
<div class="cd-hmedia-scroller">
<mediaitem-square :item="item"
v-for="item in items"></mediaitem-square>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-scroller-horizontal', {
template: '#mediaitem-scroller-horizontal',
props: ['items'],
methods: {}
});
</script>

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

@ -0,0 +1,171 @@
<script type="text/x-template" id="mediaitem-square-large">
<template>
<div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu">
<div @click.self='app.routeView(item)'
class="cd-mediaitem-square-large" ref="main2">
<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="300"
: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': '140px','position': 'absolute',
width: '40px',
height: '40px',} :
{margin: '35px', 'position': 'absolute',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.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': '140px',
width: '40px', 'margin-left': '10px',
height: '40px',} :
{display: 'none',margin: '35px',
width: '120px',
height: '120px',}]" @click="clickContext() ">
<%- include("../svg/more.svg") %>
</div>
</div>
<div class="title text-overflow-elipsis" @click='app.routeView(item)'>
{{ item.attributes.name ?? '' }}
</div>
<div class="subtitle text-overflow-elipsis item-navigate" v-if="item.attributes.artistName" :style = "{'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : ''}" @click="if(item.attributes.artistName)app.searchAndNavigate(item,'artist')">
{{ 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': '140px',
width: '40px',
height: '40px',} :
{margin: '35px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.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': '140px',
width: '40px', 'margin-left': '10px',
height: '40px',} :
{display: 'none',margin: '35px',
width: '120px',
height: '120px',}]" @click="console.log('as');contextMenu()">
<%- include("../svg/more.svg") %>
</div>
</div>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-square-large', {
template: '#mediaitem-square-large',
props: ['item'],
methods: {
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 */
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)}
let self = this
let useMenu = "normal"
if (app.selectedMediaItems.length <= 1) {
app.selectedMediaItems = []
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
} else {
useMenu = "multiple"
}
let menus = {
multiple: {
items: [
{
name: `Play ${app.selectedMediaItems.length} tracks next`,
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
if (!itemsToPlay[item.kind]) {
itemsToPlay[item.kind] = []
}
itemsToPlay[item.kind].push(item.id)
})
// loop through itemsToPlay
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playNext({[kind + "s"]: itemsToPlay[kind]})
}
}
console.log(itemsToPlay)
app.selectedMediaItems = []
}
},
{
name: `Play ${app.selectedMediaItems.length} tracks later`,
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
if (!itemsToPlay[item.kind]) {
itemsToPlay[item.kind] = []
}
itemsToPlay[item.kind].push(item.id)
})
// loop through itemsToPlay
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playLater({[kind + "s"]: itemsToPlay[kind]})
}
}
app.selectedMediaItems = []
}
},
]
},
normal: {
items: [
{
"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.queue._reindex()
app.selectedMediaItems = []
}
},
{
"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.queue._reindex()
app.selectedMediaItems = []
}
},
]
}
}
CiderContextMenu.Create(event, menus[useMenu])
},}
});
</script>

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

@ -0,0 +1,179 @@
<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="
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': '140px','position': 'absolute',
width: '40px',
height: '40px',} :
{margin: '35px','position': 'absolute',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.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': '140px',
width: '40px', 'margin-left': '10px',
height: '40px',} :
{display: 'none',margin: '35px',
width: '120px',
height: '120px',}]" @click="clickContext()">
<%- include("../svg/more.svg") %>
</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 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': '140px',
width: '40px',
height: '40px',} :
{margin: '35px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.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': '140px',
width: '40px', 'margin-left': '10px',
height: '40px',} :
{display: 'none',margin: '35px',
width: '120px',
height: '120px',}]" @click="clickContext()">
<%- include("../svg/more.svg") %>
</div>
</div>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-square-sp', {
template: '#mediaitem-square-sp',
props: ['item'],
methods: { 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 */
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)}
let self = this
let useMenu = "normal"
if (app.selectedMediaItems.length <= 1) {
app.selectedMediaItems = []
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
} else {
useMenu = "multiple"
}
let menus = {
multiple: {
items: [
{
name: `Play ${app.selectedMediaItems.length} tracks next`,
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
if (!itemsToPlay[item.kind]) {
itemsToPlay[item.kind] = []
}
itemsToPlay[item.kind].push(item.id)
})
// loop through itemsToPlay
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playNext({[kind + "s"]: itemsToPlay[kind]})
}
}
console.log(itemsToPlay)
app.selectedMediaItems = []
}
},
{
name: `Play ${app.selectedMediaItems.length} tracks later`,
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
if (!itemsToPlay[item.kind]) {
itemsToPlay[item.kind] = []
}
itemsToPlay[item.kind].push(item.id)
})
// loop through itemsToPlay
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playLater({[kind + "s"]: itemsToPlay[kind]})
}
}
app.selectedMediaItems = []
}
},
]
},
normal: {
items: [
{
"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.queue._reindex()
app.selectedMediaItems = []
}
},
{
"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.queue._reindex()
app.selectedMediaItems = []
}
},
]
}
}
CiderContextMenu.Create(event, menus[useMenu])
},}
});
</script>

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

@ -0,0 +1,27 @@
<script type="text/x-template" id="mediaitem-square">
<template>
<div tabindex="0" @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
class="cd-mediaitem-square">
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="300"
:type="item.type"></mediaitem-artwork>
</div>
<div class="title text-overflow-elipsis">
{{ item.attributes.name }}
</div>
<div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
{{ item.attributes.artistName }}
</div>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-square', {
template: '#mediaitem-square',
props: ['item'],
methods: {}
});
</script>

60
src/renderer/views/components/queue-item.ejs Normal file
View file

@ -0,0 +1,60 @@
<script type="text/x-template" id="queue-item">
<template>
<div v-observe-visibility="{callback: visibilityChanged}"
@contextmenu="contextMenu"
class="cd-mediaitem-list-item">
<template v-if="isVisible">
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="34"
:type="item.type"></mediaitem-artwork>
</div>
<div class="info-rect" :style="{'padding-left': '16px'}">
<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" @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,'album')">
{{ item.attributes.albumName }}
</div>
</template>
</template>
</div>
</div>
<div class="duration">
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
</div>
</template>
</div>
</template>
</script>
<script>
Vue.component('queue-item', {
template: '#queue-item',
props: ['item'],
data: function () {
return {}
},
methods: {
contextMenu(event) {
let self = this
CiderContextMenu.Create(event, {
items: [{
"name": "Remove from queue",
"action": function () {
}
}]
});
}
}
});
</script>

137
src/renderer/views/components/queue.ejs Normal file
View file

@ -0,0 +1,137 @@
<script type="text/x-template" id="cider-queue">
<div class="queue-panel">
<div class="row">
<div class="col">
<h3 class="queue-header-text">Queue</h3>
</div>
<div class="col-auto flex-center">
<button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}" @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled">AUTO</button>
</div>
</div>
<div class="queue-body">
<draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
<template v-for="(queueItem, position) in queueItems">
<div v-if="position <= queuePosition" style="display: none;">{{ position }}</div>
<div class="cd-queue-item"
:class="{selected: selectedItems.includes(position)}"
@click="select($event, position)"
@dblclick="playQueueItem(position)" v-else :key="position"
@contextmenu="selected = position;queueContext($event, queueItem.item, position)">
<div class="row">
<div class="col-auto flex-center">
<div class="artwork">
<mediaitem-artwork :url="queueItem.item.attributes.artwork ? queueItem.item.attributes.artwork.url : ''" :size="32"></mediaitem-artwork>
</div>
</div>
<div class="col queue-info">
<div class="queue-title text-overflow-elipsis">{{ queueItem.item.attributes.name }}</div>
<div class="queue-subtitle text-overflow-elipsis">{{ queueItem.item.attributes.albumName }} - {{ queueItem.item.attributes.artistName }}</div>
</div>
</div>
</div>
</template>
</draggable>
</div>
<div class="queue-footer">
<button class="md-btn" style="width:100%;" v-if="queueItems.length > 1" @click="app.mk.clearQueue();updateQueue()">Clear All</button>
</div>
</div>
</script>
<script>
Vue.component('cider-queue', {
template: '#cider-queue',
data: function () {
return {
drag: false,
queuePosition: 0,
queueItems: [],
selected: -1,
selectedItems: []
}
},
mounted() {
this.updateQueue()
},
methods: {
select(e, position) {
if(e.ctrlKey || e.shiftKey) {
if(this.selectedItems.indexOf(position) == -1) {
this.selectedItems.push(position)
} else {
this.selectedItems.splice(this.selectedItems.indexOf(position), 1)
}
} else {
this.selectedItems = [position]
}
},
queueContext(event, item, position) {
let self = this
let useMenu = "single"
if(this.selectedItems.length > 1) {
useMenu = "multiple"
}
let menus = {
single: {
items: [{
"name": "Remove from queue",
"action": function () {
self.queueItems.splice(position, 1)
app.mk.queue._queueItems = self.queueItems;
app.mk.queue._reindex()
}
},
{
"name": "Start Radio",
"action": function () {
app.mk.setStationQueue({
song: item.attributes.playParams.id ?? item.id
}).then(() => {
app.mk.play()
})
}
},
]
},
multiple: {
items: [{
"name": `Remove ${self.selectedItems.length} tracks from queue`,
"action": function () {
// add property to items to be removed
self.selectedItems.forEach(function (item) {
self.queueItems[item].remove = true
})
// remove items
self.queueItems = self.queueItems.filter(function (item) {
return !item.remove
})
app.mk.queue._reindex()
self.selectedItems = []
}
}]
}
}
CiderContextMenu.Create(event, menus[useMenu]);
},
playQueueItem(index) {
app.mk.changeToMediaAtIndex(index)
},
updateQueue() {
this.selected = -1
if (app.mk.queue) {
this.queuePosition = app.mk.queue.position;
this.queueItems = app.mk.queue._queueItems;
} else {
this.queuePosition = 0;
this.queueItems = [];
}
},
move() {
this.selected = -1
app.mk.queue._queueItems = this.queueItems;
app.mk.queue._reindex()
}
}
});
</script>