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

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

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")}
        />
        <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")}
        />
        <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) {
    return null;
  }

  return (
    <p>
      <i className="fa fa-clock-o"></i>
      &nbsp;{props.runtime} min
    </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 PolochonMetadata = (props) => {
  if (!props.quality || props.quality === "") {
    return null;
  }

  return (
    <p className="spaced-icons">
      <span className="mx-1 badge badge-pill badge-secondary">{props.quality}</span>
      <span className="mx-1 badge badge-pill badge-secondary">{props.container} </span>
      <span className="mx-1 badge badge-pill badge-secondary">{props.videoCodec}</span>
      <span className="mx-1 badge badge-pill badge-secondary">{props.audioCodec}</span>
      <span className="mx-1 badge badge-pill badge-secondary">{props.releaseGroup}</span>
    </p>
  );
}
PolochonMetadata.propTypes = {
  quality: PropTypes.string,
  container: PropTypes.string,
  videoCodec: PropTypes.string,
  audioCodec: PropTypes.string,
  releaseGroup: PropTypes.string,
};

const Genres = (props) => {
  if (props.genres === undefined) {
    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),
};