diff options
9 files changed, 50 insertions, 6 deletions
diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js index d55e27c..bbc76b2 100644 --- a/animism-align/frontend/app/types.js +++ b/animism-align/frontend/app/types.js @@ -23,7 +23,7 @@ export const align = crud_type('align', [ ]) export const audio = with_type('audio', [ - 'play', 'pause', 'seek', 'update_time', 'set_volume', + 'play', 'pause', 'seek', 'update_time', 'set_volume', 'set_cc', ]) export const viewer = with_type('viewer', [ diff --git a/animism-align/frontend/app/views/audio/audio.actions.js b/animism-align/frontend/app/views/audio/audio.actions.js index e152b25..ed9bf47 100644 --- a/animism-align/frontend/app/views/audio/audio.actions.js +++ b/animism-align/frontend/app/views/audio/audio.actions.js @@ -52,3 +52,6 @@ export const setVolume = volume => dispatch => { audioPlayer.volume = volume dispatch({ type: types.audio.set_volume, volume }) } +export const setCC = value => dispatch => { + dispatch({ type: types.audio.set_cc, value }) +} diff --git a/animism-align/frontend/app/views/audio/audio.reducer.js b/animism-align/frontend/app/views/audio/audio.reducer.js index e6778a8..46dc384 100644 --- a/animism-align/frontend/app/views/audio/audio.reducer.js +++ b/animism-align/frontend/app/views/audio/audio.reducer.js @@ -7,6 +7,7 @@ const initialState = { play_ts: 0, seek_ts: 0, volume: 1.0, + cc: true, } export default function alignReducer(state = initialState, action) { @@ -39,6 +40,11 @@ export default function alignReducer(state = initialState, action) { ...state, volume: action.volume, } + case types.audio.set_cc: + return { + ...state, + cc: action.value + } default: return state } diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css index 0d98304..eae5fa9 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.css +++ b/animism-align/frontend/app/views/viewer/nav/nav.css @@ -290,3 +290,18 @@ .zoomPlus path { stroke: white; } + +/* CC button */ + +.cc-button { + transition: opacity 0.2s, background 0.2s; + background: rgba(0,0,0,0.0); + font-size: 0.95rem; + padding: 0.25rem; + margin-left: 0.5rem; + margin-right: 0.75rem; + cursor: pointer; +} +.cc-button.off { + opacity: 0.4; +} diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js index f8a1fc6..6fa8f4e 100644 --- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js +++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js @@ -71,6 +71,19 @@ export const PlayButton = ({ playing }) => { ) } +// subtitles + +export const SubtitleButton = ({ cc }) => { + return ( + <div + className={cc ? 'cc-button on' : 'cc-button off'} + onClick={() => actions.audio.setCC(!cc)} + > + {'CC'} + </div> + ) +} + // player current time export const PlayerTime = ({ play_ts, duration }) => ( 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> |