16 |
16 |
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 |
|
22 IriSP.PlayerWidget.prototype = new IriSP.Widget; |
|
23 |
|
24 IriSP.PlayerWidget.prototype.draw = function() { |
|
25 var _this = this; |
|
26 var width = this._config.gui.width; |
|
27 var height = this._config.gui.height; |
|
28 var heightS = this._config.gui.height-20; |
|
29 |
|
30 if( this._config.gui.mode=="radio" ){ |
|
31 |
|
32 //IriSP.jQuery( "#"+this._config.gui.container ).before(IriSP.search_template); |
|
33 var radioPlayer = Mustache.to_html(IriSP.radio_template, {"share_template" : IriSP.share_template}); |
|
34 IriSP.jQuery(radioPlayer).appendTo("#"+this._config.gui.container); |
|
35 |
|
36 // special tricks for IE 7 |
|
37 if (IriSP.jQuery.browser.msie==true && IriSP.jQuery.browser.version=="7.0"){ |
|
38 //LdtSearchContainer |
|
39 //__IriSP.jQuery("#LdtPlayer").attr("margin-top","50px"); |
|
40 IriSP.jQuery("#Ldt-Root").css("padding-top","25px"); |
|
41 } |
|
42 } else if(this._config.gui.mode=="video") { |
|
43 |
|
44 var videoPlayer = Mustache.to_html(IriSP.video_template, {"share_template" : IriSP.share_template, "heightS" : heightS}); |
|
45 IriSP.jQuery(videoPlayer).appendTo("#"+this._config.gui.container); |
|
46 } |
|
47 |
|
48 IriSP.jQuery("#Ldt-Annotations").width(width-(75*2)); |
|
49 IriSP.jQuery("#Ldt-Show-Arrow-container").width(width-(75*2)); |
|
50 IriSP.jQuery("#Ldt-ShowAnnotation-audio").width(width-10); |
|
51 IriSP.jQuery("#Ldt-ShowAnnotation-video").width(width-10); |
|
52 IriSP.jQuery("#Ldt-SaKeyword").width(width-10); |
|
53 IriSP.jQuery("#Ldt-controler").width(width-10); |
|
54 IriSP.jQuery("#Ldt-Control").attr("z-index","100"); |
|
55 IriSP.jQuery("#Ldt-controler").hide(); |
|
56 |
|
57 IriSP.jQuery(IriSP.annotation_loading_template).appendTo("#Ldt-ShowAnnotation-audio"); |
|
58 |
|
59 if(this._config.gui.mode=='radio'){ |
|
60 IriSP.jQuery("#Ldt-load-container").attr("width",this._config.gui.width); |
|
61 } |
|
62 |
|
63 IriSP.jQuery( "#Ldt-controler" ).show(); |
|
64 //__IriSP.jQuery("#Ldt-Root").css('display','visible'); |
|
65 IriSP.jQuery( "#Ldt-ShowAnnotation").click( function () { |
|
66 //__IriSP.jQuery(this).slideUp(); |
|
67 } ); |
|
68 |
|
69 var LdtpPlayerY = IriSP.jQuery("#Ldt-PlaceHolder").attr("top"); |
|
70 var LdtpPlayerX = IriSP.jQuery("#Ldt-PlaceHolder").attr("left"); |
|
71 |
|
72 IriSP.jQuery( "#slider-range-min" ).slider( { //range: "min", |
|
73 value: 0, |
|
74 min: 1, |
|
75 max: this._serializer.currentMedia().meta["dc:duration"]/1000,//1:54:52.66 = 3600+3240+ |
|
76 step: 0.1, |
|
77 slide: function(event, ui) { |
|
78 _this._Popcorn.currentTime(ui.value); |
|
79 }, |
|
80 /* change event is similar to slide, but it happens when the slider position is |
|
81 modified programatically. We use it for unit tests */ |
|
82 /* |
|
83 change: function(event, ui) { |
|
84 _this._Popcorn.currentTime(ui.value); |
|
85 } |
|
86 */ |
|
87 } ); |
|
88 |
|
89 IriSP.jQuery("#amount").val(IriSP.jQuery("#slider-range-min").slider("value")+" s"); |
|
90 IriSP.jQuery(".Ldt-Control1 button:first").button({ |
|
91 icons: { |
|
92 primary: 'ui-icon-play' |
|
93 }, |
|
94 text: false |
|
95 }).click(function() { _this.playHandler.call(_this); }) |
|
96 .next().button({ |
|
97 icons: { |
|
98 primary: 'ui-icon-seek-next' |
|
99 }, |
|
100 text: false |
|
101 }); |
|
102 IriSP.jQuery(".Ldt-Control2 button:first").button({ |
|
103 icons: { |
|
104 primary: 'ui-icon-search'//, |
|
105 //secondary: 'ui-icon-volume-off' |
|
106 }, |
|
107 text: false |
|
108 }).next().button({ |
|
109 icons: { |
|
110 primary: 'ui-icon-volume-on' |
|
111 }, |
|
112 text: false |
|
113 }).click(function() { _this.muteHandler.call(_this); } ); |
|
114 |
|
115 // /!\ PB A MODIFIER |
|
116 //__IriSP.MyTags.draw(); |
|
117 IriSP.jQuery( "#ldt-CtrlPlay" ).attr( "style", "background-color:#CD21C24;" ); |
|
118 |
|
119 IriSP.jQuery( "#Ldt-load-container" ).hide(); |
|
120 |
|
121 if( this._config.gui.mode=="radio" & IriSP.jQuery.browser.msie != true ) { |
|
122 IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" ); |
|
123 } |
|
124 |
|
125 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
|
126 }; |
|
127 |
|
128 IriSP.PlayerWidget.prototype.playHandler = function() { |
|
129 var status = this._Popcorn.media.paused; |
|
130 |
|
131 if ( status == true ){ |
|
132 this._Popcorn.play(); |
|
133 IriSP.jQuery( ".ui-icon-play" ).css( "background-position", "-16px -160px" ); |
|
134 IriSP.jQuery( "#ldt-CtrlPlay" ).attr("title", "Play"); |
|
135 } else { |
|
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: |
|
204 function(annotation) { return function() { _this.displayAnnotation(annotation); } }(annotation) }); |
|
205 } |
|
206 }; |
|