Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@mux/mux-player-react

Package Overview
Dependencies
Maintainers
2
Versions
562
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mux/mux-player-react - npm Package Compare versions

Comparing version 0.1.0-beta.26 to 0.1.0-beta.27

dist/index.cjs.js
dist/index.cjs.js.map
dist/index.mjs
dist/index.mjs.map

14

dist/types-ts3.4/index.d.ts
import React from 'react';
import { CSSProperties } from 'react';
import { StreamTypes } from '@mux/playback-core';
import '@mux/mux-player';
import { MediaError } from '@mux/mux-player';
import MuxPlayerElement from '@mux/mux-player';
import { Tokens } from '@mux/mux-player';
export { MediaError };
declare type ValueOf<T> = T[keyof T];

@@ -40,2 +41,3 @@ export declare type MuxPlayerRefAttributes = MuxPlayerElement;

export declare type MuxPlayerProps = {
hotkeys?: string;
nohotkeys?: boolean;

@@ -53,5 +55,13 @@ defaultHiddenCaptions?: boolean;

tertiaryColor?: string;
playbackRates?: number[];
defaultShowRemainingTime?: boolean;
thumbnailTime?: number;
title?: string;
tokens?: Tokens;
onAbort?: EventListener;
onCanPlay?: EventListener;
onCanPlayThrough?: EventListener;
onEmptied?: EventListener;
onLoadStart?: EventListener;
onLoadedData?: EventListener;
onLoadedMetadata?: EventListener;

@@ -70,2 +80,4 @@ onProgress?: EventListener;

onSeeked?: EventListener;
onStalled?: EventListener;
onSuspend?: EventListener;
onEnded?: EventListener;

@@ -72,0 +84,0 @@ onError?: EventListener;

14

dist/types/index.d.ts
import React from 'react';
import type { CSSProperties } from 'react';
import type { StreamTypes } from '@mux/playback-core';
import '@mux/mux-player';
import { MediaError } from '@mux/mux-player';
import type MuxPlayerElement from '@mux/mux-player';
import type { Tokens } from '@mux/mux-player';
export { MediaError };
declare type ValueOf<T> = T[keyof T];

@@ -40,2 +41,3 @@ export declare type MuxPlayerRefAttributes = MuxPlayerElement;

export declare type MuxPlayerProps = {
hotkeys?: string;
nohotkeys?: boolean;

@@ -53,5 +55,13 @@ defaultHiddenCaptions?: boolean;

tertiaryColor?: string;
playbackRates?: number[];
defaultShowRemainingTime?: boolean;
thumbnailTime?: number;
title?: string;
tokens?: Tokens;
onAbort?: EventListener;
onCanPlay?: EventListener;
onCanPlayThrough?: EventListener;
onEmptied?: EventListener;
onLoadStart?: EventListener;
onLoadedData?: EventListener;
onLoadedMetadata?: EventListener;

@@ -70,2 +80,4 @@ onProgress?: EventListener;

onSeeked?: EventListener;
onStalled?: EventListener;
onSuspend?: EventListener;
onEnded?: EventListener;

@@ -72,0 +84,0 @@ onError?: EventListener;

26

package.json
{
"name": "@mux/mux-player-react",
"version": "0.1.0-beta.26",
"version": "0.1.0-beta.27",
"description": "An open source Mux player for React that Just Works™",
"main": "dist/index.js",
"module": "./dist/index.mjs",
"exports": {
"import": "./dist/index.mjs",
"require": "./dist/index.cjs.js",
"default": "./dist/index.cjs.js"
},
"types": "dist/types-ts3.4/index.d.ts",

@@ -24,9 +30,11 @@ "typesVersions": {

"dev:cjs": "open-process | yarn build:cjs --watch",
"dev:esm": "open-process | yarn build:esm --watch",
"dev:types": "yarn build:types -w",
"dev": "npm-run-all --parallel dev:types dev:cjs",
"build:cjs": "esbuild src/index.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --loader:.css=text --outdir=dist --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
"build:types": "tsc --declaration --emitDeclarationOnly --outDir './dist/types' && downlevel-dts ./dist/types ./dist/types-ts3.4",
"build": "npm-run-all --parallel build:types 'build:cjs -- --minify'",
"dev": "npm-run-all --parallel dev:types dev:cjs dev:esm",
"build:cjs": "esbuild src/index.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --loader:.css=text --outdir=dist --out-extension:.js=.cjs.js --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
"build:esm": "esbuild src/index.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/esm.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
"build:types": "tsc --declaration --emitDeclarationOnly --outDir './dist/types'",
"postbuild:types": "downlevel-dts ./dist/types ./dist/types-ts3.4",
"build": "npm-run-all --parallel build:types 'build:cjs -- --minify' 'build:esm -- --minify'",
"prebuild": "yarn clean",
"prepublishOnly": "yarn build",
"create-release-notes": "create-release-notes ./CHANGELOG.md",

@@ -49,4 +57,4 @@ "publish-release": "../../scripts/publish.sh"

"dependencies": {
"@mux/mux-player": "0.1.0-beta.26",
"@mux/playback-core": "0.9.0",
"@mux/mux-player": "0.1.0-beta.27",
"@mux/playback-core": "0.10.0",
"prop-types": "^15.7.2"

@@ -66,3 +74,3 @@ },

},
"gitHead": "8e82f44785e4598dbcbf2806d6d41c3c8d106b8b"
"gitHead": "505f1e6e74b2caed83d2a54ec9f3660573e4d6e9"
}

178

README.md

@@ -106,2 +106,96 @@ <p align="center">

### Hiding controls
By default, Mux Player will show all the controls associated with the current player size and stream type.
To hide certain controls, use CSS variables like this:
`--play-button` will control the display of the play button. Set it to `none` to hide it completely.
```css
mux-player {
--play-button: none;
}
```
CSS vars can also be passed inline
```jsx
<MuxPlayer style={{ '--play-button': 'none' }}></MuxPlayer>
```
#### Controls sections
It's possible to target specific sections of the player by prefixing the CSS vars.
The following sections are available:
- `top` the top control bar that shows on the small player size
- `center` the center controls that show the seek forward/backward button and play button
- `bottom` the bottom control bar
```jsx
<MuxPlayer style={{ '--center-controls': 'none', '--top-captions-button': 'none' }}></MuxPlayer>
```
#### Available CSS variables
The below CSS selector shows all available CSS vars for hiding, each one can be prefixed with a section.
```css
mux-player {
/* Hide all controls at once */
--controls: none;
/* Target all sections by excluding the section prefix */
--play-button: none;
--seek-live-button: none;
--seek-backward-button: none;
--seek-forward-button: none;
--mute-button: none;
--captions-button: none;
--airplay-button: none;
--pip-button: none;
--fullscreen-button: none;
--cast-button: none;
--playback-rate-button: none;
--volume-range: none;
--time-range: none;
--time-display: none;
--duration-display: none;
/* Target a specific section by prefixing the CSS var with (top|center|bottom) */
--center-controls: none;
--bottom-play-button: none;
}
```
### CSS Parts
Mux Player uses a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
to encapsulate its styles and behaviors.
As a result, it's not possible to target its internals with the usual CSS selectors.
Instead, some components expose **parts** that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)
, or `::part()`.
```html
<!-- Global style in HTML or added using preferred React styles convention/library -->
<style>
mux-player::part(center play button) {
display: none;
}
</style>
```
```jsx
<MuxPlayer playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"></MuxPlayer>
```
Supported **parts**:
`seek-live`, `layer`, `media-layer`, `poster-layer`, `vertical-layer`, `centered-layer`,
`top`, `center`, `bottom`, `play`, `button`, `seek-backward`, `seek-forward`, `mute`,
`captions`, `airplay`, `pip`, `cast`, `fullscreen`, `playbackrate`, `volume`, `range`, `time`, `display`
CSS parts allow you to style each part individually with a selector like `::part(center play button)`
or target multiple elements if the part is assigned to multiple elements internally, usage `::part(button)`.
Every CSS property can be declared in the selector, this makes it a very powerfull API.
### Tokens

@@ -149,54 +243,38 @@

| Prop | Type | Description | Default |
| ------------------------ | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| `playbackId` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A |
| `envKey` | `string` | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset. | `undefined` |
| `streamType` | `"on-demand" \| "live" \| "ll-live" \| "dvr" \| "ll-dvr"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback. | `"on-demand"` |
| `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` |
| `metadata` | `object`\* | An object for configuring any metadata you'd like to send to Mux Data. For more, see the [Metadata section](#metadata), below. | N/A |
| `tokens` | `object`\* | An object for configuring any tokens for your assets if you're using [Signed URLs](https://docs.mux.com/guides/video/secure-video-playback). For more, see the [Tokens section](#tokens), below. | N/A |
| `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` |
| `startTime` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` |
| `thumbnailTime` | `number` (seconds) | Offset for the poster image you want to show before loading media. If no `thumbnailTime` is specified, `startTime` will be used by default. NOTE: This feature currently cannot be used with `tokens.thumbnail`. | `0` |
| `preferMse` | `boolean` | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`preferMse`](#preferMse) | `false` |
| `defaultHiddenCaptions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` |
| `forwardSeekOffset` | `number` (seconds) | Offset applied to the forward seek button | `10` |
| `backwardSeekOffset` | `number` (seconds) | Offset applied to the backward seek button | `10` |
| `primaryColor` | (Any valid CSS color style) | The primary color used by the player | N/A |
| `secondaryColor` | (Any valid CSS color style) | The secondary color used by the player | N/A |
| `currentTime` | `number` (seconds) | Sets the current time of the media | N/A |
| `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies |
| `muted` | `boolean` | Toggles the muted state of the player. | Varies |
| `paused` | `boolean` | Toggles the paused state of the player | N/A |
| `autoPlay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | N/A |
| `playbackRate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` |
| `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` |
| `nohotkeys` | `boolean` | Toggles keyboard shortcut (hot keys) support when focus in inside the player. | `false` |
| `playsInline` | `boolean` | Set to assert that media should be played inline. Useful for mobile playback cases. | `false` |
| `crossOrigin` | `string` | Establishes various CORS policies. For more details, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin) | N/A |
| `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived |
| `beaconCollectionDomain` | `string` (Domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A |
| `customDomain` | `string` (Domain name) | Assigns a custom domain to be used for Mux Video. Will use the standard `mux.com` domain with your playback-id for poster, video, and thumbnail URLs by default. | N/A |
| Prop | Type | Description | Default |
| -------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| `playbackId` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A |
| `envKey` | `string` | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset. | `undefined` |
| `streamType` | `"on-demand" \| "live" \| "ll-live" \|"live:dvr" \| "ll-live:dvr"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback. | `"on-demand"` |
| `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` |
| `metadata` | `object`\* | An object for configuring any metadata you'd like to send to Mux Data. For more, see the [Metadata section](#metadata), below. | N/A |
| `tokens` | `object`\* | An object for configuring any tokens for your assets if you're using [Signed URLs](https://docs.mux.com/guides/video/secure-video-playback). For more, see the [Tokens section](#tokens), below. | N/A |
| `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` |
| `startTime` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` |
| `thumbnailTime` | `number` (seconds) | Offset for the poster image you want to show before loading media. If no `thumbnailTime` is specified, `startTime` will be used by default. NOTE: This feature currently cannot be used with `tokens.thumbnail`. | `0` |
| `preferMse` | `boolean` | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`preferMse`](#preferMse) | `false` |
| `defaultHiddenCaptions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` |
| `defaultShowRemainingTime` | `boolean` | Show remaining playback time (instead of current playback time) by default | `false` |
| `forwardSeekOffset` | `number` (seconds) | Offset applied to the forward seek button | `10` |
| `backwardSeekOffset` | `number` (seconds) | Offset applied to the backward seek button | `10` |
| `primaryColor` | (Any valid CSS color style) | The primary color used by the player | N/A |
| `secondaryColor` | (Any valid CSS color style) | The secondary color used by the player | N/A |
| `currentTime` | `number` (seconds) | Sets the current time of the media | N/A |
| `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies |
| `muted` | `boolean` | Toggles the muted state of the player. | Varies |
| `paused` | `boolean` | Toggles the paused state of the player | N/A |
| `autoPlay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | N/A |
| `playbackRate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` |
| `playbackRates` | `number[]` | The array of numbers that will be used by the playback rate button while toggling through rates. | `1` |
| `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` |
| `nohotkeys` | `boolean` | Toggles keyboard shortcut (hot keys) support when focus in inside the player. | `false` |
| `playsInline` | `boolean` | Set to assert that media should be played inline. Useful for mobile playback cases. | `false` |
| `crossOrigin` | `string` | Establishes various CORS policies. For more details, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin) | N/A |
| `title` | `string` | Show the title for your content. | `""` |
| `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived |
| `beaconCollectionDomain` | `string` (Domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A |
| `customDomain` | `string` (Domain name) | Assigns a custom domain to be used for Mux Video. Will use the standard `mux.com` domain with your playback-id for poster, video, and thumbnail URLs by default. | N/A |
### Callbacks
`<MuxPlayer/>` has a number of callbacks associated with events for media loading, playback, and the player itself.
| Prop | Description |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
| `onLoadStart` | Invoked when the media starts loading |
| `onLoadedMetadata` | Invoked when the media's metadata has loaded |
| `onProgress` | Description |
| `onDurationChange` | Invoked when the media's duration changes, generally either because live media is coming to an end or a new playback-id has been set |
| `onVolumeChange` | Invoked when the player's volume changes |
| `onRateChange` | Invoked when the player's playbackRate changes |
| `onResize` | Invoked when the player resizes |
| `onWaiting` | Invoked when playback is waiting to load more media to play (rebuffering). |
| `onPlay` | Invoked when playback begins |
| `onPlaying` | Invoked when playback is ready after e.g. a pause or temporary rebuffering |
| `onPause` | Invoked when playback is paused |
| `onTimeUpdate` | Invoked when the media's currentTime changes, either from playback or seeking |
| `onSeeking` | Invoked when an attempt to seek forward or backward in the media begins |
| `onSeeked` | Invoked when an attempt to seek forward or backward in the media finishes |
| `onEnded` | Invoked when media playback reaches the end of the media |
| `onError` | Invoked when an error occurs in playback or in the player |
`<MuxPlayer/>` has a number of callbacks associated with events for media loading, playback, and the player itself. For example, a callback for 'loadstart` event is`onLoadStart`. See [mux-player's document](https://github.com/muxinc/elements/blob/main/packages/mux-player/README.md#events) for detail of events.
CHANGELOG.md
dist/index.js
dist/index.js.map
src/common/utils.ts
src/env.ts
src/index.tsx
src/useCombinedRefs.ts
src/useObjectPropEffect.ts
tsconfig.json
types/index.d.ts
dist/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc