mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 02:08:21 +00:00
Login and subscriptions. (#256)
* 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:
parent
4cb06c3569
commit
0992e1e96d
@ -17,6 +17,7 @@
|
||||
"dompurify": "^2.3.0",
|
||||
"hotkeys-js": "^3.8.7",
|
||||
"mux.js": "^5.12.2",
|
||||
"javascript-time-ago": "^2.3.8",
|
||||
"register-service-worker": "^1.7.1",
|
||||
"shaka-player": "3.2.0",
|
||||
"uikit": "3.7.0",
|
||||
|
@ -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
74
src/components/FeedPage.vue
Normal 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
129
src/components/ImportPage.vue
Normal 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
66
src/components/LoginPage.vue
Normal 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>
|
@ -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
66
src/components/RegisterPage.vue
Normal 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
23
src/main.js
@ -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;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
@ -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({
|
||||
|
12
yarn.lock
12
yarn.lock
@ -5186,6 +5186,13 @@ javascript-stringify@^2.0.1:
|
||||
resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.0.1.tgz#6ef358035310e35d667c675ed63d3eb7c1aa19e5"
|
||||
integrity sha512-yV+gqbd5vaOYjqlbk16EG89xB5udgjqQF3C5FAORDg4f/IS1Yc5ERCv5e/57yBcfJYw05V5JyIXabhwb75Xxow==
|
||||
|
||||
javascript-time-ago@^2.3.8:
|
||||
version "2.3.8"
|
||||
resolved "https://registry.yarnpkg.com/javascript-time-ago/-/javascript-time-ago-2.3.8.tgz#7e1cd94a770987cc00db82e60e655d3efdd25629"
|
||||
integrity sha512-ahVSuInQC6iJtwy/XsburOc6JMsI0OI/84b3nAhtMlDhCm9g4Py+zuiPASnt02B4GkaURqWtiyw98ce0ICAZYQ==
|
||||
dependencies:
|
||||
relative-time-format "^1.0.5"
|
||||
|
||||
js-message@1.0.7:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"
|
||||
@ -7196,6 +7203,11 @@ relateurl@0.2.x:
|
||||
resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
|
||||
integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
|
||||
|
||||
relative-time-format@^1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/relative-time-format/-/relative-time-format-1.0.5.tgz#3fb7c76ae39156afe0a3a7ff0cb7bf30aa0f0fb6"
|
||||
integrity sha512-MAgx/YKcUQYJpIaWcfetPstElnWf26JxVis4PirdwVrrymFdbxyCSm6yENpfB1YuwFbtHSHksN3aBajVNxk10Q==
|
||||
|
||||
remove-trailing-separator@^1.0.1:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
|
||||
|
Loading…
Reference in New Issue
Block a user