Skip to content

Commit d6bd251

Browse files
hiteshaggarwalhiteshaggarwal
committed
1.8.0 Video Element
1 parent 7b7096f commit d6bd251

File tree

4 files changed

+814
-0
lines changed

4 files changed

+814
-0
lines changed

‎plg_jdbuilder/elements/video/language/en-GB/en-GB.video.ini‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
; General
2+
JDB_VIDEO_TYPE="Video Type"
3+
JDB_VIDEO_UPLOAD="Upload"
4+
JDB_VIDEO_YOUTUBE="YouTube"
5+
JDB_VIDEO_VIMEO="Vimeo"
6+
JDB_VIDEO_DAILYMOTION="Dailymotion"
7+
JDB_VIDEO_SELECT_VIDEO="Select Video"
8+
JDB_VIDEO_LINK="Video Link"
9+
10+
; Video Options
11+
JDB_VIDEO_OPTIONS="Video Options"
12+
JDB_VIDEO_SIZE="Video Size"
13+
JDB_VIDEO_SIZE_16BY9="16:9"
14+
JDB_VIDEO_SIZE_21BY9="21:9"
15+
JDB_VIDEO_SIZE_4BY3="4:3"
16+
JDB_VIDEO_SIZE_1BY1="1:1"
17+
JDB_VIDEO_CONTROLS="Controls"
18+
JDB_VIDEO_CONTROLS_DESC="To enable controls of the video player."
19+
JDB_VIDEO_AUTOPLAY="Autoplay"
20+
JDB_VIDEO_MUTED="Muted"
21+
JDB_VIDEO_LOOP="Loop"
22+
JDB_VIDEO_THUMBNAIL_OVERLAY="Thumbnail & Overlay"
23+
JDB_VIDEO_THUMBNAIL="Thumbnail"
24+
JDB_VIDEO_CUSTOM_THUMBNAIL="Custom Thumbnail"
25+
JDB_VIDEO_OVERLAY_COLOR="Overlay Color"
26+
JDB_VIDEO_LIGHTBOX="Lightbox"
27+
JDB_VIDEO_LIGHTBOX_CONTENT_WIDTH="Lightbox Content Width"
28+
29+
; YouTube Options
30+
JDB_VIDEO_YOUTUBE_OPTIONS="YouTube Options"
31+
JDB_VIDEO_YOUTUBE_THUMBNAIL="Thumbnail Size"
32+
JDB_VIDEO_START_TIME="Start Time (MM:SS)"
33+
JDB_VIDEO_END_TIME="End Time (MM:SS)"
34+
JDB_VIDEO_MODEST_BRANDING="Modest Branding"
35+
JDB_VIDEO_PRIVACY_MODE="Privacy Mode"
36+
JDB_VIDEO_SUGGESTED_VIDEOS="Suggested Videos"
37+
JDB_VIDEO_YT_THUMBNAIL_DEFAULT="Low (120 x 90)"
38+
JDB_VIDEO_YT_THUMBNAIL_MQDEFAULT="Medium (320 x 180)"
39+
JDB_VIDEO_YT_THUMBNAIL_HQDEFAULT="High (480 x 360)"
40+
JDB_VIDEO_YT_THUMBNAIL_SDDEFAULT="Standard (640 x 480)"
41+
JDB_VIDEO_YT_THUMBNAIL_MAXRESDEFAULT="Maximum"
42+
43+
; Subscribe Bar
44+
JDB_VIDEO_SUBSCRIBE_BAR="Subscribe Bar"
45+
JDB_VIDEO_YOUTUBE_CHANNEL="YouTube Channel"
46+
JDB_VIDEO_CHANNEL_NAME="Channel Name"
47+
JDB_VIDEO_CHANNEL_ID="Channel ID"
48+
JDB_VIDEO_CHANNEL_NAME_ID="Channel Name/ID"
49+
JDB_VIDEO_LAYOUT="Layout"
50+
JDB_VIDEO_SUBSCRIBER_COUNT="Subscriber Count"
51+
JDB_VIDEO_SUBSCRIBE_TEXT="Subscribe Text"
52+
JDB_VIDEO_SUBSCRIBE_CHANNEL="Subscribe to our channel"
53+
JDB_VIDEO_BAR_TEXT_COLOR="Bar Text Color"
54+
JDB_VIDEO_BAR_BACKGROUND_COLOR="Bar Background Color"
55+
JDB_VIDEO_BAR_TYPOGRAPHY="Bar Typography"
56+
JDB_VIDEO_BAR_PADDING="Bar Padding"
57+
JDB_VIDEO_SPACING="Spacing"
58+
JDB_VIDEO_DEFAULT_BUTTON="Default (Button)"
59+
JDB_VIDEO_FULL="Full"
60+
61+
; Vimeo Options
62+
JDB_VIDEO_VIMEO_OPTIONS="Vimeo Options"
63+
JDB_VIDEO_INTRO_BYLINE="Intro Byline"
64+
JDB_VIDEO_INTRO_PORTRAIT="Intro Portrait"
65+
JDB_VIDEO_INTRO_TITLE="Intro Title"
66+
JDB_VIDEO_CONTROL_COLOR="Control's Color"
67+
68+
; Dailymotion Options
69+
JDB_VIDEO_DAILYMOTION_OPTIONS="Dailymotion Options"
70+
JDB_VIDEO_DAILYMOTION_LOGO="Dailymotion Logo"
71+
JDB_VIDEO_INFO="Video Info"
72+
JDB_VIDEO_TYPE="Type"
73+
74+
; Play Button
75+
JDB_VIDEO_PLAY_BUTTON="Play Button"
76+
JDB_VIDEO_SELECT_ICON="Select Icon"
77+
JDB_VIDEO_SELECT_IMAGE="Select Image"
78+
79+
; Sticky Video
80+
JDB_VIDEO_STICKY_VIDEO="Sticky Video"
81+
JDB_VIDEO_STICKY="Sticky"
82+
JDB_VIDEO_STICKY_WIDTH="Sticky Width"
83+
JDB_VIDEO_STICKY_POSITION="Sticky Position"
84+
JDB_VIDEO_SPACING_FROM_EDGES="Spacing from Edges"
85+
JDB_VIDEO_HIDE_STICKY_VIDEO="Hide Sticky Video On"
86+
JDB_VIDEO_STICKY_CLOSE_COLOR="Close Color"
87+
JDBUILDER_ELE_VIDEO_OPTIONS_LABEL="video Options"
88+
JDBUILDER_ELE_VIDEO_OPTIONS_DESC="Examples:<br/><strong>YouTube: </strong><code>https://www.youtube.com/watch?v=hesv-etwK_o&t=4s</code><br/><br/><strong>Vimeo: </strong><code>https://vimeo.com/132158651</code><br/><br/><strong>dailymotion: </strong><code>https://www.dailymotion.com/video/x5oi4n8</code>"
89+
JDBUILDER_ELE_VIDEO_OPTIONS_LABEL="Video Type"
90+
91+
92+
JDBUILDER_ELE_AUTOPLAY_LABEL="Autoplay"
93+
JDBUILDER_ELE_AUTOPLAY_DESC=""

‎plg_jdbuilder/elements/video/tmpl/default.js‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
(function () {
2+
3+
var JDBuilderElementVideo = function (element) {
4+
var videoType = element.params.get('videoType', 'html5');
5+
switch (videoType) {
6+
case 'html5':
7+
var video = JDBRenderer.Helper.mediaValue(element.params.get('video', ''));
8+
break;
9+
case 'youtube':
10+
var video = element.params.get('videoYoutubeLink', '');
11+
break;
12+
case 'vimeo':
13+
var video = element.params.get('videoVimeoLink', '');
14+
break;
15+
case 'dailymotion':
16+
var video = element.params.get('videoDailymotionLink', '');
17+
break;
18+
}
19+
if (video == '') {
20+
return '';
21+
}
22+
var _options = [];
23+
var uKey = [];
24+
uKey.push(JDBRenderer.Helper.hashCode(video));
25+
26+
_options.push('type:' + videoType);
27+
_options.push('thumbnail:' + (element.params.get('thumbnail', true) ? 'true' : 'false'));
28+
_options.push('controls:' + (element.params.get('controls', true) ? 'true' : 'false'));
29+
_options.push('autoplay:' + (element.params.get('autoplay', false) ? 'true' : 'false'));
30+
_options.push('muted:' + (element.params.get('muted', false) ? 'true' : 'false'));
31+
_options.push('loop:' + (element.params.get('loop', false) ? 'true' : 'false'));
32+
_options.push('sticky:' + (element.params.get('sticky', false) ? 'true' : 'false'));
33+
_options.push('stickyPosition:' + (element.params.get('stickyPosition', 'bottom-right')));
34+
_options.push('overlay:' + (element.params.get('overlayColor', '')));
35+
_options.push('size:' + (element.params.get('videoSize', '16by9')));
36+
_options.push('thumbnailSize:' + element.params.get('ytThumbnailSize', 'maxresdefault'));
37+
38+
var videoStartTime = element.params.get('videoStartTime', {
39+
hours: 0,
40+
minutes: 0
41+
});
42+
videoStartTime = (videoStartTime.hours * 60) + videoStartTime.minutes;
43+
44+
var videoEndTime = element.params.get('videoEndTime', {
45+
hours: 0,
46+
minutes: 0
47+
});
48+
videoEndTime = (videoEndTime.hours * 60) + videoEndTime.minutes;
49+
_options.push('ytmb:' + (element.params.get('ytModestBranding', false) ? 'true' : 'false'));
50+
_options.push('ytsv:' + (element.params.get('ytSuggestedVideos', false) ? 'true' : 'false'));
51+
52+
_options.push('start:' + videoStartTime);
53+
_options.push('end:' + videoEndTime);
54+
_options.push('hideOn:' + element.params.get('stickyHideOn', []).join('-'));
55+
var poster = '';
56+
if (element.params.get('poster', '') != '') {
57+
poster = JDBRenderer.Helper.mediaValue(element.params.get('poster', ''));
58+
}
59+
uKey.push(JDBRenderer.Helper.hashCode(poster));
60+
uKey.push(element.params.get('playButtonType', ''));
61+
uKey.push(element.params.get('playButtonIcon', ''));
62+
uKey.push(element.params.get('playButtonImage', ''));
63+
64+
var _subscriberBar = '';
65+
if (videoType == 'youtube' && element.params.get('ytSubscribeBar', false)) {
66+
var _subscriberBarOptions = [];
67+
_subscriberBarOptions.push(element.params.get('ytSubscribeChennelType', 'channel') + ':' + element.params.get('ytSubscribeChennel', ''));
68+
_subscriberBarOptions.push('layout:' + (element.params.get('ytSubscribeLayout', 'default')));
69+
_subscriberBarOptions.push('count:' + (element.params.get('ytSubscribeCount', true) ? 'default' : 'hidden'));
70+
_subscriberBar = '<div class="jdb-video-subscription-bar jdb-row jdb-no-gutters jdb-justify-content-center"><div class="jdb-col-md-auto jdb-d-flex jdb-align-items-center jdb-justify-content-center jdb-video-subscription-text"><div>' + element.params.get('ytSubscribeText', '') + '</div></div><div class="jdb-col-md-auto jdb-d-flex jdb-align-items-center jdb-justify-content-center jdb-video-subscription-button"><div class="jdb-d-inline-block"><div jdb-ytsubscribe="' + _subscriberBarOptions.join(';') + '"></div></div></div></div>';
71+
}
72+
73+
var _vimeoOptions = {};
74+
if (videoType === 'vimeo') {
75+
_vimeoOptions.byline = element.params.get('vimeoByline', true);
76+
_vimeoOptions.title = element.params.get('vimeoTitle', true);
77+
_vimeoOptions.portrait = element.params.get('vimeoPortrait', true);
78+
if (element.params.get('vimeoControlColor', '') !== '') {
79+
_vimeoOptions.color = element.params.get('vimeoControlColor', '').replace('#', '');
80+
}
81+
if ((_vimeoOptions.byline || _vimeoOptions.title || _vimeoOptions.portrait) && poster == '') {
82+
_options.push('thumbnail:false');
83+
}
84+
uKey.push(JDBRenderer.Helper.hashCode(JSON.stringify(_vimeoOptions)));
85+
}
86+
87+
var _dailymotionOptions = {};
88+
if (videoType === 'dailymotion') {
89+
_dailymotionOptions['ui-start-screen-info'] = element.params.get('dailymotionVideoInfo', true);
90+
_dailymotionOptions['queue-autoplay-next'] = false;
91+
_dailymotionOptions['ui-logo'] = element.params.get('dailymotionLogo', true);
92+
if ((_dailymotionOptions['ui-start-screen-info'] || _dailymotionOptions['ui-logo']) && poster == '') {
93+
_options.push('thumbnail:false');
94+
}
95+
uKey.push(JDBRenderer.Helper.hashCode(JSON.stringify(_dailymotionOptions)));
96+
}
97+
98+
element.addCss('overflow', 'hidden');
99+
if (_subscriberBar != '') {
100+
barStyling(element);
101+
}
102+
playButtonStyling(element);
103+
if (element.params.get('sticky', false)) {
104+
stickyStyling(element);
105+
}
106+
107+
_options.push('animation:' + element.params.get('playButtonAnimation', ''));
108+
109+
if (element.params.get('thumbnail', true) && element.params.get('lightbox', false) && poster != '') {
110+
_options.push('lightbox:jdb-video-lightbox-' + element.id);
111+
112+
var lightboxContent = JDBRenderer.ElementStyle('<#' + 'jdb-video-lightbox-' + element.id + '-content');
113+
element.addChildrenStyle([lightboxContent]);
114+
var lightboxContentWidth = element.params.get('lightboxContentWidth', null);
115+
if (JDBRenderer.Helper.checkSliderValue(lightboxContentWidth)) {
116+
lightboxContent.addCss('width', lightboxContentWidth.value + 'vw');
117+
}
118+
}else{
119+
_options.push('lightbox:');
120+
}
121+
122+
_options.push('ukey:' + JDBRenderer.Helper.hashCode(uKey.join('')));
123+
return '<div class="jdb-video-container"><div jdb-video="' + _options.join(';') + '" data-src="' + video + '" data-play="' + element.params.get('playButtonType', '') + '" data-play-icon="' + element.params.get('playButtonIcon', '') + '" data-play-image="' + JDBRenderer.Helper.mediaValue(element.params.get('playButtonImage', '')) + '" data-thumbnail="' + poster + '" data-vimeo=\'' + JSON.stringify(_vimeoOptions) + '\' data-dailymotion=\'' + JSON.stringify(_dailymotionOptions) + '\'></div>' + _subscriberBar + '</div>';
124+
};
125+
126+
function barStyling(element) {
127+
var barStyle = JDBRenderer.ElementStyle('.jdb-video-subscription-bar');
128+
var buttonStyle = JDBRenderer.ElementStyle('.jdb-ytsubscribe');
129+
130+
element.addChildrenStyle([barStyle, buttonStyle]);
131+
132+
barStyle.addCss("color", element.params.get('ytSubscribeColor', ''));
133+
barStyle.addCss("background-color", element.params.get('ytSubscribeBackground', ''));
134+
135+
var typography = element.params.get('ytSubscribeTypography', null);
136+
if (typography !== null) {
137+
JDBRenderer.DEVICES.forEach(function (_deviceObj) {
138+
if (_deviceObj.key in typography) {
139+
barStyle.addStyle(JDBRenderer.Helper.typographyValue(typography[_deviceObj.key]), _deviceObj.type);
140+
}
141+
});
142+
}
143+
144+
var padding = element.params.get('ytSubscribePadding', null);
145+
if (padding !== null) {
146+
JDBRenderer.DEVICES.forEach(function (_deviceObj) {
147+
if (_deviceObj.key in padding) {
148+
barStyle.addStyle(JDBRenderer.Helper.spacingValue(padding[_deviceObj.key], "padding"), _deviceObj.type);
149+
}
150+
});
151+
}
152+
153+
let spacing = element.params.get('ytSubscribeSpacing', null);
154+
if (spacing != null) {
155+
JDBRenderer.DEVICES.forEach(function (_deviceObj) {
156+
if ((_deviceObj.key in spacing) && JDBRenderer.Helper.checkSliderValue(spacing[_deviceObj.key])) {
157+
buttonStyle.addCss("margin-left", spacing[_deviceObj.key].value + 'px', _deviceObj.type);
158+
}
159+
});
160+
}
161+
}
162+
163+
function playButtonStyling(element) {
164+
if (element.params.get('playButtonType', '') === 'none') {
165+
return;
166+
}
167+
if (!element.params.get('thumbnail', true) || (element.params.get('thumbnail', true) && element.params.get('poster', '') == '')) {
168+
return;
169+
}
170+
var playStyle = JDBRenderer.ElementStyle('.jdb-video-playicon');
171+
var playHoverStyle = JDBRenderer.ElementStyle('.jdb-video-play:hover .jdb-video-playicon');
172+
element.addChildrenStyle([playStyle, playHoverStyle]);
173+
174+
if (element.params.get('playButtonType', '') != 'image') {
175+
playStyle.addCss("color", element.params.get('playButtonColor', ''));
176+
playHoverStyle.addCss("color", element.params.get('playButtonHoverColor', ''));
177+
playStyle.addCss("background-color", element.params.get('playButtonBackground', ''));
178+
playHoverStyle.addCss("background-color", element.params.get('playButtonHoverBackground', ''));
179+
}
180+
181+
182+
let spacing = element.params.get('playButtonSize', null);
183+
if (spacing != null) {
184+
JDBRenderer.DEVICES.forEach(function (_deviceObj) {
185+
if ((_deviceObj.key in spacing) && JDBRenderer.Helper.checkSliderValue(spacing[_deviceObj.key])) {
186+
playStyle.addCss("width", spacing[_deviceObj.key].value + 'px', _deviceObj.type);
187+
playStyle.addCss("height", spacing[_deviceObj.key].value + 'px', _deviceObj.type);
188+
playStyle.addCss("font-size", parseInt(spacing[_deviceObj.key].value * .6, 10) + 'px', _deviceObj.type);
189+
if (element.params.get('playButtonType', '') == 'image') {
190+
playStyle.addCss("padding", '0px', _deviceObj.type);
191+
} else {
192+
playStyle.addCss("padding", parseInt(spacing[_deviceObj.key].value / 5, 10) + 'px', _deviceObj.type);
193+
}
194+
}
195+
});
196+
}
197+
198+
199+
JDBRenderer.Helper.applyBorderValue(playStyle, element.params, "playButtonBorder");
200+
JDBRenderer.Helper.applyBorderValue(playHoverStyle, element.params, "playButtonHoverBorder");
201+
}
202+
203+
function stickyStyling(element) {
204+
var stickyStyle = JDBRenderer.ElementStyle('.jdb-video.jdb-video-sticky .jdb-video-wrapper');
205+
var wrapperStyle = JDBRenderer.ElementStyle('.jdb-video.jdb-video-sticky .jdb-video-play');
206+
var thumbnailStyle = JDBRenderer.ElementStyle('.jdb-video.jdb-video-sticky .jdb-video-play .jdb-video-thumbnail');
207+
var playerStyle = JDBRenderer.ElementStyle('.jdb-video.jdb-video-sticky .jdb-video-player');
208+
var closeStyle = JDBRenderer.ElementStyle('.jdb-video.jdb-video-sticky .jdb-video-sticky-close');
209+
element.addChildrenStyle([stickyStyle, thumbnailStyle, playerStyle, closeStyle, wrapperStyle]);
210+
211+
var width = element.params.get('stickyWidth', null);
212+
if (width != null) {
213+
JDBRenderer.DEVICES.forEach(function (_deviceObj) {
214+
if ((_deviceObj.key in width) && JDBRenderer.Helper.checkSliderValue(width[_deviceObj.key])) {
215+
if (width[_deviceObj.key].value != '' && width[_deviceObj.key].value != null) {
216+
stickyStyle.addCss('width', width[_deviceObj.key].value + width[_deviceObj.key].unit, _deviceObj.type);
217+
}
218+
}
219+
});
220+
}
221+
222+
var margin = element.params.get('stickySpacing', null);
223+
if (margin != null) {
224+
JDBRenderer.DEVICES.forEach(function (_deviceObj) {
225+
if (_deviceObj.key in margin) {
226+
stickyStyle.addStyle(JDBRenderer.Helper.spacingValue(margin[_deviceObj.key], "margin"), _deviceObj.type);
227+
}
228+
});
229+
}
230+
231+
232+
var padding = element.params.get('stickyPadding', null);
233+
if (padding !== null) {
234+
JDBRenderer.DEVICES.forEach(function (_deviceObj) {
235+
if (_deviceObj.key in padding) {
236+
wrapperStyle.addStyle(JDBRenderer.Helper.spacingValue(padding[_deviceObj.key], "padding"), _deviceObj.type);
237+
thumbnailStyle.addStyle(JDBRenderer.Helper.spacingValue(padding[_deviceObj.key], "padding"), _deviceObj.type);
238+
playerStyle.addStyle(JDBRenderer.Helper.spacingValue(padding[_deviceObj.key], "padding"), _deviceObj.type);
239+
}
240+
});
241+
}
242+
243+
244+
closeStyle.addCss('color', element.params.get('stickyCloseColor', ''));
245+
thumbnailStyle.addCss('background-color', element.params.get('stickyBackground', ''));
246+
playerStyle.addCss('background-color', element.params.get('stickyBackground', ''));
247+
}
248+
249+
window.JDBuilderElementVideo = JDBuilderElementVideo;
250+
251+
})();

0 commit comments

Comments
 (0)