Merge pull request #308 from zoff-music/feature/prettier-PiP

Feature/prettier pi p

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;

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{

server/public/assets/js/listeners.js

@@ -1134,7 +1134,8 @@ $(document).on("click", ".brand-logo-navigate", function(e){
     Channel.onepage_load();
 });
 
-$(document).on("click", "#player_bottom_overlay", function(){
+$(document).on("click", "#player_bottom_overlay", function(e){
+    if($(e.target).attr("id") == "closePlayer")) return;
     Frontpage.to_channel(chan.toLowerCase(), false);
 });