Update the subtitles dropdown to stay open after refresh

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>

src/public/js/components/buttons/subtitles.js

@@ -4,27 +4,25 @@ import { DropdownButton, MenuItem } from "react-bootstrap"
 
 import RefreshIndicator from "./refresh"
 
-export default class SubtitlesButton extends React.PureComponent {
+export default function SubtitlesButton(props) {
-  constructor(props) {
+  const btnSize = props.xs ? "xsmall" : "small";
-    super(props);
+  const subtitles = props.subtitles;
-    this.handleClick = this.handleClick.bind(this);
+  const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
-  }
-  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);
-  }
-  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>
+    <DropdownButton
-        <MenuItem onClick={(ev) => this.handleClick(ev)}>
+      bsStyle="success"
-          <RefreshIndicator refresh={this.props.fetching} />
+      bsSize={btnSize}
-        </MenuItem>
+      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>
       }
@@ -38,4 +36,25 @@ export default class SubtitlesButton extends React.PureComponent {
     </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
+    }
+    this.props.refreshSubtitles(this.props.type, this.props.resourceID,
+      this.props.season, this.props.episode);
+  }
+  render() {
+    return (
+      <MenuItem onClick={this.handleClick}>
+        <RefreshIndicator refresh={this.props.fetching} />
+      </MenuItem>
+    );
+  }
 }

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")}

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")}

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),
 }

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_PENDING"  : (state, action) =>
-  "EPISODE_SUBTITLES_UPDATE_FULFILLED": (state, action) => {
+    state.setIn(["show", "seasons", action.payload.main.season, action.payload.main.episode, "fetchingSubtitles"], true),
-    let epId = ["show", "seasons", action.payload.main.season, action.payload.main.episode];
+  "EPISODE_SUBTITLES_UPDATE_FULFILLED": (state, action) =>
-    let ep = state.getIn(epId); (state, action) =>
+    state.setIn(["show", "seasons", action.payload.main.season, action.payload.main.episode, "subtitles"], fromJS(action.payload.response.data))
-      ep = ep.set("subtitles", fromJS(action.payload.response.data)).set("fetchingSubtitles", false);
+         .setIn(["show", "seasons", action.payload.main.season, action.payload.main.episode, "fetchingSubtitles"], false),
-    return state.setIn(epId, ep);
-  },
 }
 
 const sortEpisodes = (state, show) => {