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

Что умеет?

• Переводить слова по наведению мышки.
• По клику переводить полное предложение.
• Перематывать видео по субтитрам, а не только +-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
• Улучшать анализ текста, распознавать идиомы, жаргонизмы и т.п.
• Добавить фичи для постепенного отказа от субтитров, кажется, это и есть основная цель проекта.

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

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

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