MainRadiotalkCustom
Общие вопросы по интернет радио вещанию
6   •   Посмотреть все темы

Экспорт расписания AirTime

 

727
Leff27 @Leff27
Всем привет. Небольшой мануал на русском "как экспортировать расписание AirTime на сайт".

Нам понадобится:
- Сервер с AirTime 2.2
- Прямые руки
- Хостинг для сайта

Первым делом закачаем в папку airtime в корне домена сайта(куда будем выводить) четыре файла:
1. Последнюю min-версию jquery ********** (на данный момент ********** )
2. файл jquery-ui-1.8.10.custom.min.js из папки /usr/share/doc/airtime/examples/widgets на сервере с airtime(или отсюда ********** )
3. Файл jquery.showinfo.js из папки /usr/share/doc/airtime/examples/widgets/js на сервере с airtime(или отсюда ********** )
4. Файл стилей(можно использовать свой) airtime-widgets.css из папки /usr/share/doc/airtime/examples/widgets/css на сервере с airtime(или отсюда ********** )

В итоге путь до наших файлов должен быть следующим:
**********

Теперь самое интересное. AirTime предлагает вывести нам несколько видов расписания:
a) Текущую и следующую программу
б) Расписание на текущий день, за исключением уже прошедших и текущего шоу
в) Вывод расписания на неделю

За вывод отвечают два api-файла AirTime:
На сегодня: **********
На неделю: **********

Создадим в корне домена файл index.html и подключим к нему *.js и *.css из папки airtime

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/airtime/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/airtime/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script src="/airtime/jquery.showinfo.js" type="text/javascript"></script>
<link href="/airtime/airtime-widgets.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>


Теперь нам нужно вывести расписание. Для этого добавляем перед </head> код:

<script>
$(document).ready(function() {
$("#headerLiveHolder").airtimeLiveInfo({
sourceDomain: "http://localhost", // Домен сервера с AirTime
text: {onAirNow:"On Air Now", offline:"Offline", current:"Current", next:"Next"},
updatePeriod: 20 // Период обновления в секундах
});
$("#onAirToday").airtimeShowSchedule({
sourceDomain: "http://localhost", // Домен сервера с AirTime
text: {onAirToday:"On air today"},
updatePeriod: 5, // Период обновления в секундах
showLimit: 10 // Лимит Шоу
});
$("#scheduleTabs").airtimeWeekSchedule({
sourceDomain:"http://localhost", // Домен сервера с AirTime
dowText:{monday:"Monday", tuesday:"Tuesday", wednesday:"Wednesday", thursday:"Thursday", friday:"Friday", saturday:"Saturday", sunday:"Sunday"},
miscText:{time:"Time", programName:"Program Name", details:"Details", readMore:"Read More"},
updatePeriod: 600 // Период обновления в секундах
});
var d = new Date().getDay();
$('#scheduleTabs').tabs({selected: d === 0 ? 6 : d-1, fx: { opacity: 'toggle' }});

});
</script>


И перед </body>

<h1>"Текущая программа и следующая"</h1>
Что играет сейчас и будет далее:
<br/>
<br/>
<div id="headerLiveHolder" style="border: 1px solid #999999; padding: 10px;"></div>
<br/>
<br/>
<h1>"Расписание на сегодня"</h1>
Показываем, что будет играть сегодня:
<br/>
<br/>
<div id="onAirToday"></div>
<br/>
<br/>
<h1>"Расписание на неделю"</h1>
Виджет показывает расписание на всю неделю:
<br/>
<br/>
<div id="scheduleTabs"></div>


Сохраняем все в кодировке UTF-8 без BOM. Заполняем расписание в Airtime и открываем страницу сайта.
Результат:


А вот рабочий вариант с измененным дизайном:


Домашнее задание:
Изменить стандартный вид вывода любого типа расписания


Спасибо за внимание. Special for RadioTalk.ru by Artem M.

Отредактировано Leff27 - 01.11.2012