add library videos page

src/i18n/en_US.jsonc

@@ -115,6 +115,7 @@
   "term.equalizer": "Equalizer",
   "term.reset": "Reset",
   "term.tracks": "tracks", // Assume x amount of tracks. e.g. 50 tracks 
+  "term.videos": "Videos", 
   
 
   // Home

src/renderer/assets/feather/video.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>

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

@@ -222,6 +222,7 @@
                     case "music-videos":
                     case "uploadedVideo":
                     case "uploaded-videos":
+                    case "library-music-videos":    
                         return "mediaitem-video";
                         break;
                 }

src/renderer/views/main.ejs

@@ -227,6 +227,7 @@
                                               page="library-albums"></sidebar-library-item>
                         <sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
                                               page="library-artists"></sidebar-library-item>
+                        <sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg" page="library-videos"></sidebar-library-item>
                         <sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg" page="podcasts">
                         </sidebar-library-item>
                         <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
@@ -383,6 +384,12 @@
                             <apple-podcasts></apple-podcasts>
                         </template>
                     </transition>
+                    <!-- Library - Library Videos -->
+                    <transition name="wpfade" >
+                        <template v-if="page == 'library-videos'">                       
+                            <cider-library-videos></cider-library-videos>
+                        </template>
+                    </transition>
 
                     <!-- Apple Setings Page -->
                     <transition name="wpfade">
@@ -710,6 +717,9 @@
 <!-- About -->
 <%- include('pages/about') %>
 
+
+<%- include('pages/library-videos') %>
+
 <script type="text/x-template"
         id="am-musiccovershelf">
     <h1>{{ component.attributes.title.stringForDisplay }}</h1>

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

@@ -0,0 +1,34 @@
+<script type="text/x-template" id="cider-library-videos">
+    <div class="content-inner">
+            <div class="row">
+                <div class="col" style="padding:0">
+                    <h1 class="header-text">{{$root.getLz('term.videos')}}</h1>
+                </div>
+            </div> 
+            <div class="madeforyou-body">  
+                <mediaitem-square :size="300" :item="item" v-for="item in videos">
+                </mediaitem-square>  
+            </div>                   
+    </div>
+</script>
+
+<script>
+    Vue.component('cider-library-videos', {
+        template: "#cider-library-videos",
+        props: ["data"],
+        data: function(){
+            return {
+                app : this.$root,
+                videos: [],
+            }
+        },
+        mounted() {
+            this.$nextTick(async function () {
+                if (this.$data.videos == null || this.$data.videos.length == 0)
+                this.$data.videos = (await app.mk.api.v3.music('/v1/me/library/music-videos')).data?.data ?? []
+                console.log(this.$data.videos.length > 0)
+            })
+        }
+    })    
+</script>
+