Started playlist view

materialious/src/lib/Api/index.ts

@@ -1,6 +1,6 @@
 import { get } from 'svelte/store';
 import { auth, returnYTDislikesInstance } from '../../store';
-import type { Channel, ChannelPage, Comments, Playlist, ReturnYTDislikes, SearchSuggestion, Subscription, Video, VideoPlay } from './model';
+import type { Channel, ChannelPage, Comments, Playlist, PlaylistPage, ReturnYTDislikes, SearchSuggestion, Subscription, Video, VideoPlay } from './model';
 
 export function buildPath(path: string): string {
   return `${import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE}/api/v1/${path}`;
@@ -141,4 +141,9 @@ export async function postHistory(videoId: string) {
     method: 'POST',
     ...buildAuthHeaders()
   });
+}
+
+export async function getPlaylist(playlistId: string, page: number = 1): Promise<PlaylistPage> {
+  const resp = await fetch(buildPath(`playlists/${playlistId}?page=${page}`));
+  return await resp.json();
 }

materialious/src/lib/Api/model.ts

@@ -178,6 +178,22 @@ export interface Playlist {
   videos: PlaylistVideo[];
 }
 
+export interface PlaylistPageVideo extends PlaylistVideo {
+  author: string;
+  index: number;
+  authorId: string;
+  viewCount: number;
+}
+
+export interface PlaylistPage extends Playlist {
+  description: string;
+  descriptionHtml: string;
+  viewCount: number;
+  updated: number;
+  isListed: boolean;
+  videos: PlaylistPageVideo[];
+}
+
 export interface ChannelPage extends Channel {
   allowedRegions: string[];
   tabs: string[];

materialious/src/lib/Thumbnail.svelte

@@ -2,10 +2,10 @@
 	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
 	import { playerSavePlaybackPosition } from '../store';
-	import type { Notification, Video, VideoBase } from './Api/model';
+	import type { Notification, PlaylistPageVideo, Video, VideoBase } from './Api/model';
 	import { cleanNumber, truncate, videoLength } from './misc';
 
-	export let video: VideoBase | Video | Notification;
+	export let video: VideoBase | Video | Notification | PlaylistPageVideo;
 
 	let loading = true;
 	let loaded = false;
@@ -75,7 +75,8 @@
 		<div class="max">
 			<a href={`/watch/${video.videoId}`}><div class="bold">{truncate(video.title)}</div></a>
 			<div>
-				<a href={`/channel/${video.authorId}`}>{video.author}</a>{#if !('publishedText' in video)}
+				<a href={`/channel/${video.authorId}`}>{video.author}</a
+				>{#if !('publishedText' in video) && 'viewCountText' in video}
 					&nbsp;• {video.viewCountText}{/if}
 			</div>
 			{#if 'publishedText' in video}

materialious/src/lib/VideoList.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { Video, VideoBase } from './Api/model';
+	import type { PlaylistPageVideo, Video, VideoBase } from './Api/model';
 	import PageLoading from './PageLoading.svelte';
 	import Thumbnail from './Thumbnail.svelte';
 
-	export let videos: VideoBase[] | Video[] | Notification[] = [];
+	export let videos: VideoBase[] | Video[] | Notification[] | PlaylistPageVideo[] = [];
 	export let oneItemPerRow: boolean = false;
 </script>
 

materialious/src/routes/playlist/[slug]/+page.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { getPlaylist } from '$lib/Api/index';
+	import type { PlaylistPageVideo } from '$lib/Api/model.js';
+	import VideoList from '$lib/VideoList.svelte';
+	import { cleanNumber } from '$lib/misc.js';
+	import { onMount } from 'svelte';
+	import { activePage } from '../../../store.js';
+
+	export let data;
+
+	activePage.set(null);
+
+	let videos = data.playlist.videos.sort((a: PlaylistPageVideo, b: PlaylistPageVideo) => {
+		return a.index < b.index ? -1 : 1;
+	});
+
+	onMount(async () => {
+		for (let page = 1; page++; ) {
+			const newVideos = (await getPlaylist(data.playlist.playlistId, page)).videos;
+			if (newVideos.length === 0) {
+				break;
+			}
+			videos = [...videos, ...newVideos].sort((a: PlaylistPageVideo, b: PlaylistPageVideo) => {
+				return a.index < b.index ? -1 : 1;
+			});
+		}
+	});
+</script>
+
+<div class="space"></div>
+
+<article>
+	<h3>{data.playlist.title}</h3>
+	<p>{cleanNumber(data.playlist.viewCount)} views • {data.playlist.videoCount} videos</p>
+	<div class="divider" style="margin-bottom: 1em;"></div>
+	<p style="white-space: pre-line;word-wrap: break-word;">{data.playlist.description}</p>
+</article>
+
+<VideoList {videos} />

materialious/src/routes/playlist/[slug]/+page.ts

@@ -0,0 +1,7 @@
+import { getPlaylist } from '$lib/Api/index.js';
+
+export async function load({ params }) {
+  return {
+    playlist: await getPlaylist(params.slug)
+  };
+}