Create an oEmbed endpoint for maps #1526

davidbgk · 2024-01-11T19:51:15Z

yohanboniface

Excellent!
Shame on me that I did not implement this earlier!

yohanboniface · 2024-01-13T17:57:31Z

umap/tests/test_map_views.py

@@ -675,3 +675,63 @@ def test_download_my_map(client, map, datalayer):
    # Test response is a json
    j = json.loads(response.content.decode())
    assert j["type"] == "umap"
+
+
+@pytest.mark.parametrize("share_status", [Map.PRIVATE, Map.BLOCKED, Map.OPEN])


Not sure about the OPEN here. The purpose of the OPEN status, is that a map is not discoverable, but once you have a link you can view it normally, so why not allowing also the oEmbed in this case ?

yohanboniface · 2024-01-13T17:58:32Z

umap/tests/test_map_views.py

+    j = json.loads(response.content.decode())
+    assert j["type"] == "rich"
+    assert j["version"] == "1.0"
+    assert j["width"] == 800


Out of curiosity, are those dimensions configurable by the caller ? Or should we have a relative width ?

The spec says:

The width/height in pixels required to display the HTML.

And maybe it was before we can have more flexible dimensions?

yohanboniface · 2024-01-13T17:59:49Z

umap/views.py

+        format_ = request.GET.get("format", "json")
+        if format_ != "json":
+            response = HttpResponseServerError("Only `json` format is implemented.")
+            response.status_code = 501


Why not a 40x here ?

I tried to stick to the spec as much as possible:

501 Not Implemented
The provider cannot return a response in the requested format. This should be sent when (for example) the request includes format=xml and the provider doesn't support XML responses. However, providers are encouraged to support both JSON and XML.

yohanboniface · 2024-01-13T18:03:46Z

umap/views.py

+        data["height"] = height
+        width = 800
+        data["width"] = width
+        # TODISCUSS: do we keep width=100% by default for the iframe?


Can't we keep both width in relative ?

bristow · 2024-01-17T08:48:24Z

For the width, i give you 3 exemples : PeerTube, Youtube and osm.org

## PeerTube

<div data-oembed-url="https://tube-sciences-technologies.apps.education.fr/w/mhdTmfC5fgVq6WMjc5jp1g?start=10s"> 
 <div style="left:0;width:100%;height:0;position:relative;padding-bottom:56.25%"> 
  <iframe allowfullscreen="" src="https://tube-sciences-technologies.apps.education.fr/videos/embed/a43a9d48-75c0-4176-b336-3fd2b56e203b" style="top:0;left:0;width:100%;height:100%;position:absolute;border:0" tabindex="-1"></iframe> 
 </div> 
 
 ##Youtube
 <div data-oembed-url="https://www.youtube.com/watch?v=CHQrIMo0xak">
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;" allowfullscreen="" scrolling="no" src="https://www.youtube.com/embed/CHQrIMo0xak?rel=0" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>

## Openstreetmap
<div data-oembed-url="https://www.openstreetmap.org/#map=18/45.80318/4.83529">
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;"><iframe allowfullscreen="" src="https://www.openstreetmap.org/export/embed.html?bbox=4.832267761230469,45.80481138832744,4.835700988769531,45.80301636960864&amp;layer=mapnik" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>

So 100% seems like a good choice

davidbgk · 2024-01-18T03:48:26Z

@bristow thank you so much for these example!

Do you also have the raw responses from the oembed endpoints of these services to see how they deal with the width parameter? The spec states that it should be in pixels so I'm curious how they handled that :)

bristow · 2024-01-18T09:59:12Z

Here is the response from the PeerTube developer

The oembed payload is generated here: https://github.com/Chocobozzz/PeerTube/blob/develop/server/core/controllers/services.ts#L99

For example: https://peertube2.cpy.re/services/oembed?url=https%3A%2F%2Fpeertube2.cpy.re%2Fw%2F1zywKcr1ChzL7R9rG6yCnq

Another example where we limit the size: https://peertube2.cpy.re/services/oembed?url=https%3A%2F%2Fpeertube2.cpy.re%2Fw%2F1zywKcr1ChzL7R9rG6yCnq&maxwidth=200

I hope this helps

davidbgk · 2024-01-18T13:49:04Z

I hope this helps

Definitely!

I'm curious though because if you take the payload from https://peertube2.cpy.re/services/oembed?url=https%3A%2F%2Fpeertube2.cpy.re%2Fw%2F1zywKcr1ChzL7R9rG6yCnq
you have that value in the html key of the returned JSON:

<iframe width="560" height="315" 
  sandbox="allow-same-origin allow-scripts allow-popups" title="The Internet&#39;s Own Boy" 
  src="https://peertube2.cpy.re/videos/embed/04af977f-4201-4697-be67-a8d8cae6fa7a" 
  frameborder="0" allowfullscreen>
</iframe>

Which does not states width="100%" as previously mentioned. So where did you get previous HTML extracts?

bristow · 2024-01-19T08:32:16Z

I took these codes from the source code of this site, which offers remote media integration via oEmbed.

bristow · 2024-01-25T15:23:51Z

Will this feature be deployed in the near future?

I'm willing to test it on a pre-prod platform if need be.

Thank you!

yohanboniface · 2024-01-25T15:28:26Z

Very soon!

We are in a Javascript refactor which prevents us to add more features to the deployment flow, but it seems we are close to getting back to normal life! Sorry for that :)

davidbgk · 2024-02-10T13:46:13Z

@bristow this is now deployed on the OSM instance 🤞

bristow · 2024-02-10T15:15:27Z

Thank you so much!

But it doesn't seem to be working :/

Here's a capture of a render where I embed an umap link and below it an osm.org map link using the same method.

Any idea?

bristow · 2024-02-10T15:46:46Z

I analysed the source code of an umap map.
You can see the oembed URL starting with: https://umap.openstreetmap.fr/map/oembed/
But this URL returns a 404 error, whereas on a Peertube instance you get a json return: https://tube.ac-lyon.fr/services/oembed with the message that it can't find the URL

Perhaps a clue...

See #1526 (comment)

davidbgk force-pushed the oembed branch 2 times, most recently from 22b1725 to d2ce895 Compare January 11, 2024 20:02

feat: Create an oEmbed endpoint for maps

df76ffd

Fix #162

davidbgk force-pushed the oembed branch from d2ce895 to df76ffd Compare January 11, 2024 20:08

yohanboniface approved these changes Jan 13, 2024

View reviewed changes

yohanboniface merged commit dadcaa0 into master Jan 29, 2024
12 checks passed

yohanboniface deleted the oembed branch January 29, 2024 11:44

davidbgk added a commit that referenced this pull request Feb 12, 2024

fix: encode the whole url parameter for OEmbed

4bc7888

See #1526 (comment)

davidbgk mentioned this pull request Feb 12, 2024

fix: encode the whole url parameter for OEmbed #1601

Merged

davidbgk added a commit that referenced this pull request Feb 12, 2024

fix: encode the whole url parameter for OEmbed

9426570

See #1526 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create an oEmbed endpoint for maps #1526

Create an oEmbed endpoint for maps #1526

davidbgk commented Jan 11, 2024

yohanboniface left a comment

yohanboniface Jan 13, 2024

yohanboniface Jan 13, 2024

davidbgk Jan 14, 2024

yohanboniface Jan 13, 2024

davidbgk Jan 14, 2024

yohanboniface Jan 13, 2024

bristow commented Jan 17, 2024

davidbgk commented Jan 18, 2024

bristow commented Jan 18, 2024

davidbgk commented Jan 18, 2024

bristow commented Jan 19, 2024

bristow commented Jan 25, 2024

yohanboniface commented Jan 25, 2024 •

edited

davidbgk commented Feb 10, 2024

bristow commented Feb 10, 2024

bristow commented Feb 10, 2024

Create an oEmbed endpoint for maps #1526

Create an oEmbed endpoint for maps #1526

Conversation

davidbgk commented Jan 11, 2024

yohanboniface left a comment

Choose a reason for hiding this comment

yohanboniface Jan 13, 2024

Choose a reason for hiding this comment

yohanboniface Jan 13, 2024

Choose a reason for hiding this comment

davidbgk Jan 14, 2024

Choose a reason for hiding this comment

yohanboniface Jan 13, 2024

Choose a reason for hiding this comment

davidbgk Jan 14, 2024

Choose a reason for hiding this comment

yohanboniface Jan 13, 2024

Choose a reason for hiding this comment

bristow commented Jan 17, 2024

davidbgk commented Jan 18, 2024

bristow commented Jan 18, 2024

davidbgk commented Jan 18, 2024

bristow commented Jan 19, 2024

bristow commented Jan 25, 2024

yohanboniface commented Jan 25, 2024 • edited

davidbgk commented Feb 10, 2024

bristow commented Feb 10, 2024

bristow commented Feb 10, 2024

yohanboniface commented Jan 25, 2024 •

edited