17 IriSP.PlayerWidget = function(Popcorn, config, Serializer) { |
17 IriSP.PlayerWidget = function(Popcorn, config, Serializer) { |
18 IriSP.Widget.call(this, Popcorn, config, Serializer); |
18 IriSP.Widget.call(this, Popcorn, config, Serializer); |
19 |
19 |
20 }; |
20 }; |
21 |
21 |
22 IriSP.PlayerWidget.prototype = IriSP.Widget; |
22 IriSP.PlayerWidget.prototype = new IriSP.Widget; |
23 |
23 |
24 IriSP.PlayerWidget.prototype.draw = function() { |
24 IriSP.PlayerWidget.prototype.draw = function() { |
|
25 var _this = this; |
25 var width = this._config.gui.width; |
26 var width = this._config.gui.width; |
26 var height = this._config.gui.height; |
27 var height = this._config.gui.height; |
27 var heightS = this._config.gui.height-20; |
28 var heightS = this._config.gui.height-20; |
28 |
29 |
29 if( this._config.gui.mode=="radio" ){ |
30 if( this._config.gui.mode=="radio" ){ |
56 IriSP.jQuery(IriSP.annotation_loading_template).appendTo("#Ldt-ShowAnnotation-audio"); |
57 IriSP.jQuery(IriSP.annotation_loading_template).appendTo("#Ldt-ShowAnnotation-audio"); |
57 |
58 |
58 if(this._config.gui.mode=='radio'){ |
59 if(this._config.gui.mode=='radio'){ |
59 IriSP.jQuery("#Ldt-load-container").attr("width",this._config.gui.width); |
60 IriSP.jQuery("#Ldt-load-container").attr("width",this._config.gui.width); |
60 } |
61 } |
61 // Show or not the output |
|
62 if(this._config.gui.debug===true){ |
|
63 IriSP.jQuery("#Ldt-output").show(); |
|
64 } else { |
|
65 IriSP.jQuery("#Ldt-output").hide(); |
|
66 } |
|
67 |
62 |
68 IriSP.jQuery( "#Ldt-controler" ).show(); |
63 IriSP.jQuery( "#Ldt-controler" ).show(); |
69 //__IriSP.jQuery("#Ldt-Root").css('display','visible'); |
64 //__IriSP.jQuery("#Ldt-Root").css('display','visible'); |
70 IriSP.jQuery( "#Ldt-ShowAnnotation").click( function () { |
65 IriSP.jQuery( "#Ldt-ShowAnnotation").click( function () { |
71 //__IriSP.jQuery(this).slideUp(); |
66 //__IriSP.jQuery(this).slideUp(); |
77 IriSP.jQuery( "#slider-range-min" ).slider( { //range: "min", |
72 IriSP.jQuery( "#slider-range-min" ).slider( { //range: "min", |
78 value: 0, |
73 value: 0, |
79 min: 1, |
74 min: 1, |
80 max: this._serializer.currentMedia().meta["dc:duration"]/1000,//1:54:52.66 = 3600+3240+ |
75 max: this._serializer.currentMedia().meta["dc:duration"]/1000,//1:54:52.66 = 3600+3240+ |
81 step: 0.1, |
76 step: 0.1, |
82 slide: function(event, ui) { |
77 slide: function(event, ui) { |
83 |
78 _this._Popcorn.currentTime(ui.value); |
84 //__IriSP.jQuery("#amount").val(ui.value+" s"); |
79 }, |
85 //player.sendEvent('SEEK', ui.value) |
80 /* change event is similar to slide, but it happens when the slider position is |
86 IriSP.MyApiPlayer.seek(ui.value); |
81 modified programatically. We use it for unit tests */ |
87 //changePageUrlOffset(ui.value); |
82 /* |
88 //player.sendEvent('PAUSE') |
83 change: function(event, ui) { |
|
84 _this._Popcorn.currentTime(ui.value); |
89 } |
85 } |
|
86 */ |
90 } ); |
87 } ); |
91 |
88 |
92 IriSP.jQuery("#amount").val(IriSP.jQuery("#slider-range-min").slider("value")+" s"); |
89 IriSP.jQuery("#amount").val(IriSP.jQuery("#slider-range-min").slider("value")+" s"); |
93 IriSP.jQuery(".Ldt-Control1 button:first").button({ |
90 IriSP.jQuery(".Ldt-Control1 button:first").button({ |
94 icons: { |
91 icons: { |
95 primary: 'ui-icon-play' |
92 primary: 'ui-icon-play' |
96 }, |
93 }, |
97 text: false |
94 text: false |
98 }).click(IriSP.wrap(this, this.playEvent)) |
95 }).click(function() { _this.playHandler.call(_this); }) |
99 .next().button({ |
96 .next().button({ |
100 icons: { |
97 icons: { |
101 primary: 'ui-icon-seek-next' |
98 primary: 'ui-icon-seek-next' |
102 }, |
99 }, |
103 text: false |
100 text: false |
111 }).next().button({ |
108 }).next().button({ |
112 icons: { |
109 icons: { |
113 primary: 'ui-icon-volume-on' |
110 primary: 'ui-icon-volume-on' |
114 }, |
111 }, |
115 text: false |
112 text: false |
116 }); |
113 }).click(function() { _this.muteHandler.call(_this); } ); |
117 |
114 |
118 // /!\ PB A MODIFIER |
115 // /!\ PB A MODIFIER |
119 //__IriSP.MyTags.draw(); |
116 //__IriSP.MyTags.draw(); |
120 IriSP.jQuery( "#ldt-CtrlPlay" ).attr( "style", "background-color:#CD21C24;" ); |
117 IriSP.jQuery( "#ldt-CtrlPlay" ).attr( "style", "background-color:#CD21C24;" ); |
121 |
118 |
122 IriSP.jQuery( "#Ldt-load-container" ).hide(); |
119 IriSP.jQuery( "#Ldt-load-container" ).hide(); |
123 |
120 |
124 if( this._config.gui.mode=="radio" & IriSP.jQuery.browser.msie != true ) { |
121 if( this._config.gui.mode=="radio" & IriSP.jQuery.browser.msie != true ) { |
125 IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" ); |
122 IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" ); |
126 } |
123 } |
127 IriSP.trace( "__IriSP.createInterface" , "3" ); |
124 |
128 |
125 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
129 IriSP.trace( "__IriSP.createInterface", "END" ); |
126 }; |
130 |
127 |
131 |
128 IriSP.PlayerWidget.prototype.playHandler = function() { |
132 }; |
129 var status = this._Popcorn.media.paused; |
133 |
130 |
134 IriSP.PlayerWidget.prototype.playEvent = function() { |
|
135 var status = this._Popcorn.media.paused; |
|
136 |
|
137 if ( status == true ){ |
131 if ( status == true ){ |
138 this._Popcorn.play(); |
132 this._Popcorn.play(); |
|
133 IriSP.jQuery( ".ui-icon-play" ).css( "background-position", "-16px -160px" ); |
|
134 IriSP.jQuery( "#ldt-CtrlPlay" ).attr("title", "Play"); |
139 } else { |
135 } else { |
140 this._Popcorn.pause(); |
136 this._Popcorn.pause(); |
|
137 IriSP.jQuery( ".ui-icon-play" ).css( "background-position","0px -160px" ); |
|
138 IriSP.jQuery( "#ldt-CtrlPlay" ).attr("title", "Pause"); |
|
139 } |
|
140 }; |
|
141 |
|
142 IriSP.PlayerWidget.prototype.muteHandler = function() { |
|
143 if (!this._Popcorn.muted()) { |
|
144 this._Popcorn.mute(true); |
|
145 IriSP.jQuery(" .ui-icon-volume-on ").css("background-position", "-130px -160px"); |
|
146 } else { |
|
147 this._Popcorn.mute(false); |
|
148 IriSP.jQuery( ".ui-icon-volume-on" ).css("background-position", "-144px -160px" ); |
|
149 } |
|
150 }; |
|
151 |
|
152 IriSP.PlayerWidget.prototype.sliderUpdater = function() { |
|
153 var currentPosition = this._Popcorn.currentTime(); |
|
154 IriSP.jQuery( "#slider-range-min" ).slider( "value", currentPosition); |
|
155 }; |
|
156 |
|
157 |
|
158 IriSP.AnnotationsWidget = function(Popcorn, config, Serializer) { |
|
159 IriSP.Widget.call(this, Popcorn, config, Serializer); |
|
160 |
|
161 }; |
|
162 |
|
163 |
|
164 IriSP.AnnotationsWidget.prototype = new IriSP.Widget; |
|
165 |
|
166 IriSP.AnnotationsWidget.prototype.clear = function() { |
|
167 IriSP.jQuery("#Ldt-SaTitle").text(""); |
|
168 IriSP.jQuery("#Ldt-SaDescription").text(""); |
|
169 IriSP.jQuery("#Ldt-SaKeywordText").text(""); |
|
170 }; |
|
171 |
|
172 IriSP.AnnotationsWidget.prototype.displayAnnotation = function(annotation) { |
|
173 var title = annotation.content.title; |
|
174 var description = annotation.content.description; |
|
175 var keywords = "" // FIXME; |
|
176 var begin = +annotation.begin; |
|
177 var end = +annotation.end; |
|
178 var duration = +this._serializer.currentMedia().meta["dc:duration"]; |
|
179 |
|
180 IriSP.jQuery("#Ldt-SaTitle").text(title); |
|
181 IriSP.jQuery("#Ldt-SaDescription").text(description); |
|
182 IriSP.jQuery("#Ldt-SaKeywordText").text("Mots clefs : "+ keywords); |
|
183 var startPourcent = parseInt(Math.round((begin*1+(end*1-begin*1)/2) / (duration*1)) / 100); |
|
184 IriSP.jQuery("#Ldt-Show-Arrow").animate({left:startPourcent+'%'},1000); |
|
185 //IriSP.jQuery("#"+annotationTempo.id).animate({alpha:'100%'},1000); |
|
186 |
|
187 }; |
|
188 |
|
189 IriSP.AnnotationsWidget.prototype.draw = function() { |
|
190 var _this = this; |
|
191 |
|
192 var annotationMarkup = Mustache.to_html(IriSP.annotationWidget_template, {"share_template" : IriSP.share_template}); |
|
193 IriSP.jQuery("#Ldt-Ligne").append(annotationMarkup); |
|
194 console.dir(this._serializer); |
|
195 |
|
196 var annotations = this._serializer._data.annotations; |
|
197 for (i in annotations) { |
|
198 var annotation = annotations[i]; |
|
199 var begin = Math.round((+ annotation.begin) / 1000); |
|
200 var end = Math.round((+ annotation.end) / 1000); |
|
201 |
|
202 this._Popcorn = this._Popcorn.code({start: begin, end: end, |
|
203 onStart: function() { console.log(begin, end); _this.displayAnnotation(annotation); }, |
|
204 onEnd: function() { console.log("end", end); }}); |
141 } |
205 } |
142 |
206 }; |
143 this._Popcorn.trigger("mulz"); |
|
144 }; |
|