react-datocms 7.0.3 → 8.0.0-1

package/README.md

@@ -26,7 +26,7 @@ This package offers different components and hooks. Please refer to one of the f
 
 * [`<SRCImage />` and `<Image />` components for responsive/progressive images](./docs/image.md)
 * [`<StructuredText />` component](./docs/structured-text.md)
-* [`<VideoPlayer />` component](./docs/video-player.md)
+* [`<VideoPlayer />` component](./docs/video-player.md) (lazy version available)
 * [`useQuerySubscription()` hook for live, real-time updates of content](./docs/live-real-time-updates.md)
 * [`useSiteSearch()` hook to render a DatoCMS Site Search form widget](./docs/site-search.md)
 * [`renderMetaTags()` and other helpers to render social share, SEO and Favicon meta tags](./docs/meta-tags.md)

package/dist/cjs/VideoPlayer/index.js

@@ -1,5 +1,5 @@
 "use strict";
-'use client';
+"use client";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -48,20 +48,20 @@ exports.VideoPlayer = void 0;
 // [1]: https://www.mux.com/player
 const react_1 = __importStar(require("react"));
 // React MUX player is made available in two flavours: eager and lazy loaded. We
-// choose to use the lazy version to avoid loading the web component uselessly.
-// MUX player lazy version loads internally the eager version using
-// `React.lazy()`.
-const lazy_1 = __importDefault(require("@mux/mux-player-react/lazy"));
+// choose to use the eager loading version as the default approch, but
+// we also provide a lazy loading version..
+const mux_player_react_1 = __importDefault(require("@mux/mux-player-react"));
 // The core of this component is the `useVideoPlayer` hook: it takes
 // data from DatoCMS GraphQL API and returns props as expected by the
 // `<MuxPlayer />` component.
 const index_js_1 = require("../useVideoPlayer/index.js");
 exports.VideoPlayer = (0, react_1.forwardRef)((props, ref) => {
-    const { data = {}, disableCookies = true, preload = 'metadata', style: styleFromProps } = props, rest = __rest(props, ["data", "disableCookies", "preload", "style"]);
+    const { data = {}, disableCookies = true, disableTracking = true, preload = "metadata", style: styleFromProps } = props, rest = __rest(props, ["data", "disableCookies", "disableTracking", "preload", "style"]);
     const { title, playbackId, style: styleFromHook, placeholder, } = (0, index_js_1.useVideoPlayer)({
         data,
     });
     const style = Object.assign(Object.assign({}, styleFromHook), styleFromProps);
-    return (react_1.default.createElement(lazy_1.default, Object.assign({ ref: ref, streamType: "on-demand", preload: preload, title: title, disableCookies: disableCookies, playbackId: playbackId, style: style, placeholder: placeholder }, rest)));
+    return (react_1.default.createElement(mux_player_react_1.default, Object.assign({ ref: ref, streamType: "on-demand", preload: preload, title: title, disableCookies: disableCookies, disableTracking: disableTracking, playbackId: playbackId, style: style, placeholder: placeholder }, rest)));
 });
+exports.default = exports.VideoPlayer;
 //# sourceMappingURL=index.js.map

package/dist/cjs/VideoPlayer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VideoPlayer/index.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,gFAAgF;AAChF,8EAA8E;AAC9E,2EAA2E;AAC3E,EAAE;AACF,qEAAqE;AACrE,EAAE;AACF,kCAAkC;AAElC,+CAA0C;AAO1C,gFAAgF;AAChF,+EAA+E;AAC/E,mEAAmE;AACnE,kBAAkB;AAElB,sEAAmD;AAEnD,oEAAoE;AACpE,qEAAqE;AACrE,6BAA6B;AAE7B,yDAA4D;AAqC/C,QAAA,WAAW,GAEY,IAAA,kBAAU,EAG5C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EACJ,IAAI,GAAG,EAAE,EACT,cAAc,GAAG,IAAI,EACrB,OAAO,GAAG,UAAU,EACpB,KAAK,EAAE,cAAc,KAEnB,KAAK,EADJ,IAAI,UACL,KAAK,EANH,8CAML,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EAAE,aAAa,EACpB,WAAW,GACZ,GAAG,IAAA,yBAAc,EAAC;QACjB,IAAI;KACL,CAAC,CAAC;IAEH,MAAM,KAAK,mCACN,aAAa,GACb,cAAc,CAClB,CAAC;IAEF,OAAO,CACL,8BAAC,cAAS,kBACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,WAAW,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,IACpB,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VideoPlayer/index.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,gFAAgF;AAChF,8EAA8E;AAC9E,2EAA2E;AAC3E,EAAE;AACF,qEAAqE;AACrE,EAAE;AACF,kCAAkC;AAElC,+CAA0C;AAO1C,gFAAgF;AAChF,sEAAsE;AACtE,2CAA2C;AAE3C,6EAA8C;AAE9C,oEAAoE;AACpE,qEAAqE;AACrE,6BAA6B;AAE7B,yDAA4D;AAyC/C,QAAA,WAAW,GAAoB,IAAA,kBAAU,EAGpD,CAAC,KAAuB,EAAE,GAAG,EAAE,EAAE;IACjC,MAAM,EACJ,IAAI,GAAG,EAAE,EACT,cAAc,GAAG,IAAI,EACrB,eAAe,GAAG,IAAI,EACtB,OAAO,GAAG,UAAU,EACpB,KAAK,EAAE,cAAc,KAEnB,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,iEAOL,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EAAE,aAAa,EACpB,WAAW,GACZ,GAAG,IAAA,yBAAc,EAAC;QACjB,IAAI;KACL,CAAC,CAAC;IAEH,MAAM,KAAK,mCACN,aAAa,GACb,cAAc,CAClB,CAAC;IAEF,OAAO,CACL,8BAAC,0BAAS,kBACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,WAAW,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,IACpB,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,mBAAW,CAAC"}

package/dist/cjs/VideoPlayer/lazy.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoPlayer = void 0;
+const react_1 = __importStar(require("react"));
+const LazyLoadedVideoPlayer = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require("./index.js"))));
+exports.VideoPlayer = (0, react_1.forwardRef)((props, ref) => {
+    const { className, style } = props;
+    return (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", { className: className, style: style }) },
+        react_1.default.createElement(LazyLoadedVideoPlayer, Object.assign({}, props, { ref: ref }))));
+});
+exports.default = exports.VideoPlayer;
+//# sourceMappingURL=lazy.js.map

package/dist/cjs/VideoPlayer/lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.js","sourceRoot":"","sources":["../../../src/VideoPlayer/lazy.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AAMpD,MAAM,qBAAqB,GAAG,eAAK,CAAC,IAAI,CAAC,GAAG,EAAE,mDAAQ,YAAY,GAAC,CAAC,CAAC;AAMxD,QAAA,WAAW,GAAoB,IAAA,kBAAU,EAGpD,CAAC,KAAuB,EAAE,GAAG,EAAE,EAAE;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAEnC,OAAO,CACL,8BAAC,gBAAQ,IAAC,QAAQ,EAAE,uCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI;QAC7D,8BAAC,qBAAqB,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CACrC,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,mBAAW,CAAC"}

package/dist/esm/VideoPlayer/index.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -17,22 +17,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 // The React player written by MUX is an adapter for a web component.
 //
 // [1]: https://www.mux.com/player
-import React, { forwardRef } from 'react';
+import React, { forwardRef } from "react";
 // React MUX player is made available in two flavours: eager and lazy loaded. We
-// choose to use the lazy version to avoid loading the web component uselessly.
-// MUX player lazy version loads internally the eager version using
-// `React.lazy()`.
-import MuxPlayer from '@mux/mux-player-react/lazy';
+// choose to use the eager loading version as the default approch, but
+// we also provide a lazy loading version..
+import MuxPlayer from "@mux/mux-player-react";
 // The core of this component is the `useVideoPlayer` hook: it takes
 // data from DatoCMS GraphQL API and returns props as expected by the
 // `<MuxPlayer />` component.
-import { useVideoPlayer } from '../useVideoPlayer/index.js';
+import { useVideoPlayer } from "../useVideoPlayer/index.js";
 export const VideoPlayer = forwardRef((props, ref) => {
-    const { data = {}, disableCookies = true, preload = 'metadata', style: styleFromProps } = props, rest = __rest(props, ["data", "disableCookies", "preload", "style"]);
+    const { data = {}, disableCookies = true, disableTracking = true, preload = "metadata", style: styleFromProps } = props, rest = __rest(props, ["data", "disableCookies", "disableTracking", "preload", "style"]);
     const { title, playbackId, style: styleFromHook, placeholder, } = useVideoPlayer({
         data,
     });
     const style = Object.assign(Object.assign({}, styleFromHook), styleFromProps);
-    return (React.createElement(MuxPlayer, Object.assign({ ref: ref, streamType: "on-demand", preload: preload, title: title, disableCookies: disableCookies, playbackId: playbackId, style: style, placeholder: placeholder }, rest)));
+    return (React.createElement(MuxPlayer, Object.assign({ ref: ref, streamType: "on-demand", preload: preload, title: title, disableCookies: disableCookies, disableTracking: disableTracking, playbackId: playbackId, style: style, placeholder: placeholder }, rest)));
 });
+export default VideoPlayer;
 //# sourceMappingURL=index.js.map

package/dist/esm/VideoPlayer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VideoPlayer/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,gFAAgF;AAChF,8EAA8E;AAC9E,2EAA2E;AAC3E,EAAE;AACF,qEAAqE;AACrE,EAAE;AACF,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAO1C,gFAAgF;AAChF,+EAA+E;AAC/E,mEAAmE;AACnE,kBAAkB;AAElB,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAEnD,oEAAoE;AACpE,qEAAqE;AACrE,6BAA6B;AAE7B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAqC5D,MAAM,CAAC,MAAM,WAAW,GAEY,UAAU,CAG5C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EACJ,IAAI,GAAG,EAAE,EACT,cAAc,GAAG,IAAI,EACrB,OAAO,GAAG,UAAU,EACpB,KAAK,EAAE,cAAc,KAEnB,KAAK,EADJ,IAAI,UACL,KAAK,EANH,8CAML,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EAAE,aAAa,EACpB,WAAW,GACZ,GAAG,cAAc,CAAC;QACjB,IAAI;KACL,CAAC,CAAC;IAEH,MAAM,KAAK,mCACN,aAAa,GACb,cAAc,CAClB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,WAAW,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,IACpB,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VideoPlayer/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,gFAAgF;AAChF,8EAA8E;AAC9E,2EAA2E;AAC3E,EAAE;AACF,qEAAqE;AACrE,EAAE;AACF,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAO1C,gFAAgF;AAChF,sEAAsE;AACtE,2CAA2C;AAE3C,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAE9C,oEAAoE;AACpE,qEAAqE;AACrE,6BAA6B;AAE7B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAyC5D,MAAM,CAAC,MAAM,WAAW,GAAoB,UAAU,CAGpD,CAAC,KAAuB,EAAE,GAAG,EAAE,EAAE;IACjC,MAAM,EACJ,IAAI,GAAG,EAAE,EACT,cAAc,GAAG,IAAI,EACrB,eAAe,GAAG,IAAI,EACtB,OAAO,GAAG,UAAU,EACpB,KAAK,EAAE,cAAc,KAEnB,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,iEAOL,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EAAE,aAAa,EACpB,WAAW,GACZ,GAAG,cAAc,CAAC;QACjB,IAAI;KACL,CAAC,CAAC;IAEH,MAAM,KAAK,mCACN,aAAa,GACb,cAAc,CAClB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,WAAW,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,IACpB,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/esm/VideoPlayer/lazy.js

@@ -0,0 +1,9 @@
+import React, { Suspense, forwardRef } from "react";
+const LazyLoadedVideoPlayer = React.lazy(() => import("./index.js"));
+export const VideoPlayer = forwardRef((props, ref) => {
+    const { className, style } = props;
+    return (React.createElement(Suspense, { fallback: React.createElement("div", { className: className, style: style }) },
+        React.createElement(LazyLoadedVideoPlayer, Object.assign({}, props, { ref: ref }))));
+});
+export default VideoPlayer;
+//# sourceMappingURL=lazy.js.map

package/dist/esm/VideoPlayer/lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.js","sourceRoot":"","sources":["../../../src/VideoPlayer/lazy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMpD,MAAM,qBAAqB,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAMrE,MAAM,CAAC,MAAM,WAAW,GAAoB,UAAU,CAGpD,CAAC,KAAuB,EAAE,GAAG,EAAE,EAAE;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAEnC,OAAO,CACL,oBAAC,QAAQ,IAAC,QAAQ,EAAE,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI;QAC7D,oBAAC,qBAAqB,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CACrC,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/types/VideoPlayer/index.d.ts

@@ -1,5 +1,6 @@
-import type { MuxPlayerProps } from '@mux/mux-player-react';
-import MuxPlayer from '@mux/mux-player-react/lazy';
+import React from "react";
+import type MuxPlayerElement from "@mux/mux-player";
+import type { MuxPlayerProps } from "@mux/mux-player-react";
 type Maybe<T> = T | null;
 type Possibly<T> = Maybe<T> | undefined;
 export type Video = {
@@ -22,5 +23,6 @@ export type VideoPlayerProps = MuxPlayerProps & {
     /** The actual response you get from a DatoCMS `video` GraphQL query */
     data?: Video;
 };
-export declare const VideoPlayer: (props: VideoPlayerProps) => ReturnType<typeof MuxPlayer>;
-export {};
+type VideoPlayerType = React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<MuxPlayerElement>>;
+export declare const VideoPlayer: VideoPlayerType;
+export default VideoPlayer;

package/dist/types/VideoPlayer/lazy.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type MuxPlayerElement from "@mux/mux-player";
+import type { VideoPlayerProps } from "./index";
+type VideoPlayerType = React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<MuxPlayerElement>>;
+export declare const VideoPlayer: VideoPlayerType;
+export default VideoPlayer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-datocms",
-  "version": "7.0.3",
+  "version": "8.0.0-1",
   "engines": {
     "node": ">=8.0.0"
   },
@@ -24,6 +24,11 @@
       "import": "./dist/esm/Image/index.js",
       "types": "./dist/types/Image/index.d.ts"
     },
+    "./video-player/lazy": {
+      "require": "./dist/cjs/VideoPlayer/lazy.js",
+      "import": "./dist/esm/VideoPlayer/lazy.js",
+      "types": "./dist/types/VideoPlayer/lazy.d.ts"
+    },
     "./video-player": {
       "require": "./dist/cjs/VideoPlayer/index.js",
       "import": "./dist/esm/VideoPlayer/index.js",
@@ -64,6 +69,9 @@
       "video-player": [
         "./dist/types/VideoPlayer/index.d.ts"
       ],
+      "video-player/lazy": [
+        "./dist/types/VideoPlayer/lazy.d.ts"
+      ],
       "structured-text": [
         "./dist/types/StructuredText/index.d.ts"
       ],
@@ -95,7 +103,7 @@
   "homepage": "https://github.com/datocms/react-datocms",
   "devDependencies": {
     "@biomejs/biome": "^1.6.3",
-    "@mux/mux-player-react": "*",
+    "@mux/mux-player-react": "^2.0.0",
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-to-json": "^1.5.4",
     "@types/jest": "^29.5.11",
@@ -139,6 +147,6 @@
     "react-intersection-observer": "^9.4.3",
     "react-string-replace": "^1.1.0",
     "use-deep-compare-effect": "^1.6.1",
-    "@mux/mux-player-react": "*"
+    "@mux/mux-player-react": "^2.0.0"
   }
 }

package/src/VideoPlayer/index.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 // This file defines a React component that easily displays a video player using
 // data stored on DatoCMS and retrieved via DatoCMS GraphQL API. The component
@@ -8,25 +8,24 @@
 //
 // [1]: https://www.mux.com/player
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef } from "react";
 
 // We use and extend Typescript types defined in the MUX player.
 
-import type MuxPlayerElement from '@mux/mux-player';
-import type { MuxPlayerProps } from '@mux/mux-player-react';
+import type MuxPlayerElement from "@mux/mux-player";
+import type { MuxPlayerProps } from "@mux/mux-player-react";
 
 // React MUX player is made available in two flavours: eager and lazy loaded. We
-// choose to use the lazy version to avoid loading the web component uselessly.
-// MUX player lazy version loads internally the eager version using
-// `React.lazy()`.
+// choose to use the eager loading version as the default approch, but
+// we also provide a lazy loading version..
 
-import MuxPlayer from '@mux/mux-player-react/lazy';
+import MuxPlayer from "@mux/mux-player-react";
 
 // The core of this component is the `useVideoPlayer` hook: it takes
 // data from DatoCMS GraphQL API and returns props as expected by the
 // `<MuxPlayer />` component.
 
-import { useVideoPlayer } from '../useVideoPlayer/index.js';
+import { useVideoPlayer } from "../useVideoPlayer/index.js";
 
 type Maybe<T> = T | null;
 type Possibly<T> = Maybe<T> | undefined;
@@ -63,16 +62,19 @@ export type VideoPlayerProps = MuxPlayerProps & {
   data?: Video;
 };
 
-export const VideoPlayer: (
-  props: VideoPlayerProps,
-) => ReturnType<typeof MuxPlayer> = forwardRef<
+type VideoPlayerType = React.ForwardRefExoticComponent<
+  VideoPlayerProps & React.RefAttributes<MuxPlayerElement>
+>;
+
+export const VideoPlayer: VideoPlayerType = forwardRef<
   MuxPlayerElement,
   VideoPlayerProps
->((props, ref) => {
+>((props: VideoPlayerProps, ref) => {
   const {
     data = {},
     disableCookies = true,
-    preload = 'metadata',
+    disableTracking = true,
+    preload = "metadata",
     style: styleFromProps,
     ...rest
   } = props;
@@ -98,6 +100,7 @@ export const VideoPlayer: (
       preload={preload}
       title={title}
       disableCookies={disableCookies}
+      disableTracking={disableTracking}
       playbackId={playbackId}
       style={style}
       placeholder={placeholder}
@@ -105,3 +108,5 @@ export const VideoPlayer: (
     />
   );
 });
+
+export default VideoPlayer;

package/src/VideoPlayer/lazy.tsx

@@ -0,0 +1,26 @@
+import React, { Suspense, forwardRef } from "react";
+import type MuxPlayerElement from "@mux/mux-player";
+import type MuxPlayer from "@mux/mux-player-react/.";
+
+import type { VideoPlayerProps } from "./index";
+
+const LazyLoadedVideoPlayer = React.lazy(() => import("./index.js"));
+
+type VideoPlayerType = React.ForwardRefExoticComponent<
+  VideoPlayerProps & React.RefAttributes<MuxPlayerElement>
+>;
+
+export const VideoPlayer: VideoPlayerType = forwardRef<
+  MuxPlayerElement,
+  VideoPlayerProps
+>((props: VideoPlayerProps, ref) => {
+  const { className, style } = props;
+
+  return (
+    <Suspense fallback={<div className={className} style={style} />}>
+      <LazyLoadedVideoPlayer {...props} ref={ref} />
+    </Suspense>
+  );
+});
+
+export default VideoPlayer;