3 min read

A simple landing page for stuff I run in Reclaim Cloud

I haven’t revisited it in a while, but one of my favorite little projects I dug into at the beginning of the pandemic was making my own little radio station using Azuracast. I need to get back to that, but one of the things on my checklist was to make a small improvement to the landing page for it, radio.jadin.me.

The look of the landing page I was already pretty satisfied with, it’s just an HTML5UP template that I customized and slapped the embedded player from azuracast on, but I wanted the page to automatically show that the stream was offline when I have Azurcast stopped in Reclaim Cloud to save money. I was doing this manually by just commenting out bits of the HTML that included the player whenever I would shut the station down, but I knew there were better ways to do this. I just didn’t have the time to investigate.

Why bother with this at all? Well, if I left the page the same when the Azurcast instance I had in Reclaim Cloud was shut down, the page would look like this:

radio.jadin.me landing page with an error box in the middle

Nothing wrong with that I suppose, but I would prefer a nicer looking page:

radio.jadin.me landing page with a nice “stream offline” message

People who know anything about PHP will probably find this obvious, but the solution for me (credit to Tim Clarke for suggesting I look into this like a year ago!) was to make a simple page that uses PHP to check if Azuracast was available, then display different content based on that. There are a lot of simple ways to do this, but I just made two pages, online.html and offline.html, that look how I want them to look when the station is available or not. Then with a little bit of research, I put together an index.php that just returns the appropriate version of the page if the Reclaim Cloud environment is online. Basically, I just put the url to the environment in the $url variable, and if that returns an HTTP response status code of 200 (which means things are working), it will load online.html. If it receives something different, it loads offline.html instead. You can see the script below:

index.php

<?php
$url = 'https://radiosrv.us.reclaim.cloud/public/radio.jadin.me/embed';
$online = 'HTTP/1.1 200 OK'
$headers = @get_headers($url);
if(!$headers || $headers[0] == $online) {
    // Hey we are online
    readfile("online.html");
}
else {
    // Offline
    readfile("offline.html");
    // Uncomment the following line to see what the status currently is
    // echo($headers[0]);
}
?>

You can also see on the third to last line that I made a section that will actually put the current HTTP status code at the bottom of the page (if you uncomment that line). This is in case whatever application you are running returns something other than 200, like 302 (which would be a redirect). If the $online variable doesn’t match what code your application returns when it is running this whole setup won’t work. If that is the case you would delete the two slashes at the beginning of the line, load the web page, and it will show you that code:

radio.jadin.me with an http status code at the bottom of the page

Then you would simply change the $online variable in index.php to that error code it gave you.

So with that done, I threw index.php, online.html, and offline.html on my subdomain using my FTP client and I was ready to go! Now when I start my radio station in Reclaim Cloud, my radio.jadin.me landing page automatically shows that the station is online!

I think this simple method has a lot of potential. I could see having a landing page that checks to see if a Reclaim Cloud environment is spun up, and if it is, take you there with a redirect. If it’s not spun up, it could do a lot of things. Maybe the page tells you to contact the owner of that account, or maybe even spin the environment up automatically via thhe Jelastic API? (possibly after entering a password). I’ll have to keep exploring this 😀