Topic: Prevent block from being reloaded always

[Black Tiger]

I was hoping for a radio mod which I also had on my previous forum, but that is not made for SMF 2.x so I used this code in a custom html block:
http://www.simplemachines.org/community/index.php?topic=496693.0

Now the radio stations are working, until you visit another thread or another part of the forum. So in fact, when the page is reloaded, the block is reloaded too and you have to start over again selecting your radio.

Is there a way to prevent this so the radio will keep on working as long as you are visiting the forums, also when going to another thread?

I also asked this at the SMF thread mentioned above, but since that's not supported anymore and last post was from 2 years ago, I thought I might have more luck over here.

[Chen Zhen]

Most likely you have two options although I will have to see the code to determine the most suitable method.

(1) If it is possible to record the appropriate data for the $_SESSION one could reload the same settings when navigating to other pages.

(2) Failing the above you can use a popup which does not close while you navigate the forum or web.

[Black Tiger]

Wow that's a quick answer, great.

The code is in the link I posted, but I will post it here for you:

Code: [Select]

<DIV align="center" style="color:#435BB3;"><P align=center>Radio</P></DIV>
<DIV align="center" style="color:#fff;">
<P align=center><SELECT onchange=PlayIt(this.value) name=player>
<OPTION value="#">= Select Channel =</OPTION>
<OPTION value="link here.asx">1. music1</OPTION>
<OPTION value="link here.asx">2. msuic2</OPTION>
<OPTION value="link here.asx">3. music3</OPTION>
</SELECT>&nbsp; <SPAN style="FONT-WEIGHT: bold"></SPAN></P></DIV>
<DIV id=music style="TEXT-ALIGN: center">
<P>
<OBJECT id=MediaPlayer2 codeBase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab# Version=5,1,52,701" type=application/x-oleobject height=200 standby="Loading Microsoft Windows® Media Player components..." width=300 classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95>
<EMBED height="200" width="300" showstatusbar="1" url="" uimode="full" showcontrols="true" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" type="application/x-mplayer2" loop="False" autostart="True"></EMBED></OBJECT></P></DIV>
<DIV style="TEXT-ALIGN: center">&nbsp;</DIV>
<DIV style="TEXT-ALIGN: center"></DIV>
<P style="TEXT-ALIGN: center">
<SCRIPT type=text/javascript>
function PlayIt(what){
document.getElementById('music'). innerHTML='<object width="300" height="200" '
      +'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" '
      +'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
      +'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
      +'<param name="url" value="'+what+'">'
      +'<param name="uiMode" value="full">'
      +'<param name="autoStart" value="true">'
      +'<param name="loop" value="false">'
      +'<embed type="application/x-mplayer2" '
      +'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
      +'showcontrols="true" uimode="full" width="300" height="200" '
      +'src="'+what+'" autostart="1" loop="False">'
+'</OBJECT>'; }
</SCRIPT>
</P>
1.) I'm not into coding so I wouldn't know where and how to place a $_Session or something like that.

2.) I would prefer option 1, because nowadays a lot of people are using popup killers. But if another methode is not possible, then this would be a solution too if you could tell me how to implement it.

[Chen Zhen]

Actually I should have said a cookie not a session for javascript.

Use this in a PHP block:

Code: [Select]

echo '
<div style="color: #435BB3;">
<p class="centertext">Radio</p>
</div>
<div style="color: #FFF;">
<p class="centertext">
<select id="radioPlayer" onchange="radioPlayit()" name="radioPlayer">
<option value="#">&nbsp;&nbsp;&#060;&#060; Select Channel &#062;&#062;&nbsp;&nbsp;</option>
<option value="http://www.wqxr.org/stream/wqxr/windows.asx">Classical</option>
<option value="https://www.internet-radio.com/servers/tools/playlistgenerator/?u=http://uplink.duplexfx.com:8054/listen.pls&t=.m3u">Hip Hop</option>
<option value="http://s9.viastreaming.net:7160/listen.pls">Mixed</option>
</select>&nbsp;&nbsp;
<span style="font-weight: bold;"></span>
</p>
</div>
<div id="radioMusic" class="centertext">
<p>
<object id="mediaplayer2" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" type="application/x-oleobject" height="200" standby="loading microsoft windowsã‚â® media player components..." width="300" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
<embed height="200" width="300" showstatusbar="1" url="" uimode="full" showcontrols="true" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" type="application/x-mplayer2" loop="false" autostart="true"></embed>
</object>
</p>
</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<script type="text/javascript">
function radioPlayit(){
var myRadioOption = document.getElementById("radioPlayer").value;
radioWriteCookie("myCurrentRadioStation",document.getElementById("radioPlayer").selectedIndex,1);
document.getElementById("radioMusic").innerHTML=\'<p><object width="300" height="200" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" standby="Loading Microsoft Windows Media Player Components..." type="application/x-oleobject"><param name="url" value="\'+myRadioOption+\'"><param name="uimode" value="full"><param name="autostart" value="true"><param name="loop" value="false"><embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showcontrols="true" uimode="full" width="300" height="200" src="\'+myRadioOption+\'" autostart="1" loop="false"></object></p>\';
}
function radioWriteCookie(radioName,radioValue,radioDays) {
var radioDate, radioExpires;
if (radioDays) {
radioDate = new Date();
radioDate.setTime(radioDate.getTime()+(radioDays*24*60*60*1000));
radioExpires = "; expires=" + radioDate.toGMTString();
            }
else
radioExpires = "";

document.cookie = radioName + "=" + radioValue + radioExpires + "; path=/";
}
function radioReadCookie(radioName) {
var i, c, radioCa, radioNameEQ = radioName + "=";
radioCa = document.cookie.split(";");
for(i=0;i < radioCa.length;i++) {
c = radioCa[i];
while (c.charAt(0)==" ")
c = c.substring(1,c.length);

if (c.indexOf(radioNameEQ) == 0)
return c.substring(radioNameEQ.length,c.length);
}

return 0;
}
window.onload = function() {
var radioStation = radioReadCookie("myCurrentRadioStation");
document.getElementById("radioPlayer").selectedIndex = radioStation != 0 ? radioStation : 0;
document.getElementById("radioPlayer").onchange();
};
</script>';

.. change/add the radio stations in the options.
I'm not sure if this passes validation.. I don't think object/embed does pass but it will work.
If I find another solution that passes W3C validation I will post it in this thread.


Notes:
BTW - The user's cookies have to be enabled within their browser for this to work as you requested.
With this example I created a cookie lasting 1 day each time they change the station.
localStorage can also be used which is just a cookie without a time limit.

It is possible to create a form (onchange = submit form) and use a http request to set a server side $_SESSION variable with the opted value.
This would allow it to work without using a cookie but then either the whole page will reset when a new station is opted else use an iframe to set it.


Assuming your user's cookies are enabled, the above example is a lot simpler and provides a daily time limit on the setting.

Regards.

[Black Tiger]

That's great, thank you very much. I will try this solution later today. Very happy with it!

I also read a lot of stations now indeed use a new window for the radio station.
Is that what you mean with a popup window? If yes, that also might be a solution, maybe that is even easier to make.
And I just thought of the fact that it would be nice if users would disable their popup killers on my forums.

Is it possible you explain me how I have to make it that it will start in a new window? That way I can test both solutions.
Maybe with a possibility to display a nice picture of a radio or something if possible.

[Black Tiger]

Hello Chen.

I just tested it. Seems your code also can use m3u and pls files and not only .asx file. So that part is great!

It also keeps the radio playing more or less, but it does not work very smoothly. When changing a topic or going to another thread or another part of the forum, the music will stop for a few seconds until the page is fully loaded again.
After that it starts playing again.

Is there a possibility to make it so (if necessary via an extra little screen) so the music will keep on playing without interrupt when another page is visited?

[Chen Zhen]

Try this in a PHP block:

Code: [Select]

// displayed language
$language = array(
'page_title' => 'RADIO',
'stop' => array('Close Radio Window', 'STOP'),
'play' => array('Open Radio Window', 'PLAY'),
'selection' => '  << Select Channel >>  ',
);

// available stations (video or audio) and their accessible links
$media = array(
'Classical' => 'http://www.wqxr.org/stream/wqxr/windows.asx',
'Hip Hop' => 'https://www.internet-radio.com/servers/tools/playlistgenerator/?u=http://uplink.duplexfx.com:8054/listen.pls&t=.m3u',
'Mixed' => 'http://s9.viastreaming.net:7160/listen.pls',
);


// main code below...
global $settings, $scripturl;

echo '
<div style="color: #435BB3;" class="centertext">
<span style="text-align: left;"><a href="#" onclick="radioClosePopup();radioResetPopup()" title="', $language['stop'][0], '">', $language['stop'][1], '</a></span>
<span style="padding: 0px 8px 0px 8px;">&nbsp;</span>
<span style="text-align: right;"><a href="#" onclick="radioFocusPopup()" title="', $language['play'][0], '">', $language['play'][1], '</a></span>
</div>
<div style="color: #FFF;">
<p class="centertext">
<select id="radioPlayer" onchange="radioClosePopup();radioPlayit();radioPopup()" name="radioPlayer">
<option value="#">', $language['selection'], '</option>';
foreach ($media as $name => $link)
echo '
<option value="', $link, '">', $name, '</option>';

echo '
</select>&nbsp;&nbsp;
<span style="font-weight: bold;"></span>
</p>
</div>
<div id="myRadioPopup" style="display: none;">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index.css?fin20" />
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/script.js?fin20"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?fin20"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Radio Player" />
<title>', $language['page_title'], '</title>
<script type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "', $settings['theme_url'], '";
var smf_default_theme_url = "', $settings['default_theme_url'], '";
var smf_images_url = "', $settings['theme_url'], '/images";
var smf_scripturl = "', $scripturl, '";
var smf_iso_case_folding = false;
var smf_charset = "UTF-8";
var ajax_notification_text = "Loading...";
var ajax_notification_cancel_text = "Cancel";
function radio_resize()
{
var innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var targetWidth = 300;
var targetHeight = 200;
var targetX = 0;
var targetY = 0;
targetX = targetX == -1 ? (screen.width / 2)-(targetWidth/2) : targetX;
targetY = targetY == -1 ? (screen.width / 2)-(targetWidth/2) : targetY;
window.resizeBy(targetWidth-innerWidth, targetHeight-innerHeight);
window.moveTo(targetX,targetY);
window.top.focus;
}
function radio_fitPlayer()
{
if(navigator.userAgent.toLowerCase().indexOf("chrome") > -1)
var t = setTimeout("radio_resize()", 200);
else
radio_resize();
};
// ]]></script>
</head>
<body onload="radio_fitPlayer();" topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
<div id="radioMusic" class="centertext" style="position: fixed; top:0; left: 0;margin-top: -10px;padding: 0;">
<p id="radioPar">
<object id="mediaplayer2" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" type="application/x-oleobject" height="200" standby="loading microsoft windowsã‚â® media player components..." width="300" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
<embed height="200" width="300" showstatusbar="1" url="" uimode="full" showcontrols="true" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" type="application/x-mplayer2" loop="false" autostart="true"></embed>
</object>
</p>
</div>
</body>
</html>
</div>
<div>&nbsp;</div>
<script type="text/javascript">
var my_radio, radioStation;
var childWindowHandles = new Array();
var radioStation = localStorage.getItem("playRadioStation");
function radioPlayit() {
if (radioStation == 0)
{
var myRadioOption = document.getElementById("radioPlayer").value;
localStorage.setItem("myCurrentRadioStation",document.getElementById("radioPlayer").selectedIndex);
document.getElementById("radioMusic").innerHTML=\'<p><object id="radioPlayerX" width="300" height="200" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" standby="Loading Microsoft Windows Media Player Components..." type="application/x-oleobject"><param name="url" value="\'+myRadioOption+\'" /><param name="uimode" value="full" /><param name="autostart" value="true" /><param name="loop" value="false" /><param name="bgcolor" value="#000000"><embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showcontrols="true" uimode="full" width="300" height="200" src="\'+myRadioOption+\'" autostart="1" loop="false" bgcolor="#000000"></embed></object></p>\';
}
}
function radioPopup() {
radioStation = parseInt(localStorage.getItem("playRadioStation")) + 1;
localStorage.setItem("playRadioStation",radioStation);
if (radioStation == 1)
{
my_radio = window.open("", "myRadioWindow", "status=1,width=300,height=200,top=0,left=0");
my_radio.focus();
my_radio.document.write(document.getElementById("myRadioPopup").innerHTML);
my_radio.moveTo(0, 0);
}
}
function radioClosePopup() {
if (my_radio != null)
my_radio.close();
else
{
my_radio = window.open("", "myRadioWindow", "status=1,width=300,height=200,top=0,left=0");
my_radio.focus();
my_radio.document.write("");
my_radio.moveTo(0, 0);
my_radio.close();
}

localStorage.setItem("playRadioStation",0);
radioStation = 0;
}
function radioResetPopup() {
localStorage.setItem("myCurrentRadioStation", 0);
document.getElementById("radioPlayer").selectedIndex = 0;
}
function radioFocusPopup() {
if (parseInt(document.getElementById("radioPlayer").selectedIndex) != 0)
document.getElementById("radioPlayer").onchange();

}
window.onload = function() {
var radioStation = localStorage.getItem("playRadioStation") != null ? parseInt(localStorage.getItem("playRadioStation")) : 0;
localStorage.setItem("playRadioStation",radioStation);
var currentRadioStation = localStorage.getItem("myCurrentRadioStation") != null ? parseInt(localStorage.getItem("myCurrentRadioStation")) : 0;
document.getElementById("radioPlayer").selectedIndex = currentRadioStation != 0 ? currentRadioStation : 0;
if (radioStation == 0)
document.getElementById("radioPlayer").onchange();
};
</script>';


The above uses the code you referenced of object/embed which is obsolete.
If you want today's mobile users to use that option I do not think it will work since most do not support flash objects.

Modern browsers are HTML5 compliant which include some audio & video tags for playing media.
ref. http://www.w3schools.com/HTML/html5_video.asp & http://www.w3schools.com/HTML/html5_audio.asp

One could change the html being inserted into the popup container to the more modern tags and possibly add another dimension to the $media array (video/audio).
The popup is already set as HTML5 (which I opted).

Regards.
 
Edit -> Added STOP & PLAY buttons

[Black Tiger]

Oh wow that's a lot of code. Thank you very much.

We don't have any mobile users which will be making use of the radio though, but the code is sure cool.
I'm going to use that, because html5 is better, thanks again!

[Black Tiger]

Just a little question.
Is this easy to recode so only 1 little popup screen will open?
I made a php file out of the code by putting php tags in the beginning and end and called it radio.php.
This way I can link to it from within a navigation block on my forum.

However, when doing this, I first get a little block with a totally white screen with radio and select radio in it. And after selecting a radio, a second little block with the player opens.
But also if you go back to "select station" it will open that new block.

I would like to have only one block from which radio will play when selecting a station, in the same block. All centered if possible. I've got that in html at the moment, but html5 would be far better, correct?
And since you already have written this code, maybe it's a small change?

It seems the stylesheet code with themes etc. does not do anything, should that be the case?

[Chen Zhen]

The code was designed to work out of a PHP block/module and requires no php file.
Why not just make your navigation block include the radio button as a drop down & then use the code I just supplied you?

[♦ Ninja ZX-10RR ♦]

Just a quick congrats for so much code to Chen Zhen. /leaves

[Black Tiger]

Yep I agree, some great coding!

Why not just make your navigation block include the radio button as a drop down & then use the code I just supplied you?

I thought of that and had a look at it that way, but I already got a lot of blocks and a pulldown... well... it takes a lot of place and does not fit in graphically.
Next to that, more important, there is the issue that my users need to keep my forum and the popup open. If they need to change radio station, you must have to forum open because you can only change radio station in the drop down.

The radio is some fun thing for my users. With a popup like I described, they can close my forums, look at other websites and forums and still listen to the radio and even change stations with only a little window.
I had it like that on vbulletin too and they really like the fact that they could close everything except that little window.

I really don't want to sound ungrateful and I want to apologize if I would have given that impression, because I'm real happy and thankful with the code and effort you made.
I made a mistake myself thinking that it could be done without a popup in the beginning, sorry.

[Chen Zhen]

Someone may want to use the radio in the fashion of the last block code I posted so it can be useful I suppose.
You will have to wait until I have time to work on what you requested.
This is more or less a mod request though as the only thing possibly accessing it via a block is a link.

[Black Tiger]

Your code is very useful for sure, it's great I'm already thinking to use it on another website of me anyway. And I'll point to it if somebody else asks.
I'm already very happy that you consider to make the change for me, that's great.

If you do, please add some code in so you get the credits for it and maybe point to your website or something!