Media Overlay component

[david (David Taylor)]

Continuing from https://meta.discourse.org/t/media-overlay-plugin/60549…

Discourse Media Overlay Theme

This theme component allows users to “pop out” media into a floating window while they browse the site. They can even navigate to a different topic and the media will continue working.

It works with any <iframe> or <video> (with some special treatment for lazyYT). It adds a button to every compatible thing, which then opens a little popup in the bottom right.

You can then “minimise” it, which keeps the audio going in the background, or completely close it.

At the moment the size of the video is decided by the original embed. I’d like to add a “resizing” feature, either a “click and drag”, or just simply 3 buttons “small”, “medium”, “large”.

Currently this obscures the composer… simple solution is to just close the popup if you want to write a post .

Installation

The theme URL is

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

To install, follow these instructions:

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 파일 링크를 붙여넣었을 때 작동하도록 설계된 건가요? Should audio and video tags be allowed? - #7 by codinghorror 와 같은 경우처럼요.

내 포럼에서 이를 활성화해 보았는데, mp4 링크에서 원박스(onebox)로 가져온 영상의 경우 비디오 박스가 완전히 사라지는 문제가 발생했습니다. iframe으로 테스트해 보니 예상대로 작동했지만, iframe은 올바르게 포맷하는 것이 더 까다롭습니다

[smrtey]

사용자들이 다른 창을 열지 않고도 탄핵 심문 중계를 볼 수 있도록 이 기능을 막 설치했는데, 반응이 매우 뜨거웠습니다 (한 사용자는 "정말 편리해요. 놀라울 정도로, 지금까지 경험한 포럼 인터페이스 중 단연 최고입니다."라고 댓글을 달았죠). 덕분에 스마트폰과 태블릿 사용자들도 이 기능을 원하게 되었습니다. 모바일 기기에서는 여러 창을 동시에 열 수 없기 때문에, 이 기능은 매우 유용합니다.

태블릿과 스마트폰에서도 이 기능을 사용하려면 Common CSS의 64번 줄과 82번 줄에서 no-touch를 제거한 후, 다음과 같은 코드를 추가하여 작은 화면에서 플레이어 크기를 조정하세요:

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

터치 기기에서는 길게 누르면(hover) 컨트롤 아이콘이나 미디어 컨트롤이 표시되고, 다른 곳을 탭하면 다시 숨겨집니다.

스마트폰에서는 이 기능을 비활성화할까 고민했지만, 플레이어가 접힌 상태에서도 오디오를 들을 수 있으므로 여전히 유용합니다.

이것은 알려진 제한 사항이라고 생각하지만, 유튜브는 접힌 상태에서 오디오가 재생되지 않습니다. 게시글에서 유튜브 재생을 시작했는데 나중에 팝아웃을 결정했다면, 플로팅 창에서 영상을 재생할 수 있는 방법이 없습니다. 먼저 재생하지 않은 상태에서 팝아웃을 한 후에야 플로팅 창에서 재생할 수 있습니다.

[orchardstreet]

이것은 임베디드 YouTube 영상과 함께 작동하도록 설계된 건가요?

[smrtey]

링크를 단순히 붙여넣고 Discourse의 lazyYT를 사용하는 대신, YouTube 영상을 iFrame으로 게시하면 정상적으로 작동하는 것 같습니다.

이렇게 작동하려면 사이트에서 YouTube iFrame을 활성화해야 합니다. 설정 → "허용된 iFrame"으로 이동하여 https://www.youtube.com/을 화이트리스트에 추가하세요.

그런 다음 iFrame 코드를 붙여넣으면(YouTube에서 어떤 영상이든 공유 → 임베드에서 iFrame 코드를 찾을 수 있습니다) iFrame을 통해 임베드된 YouTube 영상이 미디어 오버레이(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에서는 작동하지 않습니다. 왜냐하면 해당 사이트의 “허용된 iFrame” 설정에 https://www.youtube.com이 화이트리스트에 추가되어 있지 않기 때문입니다. 하지만 자신의 포럼에는 쉽게 추가할 수 있습니다.

우리 포럼에서 미디어 플레이어를 확장했을 때 제 휴대폰으로 보이는 모습은 다음과 같습니다:

그리고 축소했을 때:

[Anatolia]

@Anatolia

화면을 확대/축소하고 마우스로 원하는 위치로 이동할 수 있다면 더 좋을 것 같습니다.

또한 위치를 변경하면 비디오가 다시 재생되지 않습니다.

[smrtey]

유튜브 영상에 대해 말씀하시는 거라면, 저 위에 있는 제 게시물을 참고해서 iframe 코드를 사용하시면 이런 문제가 발생하지 않습니다.

[Anatolia]

귀사의 사이트에서 사용해 볼 수 있나요?

[smrtey]

네, iframe으로 YouTube를 임베드한 게시글입니다.
https://unstuckpolitics.com/t/new-topic-do-not-read/242/53

[smrtey]

Media Overlay 컴포넌트가 imgur와 같은 사이트의 비디오가 포럼에 표시되지 않도록 막고 있었습니다. 103번째 줄에서 video를 제거하여 문제를 해결했습니다. 즉, $('iframe, video, .lazyYT', $elem)을 $('iframe, .lazyYT', $elem)로 변경했습니다.

    function addOverlays($elem) {
      $('iframe, video, .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의 인사이더 채널 중 어디에서 사용할 수 있나요?