гифки движок

"Ленивая" загрузка картинок + остановка гифок на плохом интернете

Этот пост касается только нового движка, на текущем основном реакторе все без изменений.

Что такое "ленивая" загрузка?

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

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

Раньше мы полагались на библиотеку nextjs в вопросе "ленивой" загрузки картинок, но в новой версии они - согласно современным практикам - отказались от своих механизмов и перешли на встроенные механизмы "ленивой" загрузки в браузерах. Стало лучше!

Для примера рассмотрим, как работает "ленивая" загрузка картинок в Хроме (и в браузерах на Chromium). С июля 2020 года разработчики браузера изменили расстояние от видимого экрана, на котором картинки начинают загружаться. Для быстрого интернета это расстояние уменьшили с 3000 пикселей до 1250 пикселей, для медленного - с 4000 пикселей до 2500.

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

Сурс: https://web.dev/browser-level-image-lazy-loading/

В разных браузерах могут быть разные расстояния от видимой части экрана.

А что же гифки?

Гифки и гифковидео(видеогифки?) тоже подвластны этому механизму браузера. В дополнение мы в качестве эксперимента добавляем новый механизм остановки гифковидео для плохого интернета.

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

Браузер будет потихоньку буферизовать контент видеогифки, особенно если она находится у пользователя на экране. Это тоже встроенный механизм - браузер сам выбирает, загрузке какого контента отдать приоритет.

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

Обратная связь

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

Важно! Мы принимаем репорт только если у вас отключены все расширения браузера или вы используете "чистый" браузер. Если проблема возникает только с включенным расширением, то репорт надо слать разработчику расширения, а не нам.

В прошлый раз, когда мы тестировали редактор, было много проблем, связанных KellyC. Дело житейское, KellyC может просто не успевать отреагировать на наши изменения. Здесь можно подать репорт разработчику KellyC, если что-то вдруг сломается.

А вот инструкция как прислать репорт о баге на новом движке нам: https://m.joyreactor.cc/report

До связи, драгоценные!

Ссылки на видеогифки (и картинки)

Гифки/видеогифки

Каждый раз, когда мы загружаем картинку в формате .gif на наши сервера, мы пытаемся превратить ее в webm/mp4 видео, потому что в большинстве случаев webm/mp4 куда экономичнее по трафику. Самый экономичный формат - webm, но он поддерживается не на всех устройствах, поэтому мы также сохраняем mp4.

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

Для некоторых гифок нет смысла сохранять webm/mp4. Такое бывает, когда гифка мелкая, имеет мало кадров или результирующий вес webm/mp4 не сильно отличается от самой гифки (или даже превышает исходный вес). В таком случае гифка остается просто гифкой-картинкой, которую можно скачать из меню по правой кнопке мыши. Пример: https://m.joyreactor.cc/post/4848821

Кстати, когда мы введем загрузку webm/mp4 для видеогифок, при первом релизе у них не будет источника в формате gif, будет на выбор webm и mp4. Это связано с тем, что один маленький видосик может превратиться в многометровую гифку (80Мб не предел!), и работа с таким может серьезно загрузить наши сервера. В будущем мы постараемся что-то придумать, потому что многие все же любят гифки в формате гиф.

Видеогифки webm/mp4 будут выглядеть точно также, как обычные гифки, но - в первое время точно - без источника в формате gif.

Картинки шириной больше 811 пикселей

На новом движке многим не очень нравилось, что нельзя скачать исходник картинки прямо из ленты, надо сначала отрывать full size и его уже скачивать.

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

Заливка webm/mp4

Добавлена возможность на новом движке заливать webm/mp4. Аудио-дорожка будет вырезана. Для таких картинок гифку скачать нельзя.

Вот пример залитого видео - https://joyreactor.cc/post/5511461

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

2. ленивая загрузка гифок бесполезна на 100%. ни одна гифка, ни одна, не загружается на новой теме. можно сидеть 5сек пырить в бледную превьюшку с крутящимся в центре индикатором загрузки и гифку так и не увидеть.

3. крайне неудобно сохранять оригиналы картинок, нужно сначала их открыть - затратить еще дополнительное время. в старой теме ты просто щелкаешь правой кнопкой и "сохранить объект по ссылке как" в меню.

проверял на qualcomm snapdragon 732g, на котором все сайты работают отлично (даже новый редизайн ПДФ), кроме джоя

Тестируем новую форму создания поста

Вы должны знать, что в наших горнилах куется новая версия движка реактора. Цель преобразований - исправить старые проблемы и добавить новые столь желанные фичи. Код текущего основного движка базируется на symfony 1.4, который уже около 10 лет считается legacy, и над ним работать просто нет смысла. Новые фичи - в новом движке.

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

Но сначала разберемся, зачем вообще на эту форму в перспективе переезжать.

Что умеет новая волшебная форма?

1) Форма принимает картиночки в формате webp.

2) В форму можно вставлять картиночки напрямую - вставкой из буфера обмена или драг-н-дропом файла.

3) Эта форма умеет делать спойлеры, также доступные на текущей основной версии движка.

4) Эта форма скажет вам заранее, какие теги поставить не получится.

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

То есть по форме можно узнать, есть у вас бан в теге или нет ;-)

Что эта форма пока не умеет:

1) Таблицы

2) Наглядная вставка видео/разрешенных эмбедов, но можно вставить видео ссылкой, как на старом движке.

3) Опросы

4) Какая-то фича, нужная именно вам? Пишите в комменты.

Еще идея спрятать заголовок поста прямо в эту форму, вот так. Что думаете?

В общем, пожелания и баги в студию!

Редактирование комментов + возможности нового редактора на базе Slate

На новом движке добавлена функция редактирования комментов. Свой коммент можно отредактировать в течение 5 минут после создания (а удалить-то пока нельзя, лол).

В верхнем правом углу коммента показывается иконка карандашика.

Если ее нажать, то покажется встроенная форма редактирования.

Вполне возможно, что надо отмечать каким-то значком, что коммент был отредактирован. А то первый товарищ напишет что-нибудь разумное, доброе и вечное, второй товарищ ответит, что полностью согласен. А первый воткнет в свой коммент что-то другое (надеюсь, не менее разумное), например "ТЫ ПИДОР", с чем тоже можно согласиться, но все-таки...

Что думаете?

Возможности нового редактора

Для создания и редактирования постов и комментов на m.joyreactor.cc используется новый редактор на базе Slate - https://www.slatejs.org/examples/. Выглядит так:

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

Наш редактор комментов может в том числе следующее:

- Он умеет вставлять в комменты видеогифки, таблицы и спойлеры.

Вот такие!

- Можно вставлять скриншоты прямо из буфера обмена (другие картинки тоже). Делаете скриншот с занесением в буфер обмена, тыкаете в поле редактора, жмете Ctrl+V. Или копируете картинку по правому клику в браузере, курсор в поле редактора, Ctrl+V.

- Можно драг-н-дропать картинки с диска. Одну или несколько сразу.

ссылка на гифку

- Можно вставить youtube- и vimeо-видео, coub напрямую в поле редактора по ссылке. Берете ссылку, устанавливаете курсор в нужное место в поле редактора и Ctrl+V.

1) Slate - сырой движок, не дошедший до первой стабильной версии. Сейчас он у нас 0.97.2. Это значит, что есть повышенная вероятность глюков и падений.

2) Плоховатенько работает на телефонах Android, но сообщество разработчиков потихоньку исправляет эту ситуацию. Из-за проблем с Android для написания комментов на мобильных телефонах мы показываем более простой редактор без Slate.

На нем можно написать простой текст и добавить несколько картинок сразу. Больше ничего при среднестатистическом способе использования и не надо, наверно.

3) Не работают многие сочетания клавиш. Этому редактор просто не научили. Редактор вообще многому не научили.

4) Многие говорят, что они хотят fine-tune'ить html при постинге.

Мы можем сделать вставку/редактирование сырого html, но дальше Slate нормализиует этот html согласно своим внутренним правилам. Например, внутрь тега p (абзац) нельзя класть другие блоковые теги (например, h1), можно класть только инлайновые теги (a, b, i, s). Нельзя ставить инлайновые теги и текст, не обернутый в блоковый тег, на верхний уровень редактора и т.д.

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

Коротко: вы сможете вставить и поправить html (когда мы сделаем такую кнопку), но этот html будет обработан в соответствии с правилами использования тегов.

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

Давайте тестить и радоваться, товарищи!

идеи и предложения

1. отложенный постинг. возможность зарядить обойму постов и чтобы автоматика их по заданному графику постила. видимо изначально предполагалось, что человек, увидевший в инете прекол, сразу потащит его на джой, и поэтому очередь постов ни к чему. отложка очень облегчает жизнь админам групп ВК. но на джое другая структура постинга: ВК посты делают в основном админы, коих редко больше пяти; а на джое активных постеров штук пятьсот. проблема: что если несколько пользователей поставили в очередь одну и ту же пикчу? получается нужна сложная система, которая будет сравнивать посты из очередей разных юзеров и отдавать предпочтение тем, которые были предложены раньше, а остальным сообщать мол "ваш пост не запостили, пушта он уже баян". но это, понятно, сложнореализуемо силами команды разработки реактора. но для активный постеров было бы страшно удобно. 

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

Черновики в новой форме создания постов

Напоминаю, что новая форма - это вот эта https://m.joyreactor.cc/post/new

Зачем черновики? Почему этой фиче дали высокий приоритет?

Первое и самое очевидное - очень обидно, когда с любовью написанная и скомпонованная простыня текста пропадает из-за перезагрузки страницы. Теперь весь текст раз в 20 секунд сохраняется в ваше локальное хранилище браузера (local storage), и вы видите вот такое сообщение

Картинки, которые вставлены не по ссылке (которые вы вкопипастили или драг-н-дропнули) сначала отправляются на сервер. На сервере во временном хранилище они будут храниться сутки.

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

Второе и неочевидное - нам нужны длиннопосты. По техническим причинам мы не можем принимать за раз более 10Мб, и если отправить весь пост с 30 картинками с компа пользователя скопом, может случится бяда (пост отторгнется). С черновиками каждая картиночка будет загружаться по очереди, и бяда вряд ли случится. Но ограничение 10Мб на одну картинку остается.

Мы готовимся к приему webm/mp4, и мы все разобрали. Может глючить пока не соберем полностью, так что пишите, если будут проблемы.

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

Как это удалить?

При первой попытке залить webm на сайт через мобильный реактор(потому что этой функции почему то нет на пк версии), реактор опять разнылся что ''ему что-то не так'', в результате чего гифка осталась в окне для картинок и не исчезла до сих пор. Ключевой вопрос в названии поста.