TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Login and subscriptions. (#256)

Browse source 
* WIP login and subscriptions.

* Add a working feed and unsubscribe button.

* Allow importing subscriptions from Google Takeout, NewPipe and Invidious.
This commit is contained in:
FireMasterK 2021-07-17 04:26:41 +05:30 • committed by GitHub
parent 4cb06c3569
commit 0992e1e96d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 448 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/Channel.vue
View file

@ -6,6 +6,16 @@
<img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
<p style="white-space: pre-wrap">{{ channel.description }}</p>
<button
v-if="authenticated"
@click="subscribeHandler"
class="uk-button uk-button-small"
style="background: #222"
type="button"
>
{{ subscribed ? "Unsubscribe" : "Subscribe" }}
</button>
<hr />
<div class="uk-grid-xl" uk-grid="parallax: 0">
@ -28,6 +38,7 @@ export default {
data() {
return {
channel: null,
subscribed: false,
};
},
mounted() {
@ -40,6 +51,21 @@ export default {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
async fetchSubscribedStatus() {
this.fetchJson(
this.apiUrl() + "/subscribed",
{
channelId: this.channel.id,
},
{
headers: {
Authorization: this.getAuthToken(),
},
},
).then(json => {
this.subscribed = json.subscribed;
});
},
async fetchChannel() {
const url = this.apiUrl() + "/" + this.$route.params.path + "/" + this.$route.params.channelId;
return await this.fetchJson(url);
@ -48,7 +74,10 @@ export default {
this.fetchChannel()
.then(data => (this.channel = data))
.then(() => {
if (!this.channel.error) document.title = this.channel.name + " - Piped";
if (!this.channel.error) {
document.title = this.channel.name + " - Piped";
if (this.authenticated) this.fetchSubscribedStatus();
}
});
},
handleScroll() {
@ -65,6 +94,19 @@ export default {
});
}
},
subscribeHandler() {
this.fetchJson(this.apiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
method: "POST",
body: JSON.stringify({
channelId: this.channel.id,
}),
headers: {
Authorization: this.getAuthToken(),
"Content-Type": "application/json",
},
});
this.subscribed = !this.subscribed;
},
},
components: {
ErrorHandler,

74
src/components/FeedPage.vue Normal file
View file

@ -0,0 +1,74 @@
<template>
<h1 class="uk-text-bold uk-text-center">Feed</h1>
<small>You can import subscriptions from <router-link to="/import">here</router-link>.</small>
<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"
>
<div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
<router-link class="uk-text-emphasis" v-bind:to="'/watch?v=' + video.id">
<img style="width: 100%" v-bind:src="video.thumbnail" alt="thumbnail" loading="lazy" />
<p>{{ video.title }}</p>
</router-link>
<div>
<div>
<router-link class="uk-link-muted" :to="'/channel/' + video.uploader_id">
<a>{{ video.uploader }}</a>
</router-link>
<br />
</div>
</div>
<b class="uk-text-small uk-align-left">
<div v-if="video.views >= 0">
<font-awesome-icon icon="eye"></font-awesome-icon>
{{ numberFormat(video.views) }} views
<br />
</div>
<div>
{{ timeAgo(video.uploaded) }}
</div>
</b>
<div class="uk-align-right">
<b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
<br />
<router-link :to="'/watch?v=' + video.id + '&listen=1'">
<font-awesome-icon icon="headphones"></font-awesome-icon>
</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
videos: [],
};
},
mounted() {
document.title = "Feed - Piped";
this.fetchFeed().then(videos => (this.videos = videos));
},
methods: {
async fetchFeed() {
return await this.fetchJson(this.apiUrl() + "/feed", {
authToken: this.getAuthToken(),
});
},
},
};
</script>

129
src/components/ImportPage.vue Normal file
View file

@ -0,0 +1,129 @@
<template>
<div class="uk-vertical-align uk-text-center uk-height-1-1 ">
<form class="uk-panel uk-panel-box">
<div class="uk-form-row">
<input type="file" @change="fileChange" ref="fileSelector" />
</div>
<div class="uk-form-row">
<b>Selected Subscriptions: {{ selectedSubscriptions }}</b>
</div>
<div class="uk-form-row">
<a
class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
style="background: #222"
@click="handleImport"
>Import</a
>
</div>
</form>
<br />
<b>Importing Subscriptions from YouTube</b>
<br />
<div>
Open
<a href="https://takeout.google.com/takeout/custom/youtube">takeout.google.com/takeout/custom/youtube</a>
<br />
In "Select data to include", click on "All YouTube data included" and select only "subscriptions".
<br />
Create the export and download the zip file.
<br />
Extract subscriptions.json from the zip file.
<br />
Select and import the file above.
</div>
<br />
<b>Importing Subscriptions from Invidious</b>
<br />
<div>
Open
<a href="https://invidio.us/data_control">invidiou.us/data_control</a>
<br />
Click on any of the export options.
<br />
Select and import the file above.
</div>
<br />
<b>Importing Subscriptions from NewPipe</b>
<br />
<div>
Go to the Feed tab.
<br />
Click on the arrow on where it says "Subscriptions".
<br />
Save the file somewhere.
<br />
Select and import the file above.
</div>
</div>
</template>
<script>
export default {
data() {
return {
subscriptions: [],
};
},
computed: {
selectedSubscriptions() {
return this.subscriptions.length;
},
},
activated() {
if (!this.authenticated) this.$router.push("/login");
},
methods: {
fileChange() {
this.$refs.fileSelector.files[0].text().then(text => {
this.subscriptions = [];
// Invidious
if (text.indexOf("opml") != -1) {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(text, "text/xml");
xmlDoc.querySelectorAll("outline[xmlUrl]").forEach(item => {
const url = item.getAttribute("xmlUrl");
const id = url.substr(-24);
this.subscriptions.push(id);
});
}
// NewPipe
if (text.indexOf("app_version") != -1) {
const json = JSON.parse(text);
json.subscriptions
.filter(item => item.service_id == 0)
.forEach(item => {
const url = item.url;
const id = url.substr(-24);
this.subscriptions.push(id);
});
}
// Invidious JSON
if (text.indexOf("thin_mode") != -1) {
const json = JSON.parse(text);
this.subscriptions = json.subscriptions;
}
// Google Takeout
if (text.indexOf("contentDetails") != -1) {
const json = JSON.parse(text);
json.forEach(item => {
const id = item.snippet.resourceId.channelId;
this.subscriptions.push(id);
});
}
});
},
handleImport() {
this.fetchJson(this.apiUrl() + "/import", null, {
method: "POST",
headers: {
Authorization: this.getAuthToken(),
},
body: JSON.stringify(this.subscriptions),
}).then(json => {
if (json.message === "ok") window.location = "/feed";
});
},
},
};
</script>

66
src/components/LoginPage.vue Normal file
View file

@ -0,0 +1,66 @@
<template>
<div class="uk-vertical-align uk-text-center uk-height-1-1 ">
<form class="uk-panel uk-panel-box">
<div class="uk-form-row">
<input
class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
type="text"
v-model="username"
autocomplete="username"
placeholder="Username"
/>
</div>
<div class="uk-form-row">
<input
class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
type="password"
v-model="password"
autocomplete="password"
placeholder="Password"
/>
</div>
<div class="uk-form-row">
<a
class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
style="background: #222"
@click="login"
>Login</a
>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: null,
password: null,
};
},
mounted() {
//TODO: Add Server Side check
if (this.getAuthToken()) {
this.$router.push("/");
}
},
methods: {
login() {
console.log("authToken" + this.hashCode(this.apiUrl()));
this.fetchJson(this.apiUrl() + "/login", null, {
method: "POST",
body: JSON.stringify({
username: this.username,
password: this.password,
}),
}).then(resp => {
if (resp.token) {
this.setPreference("authToken" + this.hashCode(this.apiUrl()), resp.token);
window.location = "/"; // done to bypass cache
} else alert(resp.error);
});
},
},
};
</script>

14
src/components/Navigation.vue
View file

@ -25,6 +25,15 @@
<li>
<router-link to="/preferences">Preferences</router-link>
</li>
<li v-if="shouldShowLogin">
<router-link to="/login">Login</router-link>
</li>
<li v-if="shouldShowLogin">
<router-link to="/register">Register</router-link>
</li>
<li v-if="authenticated">
<router-link to="/feed">Feed</router-link>
</li>
</ul>
</div>
</nav>
@ -60,6 +69,11 @@ export default {
suggestionsVisible: false,
};
},
computed: {
shouldShowLogin(_this) {
return _this.getAuthToken() == null;
},
},
methods: {
onKeyUp(e) {
if (e.key === "Enter") {

66
src/components/RegisterPage.vue Normal file
View file

@ -0,0 +1,66 @@
<template>
<div class="uk-vertical-align uk-text-center uk-height-1-1 ">
<form class="uk-panel uk-panel-box">
<div class="uk-form-row">
<input
class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
type="text"
v-model="username"
autocomplete="username"
placeholder="Username"
/>
</div>
<div class="uk-form-row">
<input
class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
type="password"
v-model="password"
autocomplete="password"
placeholder="Password"
/>
</div>
<div class="uk-form-row">
<a
class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
style="background: #222"
@click="register"
>Register</a
>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: null,
password: null,
};
},
mounted() {
//TODO: Add Server Side check
if (this.getAuthToken()) {
this.$router.push("/");
}
},
methods: {
register() {
console.log("authToken" + this.hashCode(this.apiUrl()));
this.fetchJson(this.apiUrl() + "/register", null, {
method: "POST",
body: JSON.stringify({
username: this.username,
password: this.password,
}),
}).then(resp => {
if (resp.token) {
this.setPreference("authToken" + this.hashCode(this.apiUrl()), resp.token);
window.location = "/"; // done to bypass cache
} else alert(resp.error);
});
},
},
};
</script>

23
src/main.js
View file

@ -34,6 +34,14 @@ import App from "./App.vue";
import DOMPurify from "dompurify";
import TimeAgo from "javascript-time-ago";
import en from "javascript-time-ago/locale/en";
TimeAgo.addDefaultLocale(en);
const timeAgo = new TimeAgo("en-US");
import("./registerServiceWorker");
const mixin = {
@ -136,6 +144,18 @@ const mixin = {
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
return theme;
},
getAuthToken() {
return this.getPreferenceString("authToken" + this.hashCode(this.apiUrl()));
},
hashCode(s) {
return s.split("").reduce(function(a, b) {
a = (a << 5) - a + b.charCodeAt(0);
return a & a;
}, 0);
},
timeAgo(time) {
return timeAgo.format(time);
},
},
computed: {
backgroundColor() {
@ -153,6 +173,9 @@ const mixin = {
darkMode() {
return this.getEffectiveTheme() !== "light";
},
authenticated(_this) {
return _this.getAuthToken() !== undefined;
},
},
};

20
src/router/router.js
View file

@ -29,6 +29,26 @@ const routes = [
path: "/:path(channel|user|c)/:channelId/:videos?",
component: () => import("../components/Channel.vue"),
},
{
path: "/login",
name: "Login",
component: () => import("../components/LoginPage.vue"),
},
{
path: "/register",
name: "Register",
component: () => import("../components/RegisterPage.vue"),
},
{
path: "/feed",
name: "Feed",
component: () => import("../components/FeedPage.vue"),
},
{
path: "/import",
name: "Import",
component: () => import("../components/ImportPage.vue"),
},
];
const router = createRouter({