Now Playing Application

PTV Now Playing Bar

Hello Again!!

Check out the new and revamped now playing bar on the left hand side of the PTV website.  It took me a couple days, but I finally finished coding it to perfection.  I thought I would go with a much simpler and clean look.  Thank you Grace for helping with how it should look!  Last year we had the now playing bar only on the home page.  It was big and took away from space we could use for news.

I coded it in JavaScript and used a little bit of HTML and CSS to make it look pretty.  Here is a little sample of my code I use to get this bad boy to work:

var currentTime = new Date();
    var day = currentTime.getDay();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    var i;


for(i=0;i<data.length;i++) {
if ((day==data[i][0])&&(hours==data[i][1])&&(minutes>=data[i][2])&&(minutes<=data[i][3]))
  {
        document.write(data[i][4] .link(data[i][6]));       
  }
}

The code above is only used for the text and link in the now playing box.  For the images I had to create a separate JavaScript file containing all the same data, but the function to execute the data is strictly for the images: [document.write("<img height='100' src='"+data[i][5]+"'>");].

In each of the files there is an array that I call data that contains every show that is on every day. Example:

//THURSDAY

//LIVE SHOWS
[thursday,21,0,59,"News Flash with Michael Latin", "http://ptv69.com/themes/ptvtheme/images/shows/news.png", "http://ptv69.com/index.php/shows/news-flash-with-michael-latin"], //9-10
[thursday,22,30,59,"Show and Tell", "http://ptv69.com/themes/ptvtheme/images/shows/showandtellicon.png", "http://ptv69.com/index.php/shows/show-and-tell"], //10-10:30
[thursday,23,0,59,"Whalehammer", "http://ptv69.com/themes/ptvtheme/images/shows/whale.jpg", "http://ptv69.com/index.php/shows/whalehammer"], //11-12

So essentially there are four files I use to make the entire thing work and look good.  There are two .js files (these are the JavaScript files), the HTML page that calls for the .js.  The code that places the .js where we want on the page is:

<script type="text/javascript" src="<?=$this->getThemePath()?>/schedule_images.js">

Now you may notice a snippet of the code that reads: <?=$this->getThemePath()?>.  Since my application is being used on the Concrete5 CMS system we need to let the program know that in order to find the JavaScript files it must start by searching within my custom theme I created as opposed to the base public_html.

The last thing I did was style it using CSS.  I can not take full credit for the JavaScript of this beautiful application however.  I received a lot of help from one of my new media professors Jeanine Meyer.  She is absolutely amazing and an exceptional coder :).

Well I think that is all for now.  Check out the now playing application on PTV69.com, so that you can always stay up to date on what's going on.  Also a little thing to look forward to is live streaming.  Soon I will be in charge of setting up the live streaming for live shows over the web.  Now everyone can watch their favorite PTV shows no matter where they are in the world!!

Tweet