Avatar animé

Personnalisation Greffon
1
:information_source: Résumé Discourse Animated Avatars permet aux utilisateurs de télécharger des avatars animés au format gif/webp, qui s’animeront au survol ou à la sélection dans les publications, les cartes utilisateurs et les pages de profil.
:hammer_and_wrench: Lien du dépôt https://github.com/discourse/discourse-animated-avatars
:open_book: Guide d’installation Comment installer des plugins dans Discourse

Fonctionnalités

Par défaut, l’animation est en pause lorsque l’élément n’est pas focalisé. Dans les sujets, l’animation est en pause lorsque la publication n’est pas survolée ou sélectionnée.

animated_avatars_always_animate : annule la mise en pause ci-dessus et force les avatars à s’animer en permanence.
animated_avatars_min_trust_level_to_display : restreint l’animation des avatars en fonction du niveau de confiance.

Respecte l’option d’accessibilité « prefers-reduced-motion » du navigateur : les animations seront désactivées entièrement.

Les gifs animés sont automatiquement convertis en webp lors du téléversement, réduisant ainsi la taille globale des fichiers. Cela peut être configuré avec animated_gif_avatar_to_webp (valeur par défaut : true).

Configuration

Ce plugin a une dépendance optionnelle envers gifsicle. Celui-ci est utilisé pour redimensionner les images gif téléversées afin qu’elles s’adaptent à un avatar carré, ce qui aide à maîtriser les rapports d’aspect ainsi qu’à normaliser les différences de taille entre les images statiques et animées pour un basculement plus fluide. Le plugin fonctionnera toujours sans gifsicle, mais les avatars non carrés peuvent apparaître étirés à l’affichage.

:information_source: gifsicle n’est pas nécessaire pour animated_gif_avatar_to_webp. Les gifs animés seront convertis en webp avec des avatars carrés recadrés.

Pour l’activer, vous devrez ajouter un appel au script d’installation dans votre app.yml. Un exemple de ce à quoi ressemblerait le hook after_code est le suivant :

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

Paramètres

Nom Description
animated avatars min trust level to display Niveau de confiance minimal pour afficher un avatar animé
animated avatars always animate Toujours animer les avatars
animated gif avatar to webp Convertit automatiquement les avatars gif animés en webp lors du téléversement, réduisant la taille des fichiers. (valeur par défaut : true)
animated gif avatar webp quality La qualité de la conversion de gif en webp. Réglages recommandés entre 75 % et 100 % (valeur par défaut : 80 %)

Technique

Une CLI supplémentaire est incluse pour aider à déterminer le nombre d’avatars gif/webp et à convertir les avatars gif existants en webp.

bin/rake animated_avatars:count_animated compte le nombre total d’avatars animés, groupés par gif/webp

bin/rake animated_avatars:gif_to_webp convertit les avatars gif animés existants en webp. Les nouveaux avatars sont appliqués automatiquement et les avatars gif existants sont supprimés par le travail CleanUpUploads.

22 « J'aime »
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

vous êtes génial pour ça, y a-t-il un moyen pour que l’animation joue toujours, quel que soit le focus ?

3 « J'aime »
10

Juste un autre doute pour vous rendre service, comment définir le niveau de confiance de ceux qui peuvent utiliser le plugin ?

1 « J'aime »
11

La limitation par niveau de confiance n’a pas été implémentée, mais il est bon de savoir que c’est une fonctionnalité souhaitée. J’essaierai de trouver du temps pour travailler sur cette partie bientôt.

2 « J'aime »
12

J’ai juste envoyé deux paramètres de site pour les fonctionnalités demandées :

animated_avatars_always_animate
et la limitation de l’animation par niveau de confiance : animated_avatars_min_trust_level_to_display

4 « J'aime »
13

Merci pour l’option toujours animée. J’avais quelques utilisateurs qui réclamaient cette fonctionnalité.

2 « J'aime »
14

Merci beaucoup d’avoir proposé cette option, je vous en suis très reconnaissant et j’en suis très heureux, ce sont des gens comme vous qui rendent le monde meilleur !

J’ai donc un doute, quelle est la taille par défaut du GIF pour qu’il ne soit pas étiré ? 50x50 ?

15

Toute taille de carré comprise entre 50px et 200px ne doit pas être étirée. Si vous utilisez la dépendance optionnelle gifsicle, celle-ci peut redimensionner les gifs téléchargés pour vous.

16

Excusez mon manque de connaissances, mais qu’est-ce que gifsicle ?

17

gifsicle est un logiciel de manipulation d’images gif.

Il est détaillé dans la section de configuration.

2 « J'aime »
18

Certains utilisateurs signalent que l’avatar est renvoyé en .png alors que le type de média est gif.

Pour le moment, j’essaie juste de comprendre si cela pourrait être lié au plugin/discourse/nginx ou à l’utilisateur.

J’ai déjà un cas d’utilisation où le problème était l’utilisateur accédant à sa machine Windows via RDP, mais dans un rapport spécifique, j’ai un utilisateur avec Windows 10 Version 22H2 OS Build 19045.2728 et Chrome 111.0.5563.65 (64 bits), mais voici ce qui est renvoyé au navigateur :

image
image305×285 11.1 KB

Le 108_2.png est un avatar.

Si je vérifie le même sujet, je peux voir que je reçois la même image mais avec l’extension .gif et en fait, elle se charge de manière animée pour moi.

Cependant, essayer d’atteindre le fichier directement me montre que deux versions existent, une version .png et une version .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

Pour une raison quelconque, cet utilisateur ne reçoit pas la version gif, mais il correspond à tous les paramètres que j’ai configurés pour le plugin :

image
image1376×177 6.22 KB

1 « J'aime »
19

Il y a deux ressources statiques qui sont retournées : png et gif. En mode « toujours animer », le PNG est remplacé au chargement du post via un script par la version gif.

Si l’utilisateur visualise avec JS bloqué, cela peut empêcher l’animation.

(Je suis également en mesure de voir l’animation de mon côté)

2 « J'aime »
20

Bien vu, je vais lui demander s’il a un bloqueur de publicités ou quoi que ce soit qui pourrait interférer avec le JS du site web.

1 « J'aime »
21

Il semble que les pages utilisateur soient maintenant cassées avec ceci installé, un coup d’œil rapide renvoie la trace de pile suivante :

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

Malheureusement, je ne sais pas quand cela a commencé à se produire.

The Missing Public Profiles Mystery [Animated Avatars]
22

Je n’ai pas encore fait de débogage moi-même, mais cela aurait dû casser entre ces deux commits, car j’ai vérifié la différence de Discourse avant la mise à jour hier soir, et ce n’était pas cassé avant cela.

23

J’ai aussi des problèmes avec le plugin Animated Avatar - depuis la dernière mise à niveau hier. Si le plugin est activé, la page des messages (/u/username/messages) ne se charge plus.

Échec du chargement de la ressource : le serveur a répondu avec un statut de 429 (Trop de requêtes)

animated-bound-avatar.js:10 Uncaught TypeError: r.default.compute n'est pas une fonction
    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 ou 3.1.0.beta7 l’a résolu pour moi, merci. :slight_smile:

25

Cela ne semble pas fonctionner dans Brave ou Opera, bien que cela fonctionne dans Firefox.

Brave et Opera signalent tous deux une image .png et ne changent pas en .gif.

26

Liaison d’un bug signalé :

6 « J'aime »
The Missing Public Profiles Mystery [Animated Avatars]
27

Les pages de profil sont également complètement cassées pour moi

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)

Ceci pourrait être une solution ?

2 « J'aime »