120 lines
3.1 KiB
JavaScript
120 lines
3.1 KiB
JavaScript
import React from "react"
|
|
|
|
export default function ListDetails(props) {
|
|
return (
|
|
<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>
|
|
);
|
|
}
|
|
|
|
function Runtime(props) {
|
|
if (props.runtime === undefined) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<p>
|
|
<i className="fa fa-clock-o"></i>
|
|
{props.runtime} min
|
|
</p>
|
|
);
|
|
}
|
|
|
|
function Ratings(props) {
|
|
if (props.rating === undefined) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<p>
|
|
<i className="fa fa-star-o"></i>
|
|
{Number(props.rating).toFixed(1)}
|
|
{props.votes !== undefined &&
|
|
<small>({props.votes} counts)</small>
|
|
}
|
|
</p>
|
|
);
|
|
}
|
|
|
|
function 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>
|
|
);
|
|
}
|
|
|
|
function 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>
|
|
);
|
|
}
|
|
|
|
function 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>
|
|
{prettyGenres}
|
|
</p>
|
|
);
|
|
}
|