tmdb轮播新增预告片显示

2026-01-02 01:50:16 +08:00
parent 0edd224b5d
commit 1c2b1b3c4a
4 changed files with 173 additions and 10 deletions
@@ -23,6 +23,8 @@ export default function BannerCarousel({ autoPlayInterval = 5000 }: BannerCarous
  const [isLoading, setIsLoading] = useState(true);
  const [isPaused, setIsPaused] = useState(false);
  const [skipNextAutoPlay, setSkipNextAutoPlay] = useState(false); // 跳过下一次自动播放
+  const [isYouTubeAccessible, setIsYouTubeAccessible] = useState(false); // YouTube连通性（默认false，检查后再决定）
+  const [enableTrailers, setEnableTrailers] = useState(false); // 是否启用预告片（默认关闭）
  const touchStartX = useRef(0);
  const touchEndX = useRef(0);
  const isManualChange = useRef(false); // 标记是否为手动切换
@@ -51,6 +53,39 @@ export default function BannerCarousel({ autoPlayInterval = 5000 }: BannerCarous
    return getTMDBImageUrl(path, 'original');
  };

+  // 读取本地设置
+  useEffect(() => {
+    const setting = localStorage.getItem('enableTrailers');
+    if (setting !== null) {
+      setEnableTrailers(setting === 'true');
+    }
+  }, []);
+
+  // 检测YouTube连通性
+  useEffect(() => {
+    const checkYouTubeAccess = () => {
+      const img = document.createElement('img');
+      const timeout = setTimeout(() => {
+        img.src = '';
+        setIsYouTubeAccessible(false);
+      }, 3000);
+
+      img.onload = () => {
+        clearTimeout(timeout);
+        setIsYouTubeAccessible(true);
+      };
+
+      img.onerror = () => {
+        clearTimeout(timeout);
+        setIsYouTubeAccessible(false);
+      };
+
+      img.src = 'https://i.ytimg.com/vi/dQw4w9WgXcQ/default.jpg';
+    };
+
+    checkYouTubeAccess();
+  }, []);
+
  // 获取热门内容
  useEffect(() => {
    const fetchTrending = async () => {
@@ -234,7 +269,7 @@ export default function BannerCarousel({ autoPlayInterval = 5000 }: BannerCarous
        }
      }}
    >
-      {/* 背景图片 */}
+      {/* 背景图片或视频 */}
      <div className="absolute inset-0">
        {items.map((item, index) => (
          <div
@@ -243,14 +278,34 @@ export default function BannerCarousel({ autoPlayInterval = 5000 }: BannerCarous
              index === currentIndex ? 'opacity-100' : 'opacity-0'
            }`}
          >
-            <Image
-              src={getImageUrl(item.backdrop_path || item.poster_path)}
-              alt={item.title}
-              fill
-              className="object-cover"
-              priority={index === 0}
-              sizes="100vw"
-            />
+            {item.video_key && isYouTubeAccessible && enableTrailers ? (
+              /* 显示YouTube视频 */
+              <div className="absolute inset-0 overflow-hidden">
+                <iframe
+                  src={`https://www.youtube.com/embed/${item.video_key}?listType=playlist&autoplay=1&mute=1&controls=0&loop=1&playlist=${item.video_key}&modestbranding=1&rel=0&showinfo=0&vq=hd1080&hd=1&disablekb=1&fs=0&iv_load_policy=3`}
+                  className="absolute top-1/2 left-1/2 pointer-events-none"
+                  allow="autoplay; encrypted-media"
+                  style={{
+                    border: 'none',
+                    width: '100vw',
+                    height: '100vh',
+                    minWidth: '100%',
+                    minHeight: '100%',
+                    transform: 'translate(-50%, -50%)',
+                  }}
+                />
+              </div>
+            ) : (
+              /* 显示图片 */
+              <Image
+                src={getImageUrl(item.backdrop_path || item.poster_path)}
+                alt={item.title}
+                fill
+                className="object-cover"
+                priority={index === 0}
+                sizes="100vw"
+              />
+            )}
            {/* 渐变遮罩 */}
            <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent"></div>
            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
@@ -91,6 +91,7 @@ export const UserMenu: React.FC = () => {
  const [liveDirectConnect, setLiveDirectConnect] = useState(false);
  const [danmakuHeatmapDisabled, setDanmakuHeatmapDisabled] = useState(false);
  const [tmdbBackdropDisabled, setTmdbBackdropDisabled] = useState(false);
+  const [enableTrailers, setEnableTrailers] = useState(false);
  const [doubanDataSource, setDoubanDataSource] = useState('cmliussss-cdn-tencent');
  const [doubanImageProxyType, setDoubanImageProxyType] = useState('cmliussss-cdn-tencent');
  const [doubanImageProxyUrl, setDoubanImageProxyUrl] = useState('');
@@ -327,6 +328,11 @@ export const UserMenu: React.FC = () => {
        setTmdbBackdropDisabled(savedTmdbBackdropDisabled === 'true');
      }

+      const savedEnableTrailers = localStorage.getItem('enableTrailers');
+      if (savedEnableTrailers !== null) {
+        setEnableTrailers(savedEnableTrailers === 'true');
+      }
+
      const savedBufferStrategy = localStorage.getItem('bufferStrategy');
      if (savedBufferStrategy !== null) {
        setBufferStrategy(savedBufferStrategy);
@@ -564,6 +570,13 @@ export const UserMenu: React.FC = () => {
    }
  };

+  const handleEnableTrailersToggle = (value: boolean) => {
+    setEnableTrailers(value);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('enableTrailers', String(value));
+    }
+  };
+
  const handleDoubanDataSourceChange = (value: string) => {
    setDoubanDataSource(value);
    if (typeof window !== 'undefined') {
@@ -635,6 +648,8 @@ export const UserMenu: React.FC = () => {
    setFluidSearch(defaultFluidSearch);
    setLiveDirectConnect(false);
    setDanmakuHeatmapDisabled(false);
+    setTmdbBackdropDisabled(false);
+    setEnableTrailers(false);
    setDoubanProxyUrl(defaultDoubanProxy);
    setDoubanDataSource(defaultDoubanProxyType);
    setDoubanImageProxyType(defaultDoubanImageProxyType);
@@ -648,6 +663,8 @@ export const UserMenu: React.FC = () => {
      localStorage.setItem('fluidSearch', JSON.stringify(defaultFluidSearch));
      localStorage.setItem('liveDirectConnect', JSON.stringify(false));
      localStorage.setItem('danmaku_heatmap_disabled', 'false');
+      localStorage.setItem('tmdb_backdrop_disabled', 'false');
+      localStorage.setItem('enableTrailers', 'false');
      localStorage.setItem('doubanProxyUrl', defaultDoubanProxy);
      localStorage.setItem('doubanDataSource', defaultDoubanProxyType);
      localStorage.setItem('doubanImageProxyType', defaultDoubanImageProxyType);
@@ -1297,6 +1314,30 @@ export const UserMenu: React.FC = () => {
              </label>
            </div>

+            {/* 启用预告片 */}
+            <div className='flex items-center justify-between'>
+              <div>
+                <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+                  首页预告片
+                </h4>
+                <p className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+                  在首页轮播图中显示视频预告片（需刷新页面生效）
+                </p>
+              </div>
+              <label className='flex items-center cursor-pointer'>
+                <div className='relative'>
+                  <input
+                    type='checkbox'
+                    className='sr-only peer'
+                    checked={enableTrailers}
+                    onChange={(e) => handleEnableTrailersToggle(e.target.checked)}
+                  />
+                  <div className='w-11 h-6 bg-gray-300 rounded-full peer-checked:bg-green-500 transition-colors dark:bg-gray-600'></div>
+                  <div className='absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform peer-checked:translate-x-5'></div>
+                </div>
+              </label>
+            </div>
+
            {/* 分割线 */}
            <div className='border-t border-gray-200 dark:border-gray-700'></div>