added vue-horizontal
This commit is contained in:
booploops
parent
308193061d
commit
63b1293903
13 changed files with 486 additions and 66 deletions
|
|
@ -1,3 +1,4 @@
|
|||
Vue.use(VueHorizontal);
|
||||
Vue.use(VueObserveVisibility);
|
||||
var notyf = new Notyf();
|
||||
|
||||
|
|
|
|||
434
src/renderer/js/smoothscroll.js
Normal file
434
src/renderer/js/smoothscroll.js
Normal file
|
|
@ -0,0 +1,434 @@
|
|||
/* smoothscroll v0.4.4 - 2019 - Dustan Kasten, Jeremias Menichelli - MIT License */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// polyfill
|
||||
function polyfill() {
|
||||
// aliases
|
||||
var w = window;
|
||||
var d = document;
|
||||
|
||||
// return if scroll behavior is supported and polyfill is not forced
|
||||
if (
|
||||
'scrollBehavior' in d.documentElement.style &&
|
||||
w.__forceSmoothScrollPolyfill__ !== true
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// globals
|
||||
var Element = w.HTMLElement || w.Element;
|
||||
var SCROLL_TIME = 468;
|
||||
|
||||
// object gathering original scroll methods
|
||||
var original = {
|
||||
scroll: w.scroll || w.scrollTo,
|
||||
scrollBy: w.scrollBy,
|
||||
elementScroll: Element.prototype.scroll || scrollElement,
|
||||
scrollIntoView: Element.prototype.scrollIntoView
|
||||
};
|
||||
|
||||
// define timing method
|
||||
var now =
|
||||
w.performance && w.performance.now
|
||||
? w.performance.now.bind(w.performance)
|
||||
: Date.now;
|
||||
|
||||
/**
|
||||
* indicates if a the current browser is made by Microsoft
|
||||
* @method isMicrosoftBrowser
|
||||
* @param {String} userAgent
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
function isMicrosoftBrowser(userAgent) {
|
||||
var userAgentPatterns = ['MSIE ', 'Trident/', 'Edge/'];
|
||||
|
||||
return new RegExp(userAgentPatterns.join('|')).test(userAgent);
|
||||
}
|
||||
|
||||
/*
|
||||
* IE has rounding bug rounding down clientHeight and clientWidth and
|
||||
* rounding up scrollHeight and scrollWidth causing false positives
|
||||
* on hasScrollableSpace
|
||||
*/
|
||||
var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0;
|
||||
|
||||
/**
|
||||
* changes scroll position inside an element
|
||||
* @method scrollElement
|
||||
* @param {Number} x
|
||||
* @param {Number} y
|
||||
* @returns {undefined}
|
||||
*/
|
||||
function scrollElement(x, y) {
|
||||
this.scrollLeft = x;
|
||||
this.scrollTop = y;
|
||||
}
|
||||
|
||||
/**
|
||||
* returns result of applying ease math function to a number
|
||||
* @method ease
|
||||
* @param {Number} k
|
||||
* @returns {Number}
|
||||
*/
|
||||
function ease(k) {
|
||||
return 0.5 * (1 - Math.cos(Math.PI * k));
|
||||
}
|
||||
|
||||
/**
|
||||
* indicates if a smooth behavior should be applied
|
||||
* @method shouldBailOut
|
||||
* @param {Number|Object} firstArg
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
function shouldBailOut(firstArg) {
|
||||
if (
|
||||
firstArg === null ||
|
||||
typeof firstArg !== 'object' ||
|
||||
firstArg.behavior === undefined ||
|
||||
firstArg.behavior === 'auto' ||
|
||||
firstArg.behavior === 'instant'
|
||||
) {
|
||||
// first argument is not an object/null
|
||||
// or behavior is auto, instant or undefined
|
||||
return true;
|
||||
}
|
||||
|
||||
if (typeof firstArg === 'object' && firstArg.behavior === 'smooth') {
|
||||
// first argument is an object and behavior is smooth
|
||||
return false;
|
||||
}
|
||||
|
||||
// throw error when behavior is not supported
|
||||
throw new TypeError(
|
||||
'behavior member of ScrollOptions ' +
|
||||
firstArg.behavior +
|
||||
' is not a valid value for enumeration ScrollBehavior.'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* indicates if an element has scrollable space in the provided axis
|
||||
* @method hasScrollableSpace
|
||||
* @param {Node} el
|
||||
* @param {String} axis
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
function hasScrollableSpace(el, axis) {
|
||||
if (axis === 'Y') {
|
||||
return el.clientHeight + ROUNDING_TOLERANCE < el.scrollHeight;
|
||||
}
|
||||
|
||||
if (axis === 'X') {
|
||||
return el.clientWidth + ROUNDING_TOLERANCE < el.scrollWidth;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* indicates if an element has a scrollable overflow property in the axis
|
||||
* @method canOverflow
|
||||
* @param {Node} el
|
||||
* @param {String} axis
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
function canOverflow(el, axis) {
|
||||
var overflowValue = w.getComputedStyle(el, null)['overflow' + axis];
|
||||
|
||||
return overflowValue === 'auto' || overflowValue === 'scroll';
|
||||
}
|
||||
|
||||
/**
|
||||
* indicates if an element can be scrolled in either axis
|
||||
* @method isScrollable
|
||||
* @param {Node} el
|
||||
* @param {String} axis
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
function isScrollable(el) {
|
||||
var isScrollableY = hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y');
|
||||
var isScrollableX = hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
|
||||
|
||||
return isScrollableY || isScrollableX;
|
||||
}
|
||||
|
||||
/**
|
||||
* finds scrollable parent of an element
|
||||
* @method findScrollableParent
|
||||
* @param {Node} el
|
||||
* @returns {Node} el
|
||||
*/
|
||||
function findScrollableParent(el) {
|
||||
while (el !== d.body && isScrollable(el) === false) {
|
||||
el = el.parentNode || el.host;
|
||||
}
|
||||
|
||||
return el;
|
||||
}
|
||||
|
||||
/**
|
||||
* self invoked function that, given a context, steps through scrolling
|
||||
* @method step
|
||||
* @param {Object} context
|
||||
* @returns {undefined}
|
||||
*/
|
||||
function step(context) {
|
||||
var time = now();
|
||||
var value;
|
||||
var currentX;
|
||||
var currentY;
|
||||
var elapsed = (time - context.startTime) / SCROLL_TIME;
|
||||
|
||||
// avoid elapsed times higher than one
|
||||
elapsed = elapsed > 1 ? 1 : elapsed;
|
||||
|
||||
// apply easing to elapsed time
|
||||
value = ease(elapsed);
|
||||
|
||||
currentX = context.startX + (context.x - context.startX) * value;
|
||||
currentY = context.startY + (context.y - context.startY) * value;
|
||||
|
||||
context.method.call(context.scrollable, currentX, currentY);
|
||||
|
||||
// scroll more if we have not reached our destination
|
||||
if (currentX !== context.x || currentY !== context.y) {
|
||||
w.requestAnimationFrame(step.bind(w, context));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* scrolls window or element with a smooth behavior
|
||||
* @method smoothScroll
|
||||
* @param {Object|Node} el
|
||||
* @param {Number} x
|
||||
* @param {Number} y
|
||||
* @returns {undefined}
|
||||
*/
|
||||
function smoothScroll(el, x, y) {
|
||||
var scrollable;
|
||||
var startX;
|
||||
var startY;
|
||||
var method;
|
||||
var startTime = now();
|
||||
|
||||
// define scroll context
|
||||
if (el === d.body) {
|
||||
scrollable = w;
|
||||
startX = w.scrollX || w.pageXOffset;
|
||||
startY = w.scrollY || w.pageYOffset;
|
||||
method = original.scroll;
|
||||
} else {
|
||||
scrollable = el;
|
||||
startX = el.scrollLeft;
|
||||
startY = el.scrollTop;
|
||||
method = scrollElement;
|
||||
}
|
||||
|
||||
// scroll looping over a frame
|
||||
step({
|
||||
scrollable: scrollable,
|
||||
method: method,
|
||||
startTime: startTime,
|
||||
startX: startX,
|
||||
startY: startY,
|
||||
x: x,
|
||||
y: y
|
||||
});
|
||||
}
|
||||
|
||||
// ORIGINAL METHODS OVERRIDES
|
||||
// w.scroll and w.scrollTo
|
||||
w.scroll = w.scrollTo = function() {
|
||||
// avoid action when no arguments are passed
|
||||
if (arguments[0] === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
// avoid smooth behavior if not required
|
||||
if (shouldBailOut(arguments[0]) === true) {
|
||||
original.scroll.call(
|
||||
w,
|
||||
arguments[0].left !== undefined
|
||||
? arguments[0].left
|
||||
: typeof arguments[0] !== 'object'
|
||||
? arguments[0]
|
||||
: w.scrollX || w.pageXOffset,
|
||||
// use top prop, second argument if present or fallback to scrollY
|
||||
arguments[0].top !== undefined
|
||||
? arguments[0].top
|
||||
: arguments[1] !== undefined
|
||||
? arguments[1]
|
||||
: w.scrollY || w.pageYOffset
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// LET THE SMOOTHNESS BEGIN!
|
||||
smoothScroll.call(
|
||||
w,
|
||||
d.body,
|
||||
arguments[0].left !== undefined
|
||||
? ~~arguments[0].left
|
||||
: w.scrollX || w.pageXOffset,
|
||||
arguments[0].top !== undefined
|
||||
? ~~arguments[0].top
|
||||
: w.scrollY || w.pageYOffset
|
||||
);
|
||||
};
|
||||
|
||||
// w.scrollBy
|
||||
w.scrollBy = function() {
|
||||
// avoid action when no arguments are passed
|
||||
if (arguments[0] === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
// avoid smooth behavior if not required
|
||||
if (shouldBailOut(arguments[0])) {
|
||||
original.scrollBy.call(
|
||||
w,
|
||||
arguments[0].left !== undefined
|
||||
? arguments[0].left
|
||||
: typeof arguments[0] !== 'object' ? arguments[0] : 0,
|
||||
arguments[0].top !== undefined
|
||||
? arguments[0].top
|
||||
: arguments[1] !== undefined ? arguments[1] : 0
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// LET THE SMOOTHNESS BEGIN!
|
||||
smoothScroll.call(
|
||||
w,
|
||||
d.body,
|
||||
~~arguments[0].left + (w.scrollX || w.pageXOffset),
|
||||
~~arguments[0].top + (w.scrollY || w.pageYOffset)
|
||||
);
|
||||
};
|
||||
|
||||
// Element.prototype.scroll and Element.prototype.scrollTo
|
||||
Element.prototype.scroll = Element.prototype.scrollTo = function() {
|
||||
// avoid action when no arguments are passed
|
||||
if (arguments[0] === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
// avoid smooth behavior if not required
|
||||
if (shouldBailOut(arguments[0]) === true) {
|
||||
// if one number is passed, throw error to match Firefox implementation
|
||||
if (typeof arguments[0] === 'number' && arguments[1] === undefined) {
|
||||
throw new SyntaxError('Value could not be converted');
|
||||
}
|
||||
|
||||
original.elementScroll.call(
|
||||
this,
|
||||
// use left prop, first number argument or fallback to scrollLeft
|
||||
arguments[0].left !== undefined
|
||||
? ~~arguments[0].left
|
||||
: typeof arguments[0] !== 'object' ? ~~arguments[0] : this.scrollLeft,
|
||||
// use top prop, second argument or fallback to scrollTop
|
||||
arguments[0].top !== undefined
|
||||
? ~~arguments[0].top
|
||||
: arguments[1] !== undefined ? ~~arguments[1] : this.scrollTop
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var left = arguments[0].left;
|
||||
var top = arguments[0].top;
|
||||
|
||||
// LET THE SMOOTHNESS BEGIN!
|
||||
smoothScroll.call(
|
||||
this,
|
||||
this,
|
||||
typeof left === 'undefined' ? this.scrollLeft : ~~left,
|
||||
typeof top === 'undefined' ? this.scrollTop : ~~top
|
||||
);
|
||||
};
|
||||
|
||||
// Element.prototype.scrollBy
|
||||
Element.prototype.scrollBy = function() {
|
||||
// avoid action when no arguments are passed
|
||||
if (arguments[0] === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
// avoid smooth behavior if not required
|
||||
if (shouldBailOut(arguments[0]) === true) {
|
||||
original.elementScroll.call(
|
||||
this,
|
||||
arguments[0].left !== undefined
|
||||
? ~~arguments[0].left + this.scrollLeft
|
||||
: ~~arguments[0] + this.scrollLeft,
|
||||
arguments[0].top !== undefined
|
||||
? ~~arguments[0].top + this.scrollTop
|
||||
: ~~arguments[1] + this.scrollTop
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.scroll({
|
||||
left: ~~arguments[0].left + this.scrollLeft,
|
||||
top: ~~arguments[0].top + this.scrollTop,
|
||||
behavior: arguments[0].behavior
|
||||
});
|
||||
};
|
||||
|
||||
// Element.prototype.scrollIntoView
|
||||
Element.prototype.scrollIntoView = function() {
|
||||
// avoid smooth behavior if not required
|
||||
if (shouldBailOut(arguments[0]) === true) {
|
||||
original.scrollIntoView.call(
|
||||
this,
|
||||
arguments[0] === undefined ? true : arguments[0]
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// LET THE SMOOTHNESS BEGIN!
|
||||
var scrollableParent = findScrollableParent(this);
|
||||
var parentRects = scrollableParent.getBoundingClientRect();
|
||||
var clientRects = this.getBoundingClientRect();
|
||||
|
||||
if (scrollableParent !== d.body) {
|
||||
// reveal element inside parent
|
||||
smoothScroll.call(
|
||||
this,
|
||||
scrollableParent,
|
||||
scrollableParent.scrollLeft + clientRects.left - parentRects.left,
|
||||
scrollableParent.scrollTop + clientRects.top - parentRects.top
|
||||
);
|
||||
|
||||
// reveal parent in viewport unless is fixed
|
||||
if (w.getComputedStyle(scrollableParent).position !== 'fixed') {
|
||||
w.scrollBy({
|
||||
left: parentRects.left,
|
||||
top: parentRects.top,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// reveal element in viewport
|
||||
w.scrollBy({
|
||||
left: clientRects.left,
|
||||
top: clientRects.top,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (typeof exports === 'object' && typeof module !== 'undefined') {
|
||||
// commonjs
|
||||
module.exports = { polyfill: polyfill };
|
||||
} else {
|
||||
// global
|
||||
polyfill();
|
||||
}
|
||||
|
||||
}());
|
||||
|
||||
1
src/renderer/js/vue-horizontal.js
Normal file
1
src/renderer/js/vue-horizontal.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -3751,14 +3751,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
|
||||
/* horizontal media scroller */
|
||||
.cd-hmedia-scroller {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
height: 284px;
|
||||
align-items: center;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -3767,16 +3759,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
|
||||
&.small {
|
||||
overflow-x: overlay;
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
&.hmedia-scroller-card {
|
||||
height: 370px;
|
||||
|
||||
.mediaitem-card {
|
||||
margin: 12px;
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4047,7 +4032,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
.cd-mediaitem-square-sp {
|
||||
--spcolor: var("");
|
||||
width: 190px;
|
||||
height: 250px;
|
||||
height: 245px;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal-large">
|
||||
<div class="cd-hmedia-scroller">
|
||||
<template >
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</template>
|
||||
</div>
|
||||
<vue-horizontal>
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</vue-horizontal>
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal-mvview">
|
||||
<div class="cd-hmedia-scroller">
|
||||
<vue-horizontal>
|
||||
<template v-if="browsesp">
|
||||
<mediaitem-mvview-sp
|
||||
:item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
:imagesize="imagesize"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</template>
|
||||
</div>
|
||||
</vue-horizontal>
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
|
||||
<div class="cd-hmedia-scroller hmedia-scroller-card">
|
||||
<template>
|
||||
<mediaitem-square kind="card" :item="item" size="300"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</template>
|
||||
<vue-horizontal>
|
||||
<template>
|
||||
<mediaitem-square kind="card" :item="item" size="300"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</template>
|
||||
</vue-horizontal>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal">
|
||||
<template>
|
||||
<div class="cd-hmedia-scroller" :class="kind">
|
||||
<vue-horizontal>
|
||||
<slot></slot>
|
||||
<mediaitem-square :kind="kind" :item="item"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</div>
|
||||
</vue-horizontal>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@
|
|||
<link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>
|
||||
<script src="./js/less.js"></script>
|
||||
<script src="<%- (env.dev ? "./js/vue.js" : "./js/vue.dev.js") %>"></script>
|
||||
<script src="./js/vue-horizontal.js"></script>
|
||||
<script src="./js/smoothscroll.js"></script>
|
||||
<script src="./js/vuex.min.js"></script>
|
||||
<script src="./js/sortable.min.js"></script>
|
||||
<script src="./js/vue-observe-visibility.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -8,18 +8,16 @@
|
|||
<h3>{{app.getLz('home.followedArtists')}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="well">
|
||||
<mediaitem-scroller-horizontal>
|
||||
<div v-for="artist in artists" style="margin: 6px;">
|
||||
<mediaitem-square :item="artist" kind="small"></mediaitem-square>
|
||||
<button @click="unfollow(artist.id)" class="md-btn md-btn-glyph" style="display:flex;">
|
||||
<div class="sidebar-icon">
|
||||
<div class="svg-icon" :style="{'--url': 'url(./assets/feather/x-circle.svg)'}"></div>
|
||||
</div> {{app.getLz('action.unfollow')}}
|
||||
</button>
|
||||
</div>
|
||||
</mediaitem-scroller-horizontal>
|
||||
</div>
|
||||
<vue-horizontal>
|
||||
<div v-for="artist in artists" style="margin: 6px;">
|
||||
<mediaitem-square :item="artist" kind="small"></mediaitem-square>
|
||||
<button @click="unfollow(artist.id)" class="md-btn md-btn-glyph" style="display:flex;">
|
||||
<div class="sidebar-icon">
|
||||
<div class="svg-icon" :style="{'--url': 'url(./assets/feather/x-circle.svg)'}"></div>
|
||||
</div> {{app.getLz('action.unfollow')}}
|
||||
</button>
|
||||
</div>
|
||||
</vue-horizontal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -169,8 +169,10 @@
|
|||
<h3>{{ data.views[view].attributes.title }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<mediaitem-scroller-horizontal :items="data.views[view].data"></mediaitem-scroller-horizontal>
|
||||
<div class="row" >
|
||||
<div class="col">
|
||||
<mediaitem-scroller-horizontal :items="data.views[view].data"></mediaitem-scroller-horizontal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -53,9 +53,9 @@
|
|||
<div class="col">
|
||||
<h3>{{app.getLz('home.madeForYou')}}</h3>
|
||||
<div class="well">
|
||||
<template v-if="isSectionReady('madeForYou')">
|
||||
<mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
|
||||
</template>
|
||||
<vue-horizontal v-if="isSectionReady('madeForYou')">
|
||||
<mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
|
||||
</vue-horizontal>
|
||||
<div class="spinner" v-else></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -71,10 +71,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="well">
|
||||
<template v-if="isSectionReady('friendsListeningTo')">
|
||||
<vue-horizontal v-if="isSectionReady('friendsListeningTo')">
|
||||
<mediaitem-square kind="small" v-for="item in friendsListeningTo"
|
||||
:item="item"></mediaitem-square>
|
||||
</template>
|
||||
:item="item"></mediaitem-square>
|
||||
</vue-horizontal>
|
||||
<div class="spinner" v-else></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
<script>
|
||||
Vue.component('cider-home', {
|
||||
template: '#cider-home',
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
followedArtists: this.$root.cfg.home.followedArtists,
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
let self = this
|
||||
return {
|
||||
name: "Remove from Favorites",
|
||||
action: function(item) {
|
||||
action: function (item) {
|
||||
let index = self.favoriteItems.findIndex(x => x.id == item.id)
|
||||
if (index > -1) {
|
||||
self.favoriteItems.splice(index, 1)
|
||||
|
|
@ -142,12 +142,12 @@
|
|||
playlists.push(item.id)
|
||||
}
|
||||
}
|
||||
if (playlists.length != 0) {
|
||||
if (playlists.length != 0) {
|
||||
this.app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/playlists/${playlists.toString()}`).then(playlistsData => {
|
||||
self.favorites.push(...playlistsData.data)
|
||||
})
|
||||
}
|
||||
if (libraryPlaylists.length != 0) {
|
||||
if (libraryPlaylists.length != 0) {
|
||||
this.app.mk.api.v3.music(`v1/me/library/playlists/${playlists.toString()}`).then(playlistsData => {
|
||||
self.favorites.push(...playlistsData.data)
|
||||
})
|
||||
|
|
@ -158,11 +158,11 @@
|
|||
let self = this
|
||||
this.app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists?ids=${artists.toString()}&views=latest-release&include[songs]=albums&fields[albums]=artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount&limit[artists:top-songs]=2&art[url]=f`).then(artistData => {
|
||||
artistData.data.data.forEach(item => {
|
||||
if (item.views["latest-release"].data.length != 0) {
|
||||
self.artistFeed.push(item.views["latest-release"].data[0])
|
||||
}
|
||||
})
|
||||
// sort artistFeed by attributes.releaseDate descending, date is formatted as "YYYY-MM-DD"
|
||||
if (item.views["latest-release"].data.length != 0) {
|
||||
self.artistFeed.push(item.views["latest-release"].data[0])
|
||||
}
|
||||
})
|
||||
// sort artistFeed by attributes.releaseDate descending, date is formatted as "YYYY-MM-DD"
|
||||
this.artistFeed.sort((a, b) => {
|
||||
let dateA = new Date(a.attributes.releaseDate)
|
||||
let dateB = new Date(b.attributes.releaseDate)
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
return section
|
||||
};
|
||||
})[0].relationships.contents.data
|
||||
} catch (err) {}
|
||||
} catch (err) { }
|
||||
self.sectionsReady.push("madeForYou")
|
||||
|
||||
try {
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
return section
|
||||
};
|
||||
})[0].relationships.contents.data
|
||||
} catch (err) {}
|
||||
} catch (err) { }
|
||||
self.sectionsReady.push("recentlyPlayed")
|
||||
self.sectionsReady.push("friendsListeningTo")
|
||||
});
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
self.profile = response.data.data[0]
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -5,8 +5,5 @@
|
|||
{{ $store.state.test }}
|
||||
<div class="spinner"></div>
|
||||
<button class="md-btn">Cider Button</button>
|
||||
<div style="position: relative;width: 300px;height: 300px;">
|
||||
<artwork-material url="https://is3-ssl.mzstatic.com/image/thumb/Music126/v4/13/41/13/1341133b-560f-1aee-461f-c4b32ec049b4/cover.jpg/{w}x{h}bb.jpg"></artwork-material>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue