Context Navigation

PlaylistComponent.as @ 592

Visit:

Revision 592, 18.0 KB checked in by pablo, 4 years ago (diff)
Make v5 skin more compatible

Line
1	package com.longtailvideo.jwplayer.view.components {
2	import com.longtailvideo.jwplayer.events.PlayerStateEvent;
3	import com.longtailvideo.jwplayer.events.PlaylistEvent;
4	import com.longtailvideo.jwplayer.model.PlaylistItem;
5	import com.longtailvideo.jwplayer.player.IPlayer;
6	import com.longtailvideo.jwplayer.player.PlayerState;
7	import com.longtailvideo.jwplayer.utils.Draw;
8	import com.longtailvideo.jwplayer.utils.RootReference;
9	import com.longtailvideo.jwplayer.utils.Stacker;
10	import com.longtailvideo.jwplayer.utils.Stretcher;
11	import com.longtailvideo.jwplayer.utils.Strings;
12	import com.longtailvideo.jwplayer.view.PlayerLayoutManager;
13	import com.longtailvideo.jwplayer.view.interfaces.IPlaylistComponent;
14
15	import flash.display.DisplayObject;
16	import flash.display.DisplayObjectContainer;
17	import flash.display.Loader;
18	import flash.display.MovieClip;
19	import flash.display.Sprite;
20	import flash.events.Event;
21	import flash.events.MouseEvent;
22	import flash.geom.ColorTransform;
23	import flash.net.URLRequest;
24	import flash.text.TextField;
25	import flash.text.TextFormat;
26	import flash.utils.clearInterval;
27	import flash.utils.setInterval;
28
29
30	public class PlaylistComponent extends CoreComponent implements IPlaylistComponent {
31	/ Array with all button instances /
32	private var buttons:Array;
33	/ Height of a button (to calculate scrolling) /
34	private var buttonheight:Number;
35	/ Currently active button. /
36	private var active:Number;
37	/ Proportion between clip and mask. /
38	private var proportion:Number;
39	/ Interval ID for scrolling /
40	private var scrollInterval:Number;
41	/ Image dimensions. /
42	private var image:Array;
43	/ Color object for backcolor. /
44	private var back:ColorTransform;
45	/ Color object for frontcolor. /
46	private var front:ColorTransform;
47	/ Color object for lightcolor. /
48	private var light:ColorTransform;
49	/ Visual representation of a the playlist /
50	private var list:Sprite;
51	/ Visual representation of a playlist item /
52	private var button:Sprite;
53	/ The playlist mask /
54	private var listmask:Sprite;
55	/ The playlist slider /
56	private var slider:Sprite;
57	/ The playlist background /
58	private var background:Sprite;
59
60
61	public function PlaylistComponent(player:IPlayer) {
62	super(player, "playlist");
63	player.addEventListener(PlaylistEvent.JWPLAYER_PLAYLIST_ITEM, itemHandler);
64	player.addEventListener(PlaylistEvent.JWPLAYER_PLAYLIST_LOADED, playlistHandler);
65	player.addEventListener(PlaylistEvent.JWPLAYER_PLAYLIST_UPDATED, playlistHandler);
66	player.addEventListener(PlayerStateEvent.JWPLAYER_PLAYER_STATE, stateHandler);
67	background = getSkinElement("background") as Sprite;
68	if (!background) {
69	background = new Sprite();
70	background.name = "background";
71	background.graphics.beginFill(0, 1);
72	background.graphics.drawRect(0, 0, 1, 1);
73	background.graphics.endFill();
74	}
75	addElement(background);
76	slider = getSkinElement("slider") as Sprite;
77	if (!slider) {
78	slider = new Sprite();
79
80
81	var sliderBack:Sprite = getSkinElement("sliderBackground") as Sprite;
82	if (!sliderBack) {
83	sliderBack = new Sprite();
84	sliderBack.graphics.beginFill(0, 1);
85	sliderBack.graphics.drawRect(0, 0, 1, 1);
86	sliderBack.graphics.endFill();
87	}
88	sliderBack.name = "back";
89	addElement(sliderBack,slider);
90
91	var sliderRail:Sprite = getSkinElement("sliderRail") as Sprite;
92	if (!sliderRail){
93	sliderRail = new Sprite();
94	sliderRail.graphics.beginFill(0, 1);
95	sliderRail.graphics.drawRect(0, 0, 7, 22);
96	sliderRail.graphics.endFill();
97	}
98	sliderRail.name = "rail";
99	addElement(sliderRail,slider);
100
101	var sliderThumb:Sprite = getSkinElement("sliderThumb") as Sprite;
102	if (!sliderThumb) {
103	sliderThumb = new Sprite();
104	sliderThumb.graphics.beginFill(0, 1);
105	sliderThumb.graphics.drawRect(0, 0, 5, 54);
106	sliderThumb.graphics.endFill();
107	}
108	sliderThumb.name = "icon";
109	addElement(sliderThumb,slider);
110	}
111	addElement(slider);
112	slider.buttonMode = true;
113	slider.mouseChildren = false;
114	slider.addEventListener(MouseEvent.MOUSE_DOWN, sdownHandler);
115	slider.addEventListener(MouseEvent.MOUSE_OVER, soverHandler);
116	slider.addEventListener(MouseEvent.MOUSE_OUT, soutHandler);
117	slider.visible = false;
118	listmask = getSkinElement("masker") as Sprite;
119	if (!listmask) {
120	listmask = new Sprite();
121	listmask.graphics.beginFill(0, 0);
122	listmask.graphics.drawRect(0, 0, 1, 1);
123	listmask.graphics.endFill();
124	}
125	addElement(listmask);
126	list = getSkinElement("list") as Sprite;
127	if (!list) {
128	list = new Sprite();
129	button = buildButton() as Sprite;
130	addElement(button, list);
131	} else {
132	button = list.getChildByName("button") as Sprite;
133	}
134	buttonheight = button.height;
135	button.visible = false;
136	list.mask = listmask;
137	list.addEventListener(MouseEvent.CLICK, clickHandler);
138	list.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
139	list.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
140	addElement(list);
141	buttons = new Array();
142	this.addEventListener(MouseEvent.MOUSE_WHEEL, wheelHandler);
143	try {
144	image = new Array(button.getChildByName("image").width, button.getChildByName("image").height);
145	} catch (err:Error) {
146	}
147	if (button.getChildByName("back")) {
148	setColors();
149	}
150	}
151
152
153	private function buildButton():MovieClip {
154	var btn:MovieClip = new MovieClip();
155
156	var back:Sprite = new Sprite();
157	back.name = "back";
158	back.graphics.beginFill(0, 1);
159	back.graphics.drawRect(0, 0, 1, 1);
160	back.graphics.endFill();
161	addElement(back, btn, 0, 0);
162
163	var img:Sprite = new Sprite();
164	img.name = "image";
165	img.graphics.beginFill(0, 1);
166	img.graphics.drawRect(0, 0, 80, 60);
167	img.graphics.endFill();
168	addElement(img, btn, 1, 1);
169
170	var titleTextFormat:TextFormat = new TextFormat();
171	titleTextFormat.size = 13;
172	titleTextFormat.font = "_sans";
173	titleTextFormat.bold = true;
174	var title:TextField = new TextField();
175	title.name = "title";
176	//title.autoSize = TextFieldAutoSize.LEFT;
177	title.defaultTextFormat = titleTextFormat;
178	title.wordWrap = true;
179	title.multiline = true;
180	title.setTextFormat(titleTextFormat);
181	title.width = 250;
182	title.height = 20;
183	addElement(title, btn, 85, 2);
184
185	var descriptionTextFormat:TextFormat = new TextFormat();
186	descriptionTextFormat.size = 11;
187	descriptionTextFormat.font = "_sans";
188	var description:TextField = new TextField();
189	description.name = "description";
190	//description.autoSize = TextFieldAutoSize.LEFT;
191	description.wordWrap = true;
192	description.multiline = true;
193	description.width= 290;
194	description.height = 36;
195	description.defaultTextFormat = descriptionTextFormat;
196	addElement(description, btn, 86, 20);
197
198	var duration:TextField = new TextField();
199	duration.name = "duration";
200	duration.width = 40;
201	duration.height = 20;
202	addElement(duration, btn, 335, 4);
203	return btn;
204	}
205
206	private function addElement(doc:DisplayObject, parent:DisplayObjectContainer = null, x:Number = 0, y:Number = 0):void {
207	if (!parent) {
208	parent = this;
209	}
210	parent.addChild(doc);
211	doc.x = x;
212	doc.y = y;
213	}
214
215
216	/ Handle a button rollover. /
217	private function overHandler(evt:MouseEvent):void {
218	var idx:Number = Number(evt.target.name);
219	if (front && back) {
220	for (var itm:String in _player.playlist.getItemAt(idx)) {
221	if (getButton(idx).getChildByName(itm) && getButton(idx).getChildByName(itm) is TextField) {
222	(getButton(idx).getChildByName(itm) as TextField).textColor = back.color;
223	}
224	}
225	getButton(idx).getChildByName("back").transform.colorTransform = light;
226	}
227	}
228
229
230	/ Handle a button rollover. /
231	private function outHandler(evt:MouseEvent):void {
232	var idx:Number = Number(evt.target.name);
233	if (front && back) {
234	for (var itm:String in _player.playlist.getItemAt(idx)) {
235	if (getButton(idx).getChildByName(itm) && getButton(idx).getChildByName(itm) is TextField) {
236	if (idx == active) {
237	(getButton(idx).getChildByName(itm) as TextField).textColor = light.color;
238	} else {
239	(getButton(idx).getChildByName(itm) as TextField).textColor = front.color;
240	}
241	}
242	}
243	getButton(idx).getChildByName("back").transform.colorTransform = back;
244	}
245	}
246
247
248	/ Setup all buttons in the playlist /
249	private function buildPlaylist(clr:Boolean):void {
250	if (!_player.playlist \|\| player.playlist.length < 1) {
251	return;
252	}
253	var wid:Number = getConfigParam("width");
254	var hei:Number = getConfigParam("height");
255	listmask.height = hei;
256	listmask.width = wid;
257	proportion = _player.playlist.length * buttonheight / hei;
258	if (proportion > 1.01) {
259	wid -= slider.width;
260	buildSlider();
261	} else {
262	slider.visible = false;
263	}
264	if (clr) {
265	list.y = listmask.y;
266	for (var j:Number = 0; j < buttons.length; j++) {
267	list.removeChild(getButton(j));
268	}
269	buttons = new Array();
270	} else {
271	if (proportion > 1) {
272	scrollEase();
273	}
274	}
275	for (var i:Number = 0; i < _player.playlist.length; i++) {
276	if (clr) {
277	var btn:MovieClip = Draw.clone(button, true) as MovieClip;
278	if (!btn \|\| btn.numChildren < 1) {
279	btn = buildButton();
280	list.addChild(btn);
281	}
282	var stc:Stacker = new Stacker(btn);
283	btn.y = i * buttonheight;
284	btn.buttonMode = true;
285	btn.mouseChildren = false;
286	btn.name = i.toString();
287	buttons.push({c: btn, s: stc});
288	setContents(i);
289	}
290	if (buttons[i]) {
291	(buttons[i].s as Stacker).rearrange(wid);
292	}
293	}
294	}
295
296
297	/ Setup the scrollbar component /
298	private function buildSlider():void {
299	slider.visible = true;
300	slider.x = getConfigParam("width") - slider.width;
301	var dif:Number = getConfigParam("height") - slider.height - slider.y;
302	slider.getChildByName("back").height += dif;
303	slider.getChildByName("rail").height += dif;
304	slider.getChildByName("icon").height = Math.round(slider.getChildByName("rail").height / proportion);
305	}
306
307
308	/ Make sure the playlist is not out of range. /
309	private function scrollEase(ips:Number = -1, cps:Number = -1):void {
310	if (ips != -1) {
311	slider.getChildByName("icon").y = Math.round(ips - (ips - slider.getChildByName("icon").y) / 1.5);
312	list.y = Math.round((cps - (cps - list.y) / 1.5));
313	}
314	if (list.y > 0 \|\| slider.getChildByName("icon").y < slider.getChildByName("rail").y) {
315	list.y = listmask.y;
316	slider.getChildByName("icon").y = slider.getChildByName("rail").y;
317	} else if (list.y < listmask.height - list.height \|\| slider.getChildByName("icon").y > slider.getChildByName("rail").y + slider.getChildByName("rail").height - slider.getChildByName("icon").height) {
318	slider.getChildByName("icon").y = slider.getChildByName("rail").y + slider.getChildByName("rail").height - slider.getChildByName("icon").height;
319	list.y = listmask.y + listmask.height - list.height;
320	}
321	}
322
323
324	/ Scrolling handler. /
325	private function scrollHandler():void {
326	var yps:Number = slider.mouseY - slider.getChildByName("rail").y;
327	var ips:Number = yps - slider.getChildByName("icon").height / 2;
328	var cps:Number = listmask.y + listmask.height / 2 - proportion * yps;
329	scrollEase(ips, cps);
330	}
331
332
333	/ Init the colors. /
334	private function setColors():void {
335	if (_player.config.backcolor) {
336	back = new ColorTransform();
337	back.color = _player.config.backcolor.color;
338	background.transform.colorTransform = back;
339	slider.getChildByName("back").transform.colorTransform = back;
340	}
341	if (_player.config.frontcolor) {
342	front = new ColorTransform();
343	front.color = _player.config.frontcolor.color;
344	try {
345	slider.getChildByName("icon").transform.colorTransform = front;
346	slider.getChildByName("rail").transform.colorTransform = front;
347	} catch (err:Error) {
348	}
349	if (_player.config.lightcolor) {
350	light = new ColorTransform();
351	light.color = _player.config.lightcolor.color;
352	} else {
353	light = front;
354	}
355	}
356	}
357
358
359	/ Setup button elements /
360	private function setContents(idx:Number):void {
361	var playlistItem:PlaylistItem = _player.playlist.getItemAt(idx);
362	var title:TextField = getButton(idx).getChildByName("title") as TextField;
363	var description:TextField = getButton(idx).getChildByName("description") as TextField;
364	var duration:TextField = getButton(idx).getChildByName("duration") as TextField;
365	if (playlistItem.image) {
366	if (getConfigParam('thumbs') != false && _player.config.playlist != 'none' && playlistItem.image) {
367	var img:Sprite = getButton(idx).getChildByName("image") as Sprite;
368	if (img) {
369	var msk:Sprite = Draw.rect(getButton(idx), '0xFF0000', img.width, img.height, img.x, img.y);
370	var ldr:Loader = new Loader();
371	img.mask = msk;
372	img.addChild(ldr);
373	ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderHandler);
374	if (playlistItem.image) {
375	ldr.load(new URLRequest(playlistItem.image));
376	}
377	}
378	}
379	}
380	if (playlistItem.duration) {
381	if (playlistItem.duration > 0) {
382	duration.text = Strings.digits(playlistItem.duration);
383	if (front) {
384	duration.textColor = front.color;
385	}
386	}
387	}
388	try {
389	if (description) {
390	description.htmlText = playlistItem.description;
391	}
392	if (title) {
393	title.htmlText = "<b>" + playlistItem.title + "</b>";
394	}
395	if (front) {
396	description.textColor = front.color;
397	title.textColor = front.color;
398	}
399	} catch (e:Error) {
400	}
401	if (getButton(idx).getChildByName("image") && (!playlistItem.image \|\| getConfigParam('thumbs') == false)) {
402	getButton(idx).getChildByName("image").visible = false;
403	}
404	if (back) {
405	getButton(idx).getChildByName("back").transform.colorTransform = back;
406	}
407	}
408
409
410	/ Loading of image completed; resume loading /
411	private function loaderHandler(evt:Event):void {
412	var ldr:Loader = Loader(evt.target.loader);
413	Stretcher.stretch(ldr, image[0], image[1], Stretcher.FILL);
414	}
415
416
417	private function wheelHandler(evt:MouseEvent):void {
418	//scrollEase(evt.delta * -1, getConfigParam("height"));
419	}
420
421
422	/ Start scrolling the playlist on mousedown. /
423	private function sdownHandler(evt:MouseEvent):void {
424	clearInterval(scrollInterval);
425	RootReference.stage.addEventListener(MouseEvent.MOUSE_UP, supHandler);
426	scrollHandler();
427	scrollInterval = setInterval(scrollHandler, 50);
428	}
429
430
431	/ Revert the highlight on mouseout. /
432	private function soutHandler(evt:MouseEvent):void {
433	if (front) {
434	slider.getChildByName("icon").transform.colorTransform = front;
435	} else {
436	//slider.getChildByName("icon").gotoAndStop('out');
437	}
438	}
439
440
441	/ Highlight the icon on rollover. /
442	private function soverHandler(evt:MouseEvent):void {
443	if (front) {
444	slider.getChildByName("icon").transform.colorTransform = light;
445	} else {
446	//slider.getChildByName("icon").gotoAndStop('over');
447	}
448	}
449
450
451	/ Stop scrolling the playlist on mouseout. /
452	private function supHandler(evt:MouseEvent):void {
453	clearInterval(scrollInterval);
454	RootReference.stage.removeEventListener(MouseEvent.MOUSE_UP, supHandler);
455	}
456
457
458	/ Handle a click on a button. /
459	private function clickHandler(evt:MouseEvent):void {
460	_player.playlistItem(Number(evt.target.name));
461	}
462
463
464	/ Process resizing requests /
465	public function resize(width:Number, height:Number):void {
466	x = 0;
467	y = 0;
468	setConfigParam("width", width);
469	setConfigParam("height", height);
470	background.width = width;
471	background.height = height;
472	buildPlaylist(false);
473	if (PlayerLayoutManager.testPosition(getConfigParam('position'))) {
474	visible = true;
475	} else if (getConfigParam('position') == "over") {
476	stateHandler();
477	} else {
478	visible = false;
479	}
480	if (visible && getConfigParam('visible') === false) {
481	visible = false;
482	}
483	}
484
485
486	/** Switch the currently active item */
487	protected function itemHandler(evt:PlaylistEvent = null):void {
488	var idx:Number = _player.playlist.currentIndex;
489	clearInterval(scrollInterval);
490	if (proportion > 1.01) {
491	scrollInterval = setInterval(scrollEase, 50, idx * buttonheight / proportion, -idx * buttonheight + listmask.y);
492	}
493	if (light) {
494	for (var itm:String in _player.playlist.getItemAt(idx)) {
495	if (getButton(idx).getChildByName(itm)) {
496	try {
497	(getButton(idx).getChildByName(itm) as TextField).textColor = light.color;
498	} catch (err:Error) {
499	}
500	}
501	}
502	}
503	if (back) {
504	getButton(idx).getChildByName("back").transform.colorTransform = back;
505	}
506	if (!isNaN(active)) {
507	if (front) {
508	for (var act:String in _player.playlist.getItemAt(active)) {
509	if (getButton(active).getChildByName(act)) {
510	try {
511	(getButton(active).getChildByName(act) as TextField).textColor = front.color;
512	} catch (err:Error) {
513	}
514	}
515	}
516	}
517	}
518	active = idx;
519	}
520
521
522	/ New playlist loaded: rebuild the playclip. /
523	protected function playlistHandler(evt:PlaylistEvent = null):void {
524	clearInterval(scrollInterval);
525	active = undefined;
526	buildPlaylist(true);
527	resize(width, height);
528	}
529
530
531	/ Process state changes /
532	protected function stateHandler(evt:PlayerStateEvent = null):void {
533	if (getConfigParam('position') == "over") {
534	if (player.state == PlayerState.PLAYING \|\| player.state == PlayerState.PAUSED \|\| player.state == PlayerState.BUFFERING) {
535	visible = false;
536	} else {
537	visible = true;
538	}
539	}
540	}
541
542
543	private function getButton(id:Number):Sprite {
544	return buttons[id].c as Sprite;
545	}
546	}
547	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format