A few fixes and a basic implementation

src/App.vue

@@ -56,6 +56,11 @@ export default {
         id: 'trending',
         name: 'Trending',
         to: '/'
+      },
+      {
+        id: 'watch-history',
+        name: 'Watch History',
+        to: '/watch-history'
       }
     ]
   }),

src/components/VideoItem.vue

@@ -3,15 +3,16 @@
       <v-img
         :height="height"
         :width="width"
-        :src="video.thumbnail"
+        :src="video.thumbnail || video.thumbnailUrl"
         alt="thumbnail"
         loading="lazy"
       />
       <v-card-title class="subtitle-1">{{ video.title }}</v-card-title>
       <v-card-text>
-        <router-link :to="video.uploaderUrl" class="subtitle-1 text-decoration-none" v-if="video.uploaderUrl && video.uploaderName && !hideChannel" custom v-slot="{ navigate }">
-          <h5 @click="navigate" @keypress.enter="navigate" role="link">{{ video.uploaderName }}</h5>
+        <router-link :to="video.uploaderUrl" class="subtitle-1 text-decoration-none" v-if="video.uploaderUrl && (video.uploaderName || video.uploader) && !hideChannel" custom v-slot="{ navigate }">
+          <h5 @click="navigate" @keypress.enter="navigate" role="link">{{ video.uploaderName || video.uploader }}</h5>
         </router-link>
+        <slot />
         {{ numberFormat(video.views) }} views <br />
         {{ video.uploadedDate }} <br />
         {{ timeFormat(video.duration) }}

src/routes/WatchHistory.vue

@@ -1,20 +1,76 @@
 <template>
-  <v-progress-linear height="1vh" indeterminate />
+  <v-progress-linear height="1vh" indeterminate v-if="loaded === false" />
+  <v-container fluid v-else>
+    <v-row justify="center">
+      <v-col md="4" offset-md="1">
+        <v-btn outlined @click="deleteWatchHistory" x-large>Delete History</v-btn>
+      </v-col>
+    </v-row>
+    <v-row v-for="(chunk, chunkId) in chunkedByFour" :key="chunkId">
+      <v-col md="3" v-for="doc in chunk" :key="doc._id">
+        <VideoItem :video="doc.video">
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on, attrs }">
+              <span v-bind="attrs" v-on="on">
+                Watched {{ doc.timeAgo }}
+              </span>
+            </template>
+            <span>{{ doc.timestamp.toString() }}</span>
+          </v-tooltip><br />
+        </VideoItem>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
-import { getWatchedVideos } from '@/store/watched-videos-db'
+import _chunk from 'lodash-es/chunk'
+
+import { deleteWatchedVideos, getWatchedVideos } from '@/store/watched-videos-db'
+import { LibPiped } from '@/tools/libpiped'
+import VideoItem from '@/components/VideoItem'
 
 export default {
+  components: {
+    VideoItem
+  },
   data: () => ({
     loaded: false,
-    data: null
+    data: null,
+    headers: [
+      {
+        text: 'Title',
+        value: 'video.title'
+      },
+      {
+        text: 'Date & Time',
+        value: 'timestamp'
+      },
+      {
+        text: 'URL',
+        value: 'url'
+      }
+    ]
   }),
 
   methods: {
     async loadData () {
-      this.data = await getWatchedVideos()
+      this.data = (await getWatchedVideos()).map(doc => {
+        doc.timeAgo = LibPiped.timeAgo(doc.timestamp)
+        return doc
+      })
       this.loaded = true
+    },
+
+    async deleteWatchHistory () {
+      await deleteWatchedVideos()
+      await this.loadData()
+    }
+  },
+
+  computed: {
+    chunkedByFour () {
+      return _chunk(this.data, 4)
     }
   },
 

src/routes/WatchVideo.vue

@@ -215,7 +215,7 @@ export default {
             )
           }
         }).then(() => {
-          return addWatchedVideo(this.video)
+          return addWatchedVideo(this.video, this.$route.fullPath)
         })
     },
     async getSponsors () {

src/store/watched-videos-db.js

@@ -6,12 +6,16 @@ function generateRandomID () {
   return crypto.randomBytes(16).toString('hex')
 }
 
-export const WatchedVideosDB = new PouchDB('WatchedVideosDB')
+export const WatchedVideosDB = new PouchDB('WatchedVideosDB', {
+  auto_compaction: true
+})
 
-export async function addWatchedVideo (videoObj) {
+export async function addWatchedVideo (videoObj, currentUrl) {
   return WatchedVideosDB.put({
     _id: generateRandomID(),
-    ...videoObj
+    video: videoObj,
+    url: currentUrl,
+    timestamp: new Date()
   })
 }
 
@@ -19,11 +23,16 @@ export async function getWatchedVideos () {
   const data = await WatchedVideosDB.allDocs({
     include_docs: true
   })
-  return data.rows.map(row => row.doc)
+  return data.rows.map(row => row.doc).map(doc => {
+    doc.timestamp = new Date(doc.timestamp)
+    return doc
+  }).sort((a, b) => {
+    return b.timestamp - a.timestamp
+  })
 }
 
 export async function deleteWatchedVideos () {
-  const docs = await WatchedVideosDB.allDocs()
+  const docs = await getWatchedVideos()
   await WatchedVideosDB.bulkDocs(docs.map(doc => ({
     _id: doc._id,
     _rev: doc._rev,