From 1c464288eeed2b279af179d87ae5e9a5f9bbaa2b Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Mon, 29 Jul 2019 23:55:01 +0430
Subject: [PATCH] Moving out of owl carousel and going for a custom scrollbar
 mechanism

---
 src/renderer/layouts/HomePage.vue             |  5 -----
 src/renderer/layouts/MusicRow.vue             | 22 +++++++++++++------
 .../utility/HorizontalScrollPlugin.js         |  3 +++
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 024cedd..61e3d28 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -333,11 +333,6 @@ section.page
       font-size: 1.5rem
       font-weight: 200
       margin-left: 1rem
-  .carousel-custom
-      &.half
-        width: 0rem
-      .owl-stage-outer
-        overflow: unset
 
 @media(max-width: 1000px)
   .middle-row
diff --git a/src/renderer/layouts/MusicRow.vue b/src/renderer/layouts/MusicRow.vue
index 57a28ab..13cc122 100644
--- a/src/renderer/layouts/MusicRow.vue
+++ b/src/renderer/layouts/MusicRow.vue
@@ -1,20 +1,27 @@
 <template>
     <section class="music-row">
         <legend>{{title}}</legend>
-        <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
-           <MusicBox v-for="item in items" :key="item.id" :item="item" />
-        </carousel>
+        <section class="items">
+          <MusicBox v-for="item in items" :key="item.id" :item="item" />
+        </section>
     </section>
 </template>
 
 <script>
 import MusicBox from '../components/MusicBox'
 import carousel from 'vue-owl-carousel'
+import Scrollbar from 'smooth-scrollbar'
+import HorizontalScrollPlugin from '../utility/HorizontalScrollPlugin'
+Scrollbar.use(HorizontalScrollPlugin)
 
 export default {
   name: 'MusicRow',
   props: ['items', 'title'],
-  components: { MusicBox, carousel }
+  components: { MusicBox, carousel },
+  mounted () {
+    let container = this.$el.getElementsByClassName('items')[0]
+    Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true, horizontal: true })
+  }
 }
 </script>
 
@@ -26,7 +33,8 @@ section.music-row
         font-family: 'Roboto Slab', serif        
         margin: 20px 0px
         white-space: nowrap
-    .carousel-custom
-      .owl-stage-outer
-        overflow: unset
+    .items
+      overflow: visible !important
+    .scroll-content
+        display: flex
 </style>
diff --git a/src/renderer/utility/HorizontalScrollPlugin.js b/src/renderer/utility/HorizontalScrollPlugin.js
index b9043b4..7c96166 100644
--- a/src/renderer/utility/HorizontalScrollPlugin.js
+++ b/src/renderer/utility/HorizontalScrollPlugin.js
@@ -7,6 +7,9 @@ export default class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {
         return delta
       }
       // @see: https://github.com/idiotWu/smooth-scrollbar/issues/181
+      if (!this.scrollbar.options.horizontal) {
+        return
+      }
       const { x, y } = delta
       return {
         y: 0,