Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@mux/mux-player-react
Advanced tools
@mux/mux-player-react - npm Package Compare versions
Comparing version 0.1.0-canary.10-8eff156 to 0.1.0-canary.10-94d000a
@@ -6,2 +6,6 @@ # Change Log | ||
| # [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) | ||
@@ -8,0 +12,0 @@ |
@@ -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.10-8eff156"}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 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.10-94d000a"}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; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "@mux/mux-player-react", | ||
| "version": "0.1.0-canary.10-8eff156", | ||
| "version": "0.1.0-canary.10-94d000a", | ||
| "description": "An open source Mux player for React that Just Works™", | ||
@@ -48,3 +48,3 @@ "main": "dist/index.js", | ||
| "dependencies": { | ||
| "@mux/mux-player": "0.1.0-beta.22", | ||
| "@mux/mux-player": "0.1.0-beta.23", | ||
| "@mux/playback-core": "0.8.0", | ||
@@ -51,0 +51,0 @@ "prop-types": "^15.7.2" |
@@ -148,30 +148,30 @@ <p align="center"> | ||
| | 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" \| "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 | | ||
| | `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 | | ||
@@ -178,0 +178,0 @@ ### Callbacks |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1%
80595
Dependency changes
+ Added@mux/mux-player@0.1.0-beta.23(transitive)
- Removed@mux/mux-player@0.1.0-beta.22(transitive)