1 (function() { |
1 IriSP.Hashcut = function() { |
2 var Hashcut = function() { |
2 |
3 var directory = new IriSP.Model.Directory(), |
3 /* Load Media List */ |
4 project = directory.remoteSource({ |
4 |
5 url: "data/bpidata.json", |
5 var directory = new IriSP.Model.Directory(), |
6 serializer: IriSP.serializers.medialist |
6 project = directory.remoteSource({ |
7 }), |
7 url: "data/bpidata.json", |
8 mediatemplate = '<li class="item-video"><img src="{{thumbnail}}" alt="{{title}}" />' |
8 serializer: IriSP.serializers.medialist |
9 + '<span class="video-info"><span class="title-video">{{title}}</span><span class="author">{{description}}</span>' |
9 }), |
10 + '<span class="time-length">Durée : <span>{{duration}}</span></span></span></li>'; |
10 mediatemplate = '<li class="item-video" data-media-id="{{id}}"><img src="{{thumbnail}}" alt="{{title}}" />' |
11 project.onLoad(function() { |
11 + '<span class="video-info"><span class="title-video">{{title}}</span><span class="author">{{description}}</span>' |
12 var html = ''; |
12 + '<span class="time-length">Durée : <span>{{duration}}</span></span></span></li>'; |
13 project.getMedias().forEach(function(_m) { |
13 |
14 html += Mustache.to_html(mediatemplate, _m); |
14 /* Fill left column with Media List */ |
|
15 |
|
16 project.onLoad(function() { |
|
17 var html = ''; |
|
18 project.getMedias().forEach(function(_m) { |
|
19 html += Mustache.to_html(mediatemplate, _m); |
|
20 }); |
|
21 $(".col-left .list-video").html(html); |
|
22 }); |
|
23 |
|
24 /* Search Media with left column form */ |
|
25 |
|
26 $(".col-left input").on("keyup change input paste", function() { |
|
27 var val = $(this).val(); |
|
28 if (val) { |
|
29 var find = IriSP.Model.regexpFromTextOrArray(val, true), |
|
30 replace = IriSP.Model.regexpFromTextOrArray(val, false); |
|
31 } |
|
32 $(".col-left .item-video").each(function() { |
|
33 var li = $(this), |
|
34 title = $(this).find(".title-video"), |
|
35 titletext = title.text(); |
|
36 if (val && find.test(titletext)) { |
|
37 title.html(titletext.replace(replace, '<span style="background: yellow;">$1</span>')); |
|
38 li.show(); |
|
39 } else { |
|
40 title.text(titletext); |
|
41 if (val) { |
|
42 li.hide(); |
|
43 } else { |
|
44 li.show(); |
|
45 } |
|
46 } |
|
47 }) |
|
48 }); |
|
49 |
|
50 /* Slider */ |
|
51 |
|
52 var timeSlider = $(".Ldt-Slider"); |
|
53 timeSlider.slider({ |
|
54 range: "min", |
|
55 value: 0, |
|
56 min: 0, |
|
57 max: 920, |
|
58 slide: function(event, ui) { |
|
59 console.log(ui.value); |
|
60 //TODO: Slide to correct Timecode |
|
61 } |
|
62 }); |
|
63 |
|
64 var timeSliderHandle = timeSlider.find('.ui-slider-handle'), |
|
65 timeSliderMaximized = false, |
|
66 timeSliderTimeoutId = false, |
|
67 timeSliderMinimizedHeight = 4, |
|
68 timeSliderMaximizedHeight = 10, |
|
69 timeSliderTimeoutDuration = 1500, |
|
70 timeTooltip = $(".Ldt-Slider-Time"); |
|
71 |
|
72 timeSlider.css(calculateSliderCss(timeSliderMinimizedHeight)); |
|
73 timeSliderHandle.css(calculateHandleCss(timeSliderMinimizedHeight)); |
|
74 |
|
75 function timeSliderMouseOver() { |
|
76 if (timeSliderTimeoutId) { |
|
77 window.clearTimeout(timeSliderTimeoutId); |
|
78 timeSliderTimeoutId = false; |
|
79 } |
|
80 if (!timeSliderMaximized) { |
|
81 timeSliderAnimateToHeight(timeSliderMaximizedHeight); |
|
82 timeSliderMaximized = true; |
|
83 } |
|
84 } |
|
85 |
|
86 function timeSliderMouseOut() { |
|
87 timeTooltip.hide(); |
|
88 if (timeSliderTimeoutId) { |
|
89 clearTimeout(timeSliderTimeoutId); |
|
90 timeSliderTimeoutId = false; |
|
91 } |
|
92 timeSliderTimeoutId = setTimeout(function() { |
|
93 if (timeSliderMaximized) { |
|
94 timeSliderAnimateToHeight(timeSliderMinimizedHeight); |
|
95 timeSliderMaximized = false; |
|
96 } |
|
97 timeSliderTimeoutId = false; |
|
98 }, timeSliderTimeoutDuration); |
|
99 } |
|
100 |
|
101 timeSlider |
|
102 .mouseover(function() { |
|
103 timeTooltip.show(); |
|
104 timeSliderMouseOver(); |
|
105 }) |
|
106 .mouseout(timeSliderMouseOut) |
|
107 .mousemove(function(_e) { |
|
108 var _x = _e.pageX - timeSlider.offset().left, |
|
109 _t = new IriSP.Model.Time(); // _this.media.duration * _x / _this.width |
|
110 timeTooltip.text(_t.toString()).css("left",_x); |
|
111 }); |
|
112 |
|
113 $(".Ldt-Ctrl").mouseover(timeSliderMouseOver).mouseout(timeSliderMouseOut); |
|
114 |
|
115 function timeSliderAnimateToHeight(_height) { |
|
116 timeSlider.stop().animate( |
|
117 calculateSliderCss(_height), |
|
118 500, |
|
119 function() { |
|
120 IriSP.jQuery(this).css("overflow","visible"); |
15 }); |
121 }); |
16 $(".col-left .list-video").html(html); |
122 timeSliderHandle.stop().animate( |
|
123 calculateHandleCss(_height), |
|
124 500, |
|
125 function() { |
|
126 IriSP.jQuery(this).css("overflow","visible"); |
|
127 }); |
|
128 } |
|
129 |
|
130 function calculateSliderCss(_size) { |
|
131 return { |
|
132 height: _size + "px", |
|
133 "margin-top": (timeSliderMinimizedHeight - _size) + "px" |
|
134 }; |
|
135 } |
|
136 |
|
137 function calculateHandleCss(_size) { |
|
138 return { |
|
139 height: (2 + _size) + "px", |
|
140 width: (2 + _size) + "px", |
|
141 "margin-left": -Math.ceil(2 + _size / 2) + "px" |
|
142 } |
|
143 } |
|
144 |
|
145 /* Controller Widget */ |
|
146 |
|
147 var volBlock = $(".Ldt-Ctrl-Volume-Control"); |
|
148 $('.Ldt-Ctrl-Sound') |
|
149 .click(function(){}) //TODO: Add Mute Handler |
|
150 .mouseover(function() { |
|
151 volBlock.show(); |
|
152 }) |
|
153 .mouseout(function() { |
|
154 volBlock.hide(); |
17 }); |
155 }); |
|
156 volBlock.mouseover(function() { |
|
157 volBlock.show(); |
|
158 }).mouseout(function() { |
|
159 volBlock.hide(); |
|
160 }); |
|
161 |
|
162 var volBar = $(".Ldt-Ctrl-Volume-Bar"); |
|
163 volBar.slider({ |
|
164 slide: function(event, ui) { |
|
165 volBar.attr("title",'Volume : ' + ui.value + '%'); |
|
166 //_this.media.setVolume(ui.value / 100); |
|
167 }, |
|
168 stop: function() { |
|
169 // IriSP.Widgets.Controller.prototype.volumeUpdater |
|
170 } |
|
171 }); |
|
172 |
|
173 /* Set current Media */ |
|
174 var currentMedia; |
|
175 |
|
176 function setMedia(mediaid) { |
|
177 currentMedia = project.getElement(mediaid); |
|
178 if (currentMedia.elementType == "media") { |
|
179 $("video").hide(); |
|
180 var currentvideo = $('video[data-media-id="' + mediaid + '"]'); |
|
181 console.log(currentvideo); |
|
182 } |
|
183 } |
|
184 |
|
185 function addMediaPlayer(media) { |
18 |
186 |
19 $(".col-left input").on("keyup change input paste", function() { |
187 } |
20 var val = $(this).val(); |
188 /* Click on media items */ |
21 if (val) { |
189 |
22 var find = IriSP.Model.regexpFromTextOrArray(val, true), |
190 $(".col-left").on("click", ".item-video", function() { |
23 replace = IriSP.Model.regexpFromTextOrArray(val, false); |
191 setMedia($(this).attr("data-media-id")); |
24 } |
192 }); |
25 $(".col-left .item-video").each(function() { |
193 |
26 var li = $(this), |
194 /* Click on Tabs */ |
27 title = $(this).find(".title-video"), |
195 |
28 titletext = title.text(); |
196 function showSegmentation() { |
29 if (val && find.test(titletext)) { |
197 $(".col-middle").removeClass("empty-mode pvw-mode").addClass("segment-mode"); |
30 title.html(titletext.replace(replace, '<span style="background: yellow;">$1</span>')); |
198 return false; |
31 li.show(); |
199 } |
32 } else { |
200 function showPreview() { |
33 title.text(titletext); |
201 $(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode"); |
34 if (val) { |
202 return false; |
35 li.hide(); |
203 } |
36 } else { |
204 |
37 li.show(); |
205 $(".tab-segment").click(showSegmentation); |
38 } |
206 $(".tab-pvw").click(showPreview); |
39 } |
207 |
40 }) |
208 function disableMoveItemVideo() { |
41 }); |
209 $(".organize-segments .top, .organize-segments .bottom").removeClass("disable"); |
42 |
210 $(".organize-segments .item-video:last-child .bottom, .organize-segments .item-video:first-child .top").addClass("disable"); |
43 $(".tab-segment").click(function() { |
211 } |
44 $(".col-middle").removeClass("empty-mode pvw-mode").addClass("segment-mode"); |
212 |
45 return false; |
213 $(".organize-segments").sortable({ |
46 }); |
214 stop : function(){ |
47 $(".tab-pvw").click(function() { |
|
48 $(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode"); |
|
49 return false; |
|
50 }); |
|
51 |
|
52 function disableMoveItemVideo() { |
|
53 $(".organize-segments .top, .organize-segments .bottom").removeClass("disable"); |
|
54 $(".organize-segments .item-video:last-child .bottom, .organize-segments .item-video:first-child .top").addClass("disable"); |
|
55 } |
|
56 |
|
57 $(".organize-segments").sortable({ |
|
58 stop : function(){ |
|
59 disableMoveItemVideo(); |
|
60 } |
|
61 }); |
|
62 |
|
63 $(".organize-segments .top").click(function(e){ |
|
64 var currentItem = $(this).parents(".item-video"); |
|
65 currentItem.insertBefore(currentItem.prev()); |
|
66 disableMoveItemVideo(); |
215 disableMoveItemVideo(); |
67 }); |
216 } |
68 |
217 }); |
69 $(".organize-segments .bottom").click(function(e){ |
218 |
70 var currentItem = $(this).parents(".item-video"); |
219 $(".organize-segments .top").click(function(e){ |
71 currentItem.insertAfter(currentItem.next()); |
220 var currentItem = $(this).parents(".item-video"); |
72 disableMoveItemVideo(); |
221 currentItem.insertBefore(currentItem.prev()); |
73 }); |
222 disableMoveItemVideo(); |
74 |
223 }); |
75 |
224 |
76 } |
225 $(".organize-segments .bottom").click(function(e){ |
77 |
226 var currentItem = $(this).parents(".item-video"); |
78 IriSP.Hashcut = Hashcut; |
227 currentItem.insertAfter(currentItem.next()); |
|
228 disableMoveItemVideo(); |
|
229 }); |
|
230 |
79 } |
231 } |
80 )(); |
|
81 |
232 |
82 $(function() { |
233 $(function() { |
83 var hashcut = new IriSP.Hashcut(); |
234 var hashcut = new IriSP.Hashcut(); |
84 }); |
235 }); |