CODEWITHSUNDEEP
reactjswebapifilesystem-access
MGassend
MGassend

Reputation: 103

FS access api & React: duplicate entries

I'm trying to build a movie dashboard (something like Plex); the user selects a folder and all the movies he has in the folder show up. The use of the new File System Access API allows me to create file handlers on the fly and be able to display movies using the browser video player.

The problem I'm facing is with duplicated entries, for instance "Ghostbusters" (can't really understand why, but that's the only one causing the issue)

This is the basic implementation of the file system:

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 just sets a Context with a movies array and readMoviesOnDisk is the following:

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 and insertMovie only interact with IndexedDB to store movie info for offline use. getMovieDetails does API calls to TMDB to get movie info.

The key I use for displaying the movies is their TMDB id. Ghostbusters' id is "620".

Can anyone help me?

Upvotes: 0

Views: 251

Answers (1)

DenverCoder9
DenverCoder9

Reputation: 2514

Without additional background it seems impossible to answer this properly. Can you iterate over all files in the folder and just log the names and kinds? This should work and show no duplicate entries.

const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
  console.log(entry.kind, entry.name);
}

Upvotes: 0

Related Questions