From df14eb4ba6955ce05d26d9481f7798bb8a85ddf8 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Fri, 28 Jan 2022 23:43:20 +0700
Subject: [PATCH] add library videos page

---
 src/i18n/en_US.jsonc                          |  1 +
 src/renderer/assets/feather/video.svg         |  1 +
 .../views/components/mediaitem-square.ejs     |  1 +
 src/renderer/views/main.ejs                   | 10 ++++++
 src/renderer/views/pages/library-videos.ejs   | 34 +++++++++++++++++++
 5 files changed, 47 insertions(+)
 create mode 100644 src/renderer/assets/feather/video.svg
 create mode 100644 src/renderer/views/pages/library-videos.ejs

diff --git a/src/i18n/en_US.jsonc b/src/i18n/en_US.jsonc
index ecccd6f5..9fea2dfa 100644
--- a/src/i18n/en_US.jsonc
+++ b/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
diff --git a/src/renderer/assets/feather/video.svg b/src/renderer/assets/feather/video.svg
new file mode 100644
index 00000000..8ff156aa
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index d4093d66..469ebac0 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/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;
                 }
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index d674ee29..b153e0d5 100644
--- a/src/renderer/views/main.ejs
+++ b/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>
diff --git a/src/renderer/views/pages/library-videos.ejs b/src/renderer/views/pages/library-videos.ejs
new file mode 100644
index 00000000..69fe24c6
--- /dev/null
+++ b/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>
+    
\ No newline at end of file