feat: playlist order

Author: w3cj

prisma/schema.prisma

@@ -239,13 +239,24 @@ model Video {
   shows        ShowVideo[]
 }
 
+enum PlaylistOrder {
+  // Use playlist order as it is on YouTube
+  YouTubeAsc
+  // Reverse playlist order as it is on YouTube
+  YouTubeDesc
+  // Order playlist by video publish date accordingly
+  VideoPublishedAtAsc
+  VideoPublishedAtDesc
+}
+
 model Playlist {
   id          String            @id @default(uuid())
   title       String
   description String?           @db.Text
   created_at  DateTime          @default(now())
   slug        String            @unique
   unlisted    Boolean?          @default(false)
+  order       PlaylistOrder     @default(YouTubeAsc)
   videos      PlaylistOnVideo[]
 }
 

src/lib/videos/playlistOrderBy.ts

@@ -0,0 +1,20 @@
+import { PlaylistOrder } from '@prisma/client';
+
+export default {
+	[PlaylistOrder.YouTubeAsc]: {
+		order: 'asc'
+	},
+	[PlaylistOrder.YouTubeDesc]: {
+		order: 'desc'
+	},
+	[PlaylistOrder.VideoPublishedAtDesc]: {
+		video: {
+			published_at: 'desc'
+		}
+	},
+	[PlaylistOrder.VideoPublishedAtAsc]: {
+		video: {
+			published_at: 'asc'
+		}
+	}
+} as const;

src/routes/(site)/admin/videos/[playlist_id]/+page.server.ts

@@ -1,3 +1,6 @@
+import { PlaylistOrder } from '@prisma/client';
+import type { Actions } from '@sveltejs/kit';
+
 export const load = async ({ params, locals }) => {
 	const { playlist_id } = params;
 
@@ -29,9 +32,12 @@ export const load = async ({ params, locals }) => {
 		const videos = playlist.videos.map((item) => item.video);
 		console.log('videos', videos);
 
+		const playlistOrderTypes = Object.keys(PlaylistOrder);
+
 		return {
 			playlist,
-			videos
+			videos,
+			playlistOrderTypes
 		};
 	} catch (error) {
 		console.error('Error fetching playlist videos:', error);
@@ -41,3 +47,27 @@ export const load = async ({ params, locals }) => {
 		};
 	}
 };
+
+export const actions: Actions = {
+	updatePlaylist: async function updatePlaylist({ locals, params }) {
+		const { playlist_id } = params;
+		const { playlistOrder } = locals.form_data;
+		if (!playlist_id || !playlistOrder) {
+			return {
+				error: 'Missing data',
+				status: 500
+			};
+		}
+		await locals.prisma.playlist.update({
+			where: {
+				id: playlist_id
+			},
+			data: {
+				order: locals.form_data.playlistOrder as PlaylistOrder
+			}
+		});
+		return {
+			message: 'Updated'
+		};
+	}
+};

src/routes/(site)/admin/videos/[playlist_id]/+page.svelte

@@ -1,10 +1,12 @@
 <!-- src/routes/playlists/[playlist_id]/+page.svelte -->
 <script lang="ts">
 	import AdminSearch from '$/lib/AdminSearch.svelte';
+	import { enhance } from '$app/forms';
+	import { form_action } from '$lib/form_action';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
-	const { playlist, videos } = data;
+	const { playlist, videos, playlistOrderTypes } = data;
 
 	let search_text = '';
 
@@ -13,6 +15,20 @@
 
 <h1>{playlist?.title}</h1>
 
+{#if playlistOrderTypes}
+	<form use:enhance={form_action({ message: 'Update Playlist Order' })} action="?/updatePlaylist" method="POST">
+		<label>
+			Order Playlist
+			<select name="playlistOrder" value={playlist?.order}>
+				{#each playlistOrderTypes as orderType}
+					<option>{orderType}</option> 
+				{/each}
+			</select>
+		</label>
+		<button>Update</button>
+	</form>
+{/if}
+
 <div>
 	<AdminSearch bind:text={search_text} />
 
@@ -42,3 +58,9 @@
 		</table>
 	</div>
 </div>
+
+<style>
+	form {
+		margin: 1rem;
+	}
+</style>

src/routes/(site)/videos/+page.server.ts

@@ -1,29 +1,42 @@
+import playListOrderBy from '$lib/videos/playlistOrderBy';
+
 export const load = async function ({ locals }) {
-	const playlists = await locals.prisma.playlist.findMany({
+	const playlistMeta = await locals.prisma.playlist.findMany({
 		orderBy: {
 			created_at: 'desc'
 		},
-		include: {
-			videos: {
-				take: 3,
-				orderBy: {
-					order: 'asc'
+		select: {
+			id: true,
+			order: true
+		}
+	});
+	const playlists = await Promise.all(
+		playlistMeta.map(async (playlist) => {
+			return locals.prisma.playlist.findFirst({
+				where: {
+					id: playlist.id
 				},
 				include: {
-					video: true
+					videos: {
+						take: 3,
+						orderBy: playListOrderBy[playlist.order],
+						include: {
+							video: true
+						}
+					},
+					_count: {
+						select: {
+							videos: true
+						}
+					}
 				}
-			},
-			_count: {
-				select: {
-					videos: true
-				}
-			}
-		}
-	});
+			});
+		})
+	);
 
 	const playlists_with_item_count = playlists.map((playlist) => ({
 		...playlist,
-		item_count: playlist._count.videos
+		item_count: playlist!._count.videos
 	}));
 	return {
 		playlists: playlists_with_item_count

src/routes/(site)/videos/[p_slug]/+page.server.ts

@@ -1,24 +1,37 @@
+import playlistOrderBy from '$/lib/videos/playlistOrderBy.js';
+
 export const load = async function ({ locals, params }) {
 	const { p_slug } = params;
-	const playlist = await locals.prisma.playlist.findUnique({
+	const playlistMeta = await locals.prisma.playlist.findUnique({
 		where: { slug: p_slug },
-		include: {
-			videos: {
-				include: {
-					video: true
-				}
-			}
+		select: {
+			id: true,
+			order: true
 		}
 	});
 
-	if (!playlist) {
+	if (!playlistMeta) {
 		// Playlist not found
 		return {
 			status: 404,
 			error: 'Playlist not found'
 		};
 	}
 
+	const playlist = await locals.prisma.playlist.findUnique({
+		where: {
+			id: playlistMeta.id
+		},
+		include: {
+			videos: {
+				include: {
+					video: true
+				},
+				orderBy: playlistOrderBy[playlistMeta.order]
+			}
+		}
+	});
+
 	return {
 		playlist
 	};