From 183be892249b6875233019ba1b2bc0ca345ded7c Mon Sep 17 00:00:00 2001
From: Junmin Liu <junminliu@gmail.com>
Date: Wed, 19 Jun 2019 19:21:02 -0500
Subject: [PATCH] feedback addressed

---
 docs/lib/Components/CaptionedVideoPage.js     |  2 +-
 .../control-bar/ClosedCaptionButton.js        | 26 ++++++++++++-------
 styles/scss/components/closed-caption.scss    | 17 ++++++++----
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/docs/lib/Components/CaptionedVideoPage.js b/docs/lib/Components/CaptionedVideoPage.js
index 5791be87..27d367c5 100644
--- a/docs/lib/Components/CaptionedVideoPage.js
+++ b/docs/lib/Components/CaptionedVideoPage.js
@@ -9,7 +9,7 @@ const PlayerWithCaptionsSource = require('!!raw-loader!../examples/PlayerWithCap
 export default function CaptionedVideoPage() {
   return (
     <div>
-      <Helmet title="PosterImage" />
+      <Helmet title="ClosedCaptionButton" />
       <h3>ClosedCaptionButton</h3>
       <p>
         There is an example on how to add a ClosedCaption button component into{' '}
diff --git a/src/components/control-bar/ClosedCaptionButton.js b/src/components/control-bar/ClosedCaptionButton.js
index 52a21774..f0935f5f 100644
--- a/src/components/control-bar/ClosedCaptionButton.js
+++ b/src/components/control-bar/ClosedCaptionButton.js
@@ -7,10 +7,14 @@ const propTypes = {
   player: PropTypes.object,
   actions: PropTypes.object,
   className: PropTypes.string,
+  offMenuText: PropTypes.string,
+  showOffMenu: PropTypes.bool,
   kinds: PropTypes.array
 };
 
 const defaultProps = {
+  offMenuText: 'Off',
+  showOffMenu: true,
   kinds: ['captions', 'subtitles'] // `kind`s of TextTrack to look for to associate it with this menu.
 };
 
@@ -30,7 +34,9 @@ class ClosedCaptionButton extends Component {
   }
 
   getTextTrackItems() {
-    const { kinds, player } = this.props;
+    const {
+      kinds, player, offMenuText, showOffMenu
+    } = this.props;
     const { textTracks, activeTextTrack } = player;
     const textTrackItems = {
       items: [],
@@ -42,10 +48,12 @@ class ClosedCaptionButton extends Component {
       return textTrackItems;
     }
 
-    textTrackItems.items.push({
-      label: 'Off',
-      value: null
-    });
+    if (showOffMenu) {
+      textTrackItems.items.push({
+        label: offMenuText || 'Off',
+        value: null
+      });
+    }
 
     tracks.forEach((textTrack) => {
       // ignore invalid text track kind
@@ -99,14 +107,14 @@ class ClosedCaptionButton extends Component {
   }
 
   handleSelectItem(index) {
-    const { player, actions } = this.props;
+    const { player, actions, showOffMenu } = this.props;
     const { textTracks } = player;
 
     // For the 'subtitles-off' button, the first condition will never match
-    // so all will subtitles be turned off
+    // so all subtitles will be turned off
     Array.from(textTracks).forEach((textTrack, i) => {
-      if (index === i + 1) {
-        // the 0 index is `Off`
+      // if it shows the `Off` menu, the first item is `Off`
+      if (index === (showOffMenu ? i + 1 : i)) {
         textTrack.mode = 'showing';
         actions.activateTextTrack(textTrack);
       } else {
diff --git a/styles/scss/components/closed-caption.scss b/styles/scss/components/closed-caption.scss
index 94349a4e..ff6a560b 100644
--- a/styles/scss/components/closed-caption.scss
+++ b/styles/scss/components/closed-caption.scss
@@ -1,6 +1,13 @@
-.video-react .video-react-closed-caption {
-  cursor: pointer;
-  @include flex(none);
-  @extend .video-react-icon;
-  @extend .video-react-icon-closed-caption;
+.video-react {
+  .video-react-closed-caption {
+    cursor: pointer;
+    @include flex(none);
+    @extend .video-react-icon;
+    @extend .video-react-icon-closed-caption;
+  }
+
+  video::-webkit-media-text-track-container {
+    -webkit-transform: translateY(-30px) !important;
+    transform: translateY(-30px) !important;
+  }
 }