remove vue2-perfect-scrollbar

assets/scss/globals.scss

@@ -154,10 +154,14 @@
 
 .player-browser-scroll {
     height: calc(100% - 50px);
+    overflow: auto;
+    scrollbar-width: medium;
 }
 
 .browser-div .media-browser-scroll {
     height: 100%;
+    overflow: auto;
+    scrollbar-width: medium;
 }
 
 .playlist-container .ps {

nuxt.config.js

@@ -46,7 +46,6 @@ export default {
         { src: '~/plugins/helpers.js' },
         { src: '~/plugins/nuxt-client-init.js', ssr: false },
         { src: '~plugins/video.js', ssr: false },
-        { src: '~plugins/scrollbar.js', ssr: false },
         { src: '~plugins/splitpanes.js', ssr: false },
         { src: '~plugins/loading.js', ssr: false },
         { src: '~plugins/draggable.js', ssr: false },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffplayout-frontend",
-  "version": "5.2.0",
+  "version": "5.2.3",
   "description": "Web GUI for ffplayout",
   "author": "Jonathan Baecker",
   "private": true,
@@ -25,7 +25,6 @@
     "splitpanes": "^2.4.1",
     "video.js": "^7.20.2",
     "vue-loading-overlay": "^3.4.2",
-    "vue2-perfect-scrollbar": "^1.5.5",
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {

pages/logging.vue

@@ -7,10 +7,8 @@
             </b-col>
         </b-row>
         <b-container class="log-container">
-            <!-- eslint-disable-next-line -->
+            <div
-            <perfect-scrollbar
                 v-if="currentLog"
-                :options="scrollOP"
                 class="log-content"
                 :inner-html.prop="currentLog | formatStr"
             />
@@ -53,11 +51,7 @@ export default {
     data () {
         return {
             currentLog: null,
-            listDate: this.$dayjs().utcOffset(0).format('YYYY-MM-DD'),
+            listDate: this.$dayjs().utcOffset(0).format('YYYY-MM-DD')
-            scrollOP: {
-                wheelSpeed: 5,
-                minScrollbarLength: 30
-            }
         }
     },
 
@@ -139,6 +133,8 @@ export default {
     font-family: monospace;
     font-size: 13px;
     white-space: pre;
+    overflow: scroll;
+    scrollbar-width: medium;
 }
 
 .log-info {

pages/media.vue

@@ -31,7 +31,7 @@
                 <splitpanes class="browser-row default-theme pane-row">
                     <pane min-size="20" size="24">
                         <div class="browser-div">
-                            <perfect-scrollbar :options="scrollOP" class="media-browser-scroll">
+                            <div class="media-browser-scroll">
                                 <b-list-group class="folder-list">
                                     <b-list-group-item
                                         v-for="folder in folderTree.folders"
@@ -55,7 +55,7 @@
                                         </b-row>
                                     </b-list-group-item>
                                 </b-list-group>
-                            </perfect-scrollbar>
+                            </div>
                         </div>
                     </pane>
                     <pane class="files-col">
@@ -67,7 +67,7 @@
                             color="#ff9c36"
                         />
                         <div class="browser-div">
-                            <perfect-scrollbar :options="scrollOP" class="media-browser-scroll">
+                            <div class="media-browser-scroll">
                                 <b-list-group class="files-list">
                                     <b-list-group-item
                                         v-for="file in folderTree.files"
@@ -102,7 +102,7 @@
                                         </b-row>
                                     </b-list-group-item>
                                 </b-list-group>
-                            </perfect-scrollbar>
+                            </div>
                         </div>
                     </pane>
                 </splitpanes>
@@ -290,10 +290,7 @@ export default {
             overallProgress: 0,
             currentProgress: 0,
             cancelTokenSource: this.$axios.CancelToken.source(),
-            lastPath: '',
+            lastPath: ''
-            scrollOP: {
-                suppressScrollX: true
-            }
         }
     },
 
@@ -614,6 +611,7 @@ export default {
 .folder-list {
     height: 100%;
     padding: .5em;
+    width: 98%;
 }
 
 .folder-delete {

pages/player.vue

@@ -158,7 +158,7 @@
                             </b-breadcrumb>
                         </div>
 
-                        <perfect-scrollbar :options="scrollOP" class="player-browser-scroll">
+                        <div class="player-browser-scroll">
                             <b-list-group>
                                 <b-list-group-item
                                     v-for="folder in folderTree.folders"
@@ -199,7 +199,7 @@
                                     </b-list-group-item>
                                 </draggable>
                             </b-list-group>
-                        </perfect-scrollbar>
+                        </div>
                     </div>
                 </pane>
                 <pane>
@@ -237,7 +237,7 @@
                                 </b-row>
                             </b-list-group-item>
                         </b-list-group>
-                        <perfect-scrollbar id="scroll-container" :options="scrollOP">
+                        <div id="scroll-container">
                             <loading
                                 :active.sync="playlistIsLoading"
                                 :can-cancel="false"
@@ -303,7 +303,7 @@
                                     </b-list-group-item>
                                 </draggable>
                             </b-list-group>
-                        </perfect-scrollbar>
+                        </div>
                     </div>
                 </pane>
             </splitpanes>
@@ -465,10 +465,6 @@ export default {
             previewOptions: {},
             previewComp: null,
             previewSource: '',
-            scrollOP: {
-                suppressScrollX: true,
-                minScrollbarLength: 30
-            },
             editId: undefined,
             newSource: {
                 begin: 0,
@@ -1084,6 +1080,8 @@ export default {
 
 #scroll-container {
     height: calc(100% - 47px);
+    overflow: auto;
+    scrollbar-width: medium;
 }
 
 .playlist-item {

plugins/scrollbar.js

@@ -1,5 +0,0 @@
-import Vue from 'vue'
-import PerfectScrollbar from 'vue2-perfect-scrollbar'
-import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'
-
-Vue.use(PerfectScrollbar)