Giter Club home page Giter Club logo

web-media-controller's Introduction

Web Media Controller

Description

Web Media Controller is a browser extension which helps controlling media playback on various websites with different tools. These tools include but aren't limited to keyboard shortcuts and desktop widgets. One of these tools is wmc-mpris. Unfortunately, all these tools cannot be cross-platform, so this tool works only on desktop GNU/Linux distributions.

It's completely unusable without these tools!

Usage

Install this extension and one of those tools. Usage instructions are different for each of them, so consider reading tools' docs. Usually they're desktop widgets or daemons that interact with other desktop widgets or provide keyboard-only control themselves.

Note for Chrome/Chromium users: this browser has built-in support for media key handling. It has one big advantage over this extension: media keys can be used on pretty much all websites with media. From the other hand, it doesn't share any info about what is playing. So, it's up to you to decide what to use. If you still want to use WMC, you might have wanted to disable built-in media keys handling, which is done by turing off the flag chrome://flags/#hardware-media-key-handling.

Tools

  • wmc-mpris (Works on GNU/Linux and should work on BSD)
  • WebNowPlaying (Rainmeter plugin; works on Windows)
  • wmc-win (Native Windows media key controller)
  • Feel free to develop your own tool

Supported websites

Feel free to request support for any other music website or, even better, provide it yourself. See this documentation for learning the basic of writing a connector for a specific website.

Distribution

This project is distributed on Mozilla Add-ons. I'll add it to Chrome Web Store (and maybe Opera add-ons, if it's compatible) on request. You could also get Firefox and Chrome extension from GitHub releases.

Another way to use the extension is to build the extension and then pack it or use as temporary extension (warning: temporary extensions are removed at the end of session in Firefox). It should work on any of latest major browsers: Chromium (Chrome), Firefox and Opera.

Building

Development

For hacking the extension, you'll need Node.js and npm installed and available in your $PATH for building.

$ npm install
$ npx grunt build:$browser # $browser could be 'firefox' or 'chrome'

The extension is now built in build/$browser/. You could load it as temporary extension or pack it.

If you're developer, and you want build/$browser/ to correspond the current state of development, you should run npx grunt watch:$browser.

Note that every time you'll restart your browser, it won't load your version of the extension in build/$browser/.

Packing

If you want to pack the extension for permanent use, you will need to sign it. For every browser the instructions are a little bit different.

Firefox

For packing the extension for Firefox, you'll need an API key and API secret from Mozilla, You can get them via this interface.

After you'll get your credentials, you can either put them in the following environmental variables, as suggested here:

export WEB_EXT_API_KEY=<your apiKey>
export WEB_EXT_API_SECRET=<your apiSecret>

Alternatively, you can put them in a file inside the extension directory, call this file ./.amo.json:

{
  "apiKey": "<your apiKey>",
  "apiSecret": "<your apiSecret>"
}

Firefox doesn't allow to sign an extension that is owned by someone else currently @f1u77y so you will need to change the ID of it specified in the file firefox_manifest.json. For example:

{
    "applications": {
        "gecko": {
            "id": "[email protected]",
            "strict_min_version": "48.0"
        }
    },

    "options_ui.browser_style": true
}

NOTE: Since you probably use this along with wmc-mpris, you will need to change the id of the extension as specified in the native-messaging JSON file as well before building and installing it. Firefox' file is named me.f1u77y.web_media_controller.firefox.json. According to our example above, the file should look like this:

{
    "name": "me.f1u77y.web_media_controller",
    "description": "Allows controlling VK player via MPRIS",
    "path": "@EXECUTABLE_PATH@",
    "type": "stdio",
    "allowed_extensions": [
        "[email protected]"
    ]
}

Don't forget to manually rebuild wmc-mpris or alternatively put a file equivalent to the one showen above in ~/.mozilla/native-messaging-hosts/.

In order to finally build and sign the extension, run:

npx grunt webext_builder:firefox

Chrome

Very much like Firefox, Chrome also requests developers to sign their packages. You can either use Chrome's GUI to pack the extension or using the development environment to do so. In any case, you will need to create a private key with the following command:

openssl genrsa 2048 | openssl pkcs8 -topk8 -nocrypt > ./.cws.private.pem
# recommended
chmod og-r ./.cws.private.pem

Finally packing the extension with Chrome's GUI can be done using the ./.cws.private.pem you've just generated or with a private key Chrome will generate by itself. See this stack overflow question for more details.

web-media-controller's People

Contributors

f1u77y avatar alexesprit avatar doronbehar avatar brookst avatar gutierri avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.