Media Overlay コンポーネント

[david (David Taylor)]

https://meta.discourse.org/t/media-overlay-plugin/60549… の続きから

Discourse メディアオーバーレイテーマ

このテーマコンポーネントを使用すると、ユーザーはサイトを閲覧しながらメディアを「ポップアウト」して浮動ウィンドウとして表示できます。さらに、別のトピックに移動してもメディアの再生は継続されます。

これは任意の <iframe> または <video> と連携します（lazyYT には特別な処理が必要です）。対応する要素ごとにボタンが追加され、それをクリックすると右下に小さなポップアップが開きます。

その後、ポップアップを「最小化」してバックグラウンドで音声を継続させたり、完全に閉じたりできます。

現時点では、動画のサイズは元の埋め込み設定によって決定されます。「リサイズ」機能（ドラッグ＆ドロップによる調整、または「小」「中」「大」の 3 つのボタン）の追加を検討しています。

現在、この機能はコンポーザーを隠してしまう場合があります。投稿を作成したい場合は、ポップアップを閉じるという簡単な解決策があります 。

インストール

テーマの URL は以下の通りです。

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]

Is the overlay component supposed to work with pasted links to .mp4 files? Like in Should audio and video tags be allowed? ?

I tried enabling it on my forum and it makes the video box disappear completely when the video is oneboxed from a mp4 link.
I’ve also tested it with iframes and that makes it works as expected, but iframes are trickier to format properly

[smrtey]

We just installed this so users could watch impeachment hearings without having to have another window open and it was such a hit (one comment was “This is very convenient. Amazing. This is by far the best forum interface I’ve ever experienced.”) that people on phones and tablets wanted it too. And since you can’t have multiple windows open on your mobile device, it’s a great feature to have.

To enable it on tablets and phones, just remove no-touch from lines 64 and 82 of Common CSS, and then resize the player on smaller screens with something like:

@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;
        }
    }
}

On touch devices, long-press = hover to bring up the control icon or the media controls, and then tap somewhere else to hide it again.

I was going to leave it off phones, but it’s still useful on a phone because you can listen to the audio with the player collapsed.

I assume this is a known limitation, but YouTubes won’t play audio when collapsed, and if you start to play a YouTube from the post and then decide to pop it out, there is no way to play the video in the floating window. You have to pop it out first without playing it, and then you can play it in the floating window.

[orchardstreet]

is this supposed to work with embedded youtube vids?

[smrtey]

It seems to work correctly with YouTube videos if you post them as an iFrame instead of just posting the link and using the Discourse lazyYT.

In order to for this to work, you must enable YouTube iFrames on your site. To do this go to Settings --> “allowed iframes” and whitelist https://www.youtube.com/

Then when you paste an iFrame code (you can find the iFrame code for any video on Youtube under Share --> Embed) the YouTube embedded via iFrame will be fully functional with the Media Overlay component. I.e. you need to post:

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

instead of https://www.youtube.com/watch?v=Ft1waA3p2_w

The iframe code won’t work on discourse.org because they haven’t whitelisted https://www.youtube.com in their “allowed iframes” settings, but it’s easy to add to your own forum.

Here’s how it looks on our forum on my phone with the media player expanded:

and collapsed:

[Anatolia]

@Anatolia

画面を拡大縮小し、マウスで任意の位置に移動できるようになれば、より良いかもしれません。

また、位置を変更すると動画の再生が再開されません。

[smrtey]

YouTubeの動画についてお話しされている場合は、私の前の投稿を参照してiframeコードを使用してください。そうすれば、この問題は発生しません。

[Anatolia]

あなたのサイトで試すことはできますか？

[smrtey]

はい、YouTube の iframe を埋め込んだ投稿はこちらです
https://unstuckpolitics.com/t/new-topic-do-not-read/242/53

[smrtey]

メディアオーバーレイコンポーネントが、imgur などのサイトの動画を当フォーラムに表示できない原因となっていました。この問題は、103 行目の video を削除することで解決しました。具体的には、 $('iframe, video, .lazyYT', $elem) を $('iframe, .lazyYT', $elem) に変更しました。

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

これにより、imgur の動画が再び動作するようになり、オーバーレイ機能は iFrame や lazyYT とも正常に連携しています。

[Falco]

この機能に関心のある方へ、iOS の Safari と Firefox は標準でこの対応を行っており、Chrome も次のバージョンで対応を予定しています。

[Justin_Vega]

@Falco

Chrome は次のバージョンでそれを計画しています。

Google Chrome 82 でリリースされる予定ではないのですか？また、Google Chrome のインサイダーチャンネルのいずれかで利用可能ですか？