CSS Changes to mediaitem-square, updated to do with code for playlist sorting

src/renderer/style.less

@@ -4,7 +4,7 @@
   --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
   --mediaItemShadow-Shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
   --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
-  --mediaItemRadius: 4px;
+  --mediaItemRadius: 6px;
   --mediaItemRadiusRound: 100%;
   --contentInnerPadding: 16px;
   --navbarHeight: 48px;
@@ -1606,8 +1606,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   background: rgba(200, 200, 200, 0.05);
   border-radius: 10px;
   padding: var(--contentInnerPadding);
-  box-shadow: rgb(0 0 0 / 8%) 0px 0px 0px 1px;
+  box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
   margin-top: 16px;
+  display: flex;
+  flex-flow: wrap;
+  justify-content: center;
+
+  >.cd-mediaitem-square {
+    width: 220px;
+    height: 260px;
+    display: inline-flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    font-size: 14px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    max-width: 240px;
+    flex-grow: 1;
+  }
 }
 
 /* Album / Playlist Page */
@@ -2573,6 +2590,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     text-align: center;
     font-size: 12px;
   }
+
+  &.mediaitem-video {
+    height: 200px;
+    .artwork {
+      height: 106px;
+    }
+  }
 }
 
 .cd-btn-seeall {

src/renderer/todo.js

@@ -160,3 +160,21 @@ function processChunk (response) {
 // create Artist / Song/ Album stations:
 app.mk.setStationQueue({artist:"1258279972"})
 app.mk.setStationQueue({song:"1437308307"}) // yes the song id here can be the albumId, but just keep using the song:
+
+// Sorting Playlists, send an array of tracks in the format below
+// playlist must be fully recursively downloaded first before sorting
+
+app.mk.api.library.putPlaylistTracklisting(app.showingPlaylist.attributes.playParams.id, [
+    {
+        "id": relationships.tracks.data[X].id,
+        "type": relationships.tracks.data[X].type
+    },
+    {
+        "id": relationships.tracks.data[X].id,
+        "type": relationships.tracks.data[X].type
+    },
+    {
+        "id": relationships.tracks.data[X].id,
+        "type": relationships.tracks.data[X].type
+    },
+])

src/renderer/views/components/mediaitem-square.ejs

@@ -1,7 +1,7 @@
 <script type="text/x-template" id="mediaitem-square">
     <template>
         <div tabindex="0"
-             class="cd-mediaitem-square" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
+             class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
             <template v-if="isVisible">
                     <div class="artwork-container">
                         <div class="artwork" @click='app.routeView(item)'>
@@ -37,6 +37,16 @@
             }
         },
         methods: {
+            getClasses() {
+                switch(this.item.type) {
+                    default:
+                        return []
+                    break;
+                    case "uploaded-videos":
+                        return "mediaitem-video";
+                    break;
+                }
+            },
             visibilityChanged: function (isVisible, entry) {
                 this.isVisible = isVisible
             },

src/renderer/views/pages/library-albums.ejs

@@ -48,9 +48,11 @@
                 </div>
             </div>
         </div>
-        <mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
+        <div class="well">
-        </mediaitem-square>
+            <mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
-        <mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
+            </mediaitem-square>
-        </mediaitem-list-item>
+            <mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
+            </mediaitem-list-item>
+        </div>
     </div>
 </template>

src/renderer/views/pages/library-recentlyadded.ejs

@@ -5,7 +5,8 @@
                 <h1 class="header-text">Recently Added</h1>
             </div>
             <div class="col-auto">
-                <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
+                <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)"
+                        class="reload-btn"><%- include('../svg/redo.svg') %></button>
             </div>
         </div>
         <div class="row">
@@ -23,7 +24,8 @@
             <div class="col-auto flex-center">
                 <div class="row">
                     <div class="col">
-                        <select class="md-select" v-model="library.albums.sortOrder[0]" @change="searchLibraryAlbums(0)">
+                        <select class="md-select" v-model="library.albums.sortOrder[0]"
+                                @change="searchLibraryAlbums(0)">
                             <optgroup label="Sort Order">
                                 <option value="asc">Ascending</option>
                                 <option value="desc">Descending</option>
@@ -41,9 +43,14 @@
                 </div>
             </div>
         </div>
-        <mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
+        <div class="well">
-        </mediaitem-square>
+            <mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item"
-        <mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
+                              v-for="item in library.albums.displayListing">
-        </mediaitem-list-item>
+            </mediaitem-square>
+            <mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true"
+                                 :show-library-status="false" :item="item"
+                                 v-for="item in library.albums.displayListing">
+            </mediaitem-list-item>
+        </div>
     </div>
 </template>