Merge pull request #113 from cloudinary/APPS-363-floating-player-ui

APPS-363 Floating player UI tweaks

Author: tsi

src/assets/styles/main.scss

@@ -131,8 +131,7 @@ $icon-font-path: '../fonts' !default;
 
     left: 50%;
     top: 50%;
-    margin-left: -($big-play-width / 2);
-    margin-top: -($big-play-height / 2);
+    transform: translateX(-50%) translateY(-50%);
   }
 
   &.vjs-paused .vjs-big-play-button,

src/plugins/colors/index.js

@@ -81,6 +81,10 @@ const playerColors = `
   .PLAYER-CLASS-PREFIX .cld-plw-panel-item {
     border-color: --text-color;
   }
+
+  .PLAYER-CLASS-PREFIX .cld-video-player-floater-close polygon {
+    fill: --base-color;
+  }
 `;
 
 const darkOnlyColors = `

src/plugins/floating-player/floating-player.scss

@@ -12,7 +12,7 @@
     position: fixed;
     z-index: 9;
     border: 4px solid #fff;
-    box-shadow: 0 0 10px rgba(#000, .3);
+    box-shadow: 0 3px 10px rgba(#000, .2);
 
     .cld-video-player-floater-inner {
       height: 0;
@@ -22,14 +22,24 @@
     .cld-video-player-floater-close {
       position: absolute;
       bottom: 100%;
-      color: #999;
       background: #fff;
-      border: 1px solid #e6e6e6;
       border-bottom: none;
       margin-bottom: 4px;
+      right: -4px;
       padding: 4px 6px 2px;
       display: block;
+      box-shadow: 0 0 4px rgba(#000, .05);
       cursor: pointer;
+      // Hide bottom shadow
+      &::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        right: 0;
+        width: 120%;
+        height: 4px;
+        background: #fff;
+      }
     }
 
     .vjs-time-control,
@@ -41,24 +51,23 @@
       background-color: transparent;
     }
 
+    .vjs-big-play-button {
+      font-size: 4em;
+      top: 40%;
+    }
+
     &.cld-video-player-floater-bottom-right {
       bottom: 20px !important;
       right: 20px !important;
       top: auto !important;
       left: auto !important;
-      .cld-video-player-floater-close {
-        right: 0;
-      }
     }
 
     &.cld-video-player-floater-bottom-left {
       bottom: 20px !important;
       left: 20px !important;
       top: auto !important;
       right: auto !important;
-      .cld-video-player-floater-close {
-        left: 0;
-      }
     }
 
   }

src/plugins/floating-player/index.js

@@ -81,7 +81,7 @@ class FloatingPlayer {
 
         const close = document.createElement('button');
         close.setAttribute('class', 'cld-video-player-floater-close');
-        close.innerHTML = 'X';
+        close.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><polygon fill-rule="evenodd" points="370 7.41 368.59 6 364 10.59 359.41 6 358 7.41 362.59 12 358 16.59 359.41 18 364 13.41 368.59 18 370 16.59 365.41 12" transform="translate(-358 -6)"/></svg>';
         close.onclick = () => {
           unfloat();
           disable();