pageflow 0.11.4 → 12.0.0.rc1

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

@@ -1,8 +1,10 @@
 @import "./slim/container";
 @import "./slim/control_bar";
+@import "./slim/menu_bar";
 @import "./slim/info_box";
 @import "./slim/close_button";
 @import "./slim/scroller";
+@import "./slim/cue_margins";
 
 %player_controls-container {
   @include phone {

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

@@ -42,6 +42,8 @@ $slim-player-controls-typography: $player-controls-typography !default;
     visibility: hidden;
   }
 
+  .enable_focus_outline &-container-focused,
+  .enable_focus_outline &-background-focused::after,
   &-container-hover,
   &-background-hover::after {
     opacity: 1;

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

@@ -17,6 +17,15 @@ $slim-player-controls-progress-bar-color: $main-color !default;
 /// Color of the part of the progress bar indicating the load progress.
 $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2) !default;
 
+/// Typography for text displayed next to play button
+$slim-player-controls-control-bar-text-typography: () !default;
+
+/// Typography for text displayed next to play button in desktop layout
+$slim-player-controls-control-bar-text-desktop-typography: () !default;
+
+/// Typography for text displayed next to play button in phone layout
+$slim-player-controls-control-bar-text-phone-typography: () !default;
+
 %player_controls {
   &-control_bar {
     position: absolute;
@@ -31,6 +40,15 @@ $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2)
 
     @include phone {
       z-index: 2;
+
+      &.with_quality_menu_present,
+      &.with_text_tracks_menu_present {
+        padding-right: 60px;
+      }
+
+      &.with_quality_menu_present.with_text_tracks_menu_present {
+        padding-right: 110px;
+      }
     }
   }
 
@@ -50,7 +68,11 @@ $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2)
     color: $slim-player-controls-color;
     text-shadow: 1px 1px 4px $indicator-text-shadow-color;
 
-    @include indicator-typography;
+    @include indicator-typography(
+      $overrides: $slim-player-controls-control-bar-text-typography,
+      $phone-overrides: $slim-player-controls-control-bar-text-phone-typography,
+      $desktop-overrides: $slim-player-controls-control-bar-text-desktop-typography
+    );
 
     @include phone {
       left: 50px;
@@ -78,14 +100,28 @@ $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2)
     z-index: 1;
   }
 
+  &-play_button-custom_icon {
+    &:before {
+      display: none;
+    }
+
+    svg {
+      fill: $slim-player-controls-color;
+      position: absolute;
+      left: 7px;
+      top: 50%;
+      @include transform(translateY(-50%));
+      width: 25px;
+      height: 25px;
+    }
+  }
+
   &-play_button-playing {
     @include background-icon-position($left: 20px);
     @include fa-pause-icon;
   }
 
   &-loading_spinner {
-    @include background-icon-center($color: $slim-player-controls-loading-spinner-color, $font-size: 36px);
-    @include fa-circle-o-notch-icon;
     @include animation(rotate_and_blink 0.5s linear infinite);
 
     position: absolute;
@@ -93,6 +129,15 @@ $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2)
     height: 60px;
     left: -5px;
     bottom: -4px;
+
+    svg {
+      fill: $slim-player-controls-loading-spinner-color;
+      position: absolute;
+      left: 12px;
+      top: 12px;
+      width: 36px;
+      height: 36px;
+    }
   }
 
   &-loading_spinner-on_underrun {
@@ -108,15 +153,21 @@ $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2)
     display: none;
   }
 
+  &-progress {
+    position: relative;
+  }
+
   &-progress_bar {
     position: absolute;
-    bottom: 55px;
-    left: 16px;
-    right: 20px;
+    bottom: 40px;
+    left: -4px;
+    right: 0;
     height: 20px;
 
     @include phone {
-      display: none;
+      bottom: 0;
+      left: 30px;
+      right: 80px;
     }
 
     &:before {
@@ -135,7 +186,7 @@ $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2)
   &-load_progress {
     position: absolute;
     left: 0;
-    top: 10px;
+    top: 8px;
     height: 3px;
   }
 
@@ -150,7 +201,7 @@ $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2)
   &-progress_bar_handle {
     position: absolute;
     left: 0;
-    top: 11px;
+    top: 9px;
     width: 0;
     height: 0;
     @include transform(scale(0));
@@ -172,7 +223,7 @@ $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2)
     %player_controls-progress_bar:before,
     %player_controls-play_progress,
     %player_controls-load_progress {
-      top: 9px;
+      top: 7px;
       height: 5px;
     }
 
@@ -206,17 +257,28 @@ $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2)
   &-time_separator,
   &-duration,
   &-skip_button,
-  &-loading_spinner {
+  &-menu_bar {
     @include transition(opacity 0.2s linear, visibility 0.2s linear);
   }
 
+  .has_native_video_player &-container-video {
+    %player_controls-progress_bar,
+    %player_controls-current_time,
+    %player_controls-time_separator,
+    %player_controls-duration,
+    %player_controls-skip_button,
+    %player_controls-menu_bar {
+      display: none;
+    }
+  }
+
   &-container-paused {
     %player_controls-progress_bar,
     %player_controls-current_time,
     %player_controls-time_separator,
     %player_controls-duration,
     %player_controls-skip_button,
-    %player_controls-loading_spinner {
+    %player_controls-menu_bar {
       opacity: 0;
       visibility: hidden;
       @include transition-delay(0.2s);

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

@@ -0,0 +1,3 @@
+@include cue-margins(
+  $controls-offset: 80px
+);

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

@@ -71,7 +71,6 @@ $slim-player-controls-info-box-header-typography: () !default;
 
   .js &-info_box {
     @include transition(opacity 0.2s linear, visibility 0.2s linear, transform 0.2s ease);
-    @include transition-delay(0.2s);
     pointer-events: none;
 
     position: absolute;
@@ -80,6 +79,7 @@ $slim-player-controls-info-box-header-typography: () !default;
     z-index: 2;
 
     @include desktop {
+      @include transition-delay(0.2s);
       width: 100%;
       max-width: 700px;
       bottom: 80px;
@@ -96,17 +96,43 @@ $slim-player-controls-info-box-header-typography: () !default;
     }
   }
 
-  .js &-container-has_been_faded %player_controls-info_box {
+  @mixin faded {
     opacity: 0;
     visibility: hidden;
     @include transform(translate3d(-50%, 10px, 0));
   }
 
-  .js &-container:hover %player_controls-info_box,
-  .js &-container-paused %player_controls-info_box {
-    @include transition-delay(0);
+  @mixin visible {
     opacity: 1;
     visibility: visible;
     @include transform(translate3d(-50%, 0, 0));
   }
+
+  @include desktop {
+    .js &-container-has_been_faded %player_controls-info_box {
+      @include faded;
+    }
+
+    .js &-container:hover %player_controls-info_box,
+    .js &-container-paused %player_controls-info_box {
+      @include transition-delay(0);
+      @include visible;
+    }
+  }
+
+  @include phone {
+    .js.has_no_native_video_player &-container-fading %player_controls-info_box {
+      @include faded;
+    }
+
+    .js.has_no_native_video_player &-container-paused %player_controls-info_box {
+      @include visible;
+    }
+  }
+}
+
+&.widget_classic_player_controls_replaced {
+  %player_controls-info_box {
+    display: none;
+  }
 }

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

@@ -0,0 +1,13 @@
+.player_controls {
+  &-menu_bar {
+    right: 90px;
+
+    @include phone {
+      right: 0;
+    }
+  }
+
+  &-menu_bar-stand_alone {
+    right: 20px;
+  }
+}

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

@@ -0,0 +1,116 @@
+$slim-player-controls-menu-popup-background-color: rgba(17, 17, 17, 0.9) !default;
+
+$slim-player-controls-menu-popup-link-color: $slim-player-controls-color !default;
+
+$slim-player-controls-menu-item-active-background-color: rgba(200, 200, 200, 0.8) !default;
+
+$slim-player-controls-quality-menu-annotation-color: #ff0000 !default;
+
+.player_controls {
+  &-menu_bar {
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+    z-index: 10;
+    pointer-events: all;
+
+    @include transition(opacity 0.5s, visibility 0.5s);
+  }
+
+  &-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: $slim-player-controls-color;
+  }
+
+  &-menu_bar_button-sub_menu_visible .player_controls-quality_menu_button_icon {
+    @include transform(translate(-50%, -50%) rotate(40deg));
+  }
+
+  &-quality_menu_button_sub_menu_item_annotation {
+    color: $slim-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: $slim-player-controls-menu-popup-background-color;
+    border-radius: 2px;
+    text-align: right;
+  }
+
+  &-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: $slim-player-controls-color;
+  }
+
+  &-menu_bar_button_sub_menu_item_link {
+    display: block;
+    padding: 5px 10px 5px 25px;
+    color: $slim-player-controls-menu-popup-link-color;
+    text-decoration: none;
+  }
+}

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

@@ -3,11 +3,12 @@
 $vjs-selector-mapping: (
   page_with_progress_bar: ".audioPage, .videoPage",
 
-  background: ".videoWrapper, .audioPage .backgroundArea",
+  background: ".page_background-for_page_with_player_controls",
 
-  background-idle: ".is_idle .videoWrapper, .audioPage.is_idle .backgroundArea",
+  background-idle: ".is_idle .page_background-for_page_with_player_controls",
 
-  background-hover: ".is_control_bar_hovered .videoWrapper, .audioPage.is_control_bar_hovered .backgroundArea",
+  background-hover: ".is_control_bar_hovered .page_background-for_page_with_player_controls",
+  background-focused: ".is_control_bar_focused .page_background-for_page_with_player_controls",
 
   // Use playing class that is removed with delay to prevent
   // mask image on scroller from being removed too early in slim
@@ -27,6 +28,7 @@ $vjs-selector-mapping: (
   container-idle: ".is_idle .controls",
 
   container-hover: ".is_control_bar_hovered .controls",
+  container-focused: ".is_control_bar_focused .controls",
 
   // `has_been_faded` is set by the video page type after the user has
   // become inactive for the first time during video playback.
@@ -39,6 +41,9 @@ $vjs-selector-mapping: (
   // cursor leaves the control bar again.
   container-has_been_faded: ".controls.has_been_faded",
 
+  container-video: ".videoPage .controls",
+  container-fading: ".videoPage .controls",
+
   container-unplayed: ".unplayed .controls",
 
   info_box: ".add_info_box",
@@ -47,10 +52,13 @@ $vjs-selector-mapping: (
 
   play_button: ".vjs-play-control",
   play_button-playing: ".vjs-play-control.vjs-playing",
+  play_button-custom_icon: ".player_controls-play_button-custom_icon",
   skip_button: ".player_skip",
   loading_spinner: ".vjs-loading-spinner",
   loading_spinner-on_underrun: ".vjs-loading-spinner.showing-for-underrun",
 
+  progress: ".player_controls-progress",
+
   current_time: ".vjs-current-time",
   time_separator: ".vjs-time-divider",
   duration: ".vjs-duration",
@@ -61,6 +69,8 @@ $vjs-selector-mapping: (
   load_progress: ".vjs-load-progress",
   play_progress: ".vjs-play-progress",
 
+  menu_bar: ".player_controls-menu_bar",
+
   close_button: ".page .close_button",
   close_button_label: ".page .close_button .label",
 );