[buddypress-trac] [BuddyPress Trac] #7084: @mentions break instagram oembeds if same username exists on site as instagram

[buddypress-trac]

#7084: @mentions break instagram oembeds if same username exists on site as
instagram
------------------------------------------------+--------------------------
 Reporter:  3pointross                          |       Owner:
     Type:  defect (bug)                        |  johnjamesjacoby
 Priority:  high                                |      Status:  assigned
Component:  Activity                            |   Milestone:  2.7
 Severity:  major                               |     Version:  1.2
 Keywords:  needs-unit-tests needs-patch early  |  Resolution:
------------------------------------------------+--------------------------

Comment (by websupporter):

 In order to understand the BP system a little better, I thought it's a
 good idea to learn its bugs, so I dived into this ticket, to see whats
 going on.
 As mentioned by others its a bit wired and it looks, some problems are
 interfering with each other.

 So, I searched some Instagram Messages, created users which where also
 mentioned in the instagram message and tried it myself. Hmm... where to
 find now messages! Ha Ivanka Trump should mention her @realdonaldtrump
 quite often (actually nope and sorry for this example :/).

 So what I've found. I am not quite sure:

 Ivanka has a problem. Some of her Instagram messages do not show properly
 in her BuddyPress community.

 == The ajax request ==
 I've created the user @trumpturnberryscotland and embeded
 https://www.instagram.com/p/BJQHeeygGXc/
 It doesn't show with the ajax request, but it shows for me with F5!
 (Actually I do not have a problem when @trumpturnberryscotland is
 mentioned in the message?)

 Matt West (first, who showed up in my timeline XD ) has no problem, when
 he wants to embed his Tweets:
 https://twitter.com/MattAntWest/status/766884281100619776
 It shows also with the ajax request and he doesn't need to reload. He is
 happy.

 Whats the difference between Twitter and Instagram? Instagram is embeding
 its scripts with `asyn` and `defer`, Twitter uses only `asyn`.

 >This Boolean attribute (defer) is set to indicate to a browser that the
 script is meant to be executed after the document has been parsed, but
 before firing DOMContentLoaded
 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

 Well, I think here we can't help Ivanka? Instagram might.

 == The make clickable problem ==
 But Ivanka has another, more persistent problem too:
 https://www.instagram.com/p/BJOQHUgAYLP/

 The oEmbed HTML does not link "http://liketk.it/2p0HO" (while Matt West is
 happy using Twitter. Twitter wraps links in `<a>`-Tags).

 In the filter `bp_get_activity_content_body` we transform a URL which is
 embeddable into the embed with the priority of 8 and do run
 `make_clickable()` with the priority of 9. So `make_clickable()` sees the
 URL and makes it clickable (You're welcome Instagram). Has anyone tried to
 read the instagram embed script. \o/

 So, I didn't completely, but what I think are the basics:

 {{{#!php
 <?php
 if(xa.tagName==='BLOCKQUOTE'){
         var ya=oa(xa);
         if(ya)
                 pa(xa,ya);
 }

 function oa(ua){
         var va=ua.getElementsByTagName('a'),wa=va.length;return
 wa?na(va[wa-1]):null;
 }

 function pa(ua,va){var wa=ka++,xa=r+wa;if(!ua.id)ua.id=da+wa;var
 ya=va.replace(w,'/$1');ya+='embed/';if(ua.hasAttribute(q))ya+='captioned/';if(ua.hasAttribute(ga)){var
 za=parseInt(ua.getAttribute(ga),10);if(m(za))ya+='?v='+za;}ya=ya.replace(u,v);var
 ab;ab=document.createElement('iframe'); //and so on
 }}}


 The basic HTML where it should be applied to:
 `<blockquote><a href="link-to-instagram-message">text
 http://liketk.it/2p0HO by ivanka and so on</a></blockquote>`

 Without further testing, I think the function `oa()` returns the wrong
 `<a>` attribute out of wich `pa()` can not create the iframe properly.
 Why? Because we make the URL 'http://liketk.it/2p0HO' clickable:
 `<blockquote><a href="link-to-instagram-message">text <a
 href="http://liketk.it/2p0HO" rel="nofollow">http://liketk.it/2p0HO</a> by
 ivanka and so on</a></blockquote>`

 In my tests, if I remove `make_clickable` from the filter it works. So I
 thought, maybe I just give it the priority of 7, but in this case our
 embed-filter does not work anymore, because the URL needs to be singled
 out. We just have a URL to the embed. Ha Ivanka! Sorry Matt.

 But what if...

 We reduce the `make_clickable` priority 7 and

 We extend `BP_Embed` with

 {{{#!php
 <?php
         public function autoembed( $content ) {

                 // Replace line breaks from all HTML elements with
 placeholders.
                 $content = wp_replace_in_html_tags( $content, array( "\n"
 => '<!-- wp-line-break -->' ) );

                 if ( preg_match( '#(^|\s|>)https?://#i', $content ) ) {
                         // Find URLs on their own line.
                         $content = preg_replace_callback(
 '|^(\s*)(https?://[^\s<>"]+)(\s*)$|im', array( $this, 'autoembed_callback'
 ), $content );
                         // Find URLs in their own paragraph.
                         $content = preg_replace_callback( '|(<p(?:
 [^>]*)?>\s*)(https?://[^\s<>"]+)(\s*<\/p>)|i', array( $this,
 'autoembed_callback' ), $content );
                         // Find URLs in their own paragraph.
                         $content = preg_replace_callback( '|^(<a(?:
 [^>]*)?>\s*)(https?://[^\s<>"]+)(\s*<\/a>)|i', array( $this,
 'autoembed_callback' ), $content );
                 }

                 // Put the line breaks back.
                 return str_replace( '<!-- wp-line-break -->', "\n",
 $content );
         }
 }}}



 see especialle the regex `^(<a(?:
 [^>]*)?>\s*)(https?://[^\s<>"]+)(\s*<\/a>)|i`

 In this case we say embeds can also be placed in an `<a>`-tag. Probably it
 needs some more thought and work on the regex and maybe it has some hidden
 problems, I do not see, but Ivanka and Matt seem to be happy on the first
 glance.

 Note:
 I am also not sure, if this corresponds with the bug reported in this
 ticket or if I found a new problem or if I simply smashed my install so
 hard while playing that this is not a problem at all in a clean
 installation :D I just hope it helps.

--
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/7084#comment:12>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac