アニメーションアバター

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

この件について、ありがとうございます。アニメーションは、フォーカスに関係なく常に再生されるようにできますか?

「いいね!」 3

プラグインを使用できるユーザーの信頼レベルをどのように設定しますか?

「いいね!」 1

信頼レベルによる制限は実装されていませんが、要望されている機能であることは承知しています。近いうちにこの部分に取り組む時間を確保するようにします。

「いいね!」 2

リクエストされた機能のサイト設定を2つプッシュしました。

animated_avatars_always_animate
および信頼レベルによるアニメーションの制限: animated_avatars_min_trust_level_to_display

「いいね!」 4

常にアニメーションオプションをありがとうございます。この機能が待ち望まれていたユーザーが数名いました。

「いいね!」 2

このオプションをリリースしていただき、誠にありがとうございます。大変感謝しており、とても嬉しいです。あなたのような人々が世界をより良くしてくれます!

それで、疑問があるのですが、GIFが引き伸ばされないようにするためのデフォルトサイズはいくつですか? 50x50ですか?

50pxから200pxまでの正方形のサイズは引き伸ばされないはずです。オプションのgifsicle依存関係を使用すると、アップロードされたGIFのサイズを変更できます。

excuse my lack of knowledge, but what is gifsicle?

gifsicle は GIF 画像を操作するためのソフトウェアです。

これは設定セクションで詳しく説明されています。

「いいね!」 2

一部のユーザーから、メディアタイプが gif であるにもかかわらず、アバターが .png として返されるという報告があります。

現時点では、それがプラグイン/ディスコース/nginx またはユーザーに関連する可能性があるかどうかを理解しようとしています。

問題がユーザーが RDP 経由で Windows マシンにアクセスしていたケースはすでにありましたが、特定のレポートでは、Windows 10 バージョン 22H2 OS ビルド 19045.2728 と Chrome 111.0.5563.65 (64bit) を使用しているユーザーがいますが、ブラウザに返されているのは次のとおりです。

108_2.png はアバターです。

同じトピックを確認すると、同じ画像が .gif 拡張子で表示され、実際にはアニメーションで読み込まれます。

ただし、ファイルを直接取得しようとすると、.png バージョンと .gif バージョンの 2 つのバージョンが存在することがわかります。

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 バージョンを受け取っていませんが、プラグイン用に設定したすべての設定に一致しています。

「いいね!」 1

静的アセットは2つあり、pngとgifが返されます。「常にアニメート」モードでは、投稿の読み込み時にスクリプトによってPNGがgifバージョンにスワップされます。

ユーザーがJSをブロックして表示している場合、アニメーションが防止される可能性があります。

(私の方でもアニメーションを確認できます)

「いいね!」 2

よく気がつきました。広告ブロッカーや、ウェブサイトのJavaScriptに影響を与える可能性のあるものを使用しているか彼に尋ねてみます。

「いいね!」 1

インストールしたところ、ユーザーページが壊れているようです。簡単に確認したところ、以下のスタックトレースが返されました。

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

残念ながら、いつから発生しているのかはわかりません。

まだ自分でデバッグはしていませんが、この2つのコミットの間で壊れたはずです。なぜなら、昨日夕方にアップデートする前にDiscourseの差分を確認したところ、それ以前は壊れていなかったからです。

Animated Avatar プラグインでも問題が発生しています。昨日の最後のアップグレード以降、プラグインを有効にすると、メッセージページ (/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)

FIX: Call boundAvatar() directly (#17) · discourse/discourse-animated-avatars@f8ff4a7 · GitHub または 3.1.0.beta7 で修正されました。ありがとうございます。 :slight_smile:

Brave や Opera では動作していないようですが、Firefox では動作しています。

Brave と Opera は両方とも .png 画像を報告しており、.gif に変更されていません。

報告されたバグの相互リンク:

「いいね!」 6

プロフィールページも完全に壊れています。

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