ui adds

Author: kyleaupton

web/src/components/media/MediaHero.vue

@@ -91,12 +91,12 @@ const openTrailerModal = () => {
 .backdrop-overlay {
   position: absolute;
   inset: 0;
-  /* Dark-ish, readable, preserves image detail */
+  /* Darker overlay for better text readability */
   background: linear-gradient(
     180deg,
-    rgba(0, 0, 0, 0.5),
-    rgba(0, 0, 0, 0.25) 45%,
-    rgba(0, 0, 0, 0.6)
+    rgba(0, 0, 0, 0.7),
+    rgba(0, 0, 0, 0.5) 45%,
+    rgba(0, 0, 0, 0.8)
   );
 }
 

web/src/components/poster/Poster.vue

@@ -32,7 +32,7 @@
     <div class="poster-overlay">
       <div class="poster-info">
         <span class="poster-title">{{ item.title }}</span>
-        <span class="poster-year">{{ item.year }}</span>
+        <span class="poster-meta">{{ mediaTypeLabel }} · {{ item.year }}</span>
       </div>
     </div>
   </component>
@@ -112,6 +112,17 @@ const isInLibrary = computed(() => {
 
 const showLibraryBadge = computed(() => !props.isDownloading && isInLibrary.value)
 
+const mediaTypeLabel = computed(() => {
+  if ('mediaType' in props.item && props.item.mediaType) {
+    return props.item.mediaType === 'series' ? 'Series' : 'Movie'
+  }
+  // Fallback: check for series-specific fields
+  if ('numberOfSeasons' in props.item || 'seasons' in props.item) {
+    return 'Series'
+  }
+  return 'Movie'
+})
+
 const posterPath = computed(() => {
   const sizeConfig = POSTER_SIZES[props.size]
   return `https://image.tmdb.org/t/p/${sizeConfig.tmdbSize}/${props.item.posterPath}`
@@ -267,7 +278,7 @@ const onError = () => {
   overflow: hidden;
 }
 
-.poster-year {
+.poster-meta {
   font-size: 0.75rem;
   color: rgba(255, 255, 255, 0.7);
 }

web/src/lib/utils.ts

@@ -19,14 +19,16 @@ export function formatRuntime(minutes: number | undefined | null): string {
 }
 
 /**
- * Builds metadata subtitle with bullet separators (e.g., "2008 • PG-13 • 2h 32m")
+ * Builds metadata subtitle with bullet separators (e.g., "Movie • 2008 • PG-13 • 2h 32m")
  */
 export function buildMetadataSubtitle(parts: {
+  mediaType?: 'movie' | 'series'
   year?: string | number
   certification?: string
   runtime?: number | null
 }): string {
   const segments: string[] = []
+  if (parts.mediaType) segments.push(parts.mediaType === 'series' ? 'Series' : 'Movie')
   if (parts.year) segments.push(String(parts.year))
   if (parts.certification) segments.push(parts.certification)
   if (parts.runtime) {

web/src/views/Movie.vue

@@ -23,7 +23,7 @@
         <template #actions>
           <Button @click="searchForDownloadCandidates">
             <Download class="mr-2 size-4" />
-            Snag
+              Download
           </Button>
         </template>
       </MediaHero>
@@ -120,6 +120,7 @@ const movieSubtitle = computed(() => {
     ? new Date(data.value.releaseDate).getFullYear()
     : undefined
   return buildMetadataSubtitle({
+    mediaType: 'movie',
     year,
     certification: data.value.certification,
     runtime: data.value.runtime,

web/src/views/Series.vue

@@ -276,6 +276,7 @@ const seriesSubTitle = computed(() => {
     yearDisplay = first
   }
   return buildMetadataSubtitle({
+    mediaType: 'series',
     year: yearDisplay,
     certification: data.value.certification,
     runtime: data.value.episodeRuntime,