2021-07-16 22:56:41 +00:00
|
|
|
<template>
|
2023-08-13 17:31:57 +00:00
|
|
|
<h1 v-t="'titles.feed'" class="my-4 text-center font-bold" />
|
2021-07-16 22:56:41 +00:00
|
|
|
|
2023-08-13 17:31:57 +00:00
|
|
|
<div class="flex flex-col flex-wrap gap-2 children:(flex items-center gap-1) md:flex-row md:items-center">
|
2023-05-26 15:30:44 +00:00
|
|
|
<span>
|
|
|
|
<label for="filters">
|
|
|
|
<strong v-text="`${$t('actions.filter')}:`" />
|
|
|
|
</label>
|
|
|
|
<select
|
|
|
|
id="filters"
|
|
|
|
v-model="selectedFilter"
|
|
|
|
default="all"
|
|
|
|
class="select flex-grow"
|
|
|
|
@change="onFilterChange()"
|
|
|
|
>
|
2023-07-27 11:46:05 +00:00
|
|
|
<option v-for="filter in availableFilters" :key="filter" v-t="`video.${filter}`" :value="filter" />
|
2023-05-26 15:30:44 +00:00
|
|
|
</select>
|
|
|
|
</span>
|
2021-07-16 22:56:41 +00:00
|
|
|
|
2023-05-26 15:30:44 +00:00
|
|
|
<span>
|
|
|
|
<label for="group-selector">
|
|
|
|
<strong v-text="`${$t('titles.channel_groups')}:`" />
|
|
|
|
</label>
|
|
|
|
<select id="group-selector" v-model="selectedGroupName" default="" class="select flex-grow">
|
2023-07-27 11:46:05 +00:00
|
|
|
<option v-t="`video.all`" value="" />
|
2023-05-26 15:30:44 +00:00
|
|
|
<option
|
|
|
|
v-for="group in channelGroups"
|
|
|
|
:key="group.groupName"
|
|
|
|
:value="group.groupName"
|
|
|
|
v-text="group.groupName"
|
|
|
|
/>
|
|
|
|
</select>
|
|
|
|
</span>
|
2023-01-27 16:07:02 +00:00
|
|
|
|
2023-05-26 15:30:44 +00:00
|
|
|
<span class="md:ml-auto">
|
|
|
|
<SortingSelector by-key="uploaded" @apply="order => videos.sort(order)" />
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<hr />
|
2023-05-07 17:56:56 +00:00
|
|
|
|
2023-05-26 15:30:44 +00:00
|
|
|
<span class="flex gap-2">
|
2023-11-07 17:51:06 +00:00
|
|
|
<router-link v-t="'titles.subscriptions'" class="btn" to="/subscriptions" />
|
2023-05-26 15:30:44 +00:00
|
|
|
<a :href="getRssUrl" class="btn">
|
|
|
|
<font-awesome-icon icon="rss" />
|
|
|
|
</a>
|
2021-09-04 15:02:59 +00:00
|
|
|
</span>
|
2021-07-16 22:56:41 +00:00
|
|
|
<hr />
|
|
|
|
|
2023-03-13 13:39:07 +00:00
|
|
|
<LoadingIndicatorPage :show-content="videosStore != null" class="video-grid">
|
2023-05-07 17:56:56 +00:00
|
|
|
<template v-for="video in filteredVideos" :key="video.url">
|
2023-01-27 16:07:02 +00:00
|
|
|
<VideoItem v-if="shouldShowVideo(video)" :is-feed="true" :item="video" />
|
|
|
|
</template>
|
2023-03-13 13:39:07 +00:00
|
|
|
</LoadingIndicatorPage>
|
2021-07-16 22:56:41 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-04-08 15:46:49 +00:00
|
|
|
import VideoItem from "./VideoItem.vue";
|
2022-05-19 21:17:58 +00:00
|
|
|
import SortingSelector from "./SortingSelector.vue";
|
2023-03-13 13:39:07 +00:00
|
|
|
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
|
2021-07-21 12:32:17 +00:00
|
|
|
|
2021-07-16 22:56:41 +00:00
|
|
|
export default {
|
2021-10-08 18:52:51 +00:00
|
|
|
components: {
|
|
|
|
VideoItem,
|
2022-05-19 21:17:58 +00:00
|
|
|
SortingSelector,
|
2023-03-13 13:39:07 +00:00
|
|
|
LoadingIndicatorPage,
|
2021-10-08 18:52:51 +00:00
|
|
|
},
|
2021-07-16 22:56:41 +00:00
|
|
|
data() {
|
|
|
|
return {
|
2021-09-11 19:31:01 +00:00
|
|
|
currentVideoCount: 0,
|
|
|
|
videoStep: 100,
|
2023-03-13 13:39:07 +00:00
|
|
|
videosStore: null,
|
2021-07-16 22:56:41 +00:00
|
|
|
videos: [],
|
2023-01-27 16:07:02 +00:00
|
|
|
availableFilters: ["all", "shorts", "videos"],
|
|
|
|
selectedFilter: "all",
|
2023-05-07 17:56:56 +00:00
|
|
|
selectedGroupName: "",
|
|
|
|
channelGroups: [],
|
2021-07-16 22:56:41 +00:00
|
|
|
};
|
|
|
|
},
|
2021-10-08 18:52:51 +00:00
|
|
|
computed: {
|
|
|
|
getRssUrl(_this) {
|
2022-08-01 14:16:06 +00:00
|
|
|
if (_this.authenticated) return _this.authApiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
|
|
|
|
else return _this.authApiUrl() + "/feed/unauthenticated/rss?channels=" + _this.getUnauthenticatedChannels();
|
2021-10-08 18:52:51 +00:00
|
|
|
},
|
2023-05-07 17:56:56 +00:00
|
|
|
filteredVideos(_this) {
|
|
|
|
const selectedGroup = _this.channelGroups.filter(group => group.groupName == _this.selectedGroupName);
|
2023-10-13 23:16:57 +00:00
|
|
|
|
|
|
|
const videos = this.getPreferenceBoolean("hideWatched", false)
|
|
|
|
? this.videos.filter(video => !video.watched)
|
|
|
|
: this.videos;
|
|
|
|
|
2023-05-07 17:56:56 +00:00
|
|
|
return _this.selectedGroupName == ""
|
2023-10-13 23:16:57 +00:00
|
|
|
? videos
|
|
|
|
: videos.filter(video => selectedGroup[0].channels.includes(video.uploaderUrl.substr(-11)));
|
2023-05-07 17:56:56 +00:00
|
|
|
},
|
2021-10-08 18:52:51 +00:00
|
|
|
},
|
2021-07-16 22:56:41 +00:00
|
|
|
mounted() {
|
2022-08-01 14:16:06 +00:00
|
|
|
this.fetchFeed().then(videos => {
|
|
|
|
this.videosStore = videos;
|
|
|
|
this.loadMoreVideos();
|
|
|
|
this.updateWatched(this.videos);
|
|
|
|
});
|
2023-01-27 16:07:02 +00:00
|
|
|
|
2023-01-27 20:12:03 +00:00
|
|
|
this.selectedFilter = this.getPreferenceString("feedFilter") ?? "all";
|
2023-05-07 17:56:56 +00:00
|
|
|
|
|
|
|
if (!window.db) return;
|
|
|
|
|
2023-09-14 15:04:04 +00:00
|
|
|
this.loadChannelGroups();
|
2021-07-16 22:56:41 +00:00
|
|
|
},
|
2021-07-21 10:59:53 +00:00
|
|
|
activated() {
|
2021-08-25 19:55:30 +00:00
|
|
|
document.title = this.$t("titles.feed") + " - Piped";
|
2021-08-22 10:27:09 +00:00
|
|
|
if (this.videos.length > 0) this.updateWatched(this.videos);
|
2021-09-11 19:31:01 +00:00
|
|
|
window.addEventListener("scroll", this.handleScroll);
|
|
|
|
},
|
|
|
|
deactivated() {
|
|
|
|
window.removeEventListener("scroll", this.handleScroll);
|
|
|
|
},
|
|
|
|
unmounted() {
|
|
|
|
window.removeEventListener("scroll", this.handleScroll);
|
2021-07-21 10:59:53 +00:00
|
|
|
},
|
2021-07-16 22:56:41 +00:00
|
|
|
methods: {
|
|
|
|
async fetchFeed() {
|
2022-08-01 14:16:06 +00:00
|
|
|
if (this.authenticated) {
|
|
|
|
return await this.fetchJson(this.authApiUrl() + "/feed", {
|
|
|
|
authToken: this.getAuthToken(),
|
|
|
|
});
|
|
|
|
} else {
|
2024-01-03 20:45:28 +00:00
|
|
|
const channels = this.getUnauthenticatedChannels();
|
|
|
|
const split = channels.split(",");
|
|
|
|
if (split.length > 100) {
|
|
|
|
return await this.fetchJson(this.authApiUrl() + "/feed/unauthenticated", null, {
|
|
|
|
method: "POST",
|
|
|
|
body: JSON.stringify(split),
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
return await this.fetchJson(this.authApiUrl() + "/feed/unauthenticated", {
|
|
|
|
channels: channels,
|
|
|
|
});
|
|
|
|
}
|
2022-08-01 14:16:06 +00:00
|
|
|
}
|
2021-07-16 22:56:41 +00:00
|
|
|
},
|
2023-09-14 15:04:04 +00:00
|
|
|
async loadChannelGroups() {
|
|
|
|
const groups = await this.getChannelGroups();
|
|
|
|
this.channelGroups.push(...groups);
|
|
|
|
},
|
2021-09-11 19:31:01 +00:00
|
|
|
loadMoreVideos() {
|
2023-08-07 18:50:25 +00:00
|
|
|
if (!this.videosStore) return;
|
2021-09-11 19:31:01 +00:00
|
|
|
this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);
|
2023-07-19 00:40:12 +00:00
|
|
|
if (this.videos.length != this.videosStore.length) {
|
2021-09-11 19:31:01 +00:00
|
|
|
this.videos = this.videosStore.slice(0, this.currentVideoCount);
|
2023-07-21 20:07:53 +00:00
|
|
|
this.fetchDeArrowContent(this.videos);
|
2023-07-19 00:40:12 +00:00
|
|
|
}
|
2021-09-11 19:31:01 +00:00
|
|
|
},
|
|
|
|
handleScroll() {
|
|
|
|
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
|
|
|
|
this.loadMoreVideos();
|
|
|
|
}
|
|
|
|
},
|
2023-01-27 16:07:02 +00:00
|
|
|
shouldShowVideo(video) {
|
2023-01-27 18:05:02 +00:00
|
|
|
switch (this.selectedFilter.toLowerCase()) {
|
|
|
|
case "shorts":
|
|
|
|
return video.isShort;
|
2023-01-27 16:07:02 +00:00
|
|
|
case "videos":
|
|
|
|
return !video.isShort;
|
|
|
|
default:
|
2023-01-27 18:05:02 +00:00
|
|
|
return true;
|
2023-01-27 16:07:02 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
onFilterChange() {
|
|
|
|
this.setPreference("feedFilter", this.selectedFilter);
|
|
|
|
},
|
2021-07-16 22:56:41 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|