动画头像

插件
1

|||
-|-|-|
:information_source: | 摘要 | Discourse Animated Avatars 增加了用户上传 GIF 头像的功能，这些头像在帖子、用户卡片和个人资料页面上悬停或选中时会动。
:hammer_and_wrench: | 代码库链接 | \u003chttps://github.com/discourse/discourse-animated-avatars\u003e
:open_book: | 安装指南 | 如何在 Discourse 中安装插件

功能

默认情况下，当不聚焦时，动画会暂停。在主题中，当帖子未悬停或未选中时，动画会暂停。

animated_avatars_always_animate：覆盖上述暂停设置，强制头像始终动画。
animated_avatars_min_trust_level_to_display 限制按信任级别显示的头像动画。

尊重浏览器辅助功能选项中的 prefers-reduced-motion：动画将完全禁用。

配置

此插件有一个可选的 gifsicle 依赖项。它用于调整上传的 GIF 图像的大小以适应方形头像，这有助于处理纵横比，并使静态和动画图像的大小差异正常化，从而实现更平滑的切换。没有它，插件仍然可以工作，但任何非方形头像在显示时可能会显得拉伸。

要启用它，您将在 app.yml 中添加一个对安装脚本的调用。after_code 挂钩的示例看起来像这样：

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

设置

名称 描述
animated avatars min trust level to display 显示动画头像的最低信任级别
animated avatars always animate 始终为头像设置动画
22 个赞
2

你真是太棒了，有没有办法让动画一直播放，无论是否聚焦？

3 个赞
10

只是还有一个疑问，我能帮您一个忙，如何设置插件的使用者信任级别？

1 个赞
11

信任级别限制尚未实现，但很高兴知道这是一个期望的功能。我将尝试找时间尽快处理这部分。

2 个赞
12

我刚刚为请求的功能推送了两个站点设置：

animated_avatars_always_animate
以及通过信任级别限制动画：animated_avatars_min_trust_level_to_display

4 个赞
13

感谢您一直以来提供的生动选项。有几位用户一直在期待此功能。

2 个赞
14

非常感谢您推出此选项，我非常感激，也非常高兴，正是像您这样的人让世界变得更美好！

那么我有一个疑问，GIF 的默认尺寸是多少才能不被拉伸？是 50x50 吗？

15

任何介于 50px 和 200px 之间的方形尺寸都不会被拉伸。如果您使用可选的 gifsicle 依赖项，它可以为您调整上传的 gif 的大小。

16

抱歉，我知识有限，但 gifsicle 是什么？

17

gifsicle 是一个用于处理 gif 图像的软件。

它在配置部分有详细说明。

2 个赞
18

一些用户报告说，尽管媒体类型是“gif”，但头像却以“.png”格式返回。

目前我只是想了解这是否与插件/discourse/nginx或用户有关。

我已经有一个用例，其中问题是用户通过RDP访问他们的Windows机器，但在一个特定的报告中，我有一个用户运行Windows 10版本22H2操作系统内部版本19045.2728和Chrome 111.0.5563.65（64位），但这是返回给浏览器的内容：

image
image305×285 11.1 KB

108_2.png 是一个头像。

如果我查看同一个主题，我可以看到我收到了相同的图像，但扩展名为“.gif”，实际上它对我来说是动画加载的。

但是，尝试直接访问文件会显示存在两个版本，一个“.png”版本和一个“.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

出于某种原因，该用户没有收到“gif”版本，但他符合我为插件设置的所有设置：

image
image1376×177 6.22 KB

1 个赞
19

有两个静态资源会被返回——png 和 gif。在“始终动画”模式下，PNG 会在帖子加载时通过脚本替换为 gif 版本。

如果用户查看时禁用了 JavaScript，这可能会阻止动画播放。

（我这边也能看到动画）

2 个赞
20

抓得好，我会问他是否有任何广告拦截器或可能干扰网站 JavaScript 的东西。

1 个赞
21

安装此程序后，用户页面似乎已损坏，快速查看会返回以下堆栈跟踪：

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

不幸的是，我不知道这是从什么时候开始发生的。

22

我还没有自己进行任何调试，但它一定是在这两个提交之间发生的，因为我在昨晚更新之前检查了 Discourse 的差异，在那之前它并没有损坏。

23

我也遇到了 Animated Avatar Plugin 的问题，自从昨天上次升级以来。如果插件被激活，消息页面 (/u/username/messages) 就无法再加载了。

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 或 3.1.0.beta7 为我解决了这个问题，谢谢。 :slight_smile:

25

在 Brave 或 Opera 中似乎不起作用，但在 Firefox 中却可以。\n\nBrave 和 Opera 都报告了一个 .png 图像，并且没有更改为 .gif。

26

关联一个已报告的错误：

6 个赞
27

个人资料页面也完全无法使用。

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)

这可能是个修复方法？

2 个赞