Adding Anghami to the list of oembed providers

[azizantoun]

Anghami is the leading streaming website in the middle east. (www.anghami.com)
This is a request ticket to add the Anghami oembed schema to the wp-oembed.php list of providers.

'#https?:((play|www)\.)?anghami\.com/.*#i' => array( '​https://www.anghami.com/oembed', true )

[swissspidy]

Hi there

Would you be able to help us fill out the required information as per ​https://make.wordpress.org/core/handbook/contribute/design-decisions/#whitelisting-oembed-providers?

[azizantoun]

Hello,

Thank you for getting back to me. I will write the answers in the comment box is that enough?

Is the service is popular enough for core developers to have heard of it before? Is it “mainstream?

Anghami is the leading music streaming service in the middle east with more than 80 million users. We have a catalogue of millions f arabic and international songs and music videos. Anghami also has series/movies and podcasts. You can check www.anghami.com for more details.

If similar services are already supported, how does this service compare in terms of size, features, and backing?

Spotify and Deezer are similar services. The main difference is that Anghami provides music videos and series. Anghami also has stories, chats and other social feature that differentiates it from any other music streaming service.

Does this service have a large following on Twitter, Facebook, or other social media?  Is its Twitter account verified?
Yes Anghami has millions of followers on social networks.
​https://twitter.com/anghami
​https://facebook.com/anghami
​https://instagram.com/anghami

Is its oEmbed endpoint clearly established and properly documented? (Sometimes, they are just a developer’s pet project that may not be supported.)
Yes, our media pages (song,album,playlist,artist,profile) support oembed. The Oembed url points to our custom built widget.
example: ​https://widget.anghami.com/playlist/5890887

Does the oEmbed endpoint work with WordPress’ oEmbed auto-discovery? If not, could it be made to work with additional HTML tags or attributes being whitelisted?

On our blog it's working after manually adding anghami to the list of oembed providers using the following method: wp_oembed_add_provider. Here's a live article showing our widget loaded via oembed. ​https://talks.anghami.com/anghami-how-we-shifted-to-work-from-home-on-covid19-with-little-notice/

Does the service make an effort to build relationships with developers, such as through robust APIs?

We have recently opened our APIs to the public to allow developer and interns to use our data and create projects around music

How old is the service?

Anghami was founded in 2011 and launched the first beta app in 2012

Does it have a well-established Wikipedia article?

​https://en.wikipedia.org/wiki/Anghami

Has anyone written a WordPress plugin that leverages the service in some way, whether adding it as an oEmbed provider, creating a shortcode, or leveraging other APIs of the service? Do these plugins have any noticeable adoption or traction that would indicate usage and demand?

Not yet

Is the provider frequently proposed?

Lots of articles in the middle east talk about Anghami and share news related to the music industry. Currently publishers get their embed code from www.anghami.com/embed and paste the iframe in their wordpress articles. By whitelisting Anghami the process will become easier for them, pasting the link should load the widget similar to any other service. Currently we have thousands of daily visits to our widgets embdded on hundreds of articles

I hope my answers were clear. Looking forward to your feedback.

Replying to swissspidy:

Hi there

Would you be able to help us fill out the required information as per ​https://make.wordpress.org/core/handbook/contribute/design-decisions/#whitelisting-oembed-providers?

[johnbillion]

Moving this to the next major milestone for consideration as we always do for oEmbed whitelisting requests.

[audrasjb]

Hi,

@azizantoun: I tried to whitelist this oEmbed provider in WordPress Core, but the embed throws a JS external resource error.
I think it has to be fixed upstream.

See screenshot below.

[audrasjb]

Upstream JS error

[audrasjb]

Here is the URL I used in my test: ​https://play.anghami.com/playlist/5890887

[azizantoun]

Hi @audrasjb,

Thank you for your reply. We had an API limitation on localhost. It was preventing the widget from loading on your local environment. We removed the rule now, the widget should load fine on your end.
Thanks

[audrasjb]

Hi @azizantoun thanks for your feedback,

There is still a JS error:

xxxx.chunk.js:1 TypeError: Cannot read property 'hexcolor' of null

[audrasjb]

(it results to the same white embed I already shared in the above screenshot)

[audrasjb]

Moving to Future release as we are close to WP 5.5 beta 1 and there are still upstream issue.

Trac ticket: https://core.trac.wordpress.org/ticket/49850

[swissspidy]

Looks like the new endpoint is ​https://api.anghami.com/rest/v1/oembed.view

The provided regex above is also incorrect, it should be #https?://((play|www)\.)?anghami\.com/.*#i (notice the added slashes after https:)

No JS errors when testing the provider.

[Boniu91]

JS errors

[Boniu91]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/4524/commits/e443d2219c6921670632551fe30a3132a3028bb5

Environment

• OS: Windows 10
• Web Server: Apache
• PHP: 8.0.28
• WordPress: 6.3-alpha-55889
• Browser: Chrome 114.0.5735.90
• Theme: Twenty Twenty-Three

Actual Results

• ✅ The players are displayed for both, playlists and single song
• ❌ There are some JS errors in the console in both, Gutenberg and frontend
• ❌ The players are not working, not clicklable. Most likely becuase of the errors

Additional Notes

• wordpress-develop was used

Supplemental Artifacts

JS errors when adding

[swissspidy]

@Boniu91 Not clear to me, do you get these errors _with_ the patch, or without it? 🤔

[Boniu91]

@swissspidy Those were errors with patch applied, sorry for not being clear.

[swissspidy]

I see. I am not seeing that on my site.

​https://imgur.com/a/kyH65d9

It looks like you might have a cached result.

Have you tried applying the patch, then creating a completely new post and embedding https://play.anghami.com/playlist/5890887?

[swissspidy]

@Boniu91 Friendly ping, could you perhaps test this again with a fresh post?

[tb1909]

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/4524/commits/e443d2219c6921670632551fe30a3132a3028bb5

Environment

• OS: macOS 13.4
• Web Server: Nginx
• PHP: 8.1.13
• WordPress: 6.3-alpha-55505-src
• Browser: Google Chrome
• Theme: Twenty Twenty-Three
• Active Plugins:

none

Actual Results

• ✅ Works as intended for me

Additional Notes

• I don't get any JS errors in Gutenberg or on the final page with the patch applied

Supplemental Artifacts

[monzuralam]

Test Report

Environment

• Hardware: HP 11th Gen Intel(R) Core(TM) i5-1155G7 @ 2.50GHz 2.50 GHz
• OS: Windows 11
• Browser: Firefox 114.0.1 (64-bit)
• Server: Apache/2.4.56
• PHP: 8.0.29
• WordPress: 6.3-alpha-55905
• Theme: twentytwentythree v1.1
• Active Plugins: gutenberg v16.0.0-rc.4

Steps to Reproduce

1. Navigate Dashboard > Posts
2. Posts > Click Add New Posts
3. Paste & Publish

Expected Results

When testing a patch to validate it works as expected:

• ✅ Got Expected results & patch working as well.
• ❌ There are some JS errors that come from Anghami.

Screenshot

• Dashboard view - ​https://prnt.sc/dKwPqlNk-UpS
• Frontend view - ​https://prnt.sc/QZkOMTZ8ZQHS
• Dashboard & Frontend same errors - ​https://prnt.sc/mj680pCIVgRW

Video

• ​https://www.awesomescreenshot.com/video/18504417?key=e940b79a1ca7aef995b4045001ade5bf

[swissspidy]

In 55961:

Embeds: Add Anghami as a trusted oEmbed provider.

Props swissspidy, Boniu91, tb1909, monzuralam, azizantoun, audrasjb.
Fixes #49850

Committed in https://core.trac.wordpress.org/changeset/55961