مكون Media Overlay

[david (David Taylor)]

مُتّبع من https://meta.discourse.org/t/media-overlay-plugin/60549…

موضوع تراكب الوسائط في Discourse

يتيح هذا المكون الموضوعي للمستخدمين “إخراج” الوسائط إلى نافذة عائمة أثناء تصفحهم للموقع. بل يمكنهم الانتقال إلى موضوع آخر واستمرار عمل الوسائط.

يعمل مع أي <iframe> أو <video> (مع بعض المعالجة الخاصة لـ lazyYT). ويضيف زرًا لكل عنصر متوافق، يفتح نافذة منبثقة صغيرة في الزاوية اليمنى السفلى.

يمكنك بعد ذلك “تصغير” النافذة، مما يحافظ على استمرار الصوت في الخلفية، أو إغلاقها تمامًا.

في الوقت الحالي، يتم تحديد حجم الفيديو بناءً على التضمين الأصلي. أرغب في إضافة ميزة “إعادة التحجيم”، إما عبر “النقر والسحب”، أو ببساطة ثلاثة أزرار: “صغير”، “متوسط”، “كبير”.

حاليًا، يحجب هذا المكون محرر الرسائل… الحل البسيط هو ببساطة إغلاق النافذة المنبثقة إذا أردت كتابة منشور .

التثبيت

عنوان الموضوع هو

https://github.com/davidtaylorhq/discourse-media-overlay-theme

للتثبيت، اتبع التعليمات التالية:

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

[david (David Taylor)]

@_vincent

Is there any way to make the media overlay button compatible with this YouTube player CSS hack?

Discourse Vincent theme - #89

I have fixed this with the addition of an explicit z-index, and some explicit colours. With the vincent theme it now looks like this when you mouse-over:

You may want to add some further customisation to make it match your forum’s style

[_vincent]

Thanks a lot! Works like a charm.

[_vincent]

Just noticed this little

[subtenko]

This is great! However Im not sure if its just be but while the video is playing if you:

1.change positions or minimmize and remaximize

2.pause and attempt to unpause

3. play or pause in post, and to the opposite in the media overlay

It just freezes to the default play button and video thumbnail

Anyone else have this issue?

[rkaplan]

Can you clarify - is this a them or a theme component?

[david (David Taylor)]

It is a theme component

[rkaplan]

OK works now -thank you

[Anatolia]

It might be better if we can scale the screen and move it to anywhere with mouse.

[ssvenn]

هل من المفترض أن يعمل مكون الطبقة العلوية مع الروابط المنسوخة لملفات .mp4؟ مثلما في https://meta.discourse.org/t/should-audio-and-video-tags-be-allowed/12709/7؟

لقد جربت تمكينه على منتداي، لكنه يجعل مربع الفيديو يختفي تمامًا عند عرض الفيديو كصندوق واحد من رابط mp4.
كما اختبرته مع إطارات iframe، وعمل ذلك كما هو متوقع، لكن إطارات iframe أصعب في التنسيق بشكل صحيح

[smrtey]

لقد قمنا بتثبيت هذا الميزة للتو لتمكين المستخدمين من مشاهدة جلسات الاستجواب دون الحاجة إلى فتح نافذة أخرى، وقد لقيت نجاحًا كبيرًا (كان أحد التعليقات يقول: “هذا مريح للغاية. مذهل. هذا هو أفضل واجهة منتدى جربتها على الإطلاق”)، مما دفع المستخدمين على الهواتف والأجهزة اللوحية إلى الرغبة في استخدامها أيضًا. وبما أنه لا يمكن فتح نوافذ متعددة على الأجهزة المحمولة، فإن هذه الميزة تُعد إضافة رائعة.

لتمكينها على الأجهزة اللوحية والهواتف، ما عليك سوى إزالة no-touch من السطور 64 و82 في ملف Common CSS، ثم قم بتغيير حجم مشغل الوسائط على الشاشات الأصغر باستخدام شيء مثل:

@media (max-width: 1024px) {
    #media-overlay,
    #media-overlay iframe{
        width: 400px;
        max-height: 225px;
    }
}
@media (max-width: 768px) {
    #media-overlay,
    #media-overlay iframe{
        width: 320px;
        max-height: 180px;
    }
    #media-overlay {
        &.dock-right {
            right: 10px;
        }
        &.dock-left {
            left: 10px;
        }
    }
}
@media (max-width: 480px) {
    #media-overlay,
    #media-overlay iframe {
        width: 240px;
        max-height: 135px;
    }
    #media-overlay {
        &.dock-right {
            right: 0px;
        }
        &.dock-left {
            left: 0px;
        }
    }
}

على الأجهزة التي تعمل باللمس، يُستخدم الضغط المطول (long-press) بدلاً من التحويم (hover) لإظهار أيقونة التحكم أو أدوات التحكم في الوسائط، ثم اضغط في أي مكان آخر لإخفائها مرة أخرى.

كنت سأتركها معطلة على الهواتف، لكنها لا تزال مفيدة على الهاتف لأنه يمكنك الاستماع إلى الصوت مع تصغير المشغل.

أفترض أن هذه قيود معروفة، لكن مقاطع YouTube لا تعمل بصوتها عند تصغيرها، وإذا بدأت في تشغيل فيديو من المنشور ثم قررت إخراجه في نافذة عائمة، فلا توجد طريقة لتشغيل الفيديو في تلك النافذة. يجب عليك إخراجه أولاً دون تشغيله، ثم يمكنك تشغيله في النافذة العائمة.

[orchardstreet]

هل من المفترض أن يعمل هذا مع مقاطع يوتيوب المدمجة؟

[smrtey]

يبدو أن الأمر يعمل بشكل صحيح مع مقاطع فيديو YouTube إذا قمت بنشرها كـ iFrame بدلاً من مجرد نشر الرابط واستخدام Discourse lazyYT.

لكي يعمل هذا، يجب عليك تمكين iFrames من YouTube على موقعك. للقيام بذلك، انتقل إلى الإعدادات ← “الإطارات المسموح بها” وأضف https://www.youtube.com/ إلى القائمة البيضاء.

ثم عند لصق كود iFrame (يمكنك العثور على كود iFrame لأي فيديو على YouTube تحت مشاركة ← تضمين)، سيتم تشغيل الفيديو المضمن عبر iFrame بالكامل مع مكون Media Overlay. أي أنك تحتاج إلى نشر:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Ft1waA3p2_w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

بدلاً من https://www.youtube.com/watch?v=Ft1waA3p2_w

كود iframe لن يعمل على discourse.org لأنهم لم يضيفوا https://www.youtube.com إلى قائمة “الإطارات المسموح بها” في إعداداتهم، لكن من السهل إضافته إلى منتداك الخاص.

إليك كيف يبدو الأمر على منتدانا من هاتفي مع مشغل الوسائط موسع:

ومضغوط:

[Anatolia]

@أناتوليا، مشاركة:9، موضوع:81418، كامل:صحيح

قد يكون من الأفضل إذا أمكننا تكبير الشاشة وتحريكها إلى أي مكان باستخدام الفأرة.

كما أن مقاطع الفيديو لا تستأنف التشغيل عند تغيير موقعها.

[smrtey]

إذا كنت تتحدث عن مقاطع فيديو يوتيوب، فراجع منشوري الموجود أعلاه منشورك واستخدم كود iframe ولن تواجه هذه المشكلة.

[Anatolia]

هل يمكنني تجربته على موقعكم؟

[smrtey]

بالتأكيد، إليك منشورًا يتضمن تضمين iframe من يوتيوب
https://unstuckpolitics.com/t/new-topic-do-not-read/242/53

[smrtey]

كان مكون التراكب الإعلامي يمنع عرض مقاطع الفيديو من مواقع مثل Imgur على منتدانا. قمنا بحل المشكلة بإزالة video من السطر 103، أي بتغيير $('iframe, video, .lazyYT', $elem) إلى $('iframe, .lazyYT', $elem)

    function addOverlays($elem) {
      $('iframe, video, .lazyYT', $elem).wrap("<div class='media-overlay-eligable'></div>")

الآن تعمل مقاطع فيديو Imgur مرة أخرى، ولا يزال التراكب يعمل مع iFrames و lazyYTs

[Falco]

بالنسبة للأشخاص المهتمين بهذه الميزة، فإن متصفح Safari على iOS و Firefox يقومان بذلك افتراضيًا، بينما تخطط Google Chrome لتنفيذه في إصداراتها القادمة.

[Justin_Vega]

@فالكو، مشاركة:20، موضوع:81418

تخطط كروم لتنفيذ ذلك في إصداراتها القادمة.

أليس من المخطط إصداره في جوجل كروم 82؟ أيضًا، هل هو متاح في أي من قنوات التجريب الخاصة بجوجل كروم؟