npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

fluent-amp

v0.1.0

Published

Import the azure media player fluently into your project

Readme

Fluent Azure Media Player

This package is a helper to import the AMP script programmatically into the frontend application. It is mostly useful for frameworks like vue, react and angular where you may not want to manipulate the index.html file yourself and want to create components which is going to benefit from Azure Media Player.

Note: typescript supported.

How it works?

  1. Please install the package as below.

    npm i fluent-amp
  2. Import the package into your component/project.

    import AMPLoader from 'fluent-amp';
  3. Initiate the script like below

            AMPLoader
            .withVersion() //by default is latest (Not production recommended)
            .load()
            .then(builder => {
                builder.options.fluid = true;
                builder.options.autoplay = true;
                //Other options will appear here
                builder
                    .forElement('test')
                    .build({
                        src: "YOUR_ASSET_ADDRESS",
                        type: "YOUR_USING_PROTOCOL"
                    });
            })

Plugins

The way that AMP handles the plugins is first by registering them in the global amp instance and then use the registered plugin in the player instance.

This package gives you an interface for building your plugin. You should use the AMPPlugin<TOptions> interface to implement your plugins and then on registering the plugins the AMPBuilder will give use the method usePlugin to install your plugins on a player instance.

Let's assume you have implemented the following plugin.

export default class MyPlugin implements AMPPlugin {
    name: 'MyPlugin'
    install() {
        amp.plugin(this.name, function() => {
            const player = this;
            //Write your plugin logic.
        });
    }
}

and now you use it as below.

.
.
.
ampBuilder.usePlugin(new MyPlugin());

Please note that it is totally fine the way that AMP natively registers plugins but the issue is when you want to use full type safety(even this method still needs more improvement) and you need to give this a structure so it will be possible to install your plugin just by one method instead of registering it once and adding it to the player's plugin collection.

TODO

  1. (Typescript related) Export the AMP type declerations with the package so the options doesn't get an any type.
  2. (General purpose) Add a plugin installer to make it more fluent to add plugin packages to the project and inject them into the amp instance.