vue devtools in dev env
This commit is contained in:
booploops
parent
8e4f219000
commit
98a70494a4
27 changed files with 12450 additions and 310 deletions
1
index.js
1
index.js
|
|
@ -86,6 +86,7 @@ app.on('ready', () => {
|
|||
console.log('[Cider] Application is Ready. Creating Window.')
|
||||
if (!app.isPackaged) {
|
||||
console.info('[Cider] Running in development mode.')
|
||||
require('vue-devtools').install()
|
||||
}
|
||||
CreateWindow()
|
||||
});
|
||||
|
|
|
|||
|
|
@ -194,7 +194,8 @@ const CiderBase = {
|
|||
|
||||
EnvironmentVariables: {
|
||||
"env": {
|
||||
platform: os.platform()
|
||||
platform: os.platform(),
|
||||
dev: app.isPackaged
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
Vue.use(VueObserveVisibility);
|
||||
|
||||
|
||||
Vue.component('sidebar-library-item', {
|
||||
template: '#sidebar-library-item',
|
||||
props: ['name', 'page', 'cd-click'],
|
||||
methods: {}
|
||||
});
|
||||
|
||||
|
||||
// This is going to suck to code
|
||||
var CiderContextMenu = {
|
||||
Menu: function (event) {
|
||||
|
|
@ -109,6 +101,7 @@ class NavigationEvent {
|
|||
const app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
ipcRenderer: ipcRenderer,
|
||||
cfg: ipcRenderer.sendSync("getStore"),
|
||||
isDev: ipcRenderer.sendSync("is-dev"),
|
||||
drawertest: false,
|
||||
|
|
@ -269,6 +262,12 @@ const app = new Vue({
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
navigateBack() {
|
||||
history.back()
|
||||
},
|
||||
navigateForward() {
|
||||
history.forward()
|
||||
},
|
||||
getHTMLStyle() {
|
||||
switch(this.cfg.visual.window_transparency) {
|
||||
case "acrylic":
|
||||
|
|
@ -2265,6 +2264,17 @@ const app = new Vue({
|
|||
}
|
||||
})
|
||||
|
||||
Vue.component('sidebar-library-item', {
|
||||
template: '#sidebar-library-item',
|
||||
props: ['name', 'page', 'cd-click'],
|
||||
data: function () {
|
||||
return {
|
||||
app: app
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
|
||||
// Key binds
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.keyCode === 70 && e.ctrlKey) {
|
||||
|
|
@ -2317,6 +2327,19 @@ document.addEventListener('musickitloaded', function () {
|
|||
// });
|
||||
// }
|
||||
|
||||
const getBase64FromUrl = async (url) => {
|
||||
const data = await fetch(url);
|
||||
const blob = await data.blob();
|
||||
return new Promise((resolve) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(blob);
|
||||
reader.onloadend = () => {
|
||||
const base64data = reader.result;
|
||||
resolve(base64data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function uuidv4() {
|
||||
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
|
||||
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
||||
|
|
|
|||
|
|
@ -2810,6 +2810,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
.wpfade_transform-enter-active,
|
||||
.wpfade_transform-leave-active {
|
||||
transition: opacity .1s var(--appleEase), transform .1s var(--appleEase);
|
||||
}
|
||||
|
||||
.wpfade_transform-enter,
|
||||
.wpfade_transform-leave-to {
|
||||
transform: scale(0.90);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fabfade-enter-active,
|
||||
.fabfade-leave-active {
|
||||
transition: transform .1s var(--appleEase), opacity .1s var(--appleEase);
|
||||
|
|
|
|||
|
|
@ -39,7 +39,8 @@
|
|||
return {
|
||||
playlistSorted: [],
|
||||
searchQuery: "",
|
||||
focused: ""
|
||||
focused: "",
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<script type="text/x-template" id="animatedartwork-view">
|
||||
<template v-if="video">
|
||||
<div class="animated" v-bind:vid="app.hashCode(video).toString()">
|
||||
<div class="animated" v-bind:vid="app.hashCode(video).toString()" v-if="video">
|
||||
<video ref="video" class="animated-artwork-video" loop id="animated-artwork"></video>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('animatedartwork-view', {
|
||||
template: '#animatedartwork-view',
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
hls: null,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
video: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
hls: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
priority: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div ref="lyricsview" class="md-body lyric-body">
|
||||
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
|
||||
<template v-for="(lyric, index) in lyrics" v-if="lyric && lyric.line && lyric.line != 'lrcInstrumental'">
|
||||
<h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)"
|
||||
<h3 class="lyric-line" @click="seekTo(lyric.startTime)"
|
||||
v-bind:line-index="index.toString()">
|
||||
<template v-if="richlyrics && richlyrics != [] && richlyrics.length > 0">
|
||||
<div class="richl" >
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</h3>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)"
|
||||
<h3 class="lyric-line" @click="seekTo(lyric.startTime)"
|
||||
:start="lyric.startTime"
|
||||
:end="lyric.endTime" v-bind:line-index="index.toString()">
|
||||
<div class="lyricWaiting">
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</template>
|
||||
<template v-else>
|
||||
<div class="no-lyrics">
|
||||
Loading... / Lyrics not found./ Instrumental.
|
||||
Loading... / Lyrics not found./ Instrumental.</div>
|
||||
</template>
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -43,7 +43,13 @@
|
|||
Vue.component('lyrics-view', {
|
||||
template: '#lyrics-view',
|
||||
props: ["time", "lyrics", "richlyrics", "translation", "onindex"],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
time: function () {
|
||||
if (app.lyricon && app.drawer.open && this.$refs.lyricsview) {
|
||||
let currentLine = this.$refs.lyricsview.querySelector(`.lyric-line.active`)
|
||||
|
|
@ -109,6 +115,9 @@
|
|||
|
||||
},
|
||||
methods: {
|
||||
seekTo(startTime) {
|
||||
if(startTime != 9999999) this.app.seekTo(startTime, false);
|
||||
},
|
||||
getActiveLyric() {
|
||||
// console.log(this.time);
|
||||
const delayfix = 0.1
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
<script type="text/x-template" id="mediaitem-artwork">
|
||||
<template v-if="type == 'artists'">
|
||||
<div class="mediaitem-artwork rounded" :key="url" :style="getStyle()">
|
||||
<img :src="app.getMediaItemArtwork(url, size, width)"
|
||||
decoding="async"
|
||||
class="mediaitem-artwork--img">
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="mediaitem-artwork" :key="url" :style="getStyle()"
|
||||
<div class="mediaitem-artwork" :class="{'rounded': (type == 'artists')}" :key="url" :style="getStyle()"
|
||||
v-observe-visibility="{callback: visibilityChanged}">
|
||||
<img :src="app.getMediaItemArtwork(url, size, width)"
|
||||
decoding="async"
|
||||
|
|
@ -16,7 +8,6 @@
|
|||
<animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
|
@ -28,7 +19,7 @@
|
|||
default: '120'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
url: {
|
||||
|
|
@ -54,6 +45,7 @@
|
|||
},
|
||||
data: function () {
|
||||
return {
|
||||
app:this.$root,
|
||||
isVisible: false,
|
||||
style: {
|
||||
"box-shadow": ""
|
||||
|
|
|
|||
|
|
@ -27,6 +27,11 @@
|
|||
Vue.component('mediaitem-hrect', {
|
||||
template: '#mediaitem-hrect',
|
||||
props: ['item'],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<script type="text/x-template" id="mediaitem-list-item">
|
||||
<template>
|
||||
<div v-observe-visibility="{callback: visibilityChanged}"
|
||||
@contextmenu="contextMenu"
|
||||
@click="select"
|
||||
|
|
@ -24,7 +23,8 @@
|
|||
: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="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}"
|
||||
@dblclick="app.routeView(item)">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
|
|
@ -61,7 +61,6 @@
|
|||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
|
@ -71,13 +70,14 @@
|
|||
return {
|
||||
isVisible: false,
|
||||
addedToLibrary: false,
|
||||
guid: uuidv4()
|
||||
guid: uuidv4(),
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
props: {
|
||||
'item': {type: Object, required: true},
|
||||
'parent': {type: Object, required: false},
|
||||
'index': {type: Object, required: false, default: -1},
|
||||
'parent': {type: String, required: false},
|
||||
'index': {type: Number, required: false, default: -1},
|
||||
'show-artwork': {type: Boolean, default: true},
|
||||
'show-library-status': {type: Boolean, default: true},
|
||||
'show-meta-data': {type: Boolean, default: false},
|
||||
|
|
@ -85,6 +85,11 @@
|
|||
'contextExt': {type: Object, required: false},
|
||||
},
|
||||
methods: {
|
||||
msToMinSec(ms) {
|
||||
var minutes = Math.floor(ms / 60000);
|
||||
var seconds = ((ms % 60000) / 1000).toFixed(0);
|
||||
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
|
||||
},
|
||||
getDataType() {
|
||||
if (this.item.attributes.playParams.isLibrary) {
|
||||
return this.item.type
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<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">
|
||||
|
|
@ -51,13 +50,17 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('mediaitem-mvview-sp', {
|
||||
template: '#mediaitem-mvview-sp',
|
||||
props: ['item', "imagesize", "badge"],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -54,6 +54,11 @@
|
|||
Vue.component('mediaitem-mvview', {
|
||||
template: '#mediaitem-mvview',
|
||||
props: ['item', "imagesize"],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal-large">
|
||||
<template>
|
||||
<div class="cd-hmedia-scroller">
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -12,6 +10,11 @@
|
|||
Vue.component('mediaitem-scroller-horizontal-large', {
|
||||
template: '#mediaitem-scroller-horizontal-large',
|
||||
props: ['items'],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,16 +1,18 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal-mvview">
|
||||
<template>
|
||||
<div class="cd-hmedia-scroller">
|
||||
<template v-if="browsesp">
|
||||
<mediaitem-mvview-sp :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
|
||||
<mediaitem-mvview-sp
|
||||
:item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
|
||||
:imagesize="imagesize"
|
||||
:badge="item.attributes" v-for="item in items"></mediaitem-mvview-sp>
|
||||
</template>
|
||||
<template v-else>
|
||||
<mediaitem-square :kind="kind" size="600" :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
|
||||
<mediaitem-square :kind="kind" size="600"
|
||||
:item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
|
||||
:imagesize="imagesize"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -23,12 +25,12 @@
|
|||
required: true
|
||||
},
|
||||
imagesize: {
|
||||
type: String,
|
||||
required: true
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
browsesp: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
required: false
|
||||
},
|
||||
kind: {
|
||||
type: String,
|
||||
|
|
@ -36,6 +38,11 @@
|
|||
default: ""
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -11,6 +11,11 @@
|
|||
Vue.component('mediaitem-scroller-horizontal-sp', {
|
||||
template: '#mediaitem-scroller-horizontal-sp',
|
||||
props: ['items'],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -11,6 +11,11 @@
|
|||
Vue.component('mediaitem-scroller-horizontal', {
|
||||
template: '#mediaitem-scroller-horizontal',
|
||||
props: ['items'],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -74,6 +74,11 @@
|
|||
Vue.component('mediaitem-square-large', {
|
||||
template: '#mediaitem-square-large',
|
||||
props: ['item'],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickContext() {
|
||||
var evt = document.createEvent('MouseEvent');
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<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`}">
|
||||
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 : ''"
|
||||
|
|
@ -35,13 +35,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="title text-overflow-elipsis"
|
||||
:style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" style="font-weight: 600">
|
||||
: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')"
|
||||
: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 ?? '') }}
|
||||
|
|
@ -72,16 +74,23 @@
|
|||
<%- include("../svg/play.svg") %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('mediaitem-square-sp', {
|
||||
template: '#mediaitem-square-sp',
|
||||
props: ['item'],
|
||||
methods: { clickContext() {
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
subtitleSearchNavigate(item) {
|
||||
if((item.attributes.editorialNotes == null) && item.attributes.artistName)app.searchAndNavigate(item,'artist')
|
||||
},
|
||||
clickContext() {
|
||||
var evt = document.createEvent('MouseEvent');
|
||||
var rect = this.$refs.main2.getBoundingClientRect();
|
||||
evt.initMouseEvent(
|
||||
|
|
@ -95,7 +104,11 @@
|
|||
this.$refs.main.dispatchEvent(evt);
|
||||
}
|
||||
, 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 useMenu = "normal"
|
||||
if (app.selectedMediaItems.length <= 1) {
|
||||
|
|
@ -174,6 +187,7 @@
|
|||
}
|
||||
}
|
||||
CiderContextMenu.Create(event, menus[useMenu])
|
||||
},}
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script type="text/x-template" id="mediaitem-square">
|
||||
<template>
|
||||
<div tabindex="0"
|
||||
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
|
||||
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu"
|
||||
v-observe-visibility="{callback: visibilityChanged}">
|
||||
<template v-if="isVisible">
|
||||
<div class="artwork-container">
|
||||
<div class="artwork" @click='app.routeView(item)'>
|
||||
|
|
@ -12,19 +12,21 @@
|
|||
shadow="subtle"
|
||||
:type="item.type"></mediaitem-artwork>
|
||||
</div>
|
||||
<button class="menu-btn" v-if="!nomenu.includes(item.type)" @click="contextMenu"><%- include("../svg/more.svg") %></button>
|
||||
<button class="play-btn" v-if="!noplay.includes(item.type)" @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
|
||||
<button class="menu-btn" v-if="!nomenu.includes(item.type)"
|
||||
@click="contextMenu"><%- include("../svg/more.svg") %></button>
|
||||
<button class="play-btn" v-if="!noplay.includes(item.type)"
|
||||
@click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
|
||||
</div>
|
||||
<div class="title item-navigate text-overflow-elipsis" @click.self='app.routeView(item)'>
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
<div class="subtitle item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')" v-if="item.attributes.artistName">
|
||||
<div class="subtitle item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')"
|
||||
v-if="item.attributes.artistName">
|
||||
{{ item.attributes.artistName }}
|
||||
</div>
|
||||
<div class="subtitle" v-else> </div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
|
@ -50,7 +52,8 @@
|
|||
addedToLibrary: false,
|
||||
guid: uuidv4(),
|
||||
noplay: ["apple-curators"],
|
||||
nomenu: ["artists", "stations", "apple-curators"]
|
||||
nomenu: ["artists", "stations", "apple-curators"],
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -89,7 +92,11 @@
|
|||
if (this.nomenu.includes(this.item.type)) {
|
||||
return
|
||||
}
|
||||
if (!event) { event = this.$refs.main } else { console.log(event) }
|
||||
if (!event) {
|
||||
event = this.$refs.main
|
||||
} else {
|
||||
console.log(event)
|
||||
}
|
||||
let self = this
|
||||
let useMenu = "normal"
|
||||
if (app.selectedMediaItems.length <= 1) {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,8 @@
|
|||
queuePosition: 0,
|
||||
queueItems: [],
|
||||
selected: -1,
|
||||
selectedItems: []
|
||||
selectedItems: [],
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<title>Cider</title>
|
||||
<link rel="stylesheet/less" type="text/css" href="style.less"/>
|
||||
<script src="less.js"></script>
|
||||
<script src="vue.js"></script>
|
||||
<script src="<%- (env.dev ? "vue.js" : "vue.dev.js") %>"></script>
|
||||
<script src="sortable.min.js"></script>
|
||||
<script src="vue-observe-visibility.min.js"></script>
|
||||
<script src="sortable.min.js"></script>
|
||||
|
|
@ -71,10 +71,10 @@
|
|||
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div class="song-artist " style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
|
||||
<div class="item-navigate song-artist" style="display: inline-block;" @click="app.getNowPlayingItemDetailed(`artist`)">
|
||||
<div class="item-navigate song-artist" style="display: inline-block;" @click="getNowPlayingItemDetailed(`artist`)">
|
||||
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||
</div>
|
||||
<div class="song-artist item-navigate" style="display: inline-block;" @click="app.getNowPlayingItemDetailed('album')">
|
||||
<div class="song-artist item-navigate" style="display: inline-block;" @click="getNowPlayingItemDetailed('album')">
|
||||
{{ (mk.nowPlayingItem["attributes"]["albumName"]) ? (" - " + mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
@contextmenu="playlistContextMenu($event, item.id)"
|
||||
@dragover="()=>{}"
|
||||
:href="item.href"
|
||||
@click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
|
||||
@click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(page.substring(9))'>
|
||||
{{ item.attributes.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -261,8 +261,8 @@
|
|||
</div>
|
||||
<div id="app-content">
|
||||
<div id="navigation-bar">
|
||||
<button class="nav-item" @click="history.back()"><%- include('svg/chevron-left.svg') %></button>
|
||||
<button class="nav-item" @click="history.forward()"><%- include('svg/chevron-right.svg') %></button>
|
||||
<button class="nav-item" @click="navigateBack()"><%- include('svg/chevron-left.svg') %></button>
|
||||
<button class="nav-item" @click="navigateForward()"><%- include('svg/chevron-right.svg') %></button>
|
||||
</div>
|
||||
<!-- Artist Page -->
|
||||
<transition name="wpfade">
|
||||
|
|
@ -304,7 +304,7 @@
|
|||
</template>
|
||||
</transition>
|
||||
<!-- Browse -->
|
||||
<transition v-on:enter="app.getBrowsePage(); console.log('browse')" name="wpfade">
|
||||
<transition v-on:enter="getBrowsePage(); console.log('browse')" name="wpfade">
|
||||
<template v-if="page == 'browse'">
|
||||
<!-- <div class="content-inner">
|
||||
|
||||
|
|
@ -426,14 +426,14 @@
|
|||
>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<div class="bg-artwork--placeholder" v-else></div>
|
||||
<div class="bg-artwork--placeholder"></div>
|
||||
</transition>
|
||||
<transition name="modal">
|
||||
<add-to-playlist :playlists="playlists.listing" v-if="modals.addToPlaylist"></add-to-playlist>
|
||||
</transition>
|
||||
<div id="apple-music-video-container">
|
||||
<div id="apple-music-video-player-controls">
|
||||
<div id="player-exit" title="Close" onclick="app.exitMV()">
|
||||
<div id="player-exit" title="Close" onclick="exitMV()">
|
||||
<svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
|
||||
aria-role="presentation" focusable="false">
|
||||
<path
|
||||
|
|
@ -458,7 +458,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Media Item Artwork-->
|
||||
<%- include("components/mediaitem-artwork"); %>
|
||||
<!-- Browse -->
|
||||
|
|
@ -495,7 +494,7 @@
|
|||
<!-- Sidebar Item -->
|
||||
<script type="text/x-template" id="sidebar-library-item">
|
||||
<button class="app-sidebar-item"
|
||||
:class="$parent.getSidebarItemClass(page)" @click="app.appRoute(page)">
|
||||
:class="$parent.getSidebarItemClass(page)" @click="$root.appRoute(page)">
|
||||
{{ name }}
|
||||
</button>
|
||||
</script>
|
||||
|
|
@ -531,7 +530,6 @@
|
|||
<!-- Lyrics View -->
|
||||
<%- include('components/lyrics-view') %>
|
||||
|
||||
<script src="musickit.js?v=1"></script>
|
||||
<script>
|
||||
if (typeof MusicKit == 'undefined') {
|
||||
document.write(unescape("%3Cscript src='https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
|
|
|
|||
|
|
@ -128,7 +128,8 @@
|
|||
props: ['data'],
|
||||
data: function () {
|
||||
return {
|
||||
topSongsExpanded: false
|
||||
topSongsExpanded: false,
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -36,6 +36,11 @@
|
|||
<script>
|
||||
Vue.component('cider-browse', {
|
||||
template: "#cider-browse",
|
||||
props: ["data"]
|
||||
props: ["data"],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script type="text/x-template" id="cider-playlist">
|
||||
<template>
|
||||
<div class="content-inner playlist-page" v-if="data != [] && data.attributes != null" :style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
|
||||
<div class="content-inner playlist-page" v-if="data != [] && data.attributes != null"
|
||||
:style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
|
||||
<template v-if="app.playlists.loadingState == 0">
|
||||
<div class="content-inner centered">Loading...</div>
|
||||
</template>
|
||||
|
|
@ -23,11 +23,19 @@
|
|||
<div class="col playlist-info">
|
||||
<template v-if="!editorialNotesExpanded">
|
||||
<div>
|
||||
<div class="playlist-name" @click="editPlaylistName()" v-show="!nameEditing">{{data.attributes ? (data.attributes.name ??
|
||||
<div class="playlist-name" @click="editPlaylistName()" v-show="!nameEditing">
|
||||
{{data.attributes ? (data.attributes.name ??
|
||||
(data.attributes.title ?? '') ?? '') : ''}}
|
||||
</div>
|
||||
<div class="playlist-name" v-show="nameEditing"><input type="text" spellcheck="false" class="nameEdit" v-model="data.attributes.name" @blur="editPlaylist" @change="editPlaylist" @keydown.enter="editPlaylist"/></div>
|
||||
<div class="playlist-artist item-navigate" v-if="data.attributes && data.attributes.artistName" @click="if(data.attributes && data.attributes.artistName){ app.searchAndNavigate(data,'artist')}">
|
||||
<div class="playlist-name" v-show="nameEditing"><input type="text" spellcheck="false"
|
||||
class="nameEdit"
|
||||
v-model="data.attributes.name"
|
||||
@blur="editPlaylist"
|
||||
@change="editPlaylist"
|
||||
@keydown.enter="editPlaylist"/></div>
|
||||
<div class="playlist-artist item-navigate"
|
||||
v-if="data.attributes && data.attributes.artistName"
|
||||
@click="if(data.attributes && data.attributes.artistName){ app.searchAndNavigate(data,'artist')}">
|
||||
{{data.attributes ? (data.attributes.artistName ?? '') :''}}
|
||||
</div>
|
||||
<div class="playlist-desc" v-if="data.attributes.editorialNotes">
|
||||
|
|
@ -66,8 +74,10 @@
|
|||
<div class="playlist-body">
|
||||
<div class="well">
|
||||
<div style="width:100%">
|
||||
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'" v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" :context-ext="buildContextMenu()"
|
||||
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
|
||||
v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
|
||||
:context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
|
||||
</draggable>
|
||||
</div>
|
||||
|
|
@ -76,14 +86,14 @@
|
|||
<div class="playlist-time">
|
||||
{{data.attributes.releaseDate}}
|
||||
</div>
|
||||
<div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') " style="width: 50%;">
|
||||
<div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') "
|
||||
style="width: 50%;">
|
||||
{{data.attributes.copyright}}
|
||||
</div>
|
||||
<div class="playlist-time">{{app.getTotalTime()}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</script>
|
||||
<script>
|
||||
|
|
@ -95,7 +105,8 @@
|
|||
editorialNotesExpanded: false,
|
||||
drag: false,
|
||||
nameEditing: false,
|
||||
inLibrary: null
|
||||
inLibrary: null,
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
|
|
@ -116,7 +127,9 @@
|
|||
var res = await app.mkapi(this.data.attributes.playParams.kind ?? this.data.type, this.data.attributes.playParams.isLibrary ?? false, this.data.attributes.playParams.id ?? this.data.id, params);
|
||||
this.inLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
|
||||
console.log(res)
|
||||
} else {this.inLibrary = true}
|
||||
} else {
|
||||
this.inLibrary = true
|
||||
}
|
||||
},
|
||||
editPlaylist() {
|
||||
app.editPlaylist(this.data.id, this.data.attributes.name);
|
||||
|
|
|
|||
|
|
@ -51,6 +51,11 @@
|
|||
Vue.component('cider-search', {
|
||||
template: "#cider-search",
|
||||
props: ['search'],
|
||||
data: function() {
|
||||
return {
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTopResult() {
|
||||
if (this.search.results["meta"]) {
|
||||
|
|
|
|||
|
|
@ -503,6 +503,7 @@
|
|||
props: [],
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
12014
src/renderer/vue.dev.js
Normal file
12014
src/renderer/vue.dev.js
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue