| 1 | /** |
|---|
| 2 | * Display a searchbar and direct the search externally. |
|---|
| 3 | **/ |
|---|
| 4 | package com.jeroenwijering.views { |
|---|
| 5 | |
|---|
| 6 | |
|---|
| 7 | import com.jeroenwijering.events.*; |
|---|
| 8 | import com.jeroenwijering.player.View; |
|---|
| 9 | import com.jeroenwijering.utils.*; |
|---|
| 10 | import flash.display.Loader; |
|---|
| 11 | import flash.display.MovieClip; |
|---|
| 12 | import flash.events.Event; |
|---|
| 13 | import flash.events.MouseEvent; |
|---|
| 14 | import flash.geom.Rectangle; |
|---|
| 15 | import flash.net.URLRequest; |
|---|
| 16 | import flash.utils.setInterval; |
|---|
| 17 | import flash.utils.clearInterval; |
|---|
| 18 | |
|---|
| 19 | |
|---|
| 20 | public class PlaylistView { |
|---|
| 21 | |
|---|
| 22 | |
|---|
| 23 | /** Reference to the view. **/ |
|---|
| 24 | private var view:View; |
|---|
| 25 | /** Reference to the playlist MC. **/ |
|---|
| 26 | private var clip:MovieClip; |
|---|
| 27 | /** Array with all button instances **/ |
|---|
| 28 | private var buttons:Array; |
|---|
| 29 | /** Height of a button (to calculate scrolling) **/ |
|---|
| 30 | private var buttonheight:Number; |
|---|
| 31 | /** Currently active button. **/ |
|---|
| 32 | private var active:Number; |
|---|
| 33 | /** Proportion between clip and mask. **/ |
|---|
| 34 | private var proportion:Number; |
|---|
| 35 | /** Interval ID for scrolling **/ |
|---|
| 36 | private var scrollInterval:Number; |
|---|
| 37 | /** Image dimensions. **/ |
|---|
| 38 | private var image:Array; |
|---|
| 39 | |
|---|
| 40 | |
|---|
| 41 | public function PlaylistView(vie:View) { |
|---|
| 42 | view = vie; |
|---|
| 43 | if(!view.skin['playlist']) { return; } |
|---|
| 44 | view.addControllerListener(ControllerEvent.ITEM,itemHandler); |
|---|
| 45 | view.addControllerListener(ControllerEvent.PLAYLIST,playlistHandler); |
|---|
| 46 | view.addControllerListener(ControllerEvent.RESIZE,resizeHandler); |
|---|
| 47 | view.addModelListener(ModelEvent.STATE,stateHandler); |
|---|
| 48 | clip = view.skin['playlist']; |
|---|
| 49 | buttonheight = clip.list.button.height; |
|---|
| 50 | clip.list.button.visible = false; |
|---|
| 51 | clip.masker = new MovieClip(); |
|---|
| 52 | Draw.rect(clip.masker,'0x000000',clip.back.width,clip.back.height,0,0,0); |
|---|
| 53 | clip.addChild(clip.masker); |
|---|
| 54 | clip.list.mask = clip.masker; |
|---|
| 55 | clip.list.addEventListener(MouseEvent.CLICK,clickHandler); |
|---|
| 56 | clip.list.addEventListener(MouseEvent.MOUSE_OVER,overHandler); |
|---|
| 57 | clip.list.addEventListener(MouseEvent.MOUSE_OUT,outHandler); |
|---|
| 58 | clip.slider.buttonMode = true; |
|---|
| 59 | clip.slider.mouseChildren = false; |
|---|
| 60 | clip.slider.addEventListener(MouseEvent.MOUSE_DOWN,sdownHandler); |
|---|
| 61 | clip.slider.addEventListener(MouseEvent.MOUSE_OVER,soverHandler); |
|---|
| 62 | clip.slider.addEventListener(MouseEvent.MOUSE_OUT,soutHandler); |
|---|
| 63 | clip.slider.addEventListener(MouseEvent.MOUSE_WHEEL,wheelHandler); |
|---|
| 64 | clip.visible = false; |
|---|
| 65 | buttons = new Array(); |
|---|
| 66 | try { |
|---|
| 67 | image = new Array(clip.list.button.image.width,clip.list.button.image.height); |
|---|
| 68 | } catch (err:Error) {} |
|---|
| 69 | }; |
|---|
| 70 | |
|---|
| 71 | |
|---|
| 72 | /** Setup all buttons in the playlist **/ |
|---|
| 73 | private function buildList(clr:Boolean) { |
|---|
| 74 | var wid = clip.back.width; |
|---|
| 75 | var hei = clip.back.height; |
|---|
| 76 | proportion = view.playlist.length*buttonheight/hei; |
|---|
| 77 | if (proportion > 1) { |
|---|
| 78 | wid -=clip.slider.width; |
|---|
| 79 | buildSlider(); |
|---|
| 80 | } else { |
|---|
| 81 | clip.slider.visible = false; |
|---|
| 82 | } |
|---|
| 83 | clip.masker.height = hei; |
|---|
| 84 | clip.masker.width = wid; |
|---|
| 85 | if(clr) { |
|---|
| 86 | clip.list.y = 0; |
|---|
| 87 | for(var j=0; j<buttons.length; j++) { |
|---|
| 88 | clip.list.removeChild(buttons[j].c); |
|---|
| 89 | } |
|---|
| 90 | buttons = new Array(); |
|---|
| 91 | clip.visible= true; |
|---|
| 92 | } else { |
|---|
| 93 | if(proportion > 1) { scrollCheck(); } |
|---|
| 94 | } |
|---|
| 95 | for(var i=0; i<view.playlist.length; i++) { |
|---|
| 96 | if(clr) { |
|---|
| 97 | var btn = Draw.clone(clip.list.button); |
|---|
| 98 | clip.list.addChild(btn); |
|---|
| 99 | var stc = new Stacker(btn); |
|---|
| 100 | btn.y = i*buttonheight; |
|---|
| 101 | btn.buttonMode = true; |
|---|
| 102 | btn.mouseChildren =false; |
|---|
| 103 | btn.name = i; |
|---|
| 104 | buttons.push({c:btn,s:stc}); |
|---|
| 105 | setContents(i); |
|---|
| 106 | } |
|---|
| 107 | buttons[i].s.rearrange(wid); |
|---|
| 108 | } |
|---|
| 109 | }; |
|---|
| 110 | |
|---|
| 111 | |
|---|
| 112 | /** Setup the scrollbar component **/ |
|---|
| 113 | private function buildSlider() { |
|---|
| 114 | var scr = clip.slider; |
|---|
| 115 | scr.visible = true; |
|---|
| 116 | scr.x = clip.back.width-scr.width; |
|---|
| 117 | var dif = clip.back.height-scr.height; |
|---|
| 118 | scr.back.height += dif; |
|---|
| 119 | scr.rail.height += dif; |
|---|
| 120 | scr.icon.height = Math.round(scr.rail.height/proportion); |
|---|
| 121 | }; |
|---|
| 122 | |
|---|
| 123 | |
|---|
| 124 | /** Handle a click on a button. **/ |
|---|
| 125 | private function clickHandler(evt:MouseEvent) { |
|---|
| 126 | view.sendEvent('item',Number(evt.target.name)); |
|---|
| 127 | }; |
|---|
| 128 | |
|---|
| 129 | |
|---|
| 130 | /** Switch the currently active item */ |
|---|
| 131 | private function itemHandler(evt:ControllerEvent) { |
|---|
| 132 | var idx = view.config['item']; |
|---|
| 133 | if(!isNaN(active) && buttons.length > 0) { |
|---|
| 134 | buttons[active].c.gotoAndPlay('out'); |
|---|
| 135 | } |
|---|
| 136 | if(buttons.length > 0) { |
|---|
| 137 | buttons[idx].c.gotoAndPlay('active'); |
|---|
| 138 | } |
|---|
| 139 | active = idx; |
|---|
| 140 | }; |
|---|
| 141 | |
|---|
| 142 | |
|---|
| 143 | /** Loading of image completed; resume loading **/ |
|---|
| 144 | private function loaderHandler(evt:Event) { |
|---|
| 145 | var ldr = Loader(evt.target.loader); |
|---|
| 146 | Stretcher.stretch(ldr,image[0],image[1],Stretcher.FILL); |
|---|
| 147 | }; |
|---|
| 148 | |
|---|
| 149 | |
|---|
| 150 | /** Handle a button rollover. **/ |
|---|
| 151 | private function overHandler(evt:MouseEvent) { |
|---|
| 152 | var idx = Number(evt.target.name); |
|---|
| 153 | buttons[idx].c.gotoAndPlay('over'); |
|---|
| 154 | }; |
|---|
| 155 | |
|---|
| 156 | |
|---|
| 157 | /** Handle a button rollover. **/ |
|---|
| 158 | private function outHandler(evt:MouseEvent) { |
|---|
| 159 | var idx = Number(evt.target.name); |
|---|
| 160 | if(idx == active) { |
|---|
| 161 | buttons[idx].c.gotoAndPlay('active'); |
|---|
| 162 | } else { |
|---|
| 163 | buttons[idx].c.gotoAndPlay('out'); |
|---|
| 164 | } |
|---|
| 165 | }; |
|---|
| 166 | |
|---|
| 167 | |
|---|
| 168 | /** New playlist loaded: rebuild the playclip. **/ |
|---|
| 169 | private function playlistHandler(evt:ControllerEvent) { |
|---|
| 170 | active = undefined; |
|---|
| 171 | if(view.config['playlist'] != 'none') { |
|---|
| 172 | buildList(true); |
|---|
| 173 | } |
|---|
| 174 | }; |
|---|
| 175 | |
|---|
| 176 | |
|---|
| 177 | /** Process resizing requests **/ |
|---|
| 178 | private function resizeHandler(evt:ControllerEvent) { |
|---|
| 179 | if(view.config['playlist'] == 'right') { |
|---|
| 180 | clip.x = evt.data.width; |
|---|
| 181 | clip.y = 0; |
|---|
| 182 | clip.back.width = view.config['playlistsize']; |
|---|
| 183 | clip.back.height = evt.data.height; |
|---|
| 184 | buildList(false); |
|---|
| 185 | } else if (view.config['playlist'] == 'bottom') { |
|---|
| 186 | clip.x = 0; |
|---|
| 187 | clip.y = evt.data.height; |
|---|
| 188 | if (view.config['controlbar'] == 'bottom') { |
|---|
| 189 | clip.y += view.config['controlbarsize']; |
|---|
| 190 | } |
|---|
| 191 | clip.back.height = view.config['playlistsize']; |
|---|
| 192 | clip.back.width = evt.data.width; |
|---|
| 193 | buildList(false); |
|---|
| 194 | } else if (view.config['playlist'] == 'over') { |
|---|
| 195 | clip.x = clip.y = 0; |
|---|
| 196 | clip.back.width = evt.data.width; |
|---|
| 197 | clip.back.height = evt.data.height; |
|---|
| 198 | buildList(false); |
|---|
| 199 | } else { |
|---|
| 200 | clip.visible = false; |
|---|
| 201 | } |
|---|
| 202 | }; |
|---|
| 203 | |
|---|
| 204 | |
|---|
| 205 | /** Make sure the playlist is not out of range. **/ |
|---|
| 206 | private function scrollCheck() { |
|---|
| 207 | var scr = clip.slider; |
|---|
| 208 | if(clip.list.y > 0 || scr.icon.y < scr.rail.y) { |
|---|
| 209 | clip.list.y = 0; |
|---|
| 210 | scr.icon.y = scr.rail.y; |
|---|
| 211 | } else if (clip.list.y < clip.masker.height-clip.list.height || |
|---|
| 212 | scr.icon.y > scr.rail.y+scr.rail.height-scr.icon.height) { |
|---|
| 213 | scr.icon.y = scr.rail.y+scr.rail.height-scr.icon.height; |
|---|
| 214 | clip.list.y = clip.masker.height-clip.list.height; |
|---|
| 215 | } |
|---|
| 216 | }; |
|---|
| 217 | |
|---|
| 218 | |
|---|
| 219 | /** Scrolling handler. **/ |
|---|
| 220 | private function scrollHandler() { |
|---|
| 221 | var scr = clip.slider; |
|---|
| 222 | var yps = scr.mouseY; |
|---|
| 223 | var ips = yps - scr.icon.height/2; |
|---|
| 224 | var cps = clip.masker.y+clip.masker.height/2-proportion*yps; |
|---|
| 225 | scr.icon.y = Math.round(ips-(ips-scr.icon.y)/1.5); |
|---|
| 226 | clip.list.y = Math.round((cps - (cps-clip.list.y)/1.5)); |
|---|
| 227 | scrollCheck(); |
|---|
| 228 | }; |
|---|
| 229 | |
|---|
| 230 | |
|---|
| 231 | /** Setup button elements **/ |
|---|
| 232 | private function setContents(idx:Number) { |
|---|
| 233 | for (var itm in view.playlist[idx]) { |
|---|
| 234 | if(!buttons[idx].c[itm]) { |
|---|
| 235 | continue; |
|---|
| 236 | } else if(itm == 'image') { |
|---|
| 237 | var img = buttons[idx].c.image; |
|---|
| 238 | var msk = Draw.rect(buttons[idx].c,'0xFF0000',img.width,img.height,img.x,img.y); |
|---|
| 239 | var ldr = new Loader(); |
|---|
| 240 | img.mask = msk; |
|---|
| 241 | img.addChild(ldr); |
|---|
| 242 | ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,loaderHandler); |
|---|
| 243 | ldr.load(new URLRequest(view.playlist[idx]['image'])); |
|---|
| 244 | } else if(itm == 'duration') { |
|---|
| 245 | if(view.playlist[idx][itm] > 0) { |
|---|
| 246 | buttons[idx].c[itm].text = Strings.digits(view.playlist[idx][itm]); |
|---|
| 247 | } |
|---|
| 248 | } else { |
|---|
| 249 | buttons[idx].c[itm].text = view.playlist[idx][itm]; |
|---|
| 250 | } |
|---|
| 251 | } |
|---|
| 252 | if(!view.playlist[idx]['image'] && buttons[idx].c['image']) { |
|---|
| 253 | buttons[idx].c['image'].visible = false; |
|---|
| 254 | } |
|---|
| 255 | }; |
|---|
| 256 | |
|---|
| 257 | |
|---|
| 258 | /** Start scrolling the playlist on mousedown. **/ |
|---|
| 259 | private function sdownHandler(evt:MouseEvent) { |
|---|
| 260 | clearInterval(scrollInterval); |
|---|
| 261 | clip.stage.addEventListener(MouseEvent.MOUSE_UP,supHandler); |
|---|
| 262 | scrollHandler(); |
|---|
| 263 | scrollInterval = setInterval(scrollHandler,50); |
|---|
| 264 | }; |
|---|
| 265 | |
|---|
| 266 | |
|---|
| 267 | /** Revert the highlight on mouseout. **/ |
|---|
| 268 | private function soutHandler(evt:MouseEvent) { |
|---|
| 269 | clip.slider.icon.gotoAndPlay('out'); |
|---|
| 270 | }; |
|---|
| 271 | |
|---|
| 272 | |
|---|
| 273 | /** Highlight the icon on rollover. **/ |
|---|
| 274 | private function soverHandler(evt:MouseEvent) { |
|---|
| 275 | clip.slider.icon.gotoAndPlay('over'); |
|---|
| 276 | }; |
|---|
| 277 | |
|---|
| 278 | |
|---|
| 279 | /** Stop scrolling the playlist on mouseout. **/ |
|---|
| 280 | private function supHandler(evt:MouseEvent) { |
|---|
| 281 | clearInterval(scrollInterval); |
|---|
| 282 | clip.stage.removeEventListener(MouseEvent.MOUSE_UP,supHandler); |
|---|
| 283 | }; |
|---|
| 284 | |
|---|
| 285 | |
|---|
| 286 | /** Process state changes **/ |
|---|
| 287 | private function stateHandler(evt:ModelEvent) { |
|---|
| 288 | if(view.config['playlist'] == 'over') { |
|---|
| 289 | if(evt.data.newstate == ModelStates.PLAYING || |
|---|
| 290 | evt.data.newstate == ModelStates.BUFFERING) { |
|---|
| 291 | Animations.fade(clip,0); |
|---|
| 292 | } else { |
|---|
| 293 | Animations.fade(clip,1); |
|---|
| 294 | } |
|---|
| 295 | } |
|---|
| 296 | }; |
|---|
| 297 | |
|---|
| 298 | |
|---|
| 299 | /** Process mousewheel usage. **/ |
|---|
| 300 | private function wheelHandler(evt:MouseEvent) {}; |
|---|
| 301 | |
|---|
| 302 | |
|---|
| 303 | }; |
|---|
| 304 | |
|---|
| 305 | |
|---|
| 306 | } |
|---|