added vue-horizontal

src/renderer/index.js

@@ -1,3 +1,4 @@
+Vue.use(VueHorizontal);
 Vue.use(VueObserveVisibility);
 var notyf = new Notyf();
 

src/renderer/js/smoothscroll.js

@@ -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();
+    }
+  
+  }());
+  

src/renderer/style.less

@@ -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;

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

@@ -1,10 +1,8 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal-large">
-    <div class="cd-hmedia-scroller">
+    <vue-horizontal>
-        <template >
+        <mediaitem-square :item="item" 
-            <mediaitem-square :item="item" 
                             v-for="item in items"></mediaitem-square>                 
-        </template>                  
+    </vue-horizontal>
-    </div>
 </script>
 
 

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

@@ -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>
 
 

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

@@ -1,9 +1,11 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
         <div class="cd-hmedia-scroller hmedia-scroller-card">
-            <template>
+            <vue-horizontal>
-                <mediaitem-square kind="card" :item="item" size="300"
+                <template>
-                v-for="item in items"></mediaitem-square>
+                    <mediaitem-square kind="card" :item="item" size="300"
-            </template>
+                    v-for="item in items"></mediaitem-square>
+                </template>
+            </vue-horizontal>
         </div>
 </script>
 

src/renderer/views/components/mediaitem-scroller-horizontal.ejs

@@ -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>
 

src/renderer/views/main.ejs

@@ -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>

src/renderer/views/pages/artist-feed.ejs

@@ -8,18 +8,16 @@
                             <h3>{{app.getLz('home.followedArtists')}}</h3>
                         </div>
                     </div>
-                    <div class="well">
+                    <vue-horizontal>
-                        <mediaitem-scroller-horizontal>
+                        <div v-for="artist in artists" style="margin: 6px;">
-                            <div v-for="artist in artists" style="margin: 6px;">
+                            <mediaitem-square :item="artist" kind="small"></mediaitem-square>
-                                <mediaitem-square :item="artist" kind="small"></mediaitem-square>
+                            <button @click="unfollow(artist.id)" class="md-btn md-btn-glyph" style="display:flex;">
-                                <button @click="unfollow(artist.id)" class="md-btn md-btn-glyph" style="display:flex;">
+                                <div class="sidebar-icon">
-                                    <div class="sidebar-icon">
+                                    <div class="svg-icon" :style="{'--url': 'url(./assets/feather/x-circle.svg)'}"></div>
-                                        <div class="svg-icon" :style="{'--url': 'url(./assets/feather/x-circle.svg)'}"></div>
+                                </div> {{app.getLz('action.unfollow')}}
-                                    </div> {{app.getLz('action.unfollow')}}
+                            </button>
-                                </button>
+                        </div>
-                            </div>
+                    </vue-horizontal>
-                        </mediaitem-scroller-horizontal>
-                    </div>
                 </div>
             </div>
         </div>

src/renderer/views/pages/cider-playlist.ejs

@@ -169,8 +169,10 @@
                                 <h3>{{ data.views[view].attributes.title }}</h3>
                             </div>
                         </div>
-                        <div>
+                        <div class="row" >
-                            <mediaitem-scroller-horizontal :items="data.views[view].data"></mediaitem-scroller-horizontal>
+                            <div class="col">
+                                <mediaitem-scroller-horizontal :items="data.views[view].data"></mediaitem-scroller-horizontal>
+                            </div>
                         </div>
                     </div>
                 </template>

src/renderer/views/pages/home.ejs

@@ -53,9 +53,9 @@
                 <div class="col">
                     <h3>{{app.getLz('home.madeForYou')}}</h3>
                     <div class="well">
-                        <template v-if="isSectionReady('madeForYou')">
+                        <vue-horizontal v-if="isSectionReady('madeForYou')">
-                            <mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
+                                <mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
-                        </template>
+                        </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>
+                                :item="item"></mediaitem-square>
-                        </template>
+                            </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)
@@ -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) {
+                        if (item.views["latest-release"].data.length != 0) {
-                                self.artistFeed.push(item.views["latest-release"].data[0])
+                            self.artistFeed.push(item.views["latest-release"].data[0])
-                            }
+                        }
-                        })
+                    })
-                        // sort artistFeed by attributes.releaseDate descending, date is formatted as "YYYY-MM-DD"
+                    // 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")
                 });

src/renderer/views/pages/zoo.ejs

@@ -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>