Add track button in the show details
This commit is contained in:
parent
7231097d53
commit
79de64101d
@ -1,6 +1,8 @@
|
||||
import React from 'react'
|
||||
import Loader from '../loader/loader'
|
||||
|
||||
import { OverlayTrigger, Tooltip } from 'react-bootstrap'
|
||||
|
||||
export default class ShowDetails extends React.Component {
|
||||
componentWillMount() {
|
||||
this.props.fetchShowDetails(this.props.params.imdbId);
|
||||
@ -12,10 +14,15 @@ export default class ShowDetails extends React.Component {
|
||||
}
|
||||
return (
|
||||
<div className="row" id="container">
|
||||
<Header data={this.props.showStore.show} />
|
||||
<Header
|
||||
data={this.props.showStore.show}
|
||||
addToWishlist={this.props.addShowToWishlist}
|
||||
deleteFromWishlist={this.props.deleteShowFromWishlist}
|
||||
/>
|
||||
<SeasonsList
|
||||
data={this.props.showStore.show}
|
||||
addTorrent={this.props.addTorrent}
|
||||
addToWishlist={this.props.addShowToWishlist}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@ -28,7 +35,11 @@ function Header(props){
|
||||
<div className="panel panel-default">
|
||||
<div className="panel-body">
|
||||
<HeaderThumbnail data={props.data} />
|
||||
<HeaderDetails data={props.data} />
|
||||
<HeaderDetails
|
||||
data={props.data}
|
||||
addToWishlist={props.addToWishlist}
|
||||
deleteFromWishlist={props.deleteFromWishlist}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,6 +75,11 @@ function HeaderDetails(props){
|
||||
<dt>Rating</dt>
|
||||
<dd>{props.data.rating}</dd>
|
||||
</dl>
|
||||
<TrackHeader
|
||||
data={props.data}
|
||||
addToWishlist={props.addToWishlist}
|
||||
deleteFromWishlist={props.deleteFromWishlist}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -77,6 +93,7 @@ function SeasonsList(props){
|
||||
<Season
|
||||
data={season}
|
||||
addTorrent={props.addTorrent}
|
||||
addToWishlist={props.addToWishlist}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
@ -120,6 +137,7 @@ class Season extends React.Component {
|
||||
key={key}
|
||||
data={episode}
|
||||
addTorrent={this.props.addTorrent}
|
||||
addToWishlist={this.props.addToWishlist}
|
||||
/>
|
||||
)
|
||||
}, this)}
|
||||
@ -134,9 +152,15 @@ class Season extends React.Component {
|
||||
function Episode(props) {
|
||||
return (
|
||||
<tr>
|
||||
<th scope="row" className="col-xs-1">{props.data.episode}</th>
|
||||
<td className="col-xs-8">{props.data.title}</td>
|
||||
<td className="col-xs-3">
|
||||
<th scope="row" className="col-xs-2">
|
||||
<TrackButton
|
||||
data={props.data}
|
||||
addToWishlist={props.addToWishlist}
|
||||
/>
|
||||
{props.data.episode}
|
||||
</th>
|
||||
<td className="col-xs-5">{props.data.title}</td>
|
||||
<td className="col-xs-6">
|
||||
<span className="pull-right">
|
||||
{props.data.torrents && props.data.torrents.map(function(torrent, index) {
|
||||
let key = `${props.data.season}-${props.data.episode}-${torrent.source}-${torrent.quality}`;
|
||||
@ -178,13 +202,95 @@ class Torrent extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
class TrackHeader extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
}
|
||||
handleClick(e, url) {
|
||||
e.preventDefault();
|
||||
let wishlisted = (this.props.data.tracked_season !== null && this.props.data.tracked_episode !== null);
|
||||
if (wishlisted) {
|
||||
this.props.deleteFromWishlist(this.props.data.imdb_id);
|
||||
} else {
|
||||
this.props.addToWishlist(this.props.data.imdb_id);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
let wishlisted = (this.props.data.tracked_season !== null && this.props.data.tracked_episode !== null);
|
||||
if (wishlisted) {
|
||||
let msg;
|
||||
if (this.props.data.tracked_season !== 0 && this.props.data.tracked_episode !== 0) {
|
||||
msg = (
|
||||
<dd>
|
||||
Show tracked from <strong>season {this.props.data.tracked_season} episode {this.props.data.tracked_episode}</strong>
|
||||
</dd>
|
||||
);
|
||||
} else {
|
||||
msg = (
|
||||
<dd>
|
||||
Whole show tracked
|
||||
</dd>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<dl className="dl-horizontal">
|
||||
<dt>Tracking active</dt>
|
||||
{msg}
|
||||
<dt></dt>
|
||||
<dd>
|
||||
<a className="btn btn-xs btn-danger" onClick={(e) => this.handleClick(e)}>
|
||||
<i className="fa fa-bookmark"></i> Untrack the show
|
||||
</a>
|
||||
</dd>
|
||||
</dl>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<dl className="dl-horizontal">
|
||||
<dt>Tracking inactive</dt>
|
||||
<dd>
|
||||
<a className="btn btn-xs btn-info" onClick={(e) => this.handleClick(e)}>
|
||||
<i className="fa fa-bookmark-o"></i> Track the whole show
|
||||
</a>
|
||||
</dd>
|
||||
</dl>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class TrackButton extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
}
|
||||
handleClick(e, url) {
|
||||
e.preventDefault();
|
||||
this.props.addToWishlist(this.props.data.show_imdb_id, this.props.data.season, this.props.data.episode);
|
||||
}
|
||||
render() {
|
||||
const tooltipId = `tooltip-${this.props.data.season}-${this.props.data.episode}`;
|
||||
const tooltip = (
|
||||
<Tooltip id={tooltipId}>Track show from here</Tooltip>
|
||||
);
|
||||
return (
|
||||
<OverlayTrigger placement="top" overlay={tooltip} className="episode-button">
|
||||
<a type="button" className="btn btn-default btn-xs" onClick={(e) => this.handleClick(e)}>
|
||||
<i className="fa fa-bookmark"></i>
|
||||
</a>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function DownloadButton(props) {
|
||||
if (props.data.polochon_url === "") {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<span>
|
||||
<span className="episode-button">
|
||||
<a type="button" className="btn btn-xs btn-warning" href={props.data.polochon_url}>
|
||||
<i className="fa fa-download"></i> Download
|
||||
</a>
|
||||
|
||||
@ -47,7 +47,8 @@ export default function showStore(state = defaultState, action) {
|
||||
})
|
||||
case 'SHOW_UPDATE_STORE_WISHLIST':
|
||||
return Object.assign({}, state, {
|
||||
shows: updateStoreWishlist(state.shows.slice(), action.payload),
|
||||
shows: updateShowsStoreWishlist(state.shows.slice(), action.payload),
|
||||
show: updateShowStoreWishlist(Object.assign({}, state.show), action.payload),
|
||||
})
|
||||
case 'SELECT_SHOW':
|
||||
// Don't select the show if we're fetching another show's details
|
||||
@ -107,7 +108,12 @@ function sortEpisodes(show) {
|
||||
return show;
|
||||
}
|
||||
|
||||
function updateStoreWishlist(shows, payload) {
|
||||
// Update the store containing all the shows
|
||||
function updateShowsStoreWishlist(shows, payload) {
|
||||
if (shows.length === 0) {
|
||||
return shows;
|
||||
}
|
||||
|
||||
let index = shows.map((el) => el.imdb_id).indexOf(payload.imdbId);
|
||||
let season = payload.season;
|
||||
let episode = payload.episode;
|
||||
@ -123,3 +129,23 @@ function updateStoreWishlist(shows, payload) {
|
||||
shows[index].tracked_episode = episode;
|
||||
return shows
|
||||
}
|
||||
|
||||
// Update the store containing the current detailed show
|
||||
function updateShowStoreWishlist(show, payload) {
|
||||
if (show.seasons.length === 0) {
|
||||
return show;
|
||||
}
|
||||
let season = payload.season;
|
||||
let episode = payload.episode;
|
||||
if (payload.wishlisted) {
|
||||
if (season === null) {
|
||||
season = 0;
|
||||
}
|
||||
if (episode === null) {
|
||||
episode = 0;
|
||||
}
|
||||
}
|
||||
show.tracked_season = season;
|
||||
show.tracked_episode = episode;
|
||||
return show
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user