From cadc1ac72c0df60ecf26a4cf34beb0f185abb661 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Sun, 22 Aug 2021 01:18:16 +0530
Subject: [PATCH] Add support for client-side watch history.

---
 src/App.vue                    | 17 +++++++
 src/components/FeedPage.vue    | 23 ++++++++-
 src/components/HistoryPage.vue | 88 ++++++++++++++++++++++++++++++++++
 src/components/LoginPage.vue   |  1 -
 src/components/Navigation.vue  | 14 +++++-
 src/components/Preferences.vue | 19 ++++++--
 src/components/VideoItem.vue   |  6 +++
 src/components/WatchVideo.vue  | 23 ++++++---
 src/router/router.js           |  5 ++
 9 files changed, 182 insertions(+), 14 deletions(-)
 create mode 100644 src/components/HistoryPage.vue

diff --git a/src/App.vue b/src/App.vue
index 4e74b80b..66a70eb1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,6 +41,23 @@ export default {
                 default:
                     break;
             }
+
+        if (this.getPreferenceBoolean("watchHistory", false))
+            if ("indexedDB" in window) {
+                const request = indexedDB.open("piped-db", 1);
+                request.onupgradeneeded = function() {
+                    const db = request.result;
+                    console.log("Upgrading object store.");
+                    if (!db.objectStoreNames.contains("watch_history")) {
+                        const store = db.createObjectStore("watch_history", { keyPath: "videoId" });
+                        store.createIndex("video_id_idx", "videoId", { unique: true });
+                        store.createIndex("id_idx", "id", { unique: true, autoIncrement: true });
+                    }
+                };
+                request.onsuccess = e => {
+                    window.db = e.target.result;
+                };
+            } else console.log("This browser doesn't support IndexedDB");
     },
 };
 </script>
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 90d505be..c764f2f2 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -44,7 +44,28 @@ export default {
         };
     },
     mounted() {
-        this.fetchFeed().then(videos => (this.videos = videos));
+        this.fetchFeed().then(videos => {
+            this.videos = videos;
+            (async () => {
+                if (window.db) {
+                    var tx = window.db.transaction("watch_history", "readonly");
+                    var store = tx.objectStore("watch_history");
+                    const cursorRequest = store.openCursor();
+                    cursorRequest.onsuccess = e => {
+                        const cursor = e.target.result;
+                        if (cursor) {
+                            const video = this.videos.filter(
+                                video => video.url.substr(-11) === cursor.value.videoId,
+                            )[0];
+                            if (video != null) {
+                                video.watched = true;
+                            }
+                            cursor.continue();
+                        }
+                    };
+                }
+            })();
+        });
     },
     activated() {
         document.title = "Feed - Piped";
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
new file mode 100644
index 00000000..0a87a796
--- /dev/null
+++ b/src/components/HistoryPage.vue
@@ -0,0 +1,88 @@
+<template>
+    <h1 class="uk-text-bold uk-text-center">Watch History</h1>
+
+    <br />
+    Sort by:
+    <select class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()">
+        <option value="descending">Most Recent</option>
+        <option value="ascending">Least Recent</option>
+        <option value="channel_ascending">Channel Name (A-Z)</option>
+        <option value="channel_descending">Channel Name (Z-A)</option>
+    </select>
+
+    <hr />
+
+    <div class="uk-grid-xl" uk-grid="parallax: 0">
+        <div
+            :style="[{ background: backgroundColor }]"
+            class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
+            v-bind:key="video.url"
+            v-for="video in videos"
+        >
+            <VideoItem :video="video" />
+        </div>
+    </div>
+</template>
+
+<script>
+import VideoItem from "@/components/VideoItem.vue";
+
+export default {
+    data() {
+        return {
+            videos: [],
+            selectedSort: "descending",
+        };
+    },
+    mounted() {
+        (async () => {
+            if (window.db) {
+                var tx = window.db.transaction("watch_history", "readonly");
+                var store = tx.objectStore("watch_history");
+                const cursorRequest = store.openCursor();
+                cursorRequest.onsuccess = e => {
+                    const cursor = e.target.result;
+                    if (cursor) {
+                        const video = cursor.value;
+                        this.videos.push({
+                            url: "/watch?v=" + video.videoId,
+                            title: video.title,
+                            uploaderName: video.uploaderName,
+                            uploaderUrl: video.uploaderUrl,
+                            duration: video.duration,
+                            thumbnail: video.thumbnail,
+                            watchedAt: video.watchedAt,
+                        });
+                        this.videos.sort((a, b) => b.watchedAt - a.watchedAt); // TODO: Optimize
+                        if (this.videos.length < 1000) cursor.continue();
+                    }
+                };
+            }
+        })();
+    },
+    activated() {
+        document.title = "Watch History - Piped";
+    },
+    methods: {
+        onChange() {
+            switch (this.selectedSort) {
+                case "ascending":
+                    this.videos.sort((a, b) => a.watchedAt - b.watchedAt);
+                    break;
+                case "descending":
+                    this.videos.sort((a, b) => b.watchedAt - a.watchedAt);
+                    break;
+                case "channel_ascending":
+                    this.videos.sort((a, b) => a.uploaderName.localeCompare(b.uploaderName));
+                    break;
+                case "channel_descending":
+                    this.videos.sort((a, b) => b.uploaderName.localeCompare(a.uploaderName));
+                    break;
+            }
+        },
+    },
+    components: {
+        VideoItem,
+    },
+};
+</script>
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 60f967cf..66862fb6 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -50,7 +50,6 @@ export default {
     },
     methods: {
         login() {
-            console.log("authToken" + this.hashCode(this.apiUrl()));
             this.fetchJson(this.apiUrl() + "/login", null, {
                 method: "POST",
                 body: JSON.stringify({
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 6ff4ca61..7e0a7edb 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -6,7 +6,13 @@
     >
         <div class="uk-navbar-left">
             <router-link class="uk-navbar-item uk-logo uk-text-bold" :style="[{ colour: foregroundColor }]" to="/"
-                ><img alt="logo" src="/img/icons/logo.svg" height="32" width="32" style="margin-bottom: 6px; margin-right: -13px" />iped</router-link
+                ><img
+                    alt="logo"
+                    src="/img/icons/logo.svg"
+                    height="32"
+                    width="32"
+                    style="margin-bottom: 6px; margin-right: -13px"
+                />iped</router-link
             >
         </div>
         <div class="uk-navbar-center uk-flex uk-visible@m">
@@ -31,6 +37,9 @@
                 <li v-if="shouldShowLogin">
                     <router-link to="/register">Register</router-link>
                 </li>
+                <li v-if="shouldShowHistory">
+                    <router-link to="/history">History</router-link>
+                </li>
                 <li v-if="authenticated">
                     <router-link to="/feed">Feed</router-link>
                 </li>
@@ -73,6 +82,9 @@ export default {
         shouldShowLogin(_this) {
             return _this.getAuthToken() == null;
         },
+        shouldShowHistory(_this) {
+            return _this.getPreferenceBoolean("watchHistory", false);
+        },
     },
     methods: {
         onKeyUp(e) {
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
index 65dae628..7ce37f81 100644
--- a/src/components/Preferences.vue
+++ b/src/components/Preferences.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="uk-flex uk-flex-between uk-flex-middle">
-        <router-link class="uk-button uk-button-text" to="/"
-            ><font-awesome-icon icon="chevron-left" /> &nbsp;Back</router-link
-        >
+        <button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
+            <font-awesome-icon icon="chevron-left" /> &nbsp;Back
+        </button>
         <span><h1 class="uk-text-bold uk-text-center">Preferences</h1></span>
         <span />
     </div>
@@ -88,6 +88,10 @@
     <b>Minimize Description by default</b>
     <br />
     <input class="uk-checkbox" v-model="minimizeDescription" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Store Watch History</b>
+    <br />
+    <input class="uk-checkbox" v-model="watchHistory" @change="onChange($event)" type="checkbox" />
     <h2>Instances List</h2>
     <table class="uk-table">
         <thead>
@@ -147,6 +151,7 @@ export default {
             defaultHomepage: "trending",
             showComments: true,
             minimizeDescription: false,
+            watchHistory: false,
         };
     },
     activated() {
@@ -223,6 +228,7 @@ export default {
             this.defaultHomepage = this.getPreferenceString("homepage", "trending");
             this.showComments = this.getPreferenceBoolean("comments", true);
             this.minimizeDescription = this.getPreferenceBoolean("minimizeDescription", false);
+            this.watchHistory = this.getPreferenceBoolean("watchHistory", false);
         }
     },
     methods: {
@@ -230,7 +236,11 @@ export default {
             if (localStorage) {
                 var shouldReload = false;
 
-                if (this.getPreferenceString("theme", "dark") !== this.selectedTheme) shouldReload = true;
+                if (
+                    this.getPreferenceString("theme", "dark") !== this.selectedTheme ||
+                    this.getPreferenceBoolean("watchHistory", false) != this.watchHistory
+                )
+                    shouldReload = true;
 
                 localStorage.setItem("instance", this.selectedInstance);
                 localStorage.setItem("sponsorblock", this.sponsorBlock);
@@ -254,6 +264,7 @@ export default {
                 localStorage.setItem("homepage", this.defaultHomepage);
                 localStorage.setItem("comments", this.showComments);
                 localStorage.setItem("minimizeDescription", this.minimizeDescription);
+                localStorage.setItem("watchHistory", this.watchHistory);
 
                 if (shouldReload) window.location.reload();
             }
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 76d36972..540669ba 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -16,6 +16,12 @@
                     style="bottom: 5px; right: 5px; background: rgba(0, 0, 0, .75); color: white; padding: 0 5px;"
                     >{{ timeFormat(video.duration) }}</span
                 >
+                <span
+                    v-if="video.watched"
+                    class="uk-label uk-border-rounded uk-position-absolute video-duration"
+                    style="bottom: 5px; left: 5px; background: rgba(0, 0, 0, .75); color: white; padding: 0 5px;"
+                    >Watched</span
+                >
             </div>
             <p class="uk-text-break">{{ video.title }}</p>
         </router-link>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index b467434c..0fd059a5 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -144,6 +144,22 @@ export default {
     },
     mounted() {
         this.getVideoData().then(() => {
+            (async () => {
+                if (window.db) {
+                    var tx = window.db.transaction("watch_history", "readwrite");
+                    var store = tx.objectStore("watch_history");
+                    var video = {
+                        videoId: this.getVideoId(),
+                        title: this.video.title,
+                        duration: this.video.duration,
+                        thumbnail: this.video.thumbnailUrl,
+                        uploaderUrl: this.video.uploaderUrl,
+                        uploaderName: this.video.uploader,
+                        watchedAt: Date.now(),
+                    };
+                    store.add(video);
+                }
+            })();
             if (this.active) this.$refs.videoPlayer.loadVideo();
         });
         this.getSponsors();
@@ -163,13 +179,6 @@ export default {
         this.active = false;
         window.removeEventListener("scroll", this.handleScroll);
     },
-    watch: {
-        "$route.query.v": function(v) {
-            if (v) {
-                window.scrollTo(0, 0);
-            }
-        },
-    },
     methods: {
         fetchVideo() {
             return this.fetchJson(this.apiUrl() + "/streams/" + this.getVideoId());
diff --git a/src/router/router.js b/src/router/router.js
index ca0a805f..d38300eb 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -60,6 +60,11 @@ const routes = [
         name: "Subscriptions",
         component: () => import("../components/SubscriptionsPage.vue"),
     },
+    {
+        path: "/history",
+        name: "Watch History",
+        component: () => import("../components/HistoryPage.vue"),
+    },
 ];
 
 const router = createRouter({