Context Navigation

PlaylistComponent.as @ 798

Visit:

Revision 798, 21.9 KB checked in by pablo, 3 years ago (diff)
Fixed LOAD where item > playlist length ( http://developer.longtailvideo.com/trac/ticket/720)

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

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

Download in other formats:

Original Format