Merge pull request #594 from tf/classic-player-controls-configurability

Improve classic player controls configurability
codevise · Aug 17, 2016 · 7c1df48 · 7c1df48
2 parents 3d4b523 + f36bd8f
commit 7c1df48
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 24 deletions.
diff --git a/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/control_bar.scss b/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/control_bar.scss
@@ -11,6 +11,15 @@ $classic-player-controls-border-color: #505050 !default;
 /// Color of the vertical separator right from the play button.
 $classic-player-controls-separator-color: $classic-player-controls-border-color !default;
 
+/// Width of the border around control bar
+$classic-player-controls-border-width: 3px !default;
+
+/// Width of the border between play button and progress bar
+$classic-player-controls-separator-border-width: 2px !default;
+
+/// Font size of control bar text, current time and duration.
+$classic-player-controls-font-size: 15px !default;
+
 /// Color of control bar text, current time and duration.
 $classic-player-controls-text-color: #ddd !default;
 
@@ -30,6 +39,13 @@ $classic-player-controls-progress-bar-border-radius: 4px !default;
 /// positioning of the handle when sprite images are used.
 $classic-player-controls-handle-width: 24px !default;
 
+/// Position of current time and duration.
+///
+/// - `"right"`: Both on the right separated by a slash.
+///
+/// - `"split"`: Left and right of the progress bar.
+$classic-player-controls-timestamp-position: "left" !default;
+
 %player_controls {
   &-control_bar {
     position: absolute;
@@ -43,7 +59,7 @@ $classic-player-controls-handle-width: 24px !default;
     height: 60px;
 
     background-color: $classic-player-controls-background-color;
-    border: 3px solid $classic-player-controls-border-color;
+    border: $classic-player-controls-border-width solid $classic-player-controls-border-color;
     pointer-events: all;
 
     &:before {
@@ -53,7 +69,7 @@ $classic-player-controls-handle-width: 24px !default;
       left: 64px;
       width: 0;
       height: 60px;
-      border-right: 2px solid $classic-player-controls-separator-color;
+      border-right: $classic-player-controls-separator-border-width solid $classic-player-controls-separator-color;
     }
 
     @include phone {
@@ -114,8 +130,6 @@ $classic-player-controls-handle-width: 24px !default;
 
   &-progress_bar {
     position: absolute;
-    left: 90px;
-    right: 114px;
     top: 25px;
     width: auto;
     height: 9px;
@@ -161,25 +175,11 @@ $classic-player-controls-handle-width: 24px !default;
   &-duration {
     position: relative;
     line-height: 3em;
-    font-size: 15px;
+    font-size: $classic-player-controls-font-size;
     margin-top: 7px;
     color: $classic-player-controls-text-color;
   }
 
-  &-current_time {
-    left: 276px;
-  }
-
-  &-time_separator {
-    float: left;
-    height: 3em;
-    left: 268px;
-  }
-
-  &-duration {
-    left: 260px;
-  }
-
   &-loading_spinner {
     position: absolute;
     top: 30px;
@@ -211,3 +211,12 @@ $classic-player-controls-handle-width: 24px !default;
     }
   }
 }
+
+@import "./control_bar/timestamp_position/right";
+@import "./control_bar/timestamp_position/split";
+
+@if $classic-player-controls-timestamp-position == "split" {
+  @include player-controls-classic-controls-bar-timestamps-position-split;
+} @else {
+  @include player-controls-classic-controls-bar-timestamps-position-right;
+}
diff --git a/...pageflow/themes/default/player_controls/classic/control_bar/timestamp_position/right.scss b/...pageflow/themes/default/player_controls/classic/control_bar/timestamp_position/right.scss
@@ -0,0 +1,22 @@
+@mixin player-controls-classic-controls-bar-timestamps-position-right {
+  %player_controls {
+    &-progress_bar {
+      left: 90px;
+      right: 114px;
+    }
+
+    &-current_time {
+      left: 276px;
+    }
+
+    &-time_separator {
+      float: left;
+      height: 3em;
+      left: 268px;
+    }
+
+    &-duration {
+      left: 260px;
+    }
+  }
+}
diff --git a/...pageflow/themes/default/player_controls/classic/control_bar/timestamp_position/split.scss b/...pageflow/themes/default/player_controls/classic/control_bar/timestamp_position/split.scss
@@ -0,0 +1,22 @@
+@mixin player-controls-classic-controls-bar-timestamps-position-split {
+  %player_controls {
+    &-progress_bar {
+      left: 137px;
+      right: 66px;
+    }
+
+    &-current_time {
+      left: 11px;
+      text-align: right;
+    }
+
+    &-time_separator {
+      display: none;
+    }
+
+    &-duration {
+      left: 277px;
+      text-align: left;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/info_box.scss b/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/info_box.scss
@@ -63,12 +63,12 @@ $classic-player-controls-info-box-border-radius: 4px !default;
     &:before {
       content: "";
       position: absolute;
-      left: -3px;
+      left: -$classic-player-controls-border-width;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: $classic-player-controls-info-box-background-color;
-      border: solid 3px transparent;
+      border: solid $classic-player-controls-border-width transparent;
       z-index: -1;
 
       border-top-left-radius: $classic-player-controls-info-box-border-radius;
@@ -78,16 +78,17 @@ $classic-player-controls-info-box-border-radius: 4px !default;
 
   .js &-info_box {
     pointer-events: none;
-    margin: 0 0 54px 0;
+    margin: 0;
+    margin-bottom: 60px + $classic-player-controls-border-width * 2;
     width: 434px;
-    bottom: 9px;
-    margin-bottom: 63px;
+    bottom: $classic-player-controls-border-width * 2;
     position: absolute;
     left: 50%;
     @include transform(translate3d(-50%, 0, 0));
     z-index: 2;
 
     @include phone {
+      bottom: 0;
       position: relative;
       padding: 1px;
       margin-bottom: 0;