movie-trailer npm isn't working properly in my netflix clone project

Question

I've made a netflix clone using React.js, firebase, and have used TMDB api for movie database. I've also used react-youtube and movie-trailer npm. So it has this feature that every time I click on any movie poster, it's trailer must be played. But for most of the movies, trailer doesn't shows up.

This is the error that I face - movie-trailer: No TMDB Movie found with the current search terms, try searching https://www.themoviedb.org/search?query=Luis%20Miguel%3A%20The%20Series TypeError: Failed to construct 'URL': Invalid URL at Row.js:37

'This is the screenshot of errors I am facing on clicking maximum of movies'

I'm sharing the link of my github repo and deployed website as well for reference -

github - https://github.com/IshitaSharma3101/netflix-clone

website - https://netflix-clone-afb8b.web.app/

Row component code-

import React, { useState, useEffect } from "react";
import YouTube from "react-youtube";
import axios from "./axios";
import "./Row.css";
import movieTrailer from "movie-trailer"

const base_url = "https://image.tmdb.org/t/p/original/";

function Row({ title, fetchURL, isLargeRow }) {
  const [movies, setMovies] = useState([]);
  const [trailerURL, setTrailerURL] = useState("");

  useEffect(() => {
    async function fetchData() {
      const request = await axios.get(fetchURL);
      console.log(request.data.results);
      setMovies(request.data.results);
      return request;
    }
    fetchData();
  }, [fetchURL]);

  const opts = {
    height: "390",
    width: "100%",
    playerVars: {
      autoplay: 1,
    },
  };

  const handleClick = (movie) => {
    if (trailerURL) {
      setTrailerURL("");
    } else {
      movieTrailer(movie?.name || movie?.title || movie?.original_title || "")
        .then((url) => {
          const urlParams = new URLSearchParams(new URL(url).search);
          setTrailerURL(urlParams.get("v"));
        })
        .catch((error) => console.log(error));
    }
  };

  return (
    <div className='row'>
      <h2>{title}</h2>
      <div className='row__posters'>
        {movies.map((movie) => (
          <img
            key={movie.id}
            onClick={() => handleClick(movie)}
            className={`row__poster ${isLargeRow && "row__posterLarge"}`}
            src={`${base_url}${
              isLargeRow ? movie.poster_path : movie.backdrop_path
            }`}
            alt={movie.name}
          />
        ))}
      </div>
      {trailerURL && <YouTube videoId={trailerURL} opts={opts} />}
    </div>
  );
}

export default Row;

Answer 1

I'm sure you are following the Clever Qazi tutorial as I'm doing. I think there is basically no solution for this problem. I also try to get the trailer of the movies by the ID that TMDB gives for every film but this method definitely doesn't work for mine. My conclusion is that movie-trailer is not working for certain kind of film or series...

You can prove yourself my conlclusion by typing on a terminal npx movie-trailer Cobra Kai which is the command that allow you to use this package. Cobra Kai is a well know series but this "tool" doesn't find any trailer for it.

Answer 2

Use this instead.

      movieTrailer(null ,{ tmdbId: movie.id })
                   .then((url)=>{
                     console.log("url is "+url);
                     const urlParams=new URLSearchParams(new URL(url).search);
                     console.log("urlParamsn"+urlParams);
                     setTrailerUrl(urlParams.get("v"));
                   })
                   .catch((error)=> console.log(error));
    }
 }

With this you can search for the movie with the tmdb id.