mirror of
https://github.com/zimplexing/OrionTV.git
synced 2026-06-13 09:44:40 +08:00
feat(player): enhance video playback with SSL error fallback and performance optimizations
- Add comprehensive SSL certificate error detection and automatic source switching - Implement smart video source fallback strategy with failed source tracking - Enhance video component with optimized event handlers and useCallback patterns - Add explicit playAsync() call in onLoad to improve auto-play reliability - Integrate performance monitoring with detailed logging throughout playback chain - Optimize Video component props with useMemo and custom useVideoHandlers hook - Add source matching fixes for fallback scenarios in DetailStore - Enhance error handling with user-friendly messages and recovery strategies
This commit is contained in:
zimplexing
@@ -16,11 +16,14 @@ interface DetailState {
|
||||
allSourcesLoaded: boolean;
|
||||
controller: AbortController | null;
|
||||
isFavorited: boolean;
|
||||
failedSources: Set<string>; // 记录失败的source列表
|
||||
|
||||
init: (q: string, preferredSource?: string, id?: string) => Promise<void>;
|
||||
setDetail: (detail: SearchResultWithResolution) => void;
|
||||
setDetail: (detail: SearchResultWithResolution) => Promise<void>;
|
||||
abort: () => void;
|
||||
toggleFavorite: () => Promise<void>;
|
||||
markSourceAsFailed: (source: string, reason: string) => void;
|
||||
getNextAvailableSource: (currentSource: string, episodeIndex: number) => SearchResultWithResolution | null;
|
||||
}
|
||||
|
||||
const useDetailStore = create<DetailState>((set, get) => ({
|
||||
@@ -33,8 +36,12 @@ const useDetailStore = create<DetailState>((set, get) => ({
|
||||
allSourcesLoaded: false,
|
||||
controller: null,
|
||||
isFavorited: false,
|
||||
failedSources: new Set(),
|
||||
|
||||
init: async (q, preferredSource, id) => {
|
||||
const perfStart = performance.now();
|
||||
console.info(`[PERF] DetailStore.init START - q: ${q}, preferredSource: ${preferredSource}, id: ${id}`);
|
||||
|
||||
const { controller: oldController } = get();
|
||||
if (oldController) {
|
||||
oldController.abort();
|
||||
@@ -55,9 +62,13 @@ const useDetailStore = create<DetailState>((set, get) => ({
|
||||
const { videoSource } = useSettingsStore.getState();
|
||||
|
||||
const processAndSetResults = async (results: SearchResult[], merge = false) => {
|
||||
const resolutionStart = performance.now();
|
||||
console.info(`[PERF] Resolution detection START - processing ${results.length} sources`);
|
||||
|
||||
const resultsWithResolution = await Promise.all(
|
||||
results.map(async (searchResult) => {
|
||||
let resolution;
|
||||
const m3u8Start = performance.now();
|
||||
try {
|
||||
if (searchResult.episodes && searchResult.episodes.length > 0) {
|
||||
resolution = await getResolutionFromM3U8(searchResult.episodes[0], signal);
|
||||
@@ -67,9 +78,14 @@ const useDetailStore = create<DetailState>((set, get) => ({
|
||||
console.info(`Failed to get resolution for ${searchResult.source_name}`, e);
|
||||
}
|
||||
}
|
||||
const m3u8End = performance.now();
|
||||
console.info(`[PERF] M3U8 resolution for ${searchResult.source_name}: ${(m3u8End - m3u8Start).toFixed(2)}ms (${resolution || 'failed'})`);
|
||||
return { ...searchResult, resolution };
|
||||
})
|
||||
);
|
||||
|
||||
const resolutionEnd = performance.now();
|
||||
console.info(`[PERF] Resolution detection COMPLETE - took ${(resolutionEnd - resolutionStart).toFixed(2)}ms`);
|
||||
|
||||
if (signal.aborted) return;
|
||||
|
||||
@@ -93,59 +109,205 @@ const useDetailStore = create<DetailState>((set, get) => ({
|
||||
try {
|
||||
// Optimization for favorite navigation
|
||||
if (preferredSource && id) {
|
||||
const { results: preferredResult } = await api.searchVideo(q, preferredSource, signal);
|
||||
const searchPreferredStart = performance.now();
|
||||
console.info(`[PERF] API searchVideo (preferred) START - source: ${preferredSource}, query: "${q}"`);
|
||||
|
||||
let preferredResult: SearchResult[] = [];
|
||||
let preferredSearchError: any = null;
|
||||
|
||||
try {
|
||||
const response = await api.searchVideo(q, preferredSource, signal);
|
||||
preferredResult = response.results;
|
||||
} catch (error) {
|
||||
preferredSearchError = error;
|
||||
console.error(`[ERROR] API searchVideo (preferred) FAILED - source: ${preferredSource}, error:`, error);
|
||||
}
|
||||
|
||||
const searchPreferredEnd = performance.now();
|
||||
console.info(`[PERF] API searchVideo (preferred) END - took ${(searchPreferredEnd - searchPreferredStart).toFixed(2)}ms, results: ${preferredResult.length}, error: ${!!preferredSearchError}`);
|
||||
|
||||
if (signal.aborted) return;
|
||||
|
||||
// 检查preferred source结果
|
||||
if (preferredResult.length > 0) {
|
||||
console.info(`[SUCCESS] Preferred source "${preferredSource}" found ${preferredResult.length} results for "${q}"`);
|
||||
await processAndSetResults(preferredResult, false);
|
||||
set({ loading: false });
|
||||
} else {
|
||||
// 降级策略：preferred source失败时立即尝试所有源
|
||||
if (preferredSearchError) {
|
||||
console.warn(`[FALLBACK] Preferred source "${preferredSource}" failed with error, trying all sources immediately`);
|
||||
} else {
|
||||
console.warn(`[FALLBACK] Preferred source "${preferredSource}" returned 0 results for "${q}", trying all sources immediately`);
|
||||
}
|
||||
|
||||
// 立即尝试所有源，不再依赖后台搜索
|
||||
const fallbackStart = performance.now();
|
||||
console.info(`[PERF] FALLBACK search (all sources) START - query: "${q}"`);
|
||||
|
||||
try {
|
||||
const { results: allResults } = await api.searchVideos(q);
|
||||
const fallbackEnd = performance.now();
|
||||
console.info(`[PERF] FALLBACK search END - took ${(fallbackEnd - fallbackStart).toFixed(2)}ms, total results: ${allResults.length}`);
|
||||
|
||||
const filteredResults = allResults.filter(item => item.title === q);
|
||||
console.info(`[FALLBACK] Filtered results: ${filteredResults.length} matches for "${q}"`);
|
||||
|
||||
if (filteredResults.length > 0) {
|
||||
console.info(`[SUCCESS] FALLBACK search found results, proceeding with ${filteredResults[0].source_name}`);
|
||||
await processAndSetResults(filteredResults, false);
|
||||
set({ loading: false });
|
||||
} else {
|
||||
console.error(`[ERROR] FALLBACK search found no matching results for "${q}"`);
|
||||
set({
|
||||
error: `未找到 "${q}" 的播放源，请检查标题或稍后重试`,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
} catch (fallbackError) {
|
||||
console.error(`[ERROR] FALLBACK search FAILED:`, fallbackError);
|
||||
set({
|
||||
error: `搜索失败：${fallbackError instanceof Error ? fallbackError.message : '网络错误，请稍后重试'}`,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 后台搜索（如果preferred source成功的话）
|
||||
if (preferredResult.length > 0) {
|
||||
const searchAllStart = performance.now();
|
||||
console.info(`[PERF] API searchVideos (background) START`);
|
||||
|
||||
try {
|
||||
const { results: allResults } = await api.searchVideos(q);
|
||||
|
||||
const searchAllEnd = performance.now();
|
||||
console.info(`[PERF] API searchVideos (background) END - took ${(searchAllEnd - searchAllStart).toFixed(2)}ms, results: ${allResults.length}`);
|
||||
|
||||
if (signal.aborted) return;
|
||||
await processAndSetResults(allResults.filter(item => item.title === q), true);
|
||||
} catch (backgroundError) {
|
||||
console.warn(`[WARN] Background search failed, but preferred source already succeeded:`, backgroundError);
|
||||
}
|
||||
}
|
||||
// Then load all others in background
|
||||
const { results: allResults } = await api.searchVideos(q);
|
||||
if (signal.aborted) return;
|
||||
await processAndSetResults(allResults, true);
|
||||
} else {
|
||||
// Standard navigation: fetch resources, then fetch details one by one
|
||||
const allResources = await api.getResources(signal);
|
||||
const enabledResources = videoSource.enabledAll
|
||||
? allResources
|
||||
: allResources.filter((r) => videoSource.sources[r.key]);
|
||||
const resourcesStart = performance.now();
|
||||
console.info(`[PERF] API getResources START - query: "${q}"`);
|
||||
|
||||
try {
|
||||
const allResources = await api.getResources(signal);
|
||||
|
||||
const resourcesEnd = performance.now();
|
||||
console.info(`[PERF] API getResources END - took ${(resourcesEnd - resourcesStart).toFixed(2)}ms, resources: ${allResources.length}`);
|
||||
|
||||
const enabledResources = videoSource.enabledAll
|
||||
? allResources
|
||||
: allResources.filter((r) => videoSource.sources[r.key]);
|
||||
|
||||
let firstResultFound = false;
|
||||
const searchPromises = enabledResources.map(async (resource) => {
|
||||
try {
|
||||
const { results } = await api.searchVideo(q, resource.key, signal);
|
||||
if (results.length > 0) {
|
||||
await processAndSetResults(results, true);
|
||||
if (!firstResultFound) {
|
||||
set({ loading: false }); // Stop loading indicator on first result
|
||||
firstResultFound = true;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.info(`Failed to fetch from ${resource.name}:`, error);
|
||||
console.info(`[PERF] Enabled resources: ${enabledResources.length}/${allResources.length}`);
|
||||
|
||||
if (enabledResources.length === 0) {
|
||||
console.error(`[ERROR] No enabled resources available for search`);
|
||||
set({
|
||||
error: "没有可用的视频源，请检查设置或联系管理员",
|
||||
loading: false
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
await Promise.all(searchPromises);
|
||||
let firstResultFound = false;
|
||||
let totalResults = 0;
|
||||
const searchPromises = enabledResources.map(async (resource) => {
|
||||
try {
|
||||
const searchStart = performance.now();
|
||||
const { results } = await api.searchVideo(q, resource.key, signal);
|
||||
const searchEnd = performance.now();
|
||||
console.info(`[PERF] API searchVideo (${resource.name}) took ${(searchEnd - searchStart).toFixed(2)}ms, results: ${results.length}`);
|
||||
|
||||
if (results.length > 0) {
|
||||
totalResults += results.length;
|
||||
console.info(`[SUCCESS] Source "${resource.name}" found ${results.length} results for "${q}"`);
|
||||
await processAndSetResults(results, true);
|
||||
if (!firstResultFound) {
|
||||
set({ loading: false }); // Stop loading indicator on first result
|
||||
firstResultFound = true;
|
||||
console.info(`[SUCCESS] First result found from "${resource.name}", stopping loading indicator`);
|
||||
}
|
||||
} else {
|
||||
console.warn(`[WARN] Source "${resource.name}" returned 0 results for "${q}"`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`[ERROR] Failed to fetch from ${resource.name}:`, error);
|
||||
}
|
||||
});
|
||||
|
||||
await Promise.all(searchPromises);
|
||||
|
||||
// 检查是否找到任何结果
|
||||
if (totalResults === 0) {
|
||||
console.error(`[ERROR] All sources returned 0 results for "${q}"`);
|
||||
set({
|
||||
error: `未找到 "${q}" 的播放源，请尝试其他关键词或稍后重试`,
|
||||
loading: false
|
||||
});
|
||||
} else {
|
||||
console.info(`[SUCCESS] Standard search completed, total results: ${totalResults}`);
|
||||
}
|
||||
} catch (resourceError) {
|
||||
console.error(`[ERROR] Failed to get resources:`, resourceError);
|
||||
set({
|
||||
error: `获取视频源失败：${resourceError instanceof Error ? resourceError.message : '网络错误，请稍后重试'}`,
|
||||
loading: false
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (get().searchResults.length === 0) {
|
||||
set({ error: "未找到任何播放源" });
|
||||
const favoriteCheckStart = performance.now();
|
||||
const finalState = get();
|
||||
|
||||
// 最终检查：如果所有搜索都完成但仍然没有结果
|
||||
if (finalState.searchResults.length === 0 && !finalState.error) {
|
||||
console.error(`[ERROR] All search attempts completed but no results found for "${q}"`);
|
||||
set({ error: `未找到 "${q}" 的播放源，请检查标题拼写或稍后重试` });
|
||||
} else if (finalState.searchResults.length > 0) {
|
||||
console.info(`[SUCCESS] DetailStore.init completed successfully with ${finalState.searchResults.length} sources`);
|
||||
}
|
||||
|
||||
if (get().detail) {
|
||||
const { source, id } = get().detail!;
|
||||
const isFavorited = await FavoriteManager.isFavorited(source, id.toString());
|
||||
set({ isFavorited });
|
||||
if (finalState.detail) {
|
||||
const { source, id } = finalState.detail;
|
||||
console.info(`[INFO] Checking favorite status for source: ${source}, id: ${id}`);
|
||||
try {
|
||||
const isFavorited = await FavoriteManager.isFavorited(source, id.toString());
|
||||
set({ isFavorited });
|
||||
console.info(`[INFO] Favorite status: ${isFavorited}`);
|
||||
} catch (favoriteError) {
|
||||
console.warn(`[WARN] Failed to check favorite status:`, favoriteError);
|
||||
}
|
||||
} else {
|
||||
console.warn(`[WARN] No detail found after all search attempts for "${q}"`);
|
||||
}
|
||||
|
||||
const favoriteCheckEnd = performance.now();
|
||||
console.info(`[PERF] Favorite check took ${(favoriteCheckEnd - favoriteCheckStart).toFixed(2)}ms`);
|
||||
|
||||
} catch (e) {
|
||||
if ((e as Error).name !== "AbortError") {
|
||||
set({ error: e instanceof Error ? e.message : "获取数据失败" });
|
||||
console.error(`[ERROR] DetailStore.init caught unexpected error:`, e);
|
||||
const errorMessage = e instanceof Error ? e.message : "获取数据失败";
|
||||
set({ error: `搜索失败：${errorMessage}` });
|
||||
} else {
|
||||
console.info(`[INFO] DetailStore.init aborted by user`);
|
||||
}
|
||||
} finally {
|
||||
if (!signal.aborted) {
|
||||
set({ loading: false, allSourcesLoaded: true });
|
||||
console.info(`[INFO] DetailStore.init cleanup completed`);
|
||||
}
|
||||
|
||||
const perfEnd = performance.now();
|
||||
console.info(`[PERF] DetailStore.init COMPLETE - total time: ${(perfEnd - perfStart).toFixed(2)}ms`);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -178,6 +340,64 @@ const useDetailStore = create<DetailState>((set, get) => ({
|
||||
const newIsFavorited = await FavoriteManager.toggle(source, id.toString(), favoriteItem);
|
||||
set({ isFavorited: newIsFavorited });
|
||||
},
|
||||
|
||||
markSourceAsFailed: (source: string, reason: string) => {
|
||||
const { failedSources } = get();
|
||||
const newFailedSources = new Set(failedSources);
|
||||
newFailedSources.add(source);
|
||||
|
||||
console.warn(`[SOURCE_FAILED] Marking source "${source}" as failed due to: ${reason}`);
|
||||
console.info(`[SOURCE_FAILED] Total failed sources: ${newFailedSources.size}`);
|
||||
|
||||
set({ failedSources: newFailedSources });
|
||||
},
|
||||
|
||||
getNextAvailableSource: (currentSource: string, episodeIndex: number) => {
|
||||
const { searchResults, failedSources } = get();
|
||||
|
||||
console.info(`[SOURCE_SELECTION] Looking for alternative to "${currentSource}" for episode ${episodeIndex + 1}`);
|
||||
console.info(`[SOURCE_SELECTION] Failed sources: [${Array.from(failedSources).join(', ')}]`);
|
||||
|
||||
// 过滤掉当前source和已失败的sources
|
||||
const availableSources = searchResults.filter(result =>
|
||||
result.source !== currentSource &&
|
||||
!failedSources.has(result.source) &&
|
||||
result.episodes &&
|
||||
result.episodes.length > episodeIndex
|
||||
);
|
||||
|
||||
console.info(`[SOURCE_SELECTION] Available sources: ${availableSources.length}`);
|
||||
availableSources.forEach(source => {
|
||||
console.info(`[SOURCE_SELECTION] - ${source.source} (${source.source_name}): ${source.episodes?.length || 0} episodes`);
|
||||
});
|
||||
|
||||
if (availableSources.length === 0) {
|
||||
console.error(`[SOURCE_SELECTION] No available sources for episode ${episodeIndex + 1}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
// 优先选择有高分辨率的source
|
||||
const sortedSources = availableSources.sort((a, b) => {
|
||||
const aResolution = a.resolution || '';
|
||||
const bResolution = b.resolution || '';
|
||||
|
||||
// 优先级: 1080p > 720p > 其他 > 无分辨率
|
||||
const resolutionPriority = (res: string) => {
|
||||
if (res.includes('1080')) return 4;
|
||||
if (res.includes('720')) return 3;
|
||||
if (res.includes('480')) return 2;
|
||||
if (res.includes('360')) return 1;
|
||||
return 0;
|
||||
};
|
||||
|
||||
return resolutionPriority(bResolution) - resolutionPriority(aResolution);
|
||||
});
|
||||
|
||||
const selectedSource = sortedSources[0];
|
||||
console.info(`[SOURCE_SELECTION] Selected fallback source: ${selectedSource.source} (${selectedSource.source_name}) with resolution: ${selectedSource.resolution || 'unknown'}`);
|
||||
|
||||
return selectedSource;
|
||||
},
|
||||
}));
|
||||
|
||||
export const sourcesSelector = (state: DetailState) => state.sources;
|
||||
|
||||
Reference in New Issue
Block a user