videojs-mobile-ui 0.8.0 → 1.0.1

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.
Files changed (45) hide show
  1. package/README.md +4 -2
  2. package/dist/lang/de.js +3 -0
  3. package/dist/lang/en.js +1 -1
  4. package/dist/lang/it.js +3 -0
  5. package/dist/videojs-mobile-ui.cjs.js +118 -193
  6. package/dist/videojs-mobile-ui.css +2 -2
  7. package/dist/videojs-mobile-ui.es.js +111 -185
  8. package/dist/videojs-mobile-ui.js +122 -236
  9. package/dist/videojs-mobile-ui.min.js +2 -2
  10. package/index.html +1 -7
  11. package/package.json +10 -10
  12. package/src/plugin.css +13 -1
  13. package/src/plugin.js +5 -33
  14. package/src/touchOverlay.js +46 -56
  15. package/CHANGELOG.md +0 -95
  16. package/docs/api/TouchOverlay.html +0 -964
  17. package/docs/api/fonts/OpenSans-Bold-webfont.eot +0 -0
  18. package/docs/api/fonts/OpenSans-Bold-webfont.svg +0 -1830
  19. package/docs/api/fonts/OpenSans-Bold-webfont.woff +0 -0
  20. package/docs/api/fonts/OpenSans-BoldItalic-webfont.eot +0 -0
  21. package/docs/api/fonts/OpenSans-BoldItalic-webfont.svg +0 -1830
  22. package/docs/api/fonts/OpenSans-BoldItalic-webfont.woff +0 -0
  23. package/docs/api/fonts/OpenSans-Italic-webfont.eot +0 -0
  24. package/docs/api/fonts/OpenSans-Italic-webfont.svg +0 -1830
  25. package/docs/api/fonts/OpenSans-Italic-webfont.woff +0 -0
  26. package/docs/api/fonts/OpenSans-Light-webfont.eot +0 -0
  27. package/docs/api/fonts/OpenSans-Light-webfont.svg +0 -1831
  28. package/docs/api/fonts/OpenSans-Light-webfont.woff +0 -0
  29. package/docs/api/fonts/OpenSans-LightItalic-webfont.eot +0 -0
  30. package/docs/api/fonts/OpenSans-LightItalic-webfont.svg +0 -1835
  31. package/docs/api/fonts/OpenSans-LightItalic-webfont.woff +0 -0
  32. package/docs/api/fonts/OpenSans-Regular-webfont.eot +0 -0
  33. package/docs/api/fonts/OpenSans-Regular-webfont.svg +0 -1831
  34. package/docs/api/fonts/OpenSans-Regular-webfont.woff +0 -0
  35. package/docs/api/global.html +0 -957
  36. package/docs/api/index.html +0 -159
  37. package/docs/api/plugin.js.html +0 -221
  38. package/docs/api/scripts/linenumber.js +0 -25
  39. package/docs/api/scripts/prettify/Apache-License-2.0.txt +0 -202
  40. package/docs/api/scripts/prettify/lang-css.js +0 -2
  41. package/docs/api/scripts/prettify/prettify.js +0 -28
  42. package/docs/api/styles/jsdoc-default.css +0 -358
  43. package/docs/api/styles/prettify-jsdoc.css +0 -111
  44. package/docs/api/styles/prettify-tomorrow.css +0 -132
  45. package/docs/api/touchOverlay.js.html +0 -211
package/docs/api/touchOverlay.js.html DELETED
@@ -1,211 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <title>JSDoc: Source: touchOverlay.js</title>
6
-
7
- <script src="scripts/prettify/prettify.js"> </script>
8
- <script src="scripts/prettify/lang-css.js"> </script>
9
- <!--[if lt IE 9]>
10
- <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11
- <![endif]-->
12
- <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
13
- <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
14
- </head>
15
-
16
- <body>
17
-
18
- <div id="main">
19
-
20
- <h1 class="page-title">Source: touchOverlay.js</h1>
21
-
22
-
23
-
24
-
25
-
26
-
27
- <section>
28
- <article>
29
- <pre class="prettyprint source linenums"><code>/**
30
- * @file touchOverlay.js
31
- * Touch UI component
32
- */
33
-
34
- import videojs from 'video.js';
35
- import window from 'global/window';
36
-
37
- const Component = videojs.getComponent('Component');
38
- const dom = videojs.dom || videojs;
39
-
40
- /**
41
- * The `TouchOverlay` is an overlay to capture tap events.
42
- *
43
- * @extends Component
44
- */
45
- class TouchOverlay extends Component {
46
-
47
- /**
48
- * Creates an instance of the this class.
49
- *
50
- * @param {Player} player
51
- * The `Player` that this class should be attached to.
52
- *
53
- * @param {Object} [options]
54
- * The key/value store of player options.
55
- */
56
- constructor(player, options) {
57
- super(player, options);
58
-
59
- this.seekSeconds = options.seekSeconds;
60
- this.tapTimeout = options.tapTimeout;
61
-
62
- // Add play toggle overlay
63
- this.addChild('playToggle', {});
64
-
65
- // Clear overlay when playback starts or with control fade
66
- player.on(['playing', 'userinactive'], e => {
67
- this.removeClass('show-play-toggle');
68
- });
69
-
70
- // A 0 inactivity timeout won't work here
71
- if (this.player_.options_.inactivityTimeout === 0) {
72
- this.player_.options_.inactivityTimeout = 5000;
73
- }
74
-
75
- this.enable();
76
- }
77
-
78
- /**
79
- * Builds the DOM element.
80
- *
81
- * @return {Element}
82
- * The DOM element.
83
- */
84
- createEl() {
85
- const el = dom.createEl('div', {
86
- className: 'vjs-touch-overlay',
87
- // Touch overlay is not tabbable.
88
- tabIndex: -1
89
- });
90
-
91
- return el;
92
- }
93
-
94
- /**
95
- * Debounces to either handle a delayed single tap, or a double tap
96
- *
97
- * @param {Event} event
98
- * The touch event
99
- *
100
- */
101
- handleTap(event) {
102
- // Don't handle taps on the play button
103
- if (event.target !== this.el_) {
104
- return;
105
- }
106
-
107
- event.preventDefault();
108
-
109
- if (this.firstTapCaptured) {
110
- this.firstTapCaptured = false;
111
- if (this.timeout) {
112
- window.clearTimeout(this.timeout);
113
- }
114
- this.handleDoubleTap(event);
115
- } else {
116
- this.firstTapCaptured = true;
117
- this.timeout = window.setTimeout(() => {
118
- this.firstTapCaptured = false;
119
- this.handleSingleTap(event);
120
- }, this.tapTimeout);
121
- }
122
- }
123
-
124
- /**
125
- * Toggles display of play toggle
126
- *
127
- * @param {Event} event
128
- * The touch event
129
- *
130
- */
131
- handleSingleTap(event) {
132
- this.removeClass('skip');
133
- this.toggleClass('show-play-toggle');
134
- }
135
-
136
- /**
137
- * Seeks by configured number of seconds if left or right part of video double tapped
138
- *
139
- * @param {Event} event
140
- * The touch event
141
- *
142
- */
143
- handleDoubleTap(event) {
144
- const rect = this.el_.getBoundingClientRect();
145
- const x = event.changedTouches[0].clientX - rect.left;
146
-
147
- // Check if double tap is in left or right area
148
- if (x &lt; rect.width * 0.4) {
149
- this.player_.currentTime(Math.max(
150
- 0, this.player_.currentTime() - this.seekSeconds));
151
- this.addClass('reverse');
152
- } else if (x > rect.width - (rect.width * 0.4)) {
153
- this.player_.currentTime(Math.min(
154
- this.player_.duration(), this.player_.currentTime() + this.seekSeconds));
155
- this.removeClass('reverse');
156
- } else {
157
- return;
158
- }
159
-
160
- // Remove play toggle if showing
161
- this.removeClass('show-play-toggle');
162
-
163
- // Remove and readd class to trigger animation
164
- this.removeClass('skip');
165
- window.requestAnimationFrame(() => {
166
- this.addClass('skip');
167
- });
168
- }
169
-
170
- /**
171
- * Enables touch handler
172
- */
173
- enable() {
174
- this.firstTapCaptured = false;
175
- this.on('touchend', this.handleTap);
176
- }
177
-
178
- /**
179
- * Disables touch handler
180
- */
181
- disable() {
182
- this.off('touchend', this.handleTap);
183
- }
184
-
185
- }
186
-
187
- Component.registerComponent('TouchOverlay', TouchOverlay);
188
- export default TouchOverlay;
189
- </code></pre>
190
- </article>
191
- </section>
192
-
193
-
194
-
195
-
196
- </div>
197
-
198
- <nav>
199
- <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="TouchOverlay.html">TouchOverlay</a></li></ul><h3>Global</h3><ul><li><a href="global.html#mobileUi">mobileUi</a></li><li><a href="global.html#onPlayerReady">onPlayerReady</a></li></ul>
200
- </nav>
201
-
202
- <br class="clear">
203
-
204
- <footer>
205
- Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Feb 02 2021 09:43:56 GMT+0100 (CET)
206
- </footer>
207
-
208
- <script> prettyPrint(); </script>
209
- <script src="scripts/linenumber.js"> </script>
210
- </body>
211
- </html>