URLs de integración de Vimeo parseadas incorrectamente en el correo electrónico

Error
1

Vimeo proporciona dos tipos de URL: enlaces directos (https://vimeo.com/508864124/fcbbcc92fa) y enlaces de incrustación (que se pueden usar en un iframe, pero no funcionarán si se hace clic directamente).

Por ejemplo:

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

  1. Cuando esto se envía como un correo electrónico de notificación, el enlace directo aparece correctamente, pero el iframe se reemplaza por un enlace con la URL incorrecta: https://vimeo.com/508864124?h=fcbbcc92fa en lugar de https://player.vimeo.com/video/508864124?h=fcbbcc92fa

    Peor aún, si se agrega una barra inclinada final (válida) en la URL de incrustación, el ID del video se elimina en el correo electrónico: <iframe src="https://player.vimeo.com/video/508864124/?h=fcbbcc92fa" ...></iframe> se convierte en https://vimeo.com/?h=fcbbcc92fa

  2. ¿Hay alguna forma de evitar la conversión de iframe a URL por completo? Al igual que ya hacemos con las encuestas, dice algo como “Haz clic aquí para ver la encuesta”.

2

Complicado, tenemos algo de magia especial para modificar cómo reasignamos lo cocinado para que los procesos de correo electrónico se puedan limpiar, sin duda.

Por ahora, pondré un pr-welcome y consideraré una mayor priorización si esto surge algunas veces más.

1 me gusta
3

[quote=“Nacho Caballero, post:1, topic:231042, username:Nacho_Caballero”]
¿Hay alguna forma de evitar la conversión de iframe a URL por completo? Al igual que ya hacemos con las encuestas, dice algo como “Haz clic aquí para ver la encuesta”.
[/quote]Gracias, Sam. ¿Se te ocurre alguna solución temporal para evitar que la gente vea la URL en el correo electrónico sin tener que ocultarla en una etiqueta [details]?

4

Honestamente, no se me ocurren muchas soluciones alternativas aquí, salvo quizás forzar un enlace que no sea “oneboxed” debajo de él.

https://vimeo.com/185876954
<https://vimeo.com/185876954>

https://vimeo.com/185876954
https://vimeo.com/185876954

1 me gusta
5

@Nacho_Caballero El ejemplo que proporcionaste de un video no listado, los videos no listados tienen una estructura de URL diferente.

Y la forma de incrustar un video no listado según la solicitud de Vimeo es diferente, consulta Use oEmbed with private videos – Vimeo Help Center

Creo que una solución podría ser crear tu propia incrustación usando el documento anterior.

@sam
Y para Discourse, ¿sería mejor usar la API de Vimeo para obtener la URL de origen de la incrustación en lugar de construirla? Consulta https://stackoverflow.com/questions/51414260/vimeo-url-ive-never-seen-before-with-two-different-ids-how-do-i-get-it-to-work. Y esas líneas son relevantes discourse/lib/onebox/engine/vimeo_onebox.rb at 657256a099a601a0694d11d15c42ad76988efe8c · discourse/discourse · GitHub

De todos modos, si mi suposición es correcta, esto debería afectar a la publicación normal y no solo al correo electrónico: 1-Minute Audio Test for Stereo Speakers &amp; Headphones-2ZrWHtvSog4

6

Para obtener el iframe hice:

GET https://vimeo.com/api/oembed.json?url=https://vimeo.com/508864124/fcbbcc92fa
Así que obtuve

{\"type\":\"video\",\"version\":\"1.0\",\"provider_name\":\"Vimeo\",\"provider_url\":\"https:\\/\\/vimeo.com\\/\",\"html\":\"\u003ciframe src=\\\"https:\\/\\/player.vimeo.com\\/video\\/508864124?h=fcbbcc92fa\u0026amp;app_id=122963\\\" width=\\\"426\\\" height=\\\"240\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; fullscreen; picture-in-picture\\\" allowfullscreen\u003e\u003c\\/iframe\u003e\",\"width\":426,\"height\":240,\"domain_status_code\":403,\"video_id\":508864124,\"uri\":\"\\/videos\\/508864124:fcbbcc92fa\"}

Decodificado UTF-8: para el iframe

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa&amp;app_id=122963" width="426" height="240" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

El iframe en sí

Editar/Actualizar:

He enviado una PR para arreglarlo, creo que el problema estaba con el patrón regex. No capturaba correctamente vimeo cuando no era el tipo estándar. Por lo tanto, cambié el patrón regex en consecuencia.

1 me gusta
7

@ghassan Acabo de notar que esto sigue siendo un problema.

Si un iframe tiene un video no listado, la URL no se transforma correctamente en el correo electrónico. Por ejemplo:

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

Se transforma en esto (que es un 404): https://vimeo.com/508864124?h=fcbbcc92fa
En lugar de la URL correcta: https://vimeo.com/508864124/fcbbcc92fa

Quizás la expresión regular que agregaste en tu PR necesita un paso adicional (transformar ?h= en / al enviar un correo electrónico)

8

Para que quede claro,

  • Existen diferentes formatos de URL de viemo, nuestro único problema es con el lado del correo electrónico, ¿verdad?
  • Para replicar esto, uno necesita hacer qué:
    • Pegar la URL o el iframe en un tema (¿Cuáles son todos los casos de esto?)
    • Debería funcionar como se espera en la web, pero si se envía un correo electrónico con el contenido del tema, entonces se complica.
9

Sí. El cambio de regex que hiciste hizo posible reconocer las URL de iframe src (https://player.vimeo.com/video/508864124?h=fcbbcc92fa), por lo que eso ya no es un problema. El problema está en el correo electrónico que se envía.

Si pegas una URL simple (https://vimeo.com/508864124/fcbbcc92fa), no hay problema. Solo es un problema con el iframe src (https://player.vimeo.com/video/508864124?h=fcbbcc92fa).

Actualmente lo hace.

Sí. Actualmente, el iframe src (https://player.vimeo.com/video/508864124?h=fcbbcc92fa) se convierte en esto: https://vimeo.com/508864124?h=fcbbcc92fa en lugar de esto: https://vimeo.com/508864124/fcbbcc92fa

10

Todavía me cuesta reproducirlo porque necesito tener una cuenta premium para tener videos no listados en Vimeo.

Además, creo que tu ejemplo de video anterior solo permite cargarlo desde ciertos dominios, ¿puedes permitir que mi instancia sandbox lo cargue también?: https://discuss.gsgapp.io.

De nuevo y para ser muy claro, no esperas que el video se reproduzca en el correo electrónico, sino que esperas que cuando la gente haga clic en la posición del video sea dirigida a la URL correcta. ¿Estoy en lo correcto?

11

Hecho :+1:

Correcto :+1:

¡Gracias por la ayuda!

12

Aha, encontré el problema ahora:

Lo que sucede es que cuando pegas el código iframe de vainilla, podrías omitir el código onebox, y si lo omites, el código iframe resultante no tendrá data-original-href, que es el enlace que se usa en la plantilla de correo electrónico.

Y cuando falta data-original-href, Discourse intenta adivinar que el video es lo que sea que esté después de la última /, lo que por supuesto no cubre el caso de un video no listado.

Por ejemplo, si revisas las herramientas de desarrollador/inspeccionar elemento de tu navegador, el código iframe resultante al usar el código iframe de vainilla:

<iframe> src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

<iframe> src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>

Mientras que al pegar solo la URL, es decir, dejar que Discourse lo convierta en iframe
https://vimeo.com/508864124/fcbbcc92fa.

<iframe> class="vimeo-onebox" src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa&amp;app_id=122963" data-original-href="https://vimeo.com/508864124/fcbbcc92fa" frameborder="0" allowfullscreen="" seamless="seamless" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation"></iframe>

Así que nota el data-original-href="https://vimeo.com/508864124/fcbbcc92fa" adicional en la segunda salida, uno podría suponer que si ese atributo se usa con el iframe de vainilla, debería funcionar, pero probablemente no lo hace porque Discourse no te permite agregar ningún atributo que desees…

13

Creo que puedo sugerir una solución, y si bien me aseguré de que funcionara para el caso en que el video está listado/público, se me ocurrió este comportamiento inusual de Vimeo. Normalmente, todos los videos que son públicos siguen este patrón vimeo.com/{id}, sin embargo, funcionará si agregas una barra, es decir, vimeo.com/{id}/anything

Considera el siguiente ejemplo:

  • https://vimeo.com/767548129/estgsetgset
  • https://vimeo.com/767548129/hey-discurse
  • https://vimeo.com/767548129 Lo normal

Todos los anteriores llevan al mismo video, por lo que la solución puede ser crear una URL a partir del src del iframe, vimeo.com/{lo que viene después de la primera barra}/{lo que viene de h=}. Esto hará que funcione para ambos casos.

14

La corrección propuesta FIX: vimeo iframe url when data-original-href is missing by ghassanmas · Pull Request #18894 · discourse/discourse · GitHub, también puedes probarla en https://discuss.gsgapp.io donde he seleccionado mi commit.

He probado personalmente para 4 casos:

  • Pegar URL de Vimeo de video público
  • Pegar URL de Vimeo de video no listado
  • Pegar iframe vanilla de video público
  • Pegar iframe vanilla de video no listado

En todos los casos, condujo a que el correo electrónico generara la URL correcta.

Pero de todos modos, por favor, intenta probar todas las demás variaciones posibles que puedas encontrar y, lo más importante, que no rompa otras cosas.

La forma en que probé la plantilla de correo electrónico fue enviarme un mensaje directo a mí mismo y luego revisar la bandeja de entrada del correo electrónico. (Dado que tengo dos cuentas registradas en https://discuss.gsgapp.io)

2 Me gusta
15

¡Gracias! Lo probé también y funciona :+1:

16

pruebas:

18

Se ha fusionado