Avatar animé

Greffon
1

|||
-|-|-|
:information_source: | Résumé | Discourse Animated Avatars ajoute la possibilité pour les utilisateurs de télécharger des avatars gif qui s’animeront au survol ou à la sélection dans les publications, les cartes utilisateur et les pages de profil.
:hammer_and_wrench: | Lien du dépôt | \u003chttps://github.com/discourse/discourse-animated-avatars\u003e
:open_book: | Guide d’installation | Comment installer des plugins dans Discourse

Fonctionnalités

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

animated_avatars_always_animate : remplace la mise en pause ci-dessus, force les avatars à toujours s’animer.
animated_avatars_min_trust_level_to_display : restreint l’animation des avatars par niveau de confiance.

Respecte prefers-reduced-motion dans les options d’accessibilité du navigateur : les animations seront entièrement désactivées.

Configuration

Ce plugin a une dépendance optionnelle à gifsicle. Il est utilisé pour redimensionner les images gif téléchargées afin qu’elles correspondent à un avatar carré, ce qui aide à gérer les rapports d’aspect ainsi qu’à normaliser les différences de taille entre les images statiques et animées pour un échange plus fluide. Le plugin fonctionnera toujours sans lui, mais les avatars non carrés peuvent apparaître étirés lorsqu’ils sont affichés.

Pour activer, vous ajouterez un appel au script d’installation dans votre app.yml. Un exemple de ce à quoi ressemblera 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 minimum pour afficher un avatar animé
animated avatars always animate Toujours animer les avatars
22 « J'aime »
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.

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