Este componente de tema permite que os usuários “destaquem” a mídia em uma janela flutuante enquanto navegam pelo site. Eles podem até mesmo navegar para outro tópico e a mídia continuará funcionando.
Funciona com qualquer <iframe> ou <video> (com tratamento especial para lazyYT). Ele adiciona um botão a cada elemento compatível, que abre um pequeno pop-up no canto inferior direito.
Em seguida, você pode “minimizar” o pop-up, mantendo o áudio tocando em segundo plano, ou fechá-lo completamente.
No momento, o tamanho do vídeo é definido pela incorporação original. Gostaria de adicionar um recurso de “redimensionamento”, seja “clicar e arrastar”, ou simplesmente três botões: “pequeno”, “médio” e “grande”.
Atualmente, isso obscurece o editor… a solução simples é apenas fechar o pop-up se quiser escrever uma postagem .
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:
Tentei ativá-lo no meu fórum e ele faz a caixa de vídeo desaparecer completamente quando o vídeo é exibido em uma única caixa a partir de um link mp4. Também testei com iframes e isso faz com que funcione conforme o esperado, mas os iframes são mais difíceis de formatar corretamente
Acabamos de instalar isso para que os usuários pudessem assistir às audiências de impeachment sem precisar manter outra janela aberta, e foi um sucesso absoluto (um comentário foi: “Isso é muito conveniente. Incrível. De longe, a melhor interface de fórum que já experimentei.”) que pessoas usando celulares e tablets também quiseram. E como não é possível abrir várias janelas em dispositivos móveis, é um recurso excelente.
Para habilitar isso em tablets e celulares, basta remover no-touch das linhas 64 e 82 do Common CSS e, em seguida, redimensionar o player em telas menores com algo como:
Em dispositivos com tela sensível ao toque, o toque longo equivale ao hover para exibir o ícone de controle ou os controles de mídia; depois, toque em outro lugar para escondê-los novamente.
Eu ia deixar desativado em celulares, mas ainda é útil porque você pode ouvir o áudio com o player recolhido.
Acho que essa é uma limitação conhecida, mas vídeos do YouTube não reproduzem áudio quando recolhidos. Além disso, se você começar a reproduzir um YouTube a partir da postagem e depois decidir destacá-lo, não há como reproduzir o vídeo na janela flutuante. Você precisa destacá-lo antes de dar play e só então poderá reproduzi-lo na janela flutuante.
Parece funcionar corretamente com vídeos do YouTube se você os postar como um iframe em vez de apenas postar o link e usar o lazyYT do Discourse.
Para que isso funcione, você deve permitir iframes do YouTube no seu site. Para fazer isso, vá em Configurações → “iframes permitidos” e adicione https://www.youtube.com/ à lista de permissões.
Em seguida, ao colar o código de um iframe (você pode encontrar o código de iframe de qualquer vídeo no YouTube em Compartilhar → Incorporar), o vídeo do YouTube incorporado via iframe ficará totalmente funcional com o componente Media Overlay. Ou seja, você precisa postar:
em vez de https://www.youtube.com/watch?v=Ft1waA3p2_w
O código do iframe não funcionará no discourse.org porque eles não adicionaram https://www.youtube.com à lista de permissões nas configurações de “iframes permitidos”, mas é fácil adicioná-lo ao seu próprio fórum.
Veja como fica no nosso fórum no meu celular com o player de mídia expandido:
O componente Media Overlay estava impedindo que vídeos de sites como o imgur fossem exibidos em nosso fórum. Corrigimos o problema removendo video da linha 103, ou seja, alterando $('iframe, video, .lazyYT', $elem) para $('iframe, .lazyYT', $elem)
function addOverlays($elem) {
$('iframe, .lazyYT', $elem).wrap("<div class='media-overlay-eligable'></div>")
Agora os vídeos do imgur estão funcionando novamente, e o overlay continua funcionando com iFrames e lazyYTs.
Para quem tem interesse nessa funcionalidade, o iOS Safari e o Firefox já oferecem isso nativamente, enquanto o Chrome planeja implementá-lo em suas próximas versões.
.
