2 files changed, 28 insertions, 0 deletions
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 }) => (