Fixed some naming problems

src/components/SearchBar.vue

@@ -37,7 +37,7 @@ function onSubmit() {
       <!-- Input -->
       <input
         type="search"
-        placeholder="Search for a movie"
+        placeholder="Search for media"
         required
         :value="props.modelValue"
         @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"

src/views/AddView.vue

@@ -7,7 +7,7 @@ import type { MediaType } from '@/types/Media'
 import ErrorAlert from '@/components/alerts/ErrorAlert.vue'
 import { useSearchPageStore } from '@/stores/media'
 
-const movies = ref<MediaType[]>()
+const medias = ref<MediaType[]>()
 const seachError = ref<string>('')
 const searchQuery = ref('')
 const searchPage = ref(1)
@@ -23,16 +23,16 @@ async function searchMovie() {
     const result = await searchMovies(searchQuery.value)
     console.log(result)
     if (result.totalResults === 0) {
-      movies.value = []
+      medias.value = []
       seachError.value = 'No results found'
       return
     }
     seachError.value = ''
-    movies.value = result.Results
+    medias.value = result.Results
 
     state.setState(searchPage.value, searchQuery.value, result.Results)
   } catch (error) {
-    movies.value = []
+    medias.value = []
     console.error(error)
     seachError.value = (error as Error).message
   } finally {
@@ -45,8 +45,8 @@ async function loadMore() {
     isLoadingMore.value = true
     searchPage.value++
     const result = await loadMoreMovies(searchQuery.value, searchPage.value)
-    movies.value?.push(...result.Results)
-    state.setState(searchPage.value, searchQuery.value, movies.value ? movies.value : [])
+    medias.value?.push(...result.Results)
+    state.setState(searchPage.value, searchQuery.value, medias.value ? medias.value : [])
   } catch (error) {
     searchPage.value = 1
     seachError.value = (error as Error).message
@@ -64,7 +64,7 @@ onMounted(() => {
   ) {
     searchQuery.value = state.searchQuery
     searchPage.value = state.searchPage
-    movies.value = state.mediaList
+    medias.value = state.mediaList
   }
 })
 
@@ -90,7 +90,7 @@ watch(searchQuery, () => {
     <h1
       class="text-4xl font-extrabold text-center mb-10 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
     >
-      Add a Movie
+      Add Media
     </h1>
 
     <!-- Search bar -->
@@ -103,8 +103,8 @@ watch(searchQuery, () => {
 
     <!-- Movie list -->
     <MediaList
-      v-else-if="movies && movies.length > 0"
-      :medias="movies"
+      v-else-if="medias && medias.length > 0"
+      :medias="medias"
       :loading-more="isLoadingMore"
       @loadMore="loadMore"
       :is-search="true"

src/views/HomeView.vue

@@ -9,7 +9,7 @@
       </h1>
 
       <p class="text-lg text-gray-600 max-w-2xl mb-12">
-        A simple and beautiful movie list app built with Vue&nbsp;3 and Tailwind&nbsp;CSS (daisyUI).
+        A simple and beautiful media list app built with Vue&nbsp;3 and Tailwind&nbsp;CSS (daisyUI).
       </p>
 
       <RouterLink

src/views/ListView.vue

@@ -10,7 +10,7 @@ const store = useMediaStore()
     <h1
       class="text-4xl font-extrabold text-center mb-10 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
     >
-      Movie Library
+      Media Library
     </h1>
     <MediaList
       v-auto-animate

src/views/WatchView.vue

@@ -3,8 +3,8 @@ import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
-const movieId = ref(route.params.id as string)
-const movieName = ref(route.params.name as string)
+const mediaId = ref(route.params.id as string)
+const mediaName = ref(route.params.name as string)
 const isLoaded = ref(false)
 </script>
 
@@ -19,7 +19,7 @@ const isLoaded = ref(false)
         <h1 class="text-3xl font-bold text-gray-700">
           Watch <br />
           <span class="bg-linear-to-r from-indigo-500 to-cyan-400 bg-clip-text text-transparent">
-            {{ movieName }}
+            {{ mediaName }}
           </span>
         </h1>
         <span class="badge badge-warning">Experimental</span>
@@ -33,7 +33,7 @@ const isLoaded = ref(false)
       <!-- Responsive iframe -->
       <div v-show="isLoaded" class="w-full aspect-video rounded-lg overflow-hidden shadow-lg">
         <iframe
-          :src="'https://vidlink.pro/movie/' + movieId + '?autoplay=true&title=false'"
+          :src="'https://vidlink.pro/movie/' + mediaId + '?autoplay=true&title=false'"
           frameborder="0"
           allowfullscreen
           class="w-full h-full"