Componente Media Overlay

[david (David Taylor)]

Continuando da https://meta.discourse.org/t/media-overlay-plugin/60549…

Tema Discourse Media Overlay

Questo componente del tema permette agli utenti di “pop-out” i media in una finestra fluttuante mentre navigano sul sito. Possono anche spostarsi su un altro argomento e i media continueranno a funzionare.

Funziona con qualsiasi <iframe> o <video> (con un trattamento speciale per lazyYT). Aggiunge un pulsante a ogni elemento compatibile, che apre quindi una piccola finestra popup in basso a destra.

Puoi quindi “minimizzarlo”, mantenendo l’audio in esecuzione in background, oppure chiuderlo completamente.

Al momento, le dimensioni del video sono determinate dall’incorporamento originale. Vorrei aggiungere una funzionalità di “ridimensionamento”, sia tramite “clicca e trascina”, sia semplicemente con 3 pulsanti: “piccolo”, “medio”, “grande”.

Attualmente questo oscura il compositore… la soluzione più semplice è chiudere semplicemente la finestra popup se vuoi scrivere un post .

Installazione

L’URL del tema è

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

Per installarlo, segui queste istruzioni:

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]

Il componente overlay dovrebbe funzionare con i link incollati a file .mp4? Tipo come in Should audio and video tags be allowed? - #7 by codinghorror ?

Ho provato ad attivarlo sul mio forum e fa scomparire completamente la casella del video quando il video è oneboxed da un link mp4.
Ho anche fatto dei test con gli iframe e funzionano come previsto, ma gli iframe sono più complicati da formattare correttamente

[smrtey]

Abbiamo appena installato questa funzionalità per permettere agli utenti di seguire le udienze di impeachment senza dover tenere aperta un’altra finestra, e ha avuto un successo enorme (un commento ha recitato: “È molto comodo. Straordinario. È di gran lunga l’interfaccia di forum migliore che abbia mai usato.”). Così, anche gli utenti su telefoni e tablet hanno voluto averla. Dato che sui dispositivi mobili non è possibile aprire più finestre, si tratta di una funzione davvero utile.

Per abilitarla su tablet e telefoni, basta rimuovere no-touch dalle righe 64 e 82 del file Common CSS, e poi ridimensionare il player su schermi più piccoli con qualcosa come:

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

Sui dispositivi touch, la pressione prolungata equivale al passaggio del mouse (hover) per far apparire l’icona dei controlli o i controlli multimediali, e poi toccare altrove per nasconderli di nuovo.

Intendevo lasciarla disabilitata sui telefoni, ma è comunque utile anche su smartphone perché puoi ascoltare l’audio con il player ridotto.

Suppongo che questa sia una limitazione nota, ma i video di YouTube non riproducono l’audio quando sono ridotti, e se inizi a riprodurre un video di YouTube dal post e poi decidi di aprirlo in una finestra fluttuante, non c’è modo di riprodurlo nella finestra stessa. Devi prima aprirlo in una finestra fluttuante senza riprodurlo, e solo dopo potrai riprodurlo lì.

[orchardstreet]

È previsto che funzioni con i video di YouTube incorporati?

[smrtey]

Sembra che funzioni correttamente con i video di YouTube se li pubblichi come un iframe invece di condividere semplicemente il link e utilizzare Discourse lazyYT.

Affinché ciò funzioni, devi abilitare gli iframe di YouTube sul tuo sito. Per farlo, vai su Impostazioni → “iframe consentiti” e aggiungi https://www.youtube.com/ alla whitelist.

Quindi, quando incolli il codice iframe (puoi trovare il codice iframe per qualsiasi video su YouTube sotto Condividi → Incorpora), il video di YouTube incorporato tramite iframe sarà pienamente funzionante con il componente Media Overlay. Cioè, devi pubblicare:

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

invece di https://www.youtube.com/watch?v=Ft1waA3p2_w

Il codice iframe non funzionerà su discourse.org perché non hanno aggiunto https://www.youtube.com alla whitelist nelle loro impostazioni “iframe consentiti”, ma è facile aggiungerlo al tuo forum.

Ecco come appare sul nostro forum dal mio telefono con il lettore multimediale espanso:

e contratto:

[Anatolia]

@Anatolia

Sarebbe meglio se potessimo ridimensionare lo schermo e spostarlo ovunque con il mouse.

Inoltre, i video non riprendono la riproduzione quando ne cambio la posizione.

[smrtey]

Se stai parlando di video di YouTube, consulta il mio post sopra al tuo e usa il codice iframe, così non avrai questo problema

[Anatolia]

Posso provarlo sul tuo sito?

[smrtey]

Certo, ecco un post con un iframe incorporato di YT
https://unstuckpolitics.com/t/new-topic-do-not-read/242/53

[smrtey]

Il componente Media Overlay impediva la visualizzazione di video da siti come Imgur sul nostro forum. Abbiamo risolto il problema rimuovendo video dalla riga 103, ovvero modificando $('iframe, video, .lazyYT', $elem) in $('iframe, .lazyYT', $elem)

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

Ora i video di Imgur funzionano di nuovo e l’overlay continua a funzionare con gli iframe e i lazyYT.

[Falco]

Per gli utenti interessati a questa funzionalità, iOS Safari e Firefox lo offrono già di default, mentre Chrome prevede di implementarlo nelle prossime versioni.

[Justin_Vega]

@Falco

Chrome lo sta pianificando per le sue prossime versioni.

Non stanno pianificando di rilasciarlo in Google Chrome 82? Inoltre, è disponibile in uno dei canali insider di Google Chrome?