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

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

const ListDetails = (props) => (
  <div className="col-xs-7 col-md-4">
    <div className="affix">
      <h1 className="hidden-xs">{props.data.get("title")}</h1>
      <h3 className="visible-xs">{props.data.get("title")}</h3>
      <TrackingLabel
        wishlisted={props.data.get("wishlisted")}
        trackedSeason={props.data.get("tracked_season")}
        trackedEpisode={props.data.get("tracked_episode")}
      />
      <h4>{props.data.get("year")}</h4>
      <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="plot">{props.data.get("plot")}</p>
    </div>
    {props.children}
  </div>
)
ListDetails.propTypes = {
  data: PropTypes.instanceOf(Map).isRequired,
  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 (
    <span className="label label-default">
      <i className="fa fa-bookmark"></i> {wishlistStr}
    </span>
  );
}
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="label label-default">{props.quality}</span>
      <span className="label label-default">{props.container} </span>
      <span className="label label-default">{props.videoCodec}</span>
      <span className="label label-default">{props.audioCodec}</span>
      <span className="label label-default">{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),
};