canape/frontend/js/components/list/details.js

import React from "react"
import { Map, List } from "immutable"
import PropTypes from "prop-types"

import { PolochonMetadata } from "../buttons/polochon"
import { DownloadAndStream } from "../buttons/download"
import { ImdbBadge } from "../buttons/imdb"

const ListDetails = (props) => {
  if (props.loading) { return null }
  if (props.data === undefined) { return null }

  return (
    <div className="col-8 col-md-4 list-details pl-1 d-flex align-items-start flex-column">
      <div className="video-details flex-fill d-flex flex-column">
        <h2 className="d-none d-sm-block">{props.data.get("title")}</h2>
        <h4 className="d-block d-sm-none">{props.data.get("title")}</h4>
        <TrackingLabel
          wishlisted={props.data.get("wishlisted")}
          trackedSeason={props.data.get("tracked_season")}
          trackedEpisode={props.data.get("tracked_episode")}
        />
        <h4 className="d-none d-sm-block">{props.data.get("year")}</h4>
        <h5 className="d-block d-sm-none">{props.data.get("year")}</h5>
        <Runtime runtime={props.data.get("runtime")} />
        <Genres genres={props.data.get("genres")} />
        <Ratings
          rating={props.data.get("rating")}
          votes={props.data.get("votes")}
        />
        <div>
          <ImdbBadge imdbId={props.data.get("imdb_id")} />
          <DownloadAndStream
            url={props.data.get("polochon_url")}
            name={props.data.get("title")}
            subtitles={props.data.get("subtitles")}
          />
        </div>
        <div>
          <PolochonMetadata
            quality={props.data.get("quality")}
            releaseGroup={props.data.get("release_group")}
            container={props.data.get("container")}
            audioCodec={props.data.get("audio_codec")}
            videoCodec={props.data.get("video_codec")}
          />
        </div>
        <p className="text text-break plot">{props.data.get("plot")}</p>
      </div>
      <div className="pb-1 align-self-end">
        {props.children}
      </div>
    </div>
  );
}
ListDetails.propTypes = {
  data: PropTypes.instanceOf(Map),
  loading: PropTypes.bool,
  children: PropTypes.object,
};
export default ListDetails;

const Runtime = (props) => {
  if (props.runtime === undefined || props.runtime === 0) {
    return null;
  }

  const hours = Math.floor(props.runtime / 60);
  const minutes = (props.runtime % 60);

  let duration = "";
  if (hours > 0) { duration += hours + "h" }
  if (minutes > 0) { duration += ("0" + minutes).slice(-2) }
  if (hours === 0) { duration += " min" }

  return (
    <p>
      <i className="fa fa-clock-o"></i>
      &nbsp;{duration}
    </p>
  );
}
Runtime.propTypes = { runtime: PropTypes.number };

const Ratings = (props) => {
  if (props.rating === undefined) {
    return null;
  }

  return (
    <p>
      <i className="fa fa-star-o"></i>
      &nbsp;{Number(props.rating).toFixed(1)}&nbsp;
      {props.votes !== undefined &&
          <small>({props.votes} counts)</small>
      }
    </p>
  );
}
Ratings.propTypes = {
  rating: PropTypes.number,
  votes: PropTypes.number,
};

const TrackingLabel = (props) => {
  let wishlistStr = props.wishlisted ? "Wishlisted" : "";

  if (props.trackedEpisode !== null && props.trackedSeason !== null
    && props.trackedEpisode !== undefined && props.trackedSeason !== undefined) {
    if ((props.trackedSeason === 0) && (props.trackedEpisode === 0)) {
      wishlistStr = "Whole show tracked";
    } else {
      wishlistStr = `Tracked from season ${props.trackedSeason} episode ${props.trackedEpisode}`;
    }
  }

  if (wishlistStr === "") {
    return null;
  }

  return (
    <p>
      <span className="badge badge-secondary">
        <i className="fa fa-bookmark"></i> {wishlistStr}
      </span>
    </p>
  );
}
TrackingLabel.propTypes = {
  wishlisted: PropTypes.bool,
  trackedSeason: PropTypes.number,
  trackedEpisode: PropTypes.number,
};

const Genres = (props) => {
  if ((props.genres === undefined) || (props.genres.size === 0)) {
    return null;
  }

  // Uppercase first genres
  const prettyGenres = props.genres.toJS().map(
    (word) => word[0].toUpperCase() + word.substr(1)
  ).join(", ");

  return (
    <p>
      <i className="fa fa-tags"></i>
      &nbsp;{prettyGenres}
    </p>
  );
}
Genres.propTypes = {
  genres: PropTypes.instanceOf(List),
};