Проект: Easysubs — учим языки по сериалам и фильмам  Публичный пост
22 апреля 2020  1978
Easysubs — учим языки по сериалам и фильмам

Расширение для браузеров, помогающее в изучении языков с помощью просмотра сериалов и фильмов.

Что умеет?

  • Переводить слова по наведению мышки.
  • По клику переводить полное предложение.
  • Перематывать видео по субтитрам, а не только +-10 секунд.
  • Экспортировать слова в LinguaLeo или Puzzle English.
  • Показывать прогресс бар субтитров. Удобно для навигации и когда пьешь чаек, но не хочешь упустить начало реплик.
  • Загружать свои субтитры. Можно не ждать, когда субтитры зальют на кинопаб.
  • Управлять задержкой субтитров. Актуально для кинопаба и кастомных субтитров.
  • Настраивать размер и фон субтитров.
  • Можно перетаскивать субтитры в любую часть экрана. Теперь они не будут закрывать самое интересное.
  • Фишка чисто для Netflix: возможность выбрать субтитры и озвучку из всех доступных на нетфликсе, а не только тех, что открыты для вашего текущего региона. Теперь в путешествиях нужная озвучка не пропадет.

Какие сервисы поддерживаются?

  • Kinopub – куда же без него.
  • Netflix.
  • Youtube – как обычные видео, так и Originals сериалы.

Amazon prime video в процессе разработки.

На этом закончим знакомство, за подробностями переходите на сайт или на github.

Идея

Большинство из нас любит посмотреть сериальчики, тратит на это кучу времени и потом винит себя за лень. Так же большинству тяжело даётся изучение иностранных языков (это ж скучное задротство).  В один прекрасный момент нас посещает блестящая идея объединить эти два действия и смотреть сериалы в оригинале с субтитрами. С одной стороны, смотришь любимые сериальчики, а с другой — прокачиваешь язык, учишь слова и избавляешься от чувства вины. Это ли не рай?

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

Прототип

Я хоть и писал одно время фронт, но по большей части всё же бэкенд разработчик.  Но что же нам поцонам, берем тайпскрипт (мы ж не какие-то там джиэсеры) и начинаем погружаться в разработку и апи гугл хрома.

Первый прототип поддерживал только кинопаб, был собран на коленке за пару недель и напичкан таймаутами. Но этого уже хватило, что бы оценить насколько удобней стало смотреть сериалы. Просмотр сложных серий сократился минут на 20. Это меня вдохновило, и я начал активно доводить все до юзабельного состояния. Кто ж знал, что это станет самым сложным и долгим.

Проблемы разработки или как построить проект на хаках

Интеграция

Мне хотелось сделать интеграцию плагина максимально нативной для всех сервисов, чтобы он не ломал стандартную работу, а дополнял её, не раздражая, когда не нужен.

Например:

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

Тут я столкнулся с тем, что у каждого сервиса свой плеер и своя логика работы с субтитрам, в которой предстояло разобраться. 
Написав несколько разных по успешности реализаций интеграций с сервисами, я пришел к общему алгоритму:

  1. В запросах ищем ссылки по которым загружены субтитры и разбираемся как их сформировать.
  2. Инжектим js скрипт напрямую в страницу сервиса, это позволяет управлять плеером и перехватывать события.
  3. Разбираемся, как сервис работает с субтитрами и погружаемся в работу самого плеера.
  4. Придумываем хаки для определения событий загрузки, смены субтитров и текущего языка.

Самым простым в этом плане оказался Kinopub, так как он использует опенсорсный плеер JW Player, можно посмотреть в доке его события, подписаться на них внутри инжект скрипта, да и просто изучить внутренний код.

Netflix

Нетфликс имеет свой плеер, который доставил много боли. Естественно, по нему нигде не найти документации, приходилось снифать запросы к мобильному приложению, часами изучать в консоли браузера, как работает плеер и какие функции можно вызвать. Я пересмотрел практически все проекты на гитхабе, где хоть как-то упоминается нетфликс, доставал исходники существующих расширений и разбирался в их минимизированном коде. Ухх, это был долгий путь.

В итоге решение получилось специфичным, но вполне рабочим и в духе JS. Все ж наслышаны о протипном устройстве JS и что всё можно переопределить. Именно этим я и воспользовался. В коде, который инжектится на страницу нетфликса, переопределяем фунции JSON.stringify и JSON.parse, которые используется при сериализации/десериализации данных. Таким образом мы получаем возможность перехватывать и модифицировать запросы плеера к серверам нетфликса. Дальше остается только понять, что нужно подменять.

Поделюсь уже готовым решением:

Для того чтобы в ответе от серверов нетфликса пришла ссылка на субтитры в формате VTT, нужно модифицировать запрос и добавить  webvtt-lssdh-ios8 в список профилей.

Чтобы открыть весь список субтитров и аудио дорожек, нужно в параметры запроса добавить showAllSubDubTracks = true.

ууу, ссылка на код

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

Реализация перемотки

На первый взгляд задача перемотки по субтитрам выглядит достаточно просто: берем video элемент со страницы и проставляем в currentTime время нужного субтитра.

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

Это малая доля хаков, которые пришлось использовать в плагине. Еще много подбросил YouTube. Если интересно, вы всегда можете спросить про них у меня в чате.

Запуск

Для меня это до сих пор самая сложная задача, тут уж скрипт с хаком не напишешь.

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

Так я получил первые 100 пользователей и в дальнейшем сарафанным радио их набралось около 300.

Поговорим о деньгах

Основная цель проекта была решить мои задачи и потренироваться в самостоятельной разработке проекта от идеи до релиза. Поэтому проект сейчас полностью бесплатный и опенсорсный.

Я б хотел, чтобы это так и оставалось, ибо на текущий момент хочется ощущать его полезность, а не думать как впихнуть форму ввода карты в субтитры.

Есть несколько глобальных идей монетизации, но это уже будет совсем другой проект.

За всё время на проект потрачено только $5 гуглу за валидацию аккаунта разработчика (это если не считать моё время).

Ближайшие планы развития

  • Интеграция с Amazone Prime Video
  • Улучшать анализ текста, распознавать идиомы, жаргонизмы и т.п.
  • Добавить фичи для постепенного отказа от субтитров, кажется, это и есть основная цель проекта.

Отбиваем бакс по полной!

На данный момент я особо не представляю, как продвигать проект, и буду рад любой помощи в этом.

Также не стесняйтесь оставлять обратную связь и фичреквесты.

Связанные посты
18 комментариев 👇
Petr Stepchenko, Pragmatic Software Engineer автор 20 августа 2020

Расширение стало официально доступно в Firefox Store
https://addons.mozilla.org/en-US/firefox/addon/easysubs/

Toxblh, Frontend Software Engineer 27 мая 2020

А чего для Firefox не зальёте в стор им? Там же вообще бесплатно и просто. https://addons.mozilla.org/en-US/developers/ зарегаться да залить. Я то могу с github собрать и залить, а вот мама врядтли :)
Могу помочь если что, а так расширение топ!

  Развернуть 1 комментарий

Забыл про их магазин, на днях загружу

  Развернуть 1 комментарий

😱 Комментарий удален его автором...

  Развернуть 1 комментарий
  Развернуть 1 комментарий

@Nitrino, Спасибо!)

  Развернуть 1 комментарий
Андрей Борисенко, Главный по фронтенду 15 июля 2020

Спасибо тебе!

Поставил и дико рад одной киллер-фиче: delay
На кинопабе иногда рассинхрон титров с дорожкой идёт, а сейчас всё по феншую

  Развернуть 1 комментарий
Миша Пустовит, Инженер-программист 28 апреля 2020

Вау! Спасибо большое - давно искал подобную штуку, а то переключатся во вкладку с гугл транслейтом изрядно надоело.

  Развернуть 1 комментарий
Аким, Типичный Analyst 28 апреля 2020

Спасибо, крутое дополнение. Девушка учит английский, установил ей.
(До этого пользовалась Puzzle Movies ((пираты??)) где низкое качество картинки, и сомнительный перевод местами)

Для старых переведных сериалов, было бы круто выгрузить переведенный текст субтитров, например от Lostfilm. Так в ситуациях когда хочешь посмотреть полный перевод предложения, можно будет увидеть что-то адекватное :)

  Развернуть 1 комментарий

Спасибо! Похоже на ororo.tv но с внятным переводом и без ожидания заливки новых сериалов 🚀

  Развернуть 1 комментарий

Круто, попробую маме показать, как раз язык учит. Она правда с телефона в основном смотрит, а там LPlayer. Кривенький, но вроде работает (плюс можно свои файлы скормить ему). Было бы хорошо и сюда так (в Plex интегрировать, например)

  Развернуть 1 комментарий
Denis Skiba, Frontend developer 27 мая 2020

Кайф, пользоюсь до статьи. Вещь из разрядка всегда хотелось чтобы такая была
Тем более за использование effector'a респект!

  Развернуть 1 комментарий
Petr Korolev, Space Travel Agent 4 июня 2020

Крутой жопыт. Даже и не думал что так можно залезать в Внутренности плееров! За это отдельно Респект!

  Развернуть 1 комментарий
Tema Belyaev, IT-Манагер 15 июля 2020

Очень круто!

  Развернуть 1 комментарий
Oleg Zakharchenko, Работаю в кафе 27 июля 2020

Отличный проект. Буду юзать активно теперь

  Развернуть 1 комментарий

Супер! Юзаю уже несколько дней, очень доволен:)

  Развернуть 1 комментарий
Владимир Шпак, Программист – UE4, программирую 25 января в 10:43

😱 Комментарий удален его автором...

  Развернуть 1 комментарий

прекрасная прекрасная штука! респект!

  Развернуть 1 комментарий
Pasha Trukhanov, Бывший double-стартап-CEO , экс-теор.физик, софтвер инжинер в Дата саенсе, genetic engineer wannabe 15 июня в 10:39

А роад мап по фичам есть/планируется? Или пока задача распространения выше любых фичей

  Развернуть 1 комментарий

@pasha_tru, примерный роадмап в ишью трекере
https://github.com/Nitrino/easysubs/issues

  Развернуть 1 комментарий

😱 Комментарий удален его автором...

  Развернуть 1 комментарий

😎

Автор поста открыл его для большого интернета, но комментирование и движухи доступны только участникам Клуба

Что вообще здесь происходит?


Войти  или  Вступить в Клуб