pageflow 0.10.0 → 0.11.0

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

@@ -0,0 +1,52 @@
+%player_controls {
+  $dir: "pageflow/themes/default";
+
+  @if $classic-player-controls-images == "custom" {
+    $dir: "pageflow/themes/#{$theme-name}";
+  }
+
+  &-close_button {
+    cursor: pointer;
+    background-position: -45px 0;
+    background-repeat: no-repeat;
+    width: 45px;
+    height: 45px;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 10;
+    background-size: 200% auto;
+    background-image: image-url("#{$dir}/close_button_sprite.png");
+
+    &:hover {
+      background-position: 0 0;
+    }
+
+    @include phone {
+      right: 40px;
+    }
+
+    @include pad_portrait {
+      right: 40px;
+    }
+  }
+
+  &-close_button_label {
+    text-transform: uppercase;
+    text-shadow: 1px 1px 4px #2b2b2b;
+    font-size: 1.0em;
+    letter-spacing: 0.1em;
+    color: #FFFEFE;
+    position: absolute;
+    margin-right: 115%;
+    text-align: right;
+    right: 0px;
+    margin-top: 14px;
+    margin-left: 1em;
+  }
+}
+
+.invert %player_controls-close_button_label {
+  color: #2b2b2b;
+  text-shadow: 1px 1px 4px #fff;
+}

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

@@ -0,0 +1,48 @@
+////
+/// @group classic-player-controls
+////
+
+/// Base typography settings for player controls.
+$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 phone {
+      left: 5%;
+      max-width: 90%;
+
+      .hint {
+        display: block;
+      }
+    }
+
+    @include phone_portrait {
+      bottom: 50px;
+    }
+
+    a {
+      pointer-events: all;
+    }
+
+    &-idle {
+      @include transition-duration(1.5s);
+      @include transition-delay(1s);
+      opacity: 0;
+    }
+
+    &-paused,
+    &-unplayed,
+    &-has_been_faded {
+      // Unused, but have to be defined for @extend to work
+      display: block;
+    }
+  }
+}

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

@@ -0,0 +1,222 @@
+////
+/// @group classic-player-controls
+////
+
+/// Background color of the control bar.
+$classic-player-controls-background-color: #191919 !default;
+
+/// Color of the border around the control bar.
+$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;
+
+/// Backgrund color of the progress bar.
+$classic-player-controls-progress-bar-background-color: #333333 !default;
+
+/// Color of the part of the progress bar indicating the play progress.
+$classic-player-controls-progress-bar-color: $main-color !default;
+
+/// Color of the part of the progress bar indicating the load progress.
+$classic-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.4) !default;
+
+/// Border radius of the progress bar.
+$classic-player-controls-progress-bar-border-radius: 4px !default;
+
+/// Width of the handle element. Can be used to ensure correct
+/// 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;
+    left: 50%;
+    bottom: 0;
+    @include transform(translate3d(-50%, 0, 0));
+    z-index: 2;
+
+    display: block;
+    width: 434px;
+    height: 60px;
+
+    background-color: $classic-player-controls-background-color;
+    border: $classic-player-controls-border-width solid $classic-player-controls-border-color;
+    pointer-events: all;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 64px;
+      width: 0;
+      height: 60px;
+      border-right: $classic-player-controls-separator-border-width solid $classic-player-controls-separator-color;
+    }
+
+    @include phone {
+      left: 0;
+      top: 50%;
+      bottom: auto;
+      margin-left: -4px;
+      margin-top: -30px;
+      @include transform(translate3d(0, 0, 0));
+      width: 60px;
+      max-width: 435px;
+      height: 60px;
+
+      background: none;
+      border: none;
+
+      pointer-events: all;
+    }
+  }
+
+  &-control_bar_text {
+    position: absolute;
+    left: 80px;
+    top: 20px;
+    color: $classic-player-controls-text-color;
+
+    @include phone {
+      display: none;
+    }
+  }
+
+  &-play_button,
+  &-progress_bar,
+  &-current_time,
+  &-duration {
+    position: relative;
+    float: left;
+    text-align: center;
+    height: 3em;
+    width: 4em;
+  }
+
+  &-play_button {
+    width: 40px;
+    height: 40px;
+    margin-top: 10px;
+    margin-left: 11px;
+    cursor: pointer;
+
+    &.pressed:focus {
+      outline: none;
+    }
+  }
+
+  &-skip_button {
+    display: none;
+  }
+
+  &-progress_bar {
+    position: absolute;
+    top: 25px;
+    width: auto;
+    height: 9px;
+    cursor: pointer;
+  }
+
+  &-progress_bar_inner {
+    height: 100%;
+    border-radius: $classic-player-controls-progress-bar-border-radius;
+    background-color: $classic-player-controls-progress-bar-background-color;
+  }
+
+  &-play_progress,
+  &-load_progress {
+    border-radius: $classic-player-controls-progress-bar-border-radius;
+    position: absolute;
+    height: 100%;
+  }
+
+  &-play_progress {
+    background: initial;
+    background-color: $classic-player-controls-progress-bar-color;
+  }
+
+  &-load_progress {
+    background-color: $classic-player-controls-progress-bar-load-progress-color;
+  }
+
+  &-progress_bar_handle {
+    position: absolute;
+    top: -15px;
+    left: 0;
+    height: 40px;
+    width: $classic-player-controls-handle-width;
+
+    &:before {
+      content: "";
+    }
+  }
+
+  &-current_time,
+  &-time_separator,
+  &-duration {
+    position: relative;
+    line-height: 3em;
+    font-size: $classic-player-controls-font-size;
+    margin-top: 7px;
+    color: $classic-player-controls-text-color;
+  }
+
+  &-loading_spinner {
+    position: absolute;
+    top: 30px;
+    left: 31px;
+    opacity: 1;
+    @include animation(rotate 1.5s infinite linear);
+  }
+
+  &-loading_spinner-on_underrun {
+    // Override inline style set by video.js
+    // scss-lint:disable ImportantRule
+    display: block !important;
+    // scss-lint:enable ImportantRule
+  }
+
+  @include phone {
+    &-progress_bar,
+    &-current_time,
+    &-time_separator,
+    &-duration,
+    &-control_bar:before {
+      display: none;
+    }
+  }
+
+  &-page_with_progress_bar {
+    %player_controls-control_bar_text {
+      display: none;
+    }
+  }
+}
+
+@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;
+}

data/app/assets/stylesheets/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;
+    }
+  }
+}

data/app/assets/stylesheets/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;
+    }
+  }
+}

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

@@ -0,0 +1,87 @@
+@mixin player-controls-classic-icons-icon-font(
+  $icon-color: #fff,
+  $active-icon-color: $main-color,
+
+  $icon-shadow-color: #000,
+
+  $progress-bar-handle-background-color: #aaa,
+  $progress-bar-handle-border-color: #bbb,
+  $progress-bar-handle-icon-color: #333,
+
+  $loading-spinner-color: $main-color
+) {
+  %player_controls {
+    &-play_button {
+      margin-top: 12px;
+      margin-left: 13px;
+      width: 36px;
+      height: 36px;
+      background-image: none;
+
+      @include fa-play-icon;
+
+      &:before {
+        position: absolute;
+        top: -15px;
+        left: 3px;
+        width: 100%;
+        height: 100%;
+        color: $icon-color;
+        font-size: 34px;
+        line-height: 2;
+        text-shadow: 0 0 2px $icon-shadow-color;
+      }
+
+      &:hover,
+      &:active {
+        &:before {
+          color: $active-icon-color;
+        }
+      }
+
+      &-playing {
+        @include fa-pause-icon;
+
+        &:before {
+          left: 0;
+        }
+      }
+    }
+
+    &-progress_bar_handle {
+      @include background-icon-center($color: $progress-bar-handle-icon-color, $font-size: 23px);
+      @include fa-reorder-icon;
+      background-color: $progress-bar-handle-background-color;
+      border: solid 1px $progress-bar-handle-border-color;
+      border-radius: 6px;
+      box-sizing: border-box;
+      height: 36px;
+      top: -13px;
+
+      &:before {
+        @include transform(translate(-50%, -50%) scaleX(0.6));
+      }
+    }
+
+    &-loading_spinner {
+      top: 8px;
+      left: 9px;
+      width: 43px;
+      height: 43px;
+      opacity: 1;
+
+      @include fa-gear-icon;
+
+      &:before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 43px;
+        height: 43px;
+        color: $loading-spinner-color;
+        font-size: 43px;
+        text-align: center;
+      }
+    }
+  }
+}