#reactjs #webapi #filesystem-access
#reactjs #webapi #доступ к файловой системе
Вопрос:
Я пытаюсь создать панель управления фильмами (что-то вроде 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' amp;amp; 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
вызывает API в TMDB для получения информации о фильме.
Ключ, который я использую для отображения фильмов, — это их идентификатор TMDB. Идентификатор охотников за привидениями — «620».
Кто-нибудь может мне помочь?
Ответ №1:
Без дополнительной подготовки кажется невозможным ответить на этот вопрос должным образом. Можете ли вы перебрать все файлы в папке и просто записать имена и виды? Это должно работать и не показывать повторяющихся записей.
const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
console.log(entry.kind, entry.name);
}