Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts

    mvplayer a url-list player widget Part 2/3

    (2 of 3)
    Complete source for mvplayer is in Part 3

    Here is the mvplayer widget's code (Requires argreader.js):
    Code:
    /* save as mvplayer.js */
    ArgReader.setArgs();
    try{
    	var urldisplayel = ArgReader.getArg("el");
    	if(urldisplayel===undefined)
    		throw("You need to supply the element id that will hold the widget.\n?el=holder");
    	var urldisplaylistfile = ArgReader.getArg("urls");
    	if(urldisplaylistfile===undefined)
    		throw("You need to supply a urls=filename argument to the mvp script.\n?urls=filename");
    }catch(e){alert("There was an error with the mvplayer setup\n"+e)}
    if(urldisplaylistfile.indexOf(".js")<0)
    	urldisplaylistfile+=".js";
    var mvwcolorscheme = ArgReader.getArg("color");
    var mvwcssfilename = "mvplayerOrange";
    if(mvwcolorscheme!=undefined){
    	switch(mvwcolorscheme.toLowerCase()){
    		case("blue"):
    			mvwcssfilename = "mvplayerBlue";
    			break;
    		case("orange"):
    			mvwcssfilename = "mvplayerOrange";
    			break;
    		case("teal"):
    			mvwcssfilename = "mvplayerTeal";
    			break;
    		case("tin"):
    			mvwcssfilename = "mvplayerTin";
    			break;
    	}
    }
    var mvwcssfile=document.createElement("link");
    mvwcssfile.setAttribute("rel", "stylesheet");
    mvwcssfile.setAttribute("type", "text/css");
    mvwcssfile.setAttribute("href", mvwcssfilename+".css");
    document.getElementsByTagName("head")[0].appendChild(mvwcssfile);
    
    /*---------------------------------------*/
    
    var rsmvpa = (function(urldisplayel){
    	var urldisplayel = urldisplayel;
    	function addMVPlayerUI(){
    		var mvplayerUI='<div id="xp_d1">\
    		<div><span><a href="#" id="anch0" class="headeron rsmvbutton" onclick="rsmv.panel(0);return false;">Play Lists</a></span><span><a href="#" id="anch1" class="headeroff rsmvbutton" onclick="rsmv.panel(1);return false;">Singles</a></span></div>\
    		<div id="panel0" class="showlist">\
    			<div id="sel0"></div>\
    			<a href="#" class="rsmvbuttoni" onclick="rsmv.stop();return false;">Stop</a>\
    			<a href="#" class="rsmvbuttoni" onclick="rsmv.skip();return false;"> Skip</a>\
    			<a href="#" id="cstmvl" class="rsmvbuttoni" onclick="rsmvp.customizeMVList(this);return false;"> MyLists</a>\
    		</div>\
    		<div id="panel1" class="hidelist">\
    			<div id="sel1"></div>\
    		</div>\
    		<div class="footer" id="notice">&copy R. Spoons 2010</div>\
    	</div>\
    	<div id="customMVList" style="top:60px;left:0px;z-index:999;">\
    		<table style="position:absolute;top:0px;left:0px;">\
    			<tr><td width="30px" class="rsmvi">Name: </td><td align="left"><input id="newSongName" value="" size="32" /></td></tr>\
    			<tr><td class="rsmvi">URL: </td><td align="left"><input id="newSongURL" value="" size="32" /></td></tr>\
    			<tr><td class="rsmvi">H:</td><td align="left" class="rsmvi"><input id="newSongH" value="0" size="2" /> M: <input id="newSongM" value="" size="2" />S: <input id="newSongS" value="" size="2" /></td></tr>\
    			<tr>\
    				<td colspan="2"><a href="#" id="addSong" class="rsmvbuttoni">Add Song</a>\
    				 <a href="#" id="mvdump" class="rsmvbuttoni">(DUMP)</a>\
    				 <a href="#" class="rsmvbuttoni" onclick="document.getElementById(\'mvlist\').select();return false;"> Select All</a>\
    				 <a href="#" class="rsmvbuttoni" onclick="rsmvp.rsmvhelp();return false;"> Help</a>\
    				</td>\
    			</tr>\
    		<tr><td colspan="2">\
    		<textarea id="mvlist" rows="10" cols="60" wrap="off"></textarea>\
    		</td></tr>\
    			<tr>\
    				<td colspan="2" style="white-space:nowrap;"><input id="newListName" value="MyList1" size="32" /> <a href="#" class="rsmvbuttoni" id="addList">Add List</a></td>\
    			</tr>\
    		</table>\
    	</div>';
    		return mvplayerUI;
    	}
    	function init(){
    		document.getElementById(urldisplayel).innerHTML=addMVPlayerUI();
    		finishinit()
    	}
    	function finishinit(){
    		if(rsmv.allvids===undefined){
    			setTimeout(rsmvpa.finishinit,100);
    		}else{
    			rsmv.vid=rsmv.allvids[0];
    			rsmv.init();
    			rsmvp.init();
    		}
    	}
    	return {
    		startinit:function(){init()},
    		finishinit:function(){finishinit()}
    	}
    })(urldisplayel);
    if(window.addEventListener){window.addEventListener("load",rsmvpa.startinit)}
    else if(window.attachEvent){window.attachEvent("onload",rsmvpa.startinit)}
    
    /*---------------------------------------*/
    
    function Time(h,m,s){
    	return [h,m,s];
    }
    var rsmv={
    	vid:null,
    	wOpen:null,
    	curVid:0,
    	stopplay:0,
    	openWin:null,
    	playLimit:2,
    	open_window:function(aURL,aWinName,opt){
    		if(opt!=null){
    			var sOptions="";
    			var sOptions = 'status=yes,menubar=yes,scrollbars=yes,resizable=yes,toolbar=yes'
    				+ ',width=' + (screen.availWidth - 10).toString()
    				+ ',height=' + (screen.availHeight - 122).toString()
    				+ ',screenX=0,screenY=0,left=0,top=0';
    			wOpen = window.open( '', aWinName, sOptions );
    			wOpen.location = aURL;
    			wOpen.focus();
    			wOpen.moveTo( 0, 0 );
    			wOpen.resizeTo( screen.availWidth, screen.availHeight);
    		}else{
    			var wOpen = window.open( '', aWinName);
    			wOpen.location = aURL;
    		}
    		return wOpen;
    	},
    	makeTime:function(tm){
    		var d=new Date();
    		var h=tm[0]+d.getHours()-0;
    		var m=tm[1]+d.getMinutes()-0;
    		if(m>60){m-=60;h+=1}
    		var s=tm[2]+d.getSeconds()-0;
    		if(s>60){s-=60;m+=1}
    		var t = h*3600+m*60+s;
    		return t;
    	},
    	endtime:0,
    	win:null,
    	timer:null,
    	view_content:function(){
    		rsmv.openWin=null;
    		rsmv.openWin=(function(){
    			if(rsmv.curVid<rsmv.vid.vids.length && rsmv.curVid<rsmv.playLimit){
    				rsmv.win = rsmv.open_window(rsmv.vid.vids[rsmv.curVid][1]);
    				rsmv.endtime=rsmv.makeTime(rsmv.vid.vids[rsmv.curVid][2]);
    				rsmv.timer=setInterval(function(){
    					var t1=rsmv.endtime;
    					var t2=rsmv.makeTime([0,0,0]);
    					var v1 = rsmv.curVid;
    					var v2 = rsmv.vid.vids.length;
    					if(t1<t2){
    						rsmv.win.close();
    						rsmv.win=null;
    						clearInterval(rsmv.timer);
    						rsmv.timer=null;
    						setTimeout(function(){
    							rsmv.view_content();
    						},500);
    					};
    					document.getElementById("notice").innerHTML=v1+"/"+v2+". Seconds Left: " + (t1-t2-0);
    				},100);
    				rsmv.curVid++;
    			}else{
    				$("notice").innerHTML="&copy R. Spoons 2010";
    				rsmv.write("Thanks for watching!");
    			}
    			return {copyright:"Robert Spoons 2010"};
    		})();
    	},
    	write:function(n){
    		document.getElementById("notice").innerHTML=n;
    	},
    	play:function(n){
    		rsmv.stop();
    		rsmv.curVid=0;
    		rsmv.vid=rsmv.allvids[n];
    		rsmv.playLimit=rsmv.vid.vids.length;
    		rsmv.view_content();
    	},
    	skip:function(){
    		rsmv.stop();
    		if(rsmv.curVid<rsmv.vid.vids.length){
    			rsmv.view_content();
    		}
    	},
    	stop:function(){
    		rsmvp.closeCustomize();
    		document.getElementById("notice").innerHTML="&copy R. Spoons 2010";
    		if(rsmv.openWin!=null){
    			if(rsmv.timer!=null){
    				clearInterval(rsmv.timer);
    			}
    			if(rsmv.win!=null){
    				rsmv.win.close();
    			}
    			rsmv.openWin=null;
    		}
    	},
    	init:function(){
    		//htaonly
    		//window.resizeTo(150,178);
    		var s = "";
    		for(var i=0;i<rsmv.allvids.length;i++){
    			s+="<a href='#' class='rsmvbutton' onclick='rsmv.play("+i+");return false;'>"+rsmv.allvids[i].name+"</a>";
    		}
    		var sel=document.getElementById("sel0");
    		sel.innerHTML=s;
    		s = "";
    		for(var i=0;i<rsmv.allvids.length;i++){
    			for(var j=0;j<rsmv.allvids[i].vids.length;j++){
    				s+="<a href='#' class='rsmvbutton' title='"+rsmv.allvids[i].name+"' onclick='rsmv.playVideo("+i+","+j+");return false;'>"+rsmv.allvids[i].vids[j][0]+"</a>";
    			}
    		}
    		sel=document.getElementById("sel1");
    		sel.innerHTML=s;
    	},
    	playVideo:function(n,m){
    		rsmv.stop();
    		rsmv.vid=rsmv.allvids[n];
    		var w = rsmv.open_window(rsmv.vid.vids[m][1]);
    	},
    	panel:function(n){
    		rsmvp.closeCustomize();
    		var m=(n+1)%2;
    		document.getElementById("panel"+n).className="showlist";
    		document.getElementById("anch"+n).className="headeron";
    		document.getElementById("panel"+m).className="hidelist";
    		document.getElementById("anch"+m).className="headeroff";
    	}
    }
    
    /*---------------------------------------*/
    
    var urldisplaylistscript=document.createElement('script');
    urldisplaylistscript.setAttribute("type","text/javascript");
    urldisplaylistscript.setAttribute("src", "rsmvallvids.js");//urldisplaylistfile);
    document.getElementsByTagName("head")[0].appendChild(urldisplaylistscript);
    
    /*---------------------------------------*/
    
    var rsmvp = (function(){
    	function getCoords(element){
    		var coords = { x: 0, y: 0, width: element.offsetWidth, height:element.offsetHeight };
    		while (element) {
    			coords.x += element.offsetLeft;
    			coords.y += element.offsetTop;
    			element = element.offsetParent;
    		}
    		return coords;
    	}
    	var mvcntr=1;
    	var mvpinit=function(){
    		document.getElementById("addSong").onclick=function(){
    			if(document.getElementById("newSongName").value==""){
    				alert("You need to add a Name\nYou can drag & drop a song title from YouTube or a similar service into the 'Name' textbox.");
    				return false;
    			}
    			if(document.getElementById("newSongURL").value==""){
    				alert("You need to add a URL\nYou can drag & drop the URL from the addressbar on YouTube or a similar service into the 'URL' textbox.");
    				return false;
    			}
    			if(document.getElementById("newSongH").value==""){
    				document.getElementById("newSongH").value="0";
    			}
    			if(document.getElementById("newSongM").value==""){
    				alert("You need to add a valid Time-Minutes\nEnter how many minutes (2 digits) you want the page to stay open into the 'M' textbox.\nYouTube usualy lists how long a video plays.");
    				return false;
    			}
    			if(document.getElementById("newSongS").value==""){
    				alert("You need to add a valid Time-Seconds\nEnter how many seconds (2 digits) you want the page to stay open into the 'S' textbox.\nYouTube usualy lists how long a video plays.");
    				return false;
    			}
    			document.getElementById("mvlist").value+="[\""+document.getElementById("newSongName").value+"\",\""+document.getElementById("newSongURL").value+"\",Time("+document.getElementById("newSongH").value+","+document.getElementById("newSongM").value+","+document.getElementById("newSongS").value+")]\n";
    			document.getElementById("newSongName").value="";
    			document.getElementById("newSongURL").value="";
    			document.getElementById("newSongH").value="0";
    			document.getElementById("newSongM").value="";
    			document.getElementById("newSongS").value="";
    			return false;
    		}
    		document.getElementById("addList").onclick=function(){
    			if(document.getElementById("newListName").value==""){
    				alert("You need to add a List Name for the new list\nYou enter the name in textbox to the left of 'Add List'.");
    				return false;
    			}
    			if(document.getElementById("mvlist").value.replace(/\s/g,"")==""){
    				alert("You need to add Names, URLS, and the Time to remain open into the 'Name', 'URL', and 'H','M','S' texboxes.\nAfter entering the information click 'Add Song' to submit the information.");
    				return false;
    			}
    			try{
    				var vidListName=document.getElementById("newListName").value;
    				var newVids = document.getElementById("mvlist").value;
    				var dummy = [];
    				newVids=newVids.replace(/\r/g,"");
    				newVids=newVids.split("\n");
    				var addcntr=0;
    				try{
    					for(var i=0;i<newVids.length;i++){
    						if(newVids[i]==""){continue}
    						if(newVids[i].indexOf("[\"")>-1){
    							dummy.push(eval(newVids[i]));
    							addcntr++;
    						}else{
    							if(addcntr>0){
    								rsmv.allvids.push({name:vidListName,vids:dummy});
    								mvcntr++;
    								addcntr=0;
    								dummy = [];
    							}
    							vidListName = newVids[i];
    						}
    					}
    					if(dummy!=[]){
    						rsmv.allvids.push({name:vidListName,vids:dummy});
    						mvcntr++;
    					}
    					document.getElementById("mvlist").value="";
    					document.getElementById("newListName").value="MyList"+mvcntr;
    					rsmv.init();
    					rsmvp.closeCustomize();
    				}catch(e){alert(e)};
    			}catch(e){};
    			return false;
    		}
    		document.getElementById("mvdump").onclick=function(){
    			var s = "";
    			for(var i in rsmv.allvids){
    				s+=rsmv.allvids[i].name+"\n";
    				for(var j =0;j<rsmv.allvids[i].vids.length;j++){
    					s+="[\""+rsmv.allvids[i].vids[j][0]+"\",\""+rsmv.allvids[i].vids[j][1]+"\",Time("+rsmv.allvids[i].vids[j][2]+")]\n";
    				}
    				s+="\n";
    			}
    			document.getElementById("mvlist").value=s;
    			return false;
    		}
    	}
    	function closeCustomize(){
    		if(document.getElementById("cstmvl").innerHTML==" Close"){
    			rsmvp.customizeMVList(document.getElementById("cstmvl"));
    		}
    	}
    	var rsmvflag=false;
    	function customizeMVList(n){
    		if(rsmvflag==false){
    			n.innerHTML=" Close";
    			var gc = getCoords(document.getElementById("xp_d1"));
    			document.getElementById("customMVList").style.left=gc.x+gc.width+"px";
    			document.getElementById("customMVList").style.top=(gc.y-gc.height)+"px";
    			document.getElementById("customMVList").style.display="block";
    		}else{
    			n.innerHTML=" MyList";
    			document.getElementById("mvlist").value="";
    			document.getElementById("customMVList").style.display="none";
    		}
    		rsmvflag=!rsmvflag;
    	}
    	function rsmvhelp(){
    		var s= "MusicVideo Player Help\
    			'Play Lists' lets you acces the playlists. 'Singles' is a list of all songs.\n\
    			Clicking a playlist will open the pages in the list in the order thay appear.\n\
    			The page will be closed at the end of the pages alotted time and the next page opened.\n\n\
    			Clicking a single will open the single page and leave it open.\n\n\
    			Adding Your Own Play-List: Textboxes:\n\
    			'Name' = the song/page name. You can D&D the Name from the video page.\n\n\
    			'URL' = the song/page URL found in the browsers address bar. You can D&D the address.\n\n\
    			'H' = the number of hours to keep the page open.\n\n\
    			'M' = the number of minutes to keep the page open\n\n\
    			'S' = the number of seconds to keep the page open\n\
    			For most video sites the run-time length for the video can be found on the video page.\n\n\
    			'Add Song' = click to format song information into a form that the player will understand.\n\
    			You can add as many songs to a play-list as you want\n\n\
    			'(DUMP)' = Dump the contents of the players main array so you can save it for later use.\n\
    			Copy and paste the dumped info into any text file to save for the next time.\n\
    			You can add songs back in the future by copy and pasting a set of bracketed\n\
    			informaton into the big textbox and clicking on 'Add List'.\n\n\
    			'Select All' = a helper to select all the text in the main textbox\n\n\
    			'Help' = the alert you're reading now.\n\n\
    			'Add List' = click to add the current properly formated song information located\n\
    			in the main textbox into the player.\n\
    			Scroll to the botom of the 'Play Lists' to select your new list.\n\
    			!!Only enter bracket sets into the main textbox - no titles!!.\n\n";
    		alert(s);
    	}
    	return {
    		init:function(){mvpinit()},
    		closeCustomize:function(){closeCustomize()},
    		customizeMVList:function(n){customizeMVList(n)},
    		rsmvhelp:function(){rsmvhelp()}
    	}
    })();
    Last edited by rdspoons; 09-27-2010 at 08:45 PM.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •