Fix more naming problems

src/components/MediaCard.vue

@@ -4,20 +4,20 @@ import { computed, ref } from 'vue'
 import type { MediaType } from '@/types/Media'
 
 const props = defineProps<{
-  movie: MediaType
+  media: MediaType
 }>()
 
 const store = useMediaStore()
 const imageLoadFailed = ref(false)
 const loaded = ref(false)
 
-const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id === props.movie.Id))
+const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id === props.media.Id))
 
 const imageSource = computed(() => {
-  if (!props.movie.PosterPath) {
+  if (!props.media.PosterPath) {
     return ''
   }
-  return `https://image.tmdb.org/t/p/w300${props.movie.PosterPath}`
+  return `https://image.tmdb.org/t/p/w300${props.media.PosterPath}`
 })
 </script>
 
@@ -28,7 +28,7 @@ const imageSource = computed(() => {
   >
     <!-- Poster -->
     <router-link
-      :to="{ name: 'details', params: { type: props.movie.MediaType, id: props.movie.Id } }"
+      :to="{ name: 'details', params: { type: props.media.MediaType, id: props.media.Id } }"
     >
       <figure class="overflow-hidden flex items-center justify-center aspect-2/3 bg-gray-50">
         <span v-if="!loaded" class="loading loading-ring loading-lg text-primary"></span>
@@ -53,7 +53,7 @@ const imageSource = computed(() => {
         <img
           v-show="loaded && !imageLoadFailed"
           :src="imageSource"
-          :alt="props.movie.Title"
+          :alt="props.media.Title"
           class="object-cover w-full h-full transform transition-transform duration-500 hover:scale-105"
           @load="loaded = true"
           @error="
@@ -69,14 +69,14 @@ const imageSource = computed(() => {
     <!-- Body -->
     <div class="card-body p-4 flex flex-col">
       <router-link
-        :to="{ name: 'details', params: { type: props.movie.MediaType, id: props.movie.Id } }"
+        :to="{ name: 'details', params: { type: props.media.MediaType, id: props.media.Id } }"
       >
         <h2
           class="card-title text-base font-semibold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
         >
-          {{ props.movie.Title }}
+          {{ props.media.Title }}
         </h2>
-        <p class="text-sm text-gray-400">{{ props.movie.ReleaseDate.slice(0, 4) }}</p>
+        <p class="text-sm text-gray-400">{{ props.media.ReleaseDate.slice(0, 4) }}</p>
       </router-link>
 
       <div class="card-actions justify-end mt-auto">
@@ -84,7 +84,7 @@ const imageSource = computed(() => {
           v-motion-fade-visible-once
           v-if="!alreadyAdded"
           class="btn btn-sm px-4 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
-          @click="store.addMedia(props.movie)"
+          @click="store.addMedia(props.media)"
         >
           Add
         </button>
@@ -92,7 +92,7 @@ const imageSource = computed(() => {
           v-motion-fade-visible-once
           v-else
           class="btn btn-sm px-4 bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200 hover:text-red-700 transition"
-          @click="store.removeMedia(props.movie.Id)"
+          @click="store.removeMedia(props.media.Id)"
         >
           Remove
         </button>

src/components/MediaList.vue

@@ -29,8 +29,8 @@ const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): voi
       v-else
       class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
     >
-      <li v-for="movie in props.medias" :key="movie.Id" v-auto-animate>
+      <li v-for="media in props.medias" :key="media.Id" v-auto-animate>
-        <MediaCard :movie="movie" />
+        <MediaCard :media="media" />
       </li>
       <li v-if="!props.isSearch">
         <AddMoreCard />

src/views/AddView.vue

@@ -115,7 +115,7 @@ watch(searchQuery, () => {
       v-else
       class="text-center text-gray-500 mt-16 bg-gray-50/60 border border-gray-200 rounded-lg py-12"
     >
-      Search for a movie to add it to your list
+      Search for a movie or TV Serie to add it to your list
     </p>
 
     <!-- Error alert -->