gbrown/Piped
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add support for client-side watch history. (#370)

Browse source 
* Add support for client-side watch history.

* Update watched videos more often.
This commit is contained in:
Kavin 2021-08-22 15:57:09 +05:30 committed by GitHub
parent 6688fafeaa
commit 8feb4fbc41
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 193 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/App.vue
View file

@ -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>

4
src/components/Channel.vue
View file

@ -47,6 +47,7 @@ export default {
activated() {
if (this.channel && !this.channel.error) document.title = this.channel.name + " - Piped";
window.addEventListener("scroll", this.handleScroll);
if (this.channel && !this.channel.error) this.updateWatched(this.channel.relatedStreams);
},
deactivated() {
window.removeEventListener("scroll", this.handleScroll);
@ -78,6 +79,7 @@ export default {
if (!this.channel.error) {
document.title = this.channel.name + " - Piped";
if (this.authenticated) this.fetchSubscribedStatus();
this.updateWatched(this.channel.relatedStreams);
}
});
},
@ -88,9 +90,9 @@ export default {
this.fetchJson(this.apiUrl() + "/nextpage/channel/" + this.channel.id, {
nextpage: this.channel.nextpage,
}).then(json => {
this.channel.relatedStreams.concat(json.relatedStreams);
this.channel.nextpage = json.nextpage;
this.loading = false;
this.updateWatched(json.relatedStreams);
json.relatedStreams.map(stream => this.channel.relatedStreams.push(stream));
});
}

6
src/components/FeedPage.vue
View file

@ -44,10 +44,14 @@ export default {
};
},
mounted() {
this.fetchFeed().then(videos => (this.videos = videos));
this.fetchFeed().then(videos => {
this.videos = videos;
this.updateWatched(this.videos);
});
},
activated() {
document.title = "Feed - Piped";
if (this.videos.length > 0) this.updateWatched(this.videos);
},
methods: {
async fetchFeed() {

88
src/components/HistoryPage.vue Normal file
View file

@ -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>

1
src/components/LoginPage.vue
View file

@ -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({

14
src/components/Navigation.vue
View file

@ -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) {

19
src/components/Preferences.vue
View file

@ -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();
}

1
src/components/RegisterPage.vue
View file

@ -50,7 +50,6 @@ export default {
},
methods: {
register() {
console.log("authToken" + this.hashCode(this.apiUrl()));
this.fetchJson(this.apiUrl() + "/register", null, {
method: "POST",
body: JSON.stringify({

6
src/components/TrendingPage.vue
View file

@ -27,10 +27,14 @@ export default {
mounted() {
let region = this.getPreferenceString("region", "US");
this.fetchTrending(region).then(videos => (this.videos = videos));
this.fetchTrending(region).then(videos => {
this.videos = videos;
this.updateWatched(this.videos);
});
},
activated() {
document.title = "Trending - Piped";
if (this.videos.length > 0) this.updateWatched(this.videos);
},
methods: {
async fetchTrending(region) {

6
src/components/VideoItem.vue
View file

@ -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>

23
src/components/WatchVideo.vue
View file

@ -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());

26
src/main.js
View file

@ -25,7 +25,7 @@ library.add(
faHeadphones,
faYoutube,
faRss,
faChevronLeft
faChevronLeft,
);
import("uikit/dist/css/uikit-core.css");
@ -160,11 +160,25 @@ const mixin = {
},
urlify(string) {
const regex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
if (!string) return '';
return string.replace(regex, (url) => {
return `<a class="uk-button uk-button-text" href="${url}" target="_blank">${url}</a>`
})
}
if (!string) return "";
return string.replace(regex, url => {
return `<a class="uk-button uk-button-text" href="${url}" target="_blank">${url}</a>`;
});
},
async updateWatched(videos) {
if (window.db) {
var tx = window.db.transaction("watch_history", "readonly");
var store = tx.objectStore("watch_history");
videos.map(async video => {
var request = store.get(video.url.substr(-11));
request.onsuccess = function(event) {
if (event.target.result) {
video.watched = true;
}
};
});
}
},
},
computed: {
backgroundColor() {

5
src/router/router.js
View file

@ -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({