fix(FEC-7225): media queries drop in favor of top player size class (#71

)
kaltura · Oct 3, 2017 · 97fa361 · 97fa361
1 parent 413f8f3
commit 97fa361
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 13 deletions.
diff --git a/src/components/bottom-bar/_bottom-bar.scss b/src/components/bottom-bar/_bottom-bar.scss
@@ -42,8 +42,12 @@
   opacity: 0;
 }
 
-@media screen and (max-width: 480px) {
-  .player .bottom-bar {
+.player.size-sm {
+  .bottom-bar {
     padding: 6px 8px;
+
+    .time-display {
+      padding-left: 0;
+    }
   }
 }
diff --git a/src/components/cvaa-overlay/_cvaa-overlay.scss b/src/components/cvaa-overlay/_cvaa-overlay.scss
@@ -41,7 +41,7 @@
   }
 }
 
-@media screen and (max-width: 480px) {
+.player.size-sm {
   .overlay.cvaa-overlay {
     .sample {
       width: 30%;

diff --git a/src/components/live-tag/_live-tag.scss b/src/components/live-tag/_live-tag.scss
@@ -23,7 +23,7 @@
   }
 }
 
-@media screen and (max-width: 480px) {
+.player.size-sm {
   .live-tag {
     margin-left: 0;
   }

diff --git a/src/components/overlay/_overlay.scss b/src/components/overlay/_overlay.scss
@@ -56,7 +56,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+.player.size-md {
   .overlay {
     .overlay-contents {
       padding: 36px 20px;
@@ -71,7 +71,7 @@
   }
 }
 
-@media screen and (max-width: 480px) {
+.player.size-sm {
   .overlay {
     .overlay-contents {
       padding: 16px 24px;

diff --git a/src/components/play-pause/_play-pause.scss b/src/components/play-pause/_play-pause.scss
@@ -32,7 +32,7 @@
   }
 }
 
-@media screen and (max-width: 480px) {
+.player.size-sm {
   .control-button-container.control-play-pause {
     display: none;
   }

diff --git a/src/components/play-pause/play-pause.js b/src/components/play-pause/play-pause.js
@@ -66,7 +66,7 @@ class PlayPauseControl extends BaseComponent {
    * @returns {React$Element} - component element
    * @memberof PlayPauseControl
    */
-  render(props: any): React$Element<any> {
+  render(props: any): React$Element<any> | void {
     var controlButtonClass = this.isPlayingAdOrPlayback() ? 'control-button is-playing' : 'control-button';
 
     return (

diff --git a/src/components/seekbar/_seekbar.scss b/src/components/seekbar/_seekbar.scss
@@ -120,7 +120,7 @@
   }
 }
 
-@media screen and (max-width: 480px) {
+.player.size-sm {
   .virtual-progress, .time-preview, .frame-preview {
     display: none;
   }

diff --git a/src/components/share-overlay/_share-overlay.scss b/src/components/share-overlay/_share-overlay.scss
@@ -84,15 +84,15 @@
   transform: scale(1.1667);
 }
 
-@media screen and (max-width: 768px) {
+.player.size-md {
   .overlay.share-overlay {
     .share-icons {
       margin: 40px 0;
     }
   }
 }
 
-@media screen and (max-width: 480px) {
+.player.size-sm {
   .overlay.share-overlay {
     .share-icons {
       margin: 20px 0;

diff --git a/src/components/shell/shell.js b/src/components/shell/shell.js
@@ -135,6 +135,8 @@ class Shell extends BaseComponent {
     if (this.props.metadataLoaded) playerClasses += ` metadata-loaded`;
     if (this.props.adBreak) playerClasses += ` ad-break`;
     if (this.props.metadataLoaded) playerClasses += ` state-${this.props.currentState}`;
+    if (this.props.playerWidth <= 480) playerClasses += ' size-sm';
+    else if (this.props.playerWidth <= 768) playerClasses += ' size-md';
 
     return (
       <div

diff --git a/src/components/time-display/_time-display.scss b/src/components/time-display/_time-display.scss
@@ -11,7 +11,7 @@
   padding-left: 0;
 }
 
-@media screen and (max-width: 480px) {
+.player.size-sm {
   .player .time-display {
     padding: 0 12px 0 0;
   }

diff --git a/src/components/top-bar/_top-bar.scss b/src/components/top-bar/_top-bar.scss
@@ -38,7 +38,7 @@
   opacity: 0;
 }
 
-@media screen and (max-width: 480px) {
+.player.size-sm {
   .player .top-bar {
     padding: 8px 8px 20px 8px;
   }