Cross browser fixes

Author: mderrick

.babelrc

@@ -1,4 +1,4 @@
 {
 	"presets": ["es2015", "react"],
-    "plugins": ["transform-object-rest-spread"]
+    "plugins": ["transform-runtime", "transform-object-rest-spread"]
 }

package.json

@@ -66,8 +66,10 @@
     "babel-jest": "^18.0.0",
     "babel-loader": "^6.2.7",
     "babel-plugin-transform-object-rest-spread": "^6.19.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
+    "babel-runtime": "^6.23.0",
     "case-sensitive-paths-webpack-plugin": "^1.1.4",
     "chalk": "^1.1.3",
     "css-loader": "^0.25.0",

src/DefaultPlayer/Captions/Captions.js

@@ -21,7 +21,7 @@ export default ({ textTracks, onClick, onItemClick, className }) => {
                 { textTracks && [...textTracks].map((track) => (
                     <li
                         key={track.language}
-                        className={track.mode === 'showing'
+                        className={track.mode === track.SHOWING || track.mode == 'showing'
                             ? styles.activeTrackItem
                             : styles.trackItem}
                         onClick={onItemClick.bind(this, track)}>

src/DefaultPlayer/Overlay/Overlay.css

@@ -4,9 +4,12 @@
     right: 0;
     bottom: 0;
     left: 0;
+    height: 100%;
+    width: 100%;
     color: #fff;
     text-align: center;
     cursor: pointer;
+    background-color: rgba(0,0,0,0);
 }
 
 .inner {

src/video/api.js

@@ -54,19 +54,20 @@ export const fullscreen = (videoEl) => {
 
 export const showTrack = ({ textTracks }, track) => {
     hideTracks({ textTracks });
-    track.mode = 'showing';
+    track.mode = track.SHOWING || 'showing';
 };
 
 export const hideTracks = ({ textTracks }) => {
     for (var i = 0; i < textTracks.length; i++) {
-        textTracks[i].mode = 'disabled';
+        textTracks[i].mode = textTracks[i].DISABLED || 'disabled';
     }
 };
 
 export const toggleTracks = (() => {
     let previousTrack;
     return ({ textTracks }) => {
-        let currentTrack = [...textTracks].filter((track) => track.mode === 'showing')[0];
+        let currentTrack = [...textTracks]
+            .filter((track) => track.mode === track.SHOWING || track.mode === 'showing')[0];
         if (currentTrack) {
             hideTracks({ textTracks });
             previousTrack = currentTrack;

src/video/api.test.js

@@ -148,9 +148,16 @@ describe('api', () => {
     describe('hideTracks', () => {
         it('hides all of the tracks', () => {
             expect(textTracksMock[0].mode).toBe('showing');
-            hideTracks({ textTracks: textTracksMock }, textTracksMock[2]);
+            hideTracks({ textTracks: textTracksMock });
             expect(textTracksMock[0].mode).toBe('disabled');
         });
+
+        it('uses constants on text tracks if they exist for IE', () => {
+            textTracksMock[0].DISABLED = 3;
+            expect(textTracksMock[0].mode).toBe('showing');
+            hideTracks({ textTracks: textTracksMock });
+            expect(textTracksMock[0].mode).toBe(3);
+        });
     });
 
     describe('showTrack', () => {
@@ -165,6 +172,13 @@ describe('api', () => {
             showTrack({ textTracks: textTracksMock }, textTracksMock[2]);
             expect(textTracksMock[2].mode).toBe('showing');
         });
+
+        it('uses constants on text tracks if they exist for IE', () => {
+            textTracksMock[2].SHOWING = 2;
+            expect(textTracksMock[2].mode).toBe('disabled');
+            showTrack({ textTracks: textTracksMock }, textTracksMock[2]);
+            expect(textTracksMock[2].mode).toBe(2);
+        });
     });
 
     describe('toggleTracks', () => {