Анимированный аватар

Настройка Плагин
1
:information_source: Краткое описание Discourse Animated Avatars позволяет пользователям загружать анимированные аватары в формате gif/webp, которые будут анимироваться при наведении или выделении в постах, карточках пользователей и на страницах профиля.
:hammer_and_wrench: Ссылка на репозиторий https://github.com/discourse/discourse-animated-avatars
:open_book: Руководство по установке Как установить плагины в Discourse

Возможности

По умолчанию анимация приостанавливается, когда элемент не находится в фокусе. Внутри тем анимация приостанавливается, если на пост не наведено или он не выделен.

animated_avatars_always_animate: отключает описанное выше приостановление и принудительно заставляет аватары всегда анимироваться.
animated_avatars_min_trust_level_to_display ограничивает анимацию аватаров в зависимости от уровня доверия.

Учитывает настройку prefers-reduced-motion в параметрах доступности браузера: анимации будут полностью отключены.

Анимированные gif автоматически конвертируются в webp при загрузке, что уменьшает общий размер файла. Это можно настроить с помощью animated_gif_avatar_to_webp (по умолчанию true).

Конфигурация

Этот плагин имеет необязательную зависимость от gifsicle. Он используется для изменения размера загруженных gif-изображений, чтобы они соответствовали квадратному аватару, что помогает корректировать соотношение сторон, а также выравнивать различия в размерах между статичными и анимированными изображениями для более плавной замены. Плагин будет работать и без него, но неквадратные аватары могут отображаться искаженными.

:information_source: gifsicle не требуется для animated_gif_avatar_to_webp. Анимированные gif будут конвертированы в webp с обрезкой до квадратных аватаров.

Для включения необходимо добавить вызов скрипта установки в ваш app.yml. Пример того, как будет выглядеть хук after_code, приведен ниже:

hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/discourse-animated-avatars.git
    - exec:
        cd: $home/plugins/discourse-animated-avatars
        raise_on_fail: false
        cmd:
          - $home/plugins/discourse-animated-avatars/scripts/install.sh

Настройки

Название Описание
animated avatars min trust level to display Минимальный уровень доверия для отображения анимированного аватара
animated avatars always animate Всегда анимировать аватары
animated gif avatar to webp автоматически конвертирует анимированные gif-аватары в webp при загрузке, уменьшая размер файла. (по умолчанию: true)
animated gif avatar webp quality качество конвертации gif в webp. Рекомендуемые настройки от 75% до 100% (по умолчанию: 80%)

Технические детали

Включены дополнительные команды CLI для определения количества аватаров в формате gif/webp и конвертации существующих gif-аватаров в webp.

bin/rake animated_avatars:count_animated подсчитывает общее количество анимированных аватаров, сгруппированных по формату gif/webp

bin/rake animated_avatars:gif_to_webp конвертирует существующие анимированные gif-аватары в webp. Новые аватары применяются автоматически, а существующие gif-аватары удаляются задачей CleanUpUploads.

22 лайка
Animated GIF avatars no longer supported by default
Animated GIF avatars, how enable?
Incompatibility between Cakeday,Data-Explorer and Animated Avatar plugins
Set Slow Mode return a 403 error - I am administrator
2

Ты отлично справляешься! Можно ли сделать так, чтобы анимация всегда проигрывалась, независимо от фокуса?

3 лайка
10

Ещё один вопрос напоследок: как установить уровень доверия для тех, кто будет использовать плагин?

1 лайк
11

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

2 лайка
12

Я только что добавил два параметра сайта для запрошенных функций:

animated_avatars_always_animate
и ограничение анимации уровнем доверия: animated_avatars_min_trust_level_to_display

4 лайка
13

Спасибо за опцию «всегда анимировать». У меня было несколько пользователей, которые очень ждали эту функцию.

2 лайка
14

Огромное спасибо за выпуск этой опции! Я очень благодарен и счастлив по этому поводу. Именно такие люди, как вы, делают мир лучше!

У меня возник вопрос: какой размер GIF-файла является стандартным, чтобы он не растягивался? 50x50?

15

Любой квадратный размер от 50px до 200px не должен растягиваться. Если вы используете необязательную зависимость gifsicle, она может изменить размер загруженных GIF-файлов за вас.

16

Извините за мою неосведомлённость, но что такое gifsicle?

17

gifsicle — это программное обеспечение для работы с GIF-изображениями.

Подробности описаны в разделе конфигурации.

2 лайка
18

Некоторые пользователи сообщают, что аватар возвращается в формате .png, несмотря на то, что тип медиафайла — gif.

На данный момент я просто пытаюсь понять, может ли это быть связано с плагином, Discourse, Nginx или с самим пользователем.

У меня уже был случай, когда проблема заключалась в том, что пользователь подключался к своей машине с Windows через RDP, но в одном конкретном отчёте у меня есть пользователь с Windows 10 версии 22H2, сборка ОС 19045.2728 и Chrome 111.0.5563.65 (64-разрядная), однако браузер получает следующее:

image
image305×285 11.1 KB

Файл 108_2.png — это аватар.

Если я проверю ту же тему, то увижу, что получаю то же самое изображение, но с расширением .gif, и на самом деле оно загружается как анимированное для меня.

Однако при попытке открыть файл напрямую я вижу, что существуют две версии: как .png, так и .gif:

https://netgamers.it/user_avatar/netgamers.it/borzo/100/108_2.gif
https://netgamers.it/user_avatar/netgamers.it/borzo/100/108_2.png

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

image
image1376×177 6.22 KB

1 лайк
19

Возвращаются два статических файла — PNG и GIF. В режиме «всегда анимировать» PNG при загрузке поста скриптом заменяется на версию в формате GIF.

Если у пользователя отключен JavaScript, это может предотвратить анимацию.

(Со своей стороны я также вижу анимацию)

2 лайка
20

Хорошо подмечено, я спрошу у него, нет ли у него блокировщика рекламы или чего-то ещё, что могло бы нарушить работу JS на сайте.

1 лайк
21

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

Uncaught TypeError: r.default.compute is not a function
    n animated-bound-avatar.js:10
    htmlHelper helpers.js:30
    Ember 2
    l manager.js:746
    tag reference.js:136
    track validator.js:668
animated-bound-avatar.js:10

К сожалению, я не знаю, когда именно это началось.

The Missing Public Profiles Mystery [Animated Avatars]
22

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

23

У меня тоже возникли проблемы с плагином Animated Avatar — после вчерашнего обновления. Если плагин активирован, страница сообщений (/u/username/messages) больше не загружается.

Не удалось загрузить ресурс: сервер ответил со статусом 429 (Слишком много запросов)

animated-bound-avatar.js:10 Нераспознанная ошибка типа: r.default.compute не является функцией
    в animated-bound-avatar.js:10:1
    в helpers.js:30:1
    в index.js:4731:1
    в Object.getValue (index.js:4734:1)
    в manager.js:746:1
    в reference.js:136:1
    в e.track (validator.js:668:1)
    в f (reference.js:135:1)
    в Object.evaluate (runtime.js:3269:1)
    в Object.evaluate (runtime.js:1052:1)
    в It.evaluateSyscall (runtime.js:4263:1)
    в It.evaluateInner (runtime.js:4234:1)
    в It.evaluateOuter (runtime.js:4227:1)
    в Wt.next (runtime.js:5058:1)
    в Wt._execute (runtime.js:5045:1)
    в Wt.execute (runtime.js:5038:1)
    в zt.handleException (runtime.js:4372:1)
    в Ut.handleException (runtime.js:4580:1)
    в Ft.throw (runtime.js:4319:1)
    в $e.evaluate (runtime.js:2091:1)
    в Ft._execute (runtime.js:4306:1)
    в Ft.execute (runtime.js:4291:1)
    в Kt.rerender (runtime.js:4606:1)
    в wr.render (index.js:6751:1)
    в index.js:7013:1
    в Mt (runtime.js:4139:1)
    в Tr._renderRoots (index.js:6996:1)
    в Tr._renderRootsTransaction (index.js:7039:1)
    в Tr._revalidate (index.js:7072:1)
    в p.invoke (queue.ts:201:14)
    в p.flush (queue.ts:98:13)
    в h.flush (deferred-action-queues.ts:75:19)
    в $._end (index.ts:616:32)
    в $.end (index.ts:298:10)
    в $._run (index.ts:667:14)
    в $.run (index.ts:339:17)
    в d (index.js:109:1)
    в u.success (ajax.js:105:1)
    в l (jquery.js:3213:1)
    в Object.fireWith [as resolveWith] (jquery.js:3343:1)
    в E (jquery.js:9617:1)
    в XMLHttpRequest.<anonymous> (jquery.js:9878:1)
24

FIX: Call boundAvatar() directly (#17) · discourse/discourse-animated-avatars@f8ff4a7 · GitHub или версия 3.1.0.beta7 решили проблему для меня, спасибо. :slight_smile:

25

Похоже, это не работает в браузерах Brave и Opera, хотя в Firefox всё функционирует.

И Brave, и Opera отображают изображение в формате .png и не переключаются на .gif.

26

Перекрёстная ссылка на сообщённую ошибку:

6 лайков
The Missing Public Profiles Mystery [Animated Avatars]
27

Страницы профиля тоже полностью не работают у меня

Uncaught TypeError: Cannot destructure property 'hasBlock' of 'e' as it is undefined.
    at b.getConnectors (plugin-outlet.js:87:19)
    at B._join (index.ts:646:21)
    at B.join (index.ts:362:17)
    at p (index.js:156:1)
    at index.js:257:1
    at o.getValue (install-function-helper-manager.js:42:12)
    at manager.js:746:1
    at reference.js:131:1
    at e.track (validator.js:657:1)
    at d (reference.js:130:1)
    at runtime.js:1648:1
    at reference.js:131:1
    at e.track (validator.js:657:1)
    at d (reference.js:130:1)
    at index.js:5579:1
    at reference.js:131:1
    at e.track (validator.js:657:1)
    at d (reference.js:130:1)
    at index.js:5579:1
    at reference.js:131:1
    at e.track (validator.js:657:1)
    at d (reference.js:130:1)
    at reference.js:306:1
    at reference.js:131:1
    at e.track (validator.js:657:1)
    at d (reference.js:130:1)
    at Object.evaluate (runtime.js:3437:1)
    at Object.evaluate (runtime.js:1052:1)
    at It.evaluateSyscall (runtime.js:4258:1)
    at It.evaluateInner (runtime.js:4229:1)
    at It.evaluateOuter (runtime.js:4222:1)
    at Wt.next (runtime.js:5053:1)
    at Wt._execute (runtime.js:5040:1)
    at Wt.execute (runtime.js:5033:1)
    at $t.handleException (runtime.js:4367:1)
    at qt.handleException (runtime.js:4575:1)
    at Dt.throw (runtime.js:4314:1)
    at Be.evaluate (runtime.js:2088:1)
    at Dt._execute (runtime.js:4301:1)
    at Dt.execute (runtime.js:4286:1)
    at Ht.rerender (runtime.js:4601:1)
    at wr.render (index.js:6742:1)
    at index.js:7004:1
    at Mt (runtime.js:4134:1)
    at Cr._renderRoots (index.js:6987:1)
    at Cr._renderRootsTransaction (index.js:7030:1)
    at Cr._revalidate (index.js:7063:1)
    at p.invoke (queue.ts:201:14)
    at p.flush (queue.ts:98:13)
    at h.flush (deferred-action-queues.ts:75:19)
    at B._end (index.ts:616:32)
    at B.end (index.ts:298:10)
    at B._run (index.ts:667:14)
    at B.run (index.ts:339:17)
    at d (index.js:108:1)
    at t.success (ajax.js:115:7)
    at l (jquery.js:3213:1)
    at Object.fireWith [as resolveWith] (jquery.js:3343:1)
    at x (jquery.js:9617:1)
    at XMLHttpRequest.<anonymous> (jquery.js:9878:1)

Это может быть исправление?

2 лайка