Avatar animado

:information_source: Resumo O Discourse Animated Avatars adiciona a capacidade de os usuários enviarem avatares animados em gif/webp, que serão animados ao passar o mouse ou ao serem selecionados em publicações, cartões de usuário e páginas de perfil.
:hammer_and_wrench: Link do Repositório https://github.com/discourse/discourse-animated-avatars
:open_book: Guia de Instalação Como instalar plugins no Discourse

Funcionalidades

Por padrão, a animação é pausada quando não há foco. Dentro dos tópicos, a animação será pausada quando a publicação não estiver com o mouse sobre ela ou selecionada.

animated_avatars_always_animate: substitui o comportamento de pausa acima, forçando os avatares a animarem sempre.
animated_avatars_min_trust_level_to_display restringe a animação de avatares com base no nível de confiança.

Respeita a preferência prefers-reduced-motion nas opções de acessibilidade do navegador: as animações serão desativadas completamente.

Gifs animados são convertidos automaticamente para webp no envio, reduzindo o tamanho total do arquivo. Isso pode ser configurado com animated_gif_avatar_to_webp (padrão: true).

Configuração

Este plugin tem uma dependência opcional do gifsicle. Ele é usado para redimensionar imagens gif enviadas para caber em um avatar quadrado, o que ajuda a ajustar as proporções e normalizar quaisquer diferenças entre os tamanhos das imagens estáticas e animadas para uma troca mais suave. O plugin ainda funcionará sem ele, mas avatares que não sejam quadrados podem aparecer esticados quando exibidos.

:information_source: O gifsicle não é necessário para animated_gif_avatar_to_webp. Gifs animados serão convertidos para webp com avatares quadrados recortados.

Para habilitar, você deve adicionar uma chamada ao script de instalação no seu app.yml. Um exemplo de como o hook after_code ficará é o seguinte:

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

Configurações

Nome Descrição
animated avatars min trust level to display Nível de confiança mínimo para exibir um avatar animado
animated avatars always animate Sempre animar avatares
animated gif avatar to webp Converte automaticamente avatares gif animados para webp no envio, reduzindo o tamanho do arquivo. (padrão: true)
animated gif avatar webp quality A qualidade da conversão de gif para webp. Configurações recomendadas entre 75% e 100% (padrão: 80%)

Técnico

CLI adicional incluído para ajudar a determinar a contagem de avatares gif/webp e converter avatares gif existentes para webp.

bin/rake animated_avatars:count_animated conta o número total de avatares animados, agrupados por gif/webp

bin/rake animated_avatars:gif_to_webp converte avatares gif animados existentes para webp. Os novos avatares são aplicados automaticamente, e os avatares gif existentes são removidos pelo trabalho CleanUpUploads.

22 Curtiram

você é incrível por isso, existe uma maneira para a animação tocar sempre, independentemente do foco?

3 Curtiram

Só mais uma dúvida, fazendo um favor, como defino o nível de confiança de quem pode usar o plugin?

1 Curtiu

O limite por nível de confiança ainda não foi implementado, mas é bom saber que é um recurso desejado. Tentarei encontrar um tempo para trabalhar nesta parte em breve.

2 Curtiram

Acabei de enviar duas configurações de site para os recursos solicitados:

animated_avatars_always_animate
e limitando a animação por nível de confiança: animated_avatars_min_trust_level_to_display

4 Curtiram

Obrigado pela opção sempre animada. Eu tinha alguns usuários ansiosos pelo recurso

2 Curtiram

Muito obrigado por lançar essa opção, sou muito grato e fico muito feliz por isso, são pessoas como vocês que tornam o mundo melhor!

Então tenho uma dúvida, qual o tamanho padrão do GIF para não ficar esticado? 50x50?

Qualquer tamanho de quadrado entre 50px e 200px não deve ser esticado. Se você usar a dependência opcional gifsicle, ela poderá redimensionar GIFs enviados para você.

Com licença pela minha falta de conhecimento, mas o que é gifsicle?

gifsicle é um software para manipular imagens gif.

Ele é detalhado na seção de configuração.

2 Curtiram

Alguns usuários estão relatando que o avatar está sendo retornado como .png, apesar do tipo de mídia ser gif.

No momento, estou apenas tentando entender se isso pode estar relacionado ao plugin/discourse/nginx ou ao usuário.

Já tenho um caso de uso em que o problema era o usuário acessando sua máquina Windows via RDP, mas em um relatório específico, tenho um usuário com Windows 10 Versão 22H2 Build do SO 19045.2728 e Chrome 111.0.5563.65 (64 bits), mas é isso que está sendo retornado ao navegador:

O 108_2.png é um avatar.

Se eu verificar o mesmo tópico, posso ver que estou recebendo a mesma imagem, mas com a extensão .gif e, de fato, ela carrega animada para mim.

No entanto, tentar acessar o arquivo diretamente me mostra que existem duas versões, tanto uma versão .png quanto uma versão .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 algum motivo, esse usuário não está recebendo a versão gif, mas ele corresponde a todas as configurações que configurei para o plugin:

1 Curtiu

Existem dois ativos estáticos que são retornados — png e gif. No modo “animar sempre”, o PNG é trocado no carregamento da postagem por meio de um script pela versão gif.

Se o usuário estiver visualizando com JS bloqueado, isso pode impedir a animação.

(Eu também consigo ver a animação do meu lado)

2 Curtiram

Boa observação, vou perguntar a ele se ele tem algum bloqueador de anúncios ou algo que possa interferir no JS do site.

1 Curtiu

Parece que as páginas de usuário estão quebradas com isso instalado, uma rápida olhada retorna o seguinte rastreamento de pilha:

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

Infelizmente, não sei quando isso começou a acontecer.

Ainda não fiz nenhuma depuração por conta própria, mas teria que ter quebrado entre esses dois commits, pois verifiquei a diferença do Discourse antes de atualizar ontem à noite, e não estava quebrado antes disso.

Também estou tendo problemas com o Plugin Animated Avatar - desde a última atualização ontem. Se o plugin estiver ativado, a página de mensagens (/u/username/messages) não carrega mais.

Falha ao carregar recurso: o servidor respondeu com um status de 429 (Muitas Solicitações)

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)

FIX: Call boundAvatar() directly (#17) · discourse/discourse-animated-avatars@f8ff4a7 · GitHub ou 3.1.0.beta7 corrigiu para mim, obrigado. :slight_smile:

Isso não parece estar funcionando no Brave ou no Opera, embora funcione no Firefox.

Brave e Opera estão relatando uma imagem .png e não mudando para .gif.

Vinculando um bug relatado:

6 Curtiram

As páginas de perfil também estão totalmente quebradas para mim

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)

Isso pode ser uma correção?

2 Curtiram