Что касается нашего последнего выпуска, в котором обсуждается, как мы создали расширение для Chrome, позволяющее друзьям вместе смотреть сериалы на Hulu, у нас работало синхронизированное воспроизведение/пауза, но все еще оставались некоторые проблемы, которые нужно было устранить. Одной из самых больших проблем было предотвращение инверсии воспроизведения/паузы на разных компьютерах, но это было не единственное.

Наше торжество по поводу того, что воспроизведение/пауза заработало, было недолгим, так как мы быстро поняли, что все пользователи на диване должны координировать свои действия независимо от того, проигрывают ли они шоу или оно ставится на паузу, когда они присоединяются к дивану, чтобы кто-то, нажимающий кнопку воспроизведения, не мог случайно приостановить чужой экран. Это определенно не идеальный пользовательский опыт!

Чтобы учесть это, мы начали с захвата статуса шоу (воспроизведение или пауза) из атрибута кнопки воспроизведения/паузы и помещения его в localStorage, сохраняя «true», если статус воспроизводится, и «false», если он был приостановлено. Сначала мы надеялись использовать логические значения, но во время отладки поняли, что localStorage может обрабатывать только строки, поэтому мы изменили логические значения на строки, но придерживались терминологии true/false.

Затем, в зависимости от того, воспроизводилось ли шоу в данный момент или было приостановлено, когда пользователь нажал кнопку воспроизведения/паузы, мы установили оператор if/else в нашем прослушивателе событий на кнопке, которая использовала разные маршруты API для междоменной выборки. запрос, который генерировал различные сообщения для прохождения через наши веб-сокеты и отображения в чате, которые были адаптированы к тому, воспроизводит ли кто-то свое видео или приостанавливает его (ранее в сообщении говорилось только, что пользователь воспроизвел/приостановил свое видео; в нем не указывалось, какое ).

Оба маршрута API отправляли сообщения через один и тот же сокет, который отправлял postMessage в окно Hulu, указывающее, что мы хотим, чтобы окно обрабатывало действие воспроизведения/паузы, воспроизводило или приостанавливало шоу, и какой пользователь сгенерировал щелчок.

В окне мы воспользовались huluID, упомянутым в нашем предыдущем посте, чтобы определить, нажал ли этот пользователь кнопку воспроизведения/паузы. Если они этого не сделали, мы создали второй оператор if/else, чтобы проверить, что в данный момент делает шоу и нужно ли его обновлять.

Например, если Кейтлин нажимает кнопку воспроизведения, но видео Джун уже воспроизводится, наш код видит, что Джун не нажимала кнопку, но что статус в локальном хранилище Джун уже соответствует статусу, переданному из цикла воспроизведения/паузы Кейтлин, и он позволяет Видео июня, чтобы продолжить воспроизведение. Затем, если Кейтлин приостановит шоу позже, чтобы пойти за попкорном, код увидит, что статус видео Джун больше не соответствует статусу, отправленному щелчком Кейтлин, и также приостановит ее экран. Таким образом, не имеет значения, выстраивают ли пользователи свое воспроизведение и паузу, когда садятся на диван; расширение отслеживает, какое действие предпринимает каждый пользователь, и гарантирует, что все пользователи согласуются с ним.

Разделение запросов на междоменную выборку воспроизведения и приостановки и маршрутов API упростило для нас постоянное воспроизведение и приостановку показов для всех пользователей на определенном диване, а также предоставило прекрасную возможность добавить временную метку к нашему сообщению в чат. Это была особенно важная функция, поскольку мы не смогли понять, как поделиться ссылкой и заставить ее автоматически направлять новых пользователей в нужную часть шоу, как это делают некоторые подобные расширения. Хотя пользователи сами координируют это не идеально, добавление метки времени к сообщениям сделало это намного проще.

Для этого в основном нужно было взять отметку времени с панели управления и отправить ее через запрос на междоменную выборку как часть URL-адреса. Сервер Couch Potato затем использовал эту информацию как часть сообщения, отправляемого через сокеты, чтобы сообщить пользователям, что кто-то воспроизвел или приостановил их видео.

В результате всей нашей работы по синхронизации функции воспроизведения/паузы мы перешли от отсутствия синхронизации к синхронизации с простым сообщением, в котором говорилось что-то вроде «Грейс воспроизвела/приостановила свое видео», до «Грейс приостановила свое видео в 4 часа». :17».

Потребовалось много возни, но, в конце концов, мы смогли добавить важную функцию в наше расширение и сделать его максимально функциональным с учетом имеющихся у нас ограничений. И это поместило наше расширение в то место, где мы чувствовали себя комфортно, разместив его в магазине Chrome (мы следовали этому руководству, чтобы сделать это, хотя документация также полезна).

Конечно, наличие нашего расширения в мире было (и остается!) ужасающим. Мы боялись, что наше расширение сломается, как только его начнут использовать другие, и оказалось, что именно это и произошло! На самом деле, с момента размещения нашего расширения в магазине Chrome произошло достаточно, чтобы наш следующий (и предпоследний) пост в блоге был посвящен тому, как мы поддерживали наш код. Быть в курсе!

Хотите узнать больше о Couch Potato? Начните эту серию блогов с самого начала! И не забудьте скачать Couch Potato из магазина Chrome, чтобы начать смотреть сериалы с друзьями прямо сейчас!