[RD] Music Player in Mini Profile.

[Chris]

Well if Money is in use then it would not be wise to use that...
As for Crossfury I only see one of the required patches (remove blog) but not the other (fix when click).

Since BYOMP offers some compatibility obstacles I'm thinking the social networking icons code could be used here to hold the data then replaced by the embed as before. I'll take at look and if not then a custom code would be in order.

[Alanna 🥀🖤]

I wasn't aware there was two Patches for Crossfury. I just looked right over it, fixed.

Alright, so should I remove what coding you told me to enter and just wait?

[Chris]

those codes would most likely still be needed if what I am thinking works so just hold on to them.

[Alanna 🥀🖤]

Okay, and another problem. After adding the other patch for the Crossfury I tried adding another Profile Option for Song.. all was well as it validated and said validation complete, however when trying to click the last button to confirm it that says: "Create this new option", nothing happens and the page does not change, as if the button does not work.

I just went into the Headers and Footers and added it that way instead.

[Chris]

Because the kiwi URL contains 3 replaceable parts rather than 1 the social networks code would not be able to handle it so I just penciled a custom code. If you don't want crossfury and miniprofile replace code then go ahead and remove it.

This code requires you have the Build Your Own MiniProfile code and you have placed the flash-mp3-player.net mini player somewhere in your member profile template (like you have now) so you have control over where it appears in the miniprofile as well as the color scheme..

NOTE: for reference
This player is what you have in the mini_profile_member template
<object width="200" height="30" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" type="application/x-shockwave-flash">
<param value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" name="movie">
<param value="#f9f9f9" name="bgcolor">
<param value="mp3=&bgcolor=f9f9f9&loadingcolor=bdbdbd&buttoncolor=000000&slidercolor=5d4847" name="FlashVars">
</object>

The code below uses the user's signature as a storage area for the music. when you modify profile there should be a new "Personal Song" field where you can fill in the kiwi url to your song.
If an url is fille-in by the user and saved then the code will look for the music player in that user's miniprofile and set it to the song they have chosen. this code goes below the BYOMP code

use code in reply 23 instead!
<script type="text/javascript">
<!--
(function(){ //kiwi6 mp3 in mini-profile
   var d=document,dmf=d.modifyForm,inc,mp,mpo, mpi, mpj,
   kiwiRegex1 = /http:\/\/kiwi6\:(.+?):(.+?):([^'" >]+)/i,
   kiwiRegex2 = /\[url=#kiwi6:([^:]+):([^:]+):([^:]+)?\] \[\/url\]/,
   kiwiRegex3 = /http:\/\/([^.]+)\.kiwi6\.com\/hotlink\/(.+?)\/(.+)$/
   sig= (function(){for(var a=d.getElementsByTagName('div'),b=0,c=[];b<a.length;b++)if(/user_signature/.test(a[b].className) && /kiwi6:/.test(a[b].innerHTML))c.push(a[b]); return c})()
   if(sig.length){
       for(inc=0;inc<sig.length;inc++){
           if(kiwiRegex1.test(sig[inc].innerHTML)){var bucket=RegExp.$1,randir=RegExp.$2,mp3file=RegExp.$3}else continue;
           mp = sig[inc].offsetParent;
           while(mp = mp.parentNode)
           if(mp.cellIndex && /mini_profile/.test(mp.previousSibling.className) && (mpo=mp.previousSibling.getElementsByTagName('object')) && mpo[0]){
               mpo = mpo[0].parentNode.insertBefore(document.createElement('span'),mpo[0]);
               mpo.appendChild(mpo.nextSibling);
               mpo.innerHTML = mpo.innerHTML.replace(/value="mp3=[^&"'>]*/gi, 'value="mp3='+encodeURIComponent(("http://"+bucket+".kiwi6.com/hotlink/"+randir+"/"+mp3file)));
               break;
           }
       }
   }else if(dmf && dmf.signature){
       dmf.signature.pattern = kiwiRegex2;
       var pers = dmf.personaltext.parentNode.parentNode.parentNode, song=pers.cloneNode(-1);
       song.firstChild.innerHTML = '<font size="-1">Personal Song</font>';
       song.firstChild.nextSibling.innerHTML = '<font size="-1"><input id="kiwisong" size="35" value=""></font>';
       song.lastChild.innerHTML = '<font size="-2">Enter the hotlink URL to your kiwi6.com personal song here</font>';        
       pers.parentNode.insertBefore(song, pers.nextSibling);
       d.getElementById('kiwisong').onkeyup = d.getElementById('kiwisong').onmouseup = d.getElementById('kiwisong').onchange = dmf.signature.onkeyup = dmf.signature.onchange = dmf.signature.onmouseup =
       function(){ var ks=d.getElementById('kiwisong');
       if(Math.max(0,(dmf.signature.value.length-8+ks.value.length))>400)dmf.signature.value = dmf.signature.value.substr(0,(400-(ks.value.length-8)));
       dmf.sigLength.value=Math.max(0,(400-Math.max(0,(dmf.signature.value.length-8+ks.value.length)))); //else this.onchange();
       }
       dmf.signature.value = dmf.signature.value.replace(dmf.signature.pattern,function(m,p1,p2,p3){
           document.getElementById('kiwisong').value = p1.length?"http://"+p1+".kiwi6.com/hotlink/"+p2+"/"+p3:"";
           return "";
       });
       dmf.signature.handler = function(){
           d.getElementById('kiwisong').value.replace(kiwiRegex3,function(m,p1,p2,p3){ dmf.signature.value = ("[url=#kiwi6:"+p1+":"+p2+":"+p3+"] [/url]")+ dmf.signature.value; return "";})
       }
       if(dmf.addEventListener)dmf.addEventListener('submit',dmf.signature.handler,false); else dmf.attachEvent('onsubmit',dmf.signature.handler)
   }
})()
// -->
</script>

I'll take a look back here tomorrow (or perhaps tonight) to see if you have any problems which I am sure will happen with an untested code

[Alanna 🥀🖤]

Okay, got it in there but no field appears when modifying your profile.

P.S. - But thank you so much for helping me, I appreciate this!

[Chris]

Proboards was apparently doing something to the code which I'll investigate later but for now I've modified it so recopy and try again.

You should see the following when modifying profile



You'll also notice that that new field borrows space from the user's signature for storage.

[Alanna 🥀🖤]

Okay, the field is now appearing when I modify the profile but the song is still not playing when I enter it.

[Chris]

I've modified the script to run afer everything else has run because it depends on the BYOMP code finishing its job but because it is loaded asynchronously it will probably run before BYOMP.

Updated code to support IE in reply #27

<script type="text/javascript">
<!--
var play =function(){ //kiwi6 mp3 in mini-profile
   var d=document,dmf=d.modifyForm,inc,mp,mpo, mpi, mpj,
   kiwiRegex1 = /http:\/\/kiwi6\:(.+?):(.+?):([^'" >]+)/i,
   kiwiRegex2 = /\[url=#kiwi6:([^:]+):([^:]+):([^:]+)?\] \[\/url\]/,
   kiwiRegex3 = /http:\/\/([^.]+)\.kiwi6\.com\/hotlink\/(.+?)\/(.+)$/
   sig= (function(){for(var a=d.getElementsByTagName('div'),b=0,c=[];b<a.length;b++)if(/user_signature/.test(a[b].className) && /kiwi6:/.test(a[b].innerHTML))c.push(a[b]); return c})()
   if(sig.length){
       for(inc=0;inc<sig.length;inc++){
           if(kiwiRegex1.test(sig[inc].innerHTML)){var bucket=RegExp.$1,randir=RegExp.$2,mp3file=RegExp.$3}else continue;
           mp = sig[inc].offsetParent;
           while(mp = mp.parentNode)
           if(mp.cellIndex && /mini_profile/.test(mp.previousSibling.className) && (mpo=mp.previousSibling.getElementsByTagName('object')) && mpo[0]){
               mpo = mpo[0].parentNode.insertBefore(document.createElement('span'),mpo[0]);
               mpo.appendChild(mpo.nextSibling);
               mpo.innerHTML = mpo.innerHTML.replace(/value="mp3=[^&"'>]*/gi, 'value="mp3='+encodeURIComponent(("http://"+bucket+".kiwi6.com/hotlink/"+randir+"/"+mp3file)));
               break;
           }
       }
   }else if(dmf && dmf.signature){
       dmf.signature.pattern = kiwiRegex2;
       var pers = dmf.personaltext.parentNode.parentNode.parentNode, song=pers.cloneNode(-1);
       song.firstChild.innerHTML = '<font size="-1">Personal Song</font>';
       song.firstChild.nextSibling.innerHTML = '<font size="-1"><input id="kiwisong" size="35" value=""></font>';
       song.lastChild.innerHTML = '<font size="-2">Enter the hotlink URL to your kiwi6.com personal song here</font>';        
       pers.parentNode.insertBefore(song, pers.nextSibling);
       d.getElementById('kiwisong').onkeyup = d.getElementById('kiwisong').onmouseup = d.getElementById('kiwisong').onchange = dmf.signature.onkeyup = dmf.signature.onchange = dmf.signature.onmouseup =
       function(){ var ks=d.getElementById('kiwisong');
       if(Math.max(0,(dmf.signature.value.length-8+ks.value.length))>400)dmf.signature.value = dmf.signature.value.substr(0,(400-(ks.value.length-8)));
       dmf.sigLength.value=Math.max(0,(400-Math.max(0,(dmf.signature.value.length-8+ks.value.length)))); //else this.onchange();
       }
       dmf.signature.value = dmf.signature.value.replace(dmf.signature.pattern,function(m,p1,p2,p3){
           document.getElementById('kiwisong').value = p1.length?"http://"+p1+".kiwi6.com/hotlink/"+p2+"/"+p3:"";
           return "";
       });
       dmf.signature.handler = function(){
           d.getElementById('kiwisong').value.replace(kiwiRegex3,function(m,p1,p2,p3){ dmf.signature.value = ("[url=#kiwi6:"+p1+":"+p2+":"+p3+"] [/url]")+ dmf.signature.value; return "";})
       }
       if(dmf.addEventListener)dmf.addEventListener('submit',dmf.signature.handler,false); else dmf.attachEvent('onsubmit',dmf.signature.handler)
   }
}
if(window.addEventListener)window.addEventListener('load',play,false); else window.attachEvent('onload',play)
// -->
</script>

[Alanna 🥀🖤]

It works! Thank you so much! *hugs*

I have ONE last question. Is there a possibility to expand the character limit on the signatures? Just in case the members signature and the song is over the character limit?

[Chris]

that character limit is set by Proboards at 400 and won't be changed for this version but V5 should be more generous

Internet Explorer doesn't like the code but I'll hold off on investigating why for now...

Edit:

---

here is the problem with IE (mostly a reminder to myself for later):

Feb 26, 2009 10:32:17 GMT -8 Chris said:

Another problem lies with IE "hiding" param tags from both DOM and innerHTML (in IE8 the object tag itself also seems to get this treatment) if the object tag has no classid attribute and/or an id to access it since ActiveX functionality is handled by the OS rather than the browser.
Given those two problems the solution is to rebuild the control from scratch using innerHTML or a document.write to force re-instantiation and since param tags are stripped from innerHTML by IE we can use the data attribute of the object tag to get IE to pass the changes to the activex control and just leave out param tags altogether

[Alanna 🥀🖤]

Question about v5, when it is out, will all sites that are already made on the current version of PB have to create a completely new site and start over in order to have v5?

About IE, I'm not worried about it, no one on the site uses it and most of the codes that we use don't work on IE and we can't get them too.

[Chris]

V5 is getting ready to enter the last testing phase before general release. Once that phase is complete all forums will be given a three month period in which to try it out, after that 3 month period if not upgraded yet then the forum will be automatically upgraded. If you have further questions there is a category on the main page dedicated to answering V5 questions.

As for IE although many nowadays are openly being haters and simply ignoring it I know that none of the other browser would even be competitive if they hadn't emulated and sometimes downright stole features and ideas from IE. Things that are being touted as "shiny and new feature" in todays browsers were already features in IE5 and 6 back in the 90's so I'll show my respect.

Edit:

---

I've modified the code once again to add support for Internet Explorer

<script type="text/javascript">
<!--
var play =function(){ //kiwi6 mp3 in mini-profile w/ IE support
var d=document,dmf=d.modifyForm,inc,mp,mpo, mpi, mpj,
kiwiRegex1 = /http:\/\/kiwi6\:(.+?):(.+?):([^'" >]+)/i,
kiwiRegex2 = /\[url=#kiwi6:([^:]+):([^:]+):([^:]+)?\] \[\/url\]/,
kiwiRegex3 = /http:\/\/([^.]+)\.kiwi6\.com\/hotlink\/(.+?)\/(.+)$/
sig= (function(){for(var a=d.getElementsByTagName('div'),b=0,c=[];b<a.length;b++)if(/user_signature/.test(a[b].className) && /kiwi6:/.test(a[b].innerHTML))c.push(a[b]); return c})()
if(sig.length){
for(inc=0;inc<sig.length;inc++){
if(kiwiRegex1.test(sig[inc].innerHTML)){var bucket=RegExp.$1,randir=RegExp.$2,mp3file=RegExp.$3}else continue;
mp = sig[inc].offsetParent;
while(mp = mp.parentNode)
if(mp.cellIndex && /mini_profile/.test(mp.previousSibling.className) && (mpo=mp.previousSibling.getElementsByTagName('object')) && mpo[0]){
mpo = mpo[0].parentNode.insertBefore(document.createElement('div'),mpo[0]);
mpo.id="profile_player"; mpo.appendChild(mpo.nextSibling);
if((/<object/i.test(mpo.innerHTML) && !/<param/i.test(mpo.innerHTML)) || mpo.lastChild.altHtml){ //For IE
mp= '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+mpo.lastChild.width+'" height="'+mpo.lastChild.height+'" type="'+ mpo.lastChild.type+ '" data="'+ (mpo.lastChild.movie + "?" + mpo.lastChild.flashvars)+ '" id="player_'+(+new Date)+'">'
for(mpi=mpo.lastChild.getElementsByTagName('param'),mpj=0;mpj<mpi.length;mpj++) mp += mpi[mpj].outerHTML
mp += '<span>profile player error!</span></object>'
mpo.innerHTML = mp.replace(/([?"'=&])mp3=[^&"'>]*/gi, '$1mp3='+encodeURIComponent(("http://"+bucket+".kiwi6.com/hotlink/"+randir+"/"+mp3file)));
}else
mpo.innerHTML = mpo.innerHTML.replace(/"mp3=[^&"'>]*/gi, '"mp3='+encodeURIComponent(("http://"+bucket+".kiwi6.com/hotlink/"+randir+"/"+mp3file)));
break;
}
}
}else if(dmf && dmf.signature){
dmf.signature.pattern = kiwiRegex2;
var pers = dmf.personaltext.parentNode.parentNode.parentNode, song=pers.cloneNode(-1);
song.firstChild.innerHTML = '<font size="-1">Personal Song</font>';
song.firstChild.nextSibling.innerHTML = '<font size="-1"><input id="kiwisong" size="35" value=""></font>';
song.lastChild.innerHTML = '<font size="-2">Enter the hotlink URL to your kiwi6.com personal song here</font>';
pers.parentNode.insertBefore(song, pers.nextSibling);
d.getElementById('kiwisong').onkeyup = d.getElementById('kiwisong').onmouseup = d.getElementById('kiwisong').onchange = dmf.signature.onkeyup = dmf.signature.onchange = dmf.signature.onmouseup =
function(){ var ks=d.getElementById('kiwisong');
if(Math.max(0,(dmf.signature.value.length-8+ks.value.length))>400)dmf.signature.value = dmf.signature.value.substr(0,(400-(ks.value.length-8)));
dmf.sigLength.value=Math.max(0,(400-Math.max(0,(dmf.signature.value.length-8+ks.value.length)))); //else this.onchange();
}
dmf.signature.value = dmf.signature.value.replace(dmf.signature.pattern,function(m,p1,p2,p3){
document.getElementById('kiwisong').value = p1.length?"http://"+p1+".kiwi6.com/hotlink/"+p2+"/"+p3:"";
return "";
});
dmf.signature.handler = function(){
d.getElementById('kiwisong').value.replace(kiwiRegex3,function(m,p1,p2,p3){ dmf.signature.value = ("[url=#kiwi6:"+p1+":"+p2+":"+p3+"] [/url]")+ dmf.signature.value; return "";})
}
if(dmf.addEventListener)dmf.addEventListener('submit',dmf.signature.handler,false); else dmf.attachEvent('onsubmit',dmf.signature.handler)
}
}
if(window.addEventListener)window.addEventListener('load',play,false); else window.attachEvent('onload',play)
// -->
</script>