VK Player - ВКонтакте IFrame приложение для проигрывания музыки
ilya
я полностью переделал vk-player приложение,
мне было интересно попробовать Sammy (аналог Синатры).
И вот что получилось, исходный код:
https://github.com/nemilya/vk-player
Приложение ВК:
http://vk.com/app3088288
Преамбула такая - некоторое время назад при проигрывании музыки
нативным плеером ВК - появились некие "лаги" - провалы в
воспроизведении, вот и решил попробовать взять внешний JS
проигрыватель.
Тем более нашёл группу с музыкой где более 8000 записей - решил
сделать приложение которое бы показывало музыку из выбранной группы -
добавляло в свой плейлист и проигрывало.
Сценарий простой:
при первом открытии проверяется - выставлен ли ид.группы,
если нет - то выводится список групп, при выборе одной из них - ид
группы сохраняется,
и отображается плеер - который получает музыку из группы и начинает её
проигрывать.
Бэкэндом является Синатра - которая выдаёт htm файл, и все файлы,
браузерная компиляция коффиискрипта.
Так же было интересно попробовать haml в качестве шаблонов для Sammy.
По порядку,
https://github.com/nemilya/vk-player/blob/master/app.rb
синатра приложение, которое содержит настройку для отображения в
IFrame, и ключ для антикэширования в дев. режиме.
Она выдаёт файл
https://github.com/nemilya/vk-player/blob/master/views/layout.haml
(haml - на стороне сервера)
Который содержит подключения стилевого оформления плеера, jquert,
haml.js, sammy, coffee-script.
После этого подключение vk.api JS библиотеки.
далее jPlayer, и модуль для плей листа.
И далее 3 файла собственно приложения:
player.coffee
model.coffee
app.coffee
размещаются они здесь:
https://github.com/nemilya/vk-player/tree/master/public/coffee
app.coffee это и есть главное приложение, вот оно полностью:
window.app = $.sammy ->
@element_selector = '#content'
@use(Sammy.Haml, 'haml')
model = new Model
app.get '#/', ->
@app.swap('Hello!')
if model.is_group_configured()
@redirect('#/player')
else
@redirect('#/groups')
app.get '#/set_group', ->
model.set_gid @params.gid
@redirect '#/player'
app.get '#/groups', ->
model.init_groups (model) =>
@partial('/templates/groups.haml', groups: model.groups())
app.get '#/player', ->
model.init_audios (model) =>
@partial('/templates/player.haml', audios: model.audios()).then ->
Player.init_play_list(model.audios())
if VK?
VK.init ->
app.clearTemplateCache()
app.run('#/')
определяется ид див элемента куда будет выводиться результат
партчиалов.
подключается модель (там методы получения списка групп и аудио),
далее прописываются роуты - аналогично синатре.
И вот подробнее по роуту отображения списка групп:
app.get '#/groups', ->
model.init_groups (model) =>
@partial('/templates/groups.haml', groups: model.groups())
Сразу и не понять, но смысл такой - что вызывается метод получения
групп, а т.к. он асинхронный - в нём идёт запрос в VK.api - то в
качестве callback метода передаётся функция, с параметром
"model" (модель из текущего контекста).
функция содержит @ - это текущий контест Sammy приложения, заметим что
стрелка fat - => - это значит что текущий контекст останется текущим
куда бы эту функцию не забросило (если бы было -> то @ - стало бы
контекстом где вызывается эта функция).
@partial - это метод отрисовки патчиала, и замена содержимого,
'/templates/groups.haml' - путь к хамл файлу, вот его содержимое:
%b Select group
%ul
:for group in groups
%li
%a(href='#/set_group?gid='+group.gid)= group.title
вторым параметром @partial передаются локальные переменные для
парчиала - это будет "groups" по которым мы и проходим внутри haml.
Модель
https://github.com/nemilya/vk-player/blob/master/public/coffee/model.coffee
по факту является враппером к VK функциям, и там на данный момент 2
запроса - список групп текущего пользователя, и запрос аудио файлов
выбранной группы.
Класс проигрывателя
https://github.com/nemilya/vk-player/blob/master/public/coffee/player.coffee
содержит один статический метод init_play_list - в который передаётся
список аудио файлов - и плеер инициалазиирует свой плей лист.
В общем не знаю как в общем решить вопрос получения данных асинхронно
в роутере, сейчас немного заковыристо получилось, но работает.
В плана сделать случное получение списка аудиофайлов (сейчас берётся 7
первых из группы), и так же сделать возможность добавить
прослушиваемый аудиофайл к себе в аудио.
Спасибо,
Илья
ilya
haml шаблоны для js выдаются через синатру (были проблемы с
кэширование),
но зато сейчас живое обновление кода - на изменение в моделях, или
шаблонах (для js).
У меня настроены 2 приложения ВК IFrame - одно для локального
тестирования - ведёт на локальное приложение - где мне удаётся всё
тестировать (с реальным доступом к VK api) и второе приложение - для
продуктовой версии - хостится на CloudFoundry.
Сделал функцию случайного сдвига по плейлисту группы - то есть offset
считается случайно по кол-ву аудиокомпозиций.
Инициализация модели сделала через последовательный вызов "роутов" -
пока это происходит - отображается "картинка ожидания" - делается два
запроса к API - количество записей, и получение 7 записей (это при
выборе группы)
Файловая структура (в /public) выглядит сейчас так:
/app
/assets
/templates
https://github.com/nemilya/vk-player/tree/master/public
по ощущениям - работать с такой структурой приятнее.
в "app" - CoffeeScript приложения (Sammyjs роуты, модель, и класс
небольшой враппер проигрывателя),
assets - все загружаемые библиотеки JS
templates - haml шаблоны отображения
On Aug 22, 4:50 pm, ilya <nemi...@gmail.com> wrote:
> Приветствую!
>
> я полностью переделал vk-player приложение,
> мне было интересно попробовать Sammy (аналог Синатры).
>
> И вот что получилось, исходный код:https://github.com/nemilya/vk-player
>
> Приложение ВК:http://vk.com/app3088288
>
> Преамбула такая - некоторое время назад при проигрывании музыки
> нативным плеером ВК - появились некие "лаги" - провалы в
> воспроизведении, вот и решил попробовать взять внешний JS
> проигрыватель.
> Тем более нашёл группу с музыкой где более 8000 записей - решил
> сделать приложение которое бы показывало музыку из выбранной группы -
> добавляло в свой плейлист и проигрывало.
>
> Сценарий простой:
> при первом открытии проверяется - выставлен ли ид.группы,
> если нет - то выводится список групп, при выборе одной из них - ид
> группы сохраняется,
> и отображается плеер - который получает музыку из группы и начинает её
> проигрывать.
>
> Бэкэндом является Синатра - которая выдаёт htm файл, и все файлы,
> браузерная компиляция коффиискрипта.
>
> Так же было интересно попробовать haml в качестве шаблонов для Sammy.
>
> По порядку,https://github.com/nemilya/vk-player/blob/master/app.rb
> синатра приложение, которое содержит настройку для отображения в
> IFrame, и ключ для антикэширования в дев. режиме.
>
> Она выдаёт файлhttps://github.com/nemilya/vk-player/blob/master/views/layout.haml
> Модельhttps://github.com/nemilya/vk-player/blob/master/public/coffee/model....
> по факту является враппером к VK функциям, и там на данный момент 2
> запроса - список групп текущего пользователя, и запрос аудио файлов
> выбранной группы.
>
> Класс проигрывателяhttps://github.com/nemilya/vk-player/blob/master/public/coffee/player...
ilya
jPlayer содержит модуль swf для Мозилы - но почему то не срабатывает.