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