About

Out of the box this project has support for video and audio tags in all sites with the following features.

Play/Pause: play and pause it's playback.
Stop: pause the playback and go back to the start.
Seek: advance/go back 10 seconds.
Set position: indicate the desired position of playback.
Volume: control the medias pertinent volume.
Raise: show the tab that is playing the media.
Quit: close the tab that is playing the media.
Cover art: we use the sites domain to search for it's logo.
Looping: toggle between default playback or looping the current track.

Providers

By extending this projects base classes it is possible to modify the default interaction with each site for specific sites. We call them providers.

If you would like to contribute with a provider see the how to manual.

Support

Support	default	YouTube	YouTube Music	SoundCloud	Netflix	Spotify	Tidal
Cover Art	domain logo	video's thumbnail	song's cover	song's cover	netflix logo	song's cover	song's cover
Title	page title	video's title	song's title	song's title	movie/show title	song's title	song's title
Artists	page host	video's owner	song's artist	song's artist	movie/show	song's artist	song's artist
PlayPause	yes	yes	yes	yes	yes	yes	yes
Stop	yes	yes	yes	yes	yes	yes	yes
Next	no	yes	yes	yes	yes	yes	yes
Previous	no	yes	yes	yes	yes	yes	yes
Rate	no	yes	no	no	no	no	no
Volume	yes(no UI)	yes	yes	yes	yes	yes	yes
Shuffle	no	yes (if present)	yes	yes	no	yes	yes
Loop	TRACK/NONE	full	full	full	no	full	full

Loop

Full loop supports cycling between Playlist Loop, Track Loop, and None

How To

If you would like to contribute with a provider please follow this steps.

0. Default Works

Ensure the media elements in the site you are interested in are detected.

if you can't control the media by default then it probably wont be solved by following this instructions.

1. Create a provider

Create a .js file inside src/providers/ with then name (kebab-cased) of the site.

2. Update manifest.json

Edit the manifes.json, by adding an item to the "content_scripts" array.

the item's "js" property should contain the path to the file you created in the previous step
the item's "matches" property should contain a valid match for the site. See content_scripts for more info.

ie:

{
"matches": ["*://*.youtube.com/*", "*://youtube.com/*"],
"js": [
 "src/providers/youtube.js"
],
"run_at": "document_start",
"all_frames": true
}

3. Write your provider

Edit your provider's .js file by extending and re-assigning (see snippets below) any of the classes inside src/browser/main/ as needed.

You are most likely to only need to extend any of the following three.

Player

Besides other things a player defines the metadata (title, artis, coverArt, length) that is sent to the mpris2 interface. One page will often hold more than one Player, but only one of them will be the activePlayer.

class MySitePlayer extends Player {

   getCover() {
       return document.getElementById('element-holding-the-image').getAttribute('src');
   } 

}
Player = MySitePlayer;

Playback (singleton)

This controls the playback of the page. You should override this class in order to better interact with your site.

class MySitePlayback extends Playback {

   setLoopStatus (status) {
       document.getElementById('button-that-toogles-loop').click();
   }

}
Playback = MySitePlayback;

Page (singleton)

A page is in charge of registering and handling media elements.

It wouldn't be strange that you don't have the need to extend this class.

   class MySitePage extends Page {

       getTitle() {
           return document.getElementById('element-with-title').textContent;
       }

   }
   Page = MySitePage;

4. Document it

Add a .md file to the manual/ directory containing a summary of what this provider accomplishes. Don't forget to add it to the .esdoc.json under the plugins's name-standard-plugin.option.manual.files property.

5. PR it

Go ahead and create a pull request. They are always welcome.