Merge branch 'trackShows' into 'master'

Track shows

See merge request !38

src/public/js/components/shows/details.js

@@ -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>
         )
@@ -111,7 +128,7 @@ class Season extends React.Component {
           </span>
         </div>
         {this.state.colapsed ||
-          <table className="table table-striped">
+          <table className="table table-striped table-hover">
             <tbody>
               {this.props.data.episodes.map(function(episode, index) {
                 let key = `${episode.season}-${episode.episode}`;
@@ -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>
+      <th scope="row" className="col-xs-2">
-      <td className="col-xs-8">{props.data.title}</td>
+        <TrackButton
-      <td className="col-xs-3">
+          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>

src/public/js/reducers/shows.js

@@ -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
+}