Make WordPress Core

Opened 5 years ago

Closed 17 months ago

Last modified 16 months ago

#49850 closed enhancement (fixed)

Adding Anghami to the list of oembed providers

Reported by: azizantoun's profile azizantoun Owned by: swissspidy's profile swissspidy
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Embeds Keywords: has-patch add-to-field-guide
Focuses: Cc:

Description

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 )

Attachments (3)

Capture d’écran 2020-05-23 à 13.59.38.png (181.6 KB) - added by audrasjb 4 years ago.
Upstream JS error
anghami.PNG (145.4 KB) - added by Boniu91 17 months ago.
JS errors
embed.2.png (616.3 KB) - added by tb1909 17 months ago.

Download all attachments as: .zip

Change History (31)

#1 follow-up: @swissspidy
5 years ago

  • Component changed from General to Embeds

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?

#2 @desrosj
5 years ago

  • Keywords reporter-feedback added

#3 in reply to: ↑ 1 @azizantoun
5 years ago

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?

#4 @johnbillion
5 years ago

  • Keywords reporter-feedback removed
  • Milestone changed from Awaiting Review to 5.5

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

#5 @audrasjb
4 years ago

  • Keywords reporter-feedback added

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.

#6 @audrasjb
4 years ago

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

#7 @azizantoun
4 years ago

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

#8 @audrasjb
4 years ago

Hi @azizantoun thanks for your feedback,

There is still a JS error:

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

#9 @audrasjb
4 years ago

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

This ticket was mentioned in Slack in #core by david.baumwald. View the logs.


4 years ago

#11 @audrasjb
4 years ago

  • Milestone changed from 5.5 to Future Release

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

Last edited 4 years ago by audrasjb (previous) (diff)

This ticket was mentioned in PR #4524 on WordPress/wordpress-develop by @swissspidy.


17 months ago
#12

  • Keywords has-patch added; needs-patch removed

#13 @swissspidy
17 months ago

  • Keywords reporter-feedback removed
  • Milestone changed from Future Release to 6.3

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.

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


17 months ago

@Boniu91
17 months ago

JS errors

#15 @Boniu91
17 months ago

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 https://core.trac.wordpress.org/raw-attachment/ticket/49850/anghami.PNG

#16 @swissspidy
17 months ago

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

#17 @Boniu91
17 months ago

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

Last edited 17 months ago by Boniu91 (previous) (diff)

#18 @swissspidy
17 months ago

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?

#19 @oglekler
17 months ago

  • Keywords needs-testing added

#20 @swissspidy
17 months ago

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

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


17 months ago

@tb1909
17 months ago

#22 @tb1909
17 months ago

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

https://core.trac.wordpress.org/raw-attachment/ticket/49850/embed.2.png

#23 @monzuralam
17 months ago

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

Video

This ticket was mentioned in Slack in #core-test by oglekler. View the logs.


17 months ago

#25 @swissspidy
17 months ago

  • Owner set to swissspidy
  • Resolution set to fixed
  • Status changed from new to closed

In 55961:

Embeds: Add Anghami as a trusted oEmbed provider.

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

#27 @monzuralam
17 months ago

  • Keywords needs-testing removed

#28 @swissspidy
16 months ago

  • Keywords add-to-field-guide added
Note: See TracTickets for help on using tickets.