1 |
|
2 | 'use strict';
|
3 |
|
4 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
5 |
|
6 | var videojs = _interopDefault(require('video.js'));
|
7 |
|
8 | function _inheritsLoose(subClass, superClass) {
|
9 | subClass.prototype = Object.create(superClass.prototype);
|
10 | subClass.prototype.constructor = subClass;
|
11 | subClass.__proto__ = superClass;
|
12 | }
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 | function spriteThumbs(player, options) {
|
25 | var url = options.url;
|
26 | var height = options.height;
|
27 | var width = options.width;
|
28 | var responsive = options.responsive;
|
29 | var dom = videojs.dom || videojs;
|
30 | var controls = player.controlBar;
|
31 | var progress = controls.progressControl;
|
32 | var seekBar = progress.seekBar;
|
33 | var mouseTimeDisplay = seekBar.mouseTimeDisplay;
|
34 |
|
35 | if (url && height && width && mouseTimeDisplay) {
|
36 | var img = dom.createEl('img', {
|
37 | src: url
|
38 | });
|
39 |
|
40 | var tooltipStyle = function tooltipStyle(obj) {
|
41 | Object.keys(obj).forEach(function (key) {
|
42 | var val = obj[key];
|
43 | var ttstyle = mouseTimeDisplay.timeTooltip.el().style;
|
44 |
|
45 | if (val !== '') {
|
46 | ttstyle.setProperty(key, val);
|
47 | } else {
|
48 | ttstyle.removeProperty(key);
|
49 | }
|
50 | });
|
51 | };
|
52 |
|
53 | var hijackMouseTooltip = function hijackMouseTooltip() {
|
54 | var imgWidth = img.naturalWidth;
|
55 | var imgHeight = img.naturalHeight;
|
56 |
|
57 | if (player.controls() && imgWidth && imgHeight) {
|
58 | var hoverPosition = parseFloat(mouseTimeDisplay.el().style.left);
|
59 | hoverPosition = player.duration() * (hoverPosition / seekBar.currentWidth());
|
60 |
|
61 | if (!isNaN(hoverPosition)) {
|
62 | hoverPosition = hoverPosition / options.interval;
|
63 | var playerWidth = player.currentWidth();
|
64 | var scaleFactor = responsive && playerWidth < responsive ? playerWidth / responsive : 1;
|
65 | var columns = imgWidth / width;
|
66 | var scaledWidth = width * scaleFactor;
|
67 | var scaledHeight = height * scaleFactor;
|
68 | var cleft = Math.floor(hoverPosition % columns) * -scaledWidth;
|
69 | var ctop = Math.floor(hoverPosition / columns) * -scaledHeight;
|
70 | var bgSize = imgWidth * scaleFactor + 'px ' + imgHeight * scaleFactor + 'px';
|
71 | var controlsTop = dom.getBoundingClientRect(controls.el()).top;
|
72 | var seekBarTop = dom.getBoundingClientRect(seekBar.el()).top;
|
73 |
|
74 | var topOffset = -scaledHeight - Math.max(0, seekBarTop - controlsTop);
|
75 | tooltipStyle({
|
76 | 'width': scaledWidth + 'px',
|
77 | 'height': scaledHeight + 'px',
|
78 | 'background-image': 'url(' + url + ')',
|
79 | 'background-repeat': 'no-repeat',
|
80 | 'background-position': cleft + 'px ' + ctop + 'px',
|
81 | 'background-size': bgSize,
|
82 | 'top': topOffset + 'px',
|
83 | 'color': '#fff',
|
84 | 'text-shadow': '1px 1px #000',
|
85 | 'border': '1px solid #000',
|
86 | 'margin': '0 1px'
|
87 | });
|
88 | }
|
89 | }
|
90 | };
|
91 |
|
92 | tooltipStyle({
|
93 | 'width': '',
|
94 | 'height': '',
|
95 | 'background-image': '',
|
96 | 'background-repeat': '',
|
97 | 'background-position': '',
|
98 | 'background-size': '',
|
99 | 'top': '',
|
100 | 'color': '',
|
101 | 'text-shadow': '',
|
102 | 'border': '',
|
103 | 'margin': ''
|
104 | });
|
105 | progress.on('mousemove', hijackMouseTooltip);
|
106 | progress.on('touchmove', hijackMouseTooltip);
|
107 | player.addClass('vjs-sprite-thumbnails');
|
108 | }
|
109 | }
|
110 |
|
111 | var version = "0.5.3";
|
112 |
|
113 | var Plugin = videojs.getPlugin('plugin');
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 | var defaults = {
|
130 | url: '',
|
131 | width: 0,
|
132 | height: 0,
|
133 | interval: 1,
|
134 | responsive: 600
|
135 | };
|
136 |
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 | var SpriteThumbnails = function (_Plugin) {
|
143 | _inheritsLoose(SpriteThumbnails, _Plugin);
|
144 |
|
145 | |
146 |
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|
154 | function SpriteThumbnails(player, options) {
|
155 | var _this;
|
156 |
|
157 |
|
158 | _this = _Plugin.call(this, player) || this;
|
159 | _this.options = videojs.mergeOptions(defaults, options);
|
160 |
|
161 | _this.player.ready(function () {
|
162 | spriteThumbs(_this.player, _this.options);
|
163 | });
|
164 |
|
165 | return _this;
|
166 | }
|
167 |
|
168 | return SpriteThumbnails;
|
169 | }(Plugin);
|
170 |
|
171 |
|
172 | SpriteThumbnails.defaultState = {};
|
173 |
|
174 | SpriteThumbnails.VERSION = version;
|
175 |
|
176 | videojs.registerPlugin('spriteThumbnails', SpriteThumbnails);
|
177 |
|
178 | module.exports = SpriteThumbnails;
|