cloudinary-video-player 3.12.1 → 3.12.2-edge.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/134.min.js +8 -0
- package/dist/309.min.js +6 -0
- package/dist/adaptive-streaming.js +9 -9
- package/dist/adaptive-streaming.min.js +2 -2
- package/dist/chapters.js +4 -4
- package/dist/chapters.min.js +3 -3
- package/dist/cld-player-core.js +37 -0
- package/dist/cld-player-core.min.js +6 -0
- package/dist/cld-video-player-lazy.js +494 -0
- package/dist/cld-video-player-lazy.min.js +6 -0
- package/dist/cld-video-player.css +2 -2
- package/dist/cld-video-player.js +366 -332
- package/dist/cld-video-player.light.js +366 -332
- package/dist/cld-video-player.light.min.js +4 -4
- package/dist/cld-video-player.min.css +2 -2
- package/dist/cld-video-player.min.js +4 -4
- package/dist/colors.js +4 -4
- package/dist/colors.min.js +2 -2
- package/dist/dash.js +6 -6
- package/dist/dash.min.js +2 -2
- package/dist/debug.js +8 -8
- package/dist/debug.min.js +3 -3
- package/dist/ima.js +9 -9
- package/dist/ima.min.js +2 -2
- package/dist/interaction-areas.js +11 -11
- package/dist/interaction-areas.min.js +2 -2
- package/dist/node_modules_lodash_throttle_js.js +8 -8
- package/dist/playlist.js +31 -31
- package/dist/playlist.min.js +3 -3
- package/dist/recommendations-overlay.js +10 -10
- package/dist/recommendations-overlay.min.js +2 -2
- package/dist/schema.json +19 -0
- package/dist/share.js +5 -5
- package/dist/share.min.js +3 -3
- package/dist/shoppable.js +12 -12
- package/dist/shoppable.min.js +2 -2
- package/dist/utils_fetch-config_js.js +81 -0
- package/dist/video-player_js.js +3111 -0
- package/dist/visual-search.js +7 -7
- package/dist/visual-search.min.js +2 -2
- package/lib/_commonjsHelpers.js +7 -0
- package/lib/_videojs-proxy.js +30294 -0
- package/lib/abr-strategies.js +31 -0
- package/lib/adaptive-streaming.js +468 -2
- package/lib/all.js +25 -2
- package/lib/chapters.js +205 -1
- package/lib/cld-video-player.min.css +5 -22
- package/lib/colors.js +59 -1
- package/lib/{schema.json → config/configSchema.json} +19 -0
- package/lib/dash.js +69943 -2
- package/lib/debug.js +322 -1
- package/lib/document.js +770 -0
- package/lib/download-button.js +48 -0
- package/lib/fetch-config.js +93 -0
- package/lib/ima.js +6851 -1
- package/lib/index.js +27 -0
- package/lib/interaction-areas.const.js +24 -0
- package/lib/interaction-areas.service.js +469 -0
- package/lib/lazy.js +20 -0
- package/lib/noop.js +33 -0
- package/lib/player-api.js +469 -0
- package/lib/player.js +7 -2
- package/lib/playlist-panel.js +602 -0
- package/lib/playlist.js +637 -1
- package/lib/querystring.js +81 -0
- package/lib/recommendations-overlay.js +320 -1
- package/lib/share.js +129 -1
- package/lib/shoppable-post-widget.js +572 -0
- package/lib/shoppable-widget.js +77 -0
- package/lib/throttle.js +318 -0
- package/lib/toNumber.js +134 -0
- package/lib/validators-functions.js +485 -0
- package/lib/video-player.js +16241 -0
- package/lib/videoPlayer.js +7 -2
- package/lib/videojs-contrib-hlsjs.js +37638 -0
- package/lib/visual-search.js +235 -1
- package/package.json +31 -15
- package/lib/adaptive-streaming.js.LICENSE.txt +0 -3
- package/lib/all.js.LICENSE.txt +0 -25
- package/lib/cld-video-player.js +0 -2
- package/lib/cld-video-player.js.LICENSE.txt +0 -21
- package/lib/dash.js.LICENSE.txt +0 -1842
- package/lib/interaction-areas.js +0 -1
- package/lib/player.js.LICENSE.txt +0 -21
- package/lib/shoppable.js +0 -1
- package/lib/videoPlayer.js.LICENSE.txt +0 -21
package/lib/index.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export { _ as videojs } from './_videojs-proxy.js';
|
|
2
|
+
import { n as createPlayerWithConfig, q as createVideoPlayer } from './video-player.js';
|
|
3
|
+
import { s as setupCloudinaryGlobal, a as createAsyncPlayer, c as createMultiplePlayers, f as createMultipleSync } from './player-api.js';
|
|
4
|
+
import './_commonjsHelpers.js';
|
|
5
|
+
import './validators-functions.js';
|
|
6
|
+
import './querystring.js';
|
|
7
|
+
|
|
8
|
+
const videoPlayer = function (id) {
|
|
9
|
+
let playerOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
10
|
+
let ready = arguments.length > 2 ? arguments[2] : undefined;
|
|
11
|
+
return createVideoPlayer(id, playerOptions, ready);
|
|
12
|
+
};
|
|
13
|
+
const videoPlayers = (selector, playerOptions, ready) => createMultipleSync(selector, playerOptions, ready, videoPlayer);
|
|
14
|
+
const player = function (id) {
|
|
15
|
+
let playerOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
16
|
+
let ready = arguments.length > 2 ? arguments[2] : undefined;
|
|
17
|
+
return createAsyncPlayer(id, playerOptions, ready, createPlayerWithConfig);
|
|
18
|
+
};
|
|
19
|
+
const players = (selector, playerOptions, ready) => createMultiplePlayers(selector, playerOptions, ready, player);
|
|
20
|
+
var cloudinary = setupCloudinaryGlobal({
|
|
21
|
+
videoPlayer,
|
|
22
|
+
videoPlayers,
|
|
23
|
+
player,
|
|
24
|
+
players
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
export { cloudinary as default, player, players, videoPlayer, videoPlayers };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
const INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME = 'cld-ia-layout-state';
|
|
2
|
+
const INTERACTION_AREAS_PREFIX = 'vp-ia';
|
|
3
|
+
const INTERACTION_AREAS_CONTAINER_CLASS_NAME = 'interaction-areas-container';
|
|
4
|
+
const INTERACTION_AREAS_TEMPLATE = {
|
|
5
|
+
PORTRAIT: 'portrait',
|
|
6
|
+
LANDSCAPE: 'landscape',
|
|
7
|
+
All: 'all',
|
|
8
|
+
CENTER: 'center'
|
|
9
|
+
};
|
|
10
|
+
const INTERACTION_AREAS_THEME = {
|
|
11
|
+
PULSING: 'pulsing',
|
|
12
|
+
SHADOWED: 'shadowed'
|
|
13
|
+
};
|
|
14
|
+
const TEMPLATE_INTERACTION_AREAS_VTT = {
|
|
15
|
+
[INTERACTION_AREAS_TEMPLATE.PORTRAIT]: 'https://res.cloudinary.com/prod/raw/upload/v1623772481/video-player/vtts/portrait.vtt',
|
|
16
|
+
[INTERACTION_AREAS_TEMPLATE.LANDSCAPE]: 'https://res.cloudinary.com/prod/raw/upload/v1623772303/video-player/vtts/landscape.vtt',
|
|
17
|
+
[INTERACTION_AREAS_TEMPLATE.All]: 'https://res.cloudinary.com/prod/raw/upload/v1623250266/video-player/vtts/all.vtt',
|
|
18
|
+
[INTERACTION_AREAS_TEMPLATE.CENTER]: 'https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt'
|
|
19
|
+
};
|
|
20
|
+
const INTERACTION_AREA_HAND_ICON = 'https://res.cloudinary.com/prod/image/upload/v1626764643/video-player/interaction-area-hand.svg';
|
|
21
|
+
const CLOSE_INTERACTION_AREA_LAYOUT_DELAY = 4500;
|
|
22
|
+
const DEFAULT_INTERACTION_ARE_TRANSITION = 250;
|
|
23
|
+
|
|
24
|
+
export { CLOSE_INTERACTION_AREA_LAYOUT_DELAY as C, DEFAULT_INTERACTION_ARE_TRANSITION as D, INTERACTION_AREA_HAND_ICON as I, TEMPLATE_INTERACTION_AREAS_VTT as T, INTERACTION_AREAS_PREFIX as a, INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME as b, INTERACTION_AREAS_CONTAINER_CLASS_NAME as c, INTERACTION_AREAS_THEME as d, INTERACTION_AREAS_TEMPLATE as e };
|
|
@@ -0,0 +1,469 @@
|
|
|
1
|
+
import { _ as _vjs } from './_videojs-proxy.js';
|
|
2
|
+
import { e as elementsCreator, a as get, s as styleElement, P as PLAYER_EVENT, b as addEventListener, c as addMetadataTrack, d as createElement } from './video-player.js';
|
|
3
|
+
import { t as throttle } from './throttle.js';
|
|
4
|
+
import { n as noop } from './noop.js';
|
|
5
|
+
import { I as INTERACTION_AREA_HAND_ICON, a as INTERACTION_AREAS_PREFIX, b as INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME, c as INTERACTION_AREAS_CONTAINER_CLASS_NAME, d as INTERACTION_AREAS_THEME, C as CLOSE_INTERACTION_AREA_LAYOUT_DELAY, T as TEMPLATE_INTERACTION_AREAS_VTT, D as DEFAULT_INTERACTION_ARE_TRANSITION } from './interaction-areas.const.js';
|
|
6
|
+
import { getDefaultPlayerColor } from './colors.js';
|
|
7
|
+
import './_commonjsHelpers.js';
|
|
8
|
+
import './validators-functions.js';
|
|
9
|
+
import './querystring.js';
|
|
10
|
+
import './player-api.js';
|
|
11
|
+
import './toNumber.js';
|
|
12
|
+
|
|
13
|
+
const themedButton = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
text,
|
|
16
|
+
onClick,
|
|
17
|
+
theme = '',
|
|
18
|
+
loadingDelay = 0
|
|
19
|
+
} = _ref;
|
|
20
|
+
return elementsCreator({
|
|
21
|
+
tag: 'button',
|
|
22
|
+
attr: {
|
|
23
|
+
class: `vp-theme-button theme-${theme}`
|
|
24
|
+
},
|
|
25
|
+
onClick,
|
|
26
|
+
children: [{
|
|
27
|
+
tag: 'div',
|
|
28
|
+
attr: {
|
|
29
|
+
class: 'vp-loading-bar'
|
|
30
|
+
},
|
|
31
|
+
style: {
|
|
32
|
+
'animation-duration': `${loadingDelay}ms`
|
|
33
|
+
}
|
|
34
|
+
}, {
|
|
35
|
+
tag: 'div',
|
|
36
|
+
attr: {
|
|
37
|
+
class: 'content'
|
|
38
|
+
},
|
|
39
|
+
children: text
|
|
40
|
+
}]
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
const BUTTON_THEME = {
|
|
45
|
+
TRANSPARENT_WHITE: 'transparent-white'
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const getInteractionAreaItemId = (item, index) => item.id || item.type || `id_${index}`;
|
|
49
|
+
const getInteractionAreaItem = (_ref, item, index, durationTime, onClick) => {
|
|
50
|
+
let {
|
|
51
|
+
playerOptions,
|
|
52
|
+
videojsOptions
|
|
53
|
+
} = _ref;
|
|
54
|
+
const defaultColor = getDefaultPlayerColor(videojsOptions);
|
|
55
|
+
const accentColor = playerOptions && playerOptions.colors ? playerOptions.colors.accent : defaultColor.accent;
|
|
56
|
+
|
|
57
|
+
// theme = 'pulsing' / 'shadowed'
|
|
58
|
+
const theme = get(videojsOptions, 'interactionDisplay.theme.template', INTERACTION_AREAS_THEME.PULSING);
|
|
59
|
+
return elementsCreator({
|
|
60
|
+
tag: 'div',
|
|
61
|
+
attr: {
|
|
62
|
+
class: `${INTERACTION_AREAS_PREFIX}-item theme-${theme}`,
|
|
63
|
+
'data-id': getInteractionAreaItemId(item, index)
|
|
64
|
+
},
|
|
65
|
+
style: {
|
|
66
|
+
left: `${item.left}%`,
|
|
67
|
+
top: `${item.top}%`,
|
|
68
|
+
width: `${item.width}%`,
|
|
69
|
+
height: `${item.height}%`,
|
|
70
|
+
transitionDuration: `${durationTime}ms`
|
|
71
|
+
},
|
|
72
|
+
event: {
|
|
73
|
+
name: 'click',
|
|
74
|
+
callback: onClick
|
|
75
|
+
},
|
|
76
|
+
children: [{
|
|
77
|
+
tag: 'div',
|
|
78
|
+
attr: {
|
|
79
|
+
class: `${INTERACTION_AREAS_PREFIX}-area-marker`
|
|
80
|
+
},
|
|
81
|
+
children: [{
|
|
82
|
+
tag: 'div',
|
|
83
|
+
attr: {
|
|
84
|
+
class: `${INTERACTION_AREAS_PREFIX}-marker-shadow`
|
|
85
|
+
},
|
|
86
|
+
style: {
|
|
87
|
+
[theme === INTERACTION_AREAS_THEME.SHADOWED ? 'backgroundColor' : 'borderColor']: accentColor
|
|
88
|
+
}
|
|
89
|
+
}, {
|
|
90
|
+
tag: 'div',
|
|
91
|
+
attr: {
|
|
92
|
+
class: `${INTERACTION_AREAS_PREFIX}-marker-main`
|
|
93
|
+
},
|
|
94
|
+
style: {
|
|
95
|
+
borderColor: accentColor
|
|
96
|
+
}
|
|
97
|
+
}]
|
|
98
|
+
}]
|
|
99
|
+
});
|
|
100
|
+
};
|
|
101
|
+
const percentageToFixedValue = (outOf, value) => outOf / (100 / +value);
|
|
102
|
+
const getZoomTransformation = (videoElement, interactionAreaItem) => {
|
|
103
|
+
const {
|
|
104
|
+
videoHeight,
|
|
105
|
+
videoWidth
|
|
106
|
+
} = videoElement;
|
|
107
|
+
const itemX = percentageToFixedValue(videoWidth, interactionAreaItem.left);
|
|
108
|
+
const itemY = percentageToFixedValue(videoHeight, interactionAreaItem.top);
|
|
109
|
+
const itemWidth = percentageToFixedValue(videoWidth, interactionAreaItem.width);
|
|
110
|
+
const itemHeight = percentageToFixedValue(videoHeight, interactionAreaItem.height);
|
|
111
|
+
const videoAspectRatio = videoWidth / videoHeight;
|
|
112
|
+
const itemAspectRatio = itemWidth / itemHeight;
|
|
113
|
+
const width = Math.round(itemAspectRatio > 1 || videoAspectRatio > 1 ? itemHeight * itemAspectRatio : itemWidth);
|
|
114
|
+
const height = Math.round(width / videoAspectRatio);
|
|
115
|
+
const x = Math.round(itemX - (width - itemWidth) / 2);
|
|
116
|
+
const y = Math.round(itemY - (height - itemHeight) / 2);
|
|
117
|
+
return {
|
|
118
|
+
width,
|
|
119
|
+
height,
|
|
120
|
+
x: Math.min(Math.max(x, 0), videoWidth - width),
|
|
121
|
+
y: Math.min(Math.max(y, 0), videoHeight - height),
|
|
122
|
+
crop: 'crop'
|
|
123
|
+
};
|
|
124
|
+
};
|
|
125
|
+
const setInteractionAreasContainer = (videojs, newInteractionAreasContainer) => {
|
|
126
|
+
const currentInteractionAreasContainer = getInteractionAreasContainer(videojs);
|
|
127
|
+
if (currentInteractionAreasContainer) {
|
|
128
|
+
currentInteractionAreasContainer.replaceWith(newInteractionAreasContainer);
|
|
129
|
+
} else {
|
|
130
|
+
// do not use element.append for ie11 support
|
|
131
|
+
videojs.el().appendChild(newInteractionAreasContainer);
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
const getInteractionAreaElementById = (interactionAreasContainer, item, index) => interactionAreasContainer.querySelector(`[data-id=${getInteractionAreaItemId(item, index)}]`);
|
|
135
|
+
const updateInteractionAreasItem = (videojs, configs, interactionAreasData, previousInteractionAreasData, durationTime, onClick) => {
|
|
136
|
+
const interactionAreasContainer = getInteractionAreasContainer(videojs);
|
|
137
|
+
interactionAreasData.forEach((item, index) => {
|
|
138
|
+
const itemElement = getInteractionAreaElementById(interactionAreasContainer, item, index);
|
|
139
|
+
const itemId = getInteractionAreaItemId(item);
|
|
140
|
+
const isExistItem = previousInteractionAreasData.some(i => getInteractionAreaItemId(i) === itemId);
|
|
141
|
+
|
|
142
|
+
// in case the element of the item is in the dom and exist in the previous data , it update the element position
|
|
143
|
+
if (isExistItem && itemElement) {
|
|
144
|
+
styleElement(itemElement, {
|
|
145
|
+
left: `${item.left}%`,
|
|
146
|
+
top: `${item.top}%`,
|
|
147
|
+
width: `${item.width}%`,
|
|
148
|
+
height: `${item.height}%`,
|
|
149
|
+
transitionDuration: `${durationTime}ms`
|
|
150
|
+
});
|
|
151
|
+
// if the element did not exist before , not in the dom and not in the previous data , it add a new element
|
|
152
|
+
} else if (!isExistItem && !itemElement) {
|
|
153
|
+
// do not use element.append for ie11 support
|
|
154
|
+
interactionAreasContainer.appendChild(getInteractionAreaItem(configs, item, index, durationTime, event => {
|
|
155
|
+
onClick({
|
|
156
|
+
event,
|
|
157
|
+
item,
|
|
158
|
+
index
|
|
159
|
+
});
|
|
160
|
+
}));
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
// checking the previous data for element that should be removed if not exist in the new data object.
|
|
165
|
+
previousInteractionAreasData.forEach((item, index) => {
|
|
166
|
+
const itemElement = getInteractionAreaElementById(interactionAreasContainer, item, index);
|
|
167
|
+
const itemId = getInteractionAreaItemId(item);
|
|
168
|
+
const shouldBeRemoved = !interactionAreasData.some(i => getInteractionAreaItemId(i) === itemId);
|
|
169
|
+
if (itemElement && shouldBeRemoved) {
|
|
170
|
+
// do not use element.remove for ie11 support
|
|
171
|
+
itemElement.parentNode.removeChild(itemElement);
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
};
|
|
175
|
+
const shouldShowAreaLayoutMessage = interactionAreasConfig => {
|
|
176
|
+
const isLayoutEnabled = get(interactionAreasConfig, 'layout.enable', true);
|
|
177
|
+
return isLayoutEnabled && localStorage.getItem(INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME) !== 'true';
|
|
178
|
+
};
|
|
179
|
+
const onClickInteractionAreaLayoutClick = function (checked) {
|
|
180
|
+
let onClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
|
|
181
|
+
localStorage.setItem(INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME, JSON.parse(checked));
|
|
182
|
+
onClick();
|
|
183
|
+
};
|
|
184
|
+
const createInteractionAreaLayoutMessage = function (videojs, onClick) {
|
|
185
|
+
let showItAgainCheckbox = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
186
|
+
let checked = false;
|
|
187
|
+
const id = `checkbox_${Math.round(Math.random() * 10000)}`;
|
|
188
|
+
const tracksContainer = elementsCreator({
|
|
189
|
+
tag: 'div',
|
|
190
|
+
attr: {
|
|
191
|
+
class: `${INTERACTION_AREAS_CONTAINER_CLASS_NAME} ${INTERACTION_AREAS_PREFIX}-layout-message ${showItAgainCheckbox ? '' : 'clickable'}`
|
|
192
|
+
},
|
|
193
|
+
onClick: !showItAgainCheckbox ? () => onClickInteractionAreaLayoutClick(checked, onClick) : null,
|
|
194
|
+
children: [{
|
|
195
|
+
tag: 'img',
|
|
196
|
+
attr: {
|
|
197
|
+
class: `${INTERACTION_AREAS_PREFIX}-layout-icon`,
|
|
198
|
+
src: INTERACTION_AREA_HAND_ICON
|
|
199
|
+
}
|
|
200
|
+
}, {
|
|
201
|
+
tag: 'h3',
|
|
202
|
+
attr: {
|
|
203
|
+
class: `${INTERACTION_AREAS_PREFIX}-layout-message-title`
|
|
204
|
+
},
|
|
205
|
+
children: 'Tap on dots to zoom for a product.'
|
|
206
|
+
}, themedButton({
|
|
207
|
+
text: 'Got it',
|
|
208
|
+
theme: BUTTON_THEME.TRANSPARENT_WHITE,
|
|
209
|
+
loadingDelay: showItAgainCheckbox ? 0 : CLOSE_INTERACTION_AREA_LAYOUT_DELAY,
|
|
210
|
+
onClick: showItAgainCheckbox ? () => onClickInteractionAreaLayoutClick(checked, onClick) : null
|
|
211
|
+
}), showItAgainCheckbox && {
|
|
212
|
+
tag: 'div',
|
|
213
|
+
attr: {
|
|
214
|
+
class: `${INTERACTION_AREAS_PREFIX}-layout-message-do-not-show`
|
|
215
|
+
},
|
|
216
|
+
children: [{
|
|
217
|
+
tag: 'input',
|
|
218
|
+
attr: {
|
|
219
|
+
type: 'checkbox',
|
|
220
|
+
class: `${INTERACTION_AREAS_PREFIX}-layout-message-checkbox`,
|
|
221
|
+
id
|
|
222
|
+
},
|
|
223
|
+
event: {
|
|
224
|
+
name: 'input',
|
|
225
|
+
callback: event => {
|
|
226
|
+
checked = event.target.checked;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
}, {
|
|
230
|
+
tag: 'label',
|
|
231
|
+
attr: {
|
|
232
|
+
class: `${INTERACTION_AREAS_PREFIX}-layout-message-checkbox-title`,
|
|
233
|
+
for: id
|
|
234
|
+
},
|
|
235
|
+
children: 'Don׳t show it again'
|
|
236
|
+
}]
|
|
237
|
+
}].filter(i => i)
|
|
238
|
+
});
|
|
239
|
+
setInteractionAreasContainer(videojs, tracksContainer);
|
|
240
|
+
};
|
|
241
|
+
const getInteractionAreasContainer = videojs => videojs.el().querySelector(`.${INTERACTION_AREAS_CONTAINER_CLASS_NAME}`);
|
|
242
|
+
const removeInteractionAreasContainer = videojs => {
|
|
243
|
+
const interactionAreasContainer = getInteractionAreasContainer(videojs);
|
|
244
|
+
|
|
245
|
+
// do not use element.remove for ie11 support
|
|
246
|
+
interactionAreasContainer && interactionAreasContainer.parentNode.removeChild(interactionAreasContainer);
|
|
247
|
+
};
|
|
248
|
+
const setInteractionAreasContainerSize = (videojs, videoElement) => {
|
|
249
|
+
const interactionAreasContainer = getInteractionAreasContainer(videojs);
|
|
250
|
+
if (!interactionAreasContainer) {
|
|
251
|
+
return;
|
|
252
|
+
}
|
|
253
|
+
const {
|
|
254
|
+
videoHeight,
|
|
255
|
+
videoWidth
|
|
256
|
+
} = videoElement;
|
|
257
|
+
const videoAspectRatio = videoWidth / videoHeight;
|
|
258
|
+
const width = videoAspectRatio * videoElement.clientHeight;
|
|
259
|
+
interactionAreasContainer.style.width = `${videoElement.clientWidth < width ? '100%' : width}px`;
|
|
260
|
+
interactionAreasContainer.style.height = videoElement.clientWidth < width ? `${videoElement.clientWidth / videoAspectRatio}px` : '100%';
|
|
261
|
+
};
|
|
262
|
+
|
|
263
|
+
const interactionAreasService = (player, playerOptions, videojsOptions) => {
|
|
264
|
+
let isZoomed = false;
|
|
265
|
+
let currentSource = null;
|
|
266
|
+
let currentTrack = null;
|
|
267
|
+
let unZoom = noop;
|
|
268
|
+
const shouldLayoutMessage = () => shouldShowAreaLayoutMessage(videojsOptions.interactionDisplay);
|
|
269
|
+
const getIsSyncOffsetTime = () => {
|
|
270
|
+
const interactionAreasConfig = getInteractionAreasConfig();
|
|
271
|
+
return interactionAreasConfig && interactionAreasConfig.syncOffsetTime !== undefined ? interactionAreasConfig.syncOffsetTime : false;
|
|
272
|
+
};
|
|
273
|
+
function isInteractionAreasEnabled() {
|
|
274
|
+
let enabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
275
|
+
const interactionAreasConfig = getInteractionAreasConfig();
|
|
276
|
+
return enabled || interactionAreasConfig && interactionAreasConfig.enable;
|
|
277
|
+
}
|
|
278
|
+
function setAreasPositionListener() {
|
|
279
|
+
currentTrack && player.videojs.removeRemoteTextTrack(currentTrack);
|
|
280
|
+
const isEnabled = isInteractionAreasEnabled();
|
|
281
|
+
const interactionAreasConfig = getInteractionAreasConfig();
|
|
282
|
+
if (!isEnabled || isZoomed) {
|
|
283
|
+
return null;
|
|
284
|
+
}
|
|
285
|
+
if (Array.isArray(interactionAreasConfig.template)) {
|
|
286
|
+
addInteractionAreasItems(interactionAreasConfig.template);
|
|
287
|
+
setContainerSize();
|
|
288
|
+
} else {
|
|
289
|
+
const vttUrl = interactionAreasConfig.vttUrl || TEMPLATE_INTERACTION_AREAS_VTT[interactionAreasConfig.template];
|
|
290
|
+
if (vttUrl) {
|
|
291
|
+
currentTrack = addMetadataTrack(player.videojs, vttUrl);
|
|
292
|
+
addCueListener(currentTrack);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
function setGoBackButton() {
|
|
297
|
+
const button = createElement('div', {
|
|
298
|
+
'class': 'go-back-button'
|
|
299
|
+
});
|
|
300
|
+
button.addEventListener('click', () => {
|
|
301
|
+
unZoom();
|
|
302
|
+
}, false);
|
|
303
|
+
const tracksContainer = createElement('div', {
|
|
304
|
+
'class': INTERACTION_AREAS_CONTAINER_CLASS_NAME
|
|
305
|
+
}, button);
|
|
306
|
+
setInteractionAreasContainer(player.videojs, tracksContainer);
|
|
307
|
+
}
|
|
308
|
+
function getInteractionAreasConfig() {
|
|
309
|
+
const {
|
|
310
|
+
cldSrc
|
|
311
|
+
} = currentSource;
|
|
312
|
+
return cldSrc && cldSrc.interactionAreas();
|
|
313
|
+
}
|
|
314
|
+
function removeLayoutMessage() {
|
|
315
|
+
removeInteractionAreasContainer(player.videojs);
|
|
316
|
+
setAreasPositionListener();
|
|
317
|
+
player.play();
|
|
318
|
+
}
|
|
319
|
+
function setLayoutMessage() {
|
|
320
|
+
if (!isInteractionAreasEnabled()) {
|
|
321
|
+
return;
|
|
322
|
+
}
|
|
323
|
+
if (shouldLayoutMessage()) {
|
|
324
|
+
let layoutMessageTimout = null;
|
|
325
|
+
const showItAgainCheckbox = get(videojsOptions, 'interactionDisplay.layout.showAgain', false);
|
|
326
|
+
player.pause();
|
|
327
|
+
createInteractionAreaLayoutMessage(player.videojs, () => {
|
|
328
|
+
clearTimeout(layoutMessageTimout);
|
|
329
|
+
removeLayoutMessage();
|
|
330
|
+
}, showItAgainCheckbox);
|
|
331
|
+
if (!showItAgainCheckbox) {
|
|
332
|
+
layoutMessageTimout = setTimeout(removeLayoutMessage, CLOSE_INTERACTION_AREA_LAYOUT_DELAY);
|
|
333
|
+
}
|
|
334
|
+
} else {
|
|
335
|
+
removeLayoutMessage();
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
function handleAds() {
|
|
339
|
+
player.on('adsready', () => {
|
|
340
|
+
player.videojs.ima.addEventListener(window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED, setLayoutMessage);
|
|
341
|
+
});
|
|
342
|
+
}
|
|
343
|
+
function init() {
|
|
344
|
+
currentSource = currentSource || player.videojs.currentSource();
|
|
345
|
+
if (isInteractionAreasEnabled()) {
|
|
346
|
+
player.videojs.el().classList.add('interaction-areas');
|
|
347
|
+
player.videojs.one(PLAYER_EVENT.PLAY, () => {
|
|
348
|
+
if (typeof player.videojs.ima === 'object') {
|
|
349
|
+
handleAds();
|
|
350
|
+
} else {
|
|
351
|
+
setLayoutMessage();
|
|
352
|
+
}
|
|
353
|
+
});
|
|
354
|
+
const setInteractionAreasContainerSize = throttle(setContainerSize, 100);
|
|
355
|
+
player.videojs.on(PLAYER_EVENT.FULL_SCREEN_CHANGE, () => {
|
|
356
|
+
// waiting for fullscreen will end
|
|
357
|
+
setTimeout(setInteractionAreasContainerSize, 100);
|
|
358
|
+
});
|
|
359
|
+
const resizeDestroy = addEventListener(window, 'resize', setContainerSize);
|
|
360
|
+
player.videojs.on(PLAYER_EVENT.DISPOSE, resizeDestroy);
|
|
361
|
+
}
|
|
362
|
+
player.videojs.on(PLAYER_EVENT.ENDED, () => {
|
|
363
|
+
unZoom();
|
|
364
|
+
});
|
|
365
|
+
player.videojs.on(PLAYER_EVENT.ERROR, () => {
|
|
366
|
+
player.pause();
|
|
367
|
+
});
|
|
368
|
+
}
|
|
369
|
+
function onZoom(src, newOption, item) {
|
|
370
|
+
const originalCurrentTime = player.currentTime();
|
|
371
|
+
const isSyncOffsetTime = getIsSyncOffsetTime();
|
|
372
|
+
const {
|
|
373
|
+
cldSrc
|
|
374
|
+
} = currentSource;
|
|
375
|
+
const currentSrcOptions = cldSrc.getInitOptions();
|
|
376
|
+
const option = newOption || {
|
|
377
|
+
transformation: currentSrcOptions.transformation
|
|
378
|
+
};
|
|
379
|
+
const transformation = !src && getZoomTransformation(player.videoElement, item);
|
|
380
|
+
const sourceOptions = transformation ? _vjs.obj.merge({
|
|
381
|
+
transformation
|
|
382
|
+
}, option) : option;
|
|
383
|
+
const newSource = cldSrc.isRawUrl ? currentSource.src : {
|
|
384
|
+
publicId: cldSrc.publicId()
|
|
385
|
+
};
|
|
386
|
+
player.source(transformation ? {
|
|
387
|
+
publicId: cldSrc.publicId()
|
|
388
|
+
} : src, sourceOptions).play();
|
|
389
|
+
isSyncOffsetTime && player.currentTime(originalCurrentTime);
|
|
390
|
+
isZoomed = true;
|
|
391
|
+
setGoBackButton();
|
|
392
|
+
unZoom = () => {
|
|
393
|
+
if (isZoomed) {
|
|
394
|
+
isZoomed = false;
|
|
395
|
+
const currentZoomedTime = player.currentTime();
|
|
396
|
+
const duration = player.duration();
|
|
397
|
+
player.source(newSource, currentSrcOptions).play();
|
|
398
|
+
isSyncOffsetTime && currentZoomedTime < duration && player.currentTime(currentZoomedTime);
|
|
399
|
+
setAreasPositionListener();
|
|
400
|
+
}
|
|
401
|
+
};
|
|
402
|
+
}
|
|
403
|
+
function onInteractionAreasClick(_ref) {
|
|
404
|
+
let {
|
|
405
|
+
event,
|
|
406
|
+
item,
|
|
407
|
+
index
|
|
408
|
+
} = _ref;
|
|
409
|
+
const interactionAreasConfig = getInteractionAreasConfig();
|
|
410
|
+
interactionAreasConfig.onClick && interactionAreasConfig.onClick({
|
|
411
|
+
item,
|
|
412
|
+
index,
|
|
413
|
+
event,
|
|
414
|
+
zoom: (source, option) => {
|
|
415
|
+
onZoom(source, option, item);
|
|
416
|
+
}
|
|
417
|
+
});
|
|
418
|
+
}
|
|
419
|
+
function addInteractionAreasItems(interactionAreasData, previousInteractionAreasData) {
|
|
420
|
+
let durationTime = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
421
|
+
const configs = {
|
|
422
|
+
playerOptions: playerOptions,
|
|
423
|
+
videojsOptions: videojsOptions
|
|
424
|
+
};
|
|
425
|
+
if (previousInteractionAreasData) {
|
|
426
|
+
updateInteractionAreasItem(player.videojs, configs, interactionAreasData, previousInteractionAreasData, durationTime, onInteractionAreasClick);
|
|
427
|
+
} else {
|
|
428
|
+
const interactionAreasItems = interactionAreasData.map((item, index) => {
|
|
429
|
+
return getInteractionAreaItem(configs, item, index, durationTime, event => {
|
|
430
|
+
onInteractionAreasClick({
|
|
431
|
+
event,
|
|
432
|
+
item,
|
|
433
|
+
index
|
|
434
|
+
});
|
|
435
|
+
});
|
|
436
|
+
});
|
|
437
|
+
setInteractionAreasContainer(player.videojs, createElement('div', {
|
|
438
|
+
'class': INTERACTION_AREAS_CONTAINER_CLASS_NAME
|
|
439
|
+
}, interactionAreasItems));
|
|
440
|
+
}
|
|
441
|
+
}
|
|
442
|
+
function setContainerSize() {
|
|
443
|
+
if (isInteractionAreasEnabled()) {
|
|
444
|
+
setInteractionAreasContainerSize(player.videojs, player.videoElement);
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
function addCueListener(track) {
|
|
448
|
+
if (!track) {
|
|
449
|
+
return;
|
|
450
|
+
}
|
|
451
|
+
let previousTracksData = null;
|
|
452
|
+
track.addEventListener('cuechange', () => {
|
|
453
|
+
const activeCue = track.activeCues && track.activeCues[0];
|
|
454
|
+
if (activeCue) {
|
|
455
|
+
const durationTime = Math.max(Math.floor((activeCue.endTime - activeCue.startTime) * 1000), DEFAULT_INTERACTION_ARE_TRANSITION);
|
|
456
|
+
const tracksData = JSON.parse(activeCue.text);
|
|
457
|
+
addInteractionAreasItems(tracksData, previousTracksData, durationTime);
|
|
458
|
+
!previousTracksData && setContainerSize();
|
|
459
|
+
previousTracksData = tracksData;
|
|
460
|
+
} else {
|
|
461
|
+
removeInteractionAreasContainer(player.videojs);
|
|
462
|
+
previousTracksData = null;
|
|
463
|
+
}
|
|
464
|
+
});
|
|
465
|
+
}
|
|
466
|
+
init();
|
|
467
|
+
};
|
|
468
|
+
|
|
469
|
+
export { interactionAreasService };
|
package/lib/lazy.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { s as setupCloudinaryGlobal, c as createMultiplePlayers, a as createAsyncPlayer } from './player-api.js';
|
|
2
|
+
import './_commonjsHelpers.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Lazy entry: tiny initial bundle, player core loads on demand.
|
|
6
|
+
* Only player()/players() are available. For sync videoPlayer(), use the full bundle.
|
|
7
|
+
*/
|
|
8
|
+
const player = (id, playerOptions, ready) => createAsyncPlayer(id, playerOptions, ready, async (videoElement, opts, r) => {
|
|
9
|
+
const {
|
|
10
|
+
videoPlayer
|
|
11
|
+
} = await import(/* webpackChunkName: "cld-player-core" */'./index.js');
|
|
12
|
+
return videoPlayer(videoElement, opts, r);
|
|
13
|
+
});
|
|
14
|
+
const players = (selector, playerOptions, ready) => createMultiplePlayers(selector, playerOptions, ready, player);
|
|
15
|
+
var index_lazy = setupCloudinaryGlobal({
|
|
16
|
+
player,
|
|
17
|
+
players
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
export { index_lazy as default, player, players };
|
package/lib/noop.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* This method returns `undefined`.
|
|
5
|
+
*
|
|
6
|
+
* @static
|
|
7
|
+
* @memberOf _
|
|
8
|
+
* @since 2.3.0
|
|
9
|
+
* @category Util
|
|
10
|
+
* @example
|
|
11
|
+
*
|
|
12
|
+
* _.times(2, _.noop);
|
|
13
|
+
* // => [undefined, undefined]
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
var noop_1;
|
|
17
|
+
var hasRequiredNoop;
|
|
18
|
+
|
|
19
|
+
function requireNoop () {
|
|
20
|
+
if (hasRequiredNoop) return noop_1;
|
|
21
|
+
hasRequiredNoop = 1;
|
|
22
|
+
function noop() {
|
|
23
|
+
// No operation performed.
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
noop_1 = noop;
|
|
27
|
+
return noop_1;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
var noopExports = requireNoop();
|
|
31
|
+
var noop = /*@__PURE__*/getDefaultExportFromCjs(noopExports);
|
|
32
|
+
|
|
33
|
+
export { noop as n };
|