diff --git a/src/common/apis/kickApi.ts b/src/common/apis/kickApi.ts index 756b7fa..910473f 100644 --- a/src/common/apis/kickApi.ts +++ b/src/common/apis/kickApi.ts @@ -1,7 +1,7 @@ import axios from 'axios'; import { KickClip } from '../models/kick'; -export async function getClip(id: string): Promise { +export const getClip = async (id: string): Promise => { if (id.length <= 0) { return; } @@ -12,16 +12,16 @@ export async function getClip(id: string): Promise { console.error('Failed to Get Kick clip:', id, e); return; } -} +}; -export async function getDirectUrl(id: string): Promise { +export const getDirectUrl = async (id: string): Promise => { const clip = await getClip(id); if (!clip || !clip.video_url) { console.error('Invalid clip or missing playback URL'); return; } return clip.video_url; -} +}; const kickApi = { getClip, diff --git a/src/features/clips/history/HistoryPage.tsx b/src/features/clips/history/HistoryPage.tsx index cf1ab52..45c1989 100644 --- a/src/features/clips/history/HistoryPage.tsx +++ b/src/features/clips/history/HistoryPage.tsx @@ -21,7 +21,7 @@ function MemoryPage() { {clipObjects.map((clip) => ( ; getFallbackM3u8Url?(id: string): string | undefined; + getChannelUrl?(id: string, clipInfo: Clip): string | undefined; } class CombinedClipProvider implements ClipProvider { @@ -70,6 +71,10 @@ class CombinedClipProvider implements ClipProvider { const [provider, idPart] = this.getProviderAndId(id); return provider?.getFallbackM3u8Url?.(idPart); } + getChannelUrl(id: string, clipInfo: Clip): string | undefined { + const [provider, idPart] = this.getProviderAndId(id); + return provider?.getChannelUrl?.(idPart, clipInfo); + } setProviders(providers: string[]) { logger.info('setProviders', providers); diff --git a/src/features/clips/queue/Player.tsx b/src/features/clips/queue/Player.tsx index 5f3a7fd..351bfff 100644 --- a/src/features/clips/queue/Player.tsx +++ b/src/features/clips/queue/Player.tsx @@ -64,15 +64,18 @@ function Player({ className }: PlayerProps) { const autoplayTimeoutHandle = useAppSelector(selectAutoplayTimeoutHandle); const [videoSrc, setVideoSrc] = useState(undefined); const [error, setError] = useState(null); + const [isFallback, setIsFallback] = useState(false); useEffect(() => { if (!currentClip) { setVideoSrc(undefined); setError(null); + setIsFallback(false); return; } setVideoSrc(undefined); + setIsFallback(false); let Flag = true; const fetchVideoUrl = async () => { @@ -81,12 +84,14 @@ function Player({ className }: PlayerProps) { if (Flag) { setVideoSrc(url); setError(null); + setIsFallback(false); } } catch (err) { if (Flag) { const fallbackUrl = clipProvider.getFallbackM3u8Url(currentClip.id); setVideoSrc(fallbackUrl); setError(null); + setIsFallback(true); } else { setError('Failed to load video. Please make an Issue Request on GitHub. Thank you!'); } @@ -100,7 +105,8 @@ function Player({ className }: PlayerProps) { }; }, [currentClip]); - const player = getPlayerComponent(currentClip, videoSrc, autoplayEnabled, nextClipId, dispatch); + const effectAutoPlay = autoplayEnabled && !isFallback; + const player = getPlayerComponent(currentClip, videoSrc, effectAutoPlay, nextClipId, dispatch); return (