From 3f4b4c212920fe078e8a3c3e4ce7581da67379cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Sat, 3 Jun 2017 19:55:18 +0200
Subject: [PATCH] Update the subtitles dropdown to stay open after refresh

---
 src/public/js/components/buttons/download.js  |  2 +-
 src/public/js/components/buttons/subtitles.js | 65 ++++++++++++-------
 src/public/js/components/movies/list.js       |  2 +-
 src/public/js/components/shows/details.js     |  1 +
 src/public/js/reducers/movies.js              |  2 +-
 src/public/js/reducers/show.js                | 12 ++--
 6 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/src/public/js/components/buttons/download.js b/src/public/js/components/buttons/download.js
index dfcc217..12f0bac 100644
--- a/src/public/js/components/buttons/download.js
+++ b/src/public/js/components/buttons/download.js
@@ -72,7 +72,7 @@ class Player extends React.PureComponent {
   }
   render() {
     const subtitles = this.props.subtitles;
-    const hasSubtitles = (subtitles !== undefined && subtitles !== null);
+    const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
     return (
       <div className="embed-responsive embed-responsive-16by9">
         <video controls>
diff --git a/src/public/js/components/buttons/subtitles.js b/src/public/js/components/buttons/subtitles.js
index a0c585d..61bbff6 100644
--- a/src/public/js/components/buttons/subtitles.js
+++ b/src/public/js/components/buttons/subtitles.js
@@ -4,38 +4,57 @@ import { DropdownButton, MenuItem } from "react-bootstrap"
 
 import RefreshIndicator from "./refresh"
 
-export default class SubtitlesButton extends React.PureComponent {
+export default function SubtitlesButton(props) {
+  const btnSize = props.xs ? "xsmall" : "small";
+  const subtitles = props.subtitles;
+  const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
+  return (
+    <DropdownButton
+      bsStyle="success"
+      bsSize={btnSize}
+      title="Subtitles"
+      id="download-subtitles-button"
+      dropup>
+      <RefreshButton
+        type={props.type}
+        resourceID={props.resourceID}
+        season={props.season}
+        episode={props.episode}
+        fetching={props.fetching}
+        refreshSubtitles={props.refreshSubtitles}
+      />
+      {hasSubtitles &&
+          <MenuItem divider></MenuItem>
+      }
+      {hasSubtitles && subtitles.toIndexedSeq().map(function(subtitle, index) {
+        return (
+          <MenuItem key={index} href={subtitle.get("url")}>
+            <i className="fa fa-download"></i> &nbsp;{subtitle.get("language").split("_")[1]}
+          </MenuItem>
+        );
+      })}
+    </DropdownButton>
+  );
+}
+
+class RefreshButton extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
   }
   handleClick(e) {
     e.preventDefault();
-    if (this.props.fetching) { return }
-
-    // Refresh the subtitles
-    this.props.refreshSubtitles(this.props.type, this.props.resourceID, this.props.season, this.props.episode);
+    if (this.props.fetching) {
+      return
+    }
+    this.props.refreshSubtitles(this.props.type, this.props.resourceID,
+      this.props.season, this.props.episode);
   }
   render() {
-    const btnSize = this.props.xs ? "xsmall" : "small";
-    const subtitles = this.props.subtitles;
-    const hasSubtitles = (subtitles !== undefined && subtitles !== null);
     return (
-      <DropdownButton bsStyle="success" bsSize={btnSize} title="Subtitles" id="download-subtitles-button" dropup>
-        <MenuItem onClick={(ev) => this.handleClick(ev)}>
-          <RefreshIndicator refresh={this.props.fetching} />
-        </MenuItem>
-        {hasSubtitles &&
-            <MenuItem divider></MenuItem>
-        }
-        {hasSubtitles && subtitles.toIndexedSeq().map(function(subtitle, index) {
-          return (
-            <MenuItem key={index} href={subtitle.get("url")}>
-              <i className="fa fa-download"></i> &nbsp;{subtitle.get("language").split("_")[1]}
-            </MenuItem>
-          );
-        })}
-      </DropdownButton>
+      <MenuItem onClick={this.handleClick}>
+        <RefreshIndicator refresh={this.props.fetching} />
+      </MenuItem>
     );
   }
 }
diff --git a/src/public/js/components/movies/list.js b/src/public/js/components/movies/list.js
index d9ef0c2..8252a58 100644
--- a/src/public/js/components/movies/list.js
+++ b/src/public/js/components/movies/list.js
@@ -57,7 +57,7 @@ function MovieButtons(props) {
       subtitles={props.movie.get("subtitles")}
     />
 
-  {props.movie.get("polochon_url") !== null &&
+  {props.movie.get("polochon_url") !== "" &&
     <SubtitlesButton
       fetching={props.movie.get("fetchingSubtitles")}
       subtitles={props.movie.get("subtitles")}
diff --git a/src/public/js/components/shows/details.js b/src/public/js/components/shows/details.js
index e2133b7..389c2d9 100644
--- a/src/public/js/components/shows/details.js
+++ b/src/public/js/components/shows/details.js
@@ -189,6 +189,7 @@ function Episode(props) {
         <span className="pull-right episode-buttons">
           {props.data.get("polochon_url") !== "" &&
               <SubtitlesButton
+                fetching={props.data.get("fetchingSubtitles")}
                 subtitles={props.data.get("subtitles")}
                 refreshSubtitles={props.refreshSubtitles}
                 resourceID={props.data.get("show_imdb_id")}
diff --git a/src/public/js/reducers/movies.js b/src/public/js/reducers/movies.js
index fea2169..2eb14e9 100644
--- a/src/public/js/reducers/movies.js
+++ b/src/public/js/reducers/movies.js
@@ -43,7 +43,7 @@ const handlers = {
   "UPDATE_LAST_MOVIE_FETCH_URL"         : (state, action) => state.set("lastFetchUrl", action.payload.url),
   "MOVIE_SUBTITLES_UPDATE_PENDING"      : (state, action) => state.setIn(["movies", action.payload.main.imdbId, "fetchingSubtitles"], true),
   "MOVIE_SUBTITLES_UPDATE_FULFILLED"    : (state, action) => state.setIn(["movies", action.payload.main.imdbId, "fetchingSubtitles"], false)
-                                                                  .setIn(["movies", action.payload.main.imdbId, "subtitles"], fromJS(action.payload.data.response)),
+                                                                  .setIn(["movies", action.payload.main.imdbId, "subtitles"], fromJS(action.payload.response.data)),
   "SELECT_MOVIE"                        : (state, action) => state.set("selectedImdbId", action.payload.imdbId),
   "MOVIE_UPDATE_FILTER"                 : (state, action) => state.set("filter", action.payload.filter),
 }
diff --git a/src/public/js/reducers/show.js b/src/public/js/reducers/show.js
index 8273de0..2eef6b6 100644
--- a/src/public/js/reducers/show.js
+++ b/src/public/js/reducers/show.js
@@ -30,13 +30,11 @@ const handlers = {
     data.fetching = false;
     return state.setIn(["show", "seasons", data.season, data.episode], fromJS(data));
   },
-  "EPISODE_SUBTITLES_UPDATE_PENDING": (state, action) => state.setIn(["show", "seasons", action.payload.main.season, action.payload.main.episode, "fetchingSubtitles"], true),
-  "EPISODE_SUBTITLES_UPDATE_FULFILLED": (state, action) => {
-    let epId = ["show", "seasons", action.payload.main.season, action.payload.main.episode];
-    let ep = state.getIn(epId); (state, action) =>
-      ep = ep.set("subtitles", fromJS(action.payload.response.data)).set("fetchingSubtitles", false);
-    return state.setIn(epId, ep);
-  },
+  "EPISODE_SUBTITLES_UPDATE_PENDING"  : (state, action) =>
+    state.setIn(["show", "seasons", action.payload.main.season, action.payload.main.episode, "fetchingSubtitles"], true),
+  "EPISODE_SUBTITLES_UPDATE_FULFILLED": (state, action) =>
+    state.setIn(["show", "seasons", action.payload.main.season, action.payload.main.episode, "subtitles"], fromJS(action.payload.response.data))
+         .setIn(["show", "seasons", action.payload.main.season, action.payload.main.episode, "fetchingSubtitles"], false),
 }
 
 const sortEpisodes = (state, show) => {