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

added audio tracks to the ui

Browse source
This commit is contained in:
nklhrstv 2022-04-15 15:40:15 +03:00
parent 76eac35d8b
commit 1476301374
3 changed files with 54 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,6 +18,7 @@ const ControlBar = ({
volume,
muted,
subtitlesTracks,
audioTracks,
infoAvailable,
onPlayRequested,
onPauseRequested,
@ -120,7 +121,7 @@ const ControlBar = ({
<Button className={classnames(styles['control-bar-button'], { 'disabled': !chromecastServiceActive })} tabIndex={-1} onClick={onChromecastButtonClick}>
<Icon className={styles['icon']} icon={'ic_cast'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': !Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0 })} tabIndex={-1} onMouseDown={onSubtitlesButtonMouseDown} onClick={onSubtitlesButtonClick}>
<Button className={classnames(styles['control-bar-button'], { 'disabled': (!Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0) && (!Array.isArray(audioTracks) || audioTracks.length === 0) })} tabIndex={-1} onMouseDown={onSubtitlesButtonMouseDown} onClick={onSubtitlesButtonClick}>
<Icon className={styles['icon']} icon={'ic_sub'} />
</Button>
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
@ -139,6 +140,7 @@ ControlBar.propTypes = {
volume: PropTypes.number,
muted: PropTypes.bool,
subtitlesTracks: PropTypes.array,
audioTracks: PropTypes.array,
infoAvailable: PropTypes.bool,
onPlayRequested: PropTypes.func,
onPauseRequested: PropTypes.func,

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

@ -49,6 +49,8 @@ const Player = ({ urlParams, queryParams }) => {
buffering: null,
volume: null,
muted: null,
audioTracks: [],
selectedAudioTrackId: null,
subtitlesTracks: [],
selectedSubtitlesTrackId: null,
subtitlesOffset: null,
@ -169,6 +171,9 @@ const Player = ({ urlParams, queryParams }) => {
dispatch({ type: 'setProp', propName: 'selectedSubtitlesTrackId', propValue: null });
dispatch({ type: 'setProp', propName: 'selectedExtraSubtitlesTrackId', propValue: id });
}, []);
const onAudioTrackSelected = React.useCallback((id) => {
dispatch({ type: 'setProp', propName: 'selectedAudioTrackId', propValue: id });
}, []);
const onExtraSubtitlesDelayChanged = React.useCallback((delay) => {
dispatch({ type: 'setProp', propName: 'extraSubtitlesDelay', propValue: delay });
}, []);
@ -300,10 +305,11 @@ const Player = ({ urlParams, queryParams }) => {
}, [videoState.time, videoState.duration]);
React.useEffect(() => {
if ((!Array.isArray(videoState.subtitlesTracks) || videoState.subtitlesTracks.length === 0) &&
(!Array.isArray(videoState.extraSubtitlesTracks) || videoState.extraSubtitlesTracks.length === 0)) {
(!Array.isArray(videoState.extraSubtitlesTracks) || videoState.extraSubtitlesTracks.length === 0) &&
(!Array.isArray(videoState.audioTracks) || videoState.audioTracks.length === 0)) {
closeSubtitlesMenu();
}
}, [videoState.subtitlesTracks, videoState.extraSubtitlesTracks]);
}, [videoState.audioTracks, videoState.subtitlesTracks, videoState.extraSubtitlesTracks]);
React.useEffect(() => {
if (player.metaItem === null) {
closeInfoMenu();
@ -389,7 +395,8 @@ const Player = ({ urlParams, queryParams }) => {
case 'KeyS': {
closeInfoMenu();
if ((Array.isArray(videoState.subtitlesTracks) && videoState.subtitlesTracks.length > 0) ||
(Array.isArray(videoState.extraSubtitlesTracks) && videoState.extraSubtitlesTracks.length > 0)) {
(Array.isArray(videoState.extraSubtitlesTracks) && videoState.extraSubtitlesTracks.length > 0) ||
(Array.isArray(videoState.audioTracks) && videoState.audioTracks.length > 0)) {
toggleSubtitlesMenu();
}
@ -416,7 +423,7 @@ const Player = ({ urlParams, queryParams }) => {
return () => {
window.removeEventListener('keydown', onKeyDown);
};
}, [player, settings.seekTimeDuration, routeFocused, subtitlesMenuOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, videoState.extraSubtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu]);
}, [player, settings.seekTimeDuration, routeFocused, subtitlesMenuOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.audioTracks, videoState.subtitlesTracks, videoState.extraSubtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu]);
React.useLayoutEffect(() => {
return () => {
setImmersedDebounced.cancel();
@ -491,6 +498,7 @@ const Player = ({ urlParams, queryParams }) => {
volume={videoState.volume}
muted={videoState.muted}
subtitlesTracks={videoState.subtitlesTracks.concat(videoState.extraSubtitlesTracks)}
audioTracks={videoState.audioTracks}
infoAvailable={player.metaItem !== null}
onPlayRequested={onPlayRequested}
onPauseRequested={onPauseRequested}
@ -507,6 +515,8 @@ const Player = ({ urlParams, queryParams }) => {
subtitlesMenuOpen ?
<SubtitlesMenu
className={classnames(styles['layer'], styles['menu-layer'])}
audioTracks={videoState.audioTracks}
selectedAudioTrackId={videoState.selectedAudioTrackId}
subtitlesTracks={videoState.subtitlesTracks}
selectedSubtitlesTrackId={videoState.selectedSubtitlesTrackId}
subtitlesOffset={videoState.subtitlesOffset}
@ -518,6 +528,7 @@ const Player = ({ urlParams, queryParams }) => {
extraSubtitlesSize={videoState.extraSubtitlesSize}
onSubtitlesTrackSelected={onSubtitlesTrackSelected}
onExtraSubtitlesTrackSelected={onExtraSubtitlesTrackSelected}
onAudioTrackSelected={onAudioTrackSelected}
onSubtitlesOffsetChanged={onSubtitlesOffsetChanged}
onSubtitlesSizeChanged={onSubtitlesSizeChanged}
onExtraSubtitlesOffsetChanged={onSubtitlesOffsetChanged}

37
src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
View file

@ -143,8 +143,34 @@ const SubtitlesMenu = (props) => {
}
}
}, [props.selectedSubtitlesTrackId, props.selectedExtraSubtitlesTrackId, props.subtitlesOffset, props.extraSubtitlesOffset, props.onSubtitlesOffsetChanged, props.onExtraSubtitlesOffsetChanged]);
const audioTrackOnClick = React.useCallback((event) => {
if (typeof props.onAudioTrackSelected === 'function') {
props.onAudioTrackSelected(event.currentTarget.dataset.id);
}
}, [props.onAudioTrackSelected]);
return (
<div className={classnames(props.className, styles['subtitles-menu-container'])} onMouseDown={onMouseDown}>
{
Array.isArray(props.audioTracks) && props.audioTracks.length > 1 ?
<div className={styles['languages-container']}>
<div className={styles['languages-header']}>Audio Languages</div>
<div className={styles['languages-list']}>
{props.audioTracks.map(({ id, label }, index) => (
<Button key={index} title={label} className={classnames(styles['language-option'], { 'selected': props.selectedAudioTrackId === id })} data-id={id} onClick={audioTrackOnClick}>
<div className={styles['language-label']}>{label}</div>
{
props.selectedAudioTrackId === id ?
<div className={styles['icon']} />
:
null
}
</Button>
))}
</div>
</div>
:
null
}
<div className={styles['languages-container']}>
<div className={styles['languages-header']}>Languages</div>
<div className={styles['languages-list']}>
@ -270,14 +296,23 @@ SubtitlesMenu.propTypes = {
extraSubtitlesTracks: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
lang: PropTypes.string.isRequired,
origin: PropTypes.string.isRequired
origin: PropTypes.string.isRequired,
label: PropTypes.string.isRequired
})),
selectedExtraSubtitlesTrackId: PropTypes.string,
extraSubtitlesOffset: PropTypes.number,
extraSubtitlesDelay: PropTypes.number,
extraSubtitlesSize: PropTypes.number,
audioTracks: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
lang: PropTypes.string.isRequired,
origin: PropTypes.string.isRequired,
label: PropTypes.string.isRequired
})),
selectedAudioTrackId: PropTypes.string,
onSubtitlesTrackSelected: PropTypes.func,
onExtraSubtitlesTrackSelected: PropTypes.func,
onAudioTrackSelected: PropTypes.func,
onSubtitlesOffsetChanged: PropTypes.func,
onSubtitlesSizeChanged: PropTypes.func,
onExtraSubtitlesOffsetChanged: PropTypes.func,