1 /* |
1 /* |
2 The Slider Widget fits right under the video |
2 The Slider Widget fits right under the video |
3 */ |
3 */ |
|
4 import sliderStyles from "./Slider.module.css"; |
|
5 import jQuery from "jquery"; |
4 |
6 |
5 IriSP.Widgets.Slider = function(player, config) { |
7 const Slider = function (ns) { |
6 IriSP.Widgets.Widget.call(this, player, config); |
8 return class extends ns.Widgets.Widget { |
7 }; |
9 constructor(player, config) { |
|
10 super(player, config); |
|
11 } |
8 |
12 |
9 IriSP.Widgets.Slider.prototype = new IriSP.Widgets.Widget(); |
13 static defaults = { |
|
14 minimized_height: 4, |
|
15 maximized_height: 4, |
|
16 minimize_timeout: 1500 /* time before minimizing slider after mouseout, |
|
17 set to zero for fixed slider */, |
|
18 }; |
10 |
19 |
11 IriSP.Widgets.Slider.prototype.defaults = { |
20 static template = |
12 minimized_height : 4, |
21 '<div class="Ldt-Slider"></div><div class="Ldt-Slider-Time">00:00</div>'; |
13 maximized_height : 4, |
|
14 minimize_timeout : 1500 /* time before minimizing slider after mouseout, |
|
15 set to zero for fixed slider */ |
|
16 }; |
|
17 |
22 |
18 IriSP.Widgets.Slider.prototype.template = |
23 draw() { |
19 '<div class="Ldt-Slider"></div><div class="Ldt-Slider-Time">00:00</div>'; |
24 this.renderTemplate(); |
20 |
25 |
21 IriSP.Widgets.Slider.prototype.draw = function() { |
26 this.$time = this.$.find(".Ldt-Slider-Time"); |
22 |
27 |
23 this.renderTemplate(); |
28 this.$slider = this.$.find(".Ldt-Slider"); |
24 |
29 |
25 this.$time = this.$.find(".Ldt-Slider-Time"); |
30 var _this = this; |
26 |
31 |
27 this.$slider = this.$.find(".Ldt-Slider"); |
32 this.$slider.slider({ |
28 |
|
29 var _this = this; |
|
30 |
|
31 this.$slider.slider({ |
|
32 range: "min", |
33 range: "min", |
33 value: 0, |
34 value: 0, |
34 min: 0, |
35 min: 0, |
35 max: this.source.getDuration().milliseconds, |
36 max: this.source.getDuration().milliseconds, |
36 slide: function(event, ui) { |
37 slide: function (event, ui) { |
37 _this.media.setCurrentTime(ui.value); |
38 _this.media.setCurrentTime(ui.value); |
38 _this.player.trigger("Mediafragment.setHashToTime"); |
39 _this.player.trigger("Mediafragment.setHashToTime"); |
39 } |
40 }, |
40 }); |
41 }); |
41 |
42 |
42 this.$handle = this.$slider.find('.ui-slider-handle'); |
43 this.$handle = this.$slider.find(".ui-slider-handle"); |
43 |
44 |
44 this.onMediaEvent("timeupdate","onTimeupdate"); |
45 this.onMediaEvent("timeupdate", "onTimeupdate"); |
45 this.onMdpEvent("Player.MouseOver","onMouseover"); |
46 this.onMdpEvent("Player.MouseOver", "onMouseover"); |
46 this.onMdpEvent("Player.MouseOut","onMouseout"); |
47 this.onMdpEvent("Player.MouseOut", "onMouseout"); |
47 |
48 |
48 if (this.minimize_timeout) { |
49 if (this.minimize_timeout) { |
49 this.$slider.css(this.calculateSliderCss(this.minimized_height)); |
50 this.$slider.css(this.calculateSliderCss(this.minimized_height)); |
50 this.$handle.css(this.calculateHandleCss(this.minimized_height)); |
51 this.$handle.css(this.calculateHandleCss(this.minimized_height)); |
51 |
52 |
52 this.maximized = false; |
53 this.maximized = false; |
53 this.timeoutId = false; |
54 this.timeoutId = false; |
|
55 } |
|
56 |
|
57 this.$slider |
|
58 .mouseover(function () { |
|
59 _this.$time.show(); |
|
60 _this.onMouseover(); |
|
61 }) |
|
62 .mouseout(this.functionWrapper("onMouseout")) |
|
63 .mousemove(function (_e) { |
|
64 var _x = _e.pageX - _this.$.offset().left, |
|
65 _t = new ns.Model.Time((_this.media.duration * _x) / _this.width); |
|
66 _this.$time.text(_t.toString()).css("left", _x); |
|
67 }); |
54 } |
68 } |
55 |
69 |
56 this.$slider |
70 onTimeupdate(_time) { |
57 .mouseover(function() { |
71 this.$slider.slider("value", _time); |
58 _this.$time.show(); |
72 this.player.trigger("Arrow.updatePosition", { |
59 _this.onMouseover(); |
73 widget: this.type, |
60 }) |
74 time: _time, |
61 .mouseout(this.functionWrapper("onMouseout")) |
75 }); |
62 .mousemove(function(_e) { |
76 } |
63 var _x = _e.pageX - _this.$.offset().left, |
77 |
64 _t = new IriSP.Model.Time(_this.media.duration * _x / _this.width); |
78 onMouseover() { |
65 _this.$time.text(_t.toString()).css("left",_x); |
79 if (this.minimize_timeout) { |
|
80 if (this.timeoutId) { |
|
81 window.clearTimeout(this.timeoutId); |
|
82 this.timeoutId = false; |
|
83 } |
|
84 if (!this.maximized) { |
|
85 this.animateToHeight(this.maximized_height); |
|
86 this.maximized = true; |
|
87 } |
|
88 } |
|
89 } |
|
90 |
|
91 onMouseout() { |
|
92 this.$time.hide(); |
|
93 if (this.minimize_timeout) { |
|
94 if (this.timeoutId) { |
|
95 window.clearTimeout(this.timeoutId); |
|
96 this.timeoutId = false; |
|
97 } |
|
98 var _this = this; |
|
99 this.timeoutId = window.setTimeout(function () { |
|
100 if (_this.maximized) { |
|
101 _this.animateToHeight(_this.minimized_height); |
|
102 _this.maximized = false; |
|
103 } |
|
104 _this.timeoutId = false; |
|
105 }, this.minimize_timeout); |
|
106 } |
|
107 } |
|
108 |
|
109 animateToHeight(_height) { |
|
110 this.$slider |
|
111 .stop() |
|
112 .animate(this.calculateSliderCss(_height), 500, function () { |
|
113 jQuery(this).css("overflow", "visible"); |
66 }); |
114 }); |
|
115 this.$handle |
|
116 .stop() |
|
117 .animate(this.calculateHandleCss(_height), 500, function () { |
|
118 jQuery(this).css("overflow", "visible"); |
|
119 }); |
|
120 } |
|
121 |
|
122 calculateSliderCss(_size) { |
|
123 return { |
|
124 height: _size + "px", |
|
125 "margin-top": this.minimized_height - _size + "px", |
|
126 }; |
|
127 } |
|
128 |
|
129 calculateHandleCss = function (_size) { |
|
130 return { |
|
131 height: 2 + _size + "px", |
|
132 width: 2 + _size + "px", |
|
133 "margin-left": -Math.ceil(2 + _size / 2) + "px", |
|
134 }; |
|
135 }; |
|
136 }; |
67 }; |
137 }; |
68 |
138 |
69 IriSP.Widgets.Slider.prototype.onTimeupdate = function(_time) { |
139 export { Slider, sliderStyles }; |
70 this.$slider.slider("value",_time); |
|
71 this.player.trigger("Arrow.updatePosition",{widget: this.type, time: _time}); |
|
72 }; |
|
73 |
|
74 IriSP.Widgets.Slider.prototype.onMouseover = function() { |
|
75 if (this.minimize_timeout) { |
|
76 if (this.timeoutId) { |
|
77 window.clearTimeout(this.timeoutId); |
|
78 this.timeoutId = false; |
|
79 } |
|
80 if (!this.maximized) { |
|
81 this.animateToHeight(this.maximized_height); |
|
82 this.maximized = true; |
|
83 } |
|
84 } |
|
85 }; |
|
86 |
|
87 IriSP.Widgets.Slider.prototype.onMouseout = function() { |
|
88 this.$time.hide(); |
|
89 if (this.minimize_timeout) { |
|
90 if (this.timeoutId) { |
|
91 window.clearTimeout(this.timeoutId); |
|
92 this.timeoutId = false; |
|
93 } |
|
94 var _this = this; |
|
95 this.timeoutId = window.setTimeout(function() { |
|
96 if (_this.maximized) { |
|
97 _this.animateToHeight(_this.minimized_height); |
|
98 _this.maximized = false; |
|
99 } |
|
100 _this.timeoutId = false; |
|
101 }, this.minimize_timeout); |
|
102 } |
|
103 }; |
|
104 |
|
105 IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) { |
|
106 this.$slider.stop().animate( |
|
107 this.calculateSliderCss(_height), |
|
108 500, |
|
109 function() { |
|
110 IriSP.jQuery(this).css("overflow","visible"); |
|
111 }); |
|
112 this.$handle.stop().animate( |
|
113 this.calculateHandleCss(_height), |
|
114 500, |
|
115 function() { |
|
116 IriSP.jQuery(this).css("overflow","visible"); |
|
117 }); |
|
118 }; |
|
119 |
|
120 IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) { |
|
121 return { |
|
122 height: _size + "px", |
|
123 "margin-top": (this.minimized_height - _size) + "px" |
|
124 }; |
|
125 }; |
|
126 |
|
127 IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) { |
|
128 return { |
|
129 height: (2 + _size) + "px", |
|
130 width: (2 + _size) + "px", |
|
131 "margin-left": -Math.ceil(2 + _size / 2) + "px" |
|
132 }; |
|
133 }; |
|