mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Add a working feed and unsubscribe button.
This commit is contained in:
FireMasterK
parent
096208c070
commit
dce3afbcc9
7 changed files with 132 additions and 14 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
style="background: #222"
|
||||
type="button"
|
||||
>
|
||||
Subscribe
|
||||
{{ subscribed ? "Unsubscribe" : "Subscribe" }}
|
||||
</button>
|
||||
|
||||
<hr />
|
||||
|
|
@ -38,13 +38,9 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
channel: null,
|
||||
subscribed: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
authenticated(_this) {
|
||||
return _this.getAuthToken() !== undefined;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getChannelData();
|
||||
},
|
||||
|
|
@ -55,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);
|
||||
|
|
@ -63,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() {
|
||||
|
|
@ -81,20 +95,17 @@ export default {
|
|||
}
|
||||
},
|
||||
subscribeHandler() {
|
||||
this.fetchJson(this.apiUrl() + "/subscribe", null, {
|
||||
this.fetchJson(this.apiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
// channelId: this.channel.id,
|
||||
channelId: this.channel.id,
|
||||
}),
|
||||
headers: {
|
||||
"Auth-Token": this.getAuthToken(),
|
||||
Authorization: this.getAuthToken(),
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}).then(resp => {
|
||||
if (resp.status === "ok") {
|
||||
alert("Subscribed!");
|
||||
}
|
||||
});
|
||||
this.subscribed = !this.subscribed;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
72
src/components/FeedPage.vue
Normal file
72
src/components/FeedPage.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<h1 class="uk-text-bold uk-text-center">Feed</h1>
|
||||
|
||||
<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>
|
||||
|
|
@ -31,6 +31,9 @@
|
|||
<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>
|
||||
|
|
|
|||
14
src/main.js
14
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 = {
|
||||
|
|
@ -145,6 +153,9 @@ const mixin = {
|
|||
return a & a;
|
||||
}, 0);
|
||||
},
|
||||
timeAgo(time) {
|
||||
return timeAgo.format(time);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
backgroundColor() {
|
||||
|
|
@ -162,6 +173,9 @@ const mixin = {
|
|||
darkMode() {
|
||||
return this.getEffectiveTheme() !== "light";
|
||||
},
|
||||
authenticated(_this) {
|
||||
return _this.getAuthToken() !== undefined;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -39,6 +39,11 @@ const routes = [
|
|||
name: "Register",
|
||||
component: () => import("../components/RegisterPage.vue"),
|
||||
},
|
||||
{
|
||||
path: "/feed",
|
||||
name: "Feed",
|
||||
component: () => import("../components/FeedPage.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…
Add table
Add a link
Reference in a new issue