애니메이션 아바타

:information_source: 요약 Discourse Animated Avatars 플러그인은 사용자가 애니메이션 gif/webp 아바타를 업로드할 수 있는 기능을 추가하며, 게시글, 사용자 카드, 프로필 페이지에서 호버 또는 선택 시 애니메이션이 재생됩니다.
:hammer_and_wrench: 리포지토리 링크 https://github.com/discourse/discourse-animated-avatars
:open_book: 설치 가이드 Discourse에서 플러그인 설치 방법

기능

기본적으로 포커스가 없을 때 애니메이션을 일시 중지합니다. 토픽 내에서 게시글에 호버하거나 선택하지 않을 때 애니메이션이 일시 중지됩니다.

animated_avatars_always_animate: 위의 일시 중지를 무시하고 아바타가 항상 애니메이션되도록 강제합니다.
animated_avatars_min_trust_level_to_display: 신뢰 수준에 따라 아바타 애니메이션을 제한합니다.

브라우저의 접근성 옵션인 prefers-reduced-motion을 존중합니다: 애니메이션이 완전히 비활성화됩니다.

애니메이션 gif는 업로드 시 자동으로 webp로 변환되어 전체 파일 크기를 줄입니다. 이는 animated_gif_avatar_to_webp 설정으로 변경할 수 있습니다(기본값: true).

설정

이 플러그인은 gifsicle에 대한 선택적 종속성이 있습니다. 이는 업로드된 gif 이미지를 정사각형 아바타에 맞게 리사이즈하는 데 사용되며, 종횡비를 정리하고 정적 이미지와 애니메이션 이미지의 크기 차이를 정규화하여 더 매끄러운 전환을 돕습니다. gifsicle이 없어도 플러그인은 기능하지만, 정사각형이 아닌 아바타는 표시될 때 늘어져 보일 수 있습니다.

:information_source: animated_gif_avatar_to_webp에는 gifsicle이 필요하지 않습니다. 애니메이션 gif는 잘린 정사각형 아바타로 webp에 변환됩니다.

활성화하려면 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 아바타를 항상 애니메이션 처리
animated gif avatar to webp 업로드 시 애니메이션 gif 아바타를 자동으로 webp로 변환하여 파일 크기를 줄입니다. (기본값: true)
animated gif avatar webp quality gif에서 webp로 변환된 품질. 75%에서 100% 사이를 권장합니다 (기본값: 80%)

기술적 사항

gif/webp 아바타 수를 확인하고 기존 gif 아바타를 webp로 변환하는 데 도움이 되는 추가 CLI가 포함되어 있습니다.

bin/rake animated_avatars:count_animated는 gif/webp별로 그룹화된 애니메이션 아바타의 총 수를 계산합니다.

bin/rake animated_avatars:gif_to_webp는 기존 애니메이션 gif 아바타를 webp로 변환합니다. 새로운 아바타는 자동으로 적용되며, 기존 gif 아바타는 CleanUpUploads 작업에 의해 삭제됩니다.

22개의 좋아요

이것 때문에 정말 감사해요. 포커스 상태와 관계없이 애니메이션이 항상 재생되도록 하는 방법이 있을까요?

3개의 좋아요

다시 한번 여쭤볼게요. 플러그인을 사용할 사용자의 신뢰 수준은 어떻게 설정하나요?

1개의 좋아요

신뢰 수준에 따른 제한은 아직 구현되지 않았지만, 이것이 원하는 기능이라는 점은 좋습니다. 곧 시간을 내서 이 부분을 작업해 보겠습니다.

2개의 좋아요

요청하신 기능에 대한 사이트 설정 두 가지를刚才 추가했습니다:

animated_avatars_always_animate
그리고 신뢰 수준에 따른 애니메이션 제한: animated_avatars_min_trust_level_to_display

4개의 좋아요

항상 생동감 있는 옵션을 제공해 주셔서 감사합니다. 해당 기능을 원하는 사용자가 몇 명 있었습니다.

2개의 좋아요

이 옵션을 출시해 주셔서 정말 감사합니다. 정말 감사하고 기쁩니다. 여러분 같은 분들이 세상을 더 나은 곳으로 만들어 주시죠!

혹시 궁금한 점이 하나 있습니다. GIF가 늘어나지 않도록 하기 위한 기본 크기는 무엇인가요? 50x50인가요?

50px에서 200px 사이의 정사각형 크기는 늘려서 표시되어서는 안 됩니다. 선택 사항인 gifsicle 의존성을 사용하면 업로드된 GIF를 자동으로 리사이즈할 수 있습니다.

지식 부족을 용서해 주시겠지만, gifsicle이란 무엇인가요?

gifsicle는 gif 이미지를 조작하는 소프트웨어입니다.

상세 내용은 설정 섹션에서 확인할 수 있습니다.

2개의 좋아요

일부 사용자는 미디어 타입이 gif임에도 불구하고 아바타가 .png로 반환된다고 보고하고 있습니다.

현재 이 문제가 플러그인, Discourse, nginx 또는 사용자 측과 관련이 있을 수 있는지 파악하려는 단계입니다.

이미 RDP를 통해 Windows 머신에 접근하는 사용자로 인해 문제가 발생한 사례가 있었지만, 특정 보고에서는 Windows 10 Version 22H2 OS Build 19045.2728과 Chrome 111.0.5563.65 (64bit)를 사용하는 사용자가 있으며, 브라우저에 반환되는 내용은 다음과 같습니다:

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 버전을 수신하지 못하고 있습니다. 하지만 플러그인에 대해 설정한 모든 조건을 충족하고 있습니다:

1개의 좋아요

png와 gif 두 가지 정적 자산이 반환됩니다. “항상 애니메이션” 모드에서는 스크립트를 통해 게시물이 로드될 때 PNG가 gif 버전으로 교체됩니다.

사용자가 JS가 차단된 상태로 보고 있다면, 이로 인해 애니메이션이 재생되지 않을 수 있습니다.

(제 쪽에서는 애니메이션이 정상적으로 보입니다)

2개의 좋아요

좋은 지적이네요. 그분에게 광고 차단기나 웹사이트 JS에 영향을 줄 수 있는 다른 것이 있는지 물어보겠습니다.

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

불행히도 이 문제가 언제부터 발생했는지 알지 못합니다.

아직 직접 디버깅을 해보지는 않았지만, 어제 저녁 업데이트 전에 Discourse의 diff를 확인했을 때 문제가 없었기 때문에, 오류는 이 두 커밋 사이에서 발생했을 수밖에 없습니다.

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

Firefox에서는 작동하지만, Brave나 Opera에서는 작동하지 않는 것 같습니다.

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개의 좋아요