Avatar animado

Personalización Plugin
1
:information_source: Resumen Discourse Animated Avatars permite a los usuarios subir avatares animados en formato gif/webp que se animarán al pasar el cursor o al seleccionarlos en publicaciones, tarjetas de usuario y páginas de perfil.
:hammer_and_wrench: Enlace al repositorio https://github.com/discourse/discourse-animated-avatars
:open_book: Guía de instalación Cómo instalar plugins en Discourse

Características

Por defecto, la animación se pausa cuando el elemento no está enfocado. Dentro de los temas, la animación se pausará cuando la publicación no esté seleccionada ni tenga el cursor encima.

animated_avatars_always_animate: anula el comportamiento de pausa anterior y fuerza que los avatares se animen siempre.
animated_avatars_min_trust_level_to_display restringe la animación de los avatares según el nivel de confianza.

Respeta la opción prefers-reduced-motion en las opciones de accesibilidad del navegador: las animaciones se desactivarán por completo.

Los gifs animados se convierten automáticamente a webp al subirlos, lo que reduce el tamaño total del archivo. Esto se puede configurar con animated_gif_avatar_to_webp (valor predeterminado: true).

Configuración

Este plugin tiene una dependencia opcional de gifsicle. Se utiliza para redimensionar las imágenes gif subidas para que encajen en un avatar cuadrado, lo que ayuda a controlar las proporciones y a normalizar las diferencias de tamaño entre las imágenes estáticas y animadas para un cambio más fluido. El plugin funcionará sin gifsicle, pero los avatares que no sean cuadrados pueden aparecer estirados al mostrarse.

:information_source: gifsicle no es necesario para animated_gif_avatar_to_webp. Los gifs animados se convertirán a webp con avatares cuadrados recortados.

Para habilitarlo, debes agregar una llamada al script de instalación en tu app.yml. Un ejemplo de cómo se vería el hook after_code es el siguiente:

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

Ajustes

Nombre Descripción
animated avatars min trust level to display Nivel de confianza mínimo para mostrar un avatar animado
animated avatars always animate Animar siempre los avatares
animated gif avatar to webp Convierte automáticamente los avatares gif animados a webp al subirlos, reduciendo el tamaño del archivo. (predeterminado: true)
animated gif avatar webp quality La calidad de la conversión de gif a webp. Ajustes recomendados entre el 75% y el 100% (predeterminado: 80%)

Técnico

Se incluye una CLI adicional para ayudar a determinar la cantidad de avatares gif/webp y para convertir avatares gif existentes a webp.

bin/rake animated_avatars:count_animated cuenta el número total de avatares animados, agrupados por gif/webp.

bin/rake animated_avatars:gif_to_webp convierte los avatares gif animados existentes a webp. Los nuevos avatares se aplican automáticamente y los avatares gif existentes se eliminan mediante el trabajo CleanUpUploads.

22 Me gusta
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

eres genial por esto, ¿hay alguna forma de que la animación se reproduzca siempre, independientemente del enfoque?

3 Me gusta
10

Solo una duda más, haciéndote un favor, ¿cómo configuro el nivel de confianza de quién puede usar el plugin?

1 me gusta
11

El límite por nivel de confianza no se ha implementado, pero es bueno saber que es una característica deseada. Intentaré encontrar tiempo para trabajar en esta parte pronto.

2 Me gusta
12

Acabo de subir dos configuraciones del sitio para las funciones solicitadas:

animated_avatars_always_animate
y limitar la animación por nivel de confianza: animated_avatars_min_trust_level_to_display

4 Me gusta
13

Gracias por la opción siempre animada. Tenía un par de usuarios ansiosos por la función.

2 Me gusta
14

Muchas gracias por lanzar esta opción, estoy muy agradecido y muy contento por ello, ¡es gente como tú la que hace que el mundo sea mejor!

Entonces tengo una duda, ¿cuál es el tamaño por defecto del GIF para que no se estire? ¿50x50?

15

Cualquier tamaño de cuadrado entre 50px y 200px no debería estirarse. Si utiliza la dependencia opcional gifsicle, esta puede redimensionar los gifs subidos por usted.

16

Disculpe mi falta de conocimiento, pero ¿qué es gifsicle?

17

gifsicle es un software para manipular imágenes gif.

Se detalla en la sección de configuración.

2 Me gusta
18

Algunos usuarios informan que el avatar se devuelve como .png a pesar de que el tipo de medio es gif.

Por el momento, solo estoy tratando de entender si podría estar relacionado con el plugin/discourse/nginx o el usuario.

Ya tengo un caso de uso en el que el problema era que el usuario accedía a su máquina Windows a través de RDP, pero en un informe específico, tengo un usuario con Windows 10 Versión 22H2 Compilación del SO 19045.2728 y Chrome 111.0.5563.65 (64 bits), pero esto es lo que se devuelve al navegador:

image
image305×285 11.1 KB

El 108_2.png es un avatar.

Si reviso el mismo tema, puedo ver que estoy recibiendo la misma imagen pero con la extensión .gif y, de hecho, se carga animada para mí.

Sin embargo, al intentar acceder directamente al archivo, veo que existen dos versiones, tanto una versión .png como una versión .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

Por alguna razón, ese usuario no está recibiendo la versión gif, pero cumple con todas las configuraciones que he establecido para el plugin:

image
image1376×177 6.22 KB

1 me gusta
19

Hay dos activos estáticos que se devuelven: png y gif. En el modo “animar siempre”, el PNG se intercambia al cargar la publicación mediante un script por la versión gif.

Si el usuario está viendo con JS bloqueado, eso puede impedir la animación.

(Yo también puedo ver la animación desde mi extremo)

2 Me gusta
20

Buena observación, le preguntaré si tiene algún bloqueador de anuncios o algo que pueda interferir con el JS del sitio web.

1 me gusta
21

Parece que las páginas de usuario ahora están rotas con esto instalado, un vistazo rápido devuelve el siguiente rastreo de pila:

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

Desafortunadamente, no sé cuándo comenzó a suceder esto.

The Missing Public Profiles Mystery [Animated Avatars]
22

Todavía no he depurado nada por mi cuenta, pero se tuvo que romper entre estos dos commits, ya que revisé la diferencia de Discourse antes de actualizar ayer por la noche, y no estaba roto antes de eso.

23

También tengo problemas con el plugin de avatar animado, desde la última actualización de ayer. Si el plugin está activado, la página de mensajes (/u/username/messages) ya no carga.

Failed to load resource: the server responded with a status of 429 (Too Many Requests)

animated-bound-avatar.js:10 Uncaught TypeError: r.default.compute is not a function
    at animated-bound-avatar.js:10:1
    at helpers.js:30:1
    at index.js:4731:1
    at Object.getValue (index.js:4734:1)
    at manager.js:746:1
    at reference.js:136:1
    at e.track (validator.js:668:1)
    at f (reference.js:135:1)
    at Object.evaluate (runtime.js:3269:1)
    at Object.evaluate (runtime.js:1052:1)
    at It.evaluateSyscall (runtime.js:4263:1)
    at It.evaluateInner (runtime.js:4234:1)
    at It.evaluateOuter (runtime.js:4227:1)
    at Wt.next (runtime.js:5058:1)
    at Wt._execute (runtime.js:5045:1)
    at Wt.execute (runtime.js:5038:1)
    at zt.handleException (runtime.js:4372:1)
    at Ut.handleException (runtime.js:4580:1)
    at Ft.throw (runtime.js:4319:1)
    at $e.evaluate (runtime.js:2091:1)
    at Ft._execute (runtime.js:4306:1)
    at Ft.execute (runtime.js:4291:1)
    at Kt.rerender (runtime.js:4606:1)
    at wr.render (index.js:6751:1)
    at index.js:7013:1
    at Mt (runtime.js:4139:1)
    at Tr._renderRoots (index.js:6996:1)
    at Tr._renderRootsTransaction (index.js:7039:1)
    at Tr._revalidate (index.js:7072: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 $._end (index.ts:616:32)
    at $.end (index.ts:298:10)
    at $._run (index.ts:667:14)
    at $.run (index.ts:339:17)
    at d (index.js:109:1)
    at u.success (ajax.js:105:1)
    at l (jquery.js:3213:1)
    at Object.fireWith [as resolveWith] (jquery.js:3343:1)
    at E (jquery.js:9617:1)
    at XMLHttpRequest.<anonymous> (jquery.js:9878:1)
24

FIX: Call boundAvatar() directly (#17) · discourse/discourse-animated-avatars@f8ff4a7 · GitHub o 3.1.0.beta7 lo solucionó para mí, gracias. :slight_smile:

25

Esto no parece funcionar en Brave ni en Opera, aunque funciona en Firefox.

Brave y Opera informan de una imagen .png y no cambian a .gif.

26

Vinculación de un error reportado:

6 Me gusta
The Missing Public Profiles Mystery [Animated Avatars]
27

Las páginas de perfil también están completamente rotas para mí

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)

¿Esto podría ser una solución?

2 Me gusta