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

subtitleSize prop implemented and binded to the ui

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-12-31 12:33:08 +02:00
parent 814a999ce3
commit 239b4ce1cf
4 changed files with 57 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -33,6 +33,7 @@ class ControlBar extends Component {
nextProps.volume !== this.props.volume ||
nextProps.subtitleTracks !== this.props.subtitleTracks ||
nextProps.selectedSubtitleTrackId !== this.props.selectedSubtitleTrackId ||
nextProps.subtitleSize !== this.props.subtitleSize ||
nextState.sharePopupOpen !== this.state.sharePopupOpen ||
nextState.subtitlesPopupOpen !== this.state.subtitlesPopupOpen;
}
@ -49,6 +50,10 @@ class ControlBar extends Component {
this.props.setSelectedSubtitleTrackId(selectedSubtitleTrackId);
}
setSubtitleSize = (size) => {
this.props.setSubtitleSize(size);
}
mute = () => {
this.props.mute();
}
@ -142,8 +147,10 @@ class ControlBar extends Component {
<SubtitlesPicker
className={classnames(styles['popup-content'], styles['subtitles-popup-content'])}
subtitleTracks={this.props.subtitleTracks}
subtitleSize={this.props.subtitleSize}
selectedSubtitleTrackId={this.props.selectedSubtitleTrackId}
setSelectedSubtitleTrackId={this.setSelectedSubtitleTrackId}
setSubtitleSize={this.setSubtitleSize}
/>
</Popup.Menu>
</Popup >

32
src/routes/Player/ControlBar/SubtitlesPicker/SubtitlesPicker.js
View file

@ -39,6 +39,10 @@ class SubtitlesPicker extends PureComponent {
this.props.setSelectedSubtitleTrackId(event.currentTarget.dataset.trackId);
}
setSubtitleSize = (event) => {
this.props.setSubtitleSize(event.currentTarget.dataset.value);
}
renderToggleButton({ selectedTrack }) {
return (
<div className={styles['toggle-button-container']} onClick={this.toggleOnClick}>
@ -81,6 +85,24 @@ class SubtitlesPicker extends PureComponent {
);
}
renderNumberInput({ value, unit, onChange }) {
if (value === null) {
return null;
}
return (
<div className={styles['number-input-container']}>
<div className={styles['number-input-button']} data-value={value - 1} onClick={onChange}>
<Icon className={styles['number-input-icon']} icon={'ic_minus'} />
</div>
<div className={styles['number-input-value']}>{value}{unit}</div>
<div className={styles['number-input-button']} data-value={value + 1} onClick={onChange}>
<Icon className={styles['number-input-icon']} icon={'ic_plus'} />
</div>
</div>
);
}
renderPreferences({ groupedTracks, selectedTrack }) {
if (!selectedTrack) {
return (
@ -120,15 +142,7 @@ class SubtitlesPicker extends PureComponent {
<Icon className={styles['number-input-icon']} icon={'ic_plus'} />
</div>
</div>
<div className={styles['number-input-container']}>
<div className={styles['number-input-button']}>
<Icon className={styles['number-input-icon']} icon={'ic_minus'} />
</div>
<div className={styles['number-input-value']}>17pt</div>
<div className={styles['number-input-button']}>
<Icon className={styles['number-input-icon']} icon={'ic_plus'} />
</div>
</div>
{this.renderNumberInput({ value: this.props.subtitleSize, unit: 'pt', onChange: this.setSubtitleSize })}
</div>
);
}

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

@ -16,7 +16,8 @@ class Player extends Component {
duration: null,
volume: null,
subtitleTracks: [],
selectedSubtitleTrackId: null
selectedSubtitleTrackId: null,
subtitleSize: null
};
}
@ -26,7 +27,8 @@ class Player extends Component {
nextState.duration !== this.state.duration ||
nextState.volume !== this.state.volume ||
nextState.subtitleTracks !== this.state.subtitleTracks ||
nextState.selectedSubtitleTrackId !== this.state.selectedSubtitleTrackId;
nextState.selectedSubtitleTrackId !== this.state.selectedSubtitleTrackId ||
nextState.subtitleSize !== this.state.subtitleSize;
}
componentDidMount() {
@ -74,6 +76,10 @@ class Player extends Component {
this.videoRef.current && this.videoRef.current.dispatch('setProp', 'selectedSubtitleTrackId', selectedSubtitleTrackId);
}
setSubtitleSize = (size) => {
this.videoRef.current && this.videoRef.current.dispatch('setProp', 'subtitleSize', size);
}
mute = () => {
this.videoRef.current && this.videoRef.current.dispatch('command', 'mute');
}
@ -117,11 +123,13 @@ class Player extends Component {
volume={this.state.volume}
subtitleTracks={this.state.subtitleTracks}
selectedSubtitleTrackId={this.state.selectedSubtitleTrackId}
subtitleSize={this.state.subtitleSize}
play={this.play}
pause={this.pause}
setTime={this.setTime}
setVolume={this.setVolume}
setSelectedSubtitleTrackId={this.setSelectedSubtitleTrackId}
setSubtitleSize={this.setSubtitleSize}
mute={this.mute}
unmute={this.unmute}
/>

19
src/routes/Player/Video/stremio-video/HTMLVideo.js
View file

@ -20,7 +20,7 @@ var HTMLVideo = function(container) {
container.appendChild(styles);
styles.sheet.insertRule('#' + container.id + ' video { width: 100%; height: 100%; position: relative; z-index: 0; }', styles.sheet.cssRules.length);
styles.sheet.insertRule('#' + container.id + ' .subtitles { position: absolute; right: 0; bottom: 120px; left: 0; font-size: 22px; color: white; text-align: center; }', styles.sheet.cssRules.length);
var subtitleStylesIndex = styles.sheet.insertRule('#' + container.id + ' .subtitles { position: absolute; right: 0; bottom: 120px; left: 0; font-size: 22px; color: white; text-align: center; }', styles.sheet.cssRules.length);
container.appendChild(video);
video.crossOrigin = 'anonymous';
video.controls = false;
@ -65,6 +65,9 @@ var HTMLVideo = function(container) {
return selectedSubtitleTrackId;
}
function getSubtitleSize() {
return parseInt(styles.sheet.cssRules[subtitleStylesIndex].style.fontSize);
}
function onEnded() {
events.emit('ended');
}
@ -121,6 +124,9 @@ var HTMLVideo = function(container) {
function onSelectedSubtitleTrackIdChanged() {
events.emit('propChanged', 'selectedSubtitleTrackId', getSelectedSubtitleTrackId());
}
function onSubtitleSizeChanged() {
events.emit('propChanged', 'subtitleSize', getSubtitleSize());
}
function updateSubtitlesText() {
while (subtitles.hasChildNodes()) {
subtitles.removeChild(subtitles.lastChild);
@ -189,6 +195,9 @@ var HTMLVideo = function(container) {
case 'selectedSubtitleTrackId':
events.emit('propValue', 'selectedSubtitleTrackId', getSelectedSubtitleTrackId());
return;
case 'subtitleSize':
events.emit('propValue', 'subtitleSize', getSubtitleSize());
return;
default:
throw new Error('observeProp not supported: ' + arguments[1]);
}
@ -237,6 +246,12 @@ var HTMLVideo = function(container) {
onSelectedSubtitleTrackIdChanged();
}
break;
case 'subtitleSize':
if (!isNaN(arguments[2])) {
styles.sheet.cssRules[subtitleStylesIndex].style.fontSize = parseInt(arguments[2]) + 'px';
onSubtitleSizeChanged();
}
return;
case 'volume':
if (!isNaN(arguments[2])) {
video.muted = false;
@ -353,7 +368,7 @@ var HTMLVideo = function(container) {
HTMLVideo.manifest = {
name: 'HTMLVideo',
embedded: true,
props: ['paused', 'time', 'duration', 'volume', 'subtitleTracks', 'selectedSubtitleTrackId']
props: ['paused', 'time', 'duration', 'volume', 'subtitleTracks', 'selectedSubtitleTrackId', 'subtitleSize']
};
module.exports = HTMLVideo;