playlist/album revamp, temp disabled inline playlists

revamped playlists/albums pages

temporarily disabled inline versions until they are updated

src/renderer/less/bootstrap.less

@@ -991,6 +991,18 @@
   opacity   : 0;
 }
 
+.fade {
+  transition: opacity 0.15s var(--appleEase);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+.fade:not(.show) {
+  opacity: 0;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .modal.fade .modal-dialog {
     transition: none;
@@ -2424,6 +2436,7 @@ fieldset:disabled .btn {
   -webkit-user-drag: none;
   // transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
   font-weight: 500;
+  margin: 0px 4px;
   &:hover {
     // transition: transform .35s var(--appleEase), background-color 0s var(--appleEase);
     background-color: var(--hover);

src/renderer/less/pages.less

@@ -493,10 +493,41 @@
   //background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%);
   top         : 0;
   padding-top : var(--navigationBarHeight);
+  display:flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 
   .playlist-body {
-    padding   : var(--contentInnerPadding) 2em;
+    padding   : 32px;
-    margin-top: -75px;
+    // margin-top: -75px;
+    overflow-y:overlay;
+    height:100%;
+    padding:0px;
+    background-color: var(--color1);
+
+    &.scrollbody {
+      .tabs {
+        display: flex;
+        flex-flow: column;
+        height: 100%;
+
+        .tab-content {
+          height: 100%;
+          overflow: hidden;
+          margin:0px;
+          .tab-pane {
+            height: 100%;
+            overflow-y: overlay;
+            overflow-x:hidden;
+            padding: var(--contentInnerPadding);
+            .well {
+              margin:0px;
+            }
+          }
+        }
+      }
+    }
   }
 
   .floating-header {
@@ -510,6 +541,7 @@
     background     : rgba(0, 0, 0, 0.25);
     top            : var(--navigationBarHeight);
     transition     : opacity 0.1s var(--appleEase);
+    display: none;
   }
 
   .playlist-display {

src/renderer/main/vueapp.js

@@ -1652,7 +1652,8 @@ const app = new Vue({
                     params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright"
                 }
 
-                if (this.cfg.advanced.experiments.includes('inline-playlists')) {
+                // if (this.cfg.advanced.experiments.includes('inline-playlists')) {
+                if(false) {
                     let showModal = kind.toString().includes("album") || kind.toString().includes("playlist")
                     if (app.page.includes("playlist") || app.page.includes("album")) {
                         showModal = false

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

@@ -1,5 +1,5 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal">
-    <vue-horizontal>
+    <vue-horizontal ref="horizontal">
         <slot></slot>
         <mediaitem-square :key="item?.id ?? ''" :kind="kind" :item="item" v-for="item in items"></mediaitem-square>
     </vue-horizontal>
@@ -24,6 +24,9 @@
                 app: this.$root,
             }
         },
+        mounted() {
+            // this.$refs.horizontal.refresh()
+        },
         methods: {}
     });
 </script>

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

@@ -142,8 +142,11 @@
                     </div>
                 </div>
             </div>
-            <div class="playlist-body">
+            <div class="playlist-body scrollbody">
-                <div class="well">
+
+                <b-tabs pills align="center" content-class="mt-3">
+                    <b-tab title="Tracks">
+                        <div class="">
                             <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()">
@@ -198,8 +201,10 @@
                             </div>
                         </template>
                         <hr>
-                <template v-if="typeof data.meta != 'undefined'">
+                    </b-tab>
-                    <div v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
+                    <template v-if="typeof data.views != 'undefined'">
+                    <b-tab lazy :title="data.views[view].attributes.title" v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
+                        <div>
                             <div class="row">
                             <div class="col">
                                 <h3>{{ data.views[view].attributes.title }}</h3>
@@ -212,8 +217,10 @@
                             </div>
                         </div>
                             </div>
+                    </b-tab>
                     </template>
 
+                </b-tabs>
             </div>
         </template>
     </div>
@@ -278,7 +285,8 @@
                     }
                     console.log(this.nestedPlaylist)
 
-            }},
+                }
+            },
             isHeaderVisible(visible) {
                 this.headerVisible = visible
             },

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

@@ -151,12 +151,14 @@
                         </div>
                     </div>
                 </div>
-                <div class="playlist-body">
+                <div class="playlist-body scrollbody">
-                    <div class="well">
+
+                    <b-tabs pills align="center" content-class="mt-3">
+                        <b-tab title="Tracks">
+                            <div class="">
                                 <div style="width:100%">
                                     <draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
-                                       v-model="data.relationships.tracks.data" @start="drag=true"
+                                               v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
-                                       @end="drag=false;put()">
                                                <template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">      
                                                 <mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
                                                                      :showIndex="true"
@@ -183,8 +185,7 @@
                             <div class="friends-info" v-if="itemBadges.length != 0">
                                 <div class="well">
                                     <div class="badge-container">
-                                <div class="socialBadge"
+                                        <div class="socialBadge" :title="`${badge.attributes.name} - @${badge.attributes.handle}`"
-                                     :title="`${badge.attributes.name} - @${badge.attributes.handle}`"
                                              v-for="badge in itemBadges">
                                             <mediaitem-artwork
                                                     :url="badge.attributes.artwork.url"
@@ -209,20 +210,26 @@
                                 </div>
                             </template>
                             <hr>
-                    <template v-if="typeof data.meta != 'undefined'">
+                        </b-tab>
-                        <div v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
+                        <template v-if="typeof data.views != 'undefined'">
+                        <b-tab lazy :title="data.views[view].attributes.title" v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
+                            <div>
                                 <div class="row">
                                 <div class="col">
                                     <h3>{{ data.views[view].attributes.title }}</h3>
                                 </div>
                             </div>
-                            <div>
+                            <div class="row">
+                                <div class="col">
                                     <mediaitem-scroller-horizontal
                                             :items="data.views[view].data"></mediaitem-scroller-horizontal>
                                 </div>
                             </div>
+                                </div>
+                        </b-tab>
                         </template>
     
+                    </b-tabs>
                 </div>
             </template>
         </div>

src/renderer/views/pages/settings.ejs

@@ -919,7 +919,7 @@
                                 {{$root.getLz('settings.option.experimental.inline_playlists')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <input type="checkbox" v-model="app.cfg.advanced.experiments.includes('inline-playlists')" @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')" switch/>
+                                <input type="checkbox" disabled v-model="app.cfg.advanced.experiments.includes('inline-playlists')" @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')" switch/>
                             </div>
                         </div>