Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-18 08:42:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

adapt ui to the new subtitles API

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-04-08 00:47:26 +03:00
parent ce85ed99b2
commit 8da64722d9
5 changed files with 56 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/routes/Player/ControlBar/ControlBar.js
View file

@ -43,7 +43,9 @@ const ControlBar = (props) => (
selectedSubtitlesTrackId={props.selectedSubtitlesTrackId}
subtitlesSize={props.subtitlesSize}
subtitlesDelay={props.subtitlesDelay}
subtitlesDarkBackground={props.subtitlesDarkBackground}
subtitlesTextColor={props.subtitlesTextColor}
subtitlesBackgroundColor={props.subtitlesBackgroundColor}
subtitlesOutlineColor={props.subtitlesOutlineColor}
dispatch={props.dispatch}
/>
<ShareButton
@ -71,7 +73,9 @@ ControlBar.propTypes = {
selectedSubtitlesTrackId: PropTypes.string,
subtitlesSize: PropTypes.number,
subtitlesDelay: PropTypes.number,
subtitlesDarkBackground: PropTypes.bool,
subtitlesTextColor: PropTypes.string,
subtitlesBackgroundColor: PropTypes.string,
subtitlesOutlineColor: PropTypes.string,
dispatch: PropTypes.func
};

12
src/routes/Player/ControlBar/SubtitlesButton/SubtitlesButton.js
View file

@ -24,7 +24,9 @@ class SubtitlesButton extends React.Component {
nextProps.selectedSubtitlesTrackId !== this.props.selectedSubtitlesTrackId ||
nextProps.subtitlesSize !== this.props.subtitlesSize ||
nextProps.subtitlesDelay !== this.props.subtitlesDelay ||
nextProps.subtitlesDarkBackground !== this.props.subtitlesDarkBackground;
nextProps.subtitlesTextColor !== this.props.subtitlesTextColor ||
nextProps.subtitlesBackgroundColor !== this.props.subtitlesBackgroundColor ||
nextProps.subtitlesOutlineColor !== this.props.subtitlesOutlineColor;
}
onPopupOpen = () => {
@ -50,7 +52,9 @@ class SubtitlesButton extends React.Component {
selectedSubtitlesTrackId={this.props.selectedSubtitlesTrackId}
subtitlesSize={this.props.subtitlesSize}
subtitlesDelay={this.props.subtitlesDelay}
subtitlesDarkBackground={this.props.subtitlesDarkBackground}
subtitlesTextColor={this.props.subtitlesTextColor}
subtitlesBackgroundColor={this.props.subtitlesBackgroundColor}
subtitlesOutlineColor={this.props.subtitlesOutlineColor}
dispatch={this.props.dispatch}
/>
</Popup.Menu>
@ -71,7 +75,9 @@ SubtitlesButton.propTypes = {
selectedSubtitlesTrackId: PropTypes.string,
subtitlesSize: PropTypes.number,
subtitlesDelay: PropTypes.number,
subtitlesDarkBackground: PropTypes.bool,
subtitlesTextColor: PropTypes.string,
subtitlesBackgroundColor: PropTypes.string,
subtitlesOutlineColor: PropTypes.string,
dispatch: PropTypes.func.isRequired
};
SubtitlesButton.defaultProps = {

36
src/routes/Player/ControlBar/SubtitlesButton/SubtitlesPicker/SubtitlesPicker.js
View file

@ -2,7 +2,6 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Checkbox } = require('stremio-common');
const styles = require('./styles');
const ORIGIN_PRIORITIES = Object.freeze({
@ -53,7 +52,9 @@ class SubtitlesPicker extends React.Component {
nextProps.selectedSubtitlesTrackId !== this.props.selectedSubtitlesTrackId ||
nextProps.subtitlesSize !== this.props.subtitlesSize ||
nextProps.subtitlesDelay !== this.props.subtitlesDelay ||
nextProps.subtitlesDarkBackground !== this.props.subtitlesDarkBackground;
nextProps.subtitlesTextColor !== this.props.subtitlesTextColor ||
nextProps.subtitlesBackgroundColor !== this.props.subtitlesBackgroundColor ||
nextProps.subtitlesOutlineColor !== this.props.subtitlesOutlineColor;
}
toggleSubtitleEnabled = () => {
@ -86,8 +87,16 @@ class SubtitlesPicker extends React.Component {
this.props.dispatch({ propName: 'subtitlesDelay', propValue: event.currentTarget.dataset.value });
}
toggleSubtitlesDarkBackground = () => {
this.props.dispatch({ propName: 'subtitlesDarkBackground', propValue: !this.props.subtitlesDarkBackground });
setSubtitlesTextColor = (event) => {
// TODO fix it
}
setSubtitlesBackgrondColor = (event) => {
// TODO fix it
}
setSubtitlesOutlineColor = (event) => {
// TODO fix it
}
renderToggleButton({ selectedTrack }) {
@ -154,15 +163,16 @@ class SubtitlesPicker extends React.Component {
);
}
renderDarkBackgroundToggle() {
if (this.props.subtitlesDarkBackground === null) {
renderColorPicker(label, value, onChange) {
if (value === null) {
return null;
}
return (
<Checkbox className={styles['background-toggle-checkbox']} checked={this.props.subtitlesDarkBackground} onClick={this.toggleSubtitlesDarkBackground}>
<div className={styles['background-toggle-label']}>Dark background</div>
</Checkbox>
<div className={styles['color-picker-container']}>
<input className={styles['color-picker-input']} type={'color'} value={value} onChange={onChange} />
<div className={styles['color-picker-label']}>{label}</div>
</div>
);
}
@ -179,7 +189,9 @@ class SubtitlesPicker extends React.Component {
<div className={styles['preferences-container']}>
<div className={styles['preferences-title']}>Preferences</div>
{this.renderVariantsList({ groupedTracks, selectedTrack })}
{this.renderDarkBackgroundToggle()}
{this.renderColorPicker('Text color', this.props.subtitlesTextColor, this.setSubtitlesTextColor)}
{this.renderColorPicker('Background color', this.props.subtitlesBackgroundColor, this.setSubtitlesBackgrondColor)}
{this.renderColorPicker('Outline color', this.props.subtitlesOutlineColor, this.setSubtitlesOutlineColor)}
<NumberInput
label={SUBTITLES_SIZE_LABELS[this.props.subtitlesSize]}
value={this.props.subtitlesSize}
@ -226,7 +238,9 @@ SubtitlesPicker.propTypes = {
selectedSubtitlesTrackId: PropTypes.string,
subtitlesSize: PropTypes.number,
subtitlesDelay: PropTypes.number,
subtitlesDarkBackground: PropTypes.bool,
subtitlesTextColor: PropTypes.string,
subtitlesBackgroundColor: PropTypes.string,
subtitlesOutlineColor: PropTypes.string,
dispatch: PropTypes.func.isRequired
};
SubtitlesPicker.defaultProps = {

21
src/routes/Player/ControlBar/SubtitlesButton/SubtitlesPicker/styles.less
View file

@ -153,11 +153,7 @@
}
}
.background-toggle-checkbox {
--icon-background-color: transparent;
--icon-color: var(--color-surfacelighter);
--icon-size: calc(var(--subtitles-picker-button-size) * 0.6);
.color-picker-container {
align-self: stretch;
flex: 1;
display: flex;
@ -165,7 +161,12 @@
align-items: center;
cursor: pointer;
.background-toggle-label {
.color-picker-input {
width: 2.2em;
height: 2.2em;
}
.color-picker-label {
flex: 1;
padding: 0 0.5em;
line-height: 1.1em;
@ -174,14 +175,6 @@
overflow: hidden;
color: var(--color-surfacelighter);
}
&:global(.checked) {
--icon-background-color: var(--color-primarydark);
&:hover {
--icon-background-color: var(--color-primarylight);
}
}
}
.number-input-container {

12
src/routes/Player/Player.js
View file

@ -23,7 +23,9 @@ class Player extends React.Component {
selectedSubtitlesTrackId: null,
subtitlesSize: null,
subtitlesDelay: null,
subtitlesDarkBackground: null
subtitlesTextColor: null,
subtitlesBackgroundColor: null,
subtitlesOutlineColor: null
};
}
@ -38,7 +40,9 @@ class Player extends React.Component {
nextState.selectedSubtitlesTrackId !== this.state.selectedSubtitlesTrackId ||
nextState.subtitlesSize !== this.state.subtitlesSize ||
nextState.subtitlesDelay !== this.state.subtitlesDelay ||
nextState.subtitlesDarkBackground !== this.state.subtitlesDarkBackground;
nextState.subtitlesTextColor !== this.state.subtitlesTextColor ||
nextState.subtitlesBackgroundColor !== this.state.subtitlesBackgroundColor ||
nextState.subtitlesOutlineColor !== this.state.subtitlesOutlineColor;
}
componentDidMount() {
@ -127,7 +131,9 @@ class Player extends React.Component {
selectedSubtitlesTrackId={this.state.selectedSubtitlesTrackId}
subtitlesSize={this.state.subtitlesSize}
subtitlesDelay={this.state.subtitlesDelay}
subtitlesDarkBackground={this.state.subtitlesDarkBackground}
subtitlesTextColor={this.state.subtitlesTextColor}
subtitlesBackgroundColor={this.state.subtitlesBackgroundColor}
subtitlesOutlineColor={this.state.subtitlesOutlineColor}
dispatch={this.dispatch}
/>
</div>