Piped/src/components/PlaylistPage.vue

202 lines
7.8 KiB
Vue
Raw Normal View History

<template>
2022-11-11 21:28:34 +00:00
<ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
2023-07-27 11:46:05 +00:00
<LoadingIndicatorPage v-show="!playlist?.error" :show-content="playlist">
<h1 class="mb-1 ml-1 mt-4 text-3xl!" v-text="playlist.name" />
<CollapsableText v-if="playlist?.description" :text="playlist.description" />
2023-05-23 16:24:32 +00:00
<div class="mt-1 flex items-center justify-between">
2022-11-11 21:28:34 +00:00
<div>
2023-05-23 16:24:32 +00:00
<router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'">
<img loading="lazy" :src="playlist.uploaderAvatar" class="rounded-full" />
2022-11-11 21:28:34 +00:00
<strong v-text="playlist.uploader" />
</router-link>
</div>
<div>
2023-07-27 11:46:05 +00:00
<strong class="mr-2" v-text="`${playlist.videos} ${$t('video.videos')}`" />
<button v-if="!isPipedPlaylist" class="btn mx-1" @click="bookmarkPlaylist">
{{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`)
2024-03-06 19:45:31 +00:00
}}<i class="i-fa6-solid:bookmark ml-3" />
2023-01-06 18:30:28 +00:00
</button>
2023-07-27 11:46:05 +00:00
<button v-if="authenticated && !isPipedPlaylist" class="btn mr-1" @click="clonePlaylist">
2024-03-06 19:45:31 +00:00
{{ $t("actions.clone_playlist") }}<i class="i-fa6-solid:clone ml-3" />
2022-11-11 21:28:34 +00:00
</button>
<button class="btn mr-1" @click="downloadPlaylistAsTxt">
{{ $t("actions.download_as_txt") }}
</button>
<a class="btn mr-1" :href="getRssUrl">
2024-03-06 19:45:31 +00:00
<i class="i-fa6-solid:rss" />
2022-11-11 21:28:34 +00:00
</a>
2023-07-27 11:46:05 +00:00
<WatchOnButton :link="`https://www.youtube.com/playlist?list=${$route.query.list}`" />
2022-11-11 21:28:34 +00:00
</div>
</div>
2022-11-11 21:28:34 +00:00
<hr />
2022-11-11 21:28:34 +00:00
<div class="video-grid">
<VideoItem
v-for="(video, index) in playlist.relatedStreams"
:key="video.url"
:item="video"
:index="index"
:playlist-id="$route.query.list"
:admin="admin"
height="94"
width="168"
2023-07-27 11:46:05 +00:00
@remove="removeVideo(index)"
2022-11-11 21:28:34 +00:00
/>
</div>
</LoadingIndicatorPage>
</template>
<script>
2022-11-11 21:28:34 +00:00
import ErrorHandler from "./ErrorHandler.vue";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
2023-05-23 16:24:32 +00:00
import CollapsableText from "./CollapsableText.vue";
2022-11-11 21:28:34 +00:00
import VideoItem from "./VideoItem.vue";
import WatchOnButton from "./WatchOnButton.vue";
2022-11-11 21:28:34 +00:00
export default {
components: {
ErrorHandler,
VideoItem,
WatchOnButton,
LoadingIndicatorPage,
2023-05-23 16:24:32 +00:00
CollapsableText,
2022-11-11 21:28:34 +00:00
},
data() {
return {
playlist: null,
admin: false,
isBookmarked: false,
2022-11-11 21:28:34 +00:00
};
},
computed: {
getRssUrl: _this => {
return _this.authApiUrl() + "/rss/playlists/" + _this.$route.query.list;
},
isPipedPlaylist: _this => {
// regex to determine whether it's a Piped plalylist
return /[\da-fA-F]{8}-[\da-fA-F]{4}-[\da-fA-F]{4}-[\da-fA-F]{4}-[\da-fA-F]{12}/.test(
_this.$route.query.list,
);
},
},
mounted() {
const playlistId = this.$route.query.list;
if (this.authenticated && playlistId?.length == 36)
2023-06-15 17:18:47 +00:00
this.getPlaylists().then(json => {
2022-11-11 21:28:34 +00:00
if (json.error) alert(json.error);
2023-03-04 08:03:45 +00:00
else if (json.some(playlist => playlist.id === playlistId)) this.admin = true;
2022-11-11 21:28:34 +00:00
});
2023-06-15 17:18:47 +00:00
else if (playlistId.startsWith("local")) this.admin = true;
this.isPlaylistBookmarked();
2022-11-11 21:28:34 +00:00
},
activated() {
2023-05-31 16:31:40 +00:00
this.getPlaylistData();
2022-11-11 21:28:34 +00:00
window.addEventListener("scroll", this.handleScroll);
if (this.playlist) this.updateTitle();
},
deactivated() {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
async getPlaylistData() {
this.getPlaylist(this.$route.query.list)
2022-11-11 21:28:34 +00:00
.then(data => (this.playlist = data))
.then(() => {
this.updateTitle();
this.updateWatched(this.playlist.relatedStreams);
this.fetchDeArrowContent(this.playlist.relatedStreams);
});
2022-11-11 21:28:34 +00:00
},
async updateTitle() {
document.title = this.playlist.name + " - Piped";
},
handleScroll() {
if (this.loading || !this.playlist || !this.playlist.nextpage) return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
this.loading = true;
this.fetchJson(this.authApiUrl() + "/nextpage/playlists/" + this.$route.query.list, {
nextpage: this.playlist.nextpage,
}).then(json => {
this.playlist.relatedStreams.concat(json.relatedStreams);
this.playlist.nextpage = json.nextpage;
this.loading = false;
json.relatedStreams.map(stream => this.playlist.relatedStreams.push(stream));
this.fetchDeArrowContent(this.playlist.relatedStreams);
2022-11-11 21:28:34 +00:00
});
}
},
removeVideo(index) {
this.playlist.relatedStreams.splice(index, 1);
},
async clonePlaylist() {
this.fetchJson(this.authApiUrl() + "/import/playlist", null, {
method: "POST",
headers: {
Authorization: this.getAuthToken(),
},
body: JSON.stringify({
playlistId: this.$route.query.list,
}),
}).then(resp => {
if (!resp.error) {
alert(this.$t("actions.clone_playlist_success"));
} else alert(resp.error);
});
},
downloadPlaylistAsTxt() {
var data = "";
this.playlist.relatedStreams.forEach(element => {
data += "https://piped.video" + element.url + "\n";
});
this.download(data, this.playlist.name + ".txt", "text/plain");
},
2023-01-06 18:30:28 +00:00
async bookmarkPlaylist() {
if (!this.playlist) return;
if (this.isBookmarked) {
this.removePlaylistBookmark();
return;
}
2023-01-06 18:30:28 +00:00
if (window.db) {
const playlistId = this.$route.query.list;
var tx = window.db.transaction("playlist_bookmarks", "readwrite");
var store = tx.objectStore("playlist_bookmarks");
store.put({
playlistId: playlistId,
name: this.playlist.name,
uploader: this.playlist.uploader,
uploaderUrl: this.playlist.uploaderUrl,
thumbnail: this.playlist.thumbnailUrl,
uploaderAvatar: this.playlist.uploaderAvatar,
videos: this.playlist.videos,
});
this.isBookmarked = true;
2023-01-06 18:30:28 +00:00
}
},
async removePlaylistBookmark() {
var tx = window.db.transaction("playlist_bookmarks", "readwrite");
var store = tx.objectStore("playlist_bookmarks");
store.delete(this.$route.query.list);
this.isBookmarked = false;
},
async isPlaylistBookmarked() {
// needed in order to change the is bookmarked var later
const App = this;
const playlistId = this.$route.query.list;
var tx = window.db.transaction("playlist_bookmarks", "readwrite");
var store = tx.objectStore("playlist_bookmarks");
var req = store.openCursor(playlistId);
req.onsuccess = function (e) {
var cursor = e.target.result;
App.isBookmarked = cursor ? true : false;
};
},
2022-11-11 21:28:34 +00:00
},
};
</script>