API доступа к FS и React: повторяющиеся записи

#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);
}