pageflow 0.10.0 → 0.11.0

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

@@ -0,0 +1,59 @@
+@mixin player-controls-classic-icons-sprite {
+  $dir: "pageflow/themes/default";
+
+  @if $classic-player-controls-images == "custom" {
+    $dir: "pageflow/themes/#{$theme-name}";
+  }
+
+  %player_controls {
+    &-play_button,
+    &-progress_bar_handle {
+      background-image: image-url("#{$dir}/player_controls_sprite.png");
+    }
+
+    &-play_button {
+      background-position: center top;
+
+      &:hover {
+        background-position: center -40px;
+      }
+
+      &:active,
+      &.touched {
+        background-position: center -80px;
+      }
+    }
+
+    &-play_button-playing {
+      background-position: center -120px;
+
+      &:hover {
+        background-position: center -160px;
+      }
+
+      &:active,
+      &:touched {
+        background-position: center -200px;
+      }
+    }
+
+    &-progress_bar_handle {
+      background-position: center -240px;
+    }
+
+    &-loading_spinner {
+      top: 10px;
+      left: 10px;
+
+      &:before {
+        content: " ";
+        display: block;
+        width: 41px;
+        height: 41px;
+        background-image: image-url("#{$dir}/player_controls_loading_spinner.png");
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,137 @@
+////
+/// @group classic-player-controls
+////
+
+/// Background color of the info box.
+$classic-player-controls-info-box-background-color: rgba(39, 39, 39, 0.95) !default;
+
+/// Color of the text inside the info box.
+$classic-player-controls-info-box-text-color: #fff !default;
+
+/// Text color of the info box header.
+$classic-player-controls-info-box-header-color: null !default;
+
+/// Typography settings for the info box.
+$classic-player-controls-info-box-typography: () !default;
+
+/// Typography settings for the info box header.
+$classic-player-controls-info-box-header-typography: () !default;
+
+/// Display rounded corners at the top of the info box.
+$classic-player-controls-info-box-border-radius: 4px !default;
+
+%player_controls {
+  &-info_box {
+    width: 87%;
+    margin: 1em 5% 1.5em 8%;
+    position: relative;
+    z-index: 2;
+    color: $classic-player-controls-info-box-text-color;
+
+    @include typography(
+      $classic-player-controls-info-box-typography, (
+        font-size: 0.8em
+      )
+    );
+
+    @include phone {
+      font-size: 0.84em;
+    }
+
+    h3 {
+      color: $classic-player-controls-info-box-header-color;
+
+      @include typography(
+        $classic-player-controls-info-box-header-typography
+      );
+    }
+
+    h3,
+    p {
+      margin: 15px 3%;
+      width: 94%;
+    }
+
+    a {
+      color: $classic-player-controls-info-box-text-color;
+    }
+
+    &.empty {
+      display: none;
+    }
+
+    &:before {
+      content: "";
+      position: absolute;
+      left: -$classic-player-controls-border-width;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: $classic-player-controls-info-box-background-color;
+      border: solid $classic-player-controls-border-width transparent;
+      z-index: -1;
+
+      border-top-left-radius: $classic-player-controls-info-box-border-radius;
+      border-top-right-radius: $classic-player-controls-info-box-border-radius;
+    }
+  }
+
+  .js &-info_box {
+    pointer-events: none;
+    margin: 0;
+    margin-bottom: 60px + $classic-player-controls-border-width * 2;
+    width: 434px;
+    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;
+      padding-left: 0;
+      max-width: 435px;
+      min-height: 60px;
+      width: 100%;
+      min-width: 260px;
+
+      &.empty {
+        display: block;
+        width: 60px;
+        @include transform(translate3d(0, 0, 0));
+        left: 0;
+        min-width: 0;
+
+        &:before {
+          display: none;
+        }
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        left: -3px;
+        top: 0;
+        width: 60px;
+        height: 100%;
+        padding-bottom: 0;
+        background-color: $classic-player-controls-background-color;
+        z-index: -1;
+        opacity: 0.9;
+      }
+
+      &:before {
+        border: 0;
+      }
+
+      h3,
+      p {
+        margin-left: 70px;
+        width: 70%;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+@import "./slim/container";
+@import "./slim/control_bar";
+@import "./slim/info_box";
+@import "./slim/close_button";
+@import "./slim/scroller";
+
+%player_controls-container {
+  @include phone {
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 50px;
+
+      background-color: $slim-player-controls-info-box-background-color;
+      pointer-events: none;
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+%player_controls {
+  &-close_button {
+    @include background-icon-left($left: 12px, $color: $slim-player-controls-color);
+    @include fa-times-icon;
+
+    position: absolute;
+    bottom: 5px;
+    left: 5px;
+    width: 200px;
+    height: 40px;
+
+    cursor: pointer;
+    @include user-select(none);
+    z-index: 10;
+
+    @include transition(opacity 0.2s linear, visibility 0.2s linear);
+    opacity: 0;
+
+    .hideText & {
+      opacity: 1;
+    }
+  }
+
+  &-close_button_label {
+    position: absolute;
+    left: 55px;
+    bottom: 10px;
+
+    color: $slim-player-controls-color;
+    text-shadow: 1px 1px 4px $indicator-text-shadow-color;
+
+    @include indicator-typography;
+
+    @include phone {
+      left: 45px;
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+////
+/// @group slim-player-controls
+////
+
+/// Base typograpy settings.
+$slim-player-controls-typography: $player-controls-typography !default;
+
+%player_controls {
+  &-container,
+  &-background {
+    @include transition(opacity 0.2s linear, visibility 0.2s linear);
+  }
+
+  &-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    @include user-select(none);
+
+    @include standard-typography($slim-player-controls-typography);
+  }
+
+  &-background::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 85px;
+    z-index: 2;
+    pointer-events: none;
+
+    @include shadow-bottom;
+  }
+
+  &-container-idle,
+  &-background-idle::after {
+    @include transition-delay(1s);
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &-container-hover,
+  &-background-hover::after {
+    opacity: 1;
+    visibility: visible;
+  }
+}

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

@@ -0,0 +1,249 @@
+////
+/// @group slim-player-controls
+////
+
+/// Color of player icons and text.
+$slim-player-controls-color: #fff !default;
+
+/// Color of the loading spinner circle around the play button.
+$slim-player-controls-loading-spinner-color: rgba(255, 255, 255, 0.5) !default;
+
+/// Backgrund color of the progress bar.
+$slim-player-controls-progress-bar-background-color: rgba(255, 255, 255, 0.2) !default;
+
+/// Color of the part of the progress bar indicating the play progress.
+$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;
+
+%player_controls {
+  &-control_bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 70px 20px 15px 20px;
+
+    pointer-events: none;
+
+    text-align: right;
+
+    @include phone {
+      z-index: 2;
+    }
+  }
+
+  &-container-playing %player_controls-control_bar {
+    pointer-events: all;
+  }
+
+  &-control_bar_text {
+    position: absolute;
+    bottom: 15px;
+    left: 60px;
+    text-align: left;
+
+    opacity: 0;
+    visibility: hidden;
+
+    color: $slim-player-controls-color;
+    text-shadow: 1px 1px 4px $indicator-text-shadow-color;
+
+    @include indicator-typography;
+
+    @include phone {
+      left: 50px;
+    }
+  }
+
+  &-play_button,
+  &-skip_button {
+    @include background-icon-center($color: $slim-player-controls-color);
+    @include hide-text;
+
+    position: absolute;
+    bottom: 5px;
+    width: 40px;
+    height: 40px;
+
+    cursor: pointer;
+  }
+
+  &-play_button {
+    @include background-icon-position($left: 21px);
+    @include fa-play-icon;
+    @include fix-ie-ensure-z-index-applies;
+    left: 5px;
+    z-index: 1;
+  }
+
+  &-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;
+    width: 60px;
+    height: 60px;
+    left: -5px;
+    bottom: -4px;
+  }
+
+  &-loading_spinner-on_underrun {
+    // Override inline style set by video.js
+    // scss-lint:disable ImportantRule
+    display: block !important;
+    // scss-lint:enable ImportantRule
+  }
+
+  &-skip_button {
+    @include fa-forward-icon;
+    left: 50px;
+    display: none;
+  }
+
+  &-progress_bar {
+    position: absolute;
+    bottom: 55px;
+    left: 16px;
+    right: 20px;
+    height: 20px;
+
+    @include phone {
+      display: none;
+    }
+
+    &:before {
+      content: "";
+      background-color: $slim-player-controls-progress-bar-background-color;
+      width: 100%;
+    }
+  }
+
+  &-progress_bar_inner {
+    height: 100%;
+  }
+
+  &-progress_bar:before,
+  &-play_progress,
+  &-load_progress {
+    position: absolute;
+    left: 0;
+    top: 10px;
+    height: 3px;
+  }
+
+  &-play_progress {
+    background-color: $slim-player-controls-progress-bar-color;
+  }
+
+  &-load_progress {
+    background-color: $slim-player-controls-progress-bar-load-progress-color;
+  }
+
+  &-progress_bar_handle {
+    position: absolute;
+    left: 0;
+    top: 11px;
+    width: 0;
+    height: 0;
+    @include transform(scale(0));
+    @include transition(transform 0.1s ease);
+
+    &:before {
+      content: "";
+      position: absolute;
+      left: -6px;
+      top: -6px;
+      width: 12px;
+      height: 12px;
+      border-radius: 6px;
+      background-color: $slim-player-controls-progress-bar-color;
+    }
+  }
+
+  &-progress_bar:hover {
+    %player_controls-progress_bar:before,
+    %player_controls-play_progress,
+    %player_controls-load_progress {
+      top: 9px;
+      height: 5px;
+    }
+
+    %player_controls-progress_bar_handle {
+      @include transform(scale(1));
+    }
+  }
+
+  &-current_time,
+  &-time_separator,
+  &-duration {
+    display: inline-block;
+    color: $slim-player-controls-color;
+    font-size: 14px;
+  }
+
+  &-time_separator {
+    padding: 0 5px;
+  }
+
+  &-progress_bar,
+  &-control_bar_text,
+  &-play_button,
+  &-skip_button {
+    pointer-events: all;
+  }
+
+  &-progress_bar,
+  &-control_bar_text,
+  &-current_time,
+  &-time_separator,
+  &-duration,
+  &-skip_button,
+  &-loading_spinner {
+    @include transition(opacity 0.2s linear, visibility 0.2s linear);
+  }
+
+  &-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 {
+      opacity: 0;
+      visibility: hidden;
+      @include transition-delay(0.2s);
+    }
+  }
+}
+
+.is_near_bottom %player_controls-container-unplayed {
+  %player_controls-play_button {
+    width: 300px;
+  }
+
+  %player_controls-control_bar_text {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+@include phone {
+  %player_controls-container-unplayed {
+    %player_controls-play_button {
+      width: 300px;
+    }
+
+    %player_controls-control_bar_text {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}