pageflow-embedded-video 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58172568a795561cfa5c9b15beb1cf146bbed9185df06fd7a8778aabd290e145
-  data.tar.gz: 1bff248bfe9bcbf1559a18cfea8a667f8a272f198aa44e3157c1dfa8bc114a0f
+  metadata.gz: e91150f1dcc8ffc4a403acd78126c6663eb5c7f7632d7f82eb9d48bbe928b241
+  data.tar.gz: 1c997f03c854cf81671b1cee3d62f96c326d5e9a821b275edcf18057449363e0
 SHA512:
-  metadata.gz: 2a83250311ebce3c4f9984d0b6269cf513d539dfd49ac50534de021aca627f644fa25121a6389975a44ea456a358f3e066c93735df10bbe7b543ec9fd5d06e53
-  data.tar.gz: cf04b9da398197d01c2a40dc2ccac71932af70022a7e6aac2ea8c015edf64bc5427e47b1c5a65325108f6e1e7b2b3bb00347f031b4ecd297c55307aea1d69605
+  metadata.gz: 613297bd5515974ff6fcd721433bc58db1686b8ee5132f91a8ec4ed821e4889224a312427c9dbd8a7cd1721b249f7ba0b1dc0f323b129be3ea074df5f3390d12
+  data.tar.gz: af525addc0af9fb8a12f37dacb91a71dfffd86a9e8ba5b659a628110f87ba902b7beff3104fe5910fc6105e7b45564c3b89a8f6fd3e0e81ebe0937158aa29d7a

data/CHANGELOG.md

@@ -1,16 +1,19 @@
 # CHANGELOG
 
-### Version 1.1.0
+### Version 1.2.0
 
-2017-11-08
+2018-12-10
 
-[Compare changes](https://github.com/codevise/pageflow-embedded-video/compare/1-0-stable...v1.1.0)
+[Compare changes](https://github.com/codevise/pageflow-embedded-video/compare/1-1-stable...v1.2.0)
 
-- Require Pageflow 12.1 and make split layout compatible with
-  adjustable title max-widths
-  ([#20](https://github.com/codevise/pageflow-embedded-video/pull/20),
-   [#21](https://github.com/codevise/pageflow-embedded-video/pull/21))
+- Add support for Pageflow 13
+  ([#24](https://github.com/codevise/pageflow-embedded-video/pull/24))
+- Improve support for embed options
+  ([#25](https://github.com/codevise/pageflow-embedded-video/pull/25),
+   [#26](https://github.com/codevise/pageflow-embedded-video/pull/26))
+- Add support for right to left layout
+  ([#23](https://github.com/codevise/pageflow-embedded-video/pull/23))
 
 See
-[1-0-stable branch](https://github.com/codevise/pageflow-embedded-video/blob/1-0-stable/CHANGELOG.md)
+[1-1-stable branch](https://github.com/codevise/pageflow-embedded-video/blob/1-1-stable/CHANGELOG.md)
 for previous changes.

data/Gemfile

@@ -2,3 +2,5 @@ source 'https://rubygems.org'
 
 # Specify your gem's dependencies in embedded-video.gemspec
 gemspec
+
+gem 'pageflow', git: 'https://github.com/codevise/pageflow'

data/app/assets/javascript/pageflow/embedded_video.js

@@ -3,4 +3,17 @@
 //= require ./URI.js
 //= require ./froogaloop.js
 
-pageflow.embeddedVideo = pageflow.embeddedVideo || {};
+pageflow.embeddedVideo = {
+  providerFromUrl: function(url) {
+    var domain = new URI(url).domain(true);
+
+    if (['youtu.be', 'youtube.com'].indexOf(domain) >= 0) {
+      return 'youtube';
+    }
+    else if (domain === 'vimeo.com') {
+      return 'vimeo';
+    }
+
+    return '';
+  }
+};

data/app/assets/javascript/pageflow/embedded_video/editor.js

@@ -1,9 +1,6 @@
-//= require_self
 //= require_tree ./editor/models
 //= require_tree ./editor/collections
 //= require_tree ./editor/views/inputs
 //= require_tree ./editor/templates
 //= require_tree ./editor/views
 //= require_tree ./editor/initializers
-
-pageflow.embeddedVideo = pageflow.embeddedVideo || {};

data/app/assets/javascript/pageflow/embedded_video/editor/views/configuration_editor.js

@@ -13,6 +13,19 @@ pageflow.ConfigurationEditorView.register('embedded_video', {
         required: true,
         permitHttps: true
       });
+
+      inputForProvider('youtube', this, 'embedded_video_hide_info', pageflow.CheckBoxInputView, {
+        disabled: true,
+        displayUncheckedIfDisabled: true
+      });
+      inputForProvider('youtube', this, 'embedded_video_hide_controls', pageflow.CheckBoxInputView);
+
+      inputForProvider('vimeo', this, 'embedded_video_hide_info', pageflow.CheckBoxInputView);
+      inputForProvider('vimeo', this, 'embedded_video_hide_controls', pageflow.CheckBoxInputView, {
+        disabled: true,
+        displayUncheckedIfDisabled: true
+      });
+
       this.input('video_caption', pageflow.TextInputView);
       this.input('full_width', pageflow.CheckBoxInputView);
       this.group('background');
@@ -25,5 +38,18 @@ pageflow.ConfigurationEditorView.register('embedded_video', {
     this.tab('options', function() {
       this.group('options');
     });
+
+    function inputForProvider(provider, view, propertyName, inputView, options) {
+      view.input(propertyName, inputView, _.extend({
+        attributeTranslationKeyPrefixes: [
+          'pageflow.embedded_video.page_attributes.' + provider,
+          'pageflow.embedded_video.page_attributes'
+        ],
+        visibleBinding: 'display_embedded_video_url',
+        visible: function(url) {
+          return pageflow.embeddedVideo.providerFromUrl(url) === provider;
+        }
+      }, options));
+    }
   }
-});
+});

data/app/assets/javascript/pageflow/embedded_video/page_type.js

@@ -39,7 +39,7 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
 
     pageElement.toggleClass('page-with_split_layout', allowSplitLayout);
 
-    var splitLayout = this.wideEnoughForSplitLayout(pageElement) && allowSplitLayout;
+    var splitLayout = pageflow.pageSplitLayout.pageIsWideEnough(pageElement) && allowSplitLayout;
 
     iframeWrapper.add(scroller).toggleClass('widescreened', splitLayout);
 
@@ -69,21 +69,6 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
     scroller.scroller('refresh');
   },
 
-  wideEnoughForSplitLayout: function(pageElement) {
-    var pageTitle = pageElement.find('.page_header .title');
-
-    var pageTitleClientRect = pageTitle[0].getBoundingClientRect();
-    var pageClientRect = pageElement[0].getBoundingClientRect();
-
-    var spaceRightFromTitle = pageClientRect.right - pageTitleClientRect.right;
-    var spaceLeftFromTitle = pageTitleClientRect.left - pageClientRect.left;
-    var leftPositionedEmbedWidth = pageClientRect.width * 0.51;
-    var rightPositionedEmbedWidth = pageClientRect.width * 0.55;
-
-    return (spaceLeftFromTitle >= leftPositionedEmbedWidth ||
-            spaceRightFromTitle >= rightPositionedEmbedWidth);
-  },
-
   prepare: function(pageElement, configuration) {},
 
   activating: function(pageElement, configuration) {
@@ -137,7 +122,9 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
     }
 
     if (this.active) {
-      if (configuration.hasChanged('display_embedded_video_url')) {
+      if (configuration.hasChanged('display_embedded_video_url') ||
+          configuration.hasChanged('embedded_video_hide_info') ||
+          configuration.hasChanged('embedded_video_hide_controls')) {
         this._removePlayer(pageElement, function() {
           that._createPlayer(pageElement, configuration.attributes);
         });
@@ -154,15 +141,15 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
   _createPlayer: function(pageElement, configuration) {
     var that = this,
         url = configuration.display_embedded_video_url,
-        origin = this._urlOrigin(url);
+        provider = pageflow.embeddedVideo.providerFromUrl(url);
 
-    if (origin === 'youtube') {
+    if (provider === 'youtube') {
       this.ytApiInitialize().done(function () {
-        that._createYouTubePlayer(pageElement, url);
+        that._createYouTubePlayer(pageElement, url, configuration);
       });
     }
-    else if (origin == 'vimeo') {
-      that._createVimeoPlayer(pageElement, url);
+    else if (provider == 'vimeo') {
+      that._createVimeoPlayer(pageElement, url, configuration);
     }
   },
 
@@ -183,7 +170,7 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
     return window.youtubeInitialized;
   },
 
-  _createYouTubePlayer: function(pageElement, url) {
+  _createYouTubePlayer: function(pageElement, url, configuration) {
     var that = this,
         div = document.createElement('div');
 
@@ -198,8 +185,9 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
         width: '100%',
         videoId: that._getVideoId(url),
         playerVars: {
-          rel: false,
-          start: that._getVideoStartTime(url)
+          rel: '0',
+          start: that._getVideoStartTime(url),
+          controls: configuration.embedded_video_hide_controls ? '0' : '1'
         },
         events: {
           'onReady': function(event) {
@@ -211,7 +199,7 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
     });
   },
 
-  _createVimeoPlayer: function(pageElement, url) {
+  _createVimeoPlayer: function(pageElement, url, configuration) {
     var that = this,
         iframe = document.createElement('iframe'),
         uri = new URI('//player.vimeo.com/video/');
@@ -219,7 +207,15 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
     this.playerId = 'vimeo-player-' + this._getRandom(url);
 
     uri.filename(that._getVideoId(url));
-    uri.search({api: '1', player_id: this.playerId});
+    uri.search({
+      api: '1',
+      player_id: this.playerId,
+      byline: configuration.embedded_video_hide_info ? '0' : '1',
+      title: configuration.embedded_video_hide_info ? '0' : '1',
+      portrait: configuration.embedded_video_hide_info ? '0' : '1'
+    });
+
+    uri.fragment(new URI(url).fragment());
 
     $(iframe).attr({
       id: this.playerId,
@@ -279,7 +275,7 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
       containerAndCloseButton = pageElement.find('.iframe_container, .close_button'),
       url = configuration.display_embedded_video_url;
 
-    $div.addClass('iframe_overlay ' + this._urlOrigin(url));
+    $div.addClass('iframe_overlay ' + pageflow.embeddedVideo.providerFromUrl(url));
 
     this._setBackgroundImage(url, $div);
     pageHeader.after($div);
@@ -292,15 +288,15 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
   },
 
   _setBackgroundImage: function(url, element) {
-    var origin = this._urlOrigin(url),
+    var provider = pageflow.embeddedVideo.providerFromUrl(url),
         videoId = this._getVideoId(url),
         imageUrl = '';
 
-    if (origin === 'youtube') {
+    if (provider === 'youtube') {
       imageUrl = 'http://img.youtube.com/vi/' + videoId + '/hqdefault.jpg';
       element.css('background-image', 'url("' + imageUrl + '")');
     }
-    else if (origin === 'vimeo') {
+    else if (provider === 'vimeo') {
       var src = "http://vimeo.com/api/v2/video/" + videoId + ".json";
 
       $.getJSON(src, function(data) {
@@ -309,20 +305,6 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
     }
   },
 
-  _urlOrigin: function(url) {
-    var uri = new URI(url),
-      domain = uri.domain(true);
-
-    if (['youtu.be', 'youtube.com'].indexOf(domain) >= 0) {
-      return 'youtube';
-    }
-    else if (domain === 'vimeo.com') {
-      return 'vimeo';
-    }
-
-    return '';
-  },
-
   _getVideoId: function(url) {
     var uri = new URI(url),
         domain = uri.domain(true);
@@ -363,6 +345,9 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
       var parts = timestamp.split('m');
       return parseInt(parts[0], 10) * 60 + parseInt(parts[1] || 0, 10);
     }
+    else if (timestamp.match(/\d+s/)) {
+      return parseInt(timestamp || 0, 10);
+    }
     else {
       return 0;
     }

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

@@ -87,7 +87,7 @@
       position: absolute;
       width: 45%;
       max-height: 600px;
-      right: 10%;
+      @include position-end(10%);
       margin-top: 0;
       top: 50%;
       @include transform(translate(0,-50%));
@@ -111,8 +111,8 @@
     }
 
     .text_position_right &.widescreened {
-      right: auto;
-      left: 8%;
+      @include position-end(auto);
+      @include position-start(8%);
       width: 42%;
     }
 

data/config/locales/de.yml

@@ -11,6 +11,21 @@ de:
         page_type:
           menu_item: Embedded Video
           text: "# Embedded Video\n\n*Bettet ein externes Video von YouTube oder Vimeo ein*\n    \nFalls Du neben eigenem Filmmaterial auch externe Videos verwenden möchtest, kannst\nDu diese über eine Video-URL integrieren und zudem mit einer Bildunterschrift versehen.\nAus technischen Gründen wird das Bild in einem Rahmen in die Seite\neingebunden, der sich der Größe des Bildschirms und dem Textfluss automatisch anpasst, ihn aber nie komplett ausfüllt.\nDeshalb besteht bei diesem Seitentyp die Möglichkeit, ein zusätzliches Hintergrund-Bild/Video\neinzufügen, beispielsweise um einen visuellen Rahmen zu schaffen.\n\nEs können Videos der beiden Plattformen YouTube und Vimeo verwendet werden.\n\nTypische Anwendungsbeispiele: Einbinden von Playlists, Trailern, Kurzfilmen"
+      page_attributes:
+        embedded_video_hide_controls:
+          label: Steuerelemente ausblenden
+        embedded_video_hide_info:
+          label: Titel in Embed ausblenden
+        vimeo:
+          embedded_video_hide_controls:
+            inline_help: Diese Option steht für Vimeo-Videos nicht zur Verfügung. Abhängig vom Plan des Vimeo-Kontos des Videos, können die Controls in den Embed-Einstellungen des Videos in der Vimeo-Oberfläche ausgeschaltet werden.
+          embedded_video_hide_info:
+            inline_help: Blendet Titel und Author Informationen innerhalb des Embeds aus. Der Besitzer des Vimeo-Videos kann das Ausblenden dieser Informationen verbieten. Die Option ist dann ohne Funktion.
+        youtube:
+          embedded_video_hide_controls:
+            inline_help: Blendet die YouTube-Steuerelemente aus. Das Video kann per Klick gestartet und pausiert werden.
+          embedded_video_hide_info:
+            inline_help: Diese Option steht für YouTube-Videos nicht zur Verfügung.
       page_type_category_name: Media
       page_type_description: Bettet ein externes Video von YouTube oder Vimeo ein
       page_type_name: Embedded Video

data/config/locales/en.yml

@@ -11,6 +11,21 @@ en:
         page_type:
           menu_item: Embedded Video
           text: "# Embedded Video\n\n*Embeds an external video from Youtube or Vimeo*\n    \nIf you want to use external videos beside your own material, you can embed the video-URL and give it a caption. For technical reasons the video is embedded in a frame, that is fitting only parts of the  screen. You can therefore add a background-image/video, which creates a visual frame. You can use videos from Youtube and Vimeo.\n\nExamples of application: integration of playlists, trailer or short movies"
+      page_attributes:
+        embedded_video_hide_controls:
+          label: Hide controls
+        embedded_video_hide_info:
+          label: Hide title in embed
+        vimeo:
+          embedded_video_hide_controls:
+            inline_help: This option is not supported by Vimeo video embeds. Depending on the plan of the video's Vimeo account, controls can be hidden via the video's embed settings in the Vimeo web interface.
+          embedded_video_hide_info:
+            inline_help: Hides the video title and author info inside the embed. The owner of the video can forbid hiding these elements. This option then has no effect.
+        youtube:
+          embedded_video_hide_controls:
+            inline_help: Hides the YouTube player controls. The video can be played and paused via click.
+          embedded_video_hide_info:
+            inline_help: This option is not supported by YouTube video embeds.
       page_type_category_name: Media
       page_type_description: Embed YouTube or Vimeo videos
       page_type_name: Embedded Video

data/lib/pageflow/embedded_video/configuration.rb

@@ -7,9 +7,14 @@ module Pageflow
       attr_reader :supported_hosts
 
       def initialize
-        @supported_hosts = %w(https://www.youtube.com http://www.youtube.com http://vimeo.com https://vimeo.com)
+        @supported_hosts = %w[
+          https://youtu.be
+          https://www.youtube.com
+          http://www.youtube.com
+          http://vimeo.com
+          https://vimeo.com
+        ]
       end
-
     end
   end
 end

data/lib/pageflow/embedded_video/engine.rb

@@ -6,6 +6,7 @@ module Pageflow
       isolate_namespace Pageflow::EmbeddedVideo
 
       config.autoload_paths << File.join(config.root, 'lib')
+      config.i18n.load_path += Dir[config.root.join('config', 'locales', '**', '*.yml').to_s]
     end
   end
 end

data/lib/pageflow/embedded_video/version.rb

@@ -1,5 +1,5 @@
 module Pageflow
   module EmbeddedVideo
-    VERSION = '1.1.0'.freeze
+    VERSION = '1.2.0'.freeze
   end
 end

data/pageflow-embedded-video.gemspec

@@ -18,7 +18,7 @@ Gem::Specification.new do |spec|
 
   spec.required_ruby_version = '~> 2.1'
 
-  spec.add_runtime_dependency 'pageflow', '~> 12.1'
+  spec.add_runtime_dependency 'pageflow', ['>= 12.2.x', '< 14']
   spec.add_runtime_dependency 'pageflow-public-i18n', '~> 1.0'
 
   spec.add_development_dependency 'bundler', '~> 1.0'

metadata

@@ -1,29 +1,35 @@
 --- !ruby/object:Gem::Specification
 name: pageflow-embedded-video
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.2.0
 platform: ruby
 authors:
 - Codevise Solutions Ltd
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-11-08 00:00:00.000000000 Z
+date: 2018-12-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: pageflow
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 12.2.x
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '12.1'
+        version: '14'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 12.2.x
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '12.1'
+        version: '14'
 - !ruby/object:Gem::Dependency
   name: pageflow-public-i18n
   requirement: !ruby/object:Gem::Requirement
@@ -148,7 +154,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.7.0
+rubygems_version: 2.7.5
 signing_key: 
 specification_version: 4
 summary: Pagetype for embedded youtube/vimeo videos