Add minimal styling for smaller player

Author: chrisboustead

package.json

@@ -1,6 +1,6 @@
 {
   "name": "videojs-social-share-overlay",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Social share overlay for videojs",
   "main": "dist/videojs-social-share-overlay.cjs.js",
   "module": "dist/videojs-social-share-overlay.es.js",

src/plugin.js

@@ -166,17 +166,24 @@ class SocialShareOverlayPlugin {
   }
 
   showShareOverlay() {
+    const height = this.player.el().offsetHeight;
+
     this.onSharePausedState = this.player.paused();
     this.player.pause();
     this.player.addClass("vjs-social-share-overlay-open");
     this.player.trigger('share-overlay-open');
+
+    if(height < 280) {
+      this.player.addClass("vjs-social-share-overlay-minimal")
+    }
   }
 
   hideShareOverlay() {
     if(!this.onSharePausedState){
       this.player.play();
     }
     this.player.removeClass("vjs-social-share-overlay-open");
+    this.player.removeClass("vjs-social-share-overlay-minimal");
     this.player.trigger('share-overlay-closed');
   }
 

src/plugin.scss

@@ -51,6 +51,7 @@
       .vjs-share-overlay-controls {
         flex: none;
         max-width: 280px;
+        min-width: 250px;
         width: 50%;
       }
 
@@ -145,5 +146,12 @@
       }
 
     }
+    &.vjs-social-share-overlay.vjs-social-share-overlay-minimal {
+      .vjs-share-overlay {
+        .vjs-share-overlay-footer {
+          display: none;
+        }
+      }
+    }
   }
 }