Este componente del tema permite a los usuarios “sacar” los medios en una ventana flotante mientras navegan por el sitio. Incluso pueden navegar a otro tema y los medios seguirán funcionando.
Funciona con cualquier <iframe> o <video> (con un tratamiento especial para lazyYT). Añade un botón a cada elemento compatible, que luego abre una pequeña ventana emergente en la esquina inferior derecha.
Luego puedes “minimizarlo”, lo que mantiene el audio reproduciéndose en segundo plano, o cerrarlo completamente.
Por el momento, el tamaño del video lo decide la incrustación original. Me gustaría añadir una función de “redimensionamiento”, ya sea “hacer clic y arrastrar” o simplemente tres botones: “pequeño”, “mediano” y “grande”.
Actualmente, esto tapa el editor de mensajes… la solución sencilla es simplemente cerrar la ventana emergente si quieres escribir una publicación .
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:
Intenté activarlo en mi foro y hace que el cuadro de video desaparezca por completo cuando el video se muestra en una sola caja a partir de un enlace mp4. También lo probé con iframes y eso hace que funcione como se espera, pero los iframes son más complicados de formatear correctamente
Acabamos de instalar esto para que los usuarios pudieran ver las audiencias de impeachment sin tener que mantener otra ventana abierta, y fue un éxito rotundo (un comentario decía: “Esto es muy conveniente. Increíble. Es, con mucho, la mejor interfaz de foro que he experimentado”). Por eso, la gente con teléfonos y tabletas también lo quería. Y como no se pueden abrir múltiples ventanas en dispositivos móviles, es una función excelente.
Para habilitarlo en tabletas y teléfonos, simplemente elimina no-touch de las líneas 64 y 82 del archivo Common CSS, y luego ajusta el reproductor en pantallas más pequeñas con algo como:
En dispositivos táctiles, mantener presionado equivale a pasar el cursor para mostrar el icono de control o los controles multimedia, y luego toca en otra parte para ocultarlo nuevamente.
Pensé en dejarlo desactivado en los teléfonos, pero sigue siendo útil porque puedes escuchar el audio con el reproductor contraído.
Supongo que esto es una limitación conocida, pero los videos de YouTube no reproducen audio cuando están contraídos, y si empiezas a reproducir un video de YouTube desde la publicación y luego decides sacarlo a una ventana flotante, no hay forma de reproducirlo en esa ventana. Tienes que sacarlo primero sin reproducirlo, y luego podrás reproducirlo en la ventana flotante.
Parece que funciona correctamente con videos de YouTube si los publicas como un iframe en lugar de simplemente pegar el enlace y usar la función lazyYT de Discourse.
Para que esto funcione, debes habilitar los iframes de YouTube en tu sitio. Para ello, ve a Configuración → “iframes permitidos” y añade a la lista blanca https://www.youtube.com/.
Luego, cuando pegues el código de un iframe (puedes encontrar el código de iframe para cualquier video de YouTube en Compartir → Insertar), el video de YouTube insertado mediante iframe funcionará completamente con el componente de superposición multimedia. Es decir, debes publicar:
en lugar de https://www.youtube.com/watch?v=Ft1waA3p2_w.
El código de iframe no funcionará en discourse.org porque no han añadido https://www.youtube.com a la lista blanca en su configuración de “iframes permitidos”, pero es fácil agregarlo en tu propio foro.
Así es como se ve en nuestro foro desde mi teléfono con el reproductor multimedia expandido:
El componente Media Overlay impedía que se mostraran videos de sitios como imgur en nuestro foro. Solucionamos el problema eliminando video de la línea 103, es decir, cambiando $('iframe, video, .lazyYT', $elem) por $('iframe, .lazyYT', $elem)
function addOverlays($elem) {
$('iframe, .lazyYT', $elem).wrap("<div class='media-overlay-eligable'></div>")
Ahora los videos de imgur vuelven a funcionar y la superposición sigue funcionando con iFrames y lazyYTs.
Para las personas interesadas en esta función, iOS Safari y Firefox lo hacen de forma nativa, mientras que Chrome planea implementarlo en sus próximas versiones.
.
