Add WatchedMovies

pages/search.vue

@@ -42,9 +42,13 @@
 		<!-- Movies Grid -->
 		<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
 			<div v-for="movie in filteredMovies" :key="movie.id"
-				class="card bg-base-100 shadow-xl cursor-pointer hover:glass hover:opacity-70"
-				@click="sendToPlayer(movie)">
-				<figure>
+				class="card bg-base-100 shadow-xl cursor-pointer hover:glass hover:opacity-70" :class="[
+					userWatchedMovies.includes(movie.imdb_id) ? 'opacity-40' : ''
+				]" @click="sendToPlayer(movie)">
+				<figure class="relative">
+					<div v-if="userWatchedMovies.includes(movie.imdb_id)"
+						class="absolute bottom-0 right-0 btn btn-outline btn-accent i-carbon-checkmark-filled">
+					</div>
 					<img :src="'https://image.tmdb.org/t/p/w500' + movie.poster_path" :alt="movie.title"
 						class="w-full object-cover" />
 				</figure>
@@ -90,6 +94,7 @@ const sortBy = ref('popularity')
 const sortDirection = ref('desc')
 const selectedGenre = ref('')
 const yearFilter = ref('')
+const userWatchedMovies = ref([])
 
 // Add scroll listener
 onMounted(() => {
@@ -110,6 +115,13 @@ onMounted(async () => {
 		// Search Popular Movies
 		searchMovies()
 
+		// Fetch User data
+		const resUser = await fetch(
+			`/api/users/me`
+		)
+		const udata = await resUser.json()
+		userWatchedMovies.value = udata.watchedMovies
+
 	} catch (error) {
 		showError('Error fetching setup data:', error)
 	}
@@ -192,7 +204,7 @@ const debounceSearch = debounce(() => {
 // Infinite scroll handler
 const handleScroll = () => {
 	const bottomOfWindow =
-		document.documentElement.scrollTop + window.innerHeight ===
+		document.documentElement.scrollTop + window.innerHeight + 30 >=
 		document.documentElement.offsetHeight
 
 	if (!bottomOfWindow || loading.value || totalPages.value == page.value) return

server/api/movies/[id]/index.get.ts

@@ -1,19 +1,42 @@
 import { XMLParser } from "fast-xml-parser";
+import { getServerSession, getToken } from "#auth";
 
 const BASE_URL = "https://api.themoviedb.org/3/";
 
 export default defineEventHandler(async (event) => {
+  const session = await getServerSession(event);
+  const token = await getToken({ event });
+  if (!session) {
+    return { message: "User is not authenticated", status: 400 };
+  }
+  if (!token?.email) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
   const config = useRuntimeConfig(event);
+
   try {
     if (!event.context.params?.id) {
       throw createError({
         statusCode: 400,
         statusMessage: "id parameter is required",
       });
     }
-
     const id = event.context.params?.id;
 
+    //Add Movie to WatchedMovies User list
+    await db
+      .update(tables.users)
+      .set({
+        watchedMovies: sql`array_append(${tables.users.watchedMovies}, ${id})`,
+      })
+      .where(
+        and(
+          eq(tables.users.email, token.email),
+          sql`NOT (${id} = ANY(${tables.users.watchedMovies}))`
+        )
+      )
+
     //Fetch movie infos
     const response = await fetch(
       `${BASE_URL}find/${id}` +

server/api/movies/[id]/stream.get.ts

@@ -16,6 +16,9 @@ export default defineEventHandler(
     if (!session) throw createError({ statusCode: 401 });
 
     const moviesDir = useRuntimeConfig(event).moviesDir;
+
+    const headers = getRequestHeaders(event) as HeadersInit;
+
     if (!fs.existsSync(moviesDir)) fs.mkdirSync(moviesDir);
     const id = getRouterParam(event, "id");
     if (!id)
@@ -32,7 +35,7 @@ export default defineEventHandler(
     });
     if (file_stream) return file_stream;
 
-    const infos = await $fetch(`/api/movies/${id}`);
+    const infos = await $fetch(`/api/movies/${id}`, { headers });
     if (!infos.torrents?.[0]) {
       throw createError({
         statusCode: 404,
@@ -79,7 +82,7 @@ export default defineEventHandler(
       let stream = convert_to_webm(biggest_file_stream)
         .on("end", () => {
           if (!fs.existsSync(filepath))
-            fs.cp(biggest_file_path_converted, filepath, () => {});
+            fs.cp(biggest_file_path_converted, filepath, () => { });
         })
         .pipe();
       if (!fs.existsSync(biggest_file_path_converted))
@@ -88,7 +91,7 @@ export default defineEventHandler(
     } else {
       torrent.on("done", () => {
         if (!fs.existsSync(filepath))
-          fs.cp(biggest_file_path, filepath, () => {});
+          fs.cp(biggest_file_path, filepath, () => { });
       });
       return biggest_file_stream;
     }

server/api/movies/genres.get.ts

@@ -1,7 +1,18 @@
 const BASE_URL = "https://api.themoviedb.org/3/";
+import { getServerSession, getToken } from "#auth";
 
 export default defineEventHandler(async (event) => {
+  const session = await getServerSession(event);
+  const token = await getToken({ event });
+  if (!session) {
+    return { message: "User is not authenticated", status: 400 };
+  }
+  if (!token?.email) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
   const config = useRuntimeConfig(event);
+
   try {
     // Fetch setup data
     const response = await fetch(

server/api/movies/search.get.ts

@@ -1,7 +1,18 @@
 const BASE_URL = "https://api.themoviedb.org/3/";
+import { getServerSession, getToken } from "#auth";
 
 export default defineEventHandler(async (event) => {
+  const session = await getServerSession(event);
+  const token = await getToken({ event });
+  if (!session) {
+    return { message: "User is not authenticated", status: 400 };
+  }
+  if (!token?.email) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
   const config = useRuntimeConfig(event);
+
   try {
     // Get all query parameters
     const query = getQuery(event);

server/database/schema.ts

@@ -1,5 +1,5 @@
 import { relations } from "drizzle-orm";
-import { boolean, pgTable, timestamp, uuid, varchar } from "drizzle-orm/pg-core";
+import { boolean, pgTable, timestamp, uuid, varchar, text } from "drizzle-orm/pg-core";
 
 export const users = pgTable("users", {
     id: uuid("id").primaryKey().defaultRandom(),
@@ -14,6 +14,7 @@ export const users = pgTable("users", {
     resetToken: varchar("resetToken", { length: 255 }),
     resetExpirationToken: timestamp("resetExpirationToken", { withTimezone: true }),
     complete_profile: boolean("complete_profile").default(false),
+    watchedMovies: text("watchedMovies").array().default([])
     // TODO: add more columns as needed
 });