Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 03:22:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

SubtitlesPicker minor refactor

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-03-25 12:47:18 +02:00
parent 799dd2f2b7
commit 59dbb36f1d
2 changed files with 21 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,17 @@ const SUBTITLES_SIZE_LABELS = Object.freeze({
5: '250%' 5: '250%'
}); });
const comparatorWithPriorities = (priorities) => {
return (a, b) => {
const valueA = priorities[a];
const valueB = priorities[b];
if (!isNaN(valueA) && !isNaN(valueB)) return valueA - valueB;
if (!isNaN(valueA)) return -1;
if (!isNaN(valueB)) return 1;
return a - b;
};
}
const NumberInput = ({ value, label, delta, onChange }) => { const NumberInput = ({ value, label, delta, onChange }) => {
if (value === null) { if (value === null) {
return null; return null;
@ -45,17 +56,6 @@ class SubtitlesPicker extends React.Component {
nextProps.subtitleDarkBackground !== this.props.subtitleDarkBackground; nextProps.subtitleDarkBackground !== this.props.subtitleDarkBackground;
} }
subtitlesComparator = (priorities) => {
return (a, b) => {
const valueA = priorities[a];
const valueB = priorities[b];
if (!isNaN(valueA) && !isNaN(valueB)) return valueA - valueB;
if (!isNaN(valueA)) return -1;
if (!isNaN(valueB)) return 1;
return a - b;
};
}
toggleSubtitleEnabled = () => { toggleSubtitleEnabled = () => {
const selectedSubtitleTrackId = this.props.selectedSubtitleTrackId === null && this.props.subtitleTracks.length > 0 ? const selectedSubtitleTrackId = this.props.selectedSubtitleTrackId === null && this.props.subtitleTracks.length > 0 ?
this.props.subtitleTracks[0].id this.props.subtitleTracks[0].id
@ -105,13 +105,13 @@ class SubtitlesPicker extends React.Component {
<div className={styles['labels-list-container']}> <div className={styles['labels-list-container']}>
{ {
Object.keys(groupedTracks) Object.keys(groupedTracks)
.sort(this.subtitlesComparator(ORIGIN_PRIORITIES)) .sort(comparatorWithPriorities(ORIGIN_PRIORITIES))
.map((origin) => ( .map((origin) => (
<React.Fragment key={origin}> <React.Fragment key={origin}>
<div className={styles['track-origin']}>{origin}</div> <div className={styles['track-origin']}>{origin}</div>
{ {
Object.keys(groupedTracks[origin]) Object.keys(groupedTracks[origin])
.sort(this.subtitlesComparator(this.props.languagePriorities)) .sort(comparatorWithPriorities(this.props.languagePriorities))
.map((label) => { .map((label) => {
const selected = selectedTrack && selectedTrack.label === label && selectedTrack.origin === origin; const selected = selectedTrack && selectedTrack.label === label && selectedTrack.origin === origin;
return ( return (
@ -139,8 +139,8 @@ class SubtitlesPicker extends React.Component {
return ( return (
<div className={styles['variants-container']}> <div className={styles['variants-container']}>
{groupedTracks[selectedTrack.origin][selectedTrack.label].map((track, index) => { {
return ( groupedTracks[selectedTrack.origin][selectedTrack.label].map((track, index) => (
<div key={track.id} <div key={track.id}
className={classnames(styles['variant-button'], { [styles['selected']]: track.id === selectedTrack.id })} className={classnames(styles['variant-button'], { [styles['selected']]: track.id === selectedTrack.id })}
title={track.id} title={track.id}
@ -148,8 +148,8 @@ class SubtitlesPicker extends React.Component {
data-track-id={track.id} data-track-id={track.id}
children={index + 1} children={index + 1}
/> />
); ))
})} }
</div> </div>
); );
} }
@ -230,7 +230,7 @@ SubtitlesPicker.propTypes = {
dispatch: PropTypes.func.isRequired dispatch: PropTypes.func.isRequired
}; };
SubtitlesPicker.defaultProps = { SubtitlesPicker.defaultProps = {
subtitleTracks: [], subtitleTracks: Object.freeze([]),
languagePriorities: Object.freeze({ languagePriorities: Object.freeze({
English: 1 English: 1
}) })

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

@ -70,7 +70,7 @@
.track-origin { .track-origin {
padding: 0 0.2em; padding: 0 0.2em;
margin-bottom: 0.2em; margin-bottom: 0.2em;
font-size: 85%; font-size: 0.85em;
font-style: italic; font-style: italic;
overflow-wrap: break-word; overflow-wrap: break-word;
border-bottom: 1px solid var(--color-surfacelighter80); border-bottom: 1px solid var(--color-surfacelighter80);
@ -106,7 +106,7 @@
justify-content: center; justify-content: center;
.subtitles-disabled-label { .subtitles-disabled-label {
font-size: 150%; font-size: 1.5em;
line-height: 1.2; line-height: 1.2;
text-align: center; text-align: center;
word-spacing: calc(var(--subtitles-picker-button-size) * 9); word-spacing: calc(var(--subtitles-picker-button-size) * 9);
@ -119,7 +119,7 @@
align-items: center; align-items: center;
margin-bottom: calc(var(--subtitles-picker-button-size) * 0.3); margin-bottom: calc(var(--subtitles-picker-button-size) * 0.3);
font-weight: 500; font-weight: 500;
font-size: 90%; font-size: 0.9em;
color: var(--color-surfacelight); color: var(--color-surfacelight);
} }
@ -168,7 +168,6 @@
.background-toggle-label { .background-toggle-label {
flex: 1; flex: 1;
padding: 0 0.5em; padding: 0 0.5em;
font-size: 1em;
line-height: 1.1em; line-height: 1.1em;
max-height: 2.2em; max-height: 2.2em;
word-break: break-all; word-break: break-all;