diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player/components.media')
3 files changed, 8 insertions, 4 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css index 37237c2..63b4dc2 100644 --- a/animism-align/frontend/app/views/viewer/player/components.media/media.css +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css @@ -400,10 +400,11 @@ pointer-events: none; } .video-scrubber .end-controls { - width: 7rem; + width: 9rem; display: flex; flex-direction: row; justify-content: center; + align-items: center; color: black; } .video-scrubber .playerTime { diff --git a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js index 4afcffe..b083e29 100644 --- a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js +++ b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js @@ -4,7 +4,7 @@ import { connect } from 'react-redux' import actions from 'app/actions' import { VIDEO_SCRUBBER_HIDE_DELAY, VIDEO_SCRUBBER_HOVER_AREA } from 'app/constants' import { clamp, timestamp } from 'app/utils' -import { PlayButton, VolumeControl } from 'app/views/viewer/nav/viewer.icons' +import { PlayButton, VolumeControl, SubtitleButton } from 'app/views/viewer/nav/viewer.icons' class VideoScrubber extends Component { state = { @@ -104,7 +104,7 @@ class VideoScrubber extends Component { clearTimeout(this.hideTimeout) } render() { - const { playing, start_ts, play_ts, volume, timing, video_start_ts, duration } = this.props + const { playing, start_ts, play_ts, volume, timing, video_start_ts, duration, cc } = this.props const { hovering, showing } = this.state // remove video start offset from timing // console.log(start_ts, play_ts) @@ -145,6 +145,7 @@ class VideoScrubber extends Component { {timestampText} </div> <VolumeControl volume={volume} /> + <SubtitleButton cc={cc} /> </div> </div> ) @@ -154,6 +155,7 @@ class VideoScrubber extends Component { const mapStateToProps = state => ({ playing: state.audio.playing, volume: state.audio.volume, + cc: state.audio.cc, }) export default connect(mapStateToProps)(VideoScrubber) diff --git a/animism-align/frontend/app/views/viewer/player/components.media/video.subtitles.js b/animism-align/frontend/app/views/viewer/player/components.media/video.subtitles.js index 346977a..2bc0ac3 100644 --- a/animism-align/frontend/app/views/viewer/player/components.media/video.subtitles.js +++ b/animism-align/frontend/app/views/viewer/player/components.media/video.subtitles.js @@ -36,8 +36,9 @@ export default class VideoSubtitles extends Component { } } render() { + const { cc } = this.props const { current } = this.state - if (!current) return <div className="video-subtitles hidden" /> + if (!cc || !current) return <div className="video-subtitles hidden" /> return ( <div className="video-subtitles"> <span>{current.lines.join(" ")}</span> |