+++ /dev/null
-/*\r
-\r
- SoundManager 2 Demo: "Page as playlist"\r
- ----------------------------------------------\r
- http://schillmania.com/projects/soundmanager2/\r
-\r
- An example of a Muxtape.com-style UI, where an\r
- unordered list of MP3 links becomes a playlist\r
-\r
- Flash 9 "MovieStar" edition supports MPEG4\r
- audio and video as well.\r
-\r
- Requires SoundManager 2 Javascript API.\r
-\r
-*/\r
-\r
-function TelemetaPlayer(oConfigOverride) {\r
- var self = this;\r
- var pl = this;\r
- var sm = soundManager; // soundManager instance\r
- // sniffing for favicon stuff/IE workarounds\r
- var isIE = navigator.userAgent.match(/msie/i);\r
- var isOpera = navigator.userAgent.match(/opera/i);\r
- var isFirefox = navigator.userAgent.match(/firefox/i);\r
-\r
- // sm.url = '../../swf/'; // path to directory containing SM2 SWF\r
-\r
- this.config = {\r
- flashVersion: 8, // version of Flash to tell SoundManager to use - either 8 or 9. Flash 9 required for peak / spectrum data.\r
- usePeakData: false, // [Flash 9 only]: show peak data\r
- useWaveformData: false, // [Flash 9 only]: enable sound spectrum (raw waveform data) - WARNING: CPU-INTENSIVE: may set CPUs on fire.\r
- useEQData: false, // [Flash 9 only]: enable sound EQ (frequency spectrum data) - WARNING: Also CPU-intensive.\r
- fillGraph: false, // [Flash 9 only]: draw full lines instead of only top (peak) spectrum points\r
- allowRightClick:true, // let users right-click MP3 links ("save as...", etc.) or discourage (can't prevent.)\r
- useThrottling: false, // try to rate-limit potentially-expensive calls (eg. dragging position around)\r
- autoStart: false, // begin playing first sound when page loads\r
- playNext: true, // stop after one sound, or play through list until end\r
- updatePageTitle: true, // change the page title while playing sounds\r
- emptyTime: '-:--', // null/undefined timer values (before data is available)\r
- useFavIcon: false // try to show peakData in address bar (Firefox + Opera)\r
- }\r
-\r
- //sm.debugMode = (window.location.href.toString().match(/debug=1/i)?true:false); // enable with #debug=1 for example\r
-\r
- this._mergeObjects = function(oMain,oAdd) {\r
- // non-destructive merge\r
- var o1 = {}; // clone o1\r
- for (var i in oMain) {\r
- o1[i] = oMain[i];\r
- }\r
- var o2 = (typeof oAdd == 'undefined'?{}:oAdd);\r
- for (var o in o2) {\r
- if (typeof o1[o] == 'undefined') o1[o] = o2[o];\r
- }\r
- return o1;\r
- }\r
-\r
- if (typeof oConfigOverride != 'undefined' && oConfigOverride) {\r
- // allow overriding via arguments object\r
- this.config = this._mergeObjects(oConfigOverride,this.config);\r
- }\r
-\r
- this.css = { // CSS class names appended to link during various states\r
- sDefault: 'ezt-link', // default state\r
- sPlaying: 'ezt-playing',\r
- sPaused: 'ezt-paused'\r
- }\r
-\r
- // apply externally-defined override, if applicable\r
- this.cssBase = []; // optional features added to ul.playlist\r
- if (this.config.usePeakData) this.cssBase.push('ezt-use-peak');\r
- if (this.config.useWaveformData || this.config.useEQData) this.cssBase.push('ezt-use-spectrum');\r
- this.cssBase = this.cssBase.join(' ');\r
-\r
- // apply some items to SM2\r
- sm.flashVersion = this.config.flashVersion;\r
- if (sm.flashVersion >= 9) {\r
- sm.useMovieStar = this.config.useMovieStar; // enable playing FLV, MP4 etc.\r
- sm.movieStarOptions.useVideo = this.config.useVideo;\r
- sm.defaultOptions.usePeakData = this.config.usePeakData;\r
- sm.defaultOptions.useWaveformData = this.config.useWaveformData;\r
- sm.defaultOptions.useEQData = this.config.useEQData;\r
- }\r
-\r
- this.links = [];\r
- this.sounds = [];\r
- this.soundsByObject = [];\r
- this.lastSound = null;\r
- this.soundCount = 0;\r
- this.strings = [];\r
- this.dragActive = false;\r
- this.dragExec = new Date();\r
- this.dragTimer = null;\r
- this.pageTitle = document.title;\r
- this.lastWPExec = new Date();\r
- this.xbmImages = [];\r
- this.oControls = null;\r
-\r
- this.addEventHandler = function(o,evtName,evtHandler) {\r
- typeof(attachEvent)=='undefined'?o.addEventListener(evtName,evtHandler,false):o.attachEvent('on'+evtName,evtHandler);\r
- }\r
-\r
- this.removeEventHandler = function(o,evtName,evtHandler) {\r
- typeof(attachEvent)=='undefined'?o.removeEventListener(evtName,evtHandler,false):o.detachEvent('on'+evtName,evtHandler);\r
- }\r
-\r
- this.hasClass = function(o,cStr) {\r
- return (typeof(o.className)!='undefined'?new RegExp('(^|\\s)'+cStr+'(\\s|$)').test(o.className):false);\r
- }\r
-\r
- this.addClass = function(o,cStr) {\r
- if (!o || !cStr) return false; // safety net\r
- if (self.hasClass(o,cStr)) return false;\r
- o.className = (o.className?o.className+' ':'')+cStr;\r
- }\r
-\r
- this.removeClass = function(o,cStr) {\r
- if (!o || !cStr) return false; // safety net\r
- if (!self.hasClass(o,cStr)) return false;\r
- o.className = o.className.replace(new RegExp('( '+cStr+')|('+cStr+')','g'),'');\r
- }\r
-\r
- this.getElementsByClassName = function(className,tagNames,oParent) {\r
- var doc = (oParent||document);\r
- var matches = [];\r
- var i,j;\r
- var nodes = [];\r
- if (typeof(tagNames)!='undefined' && typeof(tagNames)!='string') {\r
- for (i=tagNames.length; i--;) {\r
- if (!nodes || !nodes[tagNames[i]]) {\r
- nodes[tagNames[i]] = doc.getElementsByTagName(tagNames[i]);\r
- }\r
- }\r
- } else if (tagNames) {\r
- nodes = doc.getElementsByTagName(tagNames);\r
- } else {\r
- nodes = doc.all||doc.getElementsByTagName('*');\r
- }\r
- if (typeof(tagNames)!='string') {\r
- for (i=tagNames.length; i--;) {\r
- for (j=nodes[tagNames[i]].length; j--;) {\r
- if (self.hasClass(nodes[tagNames[i]][j],className)) {\r
- matches[matches.length] = nodes[tagNames[i]][j];\r
- }\r
- }\r
- }\r
- } else {\r
- for (i=0; i<nodes.length; i++) {\r
- if (self.hasClass(nodes[i],className)) {\r
- matches[matches.length] = nodes[i];\r
- }\r
- }\r
- }\r
- return matches;\r
- }\r
- \r
- this.getOffX = function(o) {\r
- // http://www.xs4all.nl/~ppk/js/findpos.html\r
- var curleft = 0;\r
- if (o.offsetParent) {\r
- while (o.offsetParent) {\r
- curleft += o.offsetLeft;\r
- o = o.offsetParent;\r
- }\r
- }\r
- else if (o.x) curleft += o.x;\r
- return curleft;\r
- }\r
-\r
- this.isChildOfClass = function(oChild,oClass) {\r
- if (!oChild || !oClass) return false;\r
- while (oChild.parentNode && !self.hasClass(oChild,oClass)) {\r
- oChild = oChild.parentNode;\r
- }\r
- return (self.hasClass(oChild,oClass));\r
- }\r
-\r
- this.getParentByNodeName = function(oChild,sParentNodeName) {\r
- if (!oChild || !sParentNodeName) return false;\r
- sParentNodeName = sParentNodeName.toLowerCase();\r
- while (oChild.parentNode && sParentNodeName != oChild.parentNode.nodeName.toLowerCase()) {\r
- oChild = oChild.parentNode;\r
- }\r
- return (oChild.parentNode && sParentNodeName == oChild.parentNode.nodeName.toLowerCase()?oChild.parentNode:null);\r
- }\r
- \r
- this.getTime = function(nMSec,bAsString) {\r
- // convert milliseconds to mm:ss, return as object literal or string\r
- var nSec = Math.floor(nMSec/1000);\r
- var min = Math.floor(nSec/60);\r
- var sec = nSec-(min*60);\r
- // if (min == 0 && sec == 0) return null; // return 0:00 as null\r
- return (bAsString?(min+':'+(sec<10?'0'+sec:sec)):{'min':min,'sec':sec});\r
- }\r
-\r
- this.getSoundByObject = function(o) {\r
- return (typeof self.soundsByObject[o.rel] != 'undefined'?self.soundsByObject[o.rel]:null);\r
- }\r
-\r
- this.getSoundIndex = function(o) {\r
- for (var i=self.links.length; i--;) {\r
- if (self.links[i].rel == o.rel) return i;\r
- }\r
- return -1;\r
- }\r
-\r
- this.setPageTitle = function(sTitle) {\r
- if (!self.config.updatePageTitle) return false;\r
- try {\r
- document.title = (sTitle?sTitle+' - ':'')+self.pageTitle;\r
- } catch(e) {\r
- // oh well\r
- self.setPageTitle = function() {return false;}\r
- }\r
- }\r
-\r
- this.events = {\r
-\r
- // handlers for sound events as they're started/stopped/played\r
-\r
- play: function() {\r
- pl.removeClass(this._data.oLI,this._data.className);\r
- this._data.className = pl.css.sPlaying;\r
- pl.addClass(this._data.oLI,this._data.className);\r
- self.setPageTitle(this._data.originalTitle);\r
- },\r
-\r
- stop: function() {\r
- pl.removeClass(this._data.oLI,this._data.className);\r
- this._data.className = '';\r
- this._data.oPosition.style.width = '0px';\r
- self.setPageTitle();\r
- self.resetPageIcon();\r
- },\r
-\r
- pause: function() {\r
- if (pl.dragActive) return false;\r
- pl.removeClass(this._data.oLI,this._data.className);\r
- this._data.className = pl.css.sPaused;\r
- pl.addClass(this._data.oLI,this._data.className);\r
- self.setPageTitle();\r
- self.resetPageIcon();\r
- },\r
-\r
- resume: function() {\r
- if (pl.dragActive) return false;\r
- pl.removeClass(this._data.oLI,this._data.className);\r
- this._data.className = pl.css.sPlaying;\r
- pl.addClass(this._data.oLI,this._data.className);\r
- },\r
-\r
- finish: function() {\r
- pl.removeClass(this._data.oLI,this._data.className);\r
- this._data.className = '';\r
- this._data.oPosition.style.width = '0px';\r
- // play next if applicable\r
- if (self.config.playNext && this._data.nIndex<pl.links.length-1) {\r
- pl.handleClick({target:pl.links[this._data.nIndex+1]}); // fake a click event - aren't we sneaky. ;)\r
- } else {\r
- self.setPageTitle();\r
- self.resetPageIcon();\r
- }\r
- },\r
-\r
- whileloading: function() {\r
- this._data.oLoading.style.width = (((this.bytesLoaded/this.bytesTotal)*100)+'%'); // theoretically, this should work.\r
- if (!this._data.didRefresh && this._data.metadata) {\r
- this._data.didRefresh = true;\r
- this._data.metadata.refresh();\r
- }\r
- },\r
-\r
- onload: function() {\r
- if (!this.loaded) {\r
- var oTemp = this._data.oLI.getElementsByTagName('a')[0];\r
- var oString = oTemp.innerHTML;\r
- var oThis = this;\r
- oTemp.innerHTML = oString+' <span style="font-size:0.5em"> | Load failed, d\'oh! '+(sm.sandbox.noRemote?' Possible cause: Flash sandbox is denying remote URL access.':(sm.sandbox.noLocal?'Flash denying local filesystem access':'404?'))+'</span>';\r
- setTimeout(function(){\r
- oTemp.innerHTML = oString;\r
- // pl.events.finish.apply(oThis); // load next\r
- },5000);\r
- } else {\r
- if (this._data.metadata) {\r
- this._data.metadata.refresh();\r
- }\r
- }\r
- },\r
-\r
- metadata: function() {\r
- // video-only stuff\r
- sm._wD('video metadata: '+this.width+'x'+this.height);\r
- // set the SWF dimensions to match\r
- sm.oMC.style.width = this.width+'px'; \r
- sm.oMC.style.height = this.height+'px';\r
- },\r
-\r
- whileplaying: function() {\r
- var d = null;\r
- if (pl.dragActive || !pl.config.useThrottling) {\r
- self.updateTime.apply(this);\r
- if (sm.flashVersion >= 9) {\r
- if (pl.config.usePeakData && this.instanceOptions.usePeakData) self.updatePeaks.apply(this);\r
- if (pl.config.useWaveformData && this.instanceOptions.useWaveformData || pl.config.useEQData && this.instanceOptions.useEQData) {\r
- self.updateGraph.apply(this);\r
- }\r
- }\r
- if (this._data.metadata) {\r
- d = new Date();\r
- if (d && d-self.lastWPExec>500) {\r
- self.refreshMetadata(this);\r
- self.lastWPExec = d;\r
- }\r
- }\r
- this._data.oPosition.style.width = (((this.position/self.getDurationEstimate(this))*100)+'%');\r
- } else {\r
- d = new Date();\r
- if (d-self.lastWPExec>500) {\r
- self.updateTime.apply(this);\r
- if (sm.flashVersion >= 9) {\r
- if (pl.config.usePeakData && this.instanceOptions.usePeakData) {\r
- self.updatePeaks.apply(this);\r
- }\r
- if (pl.config.useWaveformData && this.instanceOptions.useWaveformData || pl.config.useEQData && this.instanceOptions.useEQData) {\r
- self.updateGraph.apply(this);\r
- }\r
- }\r
- if (this._data.metadata) self.refreshMetadata(this);\r
- this._data.oPosition.style.width = (((this.position/self.getDurationEstimate(this))*100)+'%');\r
- self.lastWPExec = d;\r
- }\r
- }\r
- }\r
- \r
- } // events{}\r
-\r
- this.setPageIcon = function(sDataURL) {\r
- if (!self.config.useFavIcon || !self.config.usePeakData || !sDataURL) return false;\r
- var link = document.getElementById('favicon');\r
- if (!link) {\r
- link = document.createElement('link');\r
- link.id = 'favicon';\r
- link.rel = 'shortcut icon';\r
- link.type = 'image/x-bitmap';\r
- link.href = sDataURL;\r
- } else {\r
- link.href = sDataURL;\r
- }\r
- document.getElementsByTagName('head')[0].appendChild(link);\r
- }\r
-\r
- this.resetPageIcon = function() {\r
- if (!self.config.useFavIcon) return false;\r
- var link = document.getElementById('favicon');\r
- if (link) {\r
- link.href = '/favicon.ico';\r
- }\r
- }\r
-\r
- this.updatePeaks = function() {\r
- var o = this._data.oPeak;\r
- var oSpan = o.getElementsByTagName('span');\r
- oSpan[0].style.marginTop = (13-(Math.floor(15*this.peakData.left))+'px');\r
- oSpan[1].style.marginTop = (13-(Math.floor(15*this.peakData.right))+'px');\r
- // highly experimental\r
- if (self.config.flashVersion > 8 && self.config.useFavIcon && self.config.usePeakData) {\r
- if (!isOpera) {\r
- self.setPageIcon(self.xbmImages[parseInt(15*this.peakData.left)][parseInt(15*this.peakData.right)]);\r
- } else {\r
- self.setPageIcon(self.xbmImages[1+parseInt(14*this.peakData.left)][1+parseInt(14*this.peakData.right)]);\r
- }\r
- }\r
- }\r
- \r
- this.updateGraph = function() {\r
- if ((!pl.config.useWaveformData && !pl.config.useEQData) || pl.config.flashVersion<9) return false;\r
- var sbC = this._data.oGraph.getElementsByTagName('div');\r
- if (pl.config.useWaveformData) {\r
- // raw waveform\r
- var scale = 8; // Y axis (+/- this distance from 0)\r
- for (var i=255; i--;) {\r
- sbC[255-i].style.marginTop = (1+scale+Math.ceil(this.waveformData[i]*-scale))+'px';\r
- }\r
- } else {\r
- // eq spectrum\r
- var offset = 9;\r
- for (var i=255; i--;) {\r
- sbC[255-i].style.marginTop = ((offset*2)-1+Math.ceil(this.eqData[i]*-offset))+'px';\r
- }\r
- }\r
- }\r
- \r
- this.resetGraph = function() {\r
- if (!pl.config.useEQData || pl.config.flashVersion<9) return false;\r
- var sbC = this._data.oGraph.getElementsByTagName('div');\r
- var scale = (!pl.config.useEQData?'9px':'17px');\r
- var nHeight = (!pl.config.fillGraph?'1px':'32px');\r
- for (var i=255; i--;) {\r
- sbC[255-i].style.marginTop = scale; // EQ scale\r
- sbC[255-i].style.height = nHeight;\r
- }\r
- }\r
-\r
- this.refreshMetadata = function(oSound) {\r
- // Display info as appropriate\r
- var index = null;\r
- var now = oSound.position;\r
- var metadata = oSound._data.metadata.data;\r
- for (var i=0, j=metadata.length; i<j; i++) {\r
- if (now >= metadata[i].startTimeMS && now <= metadata[i].endTimeMS) {\r
- index = i;\r
- break;\r
- }\r
- }\r
- if (index != metadata.currentItem) {\r
- // update\r
- oSound._data.oLink.innerHTML = metadata.mainTitle+' <span class="ezt-metadata"><span class="ezt-sm2_divider"> | </span><span class="ezt-sm2_metadata">'+metadata[index].title+'</span></span>';\r
- self.setPageTitle(metadata[index].title+' | '+metadata.mainTitle);\r
- metadata.currentItem = index;\r
- }\r
- }\r
- \r
- this.updateTime = function() {\r
- var str = self.strings['timing'].replace('%s1',self.getTime(this.position,true));\r
- str = str.replace('%s2',self.getTime(self.getDurationEstimate(this),true));\r
- this._data.oTiming.innerHTML = str;\r
- }\r
-\r
- this.getTheDamnTarget = function(e) {\r
- return (e.target||e.srcElement||window.event.srcElement);\r
- }\r
- \r
- this.withinStatusBar = function(o) {\r
- return (self.isChildOfClass(o,'ezt-controls'));\r
- }\r
-\r
- this.handleClick = function(e) {\r
- // a sound (or something) was clicked - determine what and handle appropriately\r
- if (e.button == 2) {\r
- if (!pl.config.allowRightClick) pl.stopEvent(e);\r
- return (pl.config.allowRightClick); // ignore right-clicks\r
- }\r
- var o = self.getTheDamnTarget(e);\r
- if (self.dragActive) self.stopDrag(); // to be safe\r
- if (self.withinStatusBar(o)) {\r
- // self.handleStatusClick(e);\r
- return false;\r
- }\r
- if (o.nodeName.toLowerCase() != 'a') {\r
- o = self.getParentByNodeName(o,'a');\r
- }\r
- if (!o) {\r
- // not a link\r
- return true;\r
- }\r
- var sURL = o.getAttribute('href');\r
- if (!o.href || (!sm.canPlayURL(o.href) || !self.hasClass(o,'ezt-playable')) || self.hasClass(o,'ezt-exclude')) {\r
- if (isIE && o.onclick) {\r
- return false; // IE will run this handler before .onclick(), everyone else is cool?\r
- }\r
- return true; // pass-thru for non-MP3/non-links\r
- }\r
- var soundURL = o.href;\r
- var thisSound = self.getSoundByObject(o);\r
- if (thisSound) {\r
- // sound already exists\r
- self.setPageTitle(thisSound._data.originalTitle);\r
- if (thisSound == self.lastSound) {\r
- // ..and was playing (or paused) and isn't in an error state\r
- if (thisSound.readyState != 2) {\r
- if (thisSound.playState != 1) {\r
- // not yet playing\r
- thisSound.play();\r
- } else {\r
- thisSound.togglePause();\r
- }\r
- } else {\r
- sm._writeDebug('Warning: sound failed to load (security restrictions, 404 or bad format)',2);\r
- }\r
- } else {\r
- // ..different sound\r
- if (self.lastSound) self.stopSound(self.lastSound);\r
- thisSound._data.oTimingBox.appendChild(document.getElementById('ezt-spectrum-container'));\r
- thisSound.togglePause(); // start playing current\r
- }\r
- } else {\r
- // create sound\r
- thisSound = sm.createSound({\r
- id:'telemetaPlayerMP3Sound'+(self.soundCount++),\r
- url:soundURL,\r
- onplay:self.events.play,\r
- onstop:self.events.stop,\r
- onpause:self.events.pause,\r
- onresume:self.events.resume,\r
- onfinish:self.events.finish,\r
- whileloading:self.events.whileloading,\r
- whileplaying:self.events.whileplaying,\r
- onmetadata:self.events.metadata,\r
- onload:self.events.onload\r
- });\r
- // append control template\r
- var oControls = self.oControls.cloneNode(true);\r
- o.parentNode.appendChild(oControls);\r
- o.parentNode.appendChild(document.getElementById('ezt-spectrum-container'));\r
- self.soundsByObject[o.rel] = thisSound;\r
- // tack on some custom data\r
- thisSound._data = {\r
- oLink: o, // DOM reference within SM2 object event handlers\r
- oLI: o.parentNode,\r
- oControls: self.getElementsByClassName('ezt-controls','div',o.parentNode)[0],\r
- oStatus: self.getElementsByClassName('ezt-statusbar','div',o.parentNode)[0],\r
- oLoading: self.getElementsByClassName('ezt-loading','div',o.parentNode)[0],\r
- oPosition: self.getElementsByClassName('ezt-position','div',o.parentNode)[0],\r
- oTimingBox: self.getElementsByClassName('ezt-timing','div',o.parentNode)[0],\r
- oTiming: self.getElementsByClassName('ezt-timing','div',o.parentNode)[0].getElementsByTagName('div')[0],\r
- oPeak: self.getElementsByClassName('ezt-peak','div',o.parentNode)[0],\r
- oGraph: self.getElementsByClassName('ezt-spectrum-box','div',o.parentNode)[0],\r
- nIndex: self.getSoundIndex(o),\r
- className: self.css.sPlaying,\r
- originalTitle: o.innerHTML,\r
- metadata: null\r
- };\r
- thisSound._data.oTimingBox.appendChild(document.getElementById('ezt-spectrum-container'));\r
- // "Metadata"\r
- if (thisSound._data.oLI.getElementsByTagName('ul').length) {\r
- thisSound._data.metadata = new Metadata(thisSound);\r
- }\r
- // set initial timer stuff (before loading)\r
- var str = self.strings['timing'].replace('%s1',self.config.emptyTime);\r
- str = str.replace('%s2',self.config.emptyTime);\r
- thisSound._data.oTiming.innerHTML = str;\r
- self.sounds.push(thisSound);\r
- if (self.lastSound) self.stopSound(self.lastSound);\r
- self.resetGraph.apply(thisSound);\r
- thisSound.play();\r
- }\r
- self.lastSound = thisSound; // reference for next call\r
- return self.stopEvent(e);\r
- }\r
- \r
- this.handleMouseDown = function(e) {\r
- // a sound link was clicked\r
- if (e.button == 2) {\r
- if (!pl.config.allowRightClick) pl.stopEvent(e);\r
- return (pl.config.allowRightClick); // ignore right-clicks\r
- }\r
- var o = self.getTheDamnTarget(e);\r
- if (!self.withinStatusBar(o)) return true;\r
- self.dragActive = true;\r
- self.lastSound.pause();\r
- self.setPosition(e);\r
- self.addEventHandler(document,'mousemove',self.handleMouseMove);\r
- self.addClass(self.lastSound._data.oControls,'ezt-dragging');\r
- self.stopEvent(e);\r
- return false;\r
- }\r
- \r
- this.handleMouseMove = function(e) {\r
- // set position accordingly\r
- if (self.dragActive) {\r
- if (self.config.useThrottling) {\r
- // be nice to CPU/externalInterface\r
- var d = new Date();\r
- if (d-self.dragExec>20) {\r
- self.setPosition(e);\r
- } else {\r
- window.clearTimeout(self.dragTimer);\r
- self.dragTimer = window.setTimeout(function(){self.setPosition(e)},20);\r
- }\r
- self.dragExec = d;\r
- } else {\r
- // oh the hell with it\r
- self.setPosition(e);\r
- }\r
- } else {\r
- self.stopDrag();\r
- }\r
- return false;\r
- }\r
- \r
- this.stopDrag = function(e) {\r
- if (self.dragActive) {\r
- self.removeClass(self.lastSound._data.oControls,'ezt-dragging');\r
- self.removeEventHandler(document,'mousemove',self.handleMouseMove);\r
- // self.removeEventHandler(document,'mouseup',self.stopDrag);\r
- if (!pl.hasClass(self.lastSound._data.oLI,self.css.sPaused)) {\r
- self.lastSound.resume();\r
- }\r
- self.dragActive = false;\r
- self.stopEvent(e);\r
- return false;\r
- }\r
- }\r
- \r
- this.handleStatusClick = function(e) {\r
- self.setPosition(e);\r
- if (!pl.hasClass(self.lastSound._data.oLI,self.css.sPaused)) self.resume();\r
- return self.stopEvent(e);\r
- }\r
- \r
- this.stopEvent = function(e) {\r
- if (typeof e != 'undefined' && typeof e.preventDefault != 'undefined') {\r
- e.preventDefault();\r
- } else if (typeof event != 'undefined' && typeof event.returnValue != 'undefined') {\r
- event.returnValue = false;\r
- }\r
- return false;\r
- }\r
- \r
- this.setPosition = function(e) {\r
- // called from slider control\r
- var oThis = self.getTheDamnTarget(e);\r
- var oControl = oThis;\r
- while (!self.hasClass(oControl,'ezt-controls') && oControl.parentNode) {\r
- oControl = oControl.parentNode;\r
- }\r
- var oSound = self.lastSound;\r
- var x = parseInt(e.clientX);\r
- // play sound at this position\r
- var nMsecOffset = Math.floor((x-self.getOffX(oControl)-4)/(oControl.offsetWidth)*self.getDurationEstimate(oSound));\r
- if (!isNaN(nMsecOffset)) nMsecOffset = Math.min(nMsecOffset,oSound.duration);\r
- if (!isNaN(nMsecOffset)) oSound.setPosition(nMsecOffset);\r
- }\r
-\r
- this.stopSound = function(oSound) {\r
- sm._writeDebug('stopping sound: '+oSound.sID);\r
- sm.stop(oSound.sID);\r
- sm.unload(oSound.sID);\r
- }\r
-\r
- this.getDurationEstimate = function(oSound) {\r
- if (oSound.instanceOptions.isMovieStar) {\r
- return (oSound.duration);\r
- } else {\r
- return (!oSound._data.metadata || !oSound._data.metadata.data.givenDuration?oSound.durationEstimate:oSound._data.metadata.data.givenDuration);\r
- }\r
- }\r
-\r
- // XBM support\r
-\r
- // xbmDraw.js XBM drawing library\r
- // (c)2002 David L. Blackledge\r
- // http://David.Blackledge.com\r
- // Written April, 2002\r
- // You may use this if you keep this copyright notice intact\r
- //\r
- // See http://David.Blackledge.com/XBMDrawLibrary.html\r
- // Some unused functions removed, see site for complete library\r
-\r
- function array_copy(o_array) {\r
- var ret_array = new Array();\r
- if(typeof(ret_array.concat) == "function")\r
- return ret_array.concat(o_array);\r
- for(var j = 0 ; j < o_array.length ; ++j) {\r
- ret_array[ret_array.length] = o_array[j];\r
- }\r
- return ret_array;\r
- }\r
-\r
- function XBMImage_body() {\r
- var bod = "";\r
- for(var i = 0 ; i < this.height ; ++i) {\r
- for(var j = 0 ; j < this.width/8 ; ++j) {\r
- if(typeof(this.data[i]) != "undefined" && typeof(this.data[i][j]) != "undefined") {\r
- // must be reversed to work right, apparently.\r
- var bool = 0;\r
- bool = this.data[i][j];\r
- var hex = (new Number(bool)).toString(16);\r
- if(hex.length == 1)\r
- hex = "0"+hex;\r
- bod += "0x"+hex+",";\r
- } else {\r
- bod += "0x00,";\r
- }\r
- }\r
- }\r
- if(bod.length > 0) // remove trailing comma\r
- bod = bod.substring(0,bod.length-1);\r
- return bod;\r
- }\r
-\r
- function XBMImage_draw(x,y) {\r
- if(!(x > -1 && x < this.width && y > -1 && y < this.height))\r
- return;\r
- if(typeof(this.data[y]) == "undefined")\r
- this.data[y] = new Array();\r
- var bit = x%8;\r
- var byt = (x-bit)/8;\r
- if(typeof(this.data[y][byt]) == "undefined")\r
- this.data[y][byt] = 0;\r
- this.data[y][byt] |= (0x01<<bit);\r
- }\r
-\r
- // attempt to do a fast horizontal line algorithm.\r
- function XBMImage_drawHLine(x1,y1,x2) {\r
- if(!(y1 > -1 && y1 < this.height))\r
- return;\r
- if(x1 > x2){\r
- var xs = x1;x1=Math.max(0,x2);x2=Math.min(this.width,xs);\r
- }\r
- var filled = 0xFF;\r
- var startbits = x1%8;\r
- var startbyt = (x1-x1%8)/8;\r
- var endbits = 8-x2%8;\r
- var endbyt = (x2-x2%8)/8;\r
- if(startbyt == endbyt) {\r
- this.data[y1][startbyt]|=(filled <<startbits)&(filled>>endbits);\r
- return;\r
- }\r
- for(var i = startbyt+1 ; i < endbyt ; ++i) {\r
- this.data[y1][i] = filled;\r
- }\r
- for(var j=x1; j < (x1+(8-x1%8)) ; ++j)\r
- this.draw(j,y1);\r
- this.data[y1][endbyt] |= (filled >>endbits);\r
- }\r
- \r
- function XBMImage_drawVLine(x1,y1,y2) {\r
- if(!(x1 > -1 && x1 < this.width))\r
- return;\r
- if(y1 > y2){\r
- var ys = y1;y1=Math.max(0,y2);y2=Math.min(this.height,ys);\r
- }\r
- var bit = x1%8;\r
- var byt = (x1-bit)/8;\r
- var bitmask = (0x01<<bit);\r
- for(var y = y1 ; y <= y2 ; ++y)\r
- this.data[y][byt] |= bitmask;\r
- }\r
- \r
- function XBMImage_drawLine(x1,y1,x2,y2) {\r
- if(x1 > x2) {\r
- var xx = x1; x1 = x2; x2 = xx;\r
- var yy = y1; y1 = y2; y2 = yy;\r
- }\r
- var y = y1;\r
- if(y1 == y2)\r
- if(x1 == x2)\r
- return this.draw(x1,y1);\r
- else\r
- return this.drawHLine(x1,y1,x2);\r
- if(x1 == x2) return this.drawVLine(x1,y1,y2);\r
- var slope=(y1-y2)/(x1-x2);\r
- var yint = y1-Math.floor(slope*x1); // y-intercept\r
- for(var x = x1; x < x2; ++x) {\r
- if(slope > 0) { //y1<y2 (top to bottom)\r
- for(y = Math.floor(slope*x)+yint ; y < (Math.floor(slope*(x+1))+yint) ; ++y) {\r
- this.draw(x,y);\r
- }\r
- if(Math.floor(slope*x) == Math.floor(slope*(x+1)))\r
- this.draw(x,y);\r
- if(x==x2-1) {\r
- for(y ; y <= y2 ; ++y) {\r
- this.draw(x,y);\r
- } \r
- }\r
- } else { //y1>y2 (bottom to top)\r
- for(y = Math.floor(slope*x)+yint ; y > (Math.floor(slope*(x+1))+yint) ; --y) {\r
- this.draw(x,y);\r
- }\r
- if(Math.floor(slope*x) == Math.floor(slope*(x+1)))\r
- this.draw(x,y);\r
- if(x==x2-1) {\r
- for(y ; y >= y2 ; --y) {\r
- this.draw(x,y);\r
- } \r
- }\r
- }\r
- }\r
- return null;\r
- }\r
-\r
- function XBMImage_drawBoxFilled(x1,y1,x2,y2) {\r
- for(var y = y1; y <= y2; ++y)\r
- this.drawHLine(x1,y,x2);\r
- }\r
-\r
- function XBMImage_getXBM() {\r
- return this.header + this.body() + this.footer;\r
- }\r
-\r
- function XBMImage_setXBM(str){\r
- var xbmdata = str.substring(str.indexOf("{")+1,str.lastIndexOf("}"));\r
- var a_data = xbmdata.split(",");\r
- for(var j = 0 ; j < this.height ; ++j) {\r
- this.data[j] = new Array();\r
- for(var i = 0 ; i < Math.floor(this.width/8) ; ++i) {\r
- var a_idx = i+j*(Math.floor(this.width/8));\r
- if(a_idx < a_data.length)\r
- this.data[j][i] = (new Number(parseInt(a_data[a_idx],16))).valueOf();//parseInt(a_data[a_idx]);\r
- }\r
- }\r
- }\r
-\r
- function XBMImage(width,height,name) {\r
- this.name = name;\r
- this.width = width+((width%8)>0?(8-(width%8)):0); //expand to a multiple of 8\r
- this.height = height;\r
- this.header = "#define "+name+"_width "+this.width+"\n"+\r
- "#define "+name+"_height "+this.height+"\n"+\r
- "static char "+name+"_bits[] = {\n";\r
- this.footer = "};";\r
- this.data = new Array(this.height);\r
- for(var i = 0 ; i < this.data.length ; ++i) {\r
- this.data[i] = new Array(this.width);\r
- for(var j = 0 ; j < this.data[i].length ; ++j) {\r
- this.data[i][j] = 0;\r
- }\r
- }\r
- this.frames = new Array(); // store copies of this.data;\r
- this.body = XBMImage_body;\r
- this.draw = XBMImage_draw;\r
- this.drawLine = XBMImage_drawLine;\r
- this.drawHLine = XBMImage_drawHLine;\r
- this.drawVLine = XBMImage_drawVLine;\r
- this.drawBoxFilled = XBMImage_drawBoxFilled;\r
- this.getXBM = XBMImage_getXBM;\r
- this.setXBM = XBMImage_setXBM;\r
- this.xbm = this.getXBM();\r
- }\r
-\r
- this.createXBMData = function() {\r
- var ico = null;\r
- var i=0;\r
- var j=0;\r
- for (i=0; i<16; i++) {\r
- self.xbmImages[i] = [];\r
- }\r
- for (var i=0; i<16; i++) {\r
- for (j=0; j<16; j++) {\r
- ico = new XBMImage(16,16,'img'+i+'x'+j);\r
- ico.drawBoxFilled(0,16-i,7,16-(i-16));\r
- ico.drawBoxFilled(9,16-j,16,16-(j-16));\r
- // self.xbmImages[i][j] = 'data:image/x-bitmap;base64,'+Base64.encode(ico.getXBM()); // using Base64 library\r
- self.xbmImages[i][j] = 'data:image/x-bitmap,'+encodeURI(ico.getXBM()); // hat tip: @p01\r
- }\r
- }\r
- }\r
-\r
- if (this.config.useFavIcon) {\r
- if (isFirefox || isOpera) {\r
- this.createXBMData();\r
- } else {\r
- // browser doesn't support doing this\r
- this.config.useFavIcon = false;\r
- }\r
- }\r
-\r
- this.init = function() {\r
- sm._writeDebug('TelemetaPlayer.init()');\r
- var oLinks = document.getElementsByTagName('a');\r
- // grab all links, look for .mp3\r
- var foundItems = 0;\r
- for (var i=0; i<oLinks.length; i++) {\r
- if ((sm.canPlayURL(oLinks[i].href) && self.hasClass(oLinks[i],'ezt-playable')) && !self.hasClass(oLinks[i],'ezt-exclude')) {\r
- oLinks[i].rel = 'telemetaPlayerMP3Sound'+i;\r
- self.links[self.links.length] = oLinks[i];\r
- self.addClass(oLinks[i],self.css.sDefault); // add default CSS decoration\r
- foundItems++;\r
- }\r
- }\r
- if (foundItems>0) {\r
- var oTiming = document.getElementById('ezt-sm2_timing');\r
- self.strings['timing'] = oTiming.innerHTML;\r
- oTiming.innerHTML = '';\r
- oTiming.id = '';\r
- self.addEventHandler(document,'click',self.handleClick);\r
- self.addEventHandler(document,'mousedown',self.handleMouseDown);\r
- self.addEventHandler(document,'mouseup',self.stopDrag);\r
- self.addEventHandler(window,'unload',function(){}); // force page reload when returning here via back button (Opera tries to remember old state, etc.)\r
- }\r
- console.log('TestTest');\r
- sm._writeDebug('TelemetaPlayer.init(): Found '+foundItems+' relevant items.');\r
- if (self.config.autoStart) {\r
- pl.handleClick({target:pl.links[0]});\r
- }\r
- }\r
-\r
-var Metadata = function(oSound) {\r
- var self = this;\r
- var oLI = oSound._data.oLI;\r
- var o = oLI.getElementsByTagName('ul')[0];\r
- var oItems = o.getElementsByTagName('li');\r
- var oTemplate = document.createElement('div');\r
- oTemplate.innerHTML = '<span> </span>';\r
- oTemplate.className = 'ezt-annotation';\r
- var oTemplate2 = document.createElement('div');\r
- oTemplate2.innerHTML = '<span> </span>';\r
- oTemplate2.className = 'ezt-annotation ezt-alt';\r
-\r
- var oTemplate3 = document.createElement('div');\r
- oTemplate3.className = 'ezt-note';\r
-\r
- this.totalTime = 0;\r
- this.strToTime = function(sTime) {\r
- var segments = sTime.split(':');\r
- var seconds = 0;\r
- for (var i=segments.length; i--;) {\r
- seconds += parseInt(segments[i])*Math.pow(60,segments.length-1-i,10); // hours, minutes\r
- }\r
- return seconds;\r
- }\r
- this.data = [];\r
- this.data.givenDuration = null;\r
- this.data.currentItem = null;\r
- this.data.mainTitle = oSound._data.oLink.innerHTML;\r
- for (var i=0; i<oItems.length; i++) {\r
- this.data[i] = {\r
- o: null,\r
- title: oItems[i].getElementsByTagName('p')[0].innerHTML,\r
- startTime: oItems[i].getElementsByTagName('span')[0].innerHTML,\r
- startSeconds: self.strToTime(oItems[i].getElementsByTagName('span')[0].innerHTML.replace(/[()]/g,'')),\r
- duration: 0,\r
- durationMS: null,\r
- startTimeMS: null,\r
- endTimeMS: null,\r
- oNote: null\r
- }\r
- }\r
- var oDuration = pl.getElementsByClassName('ezt-duration','div',oLI);\r
- console.log(oDuration);\r
- this.data.givenDuration = (oDuration.length?self.strToTime(oDuration[0].innerHTML)*1000:0);\r
- for (i=0; i<this.data.length; i++) {\r
- this.data[i].duration = parseInt(this.data[i+1]?this.data[i+1].startSeconds:(self.data.givenDuration?self.data.givenDuration:oSound.durationEstimate)/1000)-this.data[i].startSeconds;\r
- this.data[i].startTimeMS = this.data[i].startSeconds*1000;\r
- this.data[i].durationMS = this.data[i].duration*1000;\r
- this.data[i].endTimeMS = this.data[i].startTimeMS+this.data[i].durationMS;\r
- this.totalTime += this.data[i].duration;\r
- }\r
- // make stuff\r
- this.createElements = function() {\r
- var oFrag = document.createDocumentFragment();\r
- var oNode = null;\r
- var oNodeSpan = null;\r
- var oNode2 = null;\r
- for (var i=0; i<self.data.length; i++) {\r
- oNode = (i%2==0?oTemplate:oTemplate2).cloneNode(true);\r
- oNodeSpan = oNode.getElementsByTagName('span')[0];\r
- oNode.rel = i;\r
- self.data[i].o = oNode;\r
- oNode2 = oTemplate3.cloneNode(true);\r
- if (i%2==0) oNode2.className = 'ezt-note ezt-alt';\r
- oNode2.innerHTML = this.data[i].title;\r
- // evil old-skool event handlers, css:hover-only ideally would be nice excluding IE 6\r
- oNode.onmouseover = self.mouseover;\r
- oNode.onmouseout = self.mouseout;\r
- this.data[i].oNote = oNode2;\r
- oSound._data.oControls.appendChild(oNode2);\r
- oFrag.appendChild(oNode);\r
- }\r
- self.refresh();\r
- oSound._data.oStatus.appendChild(oFrag);\r
- }\r
-\r
- this.refresh = function() {\r
- var offset = 0;\r
- var relWidth = null;\r
- var duration = (self.data.givenDuration?self.data.givenDuration:oSound.durationEstimate);\r
- for (var i=0; i<self.data.length; i++) {\r
- if (duration) {\r
- relWidth = (((self.data[i].duration*1000)/duration)*100);\r
- self.data[i].o.style.left = (offset?offset+'%':'-2px');\r
- self.data[i].oNote.style.left = (offset?offset+'%':'0px');\r
- offset += relWidth;\r
- }\r
- }\r
- }\r
-\r
- this.mouseover = function(e) {\r
- self.data[this.rel].oNote.style.visibility = 'hidden';\r
- self.data[this.rel].oNote.style.display = 'inline-block';\r
- self.data[this.rel].oNote.style.marginLeft = -parseInt(self.data[this.rel].oNote.offsetWidth/2)+'px';\r
- self.data[this.rel].oNote.style.visibility = 'visible';\r
- }\r
-\r
- this.mouseout = function() { \r
- self.data[this.rel].oNote.style.display = 'none';\r
- }\r
-\r
- // ----\r
-\r
- this.createElements();\r
- this.refresh();\r
- \r
-} // MetaData();\r
-\r
- this.initDOM = function() {\r
- // set up graph box stuffs\r
- var sb = self.getElementsByClassName('ezt-spectrum-box','div',document.documentElement)[0];\r
- if (sm.flashVersion >= 9) {\r
- self.addClass(self.getElementsByClassName('ezt-playlist','ul',document.documentElement)[0],self.cssBase);\r
- var sbC = sb.getElementsByTagName('div')[0];\r
- var oF = document.createDocumentFragment();\r
- var oClone = null;\r
- for (var i=256; i--;) {\r
- oClone = sbC.cloneNode(false);\r
- oClone.style.left = (i)+'px';\r
- oF.appendChild(oClone);\r
- }\r
- sb.removeChild(sbC);\r
- sb.appendChild(oF);\r
- }\r
- this.oControls = document.getElementById('ezt-control-template').cloneNode(true);\r
- this.oControls.id = '';\r
- this.init();\r
- }\r
-\r
-}\r
-\r
+++ /dev/null
-/*\r
-\r
- SoundManager 2: "page as playlist" example\r
- ------------------------------------------\r
-\r
- Clicks on links to MP3s are intercepted via JS, calls are\r
- made to SoundManager to load/play sounds. CSS classes are\r
- appended to the LI parent, which are used to highlight the\r
- current play state and so on.\r
-\r
- Class names are applied in addition to "ezt-link" base.\r
-\r
- Default:\r
-\r
- ezt-link\r
-\r
- Additional states:\r
-\r
- ezt-playing\r
- ezt-paused\r
-\r
- eg.\r
-\r
- <!-- default -->\r
- <li class="ezt-link"><a href="some.mp3">some.mp3</a></li>\r
-\r
- <!-- playing -->\r
- <li class="ezt-link ezt-playing"><a href="some.mp3">some.mp3</a></li>\r
-\r
- The script also injects an HTML template containing control bar\r
- and timing elements, which can also be targeted with CSS.\r
-\r
-\r
- Note you don't necessarily require ul.playlist for your use\r
- if only using one style on a page. You can just use .ezt-link\r
- and so on, but isolate the CSS you want.\r
-\r
- Side note: Would do multiple class definitions eg.\r
-\r
- li.ezt-default.ezt-playing{}\r
-\r
- .. except IE 6 has a parsing bug which may break behaviour,\r
- applying ezt-playing {} even when the class is set to ezt-default.\r
-\r
-\r
- If you want to make your own UI from scratch, here is the base:\r
-\r
- Default + hover state, "click to play":\r
-\r
- li.ezt-link {}\r
- li.ezt-link:hover {}\r
-\r
- Playing + hover state, "click to pause":\r
-\r
- li.ezt-playing {}\r
- li.ezt-playing:hover {}\r
-\r
- Paused + hover state, "click to resume":\r
-\r
- li.ezt-paused {}\r
- li.ezt-paused:hover {}\r
-\r
-*/\r
-\r
-\r
-/* background-image-based CSS3 example */\r
-\r
-.ezt-spectrum-container {\r
- display:none;\r
-}\r
-\r
-ul.ezt-use-spectrum li.ezt-playing .ezt-spectrum-container {\r
- position:absolute;\r
- left:0px;\r
- top:0px;\r
- margin-left:-266px;\r
- margin-top:-1px;\r
- display:block;\r
- background-color:#5588bb;\r
- border:1px solid #99ccff;\r
- -moz-border-radius:4px;\r
- -webkit-border-radius:4px;\r
- border-radius:4px;\r
-}\r
-\r
-ul.ezt-use-spectrum .ezt-spectrum-box {\r
- position:relative;\r
- width:255px;\r
- font-size:1em;\r
- padding:2px 0px;\r
- height:1.2em;\r
- overflow:hidden;\r
-}\r
-\r
-ul.ezt-use-spectrum .ezt-spectrum-box .ezt-spectrum {\r
- position:absolute;\r
- left:0px;\r
- top:-2px;\r
- margin-top:20px;\r
- display:block;\r
- font-size:1px;\r
- width:1px;\r
- height:1px; /* set to 50px for a thick line, 1px for a thin line, etc. */\r
- overflow:hidden;\r
- background-color:#fff;\r
-}\r
-\r
-ul.ezt-playlist {\r
- list-style-type:none;\r
- margin:0px;\r
- padding:0px;\r
-\r
-}\r
-\r
-ul.ezt-playlist li {\r
- /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */\r
- position:relative;\r
- display:block;\r
- width:auto;\r
- font-size:2em;\r
- color:#666;\r
- padding:0.25em 0.5em 0.25em 0.5em;\r
- border:none;\r
- letter-spacing:-1px; /* ZOMG WEB X.0. ;) */\r
- background-color:#f9f9f9;\r
- -webkit-transition-property: hover;\r
- -webkit-transition: background-color 0.15s ease-in-out;\r
-}\r
-\r
-ul.ezt-playlist li a {\r
- display:block;\r
- text-decoration:none;\r
- font-weight:bold;\r
- color:#000;\r
- font-size:60%;\r
- outline:none;\r
- position:relative;\r
- z-index:2;\r
- text-shadow: 0 0 0 #fff; /* stupid Safari "fat" font rendering tweak */\r
- padding-left: 30px;\r
- background: url(../images/play.png) no-repeat left;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-playing a {\r
- background: url(../images/pause.png) no-repeat left;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-playing,\r
-ul.ezt-playlist li.ezt-paused,\r
-ul.ezt-playlist li.ezt-playing a {\r
- color:#fff;\r
- border-radius:3px;\r
- -webkit-border-radius:3px;\r
- -moz-border-radius:3px;\r
-}\r
-\r
-ul.ezt-playlist li:hover {\r
- background-color:#eee;\r
-}\r
-\r
-ul.ezt-playlist li:hover a {\r
- color:#333;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-playing,\r
-ul.ezt-playlist li.ezt-playing:hover {\r
- background-color:#6699cc;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-paused {\r
- background-color:#999;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-playing:hover a,\r
-ul.ezt-playlist li.ezt-paused a {\r
- color:#fff;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls {\r
- display:none;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-peak,\r
-ul.ezt-playlist.ezt-use-peak li .ezt-peak {\r
- display:none;\r
- position:absolute;\r
- top:0.55em;\r
- right:0.5em;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-playing .ezt-controls,\r
-ul.ezt-playlist li.ezt-paused .ezt-controls {\r
- position:relative;\r
- display:block;\r
-}\r
-\r
-ul.ezt-playlist.ezt-use-peak li.ezt-playing .ezt-peak,\r
-ul.ezt-playlist.ezt-use-peak li.ezt-paused .ezt-peak {\r
- display:inline;\r
- display:inline-block;\r
-}\r
-\r
-ul.ezt-playlist.ezt-use-peak li .ezt-peak {\r
- display:none; /* IE 7 */\r
-}\r
-\r
-ul.ezt-playlist li.ezt-paused .ezt-controls {\r
- background-color:#666;\r
-}\r
-\r
-ul.ezt-playlist li:hover .ezt-controls .ezt-statusbar {\r
- position:relative;\r
- cursor:ew-resize;\r
- cursor:-moz-grab;\r
- cursor:grab;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-paused .ezt-controls .ezt-statusbar {\r
- background-color:#ccc;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls {\r
- position:relative;\r
- margin-top:0.25em;\r
- margin-bottom:0.25em;\r
- background-color:#99ccff;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar {\r
- position:relative;\r
- height:0.5em;\r
- background-color:#ccddff;\r
- border:2px solid #fff;\r
- border-radius:2px;\r
- -moz-border-radius:2px;\r
- -webkit-border-radius:2px;\r
- overflow:hidden;\r
- cursor:-moz-grab;\r
- cursor:grab;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls.ezt-dragging .ezt-statusbar {\r
- cursor:-moz-grabbing;\r
- cursor:grabbing;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-position,\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-loading,\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation {\r
- position:absolute;\r
- left:0px;\r
- top:0px;\r
- height:0.5em;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-position {\r
- background-color:#336699;\r
- border-right:3px solid #336699;\r
- border-radius:3px;\r
- -moz-border-radius:3px;\r
- -webkit-border-radius:3px;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-paused .ezt-controls .ezt-statusbar .ezt-position {\r
- background-color:#666;\r
- border-color:#666;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-loading {\r
- background-color:#eee;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-position,\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-loading {\r
- width:0px;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-playing a.ezt-link,\r
-ul.ezt-playlist li.ezt-paused a.ezt-link {\r
- margin-right:8.5em; /* room for timing stuff */\r
-}\r
-\r
-ul.ezt-playlist li .ezt-timing {\r
- position:absolute;\r
- display:none;\r
- text-align:right;\r
- right:1em;\r
- top:1em;\r
- width:auto;\r
- height:1em;\r
- /*\r
- padding:4px 5px 2px 5px;\r
- *padding:3px 5px 3px 5px;\r
- */\r
- padding:3px 5px;\r
- background-color:#5588bb;\r
- border:1px solid #99ccff;\r
- -moz-border-radius:4px;\r
- -khtml-border-radius:4px;\r
- border-radius:4px;\r
- letter-spacing:0px;\r
- font:44% monaco,"VT-100",terminal,"lucida console",courier,system;\r
- line-height:1em;\r
- vertical-align:middle;\r
-}\r
-\r
-ul.ezt-playlist.ezt-use-peak li .ezt-timing {\r
- right:4.25em;\r
-}\r
-\r
-ul.ezt-playlist li:hover .ezt-timing {\r
- z-index:2;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-timing div.ezt-sm2_timing {\r
- margin:0px;\r
- padding:0px;\r
- margin-top:-1em;\r
- text-shadow: 0 0 0 #fff; /* stupid Safari "fat" font rendering tweak */\r
-}\r
-\r
-ul.ezt-playlist li.ezt-playing .ezt-timing,\r
-ul.ezt-playlist li.ezt-paused .ezt-timing {\r
- display:block;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-paused .ezt-timing .ezt-sm2_position {\r
- text-decoration:blink; /* hee hee. first actual appropriate use? :D */\r
-}\r
-\r
-ul.ezt-playlist li.ezt-paused .ezt-timing,\r
-ul.ezt-playlist.ezt-use-peak li.ezt-paused .ezt-peak {\r
- background-color:#888;\r
- border-color:#ccc;\r
-}\r
-\r
-/* peak data */\r
-\r
-/* ul.ezt-playlist ... */\r
-\r
-ul.ezt-playlist.ezt-use-peak li .ezt-peak {\r
- display:none;\r
- zoom:1;\r
- border:1px solid #99ccff;\r
- padding:2px;\r
- height:0.55em;\r
- -moz-border-radius:4px;\r
- -khtml-border-radius:4px;\r
- border-radius:4px;\r
- background-color:#5588bb;\r
- width:0.8em;\r
- height:0.55em;\r
- margin-top:-3px;\r
-}\r
-\r
-ul.ezt-playlist.ezt-use-peak li .ezt-peak-box {\r
- position:relative;\r
- width:100%;\r
- height:0.55em;\r
- overflow:hidden;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-peak .ezt-l,\r
-ul.ezt-playlist li .ezt-peak .ezt-r {\r
- position:absolute;\r
- left:0px;\r
- top:0px;\r
- width:7px;\r
- height:50px;\r
- background:#fff;\r
- border:1px solid #fff;\r
- -moz-border-radius:1px;\r
- -khtml-border-radius:1px;\r
- margin-top:1em;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-peak .ezt-l {\r
- margin-right:1px;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-peak .ezt-r {\r
- left:10px;\r
-}\r
-\r
-#control-template {\r
- display:none;\r
-}\r
-\r
-/*\r
- ------------------------------------------\r
- -- annotations (sub-tracks, notes etc.) --\r
- ------------------------------------------\r
-*/\r
-\r
-ul.ezt-playlist li a.ezt-link .ezt-metadata {\r
- display:none; /* hide by default */\r
-}\r
-\r
-ul.ezt-playlist li.ezt-paused a.ezt-link .ezt-metadata,\r
-ul.ezt-playlist li.ezt-playing a.ezt-link .ezt-metadata {\r
- display:inline;\r
-}\r
-\r
-ul.ezt-playlist li ul {\r
- list-style-type:none;\r
- margin:0px;\r
- padding:0px;\r
- position:relative;\r
- font-size:small;\r
- display:none;\r
-}\r
-\r
-ul.ezt-playlist li ul li {\r
- position:relative;\r
- margin:0px;\r
- padding:2px 3px;\r
- border:1px solid transparent;\r
- -moz-border-radius:6px;\r
- -khtml-border-radius:6px;\r
- border-radius:6px;\r
- margin-right:1em;\r
- font-family:helvetica,verdana,tahoma,arial,"sans serif";\r
- font-size:x-small;\r
- font-weight:lighter;\r
- letter-spacing:0px;\r
- background-color:transparent;\r
- opacity:0.66;\r
-}\r
-\r
-ul.ezt-playlist li ul li:hover {\r
- opacity:1;\r
- background-color:#fff;\r
- border-color:#ccc;\r
- color:#666;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-playing ul li,\r
-ul.ezt-playlist li.ezt-paused ul li {\r
- color:#fff;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-playing ul li:hover {\r
- background-color:#fff;\r
- color:#5588bb;\r
- border-color:#336699;\r
- opacity:0.9;\r
-}\r
-\r
-ul.ezt-playlist li.ezt-paused ul li:hover {\r
- background-color:#888;\r
-}\r
-\r
-/* metadata */\r
-\r
-ul.ezt-playlist li .ezt-metadata .ezt-duration {\r
- /* optional timing data */\r
- display:none;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-metadata ul li p {\r
- margin:0px;\r
- padding:0px;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-metadata ul li span {\r
- display:none;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation {\r
- position:absolute;\r
- background-color:transparent;\r
- top:0px;\r
- color:#666;\r
- text-align:right;\r
- margin-left:10px;\r
- height:0.5em;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation:hover {\r
- z-index:12; /* sit on top of note */\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation span.ezt-bubble {\r
- /* using · */\r
- display:inline-block;\r
- background-color:#fff;\r
- border:1px solid #666;\r
- border-radius:6px;\r
- -moz-border-radius:6px;\r
- -webkit-border-radius:6px;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation span {\r
- display:block;\r
- background:transparent url(../image/divot.ezt-png) no-repeat 50% 0px;\r
- width:15px;\r
- margin-left:-15px;\r
- height:12px;\r
- text-align:center;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation.ezt-alt {\r
- top:auto;\r
- bottom:0px;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation span:hover {\r
- cursor:none; /* Fx3 rules. */\r
- margin-top:0.1em;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation.ezt-alt span:hover {\r
- margin-top:-0.1em;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation.ezt-alt span {\r
- background:transparent url(../image/divot-bottom.ezt-png) no-repeat 50% bottom;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-note {\r
- position:absolute;\r
- display:none;\r
- left:0px;\r
- top:0px;\r
- z-index:10;\r
- font-size:x-small;\r
- padding:2px 4px 2px 4px;\r
- width:auto;\r
- color:#666;\r
- background-color:#fff;\r
- border:1px solid #ccc;\r
- border-radius:6px;\r
- -moz-border-radius:6px;\r
- -webkit-border-radius:6px;\r
- font-style:normal;\r
- font-weight:bold;\r
- font-family:arial,tahoma,verdana,"sans serif";\r
- letter-spacing:0px;\r
- margin-top:1.1em;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-note.ezt-alt {\r
- margin-top:-1.32em;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-note:hover {\r
- display:block !important;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-sm2_divider {\r
- font-size:0.75em;\r
-}\r
-\r
-ul.ezt-playlist li .ezt-sm2_metadata {\r
- font-size:0.65em;\r
-}\r
-\r
-\r
-/* \r
- ---------------------------------\r
- -- alternate (optional) themes --\r
- ---------------------------------\r
-*/\r
-\r
-ul.ezt-playlist.ezt-dark li.ezt-playing a {\r
- color:#fff;\r
-}\r
-\r
-ul.ezt-playlist.ezt-dark li.ezt-playing .ezt-timing,\r
-ul.ezt-playlist.ezt-use-peak.ezt-dark li.ezt-playing .ezt-peak {\r
- color:#999;\r
-}\r
-\r
-ul.ezt-playlist.ezt-use-spectrum.ezt-dark li.ezt-playing .ezt-spectrum-container {\r
- background-color:#222;\r
- border-color:#444;\r
-}\r
-\r
-ul.ezt-playlist.ezt-use-spectrum.ezt-dark li.ezt-playing .ezt-spectrum-container .ezt-spectrum {\r
- background-color:#999;\r
-}\r
-\r
-ul.ezt-playlist.ezt-dark li.ezt-paused {\r
- background-color:#333;\r
-}\r
-\r
-ul.ezt-playlist.ezt-dark li.ezt-paused a {\r
- color:#999;\r
-}\r
-\r
-ul.ezt-playlist.ezt-dark li.ezt-playing,\r
-ul.ezt-playlist.ezt-dark li.ezt-playing:hover {\r
- background-color:#333;\r
-}\r
-\r
-ul.ezt-playlist.ezt-dark li:hover .ezt-controls .ezt-statusbar {\r
- background-color:#666;\r
-}\r
-\r
-ul.ezt-playlist.ezt-dark li .ezt-controls {\r
- background-color:#333;\r
-}\r
-\r
-ul.ezt-playlist.ezt-dark li .ezt-controls .ezt-statusbar {\r
- background-color:#666;\r
- border-color:#444;\r
-}\r
-\r
-ul.ezt-playlist.ezt-dark li .ezt-controls .ezt-statusbar .ezt-position {\r
- background-color:#111;\r
- border-right:3px solid #111;\r
- border-radius:3px;\r
- -moz-border-radius:3px;\r
- -webkit-border-radius:3px;\r
-}\r
-\r
-ul.ezt-playlist.ezt-dark li .ezt-controls .ezt-statusbar .ezt-loading {\r
- background-color:#444;\r
-}\r
-\r
-ul.ezt-playlist.ezt-dark li .ezt-timing,\r
-ul.ezt-playlist.ezt-use-peak.ezt-dark li .ezt-peak {\r
- background-color:#222;\r
- border-color:#444;\r
-}\r
-\r
-ul.ezt-playlist.ezt-dark.ezt-use-peak li .ezt-peak .ezt-l,\r
-ul.ezt-playlist.ezt-dark.ezt-use-peak li .ezt-peak .ezt-r {\r
- border-color:#444;\r
- background-color:#999;\r
-}\r
-\r
-\r
-/* gold theme */\r
-\r
-ul.ezt-playlist.ezt-gold li.ezt-paused {\r
- background-color:#996600;\r
-}\r
-\r
-ul.ezt-playlist.ezt-gold li.ezt-playing,\r
-ul.ezt-playlist.ezt-gold li.ezt-playing:hover {\r
- background-color:#cc9900;\r
-}\r
-\r
-ul.ezt-playlist.ezt-gold li .ezt-controls {\r
- background-color:transparent;\r
-}\r
-\r
-ul.ezt-playlist.ezt-gold li .ezt-controls .ezt-statusbar {\r
- background-color:#fff;\r
- border-color:#fff;\r
-}\r
-\r
-ul.ezt-playlist.ezt-gold li .ezt-controls .ezt-statusbar .ezt-position {\r
- background-color:#996600;\r
- border-right:3px solid #996600;\r
- border-radius:3px;\r
- -moz-border-radius:3px;\r
- -webkit-border-radius:3px;\r
-}\r
-\r
-ul.ezt-playlist.ezt-gold li .ezt-controls .ezt-statusbar .ezt-loading {\r
- background-color:#ffeedd;\r
-}\r
-\r
-ul.ezt-playlist.ezt-gold li .ezt-timing,\r
-ul.ezt-playlist.ezt-use-peak.ezt-gold li .ezt-peak {\r
- background-color:#CC9900;\r
- border-color:#ffcc33;\r
-}\r
-\r
-ul.ezt-playlist.ezt-use-spectrum.ezt-gold li.ezt-playing .ezt-spectrum-container {\r
- background-color:#cc9900;\r
- border-color:#ffcc33;\r
-}\r
-\r
-ul.ezt-playlist.ezt-use-spectrum.ezt-gold li.ezt-playing .ezt-spectrum-container .ezt-spectrum {\r
- background-color:#fff;\r
-}\r
-\r
-ul.ezt-playlist.ezt-gold.ezt-use-peak li .ezt-peak .ezt-l,\r
-ul.ezt-playlist.ezt-gold.ezt-use-peak li .ezt-peak .ezt-r {\r
- border-color:#fff;\r
- background-color:#fff;\r
-}\r
-\r
-\r
-/* ZOMG PONIES!!!ONEONEONE */\r
-\r
-ul.ezt-playlist.ezt-bubblegum li a {\r
- font-family:"comic sans ms",verdana,arial,tahoma,"sans serif"; /* heh */\r
-}\r
-\r
-ul.ezt-playlist.ezt-bubblegum li.ezt-paused,\r
-ul.ezt-playlist.ezt-bubblegum li.ezt-paused:hover {\r
- background-color:#ffccee;\r
-}\r
-\r
-ul.ezt-playlist.ezt-bubblegum li.ezt-paused a,\r
-ul.ezt-playlist.ezt-bubblegum li.ezt-paused:hover a,\r
-ul.ezt-playlist.ezt-bubblegum li.ezt-paused .ezt-timing,\r
-ul.ezt-playlist.ezt-use-peak.ezt-bubblegum li.ezt-paused .ezt-peak {\r
- color:#ff6699;\r
-}\r
-\r
-ul.ezt-playlist.ezt-bubblegum li:hover {\r
- background-color:#ffddee;\r
-}\r
-\r
-ul.ezt-playlist.ezt-bubblegum li.ezt-playing,\r
-ul.ezt-playlist.ezt-bubblegum li.ezt-playing:hover {\r
- background-color:#ff7799;\r
-}\r
-\r
-ul.ezt-playlist.ezt-bubblegum li .ezt-controls {\r
- background-color:transparent;\r
-}\r
-\r
-ul.ezt-playlist.ezt-bubblegum li .ezt-controls .ezt-statusbar {\r
- background-color:#fff;\r
- border-color:#fff;\r
-}\r
-\r
-ul.ezt-playlist.ezt-bubblegum li .ezt-controls .ezt-statusbar .ezt-position {\r
- background-color:#ffaacc;\r
- border-right:3px solid #ffaacc;\r
- border-radius:3px;\r
- -moz-border-radius:3px;\r
- -webkit-border-radius:3px;\r
-}\r
-\r
-ul.ezt-playlist.ezt-bubblegum li .ezt-controls .ezt-statusbar .ezt-loading {\r
- background-color:#ffeedd;\r
-}\r
-\r
-ul.ezt-playlist.ezt-bubblegum li .ezt-timing,\r
-ul.ezt-playlist.ezt-use-peak.ezt-bubblegum li .ezt-peak {\r
- background-color:#ffaacc;\r
- border-color:#ffccee;\r
-}\r
-\r
-ul.ezt-playlist.ezt-use-spectrum.ezt-bubblegum li.ezt-playing .ezt-spectrum-container {\r
- background-color:#ffaacc;\r
- border-color:#ffccee;\r
-}\r
-\r
-ul.ezt-playlist.ezt-use-spectrum.ezt-bubblegum li.ezt-playing .ezt-spectrum-container .ezt-spectrum {\r
- background-color:#fff;\r
-}\r
-\r
-ul.ezt-playlist.ezt-bubblegum.ezt-use-peak li .ezt-peak .ezt-l,\r
-ul.ezt-playlist.ezt-bubblegum.ezt-use-peak li .ezt-peak .ezt-r {\r
- border-color:#fff;\r
- background-color:#fff;\r
-}\r
-\r
-\r
-ul.ezt-playlist.ezt-shiny li.ezt-paused,\r
-ul.ezt-playlist.ezt-shiny li.ezt-playing {\r
- background-image:url(../image/top-highlight.ezt-png);\r
- background-repeat:repeat-x;\r
- background-position:0px -1px;\r
- _background-image:none; /* can't be bothered with IE 6. */\r
-}\r
projects / telemeta.git / commitdiff
