112 lines
3.6 KiB
JavaScript

import React from "react";
import PropTypes from "prop-types";
import { Map } from "immutable";
import { useDispatch, useSelector } from "react-redux";
import { showWishlistToggle } from "../../../actions/shows";
import {
inLibrary,
isEpisodeWishlisted,
prettyEpisodeName,
} from "../../../utils";
import { Plot } from "../../details/plot";
import { PolochonMetadata } from "../../details/polochon";
import { ReleaseDate } from "../../details/releaseDate";
import { Runtime } from "../../details/runtime";
import { Title } from "../../details/title";
import { DownloadAndStream } from "../../buttons/download";
import { ShowMore } from "../../buttons/showMore";
import { EpisodeSubtitlesButton } from "./subtitlesButton";
import { EpisodeThumb } from "./episodeThumb";
import { EpisodeTorrentsButton } from "./torrentsButton";
export const Episode = (props) => {
const dispatch = useDispatch();
const trackedSeason = useSelector((state) =>
state.showStore.getIn(["show", "tracked_season"], null)
);
const trackedEpisode = useSelector((state) =>
state.showStore.getIn(["show", "tracked_episode"], null)
);
return (
<div className="d-flex flex-column flex-lg-row mb-3 pb-3 border-bottom border-light">
<EpisodeThumb url={props.data.get("thumb")} />
<div className="d-flex flex-column">
<Title
title={`${props.data.get("episode")}. ${props.data.get("title")}`}
wishlisted={isEpisodeWishlisted(
props.data,
trackedSeason,
trackedEpisode
)}
wishlist={() =>
dispatch(
showWishlistToggle(
isEpisodeWishlisted(props.data),
props.data.get("show_imdb_id"),
props.data.get("season"),
props.data.get("episode")
)
)
}
/>
<ReleaseDate date={props.data.get("aired")} />
<Runtime runtime={props.data.get("runtime")} />
<Plot plot={props.data.get("plot")} />
<DownloadAndStream
name={prettyEpisodeName(
props.showName,
props.data.get("season"),
props.data.get("episode")
)}
url={props.data.get("polochon_url")}
subtitles={props.data.get("subtitles")}
/>
<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")}
light
/>
<ShowMore
id={prettyEpisodeName(
props.showName,
props.data.get("season"),
props.data.get("episode")
)}
inLibrary={inLibrary(props.data)}
>
<EpisodeTorrentsButton
torrents={props.data.get("torrents")}
showName={props.showName}
imdbId={props.data.get("show_imdb_id")}
season={props.data.get("season")}
episode={props.data.get("episode")}
searching={props.data.get("fetching")}
/>
<EpisodeSubtitlesButton
subtitles={props.data.get("subtitles")}
inLibrary={inLibrary(props.data)}
searching={props.data.get("fetchingSubtitles", false)}
imdbId={props.data.get("show_imdb_id")}
season={props.data.get("season")}
episode={props.data.get("episode")}
/>
</ShowMore>
</div>
</div>
);
};
Episode.propTypes = {
data: PropTypes.instanceOf(Map).isRequired,
showName: PropTypes.string.isRequired,
};