Ticket #6772: 6778.08.suggestions.patch

.jshintignore

@@ -7 +7 @@
 src/bp-core/js/jquery-cookie.js
 src/bp-core/js/jquery-scroll-to.js
 src/bp-messages/js/autocomplete/*
+src/bp-activity/js/fluidvids.js

src/bp-activity/bp-activity-embeds.php

@@ -32 +32 @@
 }
 add_action( 'bp_loaded', 'bp_activity_setup_oembed' );
 
-/**
- * Add inline styles for BP activity embeds.
- *
- * This is subject to change or be removed entirely for a different system.
- * See PHPDoc for BP_Legacy::locate_asset_in_stack().
- *
- * @since  2.6.0
- * @access private
- */
-function _bp_activity_embed_add_inline_styles() {
-        if ( false === bp_is_single_activity() ) {
-                return;
-        }
-
-        $inline_css = <<<EOD
-
-#bp-embed-header:after {
-        clear: both;
-        content: "";
-        display: table;
-        margin-bottom: 1em;
-}
-
-.bp-embed-avatar {
-        float: left;
-        margin: 0 .75em 0 0;
-}
+function bp_activity_embed_register_assets() {
+        $min     = bp_core_get_minified_asset_suffix();
+        $version = bp_get_version();
 
-p.bp-embed-activity-action {
-        font-size: 15px;
-        margin-bottom: 0;
-}
-
-p.bp-embed-activity-action a:first-child {
-        color: #32373c;
-        font-weight: bold;
-}
+        // Css
+        $css_url = buddypress()->plugin_url . 'bp-activity/css/';
 
-p.bp-embed-activity-action img.avatar {
-        padding: 0 4px 0 3px;
-        vertical-align: text-bottom;
-}
-
-.bp-embed-excerpt {
-        margin-bottom: 1em;
-}
+        /**
+         * Filters the BuddyPress Embed stylesheet files to register.
+         *
+         * @since 2.6.0
+         *
+         * @param array $value Array of stylesheet file information to register.
+         */
+        $styles = apply_filters( 'bp_activity_embed_register_styles', array(
+                'bp-activity-embed' => array(
+                        'file'         => "{$css_url}embed{$min}.css",
+                        'dependencies' => array(),
+                        'has_rtl'      => true,
+                        'version'      => $version,
+                ),
+        ) );
+
+        foreach ( $styles as $id => $style ) {
+                wp_register_style( $id, $style['file'], $style['dependencies'], $style['version'] );
+
+                if ( ! empty( $style['has_rtl'] ) ) {
+                        wp_style_add_data( $id, 'rtl', true );
+                }
 
-.bp-embed-excerpt a {
-        color: #21759b;
-        display: inline-block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: top;
-        white-space: nowrap;
-        max-width: 250px;
-}
+                if ( $min ) {
+                        wp_style_add_data( $id, 'suffix', $min );
+                }
+        }
 
-.bp-activity-embed-display-media {
-        height: auto;
-        max-width: 550px;
-}
+        // JS
+        $js_url  = buddypress()->plugin_url . 'bp-activity/js/';
 
-.bp-activity-embed-display-media img {
-        height: auto;
-        max-width: 100%;
+        wp_register_script( 'bp-activity-fluidvids', "{$js_url}fluidvids{$min}.js", array(), $version, true );
 }
+add_action( 'bp_enqueue_embed_scripts', 'bp_activity_embed_register_assets', 1 );
 
-.activity-read-more {
-        margin-left: .5em;
-}
+function bp_activity_embed_enqueue_head_assets() {
+        if ( false === bp_is_single_activity() ) {
+                return;
+        }
 
-.activity-read-more a {
-        color: #b4b9be;
+        wp_enqueue_style( 'bp-activity-embed' );
 }
+add_action( 'bp_enqueue_embed_scripts', 'bp_activity_embed_enqueue_head_assets', 10 );
 
-.wp-embed-footer {
-        margin-top: 20px;
-}
+function bp_activity_embed_has_activity( $activity_id = 0 ) {
+        global $activities_template;
 
-span.bp-embed-timestamp {
-        font-size: .9em;
-}
+        if ( empty( $activity_id ) ) {
+                return false;
+        }
 
-video {
-        width: 100%;
-        height: auto;
-}
+        if ( ! empty( $activities_template->activities ) ) {
+                $activity = (array) $activities_template->activities;
+                $activity = reset( $activity );
 
-EOD;
+                // No need to requery if we already got the embed activity
+                if ( (int) $activity_id === (int) $activity->id ) {
+                        return $activities_template->has_activities();
+                }
+        }
 
-        echo "<style type='text/css'>{$inline_css}</style>";
+        return bp_has_activities( array(
+                'display_comments' => 'threaded',
+                'show_hidden'      => true,
+                'include'          => (int) $activity_id,
+        ) );
 }
-add_action( 'embed_head', '_bp_activity_embed_add_inline_styles', 20 );
 
 /**
  * Outputs excerpt for an activity embed item.
@@ -233 +214 @@
 
                 // Video takes precedence. HTML5-only.
                 if ( isset( $media['videos'] ) && 'shortcodes' === $media['videos'][0]['source'] ) {
-                        echo "<video controls>
-                <source src='{$media['videos'][0]['url']}'>
-                <p>" . __( 'Your browser does not support HTML5 video', 'buddypress' ) . "</p>
-                </video>";
+                        printf( '<video controls><source src="%1$s"><p>%2$s</p></video>',
+                                esc_url( $media['videos'][0]['url'] ),
+                                esc_html__( 'Your browser does not support HTML5 video', 'buddypress' )
+                        );
 
                 // No video? Try audio. HTML5-only.
                 } elseif ( isset( $media['audio'] ) && 'shortcodes' === $media['audio'][0]['source'] ) {
-                        echo "<audio controls>
-                <source src='{$media['audio'][0]['url']}'>
-                <p>" . __( 'Your browser does not support HTML5 audio', 'buddypress' ) . "</p>
-                </audio>";
+                        printf( '<audio controls><source src="%1$s"><p>%2$s</p></audio>',
+                                esc_url( $media['audio'][0]['url'] ),
+                                esc_html__( 'Your browser does not support HTML5 audio', 'buddypress' )
+                        );
 
                 // No video or audio? Try image.
                 } elseif ( isset( $media['images'] ) && 'html' === $media['images'][0]['source'] ) {
-                        echo '<div class="bp-activity-embed-display-media"><img src="' . $media['images'][0]['url'] . '" /></div>';
+                        printf( '<div class="bp-activity-embed-display-media"><img src="%s"/></div>', $media['images'][0]['url'] );
                 }
 
         }
 
         // Hook fluidvids script to embed footer.
         if ( true === $do_fluidvids ) {
-                add_action( 'embed_footer', '_bp_activity_embed_print_fluidvids_js' );
+                wp_enqueue_script   ( 'bp-activity-fluidvids' );
+                wp_add_inline_script( 'bp-activity-fluidvids', "
+                        fluidvids.init( {
+                                selector: ['iframe', 'object'],
+                                players: ['.'] // remove default youtube / vimeo restriction.
+                        } );
+                " );
         }
 
         /** This hook is documented in /bp-activity/bp-activity-embeds.php */
         do_action( 'bp_activity_embed_after_media' );
 }
-
-/**
- * Print fluidvids.js inline.
- *
- * Subject to be removed at any time.
- *
- * @since  2.6.0
- * @access private
- */
-function _bp_activity_embed_print_fluidvids_js() {
-?>
-
-<script>
-/*! fluidvids.js v2.4.1 | (c) 2014 @toddmotto | License: MIT | https://github.com/toddmotto/fluidvids */
-!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t:e.fluidvids=t()}(this,function(){"use strict";function e(e){return new RegExp("^(https?:)?//(?:"+d.players.join("|")+").*$","i").test(e)}function t(e,t){return parseInt(e,10)/parseInt(t,10)*100+"%"}function i(i){if((e(i.src)||e(i.data))&&!i.getAttribute("data-fluidvids")){var n=document.createElement("div");i.parentNode.insertBefore(n,i),i.className+=(i.className?" ":"")+"fluidvids-item",i.setAttribute("data-fluidvids","loaded"),n.className+="fluidvids",n.style.paddingTop=t(i.height,i.width),n.appendChild(i)}}function n(){var e=document.createElement("div");e.innerHTML="<p>x</p><style>"+o+"</style>",r.appendChild(e.childNodes[1])}var d={selector:["iframe","object"],players:["www.youtube.com","player.vimeo.com"]},o=[".fluidvids {","width: 100%; max-width: 100%; position: relative;","}",".fluidvids-item {","position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;","}"].join(""),r=document.head||document.getElementsByTagName("head")[0];return d.render=function(){for(var e=document.querySelectorAll(d.selector.join()),t=e.length;t--;)i(e[t])},d.init=function(e){for(var t in e)d[t]=e[t];d.render(),n()},d});
-
-// init
-fluidvids.init({
-        selector: ['iframe', 'object'],
-        players: ['.'] // remove default youtube / vimeo restriction.
-});
-</script>
-
-<?php
-}

src/bp-activity/css/embed.css

@@ +1 @@
+#bp-embed-header:after {
+        clear: both;
+        content: "";
+        display: table;
+        margin-bottom: 1em;
+}
+
+.bp-embed-avatar {
+        float: left;
+        margin: 0 .75em 0 0;
+}
+
+p.bp-embed-activity-action {
+        font-size: 15px;
+        margin-bottom: 0;
+}
+
+p.bp-embed-activity-action a:first-child {
+        color: #32373c;
+        font-weight: bold;
+}
+
+p.bp-embed-activity-action img.avatar {
+        padding: 0 4px 0 3px;
+        vertical-align: text-bottom;
+}
+
+.bp-embed-excerpt {
+        margin-bottom: 1em;
+}
+
+.bp-embed-excerpt a {
+        color: #21759b;
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: top;
+        white-space: nowrap;
+        max-width: 250px;
+}
+
+.bp-activity-embed-display-media {
+        height: auto;
+        max-width: 550px;
+}
+
+.bp-activity-embed-display-media img {
+        height: auto;
+        max-width: 100%;
+}
+
+.activity-read-more {
+        margin-left: .5em;
+}
+
+.activity-read-more a {
+        color: #b4b9be;
+}
+
+.wp-embed-footer {
+        margin-top: 20px;
+}
+
+span.bp-embed-timestamp {
+        font-size: .9em;
+}
+
+video {
+        width: 100%;
+        height: auto;
+}

src/bp-activity/js/fluidvids.js

@@ +1 @@
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory;
+  } else {
+    root.fluidvids = factory();
+  }
+})(this, function () {
+
+  'use strict';
+
+  var fluidvids = {
+    selector: ['iframe', 'object'],
+    players: ['www.youtube.com', 'player.vimeo.com']
+  };
+
+  var css = [
+    '.fluidvids {',
+      'width: 100%; max-width: 100%; position: relative;',
+    '}',
+    '.fluidvids-item {',
+      'position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;',
+    '}'
+  ].join('');
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+
+  function matches (src) {
+    return new RegExp('^(https?:)?\/\/(?:' + fluidvids.players.join('|') + ').*$', 'i').test(src);
+  }
+
+  function getRatio (height, width) {
+    return ((parseInt(height, 10) / parseInt(width, 10)) * 100) + '%';
+  }
+
+  function fluid (elem) {
+    if (!matches(elem.src) && !matches(elem.data) || !!elem.getAttribute('data-fluidvids')) return;
+    var wrap = document.createElement('div');
+    elem.parentNode.insertBefore(wrap, elem);
+    elem.className += (elem.className ? ' ' : '') + 'fluidvids-item';
+    elem.setAttribute('data-fluidvids', 'loaded');
+    wrap.className += 'fluidvids';
+    wrap.style.paddingTop = getRatio(elem.height, elem.width);
+    wrap.appendChild(elem);
+  }
+
+  function addStyles () {
+    var div = document.createElement('div');
+    div.innerHTML = '<p>x</p><style>' + css + '</style>';
+    head.appendChild(div.childNodes[1]);
+  }
+
+  fluidvids.render = function () {
+    var nodes = document.querySelectorAll(fluidvids.selector.join());
+    var i = nodes.length;
+    while (i--) {
+      fluid(nodes[i]);
+    }
+  };
+
+  fluidvids.init = function (obj) {
+    for (var key in obj) {
+      fluidvids[key] = obj[key];
+    }
+    fluidvids.render();
+    addStyles();
+  };
+
+  return fluidvids;
+
+});

src/bp-core/classes/class-bp-oembed-component.php

@@ -589 +589 @@
 
                 $this->content();
         }
-}
- No newline at end of file
+}

src/bp-templates/bp-legacy/buddypress/assets/embeds/activity.php

@@ -1 +1 @@
 
-                <?php if ( bp_has_activities( 'display_comments=threaded&show_hidden=true&include=' . bp_current_action() ) ) : ?>
+                <?php if ( bp_activity_embed_has_activity( bp_current_action() ) ) : ?>
 
                         <?php while ( bp_activities() ) : bp_the_activity(); ?>
                                 <div class="bp-embed-excerpt"><?php bp_activity_embed_excerpt(); ?></div>

src/bp-templates/bp-legacy/buddypress/assets/embeds/header-activity.php

@@ -6 +6 @@
                                 </a>
                         </div>
 
-                        <?php if ( bp_has_activities( 'display_comments=threaded&show_hidden=true&include=' . bp_current_action() ) ) : ?>
+                        <?php if ( bp_activity_embed_has_activity( bp_current_action() ) ) : ?>
 
                                 <?php while ( bp_activities() ) : bp_the_activity(); ?>
                                         <p class="bp-embed-activity-action">
@@ -16 +16 @@
 
                         <?php endif; ?>
 
-                        <?php if ( bp_is_active( 'activity' ) && bp_activity_do_mentions() ) : ?>
-                                <p class="bp-embed-mentionname">@<?php bp_displayed_user_mentionname(); ?> &middot; <span class="bp-embed-timestamp"><a href="<?php bp_activity_thread_permalink(); ?>"><?php echo date_i18n( get_option( 'time_format' ) . ' - ' . get_option( 'date_format' ), strtotime( bp_get_activity_date_recorded() ) ); ?></a></span></p>
-                        <?php endif; ?>
+                        <p class="bp-embed-header-meta">
+                                <?php if ( bp_is_active( 'activity' ) && bp_activity_do_mentions() ) : ?>
+                                        <span class="bp-embed-mentionname">@<?php bp_displayed_user_mentionname(); ?> &middot; </span>
+                                <?php endif; ?>
+
+                                <span class="bp-embed-timestamp"><a href="<?php bp_activity_thread_permalink(); ?>"><?php echo date_i18n( get_option( 'time_format' ) . ' - ' . get_option( 'date_format' ), strtotime( bp_get_activity_date_recorded() ) ); ?></a></span>
+                        </p>
                 </div>

src/bp-templates/bp-legacy/buddypress/assets/embeds/header.php

@@ -11 +11 @@
                                         <?php bp_displayed_user_fullname(); ?>
                                 </a>
                         </p>
-
-                        <?php if ( bp_is_active( 'activity' ) && bp_activity_do_mentions() ) : ?>
-                                <p class="bp-embed-mentionname">@<?php bp_displayed_user_mentionname(); ?></p>
-                        <?php endif; ?>
                 </div>