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
599
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-canary.2-44a0045 to 0.1.0-canary.20-ce76b1b

dist/cjs.json

47

CHANGELOG.md

@@ -6,2 +6,49 @@ # Change Log

# [0.1.0-beta.26](https://github.com/muxinc/elements/compare/@mux/mux-player-react@0.1.0-beta.25...@mux/mux-player-react@0.1.0-beta.26) (2022-08-03)
**Note:** Version bump only for package @mux/mux-player-react
# [0.1.0-beta.25](https://github.com/muxinc/elements/compare/@mux/mux-player-react@0.1.0-beta.24...@mux/mux-player-react@0.1.0-beta.25) (2022-08-02)
### Features
- types and docs for nohotkeys in mux-player-react ([a9f78d4](https://github.com/muxinc/elements/commit/a9f78d422d64bf661de59cad834aa1c819e88ff8))
# [0.1.0-beta.24](https://github.com/muxinc/elements/compare/@mux/mux-player-react@0.1.0-beta.23...@mux/mux-player-react@0.1.0-beta.24) (2022-07-21)
### Features
- add defaultMuted, defaultPlaybackRate props ([#252](https://github.com/muxinc/elements/issues/252)) ([1a72165](https://github.com/muxinc/elements/commit/1a7216545cba27b34bc743cf5dd6225d4dcae738))
# [0.1.0-beta.23](https://github.com/muxinc/elements/compare/@mux/mux-player-react@0.1.0-beta.22...@mux/mux-player-react@0.1.0-beta.23) (2022-07-11)
**Note:** Version bump only for package @mux/mux-player-react
# [0.1.0-beta.22](https://github.com/muxinc/elements/compare/@mux/mux-player-react@0.1.0-beta.21...@mux/mux-player-react@0.1.0-beta.22) (2022-07-05)
**Note:** Version bump only for package @mux/mux-player-react
# 0.1.0-beta.21 (2022-07-05)
### Bug Fixes
- enable cast docs + cast fix ([#253](https://github.com/muxinc/elements/issues/253)) ([421d515](https://github.com/muxinc/elements/commit/421d515cc4700cf9d7ca4f0d09aa600ec4adac7b))
- **mux-player-react:** Missing preload prop type def. ([19b2e15](https://github.com/muxinc/elements/commit/19b2e15dc844e6fb0f90e9ad62a436587260094a))
- prettier format all elements files ([741d607](https://github.com/muxinc/elements/commit/741d607521ca9578cfad9f0a9216a6565b4c56a1))
- switch cjs extension to .cjs.js ([30e83c3](https://github.com/muxinc/elements/commit/30e83c3ce0bd9bfda4817c30ffe0921e425619e4))
- update react peerDependencies to allow ^18 ([1cfb019](https://github.com/muxinc/elements/commit/1cfb019b71cf9aa280abccaf4a7818d585b56d86))
### Features
- add beaconCollectionDomain option to replace beaconDomain ([a44b699](https://github.com/muxinc/elements/commit/a44b699ae3138590b9d953f693f95971694658df))
- default-hidden-captions to turn off showing captions by default ([#98](https://github.com/muxinc/elements/issues/98)) ([9edc3cd](https://github.com/muxinc/elements/commit/9edc3cd008e47234472b14784ea89493736599cb))
- Extended autoplay options ([#116](https://github.com/muxinc/elements/issues/116)) ([475e838](https://github.com/muxinc/elements/commit/475e83884f641c578fa601c9501147d485fc1831))
- **mux-player-react:** Add audio only. Cleanup StreamTypes source of truth. ([4f37d7f](https://github.com/muxinc/elements/commit/4f37d7f10ef66eef48af0dd9cf1efc79322b660d))
- **mux-player-react:** Add basic support for custom video domains. ([ac61aff](https://github.com/muxinc/elements/commit/ac61affffdd38ef0df3151d2f75023f7d2772688))
- **mux-player-react:** Add thumbnail-time support to mux-player-react. Document prop. ([d1c1a4c](https://github.com/muxinc/elements/commit/d1c1a4c65b200c59bab7cc68453c0e307eb75ae4))
### Reverts
- Revert "Publish" ([42fc528](https://github.com/muxinc/elements/commit/42fc528216346ff52d967cec5392a1191f74a1c0))
# [0.1.0-beta.20](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.19...@mux-elements/mux-player-react@0.1.0-beta.20) (2022-06-23)

@@ -8,0 +55,0 @@

2

dist/index.js

@@ -1,2 +0,2 @@

var H=Object.create;var c=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var g=e=>c(e,"__esModule",{value:!0});var q=(e,t)=>{g(e);for(var n in t)c(e,n,{get:t[n],enumerable:!0})},J=(e,t,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of W(t))!_.call(e,r)&&r!=="default"&&c(e,r,{get:()=>t[r],enumerable:!(n=z(t,r))||n.enumerable});return e},l=e=>J(g(c(e!=null?H(Z(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);q(exports,{default:()=>ye});var i=l(require("react")),ge=l(require("@mux/mux-player"));var b={className:"class",classname:"class",htmlFor:"for",crossOrigin:"crossorigin",viewBox:"viewBox",playsInline:"playsinline",autoPlay:"autoplay"},Y=e=>e==null,$=(e,t)=>Y(t)?!1:e in t,G=e=>e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),Q=(e,t)=>{if(!(typeof t=="boolean"&&!t)){if($(e,b))return b[e];if(typeof t!=null)return/[A-Z]/.test(e)?G(e):e}};var X=(e,t)=>typeof e=="boolean"?"":e,P=(e={})=>Object.entries(e).reduce((t,[n,r])=>{let a=Q(n,r);if(!a)return t;let s=X(r,n);return t[a]=s,t},{});var E=l(require("react"));var f=l(require("react")),T=(...e)=>{let t=(0,f.useRef)(null);return(0,f.useEffect)(()=>{e.forEach(n=>{!n||(typeof n=="function"?n(t.current):n.current=t.current)})},[e]),t};var x=l(require("react")),B=Object.prototype.hasOwnProperty,ee=(e,t)=>{if(Object.is(e,t))return!0;if(typeof e!="object"||e===null||typeof t!="object"||t===null)return!1;if(Array.isArray(e))return!Array.isArray(t)||e.length!==t.length?!1:e.some((a,s)=>t[s]===a);let n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(let a=0;a<n.length;a++)if(!B.call(t,n[a])||!Object.is(e[n[a]],t[n[a]]))return!1;return!0},m=(e,t,n)=>!ee(t,e[n]),te=(e,t,n)=>{e[n]=t},ne=(e,t,n,r=te,a=m)=>(0,x.useEffect)(()=>{let s=n==null?void 0:n.current;!s||!a(s,t,e)||r(s,t,e)},[n==null?void 0:n.current,t]),y=ne;var re=()=>{try{return"0.1.0-canary.2-44a0045"}catch{}return"UNKNOWN"},ae=re(),R=()=>ae;var oe=i.default.forwardRef(({children:e,...t},n)=>i.default.createElement("mux-player",P({...t,ref:n}),e)),o=(e,t,n)=>(0,i.useEffect)(()=>{let r=t==null?void 0:t.current;if(!(!r||!n))return r.addEventListener(e,n),()=>{r.removeEventListener(e,n)}},[t==null?void 0:t.current,n]),se=(e,t)=>{let{onLoadStart:n,onLoadedMetadata:r,onProgress:a,onDurationChange:s,onVolumeChange:p,onRateChange:v,onResize:k,onWaiting:O,onPlay:M,onPlaying:w,onTimeUpdate:S,onPause:h,onSeeking:L,onSeeked:C,onEnded:V,onError:A,onPlayerReady:N,metadata:I,tokens:K,paused:j,playbackId:D,...U}=t;return y("metadata",I,e),y("tokens",K,e),y("playbackId",D,e),y("paused",j,e,(u,d)=>{d!=null&&(d?u.pause():u.play())},(u,d,F)=>u.hasAttribute("autoplay")&&!u.hasPlayed?!1:m(u,d,F)),o("loadstart",e,n),o("loadedmetadata",e,r),o("progress",e,a),o("durationchange",e,s),o("volumechange",e,p),o("ratechange",e,v),o("resize",e,k),o("waiting",e,O),o("play",e,M),o("playing",e,w),o("timeupdate",e,S),o("pause",e,h),o("seeking",e,L),o("seeked",e,C),o("ended",e,V),o("error",e,A),o("playerready",e,N),[U]},ie=R(),ue="mux-player-react",le=i.default.forwardRef((e,t)=>{let{forwardSeekOffset:n=10,backwardSeekOffset:r=10}=e,a=(0,E.useRef)(null),s=T(a,t),[p]=se(a,e);return i.default.createElement(oe,{ref:s,playerSoftwareName:ue,playerSoftwareVersion:ie,forwardSeekOffset:n,backwardSeekOffset:r,...p})}),ye=le;
var G=Object.create;var c=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,ee=Object.prototype.hasOwnProperty;var g=e=>c(e,"__esModule",{value:!0});var te=(e,t)=>{g(e);for(var n in t)c(e,n,{get:t[n],enumerable:!0})},ne=(e,t,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of X(t))!ee.call(e,a)&&a!=="default"&&c(e,a,{get:()=>t[a],enumerable:!(n=Q(t,a))||n.enumerable});return e},y=e=>ne(g(c(e!=null?G(B(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);te(exports,{MediaError:()=>v.MediaError,default:()=>Ee});var i=y(require("react")),v=y(require("@mux/mux-player"));var b={className:"class",classname:"class",htmlFor:"for",crossOrigin:"crossorigin",viewBox:"viewBox",playsInline:"playsinline",autoPlay:"autoplay"},re=e=>e==null,ae=(e,t)=>re(t)?!1:e in t,oe=e=>e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),se=(e,t)=>{if(!(typeof t=="boolean"&&!t)){if(ae(e,b))return b[e];if(typeof t!=null)return/[A-Z]/.test(e)?oe(e):e}};var ie=(e,t)=>typeof e=="boolean"?"":e,P=(e={})=>Object.entries(e).reduce((t,[n,a])=>{let o=se(n,a);if(!o)return t;let s=ie(a,n);return t[o]=s,t},{});var x=y(require("react"));var p=y(require("react")),E=(...e)=>{let t=(0,p.useRef)(null);return(0,p.useEffect)(()=>{e.forEach(n=>{!n||(typeof n=="function"?n(t.current):n.current=t.current)})},[e]),t};var T=y(require("react")),le=Object.prototype.hasOwnProperty,ue=(e,t)=>{if(Object.is(e,t))return!0;if(typeof e!="object"||e===null||typeof t!="object"||t===null)return!1;if(Array.isArray(e))return!Array.isArray(t)||e.length!==t.length?!1:e.some((o,s)=>t[s]===o);let n=Object.keys(e),a=Object.keys(t);if(n.length!==a.length)return!1;for(let o=0;o<n.length;o++)if(!le.call(t,n[o])||!Object.is(e[n[o]],t[n[o]]))return!1;return!0},f=(e,t,n)=>!ue(t,e[n]),ye=(e,t,n)=>{e[n]=t},de=(e,t,n,a=ye,o=f)=>(0,T.useEffect)(()=>{let s=n==null?void 0:n.current;!s||!o(s,t,e)||a(s,t,e)},[n==null?void 0:n.current,t]),u=de;var ce=()=>{try{return"0.1.0-beta.26"}catch{}return"UNKNOWN"},pe=ce(),R=()=>pe;var me=i.default.forwardRef(({children:e,...t},n)=>i.default.createElement("mux-player",P({...t,ref:n}),e)),r=(e,t,n)=>(0,i.useEffect)(()=>{let a=t==null?void 0:t.current;if(!(!a||!n))return a.addEventListener(e,n),()=>{a.removeEventListener(e,n)}},[t==null?void 0:t.current,n]),fe=(e,t)=>{let{onAbort:n,onCanPlay:a,onCanPlayThrough:o,onEmptied:s,onLoadStart:m,onLoadedData:k,onLoadedMetadata:h,onProgress:L,onDurationChange:O,onVolumeChange:M,onRateChange:S,onResize:C,onWaiting:w,onPlay:A,onPlaying:V,onTimeUpdate:N,onPause:I,onSeeking:D,onSeeked:K,onStalled:j,onSuspend:U,onEnded:F,onError:H,onPlayerReady:z,metadata:W,tokens:Z,paused:_,playbackId:q,playbackRates:J,...Y}=t;return u("playbackRates",J,e),u("metadata",W,e),u("tokens",Z,e),u("playbackId",q,e),u("paused",_,e,(l,d)=>{d!=null&&(d?l.pause():l.play())},(l,d,$)=>l.hasAttribute("autoplay")&&!l.hasPlayed?!1:f(l,d,$)),r("abort",e,n),r("canplay",e,a),r("canplaythrough",e,o),r("emptied",e,s),r("loadstart",e,m),r("loadeddata",e,k),r("loadedmetadata",e,h),r("progress",e,L),r("durationchange",e,O),r("volumechange",e,M),r("ratechange",e,S),r("resize",e,C),r("waiting",e,w),r("play",e,A),r("playing",e,V),r("timeupdate",e,N),r("pause",e,I),r("seeking",e,D),r("seeked",e,K),r("stalled",e,j),r("suspend",e,U),r("ended",e,F),r("error",e,H),r("playerready",e,z),[Y]},ge=R(),be="mux-player-react",Pe=i.default.forwardRef((e,t)=>{let{forwardSeekOffset:n=10,backwardSeekOffset:a=10}=e,o=(0,x.useRef)(null),s=E(o,t),[m]=fe(o,e);return i.default.createElement(me,{ref:s,playerSoftwareName:be,playerSoftwareVersion:ge,forwardSeekOffset:n,backwardSeekOffset:a,...m})}),Ee=Pe;
//# sourceMappingURL=index.js.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,4 @@ export declare type MuxPlayerRefAttributes = MuxPlayerElement;

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

@@ -52,5 +55,12 @@ playerSoftwareVersion?: string;

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

@@ -69,2 +79,4 @@ onProgress?: EventListener;

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

@@ -71,0 +83,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,4 @@ export declare type MuxPlayerRefAttributes = MuxPlayerElement;

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

@@ -52,5 +55,12 @@ playerSoftwareVersion?: string;

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

@@ -69,2 +79,4 @@ onProgress?: EventListener;

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

@@ -71,0 +83,0 @@ onError?: EventListener;

19

package.json
{
"name": "@mux/mux-player-react",
"version": "0.1.0-canary.2-44a0045",
"version": "0.1.0-canary.20-ce76b1b",
"description": "An open source Mux player for React that Just Works™",

@@ -30,3 +30,2 @@ "main": "dist/index.js",

"prebuild": "yarn clean",
"prepublishOnly": "yarn build",
"create-release-notes": "create-release-notes ./CHANGELOG.md",

@@ -36,5 +35,5 @@ "publish-release": "../../scripts/publish.sh"

"peerDependencies": {
"@types/react": "^16.8.6 || ^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"@types/react": "^17.0.0 || ^18",
"react": "^17.0.2 || ^18",
"react-dom": "^17.0.2 || ^18"
},

@@ -50,4 +49,10 @@ "peerDependenciesMeta": {

"dependencies": {
"@mux/mux-player": "0.1.0-beta.20",
"@mux/playback-core": "0.7.0",
"@mux/mux-audio": "0.6.3-canary.20-ce76b1b",
"@mux/mux-audio-react": "0.4.2-canary.21-ce76b1b",
"@mux/mux-elements-codemod": "1.1.2-canary.21-ce76b1b",
"@mux/mux-player": "0.1.0-canary.20-ce76b1b",
"@mux/mux-uploader-react": "0.1.0-canary.20-ce76b1b",
"@mux/mux-video": "0.8.5-canary.17-ce76b1b",
"@mux/mux-video-react": "0.5.2-canary.21-ce76b1b",
"@mux/playback-core": "-ce76b1b",
"prop-types": "^15.7.2"

@@ -54,0 +59,0 @@ },

175

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,52 +243,37 @@

| 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"` | 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 |
| `tertiaryColor` | (Any valid CSS color style) | The tertiary 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` |
| `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 |
| 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 |
| `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.
src/common/utils.ts
src/env.ts
src/index.tsx
src/useCombinedRefs.ts
src/useObjectPropEffect.ts
tsconfig.json
types/index.d.ts
dist/index.js.map

Sorry, the diff of this file is not supported yet

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