pageflow-embedded-video 1.1.0 → 1.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +11 -8
- data/Gemfile +2 -0
- data/app/assets/javascript/pageflow/embedded_video.js +14 -1
- data/app/assets/javascript/pageflow/embedded_video/editor.js +0 -3
- data/app/assets/javascript/pageflow/embedded_video/editor/views/configuration_editor.js +27 -1
- data/app/assets/javascript/pageflow/embedded_video/page_type.js +30 -45
- data/app/assets/stylesheets/pageflow/embedded_video.scss +3 -3
- data/config/locales/de.yml +15 -0
- data/config/locales/en.yml +15 -0
- data/lib/pageflow/embedded_video/configuration.rb +7 -2
- data/lib/pageflow/embedded_video/engine.rb +1 -0
- data/lib/pageflow/embedded_video/version.rb +1 -1
- data/pageflow-embedded-video.gemspec +1 -1
- metadata +13 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e91150f1dcc8ffc4a403acd78126c6663eb5c7f7632d7f82eb9d48bbe928b241
|
4
|
+
data.tar.gz: 1c997f03c854cf81671b1cee3d62f96c326d5e9a821b275edcf18057449363e0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 613297bd5515974ff6fcd721433bc58db1686b8ee5132f91a8ec4ed821e4889224a312427c9dbd8a7cd1721b249f7ba0b1dc0f323b129be3ea074df5f3390d12
|
7
|
+
data.tar.gz: af525addc0af9fb8a12f37dacb91a71dfffd86a9e8ba5b659a628110f87ba902b7beff3104fe5910fc6105e7b45564c3b89a8f6fd3e0e81ebe0937158aa29d7a
|
data/CHANGELOG.md
CHANGED
@@ -1,16 +1,19 @@
|
|
1
1
|
# CHANGELOG
|
2
2
|
|
3
|
-
### Version 1.
|
3
|
+
### Version 1.2.0
|
4
4
|
|
5
|
-
|
5
|
+
2018-12-10
|
6
6
|
|
7
|
-
[Compare changes](https://github.com/codevise/pageflow-embedded-video/compare/1-
|
7
|
+
[Compare changes](https://github.com/codevise/pageflow-embedded-video/compare/1-1-stable...v1.2.0)
|
8
8
|
|
9
|
-
-
|
10
|
-
|
11
|
-
|
12
|
-
|
9
|
+
- Add support for Pageflow 13
|
10
|
+
([#24](https://github.com/codevise/pageflow-embedded-video/pull/24))
|
11
|
+
- Improve support for embed options
|
12
|
+
([#25](https://github.com/codevise/pageflow-embedded-video/pull/25),
|
13
|
+
[#26](https://github.com/codevise/pageflow-embedded-video/pull/26))
|
14
|
+
- Add support for right to left layout
|
15
|
+
([#23](https://github.com/codevise/pageflow-embedded-video/pull/23))
|
13
16
|
|
14
17
|
See
|
15
|
-
[1-
|
18
|
+
[1-1-stable branch](https://github.com/codevise/pageflow-embedded-video/blob/1-1-stable/CHANGELOG.md)
|
16
19
|
for previous changes.
|
data/Gemfile
CHANGED
@@ -3,4 +3,17 @@
|
|
3
3
|
//= require ./URI.js
|
4
4
|
//= require ./froogaloop.js
|
5
5
|
|
6
|
-
pageflow.embeddedVideo =
|
6
|
+
pageflow.embeddedVideo = {
|
7
|
+
providerFromUrl: function(url) {
|
8
|
+
var domain = new URI(url).domain(true);
|
9
|
+
|
10
|
+
if (['youtu.be', 'youtube.com'].indexOf(domain) >= 0) {
|
11
|
+
return 'youtube';
|
12
|
+
}
|
13
|
+
else if (domain === 'vimeo.com') {
|
14
|
+
return 'vimeo';
|
15
|
+
}
|
16
|
+
|
17
|
+
return '';
|
18
|
+
}
|
19
|
+
};
|
@@ -1,9 +1,6 @@
|
|
1
|
-
//= require_self
|
2
1
|
//= require_tree ./editor/models
|
3
2
|
//= require_tree ./editor/collections
|
4
3
|
//= require_tree ./editor/views/inputs
|
5
4
|
//= require_tree ./editor/templates
|
6
5
|
//= require_tree ./editor/views
|
7
6
|
//= require_tree ./editor/initializers
|
8
|
-
|
9
|
-
pageflow.embeddedVideo = pageflow.embeddedVideo || {};
|
@@ -13,6 +13,19 @@ pageflow.ConfigurationEditorView.register('embedded_video', {
|
|
13
13
|
required: true,
|
14
14
|
permitHttps: true
|
15
15
|
});
|
16
|
+
|
17
|
+
inputForProvider('youtube', this, 'embedded_video_hide_info', pageflow.CheckBoxInputView, {
|
18
|
+
disabled: true,
|
19
|
+
displayUncheckedIfDisabled: true
|
20
|
+
});
|
21
|
+
inputForProvider('youtube', this, 'embedded_video_hide_controls', pageflow.CheckBoxInputView);
|
22
|
+
|
23
|
+
inputForProvider('vimeo', this, 'embedded_video_hide_info', pageflow.CheckBoxInputView);
|
24
|
+
inputForProvider('vimeo', this, 'embedded_video_hide_controls', pageflow.CheckBoxInputView, {
|
25
|
+
disabled: true,
|
26
|
+
displayUncheckedIfDisabled: true
|
27
|
+
});
|
28
|
+
|
16
29
|
this.input('video_caption', pageflow.TextInputView);
|
17
30
|
this.input('full_width', pageflow.CheckBoxInputView);
|
18
31
|
this.group('background');
|
@@ -25,5 +38,18 @@ pageflow.ConfigurationEditorView.register('embedded_video', {
|
|
25
38
|
this.tab('options', function() {
|
26
39
|
this.group('options');
|
27
40
|
});
|
41
|
+
|
42
|
+
function inputForProvider(provider, view, propertyName, inputView, options) {
|
43
|
+
view.input(propertyName, inputView, _.extend({
|
44
|
+
attributeTranslationKeyPrefixes: [
|
45
|
+
'pageflow.embedded_video.page_attributes.' + provider,
|
46
|
+
'pageflow.embedded_video.page_attributes'
|
47
|
+
],
|
48
|
+
visibleBinding: 'display_embedded_video_url',
|
49
|
+
visible: function(url) {
|
50
|
+
return pageflow.embeddedVideo.providerFromUrl(url) === provider;
|
51
|
+
}
|
52
|
+
}, options));
|
53
|
+
}
|
28
54
|
}
|
29
|
-
});
|
55
|
+
});
|
@@ -39,7 +39,7 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
|
|
39
39
|
|
40
40
|
pageElement.toggleClass('page-with_split_layout', allowSplitLayout);
|
41
41
|
|
42
|
-
var splitLayout =
|
42
|
+
var splitLayout = pageflow.pageSplitLayout.pageIsWideEnough(pageElement) && allowSplitLayout;
|
43
43
|
|
44
44
|
iframeWrapper.add(scroller).toggleClass('widescreened', splitLayout);
|
45
45
|
|
@@ -69,21 +69,6 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
|
|
69
69
|
scroller.scroller('refresh');
|
70
70
|
},
|
71
71
|
|
72
|
-
wideEnoughForSplitLayout: function(pageElement) {
|
73
|
-
var pageTitle = pageElement.find('.page_header .title');
|
74
|
-
|
75
|
-
var pageTitleClientRect = pageTitle[0].getBoundingClientRect();
|
76
|
-
var pageClientRect = pageElement[0].getBoundingClientRect();
|
77
|
-
|
78
|
-
var spaceRightFromTitle = pageClientRect.right - pageTitleClientRect.right;
|
79
|
-
var spaceLeftFromTitle = pageTitleClientRect.left - pageClientRect.left;
|
80
|
-
var leftPositionedEmbedWidth = pageClientRect.width * 0.51;
|
81
|
-
var rightPositionedEmbedWidth = pageClientRect.width * 0.55;
|
82
|
-
|
83
|
-
return (spaceLeftFromTitle >= leftPositionedEmbedWidth ||
|
84
|
-
spaceRightFromTitle >= rightPositionedEmbedWidth);
|
85
|
-
},
|
86
|
-
|
87
72
|
prepare: function(pageElement, configuration) {},
|
88
73
|
|
89
74
|
activating: function(pageElement, configuration) {
|
@@ -137,7 +122,9 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
|
|
137
122
|
}
|
138
123
|
|
139
124
|
if (this.active) {
|
140
|
-
if (configuration.hasChanged('display_embedded_video_url')
|
125
|
+
if (configuration.hasChanged('display_embedded_video_url') ||
|
126
|
+
configuration.hasChanged('embedded_video_hide_info') ||
|
127
|
+
configuration.hasChanged('embedded_video_hide_controls')) {
|
141
128
|
this._removePlayer(pageElement, function() {
|
142
129
|
that._createPlayer(pageElement, configuration.attributes);
|
143
130
|
});
|
@@ -154,15 +141,15 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
|
|
154
141
|
_createPlayer: function(pageElement, configuration) {
|
155
142
|
var that = this,
|
156
143
|
url = configuration.display_embedded_video_url,
|
157
|
-
|
144
|
+
provider = pageflow.embeddedVideo.providerFromUrl(url);
|
158
145
|
|
159
|
-
if (
|
146
|
+
if (provider === 'youtube') {
|
160
147
|
this.ytApiInitialize().done(function () {
|
161
|
-
that._createYouTubePlayer(pageElement, url);
|
148
|
+
that._createYouTubePlayer(pageElement, url, configuration);
|
162
149
|
});
|
163
150
|
}
|
164
|
-
else if (
|
165
|
-
that._createVimeoPlayer(pageElement, url);
|
151
|
+
else if (provider == 'vimeo') {
|
152
|
+
that._createVimeoPlayer(pageElement, url, configuration);
|
166
153
|
}
|
167
154
|
},
|
168
155
|
|
@@ -183,7 +170,7 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
|
|
183
170
|
return window.youtubeInitialized;
|
184
171
|
},
|
185
172
|
|
186
|
-
_createYouTubePlayer: function(pageElement, url) {
|
173
|
+
_createYouTubePlayer: function(pageElement, url, configuration) {
|
187
174
|
var that = this,
|
188
175
|
div = document.createElement('div');
|
189
176
|
|
@@ -198,8 +185,9 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
|
|
198
185
|
width: '100%',
|
199
186
|
videoId: that._getVideoId(url),
|
200
187
|
playerVars: {
|
201
|
-
rel:
|
202
|
-
start: that._getVideoStartTime(url)
|
188
|
+
rel: '0',
|
189
|
+
start: that._getVideoStartTime(url),
|
190
|
+
controls: configuration.embedded_video_hide_controls ? '0' : '1'
|
203
191
|
},
|
204
192
|
events: {
|
205
193
|
'onReady': function(event) {
|
@@ -211,7 +199,7 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
|
|
211
199
|
});
|
212
200
|
},
|
213
201
|
|
214
|
-
_createVimeoPlayer: function(pageElement, url) {
|
202
|
+
_createVimeoPlayer: function(pageElement, url, configuration) {
|
215
203
|
var that = this,
|
216
204
|
iframe = document.createElement('iframe'),
|
217
205
|
uri = new URI('//player.vimeo.com/video/');
|
@@ -219,7 +207,15 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
|
|
219
207
|
this.playerId = 'vimeo-player-' + this._getRandom(url);
|
220
208
|
|
221
209
|
uri.filename(that._getVideoId(url));
|
222
|
-
uri.search({
|
210
|
+
uri.search({
|
211
|
+
api: '1',
|
212
|
+
player_id: this.playerId,
|
213
|
+
byline: configuration.embedded_video_hide_info ? '0' : '1',
|
214
|
+
title: configuration.embedded_video_hide_info ? '0' : '1',
|
215
|
+
portrait: configuration.embedded_video_hide_info ? '0' : '1'
|
216
|
+
});
|
217
|
+
|
218
|
+
uri.fragment(new URI(url).fragment());
|
223
219
|
|
224
220
|
$(iframe).attr({
|
225
221
|
id: this.playerId,
|
@@ -279,7 +275,7 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
|
|
279
275
|
containerAndCloseButton = pageElement.find('.iframe_container, .close_button'),
|
280
276
|
url = configuration.display_embedded_video_url;
|
281
277
|
|
282
|
-
$div.addClass('iframe_overlay ' +
|
278
|
+
$div.addClass('iframe_overlay ' + pageflow.embeddedVideo.providerFromUrl(url));
|
283
279
|
|
284
280
|
this._setBackgroundImage(url, $div);
|
285
281
|
pageHeader.after($div);
|
@@ -292,15 +288,15 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
|
|
292
288
|
},
|
293
289
|
|
294
290
|
_setBackgroundImage: function(url, element) {
|
295
|
-
var
|
291
|
+
var provider = pageflow.embeddedVideo.providerFromUrl(url),
|
296
292
|
videoId = this._getVideoId(url),
|
297
293
|
imageUrl = '';
|
298
294
|
|
299
|
-
if (
|
295
|
+
if (provider === 'youtube') {
|
300
296
|
imageUrl = 'http://img.youtube.com/vi/' + videoId + '/hqdefault.jpg';
|
301
297
|
element.css('background-image', 'url("' + imageUrl + '")');
|
302
298
|
}
|
303
|
-
else if (
|
299
|
+
else if (provider === 'vimeo') {
|
304
300
|
var src = "http://vimeo.com/api/v2/video/" + videoId + ".json";
|
305
301
|
|
306
302
|
$.getJSON(src, function(data) {
|
@@ -309,20 +305,6 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
|
|
309
305
|
}
|
310
306
|
},
|
311
307
|
|
312
|
-
_urlOrigin: function(url) {
|
313
|
-
var uri = new URI(url),
|
314
|
-
domain = uri.domain(true);
|
315
|
-
|
316
|
-
if (['youtu.be', 'youtube.com'].indexOf(domain) >= 0) {
|
317
|
-
return 'youtube';
|
318
|
-
}
|
319
|
-
else if (domain === 'vimeo.com') {
|
320
|
-
return 'vimeo';
|
321
|
-
}
|
322
|
-
|
323
|
-
return '';
|
324
|
-
},
|
325
|
-
|
326
308
|
_getVideoId: function(url) {
|
327
309
|
var uri = new URI(url),
|
328
310
|
domain = uri.domain(true);
|
@@ -363,6 +345,9 @@ pageflow.react.registerPageTypeWithDefaultBackground('embedded_video', {
|
|
363
345
|
var parts = timestamp.split('m');
|
364
346
|
return parseInt(parts[0], 10) * 60 + parseInt(parts[1] || 0, 10);
|
365
347
|
}
|
348
|
+
else if (timestamp.match(/\d+s/)) {
|
349
|
+
return parseInt(timestamp || 0, 10);
|
350
|
+
}
|
366
351
|
else {
|
367
352
|
return 0;
|
368
353
|
}
|
@@ -87,7 +87,7 @@
|
|
87
87
|
position: absolute;
|
88
88
|
width: 45%;
|
89
89
|
max-height: 600px;
|
90
|
-
|
90
|
+
@include position-end(10%);
|
91
91
|
margin-top: 0;
|
92
92
|
top: 50%;
|
93
93
|
@include transform(translate(0,-50%));
|
@@ -111,8 +111,8 @@
|
|
111
111
|
}
|
112
112
|
|
113
113
|
.text_position_right &.widescreened {
|
114
|
-
|
115
|
-
|
114
|
+
@include position-end(auto);
|
115
|
+
@include position-start(8%);
|
116
116
|
width: 42%;
|
117
117
|
}
|
118
118
|
|
data/config/locales/de.yml
CHANGED
@@ -11,6 +11,21 @@ de:
|
|
11
11
|
page_type:
|
12
12
|
menu_item: Embedded Video
|
13
13
|
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"
|
14
|
+
page_attributes:
|
15
|
+
embedded_video_hide_controls:
|
16
|
+
label: Steuerelemente ausblenden
|
17
|
+
embedded_video_hide_info:
|
18
|
+
label: Titel in Embed ausblenden
|
19
|
+
vimeo:
|
20
|
+
embedded_video_hide_controls:
|
21
|
+
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.
|
22
|
+
embedded_video_hide_info:
|
23
|
+
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.
|
24
|
+
youtube:
|
25
|
+
embedded_video_hide_controls:
|
26
|
+
inline_help: Blendet die YouTube-Steuerelemente aus. Das Video kann per Klick gestartet und pausiert werden.
|
27
|
+
embedded_video_hide_info:
|
28
|
+
inline_help: Diese Option steht für YouTube-Videos nicht zur Verfügung.
|
14
29
|
page_type_category_name: Media
|
15
30
|
page_type_description: Bettet ein externes Video von YouTube oder Vimeo ein
|
16
31
|
page_type_name: Embedded Video
|
data/config/locales/en.yml
CHANGED
@@ -11,6 +11,21 @@ en:
|
|
11
11
|
page_type:
|
12
12
|
menu_item: Embedded Video
|
13
13
|
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"
|
14
|
+
page_attributes:
|
15
|
+
embedded_video_hide_controls:
|
16
|
+
label: Hide controls
|
17
|
+
embedded_video_hide_info:
|
18
|
+
label: Hide title in embed
|
19
|
+
vimeo:
|
20
|
+
embedded_video_hide_controls:
|
21
|
+
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.
|
22
|
+
embedded_video_hide_info:
|
23
|
+
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.
|
24
|
+
youtube:
|
25
|
+
embedded_video_hide_controls:
|
26
|
+
inline_help: Hides the YouTube player controls. The video can be played and paused via click.
|
27
|
+
embedded_video_hide_info:
|
28
|
+
inline_help: This option is not supported by YouTube video embeds.
|
14
29
|
page_type_category_name: Media
|
15
30
|
page_type_description: Embed YouTube or Vimeo videos
|
16
31
|
page_type_name: Embedded Video
|
@@ -7,9 +7,14 @@ module Pageflow
|
|
7
7
|
attr_reader :supported_hosts
|
8
8
|
|
9
9
|
def initialize
|
10
|
-
@supported_hosts = %w
|
10
|
+
@supported_hosts = %w[
|
11
|
+
https://youtu.be
|
12
|
+
https://www.youtube.com
|
13
|
+
http://www.youtube.com
|
14
|
+
http://vimeo.com
|
15
|
+
https://vimeo.com
|
16
|
+
]
|
11
17
|
end
|
12
|
-
|
13
18
|
end
|
14
19
|
end
|
15
20
|
end
|
@@ -18,7 +18,7 @@ Gem::Specification.new do |spec|
|
|
18
18
|
|
19
19
|
spec.required_ruby_version = '~> 2.1'
|
20
20
|
|
21
|
-
spec.add_runtime_dependency 'pageflow', '
|
21
|
+
spec.add_runtime_dependency 'pageflow', ['>= 12.2.x', '< 14']
|
22
22
|
spec.add_runtime_dependency 'pageflow-public-i18n', '~> 1.0'
|
23
23
|
|
24
24
|
spec.add_development_dependency 'bundler', '~> 1.0'
|
metadata
CHANGED
@@ -1,29 +1,35 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: pageflow-embedded-video
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Codevise Solutions Ltd
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2018-12-10 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: pageflow
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
16
16
|
requirements:
|
17
|
-
- - "
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: 12.2.x
|
20
|
+
- - "<"
|
18
21
|
- !ruby/object:Gem::Version
|
19
|
-
version: '
|
22
|
+
version: '14'
|
20
23
|
type: :runtime
|
21
24
|
prerelease: false
|
22
25
|
version_requirements: !ruby/object:Gem::Requirement
|
23
26
|
requirements:
|
24
|
-
- - "
|
27
|
+
- - ">="
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: 12.2.x
|
30
|
+
- - "<"
|
25
31
|
- !ruby/object:Gem::Version
|
26
|
-
version: '
|
32
|
+
version: '14'
|
27
33
|
- !ruby/object:Gem::Dependency
|
28
34
|
name: pageflow-public-i18n
|
29
35
|
requirement: !ruby/object:Gem::Requirement
|
@@ -148,7 +154,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
148
154
|
version: '0'
|
149
155
|
requirements: []
|
150
156
|
rubyforge_project:
|
151
|
-
rubygems_version: 2.7.
|
157
|
+
rubygems_version: 2.7.5
|
152
158
|
signing_key:
|
153
159
|
specification_version: 4
|
154
160
|
summary: Pagetype for embedded youtube/vimeo videos
|