Minor improvements and api fix

src/components/MediaCard.vue

@@ -3,6 +3,7 @@ import { useMediaStore } from '@/stores/media'
 import { computed } from 'vue'
 import type { MediaType } from '@/types/Media'
 import ImageWithFallback from './ImageWithFallback.vue'
+import ScoreRing from './ScoreRing.vue'
 
 const props = defineProps<{
   media: MediaType
@@ -20,7 +21,7 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
 
 <template>
   <div
-    class="card relative w-full h-full overflow-hidden bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-md hover:shadow-xl transition-all duration-300"
+    class="card relative w-full h-full overflow-hidden bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-xs hover:shadow-xl transition-all duration-300"
     v-motion-fade-visible-once
   >
     <!-- Poster wrapper with fixed aspect -->
@@ -39,21 +40,7 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
 
       <!-- Radial progress placed on the right edge, centered on the seam between poster and body -->
       <div class="absolute left-3 bottom-0 z-20 translate-y-1/2" aria-hidden="true">
-        <div
+        <ScoreRing :VoteAverage="props.media.VoteAverage" />
-          class="radial-progress bg-primary text-primary-content border-primary border-4 font-bold flex items-center justify-center"
-          :style="{
-            '--value': props.media.VoteAverage * 10,
-            '--size': '2rem',
-            '--thickness': '3px',
-          }"
-          :aria-valuenow="props.media.VoteAverage"
-          role="progressbar"
-        >
-          <span class="flex items-baseline text-[0.7em]">
-            {{ props.media.VoteAverage === 0 ? '?' : (props.media.VoteAverage * 10).toFixed(0) }}
-            <span class="text-[0.5em] relative -top-1 ml-0.5">%</span>
-          </span>
-        </div>
       </div>
     </div>
 
@@ -70,14 +57,14 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
         </h2>
         <time
           class="text-sm text-gray-400"
-          :datetime="new Date(props.media.ReleaseDate).toISOString()"
+          :datetime="new Date(props.media.ReleaseDate === '' ? props.media.FirstAirDate : props.media.ReleaseDate).toISOString()"
         >
           {{
             new Intl.DateTimeFormat('default', {
               year: 'numeric',
               month: 'long',
               day: 'numeric',
-            }).format(new Date(props.media.ReleaseDate))
+            }).format(new Date(props.media.ReleaseDate === '' ? props.media.FirstAirDate : props.media.ReleaseDate))
           }}
         </time>
       </router-link>

src/components/ScoreRing.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const props = defineProps<{ VoteAverage: number }>()
+</script>
+
+<template>
+  <div
+    class="radial-progress bg-primary text-primary-content border-primary border-4 font-bold flex items-center justify-center"
+    :style="{
+      '--value': props.VoteAverage * 10,
+      '--size': '2rem',
+      '--thickness': '3px',
+    }"
+    :aria-valuenow="props.VoteAverage"
+    role="progressbar"
+  >
+    <span class="flex items-baseline text-[0.7em]">
+      {{ props.VoteAverage === 0 ? '?' : (props.VoteAverage * 10).toFixed(0) }}
+      <span class="text-[0.5em] relative -top-1 ml-0.5">%</span>
+    </span>
+  </div>
+</template>

src/lib/api.ts

@@ -41,7 +41,7 @@ export const loadMedia = async (
   const responses = await Promise.all(requests)
 
   // If only one type was requested, handle that directly
-  if (filters.onlyMovies) {
+  if (filters.onlyMovies && !filters.onlySeries) {
     const movieSearch = responses[0]
     if (movieSearch.status !== 200) {
       return {
@@ -62,7 +62,7 @@ export const loadMedia = async (
     }
   }
 
-  if (filters.onlySeries) {
+  if (filters.onlySeries && !filters.onlyMovies) {
     const tvSearch = responses[0]
     if (tvSearch.status !== 200) {
       return {

src/stores/media.ts

@@ -41,7 +41,6 @@ export const useSearchPageStore = defineStore('searchPage', () => {
     searchQuery.value = query
     mediaList.value = medias
     searchFilters.value = filters
-    console.log('setState', page, query, medias, filters)
   }
   return { searchPage, searchQuery, mediaList, searchFilters, setState }
 })