Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-07 06:19:30 +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%'
});
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 }) => {
if (value === null) {
return null;
@ -45,17 +56,6 @@ class SubtitlesPicker extends React.Component {
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 = () => {
const selectedSubtitleTrackId = this.props.selectedSubtitleTrackId === null && this.props.subtitleTracks.length > 0 ?
this.props.subtitleTracks[0].id
@ -105,13 +105,13 @@ class SubtitlesPicker extends React.Component {
<div className={styles['labels-list-container']}>
{
Object.keys(groupedTracks)
.sort(this.subtitlesComparator(ORIGIN_PRIORITIES))
.sort(comparatorWithPriorities(ORIGIN_PRIORITIES))
.map((origin) => (
<React.Fragment key={origin}>
<div className={styles['track-origin']}>{origin}</div>
{
Object.keys(groupedTracks[origin])
.sort(this.subtitlesComparator(this.props.languagePriorities))
.sort(comparatorWithPriorities(this.props.languagePriorities))
.map((label) => {
const selected = selectedTrack && selectedTrack.label === label && selectedTrack.origin === origin;
return (
@ -139,8 +139,8 @@ class SubtitlesPicker extends React.Component {
return (
<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}
className={classnames(styles['variant-button'], { [styles['selected']]: track.id === selectedTrack.id })}
title={track.id}
@ -148,8 +148,8 @@ class SubtitlesPicker extends React.Component {
data-track-id={track.id}
children={index + 1}
/>
);
})}
))
}
</div>
);
}
@ -230,7 +230,7 @@ SubtitlesPicker.propTypes = {
dispatch: PropTypes.func.isRequired
};
SubtitlesPicker.defaultProps = {
subtitleTracks: [],
subtitleTracks: Object.freeze([]),
languagePriorities: Object.freeze({
English: 1
})

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

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