fix(captions): Added new styles to deal with iOS native captions when…

… using fullscreen and removed unnecessary ones
openplayerjs · Jan 13, 2020 · 044c5f0 · 044c5f0
1 parent fca7fa1
commit 044c5f0
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 18 deletions.
diff --git a/dist/openplayer.css b/dist/openplayer.css
@@ -688,13 +688,6 @@
 .op-player video::-webkit-media-text-track-container {
     display: none !important;
 }
-.op-player.op-player__ios--iphone video::-webkit-media-controls,
-.op-player.op-player__ios--iphone video::-webkit-media-text-track-container {
-    display: block !important;
-}
-.op-fullscreen-native .op-captions {
-    display: none !important;
-}
 
 /* == Captions =============== */
 .op-captions {
@@ -874,3 +867,23 @@ video:-webkit-media-text-track-display {
 .op-player__ios--iphone .op-player__play {
     margin-top: -5px;
 }
+.op-player.op-player__ios--iphone video::-webkit-media-controls,
+.op-player.op-player__ios--iphone video::-webkit-media-text-track-container {
+    display: block !important;
+}
+.op-player.op-player__ios--iphone video::cue {
+    color: transparent;
+    font-size: 0.001px;
+}
+.op-player.op-player__ios--iphone video::-webkit-media-text-track-display-backdrop {
+    background: transparent !important;
+}
+.op-player[data-fullscreen='true'].op-player__ios--iphone video::cue {
+    color: #fff;
+    font-size: medium;
+    font-size: initial;
+}
+.op-player[data-fullscreen='true'].op-player.op-player__ios--iphone video::-webkit-media-text-track-display-backdrop {
+    background: #000000 !important;
+    background: rgba(0, 0, 0, .498039) !important;
+}
diff --git a/dist/openplayer.js b/dist/openplayer.js
@@ -5589,7 +5589,7 @@ var Fullscreen = function () {
 
           _this._setFullscreenData(true);
 
-          document.body.classList.add('op-fullscreen__on', 'op-fullscreen-native');
+          document.body.classList.add('op-fullscreen__on');
         });
         this.player.getElement().addEventListener('webkitendfullscreen', function () {
           _this.isFullscreen = false;

diff --git a/dist/openplayer.min.css b/dist/openplayer.min.css
diff --git a/dist/openplayer.min.js b/dist/openplayer.min.js
diff --git a/src/css/player.css b/src/css/player.css
@@ -618,13 +618,6 @@
 .op-player video::-webkit-media-text-track-container {
     display: none !important;
 }
-.op-player.op-player__ios--iphone video::-webkit-media-controls,
-.op-player.op-player__ios--iphone video::-webkit-media-text-track-container {
-    display: block !important;
-}
-.op-fullscreen-native .op-captions {
-    display: none !important;
-}
 
 /* == Captions =============== */
 .op-captions {
@@ -796,3 +789,21 @@ video:-webkit-media-text-track-display {
 .op-player__ios--iphone .op-player__play {
     margin-top: -5px;
 }
+.op-player.op-player__ios--iphone video::-webkit-media-controls,
+.op-player.op-player__ios--iphone video::-webkit-media-text-track-container {
+    display: block !important;
+}
+.op-player.op-player__ios--iphone video::cue {
+    color: transparent;
+    font-size: 0.001px;
+}
+.op-player.op-player__ios--iphone video::-webkit-media-text-track-display-backdrop {
+    background: transparent !important;
+}
+.op-player[data-fullscreen='true'].op-player__ios--iphone video::cue {
+    color: #fff;
+    font-size: initial;
+}
+.op-player[data-fullscreen='true'].op-player.op-player__ios--iphone video::-webkit-media-text-track-display-backdrop {
+    background: rgba(0, 0, 0, 0.498039) !important;
+}
diff --git a/src/js/controls/fullscreen.ts b/src/js/controls/fullscreen.ts
@@ -170,7 +170,7 @@ class Fullscreen implements PlayerComponent {
             this.player.getElement().addEventListener('webkitbeginfullscreen', () => {
                 this.isFullscreen = true;
                 this._setFullscreenData(true);
-                document.body.classList.add('op-fullscreen__on', 'op-fullscreen-native');
+                document.body.classList.add('op-fullscreen__on');
             });
             this.player.getElement().addEventListener('webkitendfullscreen', () => {
                 this.isFullscreen = false;