archy/packages/app/src/components/content/FilmDetail.vue

<template>
  <div class="film-detail h-full overflow-y-auto overflow-x-hidden scrollbar-hide">
    <div class="relative w-full overflow-hidden aspect-[16/7] shrink-0">
      <img
        v-if="bannerSrc"
        :src="bannerSrc"
        :alt="film.title"
        class="absolute inset-0 w-full h-full object-cover object-center block"
        @error="onBannerError"
      />
      <div
        v-else
        class="absolute inset-0"
        :style="{ background: fallbackGradient }"
      />
      <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />

      <button
        class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10 text-white/80"
        @click="$emit('back')"
      >
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>

      <div class="absolute bottom-0 left-0 right-0 p-4">
        <h2 class="text-lg font-bold text-white">{{ film.title }}</h2>
        <div class="flex items-center gap-2 mt-1 text-xs text-white/60">
          <span class="text-accent font-bold">★ {{ film.rating }}</span>
          <span>{{ film.year }}</span>
          <span>{{ film.runtime }}m</span>
          <span>{{ film.director }}</span>
        </div>
      </div>
    </div>

    <div class="p-4 space-y-4">
      <div class="flex flex-wrap gap-1.5">
        <span
          v-for="genre in film.genres"
          :key="genre"
          class="text-[10px] px-2 py-1 rounded-md font-medium"
          :class="isDark ? 'bg-white/10 text-white/60' : 'bg-black/5 text-gray-600'"
        >
          {{ genre }}
        </span>
      </div>

      <p class="text-sm leading-relaxed"
         :class="isDark ? 'text-white/70' : 'text-gray-600'">
        {{ film.synopsis }}
      </p>

      <div>
        <h4 class="text-xs font-semibold mb-2"
            :class="isDark ? 'text-white/50' : 'text-gray-500'">Cast</h4>
        <p class="text-sm" :class="isDark ? 'text-white/70' : 'text-gray-700'">
          {{ film.cast.join(', ') }}
        </p>
      </div>

      <div>
        <h4 class="text-xs font-semibold mb-2"
            :class="isDark ? 'text-white/50' : 'text-gray-500'">Watch on</h4>
        <div class="space-y-2">
          <a
            v-for="src in film.sources"
            :key="src.url"
            :href="src.url"
            target="_blank"
            rel="noopener"
            class="flex items-center justify-between p-3 rounded-xl transition-colors"
            :class="isDark
              ? 'bg-white/5 hover:bg-white/10'
              : 'bg-black/3 hover:bg-black/5'"
          >
            <div class="flex items-center gap-2.5">
              <span class="text-sm">{{ sourceIcon(src.type) }}</span>
              <div>
                <p class="text-xs font-medium"
                   :class="isDark ? 'text-white/80' : 'text-gray-800'">{{ src.name }}</p>
                <p class="text-[10px]"
                   :class="isDark ? 'text-white/30' : 'text-gray-400'">{{ src.quality }}</p>
              </div>
            </div>
            <svg class="w-4 h-4" :class="isDark ? 'text-white/30' : 'text-gray-400'"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { Film } from '@aiui/core/types/content'
import { useTheme } from '@/composables/useTheme'
import { fetchTmdbPoster } from '@/composables/useImageFallback'

const props = defineProps<{ film: Film }>()
defineEmits<{ back: [] }>()

const { isDark } = useTheme()

// Fallback order: backdrop (mock) → TMDB API → poster (mock) → gradient
const bannerTry = ref<'backdrop' | 'tmdb' | 'poster' | 'done'>('backdrop')
const tmdbBannerUrl = ref<string | null>(null)

const bannerSrc = computed(() => {
  if (bannerTry.value === 'done') return null
  if (bannerTry.value === 'backdrop' && props.film.backdropUrl) return props.film.backdropUrl
  if (bannerTry.value === 'tmdb' && tmdbBannerUrl.value) return tmdbBannerUrl.value
  if (bannerTry.value === 'poster' && props.film.posterUrl) return props.film.posterUrl
  if (bannerTry.value === 'backdrop' && !props.film.backdropUrl) return props.film.posterUrl || null
  return null
})

const fallbackGradient = computed(() => {
  const hue = [...props.film.title].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360
  return `linear-gradient(135deg, hsl(${hue}, 25%, 12%) 0%, hsl(${(hue + 40) % 360}, 20%, 8%) 100%)`
})

async function onBannerError() {
  if (bannerTry.value === 'backdrop') {
    const { backdropUrl, posterUrl } = await fetchTmdbPoster(props.film.title, props.film.year)
    const url = backdropUrl ?? posterUrl
    if (url) {
      tmdbBannerUrl.value = url
      bannerTry.value = 'tmdb'
      return
    }
    bannerTry.value = props.film.posterUrl ? 'poster' : 'done'
    return
  }
  if (bannerTry.value === 'tmdb') {
    bannerTry.value = props.film.posterUrl ? 'poster' : 'done'
    return
  }
  bannerTry.value = 'done'
}

function sourceIcon(type: string): string {
  const icons: Record<string, string> = {
    plex: '🟧',
    nextcloud: '☁️',
    youtube: '▶️',
    'free-web': '🌐',
  }
  return icons[type] ?? '📺'
}
</script>