media element issue on all twenty themes

[danbp]

I encountered a weird issue after publishing a post containing a playlist.
This post shows correctly on the blog, but when i output it on user's profile, the player stop displaying the buttons (screenshots 1 & 2).

I get this with all twenty themes and a few other recent themes with the same result, except 2014 who shows the buttons, but on a unusual white background.

Finally tried with BP Magic theme (by @sbrajesh) who surprisingly displayed correctly the player, on blog and profile.

The thing is that this theme use he's own mediaelement.js and also a custom html5 css.

Guess the issue is not on WP's side (for which in a strict point of view, it's not an issue), but more an adjustment on twenty's (at least) and probably most themes following latest theme standards or something like that.

If for BP Magic it is almost clear, what is different in 2014 from 13,15,16 in handling the wp player output ?

To reproduce, create a post containing an audio gallery and output it on a user profile.

Here the code for that:

<?php
function bpfr_get_post() {

        $args = array(
                        'posts_per_page'        => 3, // set the number of post to show
                        'author'                => bp_displayed_user_id(), // show only this member post
                        'post_type'             => 'post',
                        'category_name'         => 'audio',
                        'post_status'           => 'publish',
                        'order'                 => 'DESC',
                );

                $posts = get_posts( $args );

        if(!empty($posts)) {
                foreach($posts as $post)
                {
                        echo $post->post_title;
                        echo $post->post_content;
                }       
                        wp_reset_postdata();

                } else { 
                
                        echo '<div class="info" id="message">This user has no playlist.</div>';
                } 
}
add_action ( 'my_profile_post', 'bpfr_get_post' ); 


function bpfr_post_profile_setup_nav() {
global $bp;

        $parent_slug    = 'audio';
        $child_slug     = 'posts_sub';          
        $user_id        = bp_displayed_user_id();

        $myposts = '';
        $catauthors = array();
        $allposts = get_posts( array( 
                        'author'        => $user_id,
                        'cat_name'      => 'audio',
                        'showposts'     => -1
                ) );

        if ( $allposts ) {
                foreach( $allposts as $authorpost ) {
                        $catauthors[$authorpost->post_author] = 1;
                }       
                $myposts = count( $catauthors );
        }

        
                //Add nav item with count
                bp_core_new_nav_item( array(
                        'name'                                  => __( 'Audios' ) .'&nbsp;<span>'.$myposts.'</span>',
                        'slug'                                  => $parent_slug,
                        'screen_function'               => 'bpfr_profile_post_screen',
                        'position'                              => 40,
                        'default_subnav_slug'   => $child_slug 
                ) );
                
                //Add subnav item        
                bp_core_new_subnav_item( array( 
                        'name'                          => __( 'My Playlist', 'textdomain' ),
                        'slug'                          => $child_slug, 
                        'parent_url'            => $bp->loggedin_user->domain . $parent_slug.'/', 
                        'parent_slug'           => $parent_slug, 
                        'screen_function'       => 'bpfr_profile_post_screen'
                ) );

        }

        function bpfr_profile_post_screen() {   
                add_action( 'bp_template_content', 'bpfr_profile_post_screen_content' );
                bp_core_load_template( apply_filters( 'bp_core_template_plugin', 'members/single/plugins' ) );
        }

        function bpfr_profile_post_screen_content() {
                do_action( 'my_profile_post' );
        }

add_action( 'bp_setup_nav', 'bpfr_post_profile_setup_nav' );

[hnla]

@danbp can you help things along though with an element inspection, can you not pinppoint what property or ruleset and stylesheet is causing this issue, is it the recent companion stylesheets for BP causing this issue? I did get the email but haven't had time to look at or setup testcases, so apologies there.

[sbrajesh]

@hnla
The problem is caused by following rules

#buddypress button,
#buddypress a.button,
#buddypress input[type=submit],
#buddypress input[type=button],
#buddypress input[type=reset],
#buddypress ul.button-nav li a,
#buddypress .generic-button a,
#buddypress .comment-reply-link,
a.bp-title-button {
	background: #fff; /* Old browsers */
	border: 1px solid #ccc;
	color: #767676;
	font-size: small;
	cursor: pointer;
	outline: none;
	padding: 4px 10px;
	text-align: center;
	text-decoration: none;
}
#buddypress button:hover,
#buddypress a.button:hover,
#buddypress a.button:focus,
#buddypress input[type=submit]:hover,
#buddypress input[type=button]:hover,
#buddypress input[type=reset]:hover,
#buddypress ul.button-nav li a:hover,
#buddypress ul.button-nav li.current a,
#buddypress div.generic-button a:hover,
#buddypress .comment-reply-link:hover {
	background: #ededed;
	border: 1px solid #bbb;
	color: #555;
	outline: none;
	text-decoration: none;
}

It is applying rules to bare button tag #buddypress button causing the issue.

It has been there since the very existence of the template pack.

Hope that helps.

[hnla]

It helps, thanks @sbrajesh
Problem is going to be adjusting those rulesets without causing issues for existing themes/layouts and of how one could really know whether one had caused an unintended issue.

We could change properties correct the issue for this player but cause further complications in other themes, and we would struggle to be able to test for that.

I don't really like suggesting this as it's a bit of a avoidance but this may be something that has to be fixed on a theme basis?

Of course alternatively we could add a specific ruleset override targeting the player to re-set / clear the background but adding specific app/plugin rules isn't something I really would want to do in a stylesheet like the BP ones.

I may be missing something though, a further approach or remedy to correct things?.

[sbrajesh]

Thank you.
I believe it is an issue on parts of BuddyPress template pack and can be easily rectified without causing much damage.

Though the "button" element can be used anywhere, In BuddyPress the intended purpose is to use it inside the forms. Since all BuddyPress forms use the class 'standard-form' , we can simply change the selector from

#buddypress button

to

#buddypress .standard-form button

I don't think there is any use cse of the "button" element in BuddyPress that won't be covered by this. In fact, I did some search in my IDE and It seems BuddyPress does not use the 'button' element at all in the current version.

Hope that helps.

[danbp]

@hnla, @sbrajesh, thank you guys. I will try to help of course. Be back as soon as i found something useable to this issue.

[hnla]

@sbrajesh Ok that's all very helpful, issue is still a dangerous one though changing a ruleset selector set, but you're right likely simply adding .standard-form to group will correct issue and not cause massive issues but tbh no issues can be caused otherwise we just upset people and need to avoid that.

@danbp how do we create a playlist - apart from adding the code above - have you a test embed handy?

[danbp]

No, haven't such test. You have to use the ​conventionnal way !

[danbp]

While using following ruleset to change the player bg color:
(source file: wp-includes/js/mediaelement/wp-mediaelement.css)

/* change the color of the background */
.mejs-controls,
.mejs-mediaelement,
.mejs-container {
        background: url('') !important;
        background-color: #C8E1FA !important;
}
 
/* change the color of the lettering */
.mejs-currenttime,
.mejs-duration {
        color: #000 !important;
}

i first used it in /child/style.css - no effect
then in /child/buddypress/css/twentysixteen.css - no efect
and finally directly in twentysixteen/style.css - it worked

When using an empty(!) wp-mediaelement.css, nothing happens (in back or front end). It's like that file is of no use.

[danbp]

Got it !

Using following rule set solved the issue.

#buddypress button,
#buddypress a.button,
#buddypress input[type=submit],
#buddypress input[type=button],
#buddypress input[type=reset],
#buddypress ul.button-nav li a,
#buddypress .generic-button a,
#buddypress .comment-reply-link,
a.bp-title-button {
/*      background: #fff; 
        border: 1px solid #ccc;
        color: #767676; */
        color: #fff;
        font-size: small;
        cursor: pointer;
        outline: none;
/*      padding: 4px 10px; */
        text-align: center;
        text-decoration: none;
}

#buddypress button:hover,
#buddypress a.button:hover,
#buddypress a.button:focus,
#buddypress input[type=submit]:hover,
#buddypress input[type=button]:hover,
#buddypress input[type=reset]:hover,
#buddypress ul.button-nav li a:hover,
#buddypress ul.button-nav li.current a,
#buddypress div.generic-button a:hover,
#buddypress .comment-reply-link:hover {
/*      background: #ededed;
        border: 1px solid #bbb; */
        color: #555;
        outline: none;
        text-decoration: none;
}

Problem is that i got it to work only by using buddypress.min.css
I had no luck from /child/style.css or /child/buddypress/css/twentysixteen.css

All other twenty themes display correctly too. Even Graphene who found back some of his lost buttons bg (overidden by bp)

[hnla]

@danbp thanks, I found some test files and managed to setup a WP playlist (not a great UI!) :)

In testing I'm favoring @sbrajesh approach, the styling targeted to any button element under the #buddypress namespace should have been safe but was a little too loose we couldn't guess at how button elements might be used.

I will target the BP rules to specifically buttons under the .standard-form class which will correct the issue for the player visuals.

I'll commit changes to buddypress.css at a convenient moment.

[hnla]

When using an empty(!) wp-mediaelement.css, nothing happens (in back or front end). It's like that file is of no use.

The rulesets do not take into account styling on an actual button element they should have included button in the grouped selectors, not just on some parent classes.

[hnla]

In 10946:

Update BP button styles element selector group

BP main styles currently styles various elements as 'buttons' including the actual 'button' element, this has caused issue for visual styling of WP media player if rendered in the #buddypress namespace, adding a white background to player controls hiding them.

Effective solution is not to style the button element outside of the form.standard-form element thus adding '.standard-form' into the selector group '#buddypress .standard-form button' corrects the problem. Currently BP does not use the button element regardless in bp-legacy! With thanks to sbrajesh & danbp for investigations & suggested solutions.

Fixes #7187 Props danbp & sbrajesh

[danbp]

Thank you Hugo for the HOT fix ! It's ok now.