unauthenticated subscriptions (#1270)

* hmm

* unauthenticated feed

* unauthenticated rss

* Small improvements to code.

* add unauthenticated subscriptions

* cleanup

* Sort subs locally.

* Fix some bugs and small improvements.

Co-authored-by: Kavin <20838718+FireMasterK@users.noreply.github.com>
This commit is contained in:
Bnyro 2022-08-01 16:16:06 +02:00 committed by GitHub
parent 1ebf153814
commit c51a3a828e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 118 additions and 64 deletions

View file

@ -14,7 +14,6 @@
</p> </p>
<button <button
v-if="authenticated"
class="btn" class="btn"
@click="subscribeHandler" @click="subscribeHandler"
v-t="{ v-t="{
@ -50,7 +49,7 @@ export default {
data() { data() {
return { return {
channel: null, channel: null,
subscribed: false, subscribed: this.authenticated ? false : this.isSubscribedLocally(this.channelId),
}; };
}, },
mounted() { mounted() {
@ -69,6 +68,8 @@ export default {
}, },
methods: { methods: {
async fetchSubscribedStatus() { async fetchSubscribedStatus() {
if (!this.channelId || !this.authenticated) return;
this.fetchJson( this.fetchJson(
this.authApiUrl() + "/subscribed", this.authApiUrl() + "/subscribed",
{ {
@ -113,6 +114,7 @@ export default {
} }
}, },
subscribeHandler() { subscribeHandler() {
if (this.authenticated) {
this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, { this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
method: "POST", method: "POST",
body: JSON.stringify({ body: JSON.stringify({
@ -123,6 +125,9 @@ export default {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
}); });
} else {
this.handleLocalSubscriptions(this.channel.id);
}
this.subscribed = !this.subscribed; this.subscribed = !this.subscribed;
}, },
}, },

View file

@ -1,7 +1,7 @@
<template> <template>
<h1 v-t="'titles.feed'" class="font-bold text-center my-4" /> <h1 v-t="'titles.feed'" class="font-bold text-center my-4" />
<button v-if="authenticated" class="btn mr-2" @click="exportHandler"> <button class="btn mr-2" @click="exportHandler">
<router-link to="/subscriptions">Subscriptions</router-link> <router-link to="/subscriptions">Subscriptions</router-link>
</button> </button>
@ -41,17 +41,16 @@ export default {
}, },
computed: { computed: {
getRssUrl(_this) { getRssUrl(_this) {
return _this.authApiUrl() + "/feed/rss?authToken=" + _this.getAuthToken(); if (_this.authenticated) return _this.authApiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
else return _this.authApiUrl() + "/feed/unauthenticated/rss?channels=" + _this.getUnauthenticatedChannels();
}, },
}, },
mounted() { mounted() {
if (this.authenticated)
this.fetchFeed().then(videos => { this.fetchFeed().then(videos => {
this.videosStore = videos; this.videosStore = videos;
this.loadMoreVideos(); this.loadMoreVideos();
this.updateWatched(this.videos); this.updateWatched(this.videos);
}); });
else this.$router.push("/login");
}, },
activated() { activated() {
document.title = this.$t("titles.feed") + " - Piped"; document.title = this.$t("titles.feed") + " - Piped";
@ -66,9 +65,15 @@ export default {
}, },
methods: { methods: {
async fetchFeed() { async fetchFeed() {
if (this.authenticated) {
return await this.fetchJson(this.authApiUrl() + "/feed", { return await this.fetchJson(this.authApiUrl() + "/feed", {
authToken: this.getAuthToken(), authToken: this.getAuthToken(),
}); });
} else {
return await this.fetchJson(this.authApiUrl() + "/feed/unauthenticated", {
channels: this.getUnauthenticatedChannels(),
});
}
}, },
loadMoreVideos() { loadMoreVideos() {
this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length); this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);

View file

@ -69,7 +69,6 @@ export default {
}, },
}, },
activated() { activated() {
if (!this.authenticated) this.$router.push("/login");
document.title = "Import - Piped"; document.title = "Import - Piped";
}, },
methods: { methods: {
@ -132,6 +131,7 @@ export default {
}); });
}, },
handleImport() { handleImport() {
if (this.authenticated) {
this.fetchJson( this.fetchJson(
this.authApiUrl() + "/import", this.authApiUrl() + "/import",
{ {
@ -147,6 +147,18 @@ export default {
).then(json => { ).then(json => {
if (json.message === "ok") window.location = "/feed"; if (json.message === "ok") window.location = "/feed";
}); });
} else {
this.importSubscriptionsLocally(this.subscriptions);
window.location = "/feed";
}
},
importSubscriptionsLocally(newChannels) {
const subscriptions = this.override
? [...new Set(newChannels)]
: [...new Set(this.getLocalSubscriptions().concat(newChannels))];
// Sort for better cache hits
subscriptions.sort();
localStorage.setItem("localSubscriptions", JSON.stringify(subscriptions));
}, },
}, },
}; };

View file

@ -52,7 +52,7 @@
<li v-if="authenticated"> <li v-if="authenticated">
<router-link v-t="'titles.playlists'" to="/playlists" /> <router-link v-t="'titles.playlists'" to="/playlists" />
</li> </li>
<li v-if="authenticated && !shouldShowTrending"> <li v-if="!shouldShowTrending">
<router-link v-t="'titles.feed'" to="/feed" /> <router-link v-t="'titles.feed'" to="/feed" />
</li> </li>
</ul> </ul>
@ -81,7 +81,7 @@
<li v-if="authenticated"> <li v-if="authenticated">
<router-link v-t="'titles.playlists'" to="/playlists" /> <router-link v-t="'titles.playlists'" to="/playlists" />
</li> </li>
<li v-if="authenticated && !shouldShowTrending"> <li v-if="!shouldShowTrending">
<router-link v-t="'titles.feed'" to="/feed" /> <router-link v-t="'titles.feed'" to="/feed" />
</li> </li>
</ul> </ul>

View file

@ -1,7 +1,7 @@
<template> <template>
<h1 class="font-bold text-center my-4" v-t="'titles.subscriptions'" /> <h1 class="font-bold text-center my-4" v-t="'titles.subscriptions'" />
<div v-if="authenticated" class="flex justify-between w-full"> <div class="flex justify-between w-full">
<div class="flex"> <div class="flex">
<button class="btn mx-1"> <button class="btn mx-1">
<router-link to="/import" v-t="'actions.import_from_json'" /> <router-link to="/import" v-t="'actions.import_from_json'" />
@ -40,21 +40,28 @@ export default {
}; };
}, },
mounted() { mounted() {
if (this.authenticated) this.fetchSubscriptions().then(json => {
this.fetchJson(this.authApiUrl() + "/subscriptions", null, {
headers: {
Authorization: this.getAuthToken(),
},
}).then(json => {
this.subscriptions = json; this.subscriptions = json;
this.subscriptions.forEach(subscription => (subscription.subscribed = true)); this.subscriptions.forEach(subscription => (subscription.subscribed = true));
}); });
else this.$router.push("/login");
}, },
activated() { activated() {
document.title = "Subscriptions - Piped"; document.title = "Subscriptions - Piped";
}, },
methods: { methods: {
async fetchSubscriptions() {
if (this.authenticated) {
return await this.fetchJson(this.authApiUrl() + "/subscriptions", null, {
headers: {
Authorization: this.getAuthToken(),
},
});
} else {
return await this.fetchJson(this.authApiUrl() + "/subscriptions/unauthenticated", {
channels: this.getUnauthenticatedChannels(),
});
}
},
handleButton(subscription) { handleButton(subscription) {
this.fetchJson(this.authApiUrl() + (subscription.subscribed ? "/unsubscribe" : "/subscribe"), null, { this.fetchJson(this.authApiUrl() + (subscription.subscribed ? "/unsubscribe" : "/subscribe"), null, {
method: "POST", method: "POST",

View file

@ -80,7 +80,6 @@
</button> </button>
<button <button
class="btn" class="btn"
v-if="authenticated"
@click="subscribeHandler" @click="subscribeHandler"
v-t="{ v-t="{
path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`, path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
@ -427,7 +426,8 @@ export default {
this.fetchComments().then(data => (this.comments = data)); this.fetchComments().then(data => (this.comments = data));
}, },
async fetchSubscribedStatus() { async fetchSubscribedStatus() {
if (!this.channelId || !this.authenticated) return; if (!this.channelId) return;
if (!this.authenticated) this.subscribed = this.isSubscribedLocally(this.channelId);
this.fetchJson( this.fetchJson(
this.authApiUrl() + "/subscribed", this.authApiUrl() + "/subscribed",
@ -444,6 +444,7 @@ export default {
}); });
}, },
subscribeHandler() { subscribeHandler() {
if (this.authenticated) {
this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, { this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
method: "POST", method: "POST",
body: JSON.stringify({ body: JSON.stringify({
@ -454,6 +455,9 @@ export default {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
}); });
} else {
this.handleLocalSubscriptions(this.channelId);
}
this.subscribed = !this.subscribed; this.subscribed = !this.subscribed;
}, },
handleScroll() { handleScroll() {

View file

@ -199,6 +199,27 @@ const mixin = {
}); });
} }
}, },
getLocalSubscriptions() {
return JSON.parse(localStorage.getItem("localSubscriptions"));
},
isSubscribedLocally(channelId) {
const localSubscriptions = this.getLocalSubscriptions();
if (localSubscriptions == null) return false;
return localSubscriptions.includes(channelId);
},
handleLocalSubscriptions(channelId) {
var localSubscriptions = this.getLocalSubscriptions() ?? [];
if (localSubscriptions.includes(channelId))
localSubscriptions.splice(localSubscriptions.indexOf(channelId));
else localSubscriptions.push(channelId);
// Sort for better cache hits
localSubscriptions.sort();
localStorage.setItem("localSubscriptions", JSON.stringify(localSubscriptions));
},
getUnauthenticatedChannels() {
const localSubscriptions = this.getLocalSubscriptions();
return localSubscriptions.join(",");
},
}, },
computed: { computed: {
theme() { theme() {