我正在尝试构建一个电影仪表板(类似于 Plex);用户选择一个文件夹,文件夹中的所有电影都会显示出来。使用新的文件系统访问 API 允许我动态创建文件处理程序并能够使用浏览器视频播放器显示电影。
我面临的问题是重复的条目,例如“捉鬼敢死队”(无法真正理解为什么,但这是导致问题的唯一原因)
这是文件系统的基本实现:
try {
const folderHandle = await window.showDirectoryPicker();
const addedFilms = [];
history.push('/list');
// const entries = await folderHandle.values()
const entries = await folderHandle.values();
for await (const entry of entries) {
const movie = await readMoviesonDisk(folderHandle, entry);
console.log(addedFilms);
if (addedFilms.includes(entry.name)) continue;
addedFilms.push(entry.name);
setMovies((movies) => [...movies, movie]);
}
} catch (error) {
alert('Alert from reading files: ' + error);
}
setMovies
只需将 a 设置Context
为movies
数组,readMoviesOnDisk
如下所示:
const readMoviesonDisk = async (folderHandle, entry) => {
if (entry.kind === 'file' && entry.name.endsWith('.mp4')) {
const path = await folderHandle.resolve(entry);
const handle = await folderHandle.getFileHandle(path);
const movie = await getMovie(entry.name);
if (movie) {
return { ...movie.data, file: handle, name: entry.name };
}
const movieData = await searchMovie(entry.name);
if (movieData) {
const actualData = await getMovieDetails(movieData.id);
if (actualData !== undefined) {
await insertMovie(entry.name, actualData, handle);
} else {
await insertMovie(entry.name, actualData, handle);
}
return { ...actualData, file: handle, name: entry.name };
}
return { name: entry.name, file: handle };
}
};
searchMovie
并且insertMovie
仅与 IndexedDB 交互以存储电影信息以供离线使用。getMovieDetails
对 TMDB 进行 API 调用以获取电影信息。
我用于显示电影的键是它们的 TMDB id。捉鬼敢死队的 id 是“620”。
谁能帮我?