Default to eager component loading

CHANGELOG.md

@@ -5,11 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Changed
+
+- `<VideoPlayer>` component now is eager by default (the lazy version is available via `import VideoPlayer from 'react-datocms/video-player/lazy';`)
+
 ## [2.0.1] - 2022-01-05
 
 ### Added
 
 - `layout` property to Image component
+
 ### Changed
 
 - Default layout is now `intrinsic`, so the image the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports

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)

docs/video-player.md

@@ -7,6 +7,7 @@
   - [Usage](#usage)
   - [Example](#example)
   - [Props](#props)
+  - [Lazy version](#lazy-version)
   - [Advanced usage: the `useVideoPlayer` hook](#advanced-usage-the-usevideoplayer-hook)
     - [Example](#example-1)
 
@@ -21,18 +22,16 @@ To stream videos, DatoCMS partners with MUX, a video CDN that serves optimized s
 ## Out-of-the-box features
 
 - Offers optimized streaming so smartphones and tablets don’t request desktop-sized videos
-- Lazy loads the video component and the video to be played to speed initial page load and save bandwidth
 - Holds the video position and size so your page doesn’t jump while the player loads
 - Uses blur-up technique to show a placeholder of the video while it loads
+- Optionally lazy loads the video component and the video to be played to speed initial page load and save bandwidth
 
 ## Installation
 
 ```
 npm install --save react-datocms @mux/mux-player-react
 ```
 
-`@mux/mux-player-react` is a [peer dependency](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#peerdependencies) for `react-datocms`: so you're expected to add it in your project.
-
 ## Usage
 
 1. Import `VideoPlayer` from `react-datocms` and use it in your app
@@ -110,6 +109,23 @@ Compared to the `<MuxPlayer />`, **some prop default values are different** on `
 
 All the other props are forwarded to the `<MuxPlayer />` component that is used internally.
 
+## Lazy version
+
+For an optimized bundle, we provide a lazy version too. To use it, you need to change
+the way to import the component. From:
+
+```js
+import { VideoPlayer } from 'react-datocms';
+````
+
+to:
+
+```js
+import VideoPlayer from 'react-datocms/video-player/lazy';
+```
+
+The lazy version is based on `React.lazy()` method.
+
 ## Advanced usage: the `useVideoPlayer` hook
 
 Even though we try our best to make the `<VideoPlayer />` suitable and easy to use for most normal use cases, there are situations where you may need to leverage the `<MuxPlayer />` directly (let's suppose you wrote your special wrapper component around the `<MuxPlayer />` and you need a bunch of props to pass). If that's the case, fill free to use the hook we provide: `useVideoPlayer`.