@mux/mux-player-react
Advanced tools
@mux/mux-player-react - npm Package Compare versions
Comparing version 0.1.0-canary.10-2039108 to 0.1.0-canary.10-2a741f0
@@ -6,2 +6,22 @@ # 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) | ||
@@ -8,0 +28,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-2039108"}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-2a741f0"}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:h,onTimeUpdate:w,onPause:S,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,h),o("timeupdate",e,w),o("pause",e,S),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 |
@@ -40,2 +40,3 @@ import React from 'react'; | ||
| export declare type MuxPlayerProps = { | ||
| nohotkeys?: boolean; | ||
| defaultHiddenCaptions?: boolean; | ||
@@ -42,0 +43,0 @@ playerSoftwareVersion?: string; |
@@ -40,2 +40,3 @@ import React from 'react'; | ||
| export declare type MuxPlayerProps = { | ||
| nohotkeys?: boolean; | ||
| defaultHiddenCaptions?: boolean; | ||
@@ -42,0 +43,0 @@ playerSoftwareVersion?: string; |
| { | ||
| "name": "@mux/mux-player-react", | ||
| "version": "0.1.0-canary.10-2039108", | ||
| "version": "0.1.0-canary.10-2a741f0", | ||
| "description": "An open source Mux player for React that Just Works™", | ||
@@ -48,4 +48,4 @@ "main": "dist/index.js", | ||
| "dependencies": { | ||
| "@mux/mux-player": "0.1.0-beta.22", | ||
| "@mux/playback-core": "0.8.0", | ||
| "@mux/mux-player": "0.1.0-beta.26", | ||
| "@mux/playback-core": "0.9.1-canary.10-2a741f0", | ||
| "prop-types": "^15.7.2" | ||
@@ -52,0 +52,0 @@ }, |
@@ -148,30 +148,32 @@ <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" \| "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 | | ||
| | 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 | | ||
@@ -178,0 +180,0 @@ ### Callbacks |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
- Lines of code
- increased by0.54%
560
- Number of lines in readme file
- increased by1.01%
201
Worsened metrics
- Total package byte prevSize
- decreased by-8.03%
73927
- Number of package files
- decreased by-4.35%
22
Dependency changes
+ Added@mux/mux-player@0.1.0-beta.26(transitive)
+ Added@mux/mux-video@0.8.4(transitive)
+ Added@mux/playback-core@0.9.00.9.1-canary.10-2a741f0(transitive)
+ Addedmedia-chrome@0.9.0(transitive)
- Removed@mux/mux-player@0.1.0-beta.22(transitive)
- Removed@mux/mux-video@0.8.1(transitive)
- Removed@mux/playback-core@0.8.0(transitive)
- Removedmedia-chrome@0.6.9(transitive)