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 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nightco/replay

v1.0.9

Published

React video player with adaptive streaming support

Downloads

395

Readme

Replay is a React video player with these key characteristics:

  • Ready-to-use component.
  • Custom and customisable player controls and UX.
  • Enables adaptive streaming, thanks to HLS.js and Shaka Player integrations.
  • One consistent and React-friendly API across all streaming technologies.

Capabilities at a glance

  • MPEG-DASH, HLS, progressive MP4/WebM playback.
  • In-stream and side-loaded subtitles. Selector controls for subtitles and audio tracks.
  • Common player controls: play/pause, volume, mute, timeline, skip back button, fullscreen.
  • Live/DVR playback with timeshifting controls.
  • Advanced player controls: Picture-in-picture, AirPlay, bitrate (quality) selector.
  • Keyboard shortcuts and tab navigation.
  • Remembering the user's volume and language preferences.
  • Responsive player sizing and UI adaptation.
  • Touch- and mobile-friendly UX.

Full feature list

Getting started

Prerequisites

Minimum React version for Replay is 16.6. Additionally, one component, the CompoundVideoStreamer, requires your script bundler to support dynamic import() statements. This only applies if this component is actually inserted in your code.

Inserting Replay into your React app

Installing the Replay npm package

npm install vimond-replay --save

Importing dependencies

import React from 'react';
import { Replay } from 'vimond-replay';
import 'vimond-replay/index.css';

The last CSS import statement might be substituted with your desired CSS inclusion mechanism, e.g. SASS.

Rendering the Replay player with a progressive video source (MP4 file)

class MyAppView extends React.Component {
  render() {
    return (
      <Replay source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"/>
    );
  }
}

Flow and TypeScript static type annotations/declarations are provided for the Replay component.

Next steps

Working with the source code

Project setup

Development setup

Technologies & patterns used & applied

  • Flow static type annotations.
  • Jest and Enzyme unit and component testing.
  • Automated code formatting with Prettier.
  • ESlint code quality checks.
  • PostCSS and Babel for builds/transpilations.
  • Docz documentation authoring and generation with live code examples displaying React components.
  • React.lazy and dynamic imports for splitting out heavy third party streaming dependencies.
  • React context API.
  • ES2018/ES2019 language features.

About

Replay is an open source initiative from Vimond Media Solutions.

License

Replay is released under the Apache 2.0 License.

Roadmap

See the project milestones.

Authors

Replay is developed by Tor Erik Alræk.