fix(ymb): refresh shorts playback sources

src/entities/drama/model.js

@@ -1,5 +1,5 @@
 // Author: fruit.com.cn
-import { getImage, resolveMedia } from '../../shared/lib/media';
+import { getImage, resolveMedia, resolvePlaybackUrl } from '../../shared/lib/media';
 import { getText } from '../../shared/lib/text';
 
 export function normalizeDrama(item = {}, lang = 'id') {
@@ -18,8 +18,8 @@ export function normalizeDrama(item = {}, lang = 'id') {
     favoriteCount: Number(item.favoriteCount) || 0,
     commentCount: Number(item.commentCount) || 0,
     description: getText(item.synopsisLocales, lang) || '',
-    episodes: episodes.map((episode) => ({ ...episode, playUrl: resolveMedia(episode.playUrl) })),
-    preview: preview ? { ...preview, playUrl: resolveMedia(preview.playUrl) } : null,
+    episodes: episodes.map((episode) => ({ ...episode, playUrl: resolvePlaybackUrl(episode.playUrl) })),
+    preview: preview ? { ...preview, playUrl: resolvePlaybackUrl(preview.playUrl) } : null,
   };
 }
 

src/features/shorts/ShortsFeedPage.jsx

@@ -139,6 +139,7 @@ export function ShortsFeedPage() {
               onToggleFollow={() => toggleFollow(video.channel)}
               onOpenComments={() => setCommentsVideo(video)}
               onShare={() => shareVideo(video)}
+              onEnded={() => move(1)}
             />
           ))}
         </div>

src/features/shorts/components/ShortSlide.jsx

@@ -3,12 +3,28 @@ import { Bookmark, MessageCircle, Share2, ThumbsUp } from 'lucide-react';
 import { useLocale } from '../../../app/providers/AppProviders';
 import { VideoPlayer } from '../../../shared/components/player/VideoPlayer';
 import { useEngagement } from '../../../shared/hooks/useEngagement';
+import { useRequest } from '../../../shared/hooks/useRequest';
 import { formatCount } from '../../../shared/lib/format';
+import { selectPlaybackUrl } from '../../../shared/lib/media';
 import { reportWatchProgress } from '../../../shared/lib/watchProgress';
+import { dramaApi } from '../../../entities/drama/api';
 
-export function ShortSlide({ video, active, followed, onToggleFollow, onOpenComments, onShare }) {
+export function ShortSlide({ video, active, followed, onToggleFollow, onOpenComments, onShare, onEnded }) {
   const { locale } = useLocale();
-  const src = video.preview?.playUrl;
+  const previewId = video.preview?.id ? String(video.preview.id) : '';
+  const fallbackSrc = video.preview?.playUrl || '';
+  const playback = useRequest(
+    ({ signal }) => dramaApi.playback(previewId, { signal }),
+    [active, previewId],
+    { enabled: active && Boolean(previewId) },
+  );
+  const src = active
+    ? playback.data
+      ? selectPlaybackUrl(playback.data, fallbackSrc)
+      : playback.error
+        ? fallbackSrc
+        : ''
+    : '';
   const likeTargetId = video.preview?.id || video.id;
   const { liked, likeCount, saved, saveCount, toggleLike, toggleSave } = useEngagement({
     likeTargetType: video.preview?.id ? 'EPISODE' : 'DRAMA',
@@ -33,8 +49,8 @@ export function ShortSlide({ video, active, followed, onToggleFollow, onOpenComm
           <div className="short-player-wrap">
             <div className="short-slide-player">
               {src
-                ? <VideoPlayer src={src} poster={video.image} autoPlay={active} soundHint={locale.soundHint} onProgress={(position, duration, flush) => reportWatchProgress(video.preview?.id, position, duration, 'shorts', flush)} />
-                : <div className="short-slide-placeholder"><img src={video.image} alt={video.title} /><span>{video.title}</span></div>}
+                ? <VideoPlayer src={src} poster={video.image} autoPlay={active} soundHint={locale.soundHint} onEnded={onEnded} onProgress={(position, duration, flush) => reportWatchProgress(video.preview?.id, position, duration, 'shorts', flush)} />
+                : <div className="short-slide-placeholder"><img src={video.image} alt={video.title} /><span>{active && playback.loading ? locale.loading : active && playback.error ? locale.playbackUnavailable : video.title}</span></div>}
             </div>
           </div>
         </div>

src/shared/lib/media.js

@@ -7,12 +7,15 @@ export const resolveMedia = (value) => {
   return /^https?:\/\//.test(value) ? value : `${MEDIA_BASE_URL}${value}`;
 };
 
-export const resolvePlaybackUrl = resolveMedia;
+export function resolvePlaybackUrl(value) {
+  if (!value) return '';
+  return /^https?:\/\//.test(value) ? value : `${MEDIA_BASE_URL}${value}`;
+}
 
 export const getImage = (item = {}) => resolveMedia(item.coverLandscape || item.coverUrl || item.cover || item.posterUrl || item.imageUrl);
 
 export function selectPlaybackUrl(playback, fallback = '') {
   const tracks = playback?.tracks || [];
   const preferred = tracks.find((track) => track.quality === '360p') || tracks.find((track) => track.quality === 'AUTO') || tracks[0];
-  return resolveMedia(preferred?.playUrl || playback?.playUrl || fallback);
+  return resolvePlaybackUrl(preferred?.playUrl || playback?.playUrl || fallback);
 }