#1425: Use Open Graph to determine video orientation in HTML

[joshuatbrown]

Issues covered

#1425

Description

Maybe the last of #1425. This uses Open Graph to determine video orientation in HTML. Works for things like YouTube videos where there's an HTML document at the URL. For example: https://www.youtube.com/shorts/ZwlBxvnH-So

That's a YouTube short, and it should appear in portrait orientation in Nos because its height is greater than its width, as determined by the meta tags containing the Open Graph properties.

We can't do this for things like note16rs86sh4peyqu6gtppw2y4j88z0nrcmupeefnj5flnwxp3fzdfuqsln02y because it contains a direct link to a mp4 video, rather than a link to an HTML document.

How to test

1. Enable new media display in Settings
2. Navigate to a note with a YouTube video link to a portrait video. Here's one: note1awmfrttfmuqecqvxhstwpad88n3gk66f6zwy3xq88dnmaw0xqmgsga9q3r
3. Observe that the video displays in portrait orientation inside of the note.
4. Navigate to a note with a YouTube video link to a landscape video. Here's one: note12vlzgjvluewmf92ylxcuqdtqv70n0u6t5jqykj8u43kysf0kds4qmrwtt2
5. Observe that the video displays in landscape orientation inside of the note.
6. Navigate to a note with a link to a video on Nostr.build, which should end in .mp4. Here's one: note14h3u9pseydfpsxzwzqtr3uc6k5th4nhqwtf8fyuc2wpgud6zsvkqmhgdmd
7. Observe that nothing special happens. Its type is video/mp4, so there's no Open Graph metadata.

Screenshots/Video

Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2024-09-19.at.18.13.19.mp4

Notes

There's some complexity in the logic here. Open Graph is a fallback; if the Nostr event contains imeta tags, those will be used and we won't fetch the Open Graph data. This is all to say: if you want to test this well, make sure your notes don't contain imeta tags. Nos doesn't post imeta tags (yet!), but Damus does. So post your test notes from Nos.