Feature request for Episode and More like this section, and [Bug Reported]

[AdityasahuX07]

for episode section
can you add play button for each episode there is space left for this between episode poster and ep. name.

for more like this section
can you make that 6 recommended movie/tv clickable to open that movie.

[BUG]
and find one bug regarding age rating its for majority show ALL even if its not for all using showing age rating via genre_ids use TMDB api/token to phrase age rating.

[CharlesXstorm]

for episode section
can you add play button for each episode there is space left for this between episode poster and ep. name.

for more like this section
can you make that 6 recommended movie/tv clickable to open that movie.

[BUG]
and find one bug regarding age rating its for majority show ALL even if its not for all using showing age rating via genre_ids use TMDB api/token to phrase age rating.

Hello, you can help correct and add more features if you want.
It's an open source project for a reason 😊😊

[AdityasahuX07]

Hi yesterday its work fine but now when I try to load page now http://localhost:5173/browse in this url the homepage become completly Black. Even Demo link of this repo. also blank what's the problem

[CharlesXstorm]

Hi yesterday its work fine but now when I try to load page now http://localhost:5173/browse in this url the homepage become completly Black. Even Demo link of this repo. also blank what's the problem

Okay, I'll look into it tomorrow.
It's likely from the external movie API endpoint.

[AdityasahuX07]

Hi yesterday its work fine but now when I try to load page now http://localhost:5173/browse in this url the homepage become completly Black. Even Demo link of this repo. also blank what's the problem

Okay, I'll look into it tomorrow.
It's likely from the external movie API endpoint.

What did you changed

[CharlesXstorm]

Hi yesterday its work fine but now when I try to load page now http://localhost:5173/browse in this url the homepage become completly Black. Even Demo link of this repo. also blank what's the problem

Okay, I'll look into it tomorrow.
It's likely from the external movie API endpoint.

What did you changed

Is it working from your end now?

[AdityasahuX07]

Hi yesterday its work fine but now when I try to load page now http://localhost:5173/browse in this url the homepage become completly Black. Even Demo link of this repo. also blank what's the problem

Okay, I'll look into it tomorrow.
It's likely from the external movie API endpoint.

What did you changed

Is it working from your end now?

The demo link is working but not working in locally.

[AdityasahuX07]

I fixed it I had changed something in code it worked but same this I tried yesterday too not woked even demo link show same behaviour.

[AdityasahuX07]

Hi I added the play button on every episodes but I can not able to make that 2nd feature that I told to open detail info page on clicking more movie from recommended section in the bottom.

I make that posters clickable and open to but its open with error 404 page can you see the edited code and tell me whats wrong I am doing.
the redirect url is "http://localhost:5173/tv/tmdbID"

/* eslint-disable react/prop-types */
import { useNavigate } from "react-router-dom";
import { motion } from "framer-motion";

// More item component //////////////////////////////////////
const MoreItem = ({ item }) => {
const navigate = useNavigate();

// Determine media type based on available properties
const mediaType = item.title ? 'movie' : 'tv';

// Click handler with proper media type routing
const handleClick = () => {
navigate(/${mediaType}/${item.id});
};

return (

{item.name || item.title}
<img
className="w-full h-[150px] object-cover"
src={https://image.tmdb.org/t/p/w300${item.backdrop_path}}
alt="backdrop"
loading="lazy"
/>

  <div className="flex flex-col py-3 px-2">
    <div>
      <p className="text-sm mb-1 flex items-center gap-2 flex-wrap">
        <span className="text-green-600 font-[500]">
          Rated: {item.vote_average.toFixed(1)}/10
        </span>
        <span className="text-xs">
          {item.release_date?.slice(0, 4) || item.first_air_date?.slice(0, 4)}
        </span>
      </p>
    </div>
    <p className="text-[0.8em] font-[400] line-clamp-3">
      {item.overview}
    </p>
  </div>
</div>

);
};

// More movies component //////////////////////////////////////////////////////////////
const MoreMovies = ({ moreMovies, variants }) => {
return (
<motion.div
variants={variants}
className="flex flex-col gap-4 mt-4 font-bold overflow-hidden"
>

More Like This

  <div className="w-full flex gap-2 md:gap-4 flex-wrap justify-center px-4">
    {moreMovies.map((item) => (
      <MoreItem key={item.id} item={item} />
    ))}
  </div>
</motion.div>

);
};

export default MoreMovies;

[CharlesXstorm]

Hi I added the play button on every episodes but I can not able to make that 2nd feature that I told to open detail info page on clicking more movie from recommended section in the bottom.

I make that posters clickable and open to but its open with error 404 page can you see the edited code and tell me whats wrong I am doing.
the redirect url is "http://localhost:5173/tv/tmdbID"

/* eslint-disable react/prop-types */
import { useNavigate } from "react-router-dom";
import { motion } from "framer-motion";

// More item component //////////////////////////////////////
const MoreItem = ({ item }) => {
const navigate = useNavigate();

// Determine media type based on available properties
const mediaType = item.title ? 'movie' : 'tv';

// Click handler with proper media type routing
const handleClick = () => {
navigate(/${mediaType}/${item.id});
};

return (

{item.name || item.title}
<img
className="w-full h-[150px] object-cover"
src={https://image.tmdb.org/t/p/w300${item.backdrop_path}}
alt="backdrop"
loading="lazy"
/>

  <div className="flex flex-col py-3 px-2">
    <div>
      <p className="text-sm mb-1 flex items-center gap-2 flex-wrap">
        <span className="text-green-600 font-[500]">
          Rated: {item.vote_average.toFixed(1)}/10
        </span>
        <span className="text-xs">
          {item.release_date?.slice(0, 4) || item.first_air_date?.slice(0, 4)}
        </span>
      </p>
    </div>
    <p className="text-[0.8em] font-[400] line-clamp-3">
      {item.overview}
    </p>
  </div>
</div>

);
};

// More movies component //////////////////////////////////////////////////////////////
const MoreMovies = ({ moreMovies, variants }) => {
return (
<motion.div
variants={variants}
className="flex flex-col gap-4 mt-4 font-bold overflow-hidden"
>

More Like This

  <div className="w-full flex gap-2 md:gap-4 flex-wrap justify-center px-4">
    {moreMovies.map((item) => (
      <MoreItem key={item.id} item={item} />
    ))}
  </div>
</motion.div>

);
};

export default MoreMovies;

Hello, it's great that you're working on some features.

I currently have a lot of projects going on, and don't know when I'll have free time for this, but hopefully will have time for it later.

[AdityasahuX07]

Take a look of code pasted above reply and just tell me how to call detail info page on click what line of code need to change.

[AdityasahuX07]

Hi Done 90% of work on u have to just add open detail page logic for onClick handleClick I leave space for that you must only have to add required logic to call detail page in place of that "Add the requred logic to open detail page"

you can better search above inverted comma keyward to easyly find that section.

please do that 10% left I tried everything but don't figure it out.

Please!!!

/* eslint-disable react/prop-types */
import { useNavigate } from "react-router-dom";
import { motion } from "framer-motion";
import { useEffect, useState } from "react";
import axios from "axios";

// Custom hook for age rating
const useAgeRating = (movieType, tmdbId) => {
  const [ageRating, setAgeRating] = useState("Not Rated");

  const formatOfficialUSRating = (rating) => {
    if (!rating) return "Not Rated";
    if (/^\d+$/.test(rating)) return rating;

    const usFormats = {
      "G": "G",
      "PG": "PG",
      "PG-13": "PG-13",
      "R": "R",
      "NC-17": "NC-17",
      "X": "X",
      "TV-Y": "TV-Y",
      "TV-Y7": "TV-Y7",
      "TV-G": "TV-G",
      "TV-PG": "TV-PG",
      "TV-14": "TV-14",
      "TV-MA": "TV-MA",
      "NR": "NR",
      "UNRATED": "NR",
      "NOT RATED": "NR"
    };

    return usFormats[rating.toUpperCase()] || rating;
  };

  const fetchUSAgeRating = async () => {
    try {
      const tmdbApiKey = import.meta.env.VITE_TMDB_API_KEY;
      let rating = "Not Rated";

      if (movieType === "movie") {
        const { data } = await axios.get(
          `https://api.themoviedb.org/3/movie/${tmdbId}/release_dates?api_key=${tmdbApiKey}`
        );

        const usRelease = data.results.find(r => r.iso_3166_1 === "US");
        if (usRelease?.release_dates?.length) {
          const certified = usRelease.release_dates.find(d => d.certification);
          rating = certified?.certification || "Not Rated";
        }
      } else if (movieType === "tv") {
        const { data } = await axios.get(
          `https://api.themoviedb.org/3/tv/${tmdbId}/content_ratings?api_key=${tmdbApiKey}`
        );

        const usRating = data.results.find(r => r.iso_3166_1 === "US");
        rating = usRating?.rating || "Not Rated";
      }

      setAgeRating(formatOfficialUSRating(rating));
    } catch (error) {
      console.error("Error fetching US age rating:", error);
      setAgeRating("Not Rated");
    }
  };

  useEffect(() => {
    if (tmdbId && movieType) {
      fetchUSAgeRating();
    }
  }, [tmdbId, movieType]);

  return ageRating;
};

// More item component
const MoreItem = ({ item }) => {
  const mediaType = item.title ? 'movie' : 'tv';
  const ageRating = useAgeRating(mediaType, item.id);

  const handleClick = () => {
    //   
             "Add the required logic to open detail page"      <=========================                 
    // 
  };

  return (
    <div 
      onClick={handleClick}
      className="flex flex-col w-[48%] lg:w-[30%] mt-[1em] bg-zinc-800 rounded cursor-pointer transition-transform hover:scale-105"
    >
      <div className="w-full relative flex justify-center items-center">
        <span className="absolute p-4 text-center">{item.name || item.title}</span>
        <img
          className="w-full h-[150px] object-cover"
          src={`https://image.tmdb.org/t/p/w300${item.backdrop_path}`}
          alt="backdrop"
          loading="lazy"
        />
      </div>

      <div className="flex flex-col py-3 px-2">
        <div>
          <p className="text-sm mb-1 flex items-center gap-2 flex-wrap">
            <span className="text-green-600 font-[500]">
              Rated: {item.vote_average.toFixed(1)}/10
            </span>
            <span className="text-xs">
              {item.release_date?.slice(0, 4) || item.first_air_date?.slice(0, 4)}
            </span>
            <span className="p-[0.8px] px-1 text-[0.65em]">
              {ageRating}
            </span>
          </p>
        </div>
        <p className="text-[0.8em] font-[400] line-clamp-3">
          {item.overview}
        </p>
      </div>
    </div>
  );
};

// More movies component
const MoreMovies = ({ moreMovies, variants }) => {
  return (
    <motion.div 
      variants={variants}
      className="flex flex-col gap-4 mt-4 font-bold overflow-hidden"
    >
      <p className="text-xl px-4">More Like This</p>

      <div className="w-full flex gap-2 md:gap-4 flex-wrap justify-center px-4">
        {moreMovies.map((item) => (
          <MoreItem key={item.id} item={item} />
        ))}
      </div>
    </motion.div>
  );
};

export default MoreMovies;