&fl fix

index.html

@@ -56,7 +56,7 @@
 		<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
 		<meta name="msapplication-TileColor" content="#da532c" />
 		<meta name="theme-color" content="#ffffff" />
-		<link rel="stylesheet" href="./main.css?ver=289" />
+		<link rel="stylesheet" href="./main.css?ver=290" />
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script>
 		<style id="lightbox-animations" type="text/css"></style>
 		<!-- <link rel="manifest" href="manifest.json" /> -->
@@ -83,7 +83,7 @@
 		
 		<script type="text/javascript" crossorigin="anonymous"  src="./thirdparty/CodecsHandler.js?ver=47"></script>
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></script>
-		<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=610"></script>
+		<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=612"></script>
 		<input id="zoomSlider" type="range" style="display: none;" />
 		<span id="electronDragZone" style="pointer-events: none; z-index:-10; position:absolute;top:0;left:0;width:100%;height:2%;-webkit-app-region: drag;min-height:20px;"></span>
 		<div id="header">
@@ -2494,11 +2494,11 @@
 			// session.hidehome = true; // If used, 'hide home' will make the landing page inaccessible, along with hiding a few go-home elements.
 			// session.record = false; // uncomment to block users from being able to record via vdo.ninja's built in recording function
 		</script>
-		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=730"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=733"></script>
 		<!-- 
 		// If you wish to change branding, blank offers a good clean start.
 		<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
 		-->
-		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=588"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=589"></script>
 	</body>
 </html>

lib.js

@@ -3228,6 +3228,10 @@ function createRichVideoElement(UUID){ // this function is used to check and gen
 			session.rpcs[UUID].videoElement.dataset.sid = session.rpcs[UUID].streamID;
 		}
 		
+		if (session.rpcs[UUID].rotate !== false){
+			session.rpcs[UUID].videoElement.rotated = session.rpcs[UUID].rotate;
+		}
+		
 		session.rpcs[UUID].videoElement.addEventListener("playing", (e)=>{
 			
 			try {
@@ -5052,8 +5056,8 @@ function updateMixerRun(e=false){  // this is the main auto-mixing code.  It's a
 					
 					vid.style.objectFit = "cover"; //contain;
 					vid.style.overflow = "unset"; //contain;
-					vid.style.maxWidth = "unset";
-					vid.style.maxHeight = "unset";
+					//vid.style.maxWidth = "unset";
+					//vid.style.maxHeight = "unset";
 				} else {
 					if (vw && vh){
 						var vvw = parseInt(vw);
@@ -5094,6 +5098,9 @@ function updateMixerRun(e=false){  // this is the main auto-mixing code.  It's a
 					vid.style.height = Math.ceil(hsw - borderOffset*2) + "px";
 					vid.style.left =  0;
 					
+					vid.style.maxWidth = "100vh";
+					vid.style.maxHeight = "100vw";
+					
 					if (ChromeVersion && ChromeVersion<77){
 						if (!animated && (parseInt(container.style.width)>parseInt(holder.style.height))){
 							vid.style.position = "relative";
@@ -12785,17 +12792,9 @@ function updateForceRotate(){
 
 function updateForceRotatedCSS(){
 	if (session.forceRotate==270){
-		document.body.setAttribute( "style", "transform: rotate(270deg);position: absolute;top: "+(getWidth()/4)+"px;left: -"+ (getHeight()/4) + "px;height: 95vw;width: 95vh;");
+		document.body.setAttribute( "style", "transform: rotate(270deg);position: absolute;top: 100vh;left: 0;height: 100vw;width: 100vh;transform-origin: 0 0;");
 	} else if (session.forceRotate==90){
-		document.body.setAttribute( "style", "transform: rotate(90deg);position: absolute;top: "+(getWidth()/4)+"px;left: -"+ (getHeight()/4) + "px;height: 95vw;width: 95vh;");
-	} else {
-		document.body.setAttribute( "style", "");
-	}
-	
-	if (session.forceRotate==270){
-		document.body.setAttribute( "style", "transform: rotate(270deg);position: absolute;top: "+(getWidth()/4)+"px;left: -"+ (getHeight()/4) + "px;height: 95vw;width: 95vh;");
-	} else if (session.forceRotate==90){
-		document.body.setAttribute( "style", "transform: rotate(90deg);position: absolute;top: "+(getWidth()/4)+"px;left: -"+ (getHeight()/4) + "px;height: 95vw;width: 95vh;");
+		document.body.setAttribute( "style", "transform: rotate(90deg);position: absolute;top: 0;left: 100vw;height: 100vw;width: 100vh;transform-origin: 0 0;");
 	} else {
 		document.body.setAttribute( "style", "");
 	}

main.css

@@ -1222,7 +1222,7 @@ button.glyphicon-button.active.focus {
     position: fixed;
     z-index: 995;
     padding: 0px 10px;
-    bottom: 10px;
+    bottom: 0;
     border: 0;
     min-height: 52px;
     pointer-events: none;