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

:information_source: Сводка Плагин Discourse Animated Avatars добавляет возможность загрузки пользователями gif-аватаров, которые будут анимироваться при наведении или выборе в сообщениях, карточках пользователей и на страницах профиля.
: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 в параметрах доступности браузера: анимации будут полностью отключены.

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

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

Чтобы включить его, добавьте вызов скрипта установки в ваш 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 Всегда анимировать аватары
22 лайка

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

3 лайка

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

1 лайк

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

2 лайка

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

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

4 лайка

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

2 лайка

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

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

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

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

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

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

2 лайка

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

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

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

Файл 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, хотя он соответствует всем настройкам, которые я установил для плагина:

1 лайк

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

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

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

2 лайка

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

1 лайк

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

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

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

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

У меня тоже возникли проблемы с плагином 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)

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

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

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

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

6 лайков

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

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 лайка