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

View file

@ -1,7 +1,7 @@
<template>
<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>
</button>
@ -41,17 +41,16 @@ export default {
},
computed: {
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() {
if (this.authenticated)
this.fetchFeed().then(videos => {
this.videosStore = videos;
this.loadMoreVideos();
this.updateWatched(this.videos);
});
else this.$router.push("/login");
this.fetchFeed().then(videos => {
this.videosStore = videos;
this.loadMoreVideos();
this.updateWatched(this.videos);
});
},
activated() {
document.title = this.$t("titles.feed") + " - Piped";
@ -66,9 +65,15 @@ export default {
},
methods: {
async fetchFeed() {
return await this.fetchJson(this.authApiUrl() + "/feed", {
authToken: this.getAuthToken(),
});
if (this.authenticated) {
return await this.fetchJson(this.authApiUrl() + "/feed", {
authToken: this.getAuthToken(),
});
} else {
return await this.fetchJson(this.authApiUrl() + "/feed/unauthenticated", {
channels: this.getUnauthenticatedChannels(),
});
}
},
loadMoreVideos() {
this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);

View file

@ -69,7 +69,6 @@ export default {
},
},
activated() {
if (!this.authenticated) this.$router.push("/login");
document.title = "Import - Piped";
},
methods: {
@ -132,21 +131,34 @@ export default {
});
},
handleImport() {
this.fetchJson(
this.authApiUrl() + "/import",
{
override: this.override,
},
{
method: "POST",
headers: {
Authorization: this.getAuthToken(),
if (this.authenticated) {
this.fetchJson(
this.authApiUrl() + "/import",
{
override: this.override,
},
body: JSON.stringify(this.subscriptions),
},
).then(json => {
if (json.message === "ok") window.location = "/feed";
});
{
method: "POST",
headers: {
Authorization: this.getAuthToken(),
},
body: JSON.stringify(this.subscriptions),
},
).then(json => {
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">
<router-link v-t="'titles.playlists'" to="/playlists" />
</li>
<li v-if="authenticated && !shouldShowTrending">
<li v-if="!shouldShowTrending">
<router-link v-t="'titles.feed'" to="/feed" />
</li>
</ul>
@ -81,7 +81,7 @@
<li v-if="authenticated">
<router-link v-t="'titles.playlists'" to="/playlists" />
</li>
<li v-if="authenticated && !shouldShowTrending">
<li v-if="!shouldShowTrending">
<router-link v-t="'titles.feed'" to="/feed" />
</li>
</ul>

View file

@ -1,7 +1,7 @@
<template>
<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">
<button class="btn mx-1">
<router-link to="/import" v-t="'actions.import_from_json'" />
@ -40,21 +40,28 @@ export default {
};
},
mounted() {
if (this.authenticated)
this.fetchJson(this.authApiUrl() + "/subscriptions", null, {
headers: {
Authorization: this.getAuthToken(),
},
}).then(json => {
this.subscriptions = json;
this.subscriptions.forEach(subscription => (subscription.subscribed = true));
});
else this.$router.push("/login");
this.fetchSubscriptions().then(json => {
this.subscriptions = json;
this.subscriptions.forEach(subscription => (subscription.subscribed = true));
});
},
activated() {
document.title = "Subscriptions - Piped";
},
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) {
this.fetchJson(this.authApiUrl() + (subscription.subscribed ? "/unsubscribe" : "/subscribe"), null, {
method: "POST",

View file

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