diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
4 files changed, 12 insertions, 5 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js index 468131d..741aa7a 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js @@ -78,7 +78,7 @@ class FullscreenVideo extends Component { } render() { - const { element, media, transitionDuration, play_ts, playing } = this.props + const { element, media, transitionDuration, play_ts, playing, cc } = this.props const { duration, seconds, ready, fadeOut } = this.state const { color } = element const item = media.lookup[element.settings.media_id] @@ -125,9 +125,11 @@ class FullscreenVideo extends Component { playing={playing} duration={element.duration} timing={this.state} + cc={cc} onScrub={this.handleScrub} /> <VideoSubtitles + cc={cc} play_ts={seconds} mediaItem={item} /> @@ -140,6 +142,7 @@ const mapStateToProps = state => ({ viewer: state.viewer, play_ts: state.audio.play_ts, playing: state.audio.playing, + cc: state.audio.cc, }) export default connect(mapStateToProps)(FullscreenVideo) 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> |