Current speed setting highlighted

[KieranM55]

First of all, it's a brilliant plugin thank you so much! I use it for my Guitar Practice Website to slow down exercises for students to play along with which is very powerful.

A bit of feedback I'm getting is that it would be handy for the currently selected speed to be highlighted on the player (maybe a coloured circle or bold writing?) - I had a look through your plugin description, and sorry my coding/Wordpress experience is very basic so I wasn't able to figure out if you already had documented how to do this, is it possible with the current plugin?

I've been able to edit the speed options to suit, using 60/70/80/90/100% as the buttons and they work really well, and the highlighted button would be the icing on the cake if possible, thank you!

[Lewiscowles1986]

Thanks Kieran. I actually have a sister plugin for just that, but you can even use the theme editor custom CSS (if your theme supports) or gutenberg custom-html block to add some CSS.

The code for the sister plugin

<?php
/**
 * Plugin Name: Media Playback Speed Highlight
 * Description: Highlights playback-rate buttons red when selected.
 * Author: Lewis Cowles
 * Version: 1.0.0
 */

add_action( 'wp_enqueue_scripts', function(){
  wp_enqueue_script( 'jquery' );
});
add_action( 'wp_footer', function() {
  $default_css = [["name"=>"color","value"=>"red","important"=>true]];
  $css = apply_filters('media-playback-speed-highlight-css', $default_css);
?>
<style>
.playback-rate-button.mejs-active {
<?php foreach($css as $rule): ?>
  <?php echo $rule['name']; ?>: <?php echo $rule['value']; ?> <?php echo (($rule['important'] == true) ? '!important' : ''); ?>
<?php endforeach; ?>
}
</style>

<?php

The selector to change text colour to red is basically

.playback-rate-button.mejs-active {
    color: red !important;
}

You can use any CSS that works for your audience though.

If you do put it in a custom HTML block, put the CSS between <style> tags.

The point of the sister plugin is to allow further filters to contextually (by category, tag, or post, using the media-playback-speed-highlight-css filter, and editing an array) to specify separate colours. If you want a single colour, the CSS added to your theme or post is easiest to think about.

Hope this helps, and thank you for letting me know about your use case for the plugin.

[KieranM55]

Hi Lewis, Thanks so much for getting back to me quickly, that's awesome you already have the code/plugin ready for it. Thanks so much for the code, when I have some time this week I'm looking forward to adding it to my website, and I'll definitely let you know how I go, thanks!

…

On Mon, 28 Sep 2020 at 06:54, Lewis Cowles ***@***.***> wrote: Thanks Kieran. I actually have a sister plugin for just that, but you can even use the theme editor custom CSS (if your theme supports) or gutenberg custom-html block to add some CSS. The code for the sister plugin <?php/** * Plugin Name: Media Playback Speed Highlight * Description: Highlights playback-rate buttons red when selected. * Author: Lewis Cowles * Version: 1.0.0 */ add_action( 'wp_enqueue_scripts', function(){ wp_enqueue_script( 'jquery' ); }); add_action( 'wp_footer', function() { $default_css = [["name"=>"color","value"=>"red","important"=>true]]; $css = apply_filters('media-playback-speed-highlight-css', $default_css);?><style> .playback-rate-button.mejs-active {<?php foreach($css as $rule): ?> <?php echo $rule['name']; ?>: <?php echo $rule['value']; ?> <?php echo (($rule['important'] == true) ? '!important' : ''); ?><?php endforeach; ?> }</style> <?php The selector is basically .playback-rate-button.mejs-active { color: red !important; } The point of the sister plugin is to allow further filters to contextually (by category, tag, or post, using the media-playback-speed-highlight-css filter, and editing an array) to specify separate colours. If you want a single colour, the CSS added to your theme is easiest to think about. Hope this helps, and thank you for letting me know about your use case for the plugin. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AREWBD6JZR7O4RVPECRLXJTSH6Q7PANCNFSM4R2WDXKQ> .

[KieranM55]

Hi Lewis, I've been on my wordpress site trying to add your code. Sorry but I'm a very basic user, I was able to edit your Media Playback speed options, but that's about as advanced as I can do. When I tried adding your code above into my theme's 'Additional CSS' section, I received the error 'Markup is not allowed in CSS'. I've looked into using the Gutenberg Custom HTML blocks, but not sure where to add your code, if it's on an individual page level, or somehow across the whole site. I'm using 'Ample' Theme and using Page Builder by SiteOrigin which uses their blocks, I'm wondering if you might be able to point me in the right direction of how to add this code into my site at all? Sorry for this and for wasting your time! Any help is greatly appreciated. Thanks, Kieran On Mon, 28 Sep 2020 at 18:00, Essendon Guitar <[email protected]> wrote:

…

Hi Lewis, Thanks so much for getting back to me quickly, that's awesome you already have the code/plugin ready for it. Thanks so much for the code, when I have some time this week I'm looking forward to adding it to my website, and I'll definitely let you know how I go, thanks! <#m_-8396030427860070230_DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2> On Mon, 28 Sep 2020 at 06:54, Lewis Cowles ***@***.***> wrote: > Thanks Kieran. I actually have a sister plugin for just that, but you can > even use the theme editor custom CSS (if your theme supports) or gutenberg > custom-html block to add some CSS. > The code for the sister plugin > > <?php/** * Plugin Name: Media Playback Speed Highlight * Description: Highlights playback-rate buttons red when selected. * Author: Lewis Cowles * Version: 1.0.0 */ > add_action( 'wp_enqueue_scripts', function(){ > wp_enqueue_script( 'jquery' ); > }); > add_action( 'wp_footer', function() { > $default_css = [["name"=>"color","value"=>"red","important"=>true]]; > $css = apply_filters('media-playback-speed-highlight-css', $default_css);?><style> > .playback-rate-button.mejs-active {<?php foreach($css as $rule): ?> > <?php echo $rule['name']; ?>: <?php echo $rule['value']; ?> <?php echo (($rule['important'] == true) ? '!important' : ''); ?><?php endforeach; ?> > }</style> > <?php > > The selector is basically > > .playback-rate-button.mejs-active { > color: red !important; > } > > The point of the sister plugin is to allow further filters to > contextually (by category, tag, or post, using the > media-playback-speed-highlight-css filter, and editing an array) to > specify separate colours. If you want a single colour, the CSS added to > your theme is easiest to think about. > > Hope this helps, and thank you for letting me know about your use case > for the plugin. > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#6 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AREWBD6JZR7O4RVPECRLXJTSH6Q7PANCNFSM4R2WDXKQ> > . >

[Lewiscowles1986]

Hi Kieran,

The following is the only thing you would paste into custom CSS

.playback-rate-button.mejs-active {
    color: red !important;
}

I take it you tried pasting the plugin code into the CSS box?

Can you share a screenshot (and use GitHub instead of email)?

[KieranM55]

Hey Lewis,

Thanks for the update, so I've now pasted just that code into my 'Additional CSS' area and it has worked! I can now see the red highlighted buttons for the speed option highlighted which is a big help.

I've tested it on both Chrome and Firefox on my PC, as well as Chrome on my Android phone, and the only thing I've spotted is that on Chrome on my PC, the red numbers are flashing after I hit play? Most of the surrounding audio files also have the red '100%' flashing as well after play is hit. This does not happen on Firefox or on my phone.

Sorry I can't share a video here, and my website has a password login, but I've attached a screenshot where you can see the different shades of red as it is flashing. It's not a deal breaker as the red flashing is definitely better than no highlight, but could just be distracting for the student, just wanted to let you know if you had a thought on what I might need to change at all?

Thanks very much again for your help!

Kieran

[Lewiscowles1986]

Hi Kieran,

There is nothing that should be making it flash in the code. Perhaps it is the theme in some way, or some other CSS changes?

I'd first try changing theme to an official one like storefront or 2012-2020 with only this plugin enabled (maybe on a dev site), with the theme edit.

If that solves the issue, one by one turn things back on until you see the flashing, and you'll have your culprit.

Best,
Lewis

[KieranM55]

Hi Lewis,

I think you're right, it will definitely be something on my end that I'll have a look into.

I've already had some great comments about the highlighted speed so thanks very much again!!

Kieran

[Lewiscowles1986]

Sibling plugin

media-playback-speed-highlight.zip