feat(mux-player-react, mux-uploader-react, mux-audio-react, mux-video…

…-react): add client component directive (#911) Add "use client" to all client-side entry points in - MuxPlayerReact - MuxUploaderReact - MuxAudioReact - MuxVideoReact Also update Next.js example: - Move nextjs-with-typescript example to Next 14 - Add [app router test page](https://elements-demo-nextjs-git-fork-decepulis-dc-rsc-mux.vercel.app/app-router) - move water.css to npm import to guarantee import order across pages and app routers - move the "browse elements" from pages to layout. Not really related to the PR 😅
muxinc · Apr 24, 2024 · 76aa003 · 76aa003
1 parent 668f35d
commit 76aa003
Show file tree

Hide file tree

Showing 35 changed files with 1,452 additions and 275 deletions.
diff --git a/examples/nextjs-with-typescript/.eslintrc.json b/examples/nextjs-with-typescript/.eslintrc.json
@@ -1,14 +1,7 @@
 {
   "root": true,
-  "extends": ["plugin:@next/next/recommended"],
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2021,
-    "sourceType": "module"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/no-unescaped-entities": "off"
   }
-}
+}
diff --git a/examples/nextjs-with-typescript/app/app-router/page.tsx b/examples/nextjs-with-typescript/app/app-router/page.tsx
@@ -0,0 +1,69 @@
+import type { Metadata } from 'next';
+import MuxUploader, { MuxUploaderDrop, MuxUploaderFileSelect, MuxUploaderProgress, MuxUploaderRetry, MuxUploaderStatus } from '@mux/mux-uploader-react';
+import MuxAudio from '@mux/mux-audio-react';
+import MuxVideo from "@mux/mux-video-react";
+import MuxPlayer from "@mux/mux-player-react";
+import MuxPlayerLazy from "@mux/mux-player-react/lazy";
+import "@mux/mux-player-react/themes/classic";
+import "@mux/mux-player-react/themes/microvideo";
+import muxBlurUp from '@mux/blurup'
+
+export const metadata: Metadata = {
+  title: 'App Directory test'
+}
+export default async function Page() {
+  // because this is a server component, we can run async muxBlurUp
+  const playbackId = "OG6Zq19uOjRkjO3bISLWasE2M01Cx8O3o"
+  const { blurDataURL, aspectRatio } = await muxBlurUp(playbackId)
+  return (
+    <main>
+      <p>Mux Uploader React, Mux Audio React, Mux Video React, and Mux Player React all natively support client components.</p>
+      <h2>Mux Uploader</h2>
+      <MuxUploaderDrop muxUploader="uploader" overlay overlayText="You're doing great!">
+          <h2>Enter your upload GCS url:</h2>
+
+          <input type="text" style={{
+            marginBottom: "20px",
+            width: "min(100%, 400px)",
+            boxSizing: "border-box"
+          }} placeholder="https://storage.googleapis.com/..." />
+
+          <MuxUploader
+            style={{ display: "none", height: "200px" }}
+            className="foo"
+            id="uploader"
+            noDrop
+            noProgress
+            noStatus
+            noRetry
+          />
+        </MuxUploaderDrop>
+        <MuxUploaderFileSelect muxUploader="uploader" ></MuxUploaderFileSelect>
+        <MuxUploaderProgress muxUploader="uploader" >What should be here?</MuxUploaderProgress>
+        <MuxUploaderRetry muxUploader="uploader" ></MuxUploaderRetry>
+        <MuxUploaderStatus muxUploader="uploader" ></MuxUploaderStatus>
+      <h2>Mux Audio</h2>
+      <MuxAudio controls playbackId={playbackId} />
+      <h2>Mux Video</h2>
+      <MuxVideo
+        playbackId={playbackId}
+        style={{ width: '100%' }}
+      />
+      <h2>Mux Player</h2>
+      <p>Standard import, with the classic theme</p>
+      <MuxPlayer
+        playbackId={playbackId}
+        placeholder={blurDataURL}
+        theme="classic"
+        style={{ width: '100%', aspectRatio }}
+      />
+      <p>Lazy import, with the microvideo theme</p>
+      <MuxPlayerLazy
+        playbackId={playbackId}
+        placeholder={blurDataURL}
+        theme="microvideo"
+        style={{ width: '100%', aspectRatio }}
+      />
+    </main>
+  )
+}
diff --git a/examples/nextjs-with-typescript/app/layout.tsx b/examples/nextjs-with-typescript/app/layout.tsx
@@ -0,0 +1,21 @@
+import Link from 'next/link';
+import DefaultHeader from '../components/default-header';
+import '../styles.css'
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: "Mux Elements"
+}
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head/ >
+      <body>
+        <DefaultHeader/>
+        {children}
+        <br/>
+        <Link href="/">← Browse Elements</Link>
+      </body>
+    </html>
+  )
+}
diff --git a/examples/nextjs-with-typescript/components/default-header.tsx b/examples/nextjs-with-typescript/components/default-header.tsx
@@ -0,0 +1,30 @@
+import Link from "next/link";
+import Image from "next/image";
+
+const MuxContent = () => {
+  return (<>
+    <div className="left-header">
+      <a className="mux-logo" href="https://www.mux.com/player" target="_blank" rel="noreferrer">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcSet="https://user-images.githubusercontent.com/360826/233653989-11cd8603-c20f-4008-8bf7-dc15b743c52b.svg" />
+          <source media="(prefers-color-scheme: light)" srcSet="https://user-images.githubusercontent.com/360826/233653583-50dda726-cbe7-4182-a113-059a91ae83e6.svg" />
+          <img alt="Mux Logo" src="https://user-images.githubusercontent.com/360826/233653583-50dda726-cbe7-4182-a113-059a91ae83e6.svg" />
+        </picture>
+      </a>
+      <h1><Link legacyBehavior href="/">Elements</Link></h1>
+    </div>
+    <div className="right-header">
+      <a className="github-logo" href="https://github.com/muxinc/elements" target="_blank" rel="noreferrer">
+        <Image width="32" height="32" src="/images/github-logo.svg" alt="Github logo" />
+      </a>
+    </div>
+  </>);
+};
+
+export default function DefaultHeader () {
+  return (
+    <header>
+      <MuxContent/>
+    </header>
+  );
+}
diff --git a/examples/nextjs-with-typescript/next-env.d.ts b/examples/nextjs-with-typescript/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/nextjs-with-typescript/package.json b/examples/nextjs-with-typescript/package.json
@@ -18,13 +18,14 @@
     "@mux/mux-uploader-react": ">=1.0.0-beta.0",
     "@mux/mux-video": ">=0.3.0",
     "@mux/mux-video-react": ">=0.3.0",
-    "next": "^12.1.0",
+    "next": "^14.2.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "water.css": "2"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^13.0.7",
     "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25"
+    "@types/react-dom": "^18.2.25",
+    "eslint-config-next": "^14.2.2"
   }
 }
diff --git a/examples/nextjs-with-typescript/pages/MuxAudio.tsx b/examples/nextjs-with-typescript/pages/MuxAudio.tsx
@@ -52,9 +52,6 @@ function MuxAudioPage() {
           />
         </div>
       </div>
-
-      <br/>
-      <Link href="/"><a>Browse Elements</a></Link>
     </>
   );
 }

diff --git a/examples/nextjs-with-typescript/pages/MuxPlayer.tsx b/examples/nextjs-with-typescript/pages/MuxPlayer.tsx
@@ -328,6 +328,7 @@ function MuxPlayerPage({ location }: Props) {
   useEffect(() => {
     if (!router.isReady) return;
     dispatch(updateProps(toInitialState(selectedAsset, mediaAssets, router.query)))
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.query, router.isReady]);
   const [stylesState, dispatchStyles] = useReducer(reducer, DEFAULT_INITIAL_STYLES_STATE);
   const genericOnChange = (obj) => dispatch(updateProps<MuxPlayerProps>(obj));
@@ -745,9 +746,6 @@ function MuxPlayerPage({ location }: Props) {
           values={RenditionOrderValues}
         />
       </div>
-
-      <br/>
-      <Link href="/"><a>Browse Elements</a></Link>
     </>
   );
 }

diff --git a/examples/nextjs-with-typescript/pages/MuxPlayerCuePoints.tsx b/examples/nextjs-with-typescript/pages/MuxPlayerCuePoints.tsx
@@ -48,8 +48,6 @@ function MuxPlayerPage() {
           {activeCuePoint?.value ? JSON.stringify(activeCuePoint?.value, null, 2) : 'Unset'}
         </pre>
       </div>
-      <br />
-      <Link href="/"><a>Browse Elements</a></Link>
     </>
   );
 }

diff --git a/examples/nextjs-with-typescript/pages/MuxPlayerCuePointsMeditate.tsx b/examples/nextjs-with-typescript/pages/MuxPlayerCuePointsMeditate.tsx
@@ -294,7 +294,7 @@ function MuxPlayerPage() {
       <UCLAHeader/>
       <section style={{ padding: `0 2.5rem`, margin: `0 0 2.5rem`}}>
         <div className={styles.description} style={{ fontSize: `1rem`, fontWeight: 400, lineHeight: 1.5, }}>
-          <span>The </span><Link href="https://www.uclahealth.org/programs/marc"><a>Mindful Awareness Research Center (MARC)</a></Link>
+          <span>The </span><Link legacyBehavior href="https://www.uclahealth.org/programs/marc"><a>Mindful Awareness Research Center (MARC)</a></Link>
           <span> provides fantastic, free, guided meditations, but wouldn't it be nice if you could just dive right into the meditation
           practice?</span>
           <p>Wouldn't it be even better if you could adjust how long the silent self-practice was based on your level of
@@ -383,67 +383,67 @@ function MuxPlayerPage() {
       <footer>
         <p>
           <span>This application uses </span>
-          <Link href="https://github.com/muxinc/elements/tree/main/packages/mux-player-react">
+          <Link legacyBehavior href="https://github.com/muxinc/elements/tree/main/packages/mux-player-react">
             <a>Mux Player (React)</a>
           </Link>
           <span>, a fully open source media player for </span>
-          <Link href="https://www.mux.com/">
+          <Link legacyBehavior href="https://www.mux.com/">
             <a>Mux, Inc.</a>
           </Link>
           <span> The content is part of UCLA MARC's "Drop in Meditations" series, graciously provided under a Creative Commons License.
             You may find a list of all of their Drop in Meditations </span>
-          <Link href="https://www.uclahealth.org/programs/marc/free-guided-meditations/drop-meditations-hammer-podcast">
+          <Link legacyBehavior href="https://www.uclahealth.org/programs/marc/free-guided-meditations/drop-meditations-hammer-podcast">
             <a>here</a>
           </Link>
           <span>. You can also find information on another great and free resource, the UCLA Mindful mobile application, </span>
-          <Link href="https://www.uclahealth.org/programs/marc/free-programming-resources/ucla-mindful-app">
+          <Link legacyBehavior href="https://www.uclahealth.org/programs/marc/free-programming-resources/ucla-mindful-app">
             <a>here</a>
           </Link>
           <span>.</span>
         </p>
         <p>
           <span>“Drop-in Meditations” created by Diana Winston and others (see above) for the </span>
-          <Link href="http://www.uclahealth.org/marc">
+          <Link legacyBehavior href="http://www.uclahealth.org/marc">
             <a>UCLA Mindful Awareness Research Center (MARC)</a>
           </Link>
           <span>, ©2011- 2021 The Regents of the University of California (The UC Regents).</span>
         </p>
         <p>
           <span>Drop-in Meditations are licensed under a </span>
-          <Link href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
+          <Link legacyBehavior href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
             <a>Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>
           </Link>
           <span>.</span>
         </p>
         <ul>
           <li>
             <span><strong>NonCommercial</strong> — You may not use the material for </span>
-            <Link href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
+            <Link legacyBehavior href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
               <a>commercial purposes</a>
             </Link>
             <span>.</span>
           </li>
 	        <li>
             <span><strong>NoDerivatives</strong> — If you </span>
-            <Link href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
+            <Link legacyBehavior href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
               <a>remix, transform, or build upon</a>
             </Link>
             <span> the material, you may not distribute the modified material.</span>
           </li>
 	        <li>
             <span><strong>No additional restrictions</strong> — You may not apply legal terms or </span>
-            <Link href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
+            <Link legacyBehavior href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
               <a>technological measures</a>
             </Link>
             <span> that legally restrict others from doing anything the license permits.</span>
           </li>
 	        <li>
             <span><strong>Attribution</strong> — You must give </span>
-            <Link href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
+            <Link legacyBehavior href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
               <a>appropriate credit</a>
             </Link>
             <span>, provide a link to the license, and </span>
-            <Link href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
+            <Link legacyBehavior href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
               <a>indicate if changes were made</a>
             </Link>
             <span>. You may do so in any reasonable manner, but not in any way that suggests the licensor (The UC Regents) endorses you or your use.</span>
@@ -459,7 +459,7 @@ export default MuxPlayerPage;
 export async function getServerSideProps(context) {
   return {
     props: {
-      hideDefaultHeader: true
+      hideDefaultLayout: true
     }
   };
 }
diff --git a/examples/nextjs-with-typescript/pages/MuxPlayerLazy.tsx b/examples/nextjs-with-typescript/pages/MuxPlayerLazy.tsx
@@ -294,6 +294,7 @@ function MuxPlayerPage({ location }: Props) {
   useEffect(() => {
     if (!router.isReady) return;
     dispatch(updateProps(toInitialState(selectedAsset, mediaAssets, router.query)))
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.query, router.isReady]);
   const [stylesState, dispatchStyles] = useReducer(reducer, {});
   const genericOnChange = (obj) => dispatch(updateProps<MuxPlayerProps>(obj));
@@ -617,9 +618,6 @@ function MuxPlayerPage({ location }: Props) {
           values={['noc', 'nof', 'nok', 'nom', 'nospace', 'noarrowleft', 'noarrowright']}
         />
       </div>
-
-      <br/>
-      <Link href="/"><a>Browse Elements</a></Link>
     </>
   );
 }

diff --git a/examples/nextjs-with-typescript/pages/MuxPlayerLazyBlurUp.tsx b/examples/nextjs-with-typescript/pages/MuxPlayerLazyBlurUp.tsx
@@ -61,9 +61,6 @@ export default MuxPlayerLazyPage;
         style={{ aspectRatio }}
         streamType="on-demand"
       />
-
-      <br/>
-      <Link href="/">Browse Elements</Link>
     </>
   );
 }

diff --git a/examples/nextjs-with-typescript/pages/MuxPlayerPosterSlot.tsx b/examples/nextjs-with-typescript/pages/MuxPlayerPosterSlot.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import Link from "next/link";
 import Head from 'next/head';
 import { useRef, useState } from "react";
@@ -36,11 +37,9 @@ function MuxPlayerPage() {
           style={{ objectFit: 'contain', height: '100%' }}
           slot="poster"
           src="https://image.mux.com/VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA/thumbnail.webp"
+          alt=""
         />
       </MuxPlayer>
-
-      <br/>
-      <Link href="/"><a>Browse Elements</a></Link>
     </>
   );
 }

diff --git a/examples/nextjs-with-typescript/pages/MuxPlayerTheme.tsx b/examples/nextjs-with-typescript/pages/MuxPlayerTheme.tsx
@@ -40,9 +40,6 @@ function MuxPlayerPage() {
           setPaused(true);
         }}
       />
-
-      <br/>
-      <Link href="/"><a>Browse Elements</a></Link>
     </>
   );
 }

diff --git a/examples/nextjs-with-typescript/pages/MuxUploader.tsx b/examples/nextjs-with-typescript/pages/MuxUploader.tsx
@@ -44,8 +44,6 @@ function MuxUploaderPage() {
         onUploadError={onUploadError}
         onProgress={onProgress}
       />
-
-      <Link href="/"><a>Browse Elements</a></Link>
     </>
   );
 }

diff --git a/examples/nextjs-with-typescript/pages/MuxUploaderSeparateComponents.tsx b/examples/nextjs-with-typescript/pages/MuxUploaderSeparateComponents.tsx
@@ -56,8 +56,6 @@ function MuxUploaderPage() {
       <MuxUploaderProgress muxUploader="uploader" >What should be here?</MuxUploaderProgress>
       <MuxUploaderRetry muxUploader="uploader" ></MuxUploaderRetry>
       <MuxUploaderStatus muxUploader="uploader" ></MuxUploaderStatus>
-
-      <Link href="/"><a>Browse Elements</a></Link>
     </>
   );
 }

diff --git a/examples/nextjs-with-typescript/pages/MuxVideo.tsx b/examples/nextjs-with-typescript/pages/MuxVideo.tsx
@@ -73,9 +73,6 @@ function MuxVideoPage() {
           />
         </div>
       </div>
-
-      <br/>
-      <Link href="/"><a>Browse Elements</a></Link>
     </>
   );
 }