Skip to:
Content

Opened 18 months ago

Closed 18 months ago

Last modified 18 months ago

#7187 closed defect (bug) (fixed)

media element issue on all twenty themes

Reported by: danbp Owned by: hnla
Milestone: Priority: normal
Severity: minor Version: 2.6.1.1
Component: Media Keywords:
Cc: danco38@…

Description

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' );

Attachments (2)

playlist_blog.jpg (23.7 KB) - added by danbp 18 months ago.
playlist_profile.jpg (29.5 KB) - added by danbp 18 months ago.

Download all attachments as: .zip

Change History (17)

@danbp
18 months ago

#1 @hnla
18 months ago

@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.

#2 @sbrajesh
18 months ago

@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.

#3 @hnla
18 months ago

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?.

#4 @sbrajesh
18 months ago

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.

#5 @danbp
18 months ago

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

#6 @hnla
18 months ago

@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?

#7 @danbp
18 months ago

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

#8 @danbp
18 months ago

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.

#9 @danbp
18 months ago

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)

#10 @hnla
18 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

@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.

#11 @hnla
18 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

#12 @hnla
18 months ago

  • Owner set to hnla
  • Status changed from reopened to accepted

#13 @hnla
18 months ago

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.

#14 @hnla
18 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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

#15 @danbp
18 months ago

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

Note: See TracTickets for help on using tickets.