ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Update the subtitles dropdown to stay open after refresh

Browse Source
This commit is contained in:
Grégoire Delattre 2017-06-03 19:55:18 +02:00
parent daae180410
commit 3f4b4c2129
6 changed files with 51 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/public/js/components/buttons/download.js
View File

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

65
src/public/js/components/buttons/subtitles.js
View File

@ -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>
);
}
}

2
src/public/js/components/movies/list.js
View File

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

1
src/public/js/components/shows/details.js
View File

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

2
src/public/js/reducers/movies.js
View File

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

12
src/public/js/reducers/show.js
View File

@ -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) => {