pageflow 13.1.0 → 13.2.0

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/audio.js

@@ -20,8 +20,28 @@ pageflow.ConfigurationEditorView.register('audio', {
     });
 
     this.tab('options', function() {
+      if (pageflow.features.isEnabled('waveform_player_controls')) {
+        this.input('audio_player_controls_variant', pageflow.SelectInputView, {
+          values: ['default', 'waveform']
+        });
+      }
+
+      this.input('waveform_color', pageflow.ColorInputView, {
+        visibleBinding: 'audio_player_controls_variant',
+        visibleBindingValue: 'waveform',
+
+        defaultValue: pageflow.theme.mainColor(),
+        swatches: usedWaveformColors()
+      });
+
       this.input('autoplay', pageflow.CheckBoxInputView);
       this.group('options', {canPauseAtmo: true});
     });
+
+    function usedWaveformColors() {
+      return _.chain(pageflow.pages.map(function(page) {
+        return page.configuration.get('waveform_color');
+      })).uniq().compact().value();
+    }
   }
 });

data/app/assets/javascripts/pageflow/react.js

@@ -1,4 +1,4 @@
 // Files in the dist folder are generated by Webpack in the
 // node_package directory.
 
-//= require ./dist/react
+//= require ./dist/react-client

data/app/assets/javascripts/pageflow/slideshow/scroller_widget.js

@@ -13,12 +13,17 @@
     doubleBumpThreshold: 500,
 
     _create: function() {
+      this.eventListenerTarget = this.options.eventListenerTarget ?
+        $(this.options.eventListenerTarget) :
+        this.element;
+
       this.iscroll = new IScroll(this.element[0], _.extend({
         mouseWheel: true,
         bounce: false,
         keyBindings: true,
         probeType: 2,
-        preventDefault: false
+        preventDefault: false,
+        eventListenerTarget: this.eventListenerTarget[0]
       }, _.pick(this.options, 'freeScroll', 'scrollX', 'noMouseWheelScrollX')));
 
       this.iscroll.disable();
@@ -218,7 +223,7 @@
           allowRight = false,
           startX, startY;
 
-      this.element.on('touchstart MSPointerDown pointerdown', _.bind(function(event) {
+      this.eventListenerTarget.on('touchstart MSPointerDown pointerdown', _.bind(function(event) {
         var point = event.originalEvent.touches ?
                     event.originalEvent.touches[0] : event.originalEvent;
 
@@ -233,7 +238,7 @@
         }
       }, this));
 
-      this.element.on('touchmove MSPointerMove pointermove', _.bind(function(event) {
+      this.eventListenerTarget.on('touchmove MSPointerMove pointermove', _.bind(function(event) {
         var point = event.originalEvent.touches ?
                     event.originalEvent.touches[0] : event.originalEvent;
 
@@ -266,7 +271,7 @@
         }
       }, this));
 
-      this.element.on('touchend MSPointerUp pointerup', _.bind(function(event) {
+      this.eventListenerTarget.on('touchend MSPointerUp pointerup', _.bind(function(event) {
         var point = event.originalEvent.touches ?
                     event.originalEvent.changedTouches[0] : event.originalEvent;
 

data/app/assets/javascripts/pageflow/theme.js

@@ -0,0 +1,6 @@
+pageflow.theme = {
+  mainColor: function() {
+    var probe = document.getElementById('theme_probe-main_color');
+    return window.getComputedStyle(probe)['background-color'];
+  }
+};

data/app/assets/stylesheets/pageflow/mixins/shadow.scss

@@ -79,3 +79,8 @@
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
   @include linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent, $fallback: transparent);
 }
+
+@mixin shadow-bottom-inverted {
+  @include linear-gradient(to top, rgba(255, 255, 255, 0.7), transparent, $fallback: transparent);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#ffffff',GradientType=0 )
+}

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

@@ -78,14 +78,3 @@
     }
   }
 }
-
-.contentText {
-  @include phone {
-    margin-bottom: 40px;
-  }
-}
-.videoPage .contentText, .audioPage .contentText {
-  @include phone {
-    margin-bottom: 80px;
-  }
-}

data/app/assets/stylesheets/pageflow/page_types/audio.scss

@@ -8,10 +8,6 @@
 }
 
 .js .audioPage {
-  .contentText {
-    margin-bottom: 200px;
-  }
-
   .non_js_audio {
     display: none;
   }

data/app/assets/stylesheets/pageflow/page_types/video.scss

@@ -83,7 +83,6 @@
 .js .page .videoPage {
   .contentText {
     padding-top: initial;
-    margin-bottom: 200px;
   }
 
   .shadow {

data/app/assets/stylesheets/pageflow/slideshow.scss

@@ -74,6 +74,14 @@
     bottom: 0;
     z-index: 1;
 
+    &-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      bottom: 0;
+    }
+
     > div {
       position: absolute;
       @include box-sizing(border-box);

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

@@ -31,3 +31,4 @@
 @import "./video_wrapper";
 @import "./text_track_cues";
 @import "./slideshow";
+@import "./probes";

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

@@ -6,5 +6,6 @@
 @import "./mixins/typography";
 @import "./mixins/indicator_typography";
 @import "./mixins/cue_margins";
+@import "./mixins/masks";
 
 @import "./animations";

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

@@ -0,0 +1,11 @@
+  // scss-lint:disable VendorPrefix
+
+@mixin mask-bottom {
+  -webkit-mask-image: image-url("pageflow/themes/default/mask_bottom.png");
+  -webkit-mask-position: bottom left;
+  -webkit-mask-repeat: repeat-x;
+}
+
+@mixin mask-none {
+  -webkit-mask-image: none;
+}

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

@@ -11,6 +11,9 @@ $page-header-typography: () !default;
 /// Typography for header tagline.
 $page-header-tagline-typography: () !default;
 
+/// Typography for header tagline in phone layout.
+$page-header-tagline-phone-typography: () !default;
+
 /// Typography for header title.
 $page-header-title-typography: () !default;
 
@@ -26,6 +29,9 @@ $page-header-first-page-title-phone-typography: () !default;
 /// Typography for header subtitle.
 $page-header-subtitle-typography: () !default;
 
+/// Typography for header subtitle in phone layout.
+$page-header-subtitle-phone-typography: () !default;
+
 /// Typography for content text.
 $page-content-text-typography: () !default;
 
@@ -86,6 +92,7 @@ $page-content-text-line-height: 1.5em !default;
 @import "./page/anchors";
 @import "./page/hyphenate";
 @import "./page/paddings";
+@import "./page/content_text_margin";
 @import "./page/scroller";
 @import "./page/shadow";
 
@@ -142,6 +149,12 @@ $page-content-text-line-height: 1.5em !default;
           letter-spacing: 0
         )
       );
+
+      @include phone {
+        @include typography(
+          $page-header-tagline-phone-typography
+        );
+      }
     }
 
     .title {
@@ -182,6 +195,12 @@ $page-content-text-line-height: 1.5em !default;
           margin-bottom: $page-header-subtitle-margin-bottom
         )
       );
+
+      @include phone {
+        @include typography(
+          $page-header-subtitle-phone-typography
+        );
+      }
     }
   }
 

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

@@ -0,0 +1,18 @@
+.contentText {
+  // This has to be the default behavior since all non-React pages
+  // still do not apply additional modifier classes to the content
+  // text
+  @include phone {
+    margin-bottom: 40px;
+  }
+
+  &-margin_none {
+    @include phone {
+      margin-bottom: 0;
+    }
+  }
+
+  &-margin_for_player_controls {
+    margin-bottom: 200px;
+  }
+}

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

@@ -1,3 +1,8 @@
 .page .scroller {
   @extend %pageflow_widget_margin_right !optional;
 }
+
+.scroller-clipped_bottom {
+  overflow: hidden;
+  @include mask-bottom;
+}

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

@@ -28,6 +28,8 @@ $player-controls-typography: () !default;
   @import "./player_controls/slim";
 }
 
+@import "./player_controls/waveform";
+
 // Extend vjs specific css classes with placeholders:
 
 @import "./player_controls/vjs_mapping";

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

@@ -1,5 +1,7 @@
 $player-controls-menu-icon-color: #fff !default;
 
+$player-controls-menu-inverted-icon-color: #333 !default;
+
 $player-controls-menu-popup-background-color: rgba(17, 17, 17, 0.9) !default;
 
 $player-controls-menu-popup-link-color: #fff !default;
@@ -62,6 +64,10 @@ $player-controls-quality-menu-annotation-color: #ff0000 !default;
     fill: $player-controls-menu-icon-color;
   }
 
+  &-menu_bar-inverted .player_controls-menu_bar_button_icon {
+    fill: $player-controls-menu-inverted-icon-color;
+  }
+
   &-menu_bar_button-sub_menu_visible .player_controls-quality_menu_button_icon {
     @include transform(translate(-50%, -50%) rotate(40deg));
   }

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

@@ -1,13 +1,9 @@
-// scss-lint:disable VendorPrefix
-
 %player_controls {
   &-scroller-playing {
     @include desktop {
       bottom: 80px;
       overflow: hidden;
-      -webkit-mask-image: image-url("pageflow/themes/default/player_controls/slim/scroller_mask.png");
-      -webkit-mask-position: bottom left;
-      -webkit-mask-repeat: repeat-x;
+      @include mask-bottom;
     }
   }
 
@@ -15,7 +11,7 @@
   &-scroller-fading {
     @include desktop {
       bottom: 0;
-      -webkit-mask-image: none;
+      @include mask-none;
     }
   }
 }

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

@@ -0,0 +1,25 @@
+@import "./waveform/info_box";
+@import "./waveform/play_button";
+@import "./waveform/times_display";
+@import "./waveform/wave";
+
+.waveform_player_controls {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  pointer-events: none;
+
+  @include shadow-bottom;
+
+  &-inverted {
+    @include shadow-bottom-inverted;
+  }
+
+  &-container {
+    padding-top: 10px;
+    margin-bottom: 55px;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,30 @@
+$waveform-player-controls-info-box-typography: () !default;
+
+.waveform_player_controls {
+  &-info_box {
+    padding-left: 8%;
+    padding-right: 14%;
+    margin-top: 10px;
+    max-width: 900px;
+
+    &-title,
+    &-description {
+      @include typography(
+        $waveform-player-controls-info-box-typography, (
+          font-size: 1.1em,
+          margin: 15px 0
+        )
+      );
+
+      display: inline;
+      width: auto;
+      max-width: none;
+    }
+
+    &-title-with_separator:after {
+      content: "\2014";
+      display: inline;
+      padding: 0 5px;
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+$waveform-player-controls-play-button-fill: #fff !default;
+
+$waveform-player-controls-play-button-stroke: #444 !default;
+
+$waveform-player-controls-play-button-inverted-fill: #222 !default;
+
+$waveform-player-controls-play-button-inverted-stroke: #ddd !default;
+
+.waveform_player_controls {
+  &-play_button {
+    display: block;
+    position: absolute;
+    top: 50%;
+    @include transform(translateY(-50%));
+    left: 8%;
+    z-index: 2;
+
+    svg {
+      width: 100px;
+      height: 100px;
+      fill: $waveform-player-controls-play-button-fill;
+      stroke: $waveform-player-controls-play-button-stroke;
+      stroke-width: 3px;
+    }
+
+    &-inverted svg {
+      fill: $waveform-player-controls-play-button-inverted-fill;
+      stroke: $waveform-player-controls-play-button-inverted-stroke;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+$waveform-player-controls-times-display-typography: ();
+
+.waveform_player_controls-times_display {
+  margin-top: 10px;
+  padding-left: 8%;
+  @include standard-typography($waveform-player-controls-times-display-typography);
+
+  &-current_time,
+  &-duration {
+    display: inline;
+  }
+
+  &-current_time {
+    padding-right: 5px;
+  }
+
+  &-duration {
+    padding-left: 5px;
+  }
+}

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

@@ -0,0 +1,29 @@
+.waveform_player_controls {
+  canvas {
+    opacity: 0.8;
+  }
+
+  &-wave_wrapper {
+    position: absolute;
+    bottom: 0;
+    left: 20px;
+    right: 20px;
+  }
+
+  &-wave {
+    @extend %pageflow_widget_margin_right_max !optional;
+
+    position: relative;
+    z-index: 1;
+    pointer-events: all;
+    height: 70px;
+
+    @media (min-height: 600px) {
+      height: 150px;
+    }
+
+    @media (min-height: 800px) {
+      height: 270px;
+    }
+  }
+}