Avatar animato

Personalizzazione Plugin
1
:information_source: Sommario Discourse Animated Avatars aggiunge la possibilità per gli utenti di caricare avatar animati in formato gif/webp, che si animeranno al passaggio del mouse o alla selezione nei post, nelle schede utente e nelle pagine profilo.
:hammer_and_wrench: Link al repository https://github.com/discourse/discourse-animated-avatars
:open_book: Guida all’installazione Come installare i plugin in Discourse

Funzionalità

Per impostazione predefinita, l’animazione si mette in pausa quando l’elemento non è focalizzato. All’interno dei topic, l’animazione si metterà in pausa quando il post non viene evidenziato al passaggio del mouse o non è selezionato.

animated_avatars_always_animate: sostituisce la messa in pausa descritta sopra, forzando gli avatar ad animarsi sempre.
animated_avatars_min_trust_level_to_display limita l’animazione degli avatar in base al livello di fiducia.

Rispetta l’impostazione prefers-reduced-motion nelle opzioni di accessibilità del browser: le animazioni verranno disabilitate completamente.

Le gif animate vengono convertite automaticamente in webp al caricamento, riducendo la dimensione complessiva del file. Questo può essere configurato con animated_gif_avatar_to_webp (valore predefinito: true).

Configurazione

Questo plugin ha una dipendenza opzionale da gifsicle. Viene utilizzato per ridimensionare le immagini gif caricate per adattarle a un avatar quadrato, il che aiuta a gestire i rapporti di aspetto e a normalizzare le differenze di dimensione tra le immagini statiche e animate per un passaggio più fluido. Il plugin funzionerà comunque senza di esso, ma gli avatar non quadrati potrebbero apparire distesi quando visualizzati.

:information_source: gifsicle non è necessario per animated_gif_avatar_to_webp. Le gif animate verranno convertite in webp con avatar quadrati ritagliati.

Per abilitarlo, è necessario aggiungere una chiamata allo script di installazione nel file app.yml. Un esempio di come apparirà l’hook after_code è il seguente:

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

Impostazioni

Nome Descrizione
animated avatars min trust level to display Livello di fiducia minimo per visualizzare un avatar animato
animated avatars always animate Anima sempre gli avatar
animated gif avatar to webp Converte automaticamente gli avatar gif animati in webp al caricamento, riducendo la dimensione del file. (predefinito: true)
animated gif avatar webp quality La qualità della conversione da gif a webp. Impostazioni consigliate tra il 75% e il 100% (predefinito: 80%)

Tecnico

È inclusa una CLI aggiuntiva per aiutare a determinare il numero di avatar gif/webp e per convertire gli avatar gif esistenti in webp.

bin/rake animated_avatars:count_animated conta il numero totale di avatar animati, raggruppati per formato gif/webp

bin/rake animated_avatars:gif_to_webp converte gli avatar gif animati esistenti in webp. I nuovi avatar vengono applicati automaticamente e gli avatar gif esistenti vengono rimossi dal job CleanUpUploads.

22 Mi Piace
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

sei fantastico per questo, c’è un modo per far sì che l’animazione venga sempre riprodotta, indipendentemente dal focus?

3 Mi Piace
10

Solo un altro dubbio, per favore, come imposto il livello di fiducia di chi utilizzare il plugin?

1 Mi Piace
11

Non è stato implementato un limite per livello di fiducia, ma è utile sapere che è una funzionalità desiderata. Cercherò di trovare del tempo per lavorare presto su questa parte.

2 Mi Piace
12

Ho appena caricato due impostazioni del sito per le funzionalità richieste:

animated_avatars_always_animate
e il limite dell’animazione per livello di fiducia: animated_avatars_min_trust_level_to_display

4 Mi Piace
13

Grazie per l’opzione sempre animata. Avevo un paio di utenti che desideravano questa funzionalità

2 Mi Piace
14

Grazie mille per aver rilasciato questa opzione, ti sono molto grato e ne sono molto felice, sono persone come te che rendono il mondo migliore!

Quindi ho un dubbio, qual è la dimensione predefinita della GIF per non farla allungare? 50x50?

15

Qualsiasi dimensione quadrata tra 50px e 200px non dovrebbe essere allungata. Se si utilizza la dipendenza opzionale gifsicle, questa può ridimensionare le gif caricate per l’utente.

16

Mi scusi per la mia ignoranza, ma cos’è gifsicle?

17

gifsicle è un software per la manipolazione di immagini gif.

È dettagliato nella sezione di configurazione.

2 Mi Piace
18

Alcuni utenti segnalano che l’avatar viene restituito come .png nonostante il tipo di media sia gif.

Al momento sto solo cercando di capire se possa essere correlato al plugin/discourse/nginx o all’utente.

Ho già un caso d’uso in cui il problema era l’utente che accedeva alla propria macchina Windows tramite RDP, ma in un report specifico ho un utente con Windows 10 Versione 22H2 OS Build 19045.2728 e Chrome 111.0.5563.65 (64 bit), ma questo è ciò che viene restituito al browser:

image
image305×285 11.1 KB

Il file 108_2.png è un avatar.

Se controllo lo stesso argomento, posso vedere che ricevo la stessa immagine ma con estensione .gif e infatti per me si carica animata.

Tuttavia, cercando di raggiungere direttamente il file, vedo che esistono due versioni, sia una versione .png che una versione .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

Per qualche motivo, quell’utente non riceve la versione gif, ma corrisponde a tutte le impostazioni che ho configurato per il plugin:

image
image1376×177 6.22 KB

1 Mi Piace
19

Ci sono due asset statici che vengono restituiti: png e gif. In modalità “anima sempre”, il PNG viene sostituito al caricamento del post tramite uno script con la versione gif.

Se l’utente sta visualizzando con JS bloccato, ciò potrebbe impedire l’animazione.

(Sono anche in grado di vedere l’animazione dalla mia parte)

2 Mi Piace
20

Ottima osservazione, gli chiederò se ha qualche ad blocker o qualcosa che potrebbe interferire con il JS del sito web.

1 Mi Piace
21

Sembra che le pagine utente siano ora interrotte con questo installato, una rapida occhiata restituisce il seguente stack trace:

Uncaught TypeError: r.default.compute non è una funzione
    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

Sfortunatamente non so quando ha iniziato a succedere.

The Missing Public Profiles Mystery [Animated Avatars]
22

Non ho ancora fatto alcun debug da solo, ma si sarebbe dovuto rompere tra questi due commit, dato che ho controllato il diff di Discourse prima di aggiornare ieri sera, e non era rotto prima di allora.

23

Ho anche problemi con il plugin Avatar Animato, dall’ultimo aggiornamento di ieri. Se il plugin è attivato, la pagina dei messaggi (/u/username/messages) non viene più caricata.

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 l’ha risolto per me, grazie. :slight_smile:

25

Questo non sembra funzionare in Brave o Opera, anche se funziona in Firefox.

Sia Brave che Opera segnalano un’immagine .png e non cambiano in .gif.

26

Collegamento incrociato di un bug segnalato:

6 Mi Piace
The Missing Public Profiles Mystery [Animated Avatars]
27

Le pagine del profilo sono anche completamente rotte per me

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)

Potrebbe essere una soluzione?

2 Mi Piace