From f860df7475ae352c61145ec12873d5afae207abf Mon Sep 17 00:00:00 2001
From: henr-y <mail@explodingcamera.com>
Date: Sun, 1 May 2016 18:55:24 +0200
Subject: [PATCH] Added player fullscreen transition

---
 webserver/public/lib/css/video.css | 39 ++++++++++++------------------
 webserver/public/lib/js/app.js     |  1 -
 2 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/webserver/public/lib/css/video.css b/webserver/public/lib/css/video.css
index 92ccac3..a557ded 100644
--- a/webserver/public/lib/css/video.css
+++ b/webserver/public/lib/css/video.css
@@ -8,6 +8,7 @@
     height: calc(100% - 41px);
 }
 .playback {
+    transition: all .4s cubic-bezier(0.45, 0.05, 0.55, 0.95);
     position:absolute;
     margin: 0 auto;
     width: 854px;
@@ -25,8 +26,8 @@
     border:1px solid #444A59;
 }
 .video {
-    width:854px;
-    height:480px;
+  width: 100%;
+  height: calc(100% - 41px);
 }
 .navbar {
     opacity:0;
@@ -68,10 +69,6 @@
 .playback:hover .navbar {
     opacity: 1;
 }
-.video.fullscreen {
-    width: 100%;
-    height: calc(100% - 41px);
-}
 .playback.fullscreen {
     width: calc(100% - 1px);
     height: 100%;
@@ -263,29 +260,25 @@
     display: none;
 }
 @media (max-width: 1365px){
-.playback {
+  .playback {
     width: 640px;
     height: 401px;
     margin-top: calc(-401px / 2);
     margin-left: calc(-640px / 2);
-}
-.video {
-    width:640px;
-    height:360px;
-}
+  }
 }
 @media (max-width: 1100px) {
-#app-left {
-    z-index: 10;
-    width: 100%;
-}
-.btn-fullscreen {
-    display: none;
-    position: absolute;
-}
+  #app-left {
+      z-index: 10;
+      width: 100%;
+  }
+  .btn-fullscreen {
+      display: none;
+      position: absolute;
+  }
 }
 @media (max-width: 799px) {
-#app-left {
-    display:none;
-}
+  #app-left {
+      display:none;
+  }
 }
\ No newline at end of file
diff --git a/webserver/public/lib/js/app.js b/webserver/public/lib/js/app.js
index ec98cda..f47f178 100644
--- a/webserver/public/lib/js/app.js
+++ b/webserver/public/lib/js/app.js
@@ -4384,7 +4384,6 @@
 		},
 		fullscreen: function() {
 			$('.playback').toggleClass('fullscreen');
-			$('.video').toggleClass('fullscreen');
 			if (($('.btn-fullscreen > div').hasClass('mdi-fullscreen'))){
 				$('.btn-fullscreen > div').removeClass('mdi-fullscreen').addClass('mdi-fullscreen-exit');
 				//$(".playback").draggable({disabled:true}).resizable({disabled:true}).attr('style', '');