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 отображается в отдельном блоке, окно с видео полностью исчезает.
Я также протестировал это с использованием iframes, и в этом случае всё работает как ожидалось, но с iframes сложнее правильно оформить форматирование

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

На сенсорных устройствах долгое нажатие соответствует наведению курсора (hover) и вызывает появление иконки управления или элементов управления медиа, после чего можно нажать в другом месте, чтобы скрыть их снова.

Я планировал оставить эту функцию отключённой для телефонов, но она всё равно полезна на телефоне, так как можно слушать аудио, даже когда плеер свёрнут.

Предполагаю, что это известное ограничение, но видео с YouTube не воспроизводят звук при свёрнутом состоянии, и если вы начнёте воспроизведение видео с YouTube из сообщения, а затем решите вынести его в отдельное окно, то не сможете воспроизвести видео в плавающем окне. Сначала нужно вынести его в отдельное окно, не запуская воспроизведение, и только тогда можно будет воспроизвести его в плавающем окне.

[orchardstreet]

Это должно работать с встроенными видео с YouTube?

[smrtey]

Похоже, это работает корректно с видео YouTube, если вы размещаете их как iFrame, а не просто публикуете ссылку и используете Discourse lazyYT.

Чтобы это работало, необходимо разрешить iFrame с YouTube на вашем сайте. Для этого перейдите в Настройки → «Разрешённые iFrame» и добавьте в белый список https://www.youtube.com/.

Затем, когда вы вставите код iFrame (код iFrame для любого видео на YouTube можно найти в разделе «Поделиться» → «Встроить»), видео 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 в свои настройки «Разрешённые iFrame», но на вашем собственном форуме это легко добавить.

Вот как это выглядит на нашем форуме на моём телефоне с развёрнутым медиаплеером:

и свёрнутым:

[Anatolia]

@Anatolia

Было бы лучше, если бы мы могли масштабировать экран и перемещать его мышкой в любое место.

Также видео не возобновляет воспроизведение при изменении его положения.

[smrtey]

Если речь идет о видео с YouTube, ознакомьтесь с моим сообщением выше вашего и используйте код iframe — тогда у вас не возникнет этой проблемы.

[Anatolia]

Могу ли я попробовать это на вашем сайте?

[smrtey]

Конечно, вот пост с встроенным через iframe видео с YouTube:
https://unstuckpolitics.com/t/new-topic-do-not-read/242/53

[smrtey]

Компонент Media Overlay не позволял отображать видео с таких сайтов, как imgur, на нашем форуме. Мы исправили проблему, удалив video из строки 103, то есть изменив $('iframe, video, .lazyYT', $elem) на $('iframe, .lazyYT', $elem).

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

Теперь видео с imgur снова работают, а оверлей продолжает корректно работать с iFrames и lazyYT.

[Falco]

Для тех, кто интересуется этой функцией, iOS Safari и Firefox поддерживают её из коробки, а Chrome планирует внедрить её в следующих версиях.

[Justin_Vega]

@Falco

Chrome планирует внедрить это в следующих версиях.

Разве они не планируют выпустить это в Google Chrome 82? Также доступно ли это в каких-либо внутренних каналах Google Chrome?