pageflow 0.11.4 → 12.0.0.rc1

data/app/assets/stylesheets/pageflow/themes/default/logo.scss

@@ -14,6 +14,9 @@ $logo-variant: "first-page" !default;
 /// Top position of logo.
 $logo-top: 30px !default;
 
+/// Height of the logo. (Non-watermark variants only)
+$logo-phone-top: nil !default;
+
 /// Width of the logo. (Watermark variant only)
 $logo-width: 100px !default;
 
@@ -29,6 +32,9 @@ $logo-max-width: 221px !default;
 /// Height of the logo.
 $logo-height: 50px !default;
 
+/// Height of the logo. (Non-watermark variants only)
+$logo-mobile-height: 35px !default;
+
 /// Height of the logo in phone layout. (Watermark variant only)
 $logo-phone-height: 24px !default;
 
@@ -49,6 +55,8 @@ $logo-phone-height: 24px !default;
     $min-width: $logo-min-width,
     $max-width: $logo-max-width,
     $width: $logo-relative-width,
-    $height: $logo-height
+    $height: $logo-height,
+    $mobile-height: $logo-mobile-height,
+    $phone-top: $logo-phone-top
   );
 }

data/app/assets/stylesheets/pageflow/themes/default/logo/variant/background_image.scss

@@ -4,7 +4,9 @@
   $min-width,
   $max-width,
   $width,
-  $height
+  $height,
+  $mobile-height,
+  $phone-top
 ) {
   $page-selector: if($first-page-only, ":first-child", "");
 
@@ -26,7 +28,11 @@
 
       @include mobile {
         padding-top: 1%;
-        height: 35px;
+        height: $mobile-height;
+      }
+
+      @include phone {
+        top: $phone-top;
       }
     }
 

data/app/assets/stylesheets/pageflow/themes/default/logo/variant/watermark.scss

@@ -5,6 +5,11 @@
 /// - `"all-pages"`: on all pages
 $logo-watermark-variant-fade-in-near-top: "first-page" !default;
 
+/// Fade in logo when header is active. If the header logo is
+/// inverted on the current page, the non-inverted logo variant
+/// is displayed while the header is active.
+$logo-watermark-variant-fade-in-with-header: false !default;
+
 @mixin logo-variant-watermark(
   $top,
   $width,
@@ -84,6 +89,22 @@ $logo-watermark-variant-fade-in-near-top: "first-page" !default;
     }
   }
 
+  @if $logo-watermark-variant-fade-in-with-header {
+    .header {
+      &.active .header_logo {
+        opacity: 1;
+      }
+
+      &.invert.active .header_logo:before {
+        opacity: 1;
+      }
+
+      &.invert.active .header_logo:after {
+        opacity: 0;
+      }
+    }
+  }
+
   .header.near_top .header_logo:hover {
     opacity: 1;
   }

data/app/assets/stylesheets/pageflow/themes/default/mixins/cue_margins.scss

@@ -0,0 +1,43 @@
+@mixin cue-margins($controls-offset: 0) {
+  .vjs-text-track-display {
+    bottom: $controls-offset;
+  }
+
+  .is_control_bar_hidden .vjs-text-track-display {
+    bottom: 0;
+  }
+
+  @for $i from 1 through 20 {
+    $size: 10px * $i;
+
+    .cue_margin_left_#{$i} {
+      .vjs-text-track-display {
+        left: $size;
+      }
+    }
+
+    .cue_margin_right_#{$i} {
+      .vjs-text-track-display {
+        right: $size;
+      }
+    }
+
+    .cue_margin_top_#{$i} {
+      .vjs-text-track-display {
+        top: $size;
+      }
+    }
+
+    .cue_margin_bottom_#{$i} {
+      .vjs-text-track-display {
+        bottom: $size + $controls-offset;
+      }
+    }
+
+    .is_control_bar_hidden .cue_margin_bottom_#{$i} {
+      .vjs-text-track-display {
+        bottom: $size;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/mixins/indicator_typography.scss

@@ -8,9 +8,9 @@ $indicator-typography: () !default;
 /// Typography of indicators on phone.
 $indicator-phone-typography: () !default;
 
-@mixin indicator-typography {
+@mixin indicator-typography($overrides: (), $desktop-overrides: (), $phone-overrides: ()) {
   @include standard-typography(
-    $indicator-typography,
+    map-merge($indicator-typography, $overrides),
     (
       font-size: 0.92em,
       letter-spacing: 0.2em,
@@ -18,9 +18,13 @@ $indicator-phone-typography: () !default;
     )
   );
 
+  @include desktop {
+    @include typography($desktop-overrides);
+  }
+
   @include phone {
     @include standard-typography(
-      $indicator-phone-typography,
+      map-merge($indicator-phone-typography, $phone-overrides),
       (
         font-size: 0.8em,
         letter-spacing: 0.1em,

data/app/assets/stylesheets/pageflow/themes/default/page.scss

@@ -5,6 +5,18 @@
 /// Base typography for page.
 $page-typography: () !default;
 
+/// Space for logo on first page.
+$page-scroller-first-page-padding-top: nil !default;
+
+/// Space for logo on first page in mobile layout.
+$page-scroller-first-page-mobile-padding-top: 110px !default;
+
+/// Space for logo on first page in mobile landscape layout.
+$page-scroller-first-page-mobile-landscape-padding-top: 100px !default;
+
+/// Space for logo on first page in phone layout.
+$page-scroller-first-page-phone-padding-top: nil !default;
+
 /// Typography for header.
 $page-header-typography: () !default;
 
@@ -205,14 +217,20 @@ $page-content-text-line-height: 1.5em !default;
 .js .page:first-child {
   .scroller > div,
   .content_and_background > .page_header {
+    padding-top: $page-scroller-first-page-padding-top;
+
     @include mobile {
-      padding: 110px 12% 5% 8%;
+      padding-top: $page-scroller-first-page-mobile-padding-top;
       width: 100%;
 
       @media (orientation: landscape) {
-        padding: 100px 12% 5% 8%;
+        padding-top: $page-scroller-first-page-mobile-landscape-padding-top;
       }
     }
+
+    @include phone {
+      padding-top: $page-scroller-first-page-phone-padding-top;
+    }
   }
 
   h2 .title {

data/app/assets/stylesheets/pageflow/themes/default/player_controls.scss

@@ -3,17 +3,21 @@ $player-controls-typography: () !default;
 // Prevent unstyled player controls from being displayed inside editor
 // while widget presence css classes have not yet been set:
 
+.player_controls-menu_bar,
 %player_controls-container {
   display: none;
 }
 
 .widget_slim_player_controls_present,
 .widget_classic_player_controls_present {
+  .player_controls-menu_bar,
   %player_controls-container {
     display: block;
   }
 }
 
+@import "./player_controls/shared/menu_bar";
+
 // Define placeholders scoped by widget presence css class:
 
 .widget_classic_player_controls_present {

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic.scss

@@ -23,10 +23,14 @@ $classic-player-controls-images: "default" !default;
 @import "./classic/control_bar";
 @import "./classic/info_box";
 @import "./classic/close_button";
+@import "./classic/menu_bar";
+@import "./classic/cue_margins";
 
 @import "./classic/icons/icon_font";
 @import "./classic/icons/sprite";
 
+@import "./classic/icons/custom";
+
 @if $classic-player-controls-icons == "sprite" {
   @include player-controls-classic-icons-sprite;
 } @else {

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/container.scss

@@ -8,14 +8,20 @@ $classic-player-controls-typography: $player-controls-typography !default;
 %player_controls {
   &-container {
     position: absolute;
-    bottom: 10%;
-    left: 50%;
     z-index: 2;
     pointer-events: none;
     @include transition(opacity 0.1);
     @include standard-typography($classic-player-controls-typography);
 
+    @include desktop {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: 10%;
+    }
+
     @include phone {
+      bottom: 10%;
       left: 5%;
       max-width: 90%;
 
@@ -28,10 +34,6 @@ $classic-player-controls-typography: $player-controls-typography !default;
       bottom: 50px;
     }
 
-    a {
-      pointer-events: all;
-    }
-
     &-idle {
       @include transition-duration(1.5s);
       @include transition-delay(1s);

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/control_bar.scss

@@ -50,7 +50,7 @@ $classic-player-controls-timestamp-position: "left" !default;
   &-control_bar {
     position: absolute;
     left: 50%;
-    bottom: 0;
+    bottom: 100%;
     @include transform(translate3d(-50%, 0, 0));
     z-index: 2;
 
@@ -85,8 +85,6 @@ $classic-player-controls-timestamp-position: "left" !default;
 
       background: none;
       border: none;
-
-      pointer-events: all;
     }
   }
 
@@ -186,6 +184,10 @@ $classic-player-controls-timestamp-position: "left" !default;
     left: 31px;
     opacity: 1;
     @include animation(rotate 1.5s infinite linear);
+
+    svg {
+      display: none;
+    }
   }
 
   &-loading_spinner-on_underrun {
@@ -203,6 +205,19 @@ $classic-player-controls-timestamp-position: "left" !default;
     &-control_bar:before {
       display: none;
     }
+
+    &-menu_bar {
+      @include transition(opacity 0.2s linear, visibility 0.2s linear);
+      position: fixed;
+    }
+
+    &-container-paused {
+      %player_controls-menu_bar {
+        opacity: 0;
+        visibility: hidden;
+        @include transition-delay(0.2s);
+      }
+    }
   }
 
   &-page_with_progress_bar {

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/cue_margins.scss

@@ -0,0 +1 @@
+@include cue-margins;

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/icons/custom.scss

@@ -0,0 +1,14 @@
+/// Color of of the custom icon displayed inside the play button.
+$classic-player-controls-custom-play-button-icon-color: #000 !default;
+
+%player_controls-play_button-custom_icon {
+  svg {
+    fill: $classic-player-controls-custom-play-button-icon-color;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    @include transform(translate(-50%, -50%));
+    width: 27px;
+    height: 27px;
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/icons/icon_font.scss

@@ -48,6 +48,10 @@
       }
     }
 
+    &-play_button-custom_icon:before {
+      display: none;
+    }
+
     &-progress_bar_handle {
       @include background-icon-center($color: $progress-bar-handle-icon-color, $font-size: 23px);
       @include fa-reorder-icon;

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/icons/sprite.scss

@@ -37,6 +37,10 @@
       }
     }
 
+    &-play_button-custom_icon {
+      background-image: image-url("#{$dir}/player_controls_sprite_custom.png");
+    }
+
     &-progress_bar_handle {
       background-position: center -240px;
     }

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/info_box.scss

@@ -79,9 +79,9 @@ $classic-player-controls-info-box-border-radius: 4px !default;
   .js &-info_box {
     pointer-events: none;
     margin: 0;
-    margin-bottom: 60px + $classic-player-controls-border-width * 2;
+    margin-bottom: 60px + $classic-player-controls-border-width * 4;
     width: 434px;
-    bottom: $classic-player-controls-border-width * 2;
+    bottom: 100%;
     position: absolute;
     left: 50%;
     @include transform(translate3d(-50%, 0, 0));

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/menu_bar.scss

@@ -0,0 +1,5 @@
+.player_controls {
+  &-menu_bar {
+    right: 10px;
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/player_controls/shared/menu_bar.scss

@@ -0,0 +1,121 @@
+$player-controls-menu-icon-color: #fff !default;
+
+$player-controls-menu-popup-background-color: rgba(17, 17, 17, 0.9) !default;
+
+$player-controls-menu-popup-link-color: #fff !default;
+
+$player-controls-menu-item-active-background-color: rgba(200, 200, 200, 0.8) !default;
+
+$player-controls-quality-menu-annotation-color: #ff0000 !default;
+
+.player_controls {
+  &-menu_bar {
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+    pointer-events: all;
+
+    @include transition(opacity 0.5s, visibility 0.5s);
+
+    .has_native_video_player %player_controls-container-video & {
+      display: none;
+    }
+  }
+
+  &-menu_bar-stand_alone {
+    right: 20px;
+    bottom: 5px;
+  }
+
+  &-menu_bar-hidden_on_phone {
+    @include phone {
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+
+  &-menu_bar_button {
+    display: inline-block;
+    position: relative;
+    bottom: 0;
+    right: 0;
+    width: 40px;
+    height: 40px;
+    margin-right: 10px;
+  }
+
+  &-menu_bar_button_link {
+    display: block;
+    height: 100%;
+  }
+
+  &-menu_bar_button_icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    @include transform(translate(-50%, -50%));
+    @include transition(transform 0.3s ease);
+    width: 25px;
+    height: 25px;
+
+    fill: $player-controls-menu-icon-color;
+  }
+
+  &-menu_bar_button-sub_menu_visible .player_controls-quality_menu_button_icon {
+    @include transform(translate(-50%, -50%) rotate(40deg));
+  }
+
+  &-menu_bar_button_sub_menu_item_annotation {
+    color: $player-controls-quality-menu-annotation-color;
+    font-size: 70%;
+    vertical-align: 5px;
+    padding-left: 3px;
+  }
+
+  &-menu_bar_button_sub_menu {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    @include transition(opacity 0.5s, visibility 0.5s);
+
+    position: absolute;
+    right: 0;
+    bottom: 40px;
+    margin: 0;
+    padding: 5px;
+
+    background-color: $player-controls-menu-popup-background-color;
+    border-radius: 2px;
+  }
+
+  &-menu_bar_button-sub_menu_visible .player_controls-menu_bar_button_sub_menu {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: all;
+    @include transition(none);
+  }
+
+  &-menu_bar_button_sub_menu_item {
+    position: relative;
+    list-style: none;
+  }
+
+  &-menu_bar_button_sub_menu_item_icon {
+    position: absolute;
+    top: 8px;
+    left: 5px;
+    width: 12px;
+    height: 12px;
+
+    fill: $player-controls-menu-popup-link-color;
+  }
+
+  &-menu_bar_button_sub_menu_item_link {
+    display: block;
+    padding: 5px 10px 5px 25px;
+    color: $player-controls-menu-popup-link-color;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+}