Hi,

it seems Ffx Nightly has some mediakeys support and I was wondering the impact it has on this extension.

Without it, sometimes play/pause doesn't do anything.
With it, if Ffx has focus, Ffx behaves like if I press the key twice.

Hey, i know it says request the site and give out the html but i was just wondering if this was domain dependent?

I maintain Ampache (github.com/ampache/ampache/) and something like this has actually been requested a lot.

if i did a request with the details for our web player would it be possible for it to work on any site domain? because it's selfhosted it could be anything including just an ip.

https://www.jamendo.com/

outer HTML:

Pause button

<i class="icon icon-pause"></i>

Play

<i class="icon icon-play"></i>

Next

<i class="icon icon-next"></i>

Previous

<i class="icon icon-previous"></i>

You said in the other repo that you made this repo to address WebExtension concerns - can you create a release here or on the Firefox page?

The media keys don't work in the new Deezer.

Following your instructions, I found these buttons that unfortunately seems not to have any distinctive properties (aria-label is language dependent):

Play/Pause: <button class="svg-icon-group-btn is-highlight" type="button" aria-label="Pauza"><svg class="svg-icon svg-icon-pause" focusable="false" height="1em" width="1em" viewBox="0 0 12 12" aria-hidden="true"><path d="M2.495 0h2.01C4.778 0 5 .224 5 .5v11a.5.5 0 0 1-.495.5h-2.01A.498.498 0 0 1 2 11.5V.5a.5.5 0 0 1 .495-.5zM7 .5a.5.5 0 0 1 .495-.5h2.01c.273 0 .495.224.495.5v11a.5.5 0 0 1-.495.5h-2.01A.498.498 0 0 1 7 11.5V.5z"></path></svg></button>

Back: <button class="svg-icon-group-btn" type="button" aria-label="Zpět"><svg class="svg-icon svg-icon-prev" focusable="false" height="1em" width="1em" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 5.397V.5a.5.5 0 1 0-1 0v11a.5.5 0 1 0 1 0V6.597L11 12V0L2 5.397z"></path></svg></button>

Next: <button class="svg-icon-group-btn" type="button" aria-label="Další"><svg class="svg-icon svg-icon-next" focusable="false" height="1em" width="1em" viewBox="0 0 12 12" aria-hidden="true"><path d="M11 .5v11c0 .276-.232.5-.5.5a.503.503 0 0 1-.5-.5V7.08L1.562 11.95A.375.375 0 0 1 1 11.624V.376c0-.29.312-.47.562-.325L10 4.919V.5c0-.276.232-.5.5-.5.276 0 .5.229.5.5z"></path></svg></button>

Bandcamp supports custom domains for pro subscribers, so there can be dozens of bandcamp sites with different domains.

Link: https://mixcloud.com/
Name: Mixcloud

Pause:

<button aria-label="Pause" class="PlayButton__PlayerControl-css-in-js__sc-v1elkk-1 hpMpfh"><span class="PlayButton__PlayButtonIcon-css-in-js__sc-v1elkk-2 bYsnxH"><svg height="60" viewBox="0 0 60 60" width="60" xmlns="http://www.w3.org/2000/svg"><path d="M30 0a30 30 0 110 60 30 30 0 010-60zm-4 18h-4v24h4zm12 0h-4v24h4z" fill="#1e2337" fill-rule="evenodd"></path></svg></span></button>

Seek forward:

<button aria-label="Seek forwards" data-tooltip="Keep tapping to seek faster" class="SeekButton__SeekButtonContainer-css-in-js__sc-7vewg0-0 fSCeEY"><div class="SeekButton__SeekButtonWrapper-css-in-js__sc-7vewg0-4 iFYGHQ"><svg width="32" height="12" viewBox="0 0 32 12" xmlns="http://www.w3.org/2000/svg"><path d="M24.07 0l-1.1 1.75L28.14 5H8.03C2.62 4.82.09 6.45 0 11.85V12h2c0-4.43 1.57-5.07 5.71-5.01h20.53l-5.27 3.3 1.1 1.75 7.99-5-.03-.05h.03v-2h-.02L24.07 0z" fill="#1E2337" fill-rule="evenodd"></path></svg><p class="SeekButton__SeekButtonText-css-in-js__sc-7vewg0-1 SeekButton__SeekForwardButtonText-css-in-js__sc-7vewg0-3 eyFrsh fRJLWu">30s</p></div></button>

Seek backwards:

<button aria-label="Seek backwards" data-tooltip="Keep tapping to seek faster" class="SeekButton__SeekButtonContainer-css-in-js__sc-7vewg0-0 fSCeEY"><div class="SeekButton__SeekButtonWrapper-css-in-js__sc-7vewg0-4 iFYGHQ"><svg width="32" height="12" viewBox="0 0 32 12" xmlns="http://www.w3.org/2000/svg"><path d="M7.99 0l1.1 1.75L3.92 5h20.1c5.42-.17 7.95 1.46 8.04 6.86V12h-2c0-4.43-1.57-5.07-5.71-5.01H3.82l5.27 3.3-1.1 1.75-7.99-5 .03-.05H0v-2h.02L8 0z" fill="#1E2337" fill-rule="evenodd"></path></svg><p class="SeekButton__SeekButtonText-css-in-js__sc-7vewg0-1 SeekButton__SeekBackButtonText-css-in-js__sc-7vewg0-2 eyFrsh dxplBj">30s</p></div></button>

Thanks.

Currently, the extension requests permission for all websites that are supported upon install or update. It would be less scary and confusing if it only requested permission for sites after they've been visited. It could also allow people to disallow interaction with sites that they don't want to be controlled by this extension, such as Youtube possibly.

Technical Details

A button will need to be added to the browser toolbar. That button can change color and notify the user when they're viewing a supported site that hasn't been enabled yet. I'm thinking gray for unsupported site, red for disabled site and blue for enabled site.

The button needs to be clicked to toggle extension permission to, and support for the site. That's a requirement of the permissions API. All of the content_script definitions in manifest.json will need to be moved to another json file and read into a new permission-manager.js script.

I use wincompose to generate accented characters and other useful symbols, such as à,ê, and →. Whenever I issue such a character, soundcloud is toggled on and off, as if browser-media-players detected a media key press event.
🦁, however, leaves soundcloud alone.
Typing a é using a french keyboard layout doesn't exhibit the issue.
I don't know if wincompose is to blame, I posted a similar issue to it.

My keyboard at work does not have media buttons, so it would be nice if I could set the function keys
(F1-F12) or similar to act as media keys

Link: https://play.pocketcasts.com/web/podcasts
Name: PocketCasts
Player control element html:

• Play/Pause: <button class="animated-play-button play_pause_button pause_button" aria-label="Play"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" style="width: 100%; height: 100%;" preserveAspectRatio="xMidYMid meet"><defs><clipPath id="animationMask_T5ITdV4jMB"><rect width="96" height="96" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#animationMask_T5ITdV4jMB)"><g style="-moz-user-select: none;" transform="matrix(1,0,0,1,48.023,48.016)" opacity="1"><g opacity="1" transform="matrix(-1,0,0,-1,11.446,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d="M0 0 M17.492,-19.016 C17.492,-19.567999999999998 17.94,-20.016 18.492,-20.016 C18.492,-20.016 27.508,-20.016 27.508,-20.016 C28.06,-20.016 28.508,-19.567999999999998 28.508,-19.016 C28.508,-19.016 28.508,19.016 28.508,19.016 C28.508,19.567999999999998 28.06,20.016 27.508,20.016 C27.508,20.016 18.492,20.016 18.492,20.016 C17.94,20.016 17.492,19.567999999999998 17.492,19.016 C17.492,19.016 17.492,-19.016 17.492,-19.016zM0 0 M-5.508,-19.016 C-5.508,-19.567999999999998 -5.0600000000000005,-20.016 -4.508,-20.016 C-4.508,-20.016 4.508,-20.016 4.508,-20.016 C5.0600000000000005,-20.016 5.508,-19.567999999999998 5.508,-19.016 C5.508,-19.016 5.508,19.016 5.508,19.016 C5.508,19.567999999999998 5.0600000000000005,20.016 4.508,20.016 C4.508,20.016 -4.508,20.016 -4.508,20.016 C-5.0600000000000005,20.016 -5.508,19.567999999999998 -5.508,19.016 C-5.508,19.016 -5.508,-19.016 -5.508,-19.016z"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0 M17.492,-19.016 C17.492,-19.567999999999998 17.94,-20.016 18.492,-20.016 C18.492,-20.016 27.508,-20.016 27.508,-20.016 C28.06,-20.016 28.508,-19.567999999999998 28.508,-19.016 C28.508,-19.016 28.508,19.016 28.508,19.016 C28.508,19.567999999999998 28.06,20.016 27.508,20.016 C27.508,20.016 18.492,20.016 18.492,20.016 C17.94,20.016 17.492,19.567999999999998 17.492,19.016 C17.492,19.016 17.492,-19.016 17.492,-19.016zM0 0 M-5.508,-19.016 C-5.508,-19.567999999999998 -5.0600000000000005,-20.016 -4.508,-20.016 C-4.508,-20.016 4.508,-20.016 4.508,-20.016 C5.0600000000000005,-20.016 5.508,-19.567999999999998 5.508,-19.016 C5.508,-19.016 5.508,19.016 5.508,19.016 C5.508,19.567999999999998 5.0600000000000005,20.016 4.508,20.016 C4.508,20.016 -4.508,20.016 -4.508,20.016 C-5.0600000000000005,20.016 -5.508,19.567999999999998 -5.508,19.016 C-5.508,19.016 -5.508,-19.016 -5.508,-19.016z"></path></g><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d="M0 0 M-146.023,310.984"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0 M-146.023,310.984"></path></g></g></g></svg></button>

• Next: <button class="skip-forward-button skip_forward_button" aria-label="Skip forward"><p>30</p></button>

• Previous: <button class="skip-back-button skip_back_button" aria-label="Skip back"><p>15</p></button>

I'm using the old youtube layout in firefox. The media keys don't do anything any more.

Thanks for this extension; it's working great for forward/pause/back. I'd love if it could also map keys for 'like'/'dislike'.

Also, it'd be great to have a notification pop-up when you did any of the above.

Hello.
It just hasn't been working for some time. Now tested on Firefox Nightly 73 with this only extension.
Thanks.
Marek

In case it helps I add:

Play:
<button class="svg-icon-group-btn is-highlight" type="button" aria-label="Přehrát"><svg class="svg-icon svg-icon-play" focusable="false" height="1em" width="1em" viewBox="0 0 12 12" aria-hidden="true"><path fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M2.5.5v11l9-5.5z"></path></svg></button>

Pause:
<button class="svg-icon-group-btn is-highlight" type="button" aria-label="Pauza"><svg class="svg-icon svg-icon-pause" focusable="false" height="1em" width="1em" viewBox="0 0 12 12" aria-hidden="true"><path d="M2.495 0h2.01C4.778 0 5 .224 5 .5v11a.5.5 0 0 1-.495.5h-2.01A.498.498 0 0 1 2 11.5V.5a.5.5 0 0 1 .495-.5zM7 .5a.5.5 0 0 1 .495-.5h2.01c.273 0 .495.224.495.5v11a.5.5 0 0 1-.495.5h-2.01A.498.498 0 0 1 7 11.5V.5z"></path></svg></button>

Next:
<button class="svg-icon-group-btn" type="button" aria-label="Další"><svg class="svg-icon svg-icon-next" focusable="false" height="1em" width="1em" viewBox="0 0 12 12" aria-hidden="true"><path d="M11 .5v11c0 .276-.232.5-.5.5a.503.503 0 0 1-.5-.5V7.08L1.562 11.95A.375.375 0 0 1 1 11.624V.376c0-.29.312-.47.562-.325L10 4.919V.5c0-.276.232-.5.5-.5.276 0 .5.229.5.5z"></path></svg></button>

Prev:
<button class="svg-icon-group-btn is-active" type="button" aria-label="Zpět"><svg class="svg-icon svg-icon-prev" focusable="false" height="1em" width="1em" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 5.397V.5a.5.5 0 1 0-1 0v11a.5.5 0 1 0 1 0V6.597L11 12V0L2 5.397z"></path></svg></button>

Pressing the ⏮ or ⏭ (skip back or foward) buttons activate the ⏯ (play/pause) button instead on open.spotify.com. I looked at the buttons and the open.spotify.com-view.js file, and everything looks OK. Here's a snippet of the HTML:

<button class="control-button spoticon-skip-back-16" title="Previous"></button>
<button class="control-button spoticon-pause-16 control-button--circled" title="Pause"></button>
<button class="control-button spoticon-skip-forward-16" title="Next"></button>
<button class="control-button spoticon-repeat-16" title="Enable repeat"></button>

And the file:

MediaKeys.pauseButton = "//button[contains(concat(' ', normalize-space(@class), ' '), ' spoticon-pause-')]";
MediaKeys.skipButton = "//button[contains(concat(' ', normalize-space(@class), ' '), ' spoticon-skip-forward-')]";
MediaKeys.previousButton = "//button[contains(concat(' ', normalize-space(@class), ' '), ' spoticon-skip-back-')]";

The play/pause key is not responding while listening music on Spotify, works on Youtube (at least, probably on a lot of platforms too but I haven't tried a lot of them).
Running Firefox 84.0.2 on Ubuntu 20

New version requires this

• Access your data for sites in the kanopy.com domain
• Access your data for shop.attackthemusic.com

I am uninstalling this addon for now, please resolve

User Stories

"I only use media keys to control the active tab".
"I want to be able to have youtube open while controlling my desktop music player".

Proposed Solution

Add extension option to only have the active tab controlled by media keys.

I have a Logitect keyboard "MK235" like this one.
When I'm playing YouTube and open the calculator from keyboard the YT video stopped.

To re-product bug:

1. Open YouTube or any website that is using YouTube embedded.
2. Play the video.
3. Press fn+F4 (F4 for my keyboard is calculator sign).
4. The Windows calculator openned. YouTube stopped playing.

hello, i download this and install in chrome, first of all

1. "lib/browser-polyfill.min.js" manifest error
   after editing (deleted this part of code) extension is installed but in does nothing. I opened Yandex Radio but media keys doesnt work. (opera same problem)

I am using a Logitech G610 and have not had this issue with any other app. I have tried changing the media event mappings to my media keys but, the defaults are set correctly to my key names and it still does not work. If I change it to another key combination (Ctrl+Shift+Right) I am able to skip and use the functions.

I'd like Yandex Music support to be added into the plugin.

1. Link: https://music.yandex.ru/ and https://music.yandex.com/
2. Name: Yandex Music
3. Play/Pause button:

<div class="d-icon d-icon_play"></div>

Prev button:

<div class="d-icon d-icon_track-prev"></div>

Next button:

<div class="d-icon d-icon_track-next"></div>

Link: twitch.tv
Name: Twitch

This is what inspecting the center of the pause button shows:
<path d="M8 3H4v14h4V3zM16 3h-4v14h4V3z"></path>

But I think this is the actual full HTML for the pause button:
<button class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative" data-a-target="player-play-pause-button" data-a-player-state="playing" aria-label="Pause (space/k)"><span class="tw-button-icon__icon"><div style="width: 2rem; height: 2rem;"><div class="ScIconLayout-sc-1bgeryd-0 kbOjdP tw-icon"><div class="ScAspectRatio-sc-1sw3lwy-1 dNNaBC tw-aspect"><div class="ScAspectSpacer-sc-1sw3lwy-0 gkBhyN"></div><svg width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" class="ScIconSVG-sc-1bgeryd-1 cMQeyU"><g><path d="M8 3H4v14h4V3zM16 3h-4v14h4V3z"></path></g></svg></div></div></div></span></button>

Or I'm missing something ?

Hey i recently just started using your addon on firefox and it works perfectly on websites like youtube but when i try on netflix nothing happens

I request support for the mediathek of the public broadcasting service ZDF located under at zdf.de:

Pause:

<button class="zdfplayer-control_button zdfplayer-pause zdfplayer-short-label" type="button" aria-label="Anhalten">
            <span class="btn-icon"></span>
        </button>

Play:

<button class="zdfplayer-control_button zdfplayer-play zdfplayer-short-label" type="button" aria-label="Abspielen">
            <span class="btn-icon"></span>
        </button>

Backwards 10s:

<button class="zdfplayer-control_button zdfplayer-10-backward zdfplayer-short-label" type="button" aria-label="10s rückwärts">
            <span class="btn-icon"></span>
        </button>

Forward 10s:

<button class="zdfplayer-control_button zdfplayer-10-forward zdfplayer-short-label" type="button" aria-label="10s vorwärts">
            <span class="btn-icon"></span>
        </button>

Thanks 👍

As an example: https://somafm.com/player/#/now-playing/brfm
Here is outer html code:

Play Button:

<button ng-if="!$root.playingStation.playing" class="btn btn-link ng-scope" ng-disabled="!$root.playingStation" ng-click="play($root.playingStation)"> <i class="fa fa-fw fa-lg fa-play"></i> </button>

Stop Button:

<button ng-if="$root.playingStation.playing" class="btn btn-link ng-scope" ng-disabled="!$root.playingStation" ng-click="stop()"> <i class="fa fa-fw fa-lg fa-stop"></i> </button>

Next/Skip, Back/Previous

N\A since it's radio/

The extension works with youtube, but not on Plex, even after pinning the tab

e.g. https://www.youtube.com/watch?v=Gd8TGpWIKlQ

Steps to reproduce

I opened Spotify Web Player play as well as YouTube Music in two different tabs. Now I start playing Spotify, then pause Spotify and start playing YouTube Music.

Actual behaviour

When I use the media key, Spotify resumes or stops, while YouTube Music is already playing. If I pause YouTube Music, the Spotify resume and stops as well when using the media key.

Expected behaviour

Obviously, while media is playing, the media keys are supposed to always control the media that's currently playing. (YouTube Music in my situation). While media is paused, the media key is supposed to resume the last played music (YouTube Music as well).

More info

If I played YouTube Music first and then switched to Spotify, the problem would be the same. The media keys would still control Spotify and not the more recently played media.

hello, so far i like this on my FireFox :). but for some reason my skip buttons do not work mate. is this an problem with FireFox or a bug mate.

Once the add-on is enable I'm losing the ability to input special characters such as é or è in the address bar (using a bépo layout)
Running Firefox 84.0.2 on Ubuntu 20

The extension does not seem to be working for my configuration. I'm using a Linux machine running Ubuntu 18.04 with the awesomeWM display manager (so no, that isn't GNOME). Along with that, I'm using an Ergodox Infinity keyboard configured with a MediaPlay key. I believe this is the standard play/pause key, but I'm not entirely sure. The key does work for playing/pausing music in Rhythmbox.
Anyhow, I don't believe the keyboard is the problem.

Pressing the MediaPlay button does not trigger anything within the browser, neither when I focus a Deezer page for example. I there a possibility to fix this? What does the add-on depend on when using it with GNOME?

If my keyboard configuration might be relevant, here it is: https://github.com/timvisee/dotfiles/tree/e44a6e579843874212819d425d7df6e6131faa9b/ergodox

Here are my general system specifications, if relevant:

Hi there!
I just moved from Chrome to FF after hearing about Google's new adblocker policies.
Anyway, When trying to control Youtube using my keyboard while the tab is focused, nothing happens.

Also, do you have any prospects on when the FF specific limitations might be lifted? Are they considered bugs?

Cheers, Canzone

Hello.
Play/Pause doesn't pause playing but instead stops it. But then if pressing again, it doesn't start playing even from the first song of the album but in my case it plays a song from different album of the same musician (I don't understand how it could happen).

Stop instead pauses playing (but only pauses, it doesn't play again after pressing). Play/pause then can play again paused song.

Just chaos. :)

FF DE 68.

Marek

When playing a podcast in the plex web application (app.plex.tv) the media buttons don't work. YouTube works fine. Would be great to get this to work!

I'd like to request a new site please: jango.com.

I've looked at the button controls and they look pretty simple. In fact I got as far as I could, adding a jango.com-view.js file but I haven't been able to test it. Here's the content of that file:

/**
 * MediaKeys namespace.
 */
if (typeof MediaKeys == "undefined") var MediaKeys = {};

MediaKeys.playButton = "//a[@id='btn-playpause']/button[@class='pcb']";
MediaKeys.pauseButton = "//a[@id='btn-playpause']/button[@class='pcb']";
MediaKeys.skipButton = "//a[@id='btn-ff']/button[@class='pcb']";
MediaKeys.previousButton = "//a[@id='btn-rewind']/button[@class='pcb']";

Description: Rainwave is an interactive radio website that allows users to request, rate, and vote for songs in real time. The site hosts five separate radio streams and focuses completely on video game music. https://en.wikipedia.org/wiki/Rainwave
Website: https://rainwave.cc/
Source code: https://github.com/rmcauley/rainwave/

Hi! The readme and description say that on firefox only play/pause work, and only when the browser window is active.

Could you please add links to bugzilla for the respective bugs in firefox?