Skip to:
Content

BuddyPress.org

Changeset 10839


Ignore:
Timestamp:
05/31/2016 07:40:36 AM (4 years ago)
Author:
r-a-y
Message:

Activity: Introduce media into embed template.

This commit displays media from an activity item into the embed template.

Specifically, if an activity item contains an oEmbed item from a
WordPress whitelisted oEmbed provider and that oEmbed item contains a
thumbnail, we will display that thumbnail along with a caption. One thing
to note is we only display the first oEmbed item to prevent cluttering up
the embed template.

If an oEmbed item isn't found, we will attempt to find the first inline
video or audio item. If such an item is found, we will embed that item
using the browser's native HTML5 player.

Props r-a-y, imath.

See #6772.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-activity/bp-activity-embeds.php

    r10838 r10839  
    168168        return apply_filters( 'bp_activity_get_embed_excerpt', $content, $GLOBALS['activities_template']->activity->content );
    169169    }
     170
     171/**
     172 * Outputs the first embedded item in the activity oEmbed template.
     173 *
     174 * @since 2.6.0
     175 */
     176function bp_activity_embed_media() {
     177    // Bail if oEmbed request explicitly hides media.
     178    if ( isset( $_REQUEST['hide_media'] ) && true == wp_validate_boolean( $_REQUEST['hide_media'] ) ) {
     179        /**
     180         * Do something after media is rendered for an activity oEmbed item.
     181         *
     182         * @since 2.6.0
     183         */
     184        do_action( 'bp_activity_embed_after_media' );
     185
     186        return;
     187    }
     188
     189    /**
     190     * Should we display media in the oEmbed template?
     191     *
     192     * @since 2.6.0
     193     *
     194     * @param bool $retval Defaults to true.
     195     */
     196    $allow_media = apply_filters( 'bp_activity_embed_display_media', true );
     197
     198    // Find oEmbeds from only WP registered providers.
     199    bp_remove_all_filters( 'oembed_providers' );
     200    $media = bp_core_extract_media_from_content( $GLOBALS['activities_template']->activity->content, 'embeds' );
     201    bp_restore_all_filters( 'oembed_providers' );
     202
     203    // oEmbeds have precedence over inline video / audio.
     204    if ( isset( $media['embeds'] ) && true === $allow_media ) {
     205        // Autoembed first URL.
     206        $oembed_defaults = wp_embed_defaults();
     207        $oembed_args = array(
     208            'width'    => $oembed_defaults['width'],
     209            'height'   => $oembed_defaults['height'],
     210            'discover' => true
     211        );
     212        $url      = $media['embeds'][0]['url'];
     213        $cachekey = '_oembed_response_' . md5( $url . serialize( $oembed_args ) );
     214
     215        // Try to fetch oEmbed response from meta.
     216        $oembed = bp_activity_get_meta( bp_get_activity_id(), $cachekey );
     217
     218        // No cache, so fetch full oEmbed response now!
     219        if ( '' === $oembed ) {
     220            $o = _wp_oembed_get_object();
     221            $oembed = $o->fetch( $o->get_provider( $url, $oembed_args ), $url, $oembed_args );
     222
     223            // Cache oEmbed response.
     224            bp_activity_update_meta( bp_get_activity_id(), $cachekey, $oembed );
     225        }
     226
     227        $content = '';
     228
     229        /**
     230         * Filters the default embed display max width.
     231         *
     232         * This is used if the oEmbed response does not return a thumbnail width.
     233         *
     234         * @since 2.6.0
     235         *
     236         * @param int $width.
     237         */
     238        $width = (int) apply_filters( 'bp_activity_embed_display_media_width', 550 );
     239
     240        // Set thumbnail.
     241        if ( 'photo' === $oembed->type ) {
     242            $thumbnail = $oembed->url;
     243        } elseif ( isset( $oembed->thumbnail_url ) ) {
     244            $thumbnail = $oembed->thumbnail_url;
     245
     246        /* Non-oEmbed standard attributes */
     247        // Mixcloud
     248        } elseif ( isset( $oembed->image ) ) {
     249            $thumbnail = $oembed->image;
     250        // ReverbNation
     251        } elseif ( isset( $oembed->{'thumbnail-url'} ) ) {
     252            $thumbnail = $oembed->{'thumbnail-url'};
     253        }
     254
     255        // Display thumb and related oEmbed meta.
     256        if ( true === isset ( $thumbnail ) ) {
     257            $play_icon = $caption = '';
     258
     259            // Add play icon for non-photos.
     260            if ( 'photo' !== $oembed->type ) {
     261                /**
     262                 * ion-play icon from Ionicons.
     263                 *
     264                 * @link    http://ionicons.com/
     265                 * @license MIT
     266                 */
     267                $play_icon = <<<EOD
     268<svg id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M405.2,232.9L126.8,67.2c-3.4-2-6.9-3.2-10.9-3.2c-10.9,0-19.8,9-19.8,20H96v344h0.1c0,11,8.9,20,19.8,20  c4.1,0,7.5-1.4,11.2-3.4l278.1-165.5c6.6-5.5,10.8-13.8,10.8-23.1C416,246.7,411.8,238.5,405.2,232.9z"/></svg>
     269EOD;
     270
     271                $play_icon = sprintf( '<a rel="nofollow" class="play-btn" href="%1$s" onclick="top.location.href=\'%1$s\'">%2$s</a>', esc_url( $url ), $play_icon );
     272            }
     273
     274            // Thumb width
     275            $thumb_width = isset( $oembed->thumbnail_width ) && 'photo' !== $oembed->type && (int) $oembed->thumbnail_width < 550 ? (int) $oembed->thumbnail_width : $width;
     276
     277            $float_width = 350;
     278
     279            // Set up thumb.
     280            $content = sprintf( '<div class="thumb" style="max-width:%1$spx">%2$s<a href="%3$s" rel="nofollow" onclick="top.location.href=\'%3$s\'"><img src="%4$s" /></a></div>', $thumb_width, $play_icon, esc_url( $url ), esc_url( $thumbnail ) );
     281
     282            // Show title.
     283            if ( isset( $oembed->title ) ) {
     284                $caption .= sprintf( '<p class="caption-title"><strong>%s</strong></p>', apply_filters( 'single_post_title', $oembed->title ) );
     285            }
     286
     287            // Show description (non-oEmbed standard)
     288            if ( isset( $oembed->description ) ) {
     289                $caption .= sprintf( '<div class="caption-description">%s</div>', apply_filters( 'bp_activity_get_embed_excerpt', $oembed->description ) );
     290            }
     291
     292            // Show author info.
     293            if ( isset( $oembed->provider_name ) && isset( $oembed->author_name ) ) {
     294                /* translators: By [oEmbed author] on [oEmbed provider]. eg. By BuddyPress on YouTube. */
     295                $anchor_text = sprintf( __( 'By %1$s on %2$s', 'buddypress' ), $oembed->author_name, $oembed->provider_name );
     296
     297            } elseif ( isset( $oembed->provider_name ) ) {
     298                $anchor_text = sprintf( __( 'View on %s', 'buddypress' ), $oembed->provider_name );
     299            }
     300
     301            if ( true === isset( $anchor_text ) )  {
     302                $caption .= sprintf( '<a rel="nofollow" href="%1$s" onclick="top.location.href=\'%1$s\'">%2$s</a>', esc_url( $url ), apply_filters( 'the_title', $anchor_text ) );
     303            }
     304
     305            // Set up caption.
     306            if ( '' !== $caption ) {
     307                $css_class = isset( $oembed->provider_name ) ? sprintf( ' provider-%s', sanitize_html_class( strtolower( $oembed->provider_name ) ) ) : '';
     308                $caption = sprintf( '<div class="caption%1$s" style="width:%2$s">%3$s</div>',
     309                    $css_class,
     310                    $thumb_width > $float_width ? 100 . '%' : round( ( $width - (int) $thumb_width ) / $width * 100 ) . '%',
     311                    $caption
     312                );
     313
     314                $content .= $caption;
     315            }
     316        }
     317
     318        // Print rich content.
     319        if ( '' !== $content ) {
     320            printf( '<div class="bp-activity-embed-display-media %s" style="max-width:%spx">%s</div>',
     321                $thumb_width < $float_width ? 'two-col' : 'one-col',
     322                $thumb_width < $float_width ? $width : $thumb_width,
     323                $content
     324            );
     325        }
     326
     327    // Video / audio.
     328    } elseif ( true === $allow_media ) {
     329        // Call BP_Embed if it hasn't already loaded.
     330        bp_embed_init();
     331
     332        // Run shortcode and embed routine.
     333        $content = buddypress()->embed->run_shortcode( $GLOBALS['activities_template']->activity->content );
     334        $content = buddypress()->embed->autoembed( $content );
     335
     336        // Try to find inline video / audio.
     337        $media = bp_core_extract_media_from_content( $content, 96 );
     338
     339        // Video takes precedence. HTML5-only.
     340        if ( isset( $media['videos'] ) && 'shortcodes' === $media['videos'][0]['source'] ) {
     341            printf( '<video controls preload="metadata"><source src="%1$s"><p>%2$s</p></video>',
     342                esc_url( $media['videos'][0]['url'] ),
     343                esc_html__( 'Your browser does not support HTML5 video', 'buddypress' )
     344            );
     345
     346        // No video? Try audio. HTML5-only.
     347        } elseif ( isset( $media['audio'] ) && 'shortcodes' === $media['audio'][0]['source'] ) {
     348            printf( '<audio controls preload="metadata"><source src="%1$s"><p>%2$s</p></audio>',
     349                esc_url( $media['audio'][0]['url'] ),
     350                esc_html__( 'Your browser does not support HTML5 audio', 'buddypress' )
     351            );
     352        }
     353
     354    }
     355
     356    /** This hook is documented in /bp-activity/bp-activity-embeds.php */
     357    do_action( 'bp_activity_embed_after_media' );
     358}
  • trunk/src/bp-templates/bp-legacy/buddypress/assets/embeds/activity.php

    r10838 r10839  
    44            <?php while ( bp_activities() ) : bp_the_activity(); ?>
    55                <div class="bp-embed-excerpt"><?php bp_activity_embed_excerpt(); ?></div>
     6
     7                <?php bp_activity_embed_media(); ?>
     8
    69            <?php endwhile; ?>
    710
    811        <?php endif; ?>
    9 
  • trunk/src/bp-templates/bp-legacy/buddypress/assets/embeds/css-activity.php

    r10838 r10839  
    5555    font-size: .9em;
    5656}
     57
     58video {
     59    width: 100%;
     60    height: auto;
     61}
     62
     63.bp-activity-embed-display-media {
     64    border: 1px solid #ccc;
     65    border-radius: 6px;
     66}
     67
     68.bp-activity-embed-display-media.one-col,
     69.bp-activity-embed-display-media.one-col .thumb,
     70.bp-activity-embed-display-media.one-col .thumb img {
     71    width: 100%;
     72}
     73
     74.bp-activity-embed-display-media.two-col .thumb,
     75.bp-activity-embed-display-media.two-col .caption {
     76    display: table-cell;
     77}
     78
     79.bp-activity-embed-display-media.two-col .thumb {
     80    background: #000;
     81    vertical-align: middle;
     82}
     83
     84.bp-activity-embed-display-media.two-col .caption {
     85    vertical-align: top;
     86}
     87
     88.bp-activity-embed-display-media.two-col .thumb img {
     89    border-right: 1px solid #ccc;
     90    display: block;
     91    width: 100%;
     92}
     93
     94.bp-activity-embed-display-media .thumb {
     95    position: relative;
     96}
     97
     98.bp-activity-embed-display-media .caption {
     99    padding: .2em .5em .5em .5em;
     100}
     101
     102a.play-btn {
     103    background: rgba(0, 0, 0, 0.75);
     104    border-radius: 50%;
     105    height: 50px;
     106    left: 50%;
     107    margin: 0;
     108    padding: 1em;
     109    position: absolute;
     110    text-indent: 0.25em;
     111    top: 50%;
     112    transform: translateY(-50%) translateX(-50%);
     113    -webkit-transform: translateY(-50%) translateX(-50%);
     114    transition: all 0.2s ease-out;
     115    width: 50px;
     116}
     117
     118.bp-activity-embed-display-media.two-col a.play-btn {
     119    height: 35px;
     120    width: 35px;
     121}
     122
     123a.play-btn:hover {
     124    background: rgba(0, 0, 0, 0.95);
     125    transform: translateY(-50%) translateX(-50%) scale(1.05);
     126    -webkit-transform: translateY(-50%) translateX(-50%) scale(1.05);
     127    transition: all 0.2s ease-out;
     128}
     129
     130.bp-activity-embed-display-media .thumb svg {
     131    fill: #fff;
     132    overflow: hidden;
     133}
     134
     135.bp-activity-embed-display-media .caption-description {
     136    font-size: 90%;
     137    margin: .4em 0;
     138}
     139
     140@media only screen and (max-width: 480px) {
     141    .bp-activity-embed-display-media.two-col .thumb {
     142        border-bottom: 1px solid #ccc;
     143        border-right: 0;
     144        display: block;
     145        max-width: none !important;
     146    }
     147
     148    a.play-btn {
     149        height: 35px;
     150        width: 35px;
     151    }
     152}
Note: See TracChangeset for help on using the changeset viewer.