Add css styles to video thumb

[aarizkuren]

Podemos añadir alguna regla de css para diferenciar el preview de una imagen o de un video, porque ahora mismo se ven igual

[Gioyik]

Cuales serian esos cambios o diferencias y hago un commit para resolver esto pronto que no lleva gran tiempo hacerlo.

[aarizkuren]

No se, tipico de sobreponer un icono de play encima del preview del video o alguna cosa que nos indique a primera vista que es un video, y que si te lo descargas te puedes comer tu tarifa de datos :P

[Gioyik]

Va me encargo de ello. :)

[aesedepece]

:+1: Al icono de play. Esto se hace fácil con la propiedad :after de CSS.

[Gioyik]

@aesedepece el icono deberia estar antes y despues de que se descargue no? O con el :after basta?

[aesedepece]

Sí, yo creo que debería estar siempre. Con :after lo que te ahorra es tener que añadirle el icono mediante javascript en función de si es vídeo o no; directamente lo añade CSS en función a la clase o a data-type.

[Gioyik]

Y si usamos :after y :before?

[aesedepece]

En definitiva ambos son lo mismo ;)

[Gioyik]

Jajajjaja me he reido con esa. Entonces, hacemos por Javascript que agregue una clase y por ahí le mandamos el icono?

[aesedepece]

Molaría algo como:

li.data('media-type', this.core.media.type);

Y luego:

ul#messages li[data-media-type="video"]:after {
  content: url('img/play.png');
  /* Put here CSS code for centering play icon */
}

[Gioyik]

Y como hariamos para que no pase lo mismo que en #189. Algo como?

this.core.media = type || false;

[aesedepece]

No haría falta hacer nada al respecto si el li.data está dentro de la comprobación de que es multimedia de message.preRender.

[Gioyik]

Va voy hacer el commit con el fix

[Gioyik]

Ya hice un pull request con los cambios pero aun no lo he probado aunque me surgen las dudas. Esto solo aplica cuando se reciben mensajes? (supongo que si) que hay de cuando es uno quien envia el archivo, tambien tendria que aparecer almenos por estetica, no?

Otra cosa de la que me di cuenta es que sea video o imagen siempre va arrojar:

[data-media-type="image"]

Ya que se uso la misma funcion para que genere una preview y se pueda ver. Asi que las imagenes y videos siempre tendran ese icono, lo cual podria confundir y no se podria distinguir cual es cual. Entonces, dividimos las funciones por separado para video e imagen? Alguien tiene una idea mejor?

@aesedepece podrias pasarme el link de la imagen de Play para agregarlo al Pull Request. :)

[aesedepece]

Si directamente se añade el data-media-type al ii y no a la imagen en sí desde message.preRender, se puede distinguir perfectamente entre vídeo y foto.

[Gioyik]

esta bien en donde he puesto el data-media-type?

r ----> @aesedepece

[aesedepece]

Sí, así está ideal. Haz el PR para verlo todo de un vistazo y probarlo, que por ejemplo el commit 9c6b82a4f9695adda4fa6faec9d50b5896f44e55 no esta referido desde este hilo.

[aesedepece]

Ni caso, acabo de ver que el PR es el #195 ;)

[Gioyik]

Podrias pasarme una captura de como estas viendo la imagen play.png?

[aesedepece]

Es que aún no he podido probar la recepción de vídeo.

Ya de paso, ¿el envío de vídeo y audio os está funcionando? Parece que el archivo se sube pero cuando se produce el success no envía el correspondiente mensaje multimedia.

[Gioyik]

Me di cuenta que deberia ir el data-media-type en el div dentro del li y no en el li directamente.

r -------> @aesedepece

[Gioyik]

Bueno sigue sin funcionar, creo que el no dormir me ha puesto mal. Hice otro commit al Pull Request #195. Podrias revisarlo?

[Gioyik]

A mi el video me esta funcionando, me llega y lo puedo reproducir, el que me envian y no me llega es el audio y la localizacion.

[Gioyik]

El envio de video y audio si me funciona, me aparece que lo sube todo completo, mas no lo muestra en el chat. Supongo porque aun no hemos hecho nada para que se muestre como lo ha hecho @aarizkuren con las imagenes. Y aun mas con mi ultimo commit en #195 pues menos se ve, porque parece que he roto los mensajes de media-type con ese ultimo commit.

[Gioyik]

Bueno ahora todo esta funcionando bien, sin ningun problema, solo que el video que se recibe lo toma como data-media-type="image" por las razones, que segun creo yo, explique mas arriba antes, en los comentarios.

https://github.com/loqui/im/issues/192#issuecomment-31810017

[aesedepece]

A mí me sigue pasando lo mismo de antes: mirando en el debugger se ve que cuando envío un vídeo o un audio, se hace la petición para subir el archivo, se recibe la URL, se sube el archivo pero una vez subido no se envía el correspondiente mensaje al contacto.

[aarizkuren]

Si a la tarde-noche tengo un rato, lo miro yo, sino mañana

[aarizkuren]

Con el ultimo PR he puesto que al guardarse un archivo multimedia guarde la imagen del preview con una class distinta segun cual sea. (.image, .video)

Ahora solo falta apañar el css para que se vea como se queria en un principio

[aarizkuren]

Con el ultimo cambio de @Gioyik esta arreglado esto :D