Frontend Widgets
Total Page:16
File Type:pdf, Size:1020Kb
Frontend Widgets Ancient Documentation Warning This documentation is out-of-date and we do not recommend following this approach. Contents: Widget Installation The Three Widgets Current/Next show widget Upcoming shows widget Weekly shows widget How to Push Widget Data from Airtime to Your Public Website Airtime Server Public Web Site Server 3rd Party Widgets Widget Installation Using the widgets is very simple. 1) In the Airtime admin interface, login as an administrator, go to the "Preferences" page, and enable the option "Allow Remote Websites To Access 'Schedule' Info?". 2) Get the widgets from the "widgets" directory in the tarball. (Download the latest from here) 3) Put that directory on your webserver and name it "airtime-widgets". 4) In order to avoid conflicts with other javascript libraries, it is best to put the widgets in an iframe: <iframe src="/airtime-widgets/airtime-iframe.html" width="300px" height="250px" marginheight="0" marginwidth=" 0" scrolling="no" frameborder="0"> </iframe> "airtime-iframe.html" contains: <link rel="stylesheet" href="/airtime-widgets/css/airtime-widgets.css" type="text/css" /> <script src="/airtime-widgets/js/jquery-1.6.1.min.js" type="text/javascript"></script> <script src="/airtime-widgets/js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script> <script src="/airtime-widgets/js/jquery.showinfo.js" type="text/javascript"></script> <script> $(document).ready(function() { $("#headerLiveHolder").airtimeLiveInfo({ sourceDomain: "http://airtime-dev.sourcefabric.org/", text: {onAirNow:"On Air Now", offline:"Offline", current:"Current", next:"Next"}, updatePeriod: 20 //seconds }); }); </script> <div id="headerLiveHolder" style="border: 1px solid #999999; padding: 10px;"></div> <script> $(document).ready(function() { $("#onAirToday").airtimeShowSchedule({ sourceDomain: "http://airtime-dev.sourcefabric.org/", text: {onAirToday:"On air today"}, updatePeriod: 5 //seconds }); }); </script> <div id="onAirToday" style="margin-top: 10px"></div> You can tweak the above using the guides below for each widget. 5) In order to test the widgets, make sure you have some shows scheduled for the next 24 hours. The widgets should now be displaying data properly. The Three Widgets Current/Next show widget A very small widget that displays information about the current show (show time elapsed, show time remaining), as well as some information about the next show (start time, end time). The widget can be used as follows: <script> $(document).ready(function() { $("#headerLiveHolder").airtimeLiveInfo({ sourceDomain: "http://airtime-dev.sourcefabric.org/", text: {onAirNow:"On Air Now", offline:"Offline", current:"Current", next:"Next"}, updatePeriod: 20 //seconds }); }); </script> <div id="headerLiveHolder" style="border: 1px solid #999999; padding: 10px;"></div> If you do not see anything displayed, it may mean that the widget is unable to connect to the server you specified. Upcoming shows widget A medium sized widget the displays the upcoming show schedule for that day. Usage: <script> $(document).ready(function() { $("#onAirToday").airtimeShowSchedule({ sourceDomain: "http://airtime-dev.sourcefabric.org/", text: {onAirToday:"On air today"}, updatePeriod: 5 //seconds }); }); </script> <div id="onAirToday"></div> Weekly shows widget A large sized widget that lets you browse through the show schedule for that week. Usage: <script> $(document).ready(function() { $("#scheduleTabs").airtimeWeekSchedule({ sourceDomain:"http://airtime-dev.sourcefabric.org/", dowText:{monday:"Lundi", tuesday:"Mardi", wednesday:"Mercredi", thursday:"Jeudi", friday:" Vendredi", saturday:"Samedi", sunday:"Dimanche"}, miscText:{time:"Temps", programName:"Nom du Programme", details:"Détails", readMore:"Lire La Suite"}, updatePeriod: 600 //seconds }); var d = new Date().getDay(); $('#scheduleTabs').tabs({selected: d === 0 ? 6 : d-1, fx: { opacity: 'toggle' }}); }); </script> <div id="scheduleTabs" class="ui-tabs"></div> How to Push Widget Data from Airtime to Your Public Website This may be needed if the Airtime server is hidden behind a firewall on an internal network. It may also be used to protect the Airtime server from large numbers of direct hits from the public to the schedule api. Airtime Server 1. Create script to export the widget data: sudo vi /opt/airtime/export-widget-data.sh File content: #!/bin/sh curl -s "http://localhost/api/live-info/type/endofday?callback=***" > /tmp/airtime-live-info curl -s "http://localhost/api/week-info?callback=***" > /tmp/airtime-week-info Set perms on the script: sudo chmod 755 /opt/airtime/export-widget-data.sh 2. Set the export script to run each minute: sudo vi /etc/cron.d/airtime-widgets-generate-data File content: * * * * * root /opt/airtime/export-widget-data.sh 3. Create the file to upload widget data to public site: sudo vi /opt/airtime/upload-widget-data.sh File content: !/bin/bash HOST='PUBLIC_WEB_SERVER' USER='PUT_USERNAME_HERE' PASSWD='PUT_PASSWORD_HERE' ftp -n -v $HOST << EOT user $USER $PASSWD ascii prompt put /tmp/airtime-week-info put /tmp/airtime-live-info bye EOT Set permissions for the file: sudo chmod 755 /opt/airtime/upload-widget-data.sh 4. Upload widget data to public site once per minute: sudo vi /etc/cron.d/airtime-widgets-upload File content: * * * * * root /opt/airtime/upload-widget-data.sh 5. Restart cron so that it can see your new cron entries: sudo service cron restart Public Web Site Server 1. Create on public site root the folders api/live-info and api/week-info (they MUST be named exactly as shown). 2. Create index.php file in api/live-info folder: <?php $filename = '/tmp/airtime-live-info'; // define here the path and name of uploaded live-info file header('Content-Type: text/javascript'); header("Expires: Thu, 01 Jan 1970 00:00:00 GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); $callback = empty($_GET['callback']) ? null : $_GET['callback']; $content = file_get_contents($filename); $content = str_replace('***', $callback, $content); echo $content; ?> 3. Create index.php file in api/week-info folder: <?php $filename = '/tmp/airtime-week-info'; // define here the path and name of uploaded week-info file header('Content-Type: text/javascript'); header("Expires: Thu, 01 Jan 1970 00:00:00 GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); $callback = empty($_GET['callback']) ? null : $_GET['callback']; $content = file_get_contents($filename); $content = str_replace('***', $callback, $content); echo $content; ?> 4. Set up widgets to work with public site ... sourceDomain: public_site_address ... 3rd Party Widgets This widget will show what is currently playing on an Icecast server: http://blog.codingexpert.de/?p=66.