From a369fed6086f8a68726ae3c63caf637af4b6f1a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Thu, 15 Feb 2018 12:22:44 +0100
Subject: [PATCH] Prettier PiP for frontpage, with a hover

---
 server/public/assets/css/style.css | 38 ++++++++++++++++++++++++++----
 server/public/assets/js/channel.js |  2 +-
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css
index 1d9f6282..4302b2b8 100755
--- a/server/public/assets/css/style.css
+++ b/server/public/assets/css/style.css
@@ -425,13 +425,13 @@ li.disabled span {
 
 #closePlayer{
     position: fixed;
-    bottom: 175px;
-    right: 20px;
+    top: 7px;
+    right: 14px;
     z-index: 999999999999999;
     font-size: 18px;
     color: white;
     text-shadow: 0px 0px 2px black;
-    cursor:pointer;
+    cursor: pointer;
 }
 
 #player_bottom_overlay{
@@ -439,6 +439,11 @@ li.disabled span {
     cursor: pointer;
     top: 0px;
     left: 0px;
+    -webkit-transition: all .5s ease-out;
+    -moz-transition: all .5s ease-out;
+    -ms-transition: all .5s ease-out;
+    -o-transition: all .5s ease-out;
+    transition: all .5s ease-out;
 }
 
 .frontpage_modified_heights{
@@ -458,7 +463,7 @@ li.disabled span {
     display: block !important;
     /* right: 10px; */
     z-index: 10;
-    transition: 1s;
+    /*transition: 1s;*/
 }
 
 #frontpage_player{
@@ -886,6 +891,27 @@ hide mdi-action-visibility mdi-action-visibility-off
     width: 100%;
 }
 
+#player_bottom_overlay::after {
+    background: rgba(0,0,0,.8);
+    content: "To Channel";
+    width: 100%;
+    position: absolute;
+    left: 0px;
+    height: 100%;
+    top: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    transition: opacity .5s;
+    opacity: 0;
+}
+
+#player_bottom_overlay:hover#player_bottom_overlay::after {
+    opacity: 1;
+    cursor: pointer;
+}
+
 /*#nav-mobile{
 margin:-1px;
 }*/
@@ -2535,6 +2561,10 @@ nav ul li:hover, nav ul li.active {
         margin-bottom: 18px;
     }
 
+    #player_bottom_overlay {
+        top: 7px;
+    }
+
     .mobile-delete {
         height: 100%;
         position: absolute;
diff --git a/server/public/assets/js/channel.js b/server/public/assets/js/channel.js
index be186815..956c557b 100644
--- a/server/public/assets/js/channel.js
+++ b/server/public/assets/js/channel.js
@@ -556,7 +556,6 @@ var Channel = {
 
                     if(!Helper.mobilecheck() && !user_auth_avoid){
                         $(".video-container").resizable("destroy");
-                        $("main").append("<a id='closePlayer' title='Close Player'>X</a>");
                         $("#playbar").remove();
                         $(".ui-resizable-handle").remove();
                         $("#main_components").remove();
@@ -565,6 +564,7 @@ var Channel = {
                         $("#player").css("opacity", "1");
                         $("#video-container").removeClass("no-opacity");
                         $("#main-row").prepend("<div id='player_bottom_overlay' title='To Channel' class='player player_bottom'></div>");
+                        $("#player_bottom_overlay").append("<a id='closePlayer' title='Close Player'>X</a>");
                         $("#playlist").remove();
                     } else {
                         try{