أفاتار متحرك

: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 المرفوعة لتناسب صورة رمزية مربعة، مما يساعد على ضبط نسب العرض إلى الارتفاع، بالإضافة إلى توحيد أي اختلافات في الأحجام بين الصور الثابتة والمتحركة للحصول على تبديل أكثر سلاسة. ستعمل الإضافة بشكل صحيح حتى بدونها، ولكن قد تظهر الصور الرمزية غير المربعة ممدودة عند عرضها.

:information_source: لا حاجة إلى gifsicle لاستخدام animated_gif_avatar_to_webp. سيتم تحويل ملفات 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%)

تقني

تتضمن الإضافة أوامر سطر أوامر إضافية (CLI) للمساعدة في تحديد عدد صور gif/webp الرمزية، وتحويل صور gif الرمزية الموجودة إلى صيغة webp.

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؟

لا ينبغي تمديد أي حجم مربع بين 50 بكسل و 200 بكسل. إذا كنت تستخدم تبعية gifsicle الاختيارية، فيمكنها تغيير حجم صور GIF التي تم تحميلها لك.

عذرًا على قلة معرفتي، ولكن ما هو gifsicle؟

gifsicle هو برنامج لمعالجة صور gif.

وهو مفصل في قسم الإعدادات.

إعجابَين (2)

يبلغ بعض المستخدمين عن إرجاع الصورة الرمزية كـ .png على الرغم من أن نوع الوسائط هو gif.

في الوقت الحالي، أحاول فقط فهم ما إذا كان شيئًا يمكن أن يرتبط بالمكون الإضافي/discourse/nginx أو المستخدم.

لقد واجهت بالفعل حالة استخدام كان فيها الخطأ هو وصول المستخدم إلى جهاز الكمبيوتر الذي يعمل بنظام Windows عبر RDP ولكن في تقرير معين، لدي مستخدم لديه Windows 10 الإصدار 22H2 OS Build 19045.2728 و Chrome 111.0.5563.65 (64 بت) ولكن هذا ما يتم إرجاعه إلى المتصفح:

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.

إذا كان المستخدم يعرض الصفحة مع تعطيل JavaScript، فقد يمنع ذلك التحريك.

(أنا قادر أيضًا على رؤية التحريك من جانبي)

إعجابَين (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

للأسف، لا أعرف متى بدأ هذا يحدث.

لم أقم بأي تصحيح للأخطاء بنفسي بعد، ولكن كان يجب أن يتعطل بين هذين الالتزامين، حيث قمت بفحص فرق Discourse قبل التحديث مساء أمس، ولم يكن معطلاً قبل ذلك.

أواجه مشاكل مع إضافة Animated Avatar أيضًا - منذ آخر ترقية بالأمس. إذا تم تنشيط الإضافة، فإن صفحة الرسائل (/u/username/messages) لا يتم تحميلها بعد الآن.

فشل تحميل المورد: استجاب الخادم بحالة 429 (طلبات كثيرة جدًا)

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)