videojs-mobile-ui 0.7.0 → 1.0.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/README.md +14 -4
- package/dist/lang/de.js +3 -0
- package/dist/lang/en.js +1 -1
- package/dist/lang/it.js +3 -0
- package/dist/videojs-mobile-ui.cjs.js +124 -190
- package/dist/videojs-mobile-ui.css +2 -2
- package/dist/videojs-mobile-ui.es.js +124 -189
- package/dist/videojs-mobile-ui.js +131 -236
- package/dist/videojs-mobile-ui.min.js +2 -2
- package/index.html +175 -102
- package/package.json +14 -11
- package/src/plugin.css +13 -1
- package/src/plugin.js +23 -41
- package/src/touchOverlay.js +46 -56
- package/CHANGELOG.md +0 -64
|
@@ -1,68 +1,29 @@
|
|
|
1
|
-
/*! @name videojs-mobile-ui @version 0.
|
|
1
|
+
/*! @name videojs-mobile-ui @version 1.0.0 @license MIT */
|
|
2
2
|
(function (global, factory) {
|
|
3
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')
|
|
4
|
-
typeof define === 'function' && define.amd ? define(['video.js'
|
|
5
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsMobileUi = factory(global.videojs
|
|
6
|
-
}(this, (function (videojs
|
|
3
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
|
|
4
|
+
typeof define === 'function' && define.amd ? define(['video.js'], factory) :
|
|
5
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsMobileUi = factory(global.videojs));
|
|
6
|
+
}(this, (function (videojs) { 'use strict';
|
|
7
7
|
|
|
8
8
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
9
|
|
|
10
10
|
var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
|
|
11
|
-
var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
|
|
12
11
|
|
|
13
|
-
var version = "0.
|
|
12
|
+
var version = "1.0.0";
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
}, fn(module, module.exports), module.exports;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function commonjsRequire () {
|
|
26
|
-
throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
var setPrototypeOf = createCommonjsModule(function (module) {
|
|
30
|
-
function _setPrototypeOf(o, p) {
|
|
31
|
-
module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
|
32
|
-
o.__proto__ = p;
|
|
33
|
-
return o;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
module.exports["default"] = module.exports, module.exports.__esModule = true;
|
|
37
|
-
return _setPrototypeOf(o, p);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
module.exports = _setPrototypeOf;
|
|
41
|
-
module.exports["default"] = module.exports, module.exports.__esModule = true;
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
var inheritsLoose = createCommonjsModule(function (module) {
|
|
45
|
-
function _inheritsLoose(subClass, superClass) {
|
|
46
|
-
subClass.prototype = Object.create(superClass.prototype);
|
|
47
|
-
subClass.prototype.constructor = subClass;
|
|
48
|
-
setPrototypeOf(subClass, superClass);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
module.exports = _inheritsLoose;
|
|
52
|
-
module.exports["default"] = module.exports, module.exports.__esModule = true;
|
|
53
|
-
});
|
|
14
|
+
/**
|
|
15
|
+
* @file touchOverlay.js
|
|
16
|
+
* Touch UI component
|
|
17
|
+
*/
|
|
18
|
+
const Component = videojs__default['default'].getComponent('Component');
|
|
19
|
+
const dom = videojs__default['default'].dom || videojs__default['default'];
|
|
54
20
|
|
|
55
|
-
var Component = videojs__default['default'].getComponent('Component');
|
|
56
|
-
var dom = videojs__default['default'].dom || videojs__default['default'];
|
|
57
21
|
/**
|
|
58
22
|
* The `TouchOverlay` is an overlay to capture tap events.
|
|
59
23
|
*
|
|
60
24
|
* @extends Component
|
|
61
25
|
*/
|
|
62
|
-
|
|
63
|
-
var TouchOverlay = /*#__PURE__*/function (_Component) {
|
|
64
|
-
inheritsLoose(TouchOverlay, _Component);
|
|
65
|
-
|
|
26
|
+
class TouchOverlay extends Component {
|
|
66
27
|
/**
|
|
67
28
|
* Creates an instance of the this class.
|
|
68
29
|
*
|
|
@@ -72,46 +33,80 @@
|
|
|
72
33
|
* @param {Object} [options]
|
|
73
34
|
* The key/value store of player options.
|
|
74
35
|
*/
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
player.on(['playing', 'userinactive'],
|
|
86
|
-
|
|
87
|
-
});
|
|
36
|
+
constructor(player, options) {
|
|
37
|
+
super(player, options);
|
|
38
|
+
this.seekSeconds = options.seekSeconds;
|
|
39
|
+
this.tapTimeout = options.tapTimeout;
|
|
40
|
+
this.taps = 0;
|
|
41
|
+
|
|
42
|
+
// Add play toggle overlay
|
|
43
|
+
this.addChild('playToggle', {});
|
|
44
|
+
|
|
45
|
+
// Clear overlay when playback starts or with control fade
|
|
46
|
+
player.on(['playing', 'userinactive'], e => {
|
|
47
|
+
this.removeClass('show-play-toggle');
|
|
48
|
+
});
|
|
88
49
|
|
|
89
|
-
|
|
90
|
-
|
|
50
|
+
// A 0 inactivity timeout won't work here
|
|
51
|
+
if (this.player_.options_.inactivityTimeout === 0) {
|
|
52
|
+
this.player_.options_.inactivityTimeout = 5000;
|
|
91
53
|
}
|
|
92
54
|
|
|
93
|
-
|
|
55
|
+
/**
|
|
56
|
+
* Debounced tap handler.
|
|
57
|
+
* Seeks number of (taps - 1) * configured seconds to skip.
|
|
58
|
+
* One tap is a non-op
|
|
59
|
+
*
|
|
60
|
+
* @param {Event} event
|
|
61
|
+
*/
|
|
62
|
+
this.handleTaps_ = videojs__default['default'].fn.debounce(event => {
|
|
63
|
+
const increment = (this.taps - 1) * this.seekSeconds;
|
|
64
|
+
this.taps = 0;
|
|
65
|
+
if (increment < 1) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
const rect = this.el_.getBoundingClientRect();
|
|
69
|
+
const x = event.changedTouches[0].clientX - rect.left;
|
|
70
|
+
|
|
71
|
+
// Check if double tap is in left or right area
|
|
72
|
+
if (x < rect.width * 0.4) {
|
|
73
|
+
this.player_.currentTime(Math.max(0, this.player_.currentTime() - increment));
|
|
74
|
+
this.addClass('reverse');
|
|
75
|
+
} else if (x > rect.width - rect.width * 0.4) {
|
|
76
|
+
this.player_.currentTime(Math.min(this.player_.duration(), this.player_.currentTime() + increment));
|
|
77
|
+
this.removeClass('reverse');
|
|
78
|
+
} else {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// Remove play toggle if showing
|
|
83
|
+
this.removeClass('show-play-toggle');
|
|
94
84
|
|
|
95
|
-
|
|
85
|
+
// Remove and readd class to trigger animation
|
|
86
|
+
this.setAttribute('data-skip-text', `${increment} ${this.localize('seconds')}`);
|
|
87
|
+
this.removeClass('skip');
|
|
88
|
+
window.requestAnimationFrame(() => {
|
|
89
|
+
this.addClass('skip');
|
|
90
|
+
});
|
|
91
|
+
}, this.tapTimeout);
|
|
92
|
+
this.enable();
|
|
96
93
|
}
|
|
94
|
+
|
|
97
95
|
/**
|
|
98
96
|
* Builds the DOM element.
|
|
99
97
|
*
|
|
100
98
|
* @return {Element}
|
|
101
99
|
* The DOM element.
|
|
102
100
|
*/
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
var _proto = TouchOverlay.prototype;
|
|
106
|
-
|
|
107
|
-
_proto.createEl = function createEl() {
|
|
108
|
-
var el = dom.createEl('div', {
|
|
101
|
+
createEl() {
|
|
102
|
+
const el = dom.createEl('div', {
|
|
109
103
|
className: 'vjs-touch-overlay',
|
|
110
104
|
// Touch overlay is not tabbable.
|
|
111
105
|
tabIndex: -1
|
|
112
106
|
});
|
|
113
107
|
return el;
|
|
114
108
|
}
|
|
109
|
+
|
|
115
110
|
/**
|
|
116
111
|
* Debounces to either handle a delayed single tap, or a double tap
|
|
117
112
|
*
|
|
@@ -119,110 +114,44 @@
|
|
|
119
114
|
* The touch event
|
|
120
115
|
*
|
|
121
116
|
*/
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
_proto.handleTap = function handleTap(event) {
|
|
125
|
-
var _this2 = this;
|
|
126
|
-
|
|
117
|
+
handleTap(event) {
|
|
127
118
|
// Don't handle taps on the play button
|
|
128
119
|
if (event.target !== this.el_) {
|
|
129
120
|
return;
|
|
130
121
|
}
|
|
131
|
-
|
|
132
122
|
event.preventDefault();
|
|
133
|
-
|
|
134
|
-
if (this.
|
|
135
|
-
this.
|
|
136
|
-
|
|
137
|
-
if (this.timeout) {
|
|
138
|
-
window__default['default'].clearTimeout(this.timeout);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
this.handleDoubleTap(event);
|
|
142
|
-
} else {
|
|
143
|
-
this.firstTapCaptured = true;
|
|
144
|
-
this.timeout = window__default['default'].setTimeout(function () {
|
|
145
|
-
_this2.firstTapCaptured = false;
|
|
146
|
-
|
|
147
|
-
_this2.handleSingleTap(event);
|
|
148
|
-
}, this.tapTimeout);
|
|
123
|
+
this.taps += 1;
|
|
124
|
+
if (this.taps === 1) {
|
|
125
|
+
this.removeClass('skip');
|
|
126
|
+
this.toggleClass('show-play-toggle');
|
|
149
127
|
}
|
|
128
|
+
this.handleTaps_(event);
|
|
150
129
|
}
|
|
151
|
-
/**
|
|
152
|
-
* Toggles display of play toggle
|
|
153
|
-
*
|
|
154
|
-
* @param {Event} event
|
|
155
|
-
* The touch event
|
|
156
|
-
*
|
|
157
|
-
*/
|
|
158
|
-
;
|
|
159
130
|
|
|
160
|
-
_proto.handleSingleTap = function handleSingleTap(event) {
|
|
161
|
-
this.removeClass('skip');
|
|
162
|
-
this.toggleClass('show-play-toggle');
|
|
163
|
-
}
|
|
164
|
-
/**
|
|
165
|
-
* Seeks by configured number of seconds if left or right part of video double tapped
|
|
166
|
-
*
|
|
167
|
-
* @param {Event} event
|
|
168
|
-
* The touch event
|
|
169
|
-
*
|
|
170
|
-
*/
|
|
171
|
-
;
|
|
172
|
-
|
|
173
|
-
_proto.handleDoubleTap = function handleDoubleTap(event) {
|
|
174
|
-
var _this3 = this;
|
|
175
|
-
|
|
176
|
-
var rect = this.el_.getBoundingClientRect();
|
|
177
|
-
var x = event.changedTouches[0].clientX - rect.left; // Check if double tap is in left or right area
|
|
178
|
-
|
|
179
|
-
if (x < rect.width * 0.4) {
|
|
180
|
-
this.player_.currentTime(Math.max(0, this.player_.currentTime() - this.seekSeconds));
|
|
181
|
-
this.addClass('reverse');
|
|
182
|
-
} else if (x > rect.width - rect.width * 0.4) {
|
|
183
|
-
this.player_.currentTime(Math.min(this.player_.duration(), this.player_.currentTime() + this.seekSeconds));
|
|
184
|
-
this.removeClass('reverse');
|
|
185
|
-
} else {
|
|
186
|
-
return;
|
|
187
|
-
} // Remove play toggle if showing
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
this.removeClass('show-play-toggle'); // Remove and readd class to trigger animation
|
|
191
|
-
|
|
192
|
-
this.removeClass('skip');
|
|
193
|
-
window__default['default'].requestAnimationFrame(function () {
|
|
194
|
-
_this3.addClass('skip');
|
|
195
|
-
});
|
|
196
|
-
}
|
|
197
131
|
/**
|
|
198
132
|
* Enables touch handler
|
|
199
133
|
*/
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
_proto.enable = function enable() {
|
|
134
|
+
enable() {
|
|
203
135
|
this.firstTapCaptured = false;
|
|
204
136
|
this.on('touchend', this.handleTap);
|
|
205
137
|
}
|
|
138
|
+
|
|
206
139
|
/**
|
|
207
140
|
* Disables touch handler
|
|
208
141
|
*/
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
_proto.disable = function disable() {
|
|
142
|
+
disable() {
|
|
212
143
|
this.off('touchend', this.handleTap);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
return TouchOverlay;
|
|
216
|
-
}(Component);
|
|
217
|
-
|
|
144
|
+
}
|
|
145
|
+
}
|
|
218
146
|
Component.registerComponent('TouchOverlay', TouchOverlay);
|
|
219
147
|
|
|
220
|
-
|
|
148
|
+
// Default options for the plugin.
|
|
149
|
+
const defaults = {
|
|
221
150
|
fullscreen: {
|
|
222
151
|
enterOnRotate: true,
|
|
223
152
|
exitOnRotate: true,
|
|
224
153
|
lockOnRotate: true,
|
|
225
|
-
|
|
154
|
+
lockToLandscapeOnEnter: false,
|
|
226
155
|
disabled: false
|
|
227
156
|
},
|
|
228
157
|
touchControls: {
|
|
@@ -232,37 +161,32 @@
|
|
|
232
161
|
disabled: false
|
|
233
162
|
}
|
|
234
163
|
};
|
|
235
|
-
|
|
164
|
+
const screen = window.screen;
|
|
165
|
+
|
|
236
166
|
/**
|
|
237
167
|
* Gets 'portrait' or 'lanscape' from the two orientation APIs
|
|
238
168
|
*
|
|
239
169
|
* @return {string} orientation
|
|
240
170
|
*/
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
if (screen) {
|
|
171
|
+
const getOrientation = () => {
|
|
172
|
+
if (window.screen) {
|
|
244
173
|
// Prefer the string over angle, as 0° can be landscape on some tablets
|
|
245
|
-
|
|
246
|
-
|
|
174
|
+
const orientationString = ((window.screen.orientation || {}).type || window.screen.mozOrientation || window.screen.msOrientation || '').split('-')[0];
|
|
247
175
|
if (orientationString === 'landscape' || orientationString === 'portrait') {
|
|
248
176
|
return orientationString;
|
|
249
177
|
}
|
|
250
|
-
}
|
|
251
|
-
|
|
178
|
+
}
|
|
252
179
|
|
|
253
|
-
|
|
254
|
-
|
|
180
|
+
// iOS only supports window.orientation
|
|
181
|
+
if (typeof window.orientation === 'number') {
|
|
182
|
+
if (window.orientation === 0 || window.orientation === 180) {
|
|
255
183
|
return 'portrait';
|
|
256
184
|
}
|
|
257
|
-
|
|
258
185
|
return 'landscape';
|
|
259
186
|
}
|
|
260
|
-
|
|
261
187
|
return 'portrait';
|
|
262
|
-
};
|
|
263
|
-
|
|
188
|
+
};
|
|
264
189
|
|
|
265
|
-
var registerPlugin = videojs__default['default'].registerPlugin || videojs__default['default'].plugin;
|
|
266
190
|
/**
|
|
267
191
|
* Add UI and event listeners
|
|
268
192
|
*
|
|
@@ -273,59 +197,30 @@
|
|
|
273
197
|
* @param {Object} [options={}]
|
|
274
198
|
* A plain object containing options for the plugin.
|
|
275
199
|
*/
|
|
276
|
-
|
|
277
|
-
var onPlayerReady = function onPlayerReady(player, options) {
|
|
200
|
+
const onPlayerReady = (player, options) => {
|
|
278
201
|
player.addClass('vjs-mobile-ui');
|
|
279
|
-
|
|
280
|
-
if (options.fullscreen.iOS) {
|
|
281
|
-
videojs__default['default'].log.warn('videojs-mobile-ui: `fullscreen.iOS` is deprecated. Use Video.js option `preferFullWindow` instead.');
|
|
282
|
-
|
|
283
|
-
if (videojs__default['default'].browser.IS_IOS && videojs__default['default'].browser.IOS_VERSION > 9 && !player.el_.ownerDocument.querySelector('.bc-iframe')) {
|
|
284
|
-
player.tech_.el_.setAttribute('playsinline', 'playsinline');
|
|
285
|
-
|
|
286
|
-
player.tech_.supportsFullScreen = function () {
|
|
287
|
-
return false;
|
|
288
|
-
};
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
|
|
292
202
|
if (!options.touchControls.disabled) {
|
|
293
203
|
if (options.touchControls.disableOnEnd || typeof player.endscreen === 'function') {
|
|
294
204
|
player.addClass('vjs-mobile-ui-disable-end');
|
|
295
|
-
} // Insert before the control bar
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
var controlBarIdx;
|
|
299
|
-
var versionParts = videojs__default['default'].VERSION.split('.');
|
|
300
|
-
var major = parseInt(versionParts[0], 10);
|
|
301
|
-
var minor = parseInt(versionParts[1], 10); // Video.js < 7.7.0 doesn't account for precedding components that don't have elements
|
|
302
|
-
|
|
303
|
-
if (major < 7 || major === 7 && minor < 7) {
|
|
304
|
-
controlBarIdx = Array.prototype.indexOf.call(player.el_.children, player.getChild('ControlBar').el_);
|
|
305
|
-
} else {
|
|
306
|
-
controlBarIdx = player.children_.indexOf(player.getChild('ControlBar'));
|
|
307
205
|
}
|
|
308
206
|
|
|
207
|
+
// Insert before the control bar
|
|
208
|
+
const controlBarIdx = player.children_.indexOf(player.getChild('ControlBar'));
|
|
309
209
|
player.touchOverlay = player.addChild('TouchOverlay', options.touchControls, controlBarIdx);
|
|
310
210
|
}
|
|
311
|
-
|
|
312
211
|
if (options.fullscreen.disabled) {
|
|
313
212
|
return;
|
|
314
213
|
}
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
var rotationHandler = function rotationHandler() {
|
|
319
|
-
var currentOrientation = getOrientation();
|
|
320
|
-
|
|
214
|
+
let locked = false;
|
|
215
|
+
const rotationHandler = () => {
|
|
216
|
+
const currentOrientation = getOrientation();
|
|
321
217
|
if (currentOrientation === 'landscape' && options.fullscreen.enterOnRotate) {
|
|
322
218
|
if (player.paused() === false) {
|
|
323
219
|
player.requestFullscreen();
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
screen.orientation.lock('landscape').then(function () {
|
|
220
|
+
if ((options.fullscreen.lockOnRotate || options.fullscreen.lockToLandscapeOnEnter) && screen.orientation && screen.orientation.lock) {
|
|
221
|
+
screen.orientation.lock('landscape').then(() => {
|
|
327
222
|
locked = true;
|
|
328
|
-
}).catch(
|
|
223
|
+
}).catch(e => {
|
|
329
224
|
videojs__default['default'].log('Browser refused orientation lock:', e);
|
|
330
225
|
});
|
|
331
226
|
}
|
|
@@ -336,36 +231,40 @@
|
|
|
336
231
|
}
|
|
337
232
|
}
|
|
338
233
|
};
|
|
339
|
-
|
|
340
234
|
if (options.fullscreen.enterOnRotate || options.fullscreen.exitOnRotate) {
|
|
341
235
|
if (videojs__default['default'].browser.IS_IOS) {
|
|
342
|
-
|
|
343
|
-
player.on('dispose',
|
|
344
|
-
|
|
236
|
+
window.addEventListener('orientationchange', rotationHandler);
|
|
237
|
+
player.on('dispose', () => {
|
|
238
|
+
window.removeEventListener('orientationchange', rotationHandler);
|
|
345
239
|
});
|
|
346
240
|
} else if (screen.orientation) {
|
|
347
241
|
// addEventListener('orientationchange') is not a user interaction on Android
|
|
348
242
|
screen.orientation.onchange = rotationHandler;
|
|
349
|
-
player.on('dispose',
|
|
243
|
+
player.on('dispose', () => {
|
|
350
244
|
screen.orientation.onchange = null;
|
|
351
245
|
});
|
|
352
246
|
}
|
|
353
|
-
|
|
354
|
-
player.on('fullscreenchange', function (_) {
|
|
355
|
-
if (!player.isFullscreen() && locked) {
|
|
356
|
-
screen.orientation.unlock();
|
|
357
|
-
locked = false;
|
|
358
|
-
}
|
|
359
|
-
});
|
|
360
247
|
}
|
|
361
|
-
|
|
362
|
-
|
|
248
|
+
player.on('fullscreenchange', _ => {
|
|
249
|
+
if (player.isFullscreen() && options.fullscreen.lockToLandscapeOnEnter && getOrientation() === 'portrait') {
|
|
250
|
+
screen.orientation.lock('landscape').then(() => {
|
|
251
|
+
locked = true;
|
|
252
|
+
}).catch(e => {
|
|
253
|
+
videojs__default['default'].log('Browser refused orientation lock:', e);
|
|
254
|
+
});
|
|
255
|
+
} else if (!player.isFullscreen() && locked) {
|
|
256
|
+
screen.orientation.unlock();
|
|
257
|
+
locked = false;
|
|
258
|
+
}
|
|
259
|
+
});
|
|
260
|
+
player.on('ended', _ => {
|
|
363
261
|
if (locked === true) {
|
|
364
262
|
screen.orientation.unlock();
|
|
365
263
|
locked = false;
|
|
366
264
|
}
|
|
367
265
|
});
|
|
368
266
|
};
|
|
267
|
+
|
|
369
268
|
/**
|
|
370
269
|
* A video.js plugin.
|
|
371
270
|
*
|
|
@@ -386,6 +285,9 @@
|
|
|
386
285
|
* Whether to leave fullscreen when rotating to portrait (if not locked)
|
|
387
286
|
* @param {boolean} [options.fullscreen.lockOnRotate=true]
|
|
388
287
|
* Whether to lock orientation when rotating to landscape
|
|
288
|
+
* Unlocked when exiting fullscreen or on 'ended
|
|
289
|
+
* @param {boolean} [options.fullscreen.lockToLandscapeOnEnter=false]
|
|
290
|
+
* Whether to always lock orientation to landscape on fullscreen mode
|
|
389
291
|
* Unlocked when exiting fullscreen or on 'ended'
|
|
390
292
|
* @param {boolean} [options.fullscreen.iOS=false]
|
|
391
293
|
* Deprecated: Whether to disable iOS's native fullscreen so controls can work
|
|
@@ -401,25 +303,18 @@
|
|
|
401
303
|
* Whether to disable when the video ends (e.g., if there is an endscreen)
|
|
402
304
|
* Never shows if the endscreen plugin is present
|
|
403
305
|
*/
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
var mobileUi = function mobileUi(options) {
|
|
407
|
-
var _this = this;
|
|
408
|
-
|
|
409
|
-
if (options === void 0) {
|
|
410
|
-
options = {};
|
|
411
|
-
}
|
|
412
|
-
|
|
306
|
+
const mobileUi = function (options = {}) {
|
|
413
307
|
if (options.forceForTesting || videojs__default['default'].browser.IS_ANDROID || videojs__default['default'].browser.IS_IOS) {
|
|
414
|
-
this.ready(
|
|
415
|
-
onPlayerReady(
|
|
308
|
+
this.ready(() => {
|
|
309
|
+
onPlayerReady(this, videojs__default['default'].obj.merge(defaults, options));
|
|
416
310
|
});
|
|
417
311
|
}
|
|
418
|
-
};
|
|
419
|
-
|
|
312
|
+
};
|
|
420
313
|
|
|
421
|
-
|
|
314
|
+
// Register the plugin with video.js.
|
|
315
|
+
videojs__default['default'].registerPlugin('mobileUi', mobileUi);
|
|
422
316
|
|
|
317
|
+
// Include the version number.
|
|
423
318
|
mobileUi.VERSION = version;
|
|
424
319
|
|
|
425
320
|
return mobileUi;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! @name videojs-mobile-ui @version 0.
|
|
2
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js")
|
|
1
|
+
/*! @name videojs-mobile-ui @version 1.0.0 @license MIT */
|
|
2
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).videojsMobileUi=t(e.videojs)}(this,(function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);const o=n.default.getComponent("Component"),i=n.default.dom||n.default;o.registerComponent("TouchOverlay",class extends o{constructor(e,t){super(e,t),this.seekSeconds=t.seekSeconds,this.tapTimeout=t.tapTimeout,this.taps=0,this.addChild("playToggle",{}),e.on(["playing","userinactive"],(e=>{this.removeClass("show-play-toggle")})),0===this.player_.options_.inactivityTimeout&&(this.player_.options_.inactivityTimeout=5e3),this.handleTaps_=n.default.fn.debounce((e=>{const t=(this.taps-1)*this.seekSeconds;if(this.taps=0,t<1)return;const n=this.el_.getBoundingClientRect(),o=e.changedTouches[0].clientX-n.left;if(o<.4*n.width)this.player_.currentTime(Math.max(0,this.player_.currentTime()-t)),this.addClass("reverse");else{if(!(o>n.width-.4*n.width))return;this.player_.currentTime(Math.min(this.player_.duration(),this.player_.currentTime()+t)),this.removeClass("reverse")}this.removeClass("show-play-toggle"),this.setAttribute("data-skip-text",`${t} ${this.localize("seconds")}`),this.removeClass("skip"),window.requestAnimationFrame((()=>{this.addClass("skip")}))}),this.tapTimeout),this.enable()}createEl(){return i.createEl("div",{className:"vjs-touch-overlay",tabIndex:-1})}handleTap(e){e.target===this.el_&&(e.preventDefault(),this.taps+=1,1===this.taps&&(this.removeClass("skip"),this.toggleClass("show-play-toggle")),this.handleTaps_(e))}enable(){this.firstTapCaptured=!1,this.on("touchend",this.handleTap)}disable(){this.off("touchend",this.handleTap)}});const s={fullscreen:{enterOnRotate:!0,exitOnRotate:!0,lockOnRotate:!0,lockToLandscapeOnEnter:!1,disabled:!1},touchControls:{seekSeconds:10,tapTimeout:300,disableOnEnd:!1,disabled:!1}},a=window.screen,r=()=>{if(window.screen){const e=((window.screen.orientation||{}).type||window.screen.mozOrientation||window.screen.msOrientation||"").split("-")[0];if("landscape"===e||"portrait"===e)return e}return"number"==typeof window.orientation?0===window.orientation||180===window.orientation?"portrait":"landscape":"portrait"},l=function(e={}){(e.forceForTesting||n.default.browser.IS_ANDROID||n.default.browser.IS_IOS)&&this.ready((()=>{((e,t)=>{if(e.addClass("vjs-mobile-ui"),!t.touchControls.disabled){(t.touchControls.disableOnEnd||"function"==typeof e.endscreen)&&e.addClass("vjs-mobile-ui-disable-end");const n=e.children_.indexOf(e.getChild("ControlBar"));e.touchOverlay=e.addChild("TouchOverlay",t.touchControls,n)}if(t.fullscreen.disabled)return;let o=!1;const i=()=>{const i=r();"landscape"===i&&t.fullscreen.enterOnRotate?!1===e.paused()&&(e.requestFullscreen(),(t.fullscreen.lockOnRotate||t.fullscreen.lockToLandscapeOnEnter)&&a.orientation&&a.orientation.lock&&a.orientation.lock("landscape").then((()=>{o=!0})).catch((e=>{n.default.log("Browser refused orientation lock:",e)}))):"portrait"===i&&t.fullscreen.exitOnRotate&&!o&&e.isFullscreen()&&e.exitFullscreen()};(t.fullscreen.enterOnRotate||t.fullscreen.exitOnRotate)&&(n.default.browser.IS_IOS?(window.addEventListener("orientationchange",i),e.on("dispose",(()=>{window.removeEventListener("orientationchange",i)}))):a.orientation&&(a.orientation.onchange=i,e.on("dispose",(()=>{a.orientation.onchange=null})))),e.on("fullscreenchange",(i=>{e.isFullscreen()&&t.fullscreen.lockToLandscapeOnEnter&&"portrait"===r()?a.orientation.lock("landscape").then((()=>{o=!0})).catch((e=>{n.default.log("Browser refused orientation lock:",e)})):!e.isFullscreen()&&o&&(a.orientation.unlock(),o=!1)})),e.on("ended",(e=>{!0===o&&(a.orientation.unlock(),o=!1)}))})(this,n.default.obj.merge(s,e))}))};return n.default.registerPlugin("mobileUi",l),l.VERSION="1.0.0",l}));
|