Root: ui|v2.5|src|components|Movies|MovieDetails: MovieDetailsPanel.tsx

MovieDetailsPanel.tsx

This file contains the MovieDetailsPanel component and CompressedMovieDetailsPanel component, responsible for displaying detailed information about a movie. Here's an explanation of their structure and functionality:

MovieDetailsPanel Component

The MovieDetailsPanel component is a React functional component that displays detailed information about a movie. Here's an overview of its functionality:

• Props:

  • movie: An object of type GQL.MovieDataFragment representing the movie data to be displayed.
  • fullWidth: A boolean indicating whether the panel should take up full width.

• Rendering:

  • Renders various detail items such as duration, date, studio, director, and synopsis of the movie.
  • Utilizes DetailItem component for rendering each detail item.
  • Utilizes TextUtils utility for formatting duration and date.
  • Provides links to studios and directors if available.

CompressedMovieDetailsPanel Component

The CompressedMovieDetailsPanel component is a React functional component that displays compressed details about a movie. Here's an overview of its functionality:

• Props:

  • movie: An object of type GQL.MovieDataFragment representing the movie data to be displayed.

• Rendering:

  • Renders a compressed version of movie details including the movie name and studio.
  • Provides a link to the top of the page when the movie name is clicked.

import React from "react";
import { useIntl } from "react-intl";
import * as GQL from "src/core/generated-graphql";
import TextUtils from "src/utils/text";
import { DetailItem } from "src/components/Shared/DetailItem";
import { Link } from "react-router-dom";
import { DirectorLink } from "src/components/Shared/Link";

interface IMovieDetailsPanel {
  movie: GQL.MovieDataFragment;
  fullWidth?: boolean;
}

export const MovieDetailsPanel: React.FC<IMovieDetailsPanel> = ({
  movie,
  fullWidth,
}) => {
  // Network state
  const intl = useIntl();

  return (
    <div className="detail-group">
      <DetailItem
        id="duration"
        value={
          movie.duration ? TextUtils.secondsToTimestamp(movie.duration) : ""
        }
        fullWidth={fullWidth}
      />
      <DetailItem
        id="date"
        value={movie.date ? TextUtils.formatDate(intl, movie.date) : ""}
        fullWidth={fullWidth}
      />
      <DetailItem
        id="studio"
        value={
          movie.studio?.id ? (
            <Link to={`/studios/${movie.studio?.id}`}>
              {movie.studio?.name}
            </Link>
          ) : (
            ""
          )
        }
        fullWidth={fullWidth}
      />

      <DetailItem
        id="director"
        value={
          movie.director ? (
            <DirectorLink director={movie.director} linkType="movie" />
          ) : (
            ""
          )
        }
        fullWidth={fullWidth}
      />
      <DetailItem id="synopsis" value={movie.synopsis} fullWidth={fullWidth} />
    </div>
  );
};

export const CompressedMovieDetailsPanel: React.FC<IMovieDetailsPanel> = ({
  movie,
}) => {
  // Function to scroll to the top of the page smoothly
  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  return (
    <div className="sticky detail-header">
      <div className="sticky detail-header-group">
        {/* Clickable movie name */}
        <a className="movie-name" onClick={() => scrollToTop()}>
          {movie.name}
        </a>
        {/* Display studio name */}
        {movie?.studio?.name ? (
          <>
            <span className="detail-divider">/</span>
            <span className="movie-studio">{movie?.studio?.name}</span>
          </>
        ) : (
          ""
        )}
      </div>
    </div>
  );
};

Explanation:

The modification adds a scroll-to-top functionality when the movie name is clicked within the CompressedMovieDetailsPanel component.

scrollToTop: This function utilizes the window.scrollTo method with options { top: 0, behavior: "smooth" } to smoothly scroll the window to the top of the page.

Usage:

Within the CompressedMovieDetailsPanel component, the movie name is rendered as a clickable anchor (). When clicked, it triggers the scrollToTop function, resulting in the page smoothly scrolling to the top.

This enhancement improves user experience by providing a convenient way to navigate back to the top of the page when viewing compressed movie details.