Fix mini-player issue introduced with fullscreen fix

src/index.html

@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="style/lightTheme.css">
   <link rel="stylesheet" href="style/videoGrid.css">
   <link rel="stylesheet" href="style/player.css">
+  <link rel="stylesheet" href="style/playerFix.css">
   <link rel="stylesheet" href="style/channel.css">
   <link rel="stylesheet" href="style/playlist.css">
   <link rel="stylesheet" href="style/loading.css">

src/js/mediaelement-and-player.js

@@ -1231,21 +1231,6 @@ Object.assign(_player2.default.prototype, {
 
 		player.fullscreenBtn = fullscreenBtn;
 
-		t.options.keyActions.push({
-			keys: [70],
-			action: function action(player, media, key, event) {
-				if (!event.ctrlKey) {
-					if (typeof player.enterFullScreen !== 'undefined') {
-						if (player.isFullScreen) {
-							player.exitFullScreen();
-						} else {
-							player.enterFullScreen();
-						}
-					}
-				}
-			}
-		});
-
 		t.exitFullscreenCallback = function (e) {
 			var key = e.which || e.keyCode || 0;
 			if (t.options.enableKeyboard && key === 27 && (Features.HAS_TRUE_NATIVE_FULLSCREEN && Features.IS_FULLSCREEN || t.isFullScreen)) {
@@ -1342,8 +1327,10 @@ Object.assign(_player2.default.prototype, {
 
 		t.getElement(t.container).style.width = '100%';
 		t.getElement(t.container).style.height = '100%';
-    $('#player_native_dash').get(0).style.maxHeight = '100%';
-    $('.mejs__container').get(0).style.maxHeight = '100%';
+    if (typeof(playerView) !== 'undefined') {
+      $('#player_native_dash').get(0).style.maxHeight = '100%';
+      $('.mejs__container').get(0).style.maxHeight = '100%';
+    }
 
 		t.containerSizeTimeout = setTimeout(function () {
 			t.getElement(t.container).style.width = '100%';
@@ -1411,8 +1398,10 @@ Object.assign(_player2.default.prototype, {
 		if (t.options.setDimensions) {
 			t.getElement(t.container).style.width = t.normalWidth + 'px';
 			t.getElement(t.container).style.height = t.normalHeight + 'px';
-      $('#player_native_dash').get(0).style.maxHeight = '80vh';
-      $('.mejs__container').get(0).style.maxHeight = '80vh';
+      if (typeof(playerView) !== 'undefined') {
+        $('#player_native_dash').get(0).style.maxHeight = '80vh';
+        $('.mejs__container').get(0).style.maxHeight = '80vh';
+      }
 
 			if (isNative) {
 				t.node.style.width = t.normalWidth + 'px';

src/js/miniPlayer.js

@@ -52,14 +52,17 @@ let miniPlayerView = new Vue({
   },
   methods: {
     legacyFormats: () => {
+      checkedSettings = false;
       miniPlayerView.legacySeen = true;
       miniPlayerView.playerSeen = false;
     },
     dashFormats: () => {
+      checkedSettings = false;
       miniPlayerView.legacySeen = false;
       miniPlayerView.playerSeen = true;
     },
     embedPlayer: () => {
+      checkedSettings = false;
       miniPlayerView.legacySeen = false;
       miniPlayerView.playerSeen = false;
     }

src/style/mediaelementplayer.css

@@ -21,7 +21,6 @@ Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-h
     text-align: left;
     text-indent: 0;
     vertical-align: top;
-    max-height: 80vh;
 }
 
 .mejs__container * {

src/style/player.css

@@ -28,17 +28,12 @@ iframe {
 .videoPlayer {
     width: 100%;
     height: 100%;
-    max-height: 80vh;
 }
 
 #player {
   min-width: 100%;
 }
 
-#player_native_dash {
-  max-height: 80vh;
-}
-
 #legacyPlayer {
   max-height: 80vh;
 }

src/style/playerFix.css

@@ -0,0 +1,17 @@
+/*
+This file is to fix some of the resizing issues introduced when full screening the video player.
+*/
+
+#player_native_dash {
+  max-height: 80vh;
+}
+
+.mejs__container {
+    max-height: 80vh;
+}
+
+.videoPlayer {
+    width: 100%;
+    height: 100%;
+    max-height: 80vh;
+}