Avatar Animado

Plugin
1

|||
-|-|-|
:information_source: | Resumen | Discourse Animated Avatars añade la capacidad para que los usuarios suban avatares de gif 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 | \u003chttps://github.com/discourse/discourse-animated-avatars\u003e
:open_book: | Guía de Instalación | Cómo instalar plugins en Discourse

Características

Por defecto, esto pausa la animación cuando no está enfocada. Dentro de los temas, la animación se pausará cuando la publicación no esté en foco o seleccionada.

animated_avatars_always_animate: anula la pausa anterior, fuerza a los avatares a animarse siempre.
animated_avatars_min_trust_level_to_display restringe la animación de avatares por nivel de confianza.

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

Configuración

Este plugin tiene una dependencia opcional de gifsicle. Esto se utiliza para redimensionar las imágenes gif subidas para que encajen en un avatar cuadrado, lo que ayuda a controlar las relaciones de aspecto y a normalizar cualquier diferencia entre los tamaños de las imágenes estáticas y animadas para un intercambio más fluido. El plugin seguirá funcionando sin él, pero los avatares que no sean cuadrados pueden aparecer estirados cuando se muestren.

Para habilitarlo, añadirá una llamada al script de instalación en su app.yml. Un ejemplo de cómo será 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
Nivel de confianza mínimo para mostrar avatares animados Nivel de confianza mínimo para mostrar un avatar animado
Siempre animar avatares Animar siempre los avatares
22 Me gusta
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.

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
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