| author | hamidouk |
| Tue, 25 Oct 2011 17:30:16 +0200 | |
| branch | popcorn-port |
| changeset 145 | b477c9430d36 |
| parent 131 | 44c1170e0044 |
| child 151 | dc2ff4c87490 |
| permissions | -rw-r--r-- |
| 109 | 1 |
IriSP.PlayerWidget = function(Popcorn, config, Serializer) { |
2 |
IriSP.Widget.call(this, Popcorn, config, Serializer); |
|
|
145
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
3 |
|
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
4 |
this._searchBlockOpen = false; |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
5 |
this._searchLastValue = ""; |
| 109 | 6 |
}; |
| 115 | 7 |
|
8 |
IriSP.PlayerWidget.prototype = new IriSP.Widget(); |
|
9 |
||
| 98 | 10 |
IriSP.PlayerWidget.prototype.draw = function() { |
11 |
var _this = this; |
|
| 131 | 12 |
var width = this.width; |
13 |
var height = this.height; |
|
14 |
var heightS = this.height-20; |
|
|
145
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
15 |
|
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
16 |
var searchBox = Mustache.to_html(IriSP.search_template); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
17 |
this.selector.append(searchBox); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
18 |
|
| 131 | 19 |
if (this._config.mode=="radio") { |
| 98 | 20 |
|
| 131 | 21 |
//IriSP.jQuery( "#"+this._config.container ).before(IriSP.search_template); |
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
22 |
var radioPlayer = Mustache.to_html(IriSP.radio_template, {"share_template" : IriSP.share_template}); |
|
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
23 |
this.selector.append(radioPlayer); |
| 98 | 24 |
|
25 |
// special tricks for IE 7 |
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
26 |
if (IriSP.jQuery.browser.msie == true && IriSP.jQuery.browser.version == "7.0"){ |
| 98 | 27 |
//LdtSearchContainer |
28 |
//__IriSP.jQuery("#LdtPlayer").attr("margin-top","50px"); |
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
29 |
this.selector.children("#Ldt-Root").css("padding-top","25px"); |
| 98 | 30 |
} |
| 131 | 31 |
} else if (this._config.mode == "video") { |
| 98 | 32 |
|
33 |
var videoPlayer = Mustache.to_html(IriSP.video_template, {"share_template" : IriSP.share_template, "heightS" : heightS}); |
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
34 |
this.selector.append(videoPlayer); |
| 98 | 35 |
} |
36 |
|
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
37 |
this.selector.children("#Ldt-Annotations").width(width - (75 * 2)); |
|
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
38 |
this.selector.children("#Ldt-Show-Arrow-container").width(width - (75 * 2)); |
|
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
39 |
this.selector.children("#Ldt-ShowAnnotation-audio").width(width - 10); |
|
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
40 |
this.selector.children("#Ldt-ShowAnnotation-video").width(width - 10); |
|
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
41 |
this.selector.children("#Ldt-SaKeyword").width(width - 10); |
|
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
42 |
this.selector.children("#Ldt-controler").width(width - 10); |
|
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
43 |
this.selector.children("#Ldt-Control").attr("z-index", "100"); |
|
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
44 |
this.selector.children("#Ldt-controler").hide(); |
| 98 | 45 |
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
46 |
this.selector.children("#Ldt-ShowAnnotation-audio").append(IriSP.annotation_loading_template); |
| 98 | 47 |
|
| 131 | 48 |
if(this._config.mode=='radio'){ |
49 |
this.selector.children("#Ldt-load-container").attr("width",this.width); |
|
| 98 | 50 |
} |
51 |
|
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
52 |
this.selector.children("#Ldt-controler").show(); |
| 98 | 53 |
//__IriSP.jQuery("#Ldt-Root").css('display','visible'); |
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
54 |
this.selector.children("#Ldt-ShowAnnotation").click( function () { |
| 98 | 55 |
//__IriSP.jQuery(this).slideUp(); |
56 |
} ); |
|
57 |
||
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
58 |
var LdtpPlayerY = this.selector.children("#Ldt-PlaceHolder").attr("top"); |
|
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
59 |
var LdtpPlayerX = this.selector.children("#Ldt-PlaceHolder").attr("left"); |
| 98 | 60 |
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
61 |
this.selector.find("#slider-range-min").slider( { //range: "min", |
| 98 | 62 |
value: 0, |
63 |
min: 1, |
|
64 |
max: this._serializer.currentMedia().meta["dc:duration"]/1000,//1:54:52.66 = 3600+3240+ |
|
65 |
step: 0.1, |
|
66 |
slide: function(event, ui) { |
|
67 |
_this._Popcorn.currentTime(ui.value); |
|
68 |
}, |
|
69 |
/* change event is similar to slide, but it happens when the slider position is |
|
70 |
modified programatically. We use it for unit tests */ |
|
71 |
/* |
|
72 |
change: function(event, ui) { |
|
73 |
_this._Popcorn.currentTime(ui.value); |
|
74 |
} |
|
75 |
*/ |
|
76 |
} ); |
|
77 |
|
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
78 |
this.selector.children("#amount").val(this.selector.children("#slider-range-min").slider("value")+" s"); |
|
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
79 |
this.selector.children(".Ldt-Control1 button:first").button({ |
| 98 | 80 |
icons: { |
81 |
primary: 'ui-icon-play' |
|
82 |
}, |
|
83 |
text: false |
|
84 |
}).click(function() { _this.playHandler.call(_this); }) |
|
85 |
.next().button({ |
|
86 |
icons: { |
|
87 |
primary: 'ui-icon-seek-next' |
|
88 |
}, |
|
89 |
text: false |
|
90 |
}); |
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
91 |
this.selector.children(".Ldt-Control2 button:first").button({ |
| 98 | 92 |
icons: { |
93 |
primary: 'ui-icon-search'//, |
|
94 |
//secondary: 'ui-icon-volume-off' |
|
95 |
}, |
|
96 |
text: false |
|
|
145
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
97 |
}).click(function() { _this.searchButtonHandler.call(_this); }) |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
98 |
.next().button({ |
| 98 | 99 |
icons: { |
100 |
primary: 'ui-icon-volume-on' |
|
101 |
}, |
|
102 |
text: false |
|
103 |
}).click(function() { _this.muteHandler.call(_this); } ); |
|
104 |
||
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
105 |
this.selector.children("#ldt-CtrlPlay").attr( "style", "background-color:#CD21C24;" ); |
| 98 | 106 |
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
107 |
this.selector.children("#Ldt-load-container").hide(); |
| 98 | 108 |
|
| 131 | 109 |
if( this._config.mode=="radio" & IriSP.jQuery.browser.msie != true ) { |
| 98 | 110 |
IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" ); |
111 |
} |
|
112 |
||
113 |
this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
|
114 |
}; |
|
115 |
||
116 |
IriSP.PlayerWidget.prototype.playHandler = function() { |
|
117 |
var status = this._Popcorn.media.paused; |
|
118 |
|
|
119 |
if ( status == true ){ |
|
120 |
this._Popcorn.play(); |
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
121 |
this.selector.children(".ui-icon-play").css( "background-position", "-16px -160px" ); |
|
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
122 |
this.selector.children("#ldt-CtrlPlay").attr("title", "Play"); |
| 98 | 123 |
} else { |
124 |
this._Popcorn.pause(); |
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
125 |
this.selector.children(".ui-icon-play").css( "background-position","0px -160px" ); |
|
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
126 |
this.selector.children("#ldt-CtrlPlay").attr("title", "Pause"); |
| 98 | 127 |
} |
128 |
}; |
|
129 |
||
130 |
IriSP.PlayerWidget.prototype.muteHandler = function() { |
|
131 |
if (!this._Popcorn.muted()) { |
|
132 |
this._Popcorn.mute(true); |
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
133 |
this.selector.children(" .ui-icon-volume-on ").css("background-position", "-130px -160px"); |
| 98 | 134 |
} else { |
135 |
this._Popcorn.mute(false); |
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
136 |
this.selector.children( ".ui-icon-volume-on" ).css("background-position", "-144px -160px" ); |
| 98 | 137 |
} |
138 |
}; |
|
139 |
||
|
145
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
140 |
/* updates the slider as time passes */ |
| 98 | 141 |
IriSP.PlayerWidget.prototype.sliderUpdater = function() { |
142 |
var currentPosition = this._Popcorn.currentTime(); |
|
|
121
607f481ef4c3
some refactoring to use this.selector instead of directly using jquery.
hamidouk
parents:
115
diff
changeset
|
143 |
this.selector.find( "#slider-range-min" ).slider( "value", currentPosition); |
| 98 | 144 |
}; |
145 |
||
|
145
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
146 |
IriSP.PlayerWidget.prototype.searchButtonHandler = function() { |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
147 |
var self = this; |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
148 |
|
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
149 |
/* show the search field if it is not shown */ |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
150 |
if ( this._searchBlockOpen == false ) { |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
151 |
this.selector.find( ".ui-icon-search" ).css( "background-position", "-144px -112px" ); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
152 |
//__IriSP.jQuery("#LdtSearch").animate({height:26},250); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
153 |
|
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
154 |
this.selector.find("#LdtSearch").show(100); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
155 |
|
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
156 |
this.selector.find("#LdtSearchInput").css('background-color','#fff'); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
157 |
this.selector.find("#LdtSearchInput").focus(); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
158 |
this.selector.find("#LdtSearchInput").attr('value', this._searchLastValue); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
159 |
this._searchBlockOpen = true; |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
160 |
this.selector.find("#LdtSearchInput").bind('keypress set', null, function() { self.searchHandler.call(self); } ); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
161 |
|
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
162 |
} else { |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
163 |
this._searchLastValue = this.selector.find("#LdtSearchInput").attr('value'); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
164 |
this.selector.find("#LdtSearchInput").attr('value',''); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
165 |
//IriSP.SearchClean(); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
166 |
this.selector.find(".ui-icon-search").css("background-position","-160px -112px"); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
167 |
//__IriSP.jQuery("#LdtSearch").animate({height:0},250); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
168 |
this.selector.find("#LdtSearch").hide(100); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
169 |
|
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
170 |
// unbind the watcher event. |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
171 |
this.selector.find("#LdtSearchInput").unbind('keypress set'); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
172 |
this._searchBlockOpen = false; |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
173 |
} |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
174 |
}; |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
175 |
|
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
176 |
/* this handler is called whenever the content of the search |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
177 |
field changes */ |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
178 |
IriSP.PlayerWidget.prototype.searchHandler = function() { |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
179 |
this._searchLastValue = this.selector.find("#LdtSearchInput").attr('value'); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
180 |
this._Popcorn.trigger("IriSP.search", this._searchLastValue); |
|
b477c9430d36
tests and implementation of the search button for the player.
hamidouk
parents:
131
diff
changeset
|
181 |
}; |