subtitle toggle button

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>