feat: add Mux uploader rsc for Next 13

examples/nextjs-13/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/nextjs-13/.gitignore

@@ -0,0 +1,14 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+/node_modules
+/.next/
+/out/
+/build
+.DS_Store
+*.pem
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.env*.local
+.vercel
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs-13/app/MuxUploader/page.js

@@ -0,0 +1,11 @@
+import MuxUploader from '@mux/mux-uploader-react/rsc';
+
+export default function Home() {
+  return (
+    <main>
+      <div>
+        <MuxUploader />
+      </div>
+    </main>
+  )
+}

examples/nextjs-13/app/globals.css

@@ -0,0 +1,173 @@
+:root {
+  --links: rgb(223, 40, 104);
+}
+
+body {
+  padding: 0 1rem;
+}
+
+header {
+  padding: 2rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.left-header,
+.right-header {
+  display: flex;
+  align-items: center;
+}
+
+.mux-logo picture {
+  display: inline-block;
+  width: 81px;
+}
+
+.github-logo {
+  display: inline-block;
+  width: 26px;
+  height: 26px;
+}
+
+header h1 {
+  margin: 0;
+  margin-left: .9em;
+  margin-right: .9em;
+}
+
+h1 {
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: 0.2em;
+  font-size: 18px;
+}
+
+h1 a {
+  color: var(--text-main);
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-gap: 1.5rem;
+}
+
+nav li {
+  position: relative;
+}
+
+nav li a {
+  color: var(--text-main);
+  font-family: monospace;
+  font-size: 16px;
+  padding: 2rem;
+  height: calc(100% - 4rem);
+  display: flex;
+  align-items: center;
+}
+
+li a.video {
+  background: rgba(28, 160, 253, .1);
+}
+
+li a.audio {
+  background: rgba(251, 80, 29, .08);
+}
+
+li a.player {
+  background: rgba(31, 195, 168, .1);
+}
+
+li a.uploader {
+  background: rgba(150, 32, 216, .1);
+}
+
+@media (prefers-color-scheme:dark) {
+  body {
+    background: var(--background-alt);
+  }
+  .github-logo {
+    filter: invert(1) saturate(0);
+  }
+}
+
+mux-player:not([audio]),
+mux-video:not([audio]),
+video {
+  width: 100%;
+  display: block;
+  line-height: 0;
+  margin-bottom: 1rem;
+  background: #000;
+  aspect-ratio: 16 / 9;
+}
+
+mux-player,
+mux-video,
+mux-audio,
+audio {
+  width: 100%;
+  display: block;
+  line-height: 0;
+  margin-bottom: 1rem;
+}
+
+.options {
+  overflow: auto;
+  max-height: calc(100vh - calc(var(--player-height, 450px) + 201px));
+  min-height: 400px;
+}
+
+.options > div {
+  padding: 5px 10px;
+  min-height: 25px;
+  display: flex;
+  align-items: center;
+}
+
+.options > div :is(input, select) {
+  margin-left: 5px;
+}
+
+.options > div:nth-of-type(odd) {
+  background-color: #e9e9f9;
+}
+
+input[type=text],
+input[type=url],
+select {
+  flex-grow: 1;
+}
+
+@media (prefers-color-scheme: dark) {
+  .options > div:nth-of-type(odd) {
+    background-color: #3b3b3b;
+  }
+}
+
+div.code-renderer {
+  background-color: lightgrey;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.code-renderer pre {
+  width: 100%;
+  overflow: hidden;
+}
+
+div.url-renderer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.url-renderer a {
+  padding-block: 5px;
+  width: 100%;
+  overflow: scroll;
+  max-height: 100px;
+}

examples/nextjs-13/app/layout.js

@@ -0,0 +1,51 @@
+import 'water.css/out/water.css';
+import './globals.css'
+import { Inter } from 'next/font/google'
+import Link from "next/link";
+import Image from "next/image";
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+  title: 'Mux Elements',
+  description: 'Generated by create next app',
+}
+
+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 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>
+  </>);
+};
+
+const DefaultHeader = () => {
+  return (
+    <header>
+      <MuxContent/>
+    </header>
+  );
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <DefaultHeader/>
+        {children}
+      </body>
+    </html>
+  )
+}

examples/nextjs-13/app/page.js

@@ -0,0 +1,13 @@
+import Image from 'next/image'
+import styles from './page.module.css'
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <nav>
+      <ul>
+        <li><Link href="/MuxUploader" className="uploader">&lt;MuxUploader&gt;</Link></li>
+      </ul>
+    </nav>
+  )
+}

examples/nextjs-13/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

examples/nextjs-13/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

examples/nextjs-13/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "demo-mux-video-react-nextjs-13",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@mux/mux-uploader-react": ">=1.0.0-beta.0",
+    "eslint": "8.43.0",
+    "eslint-config-next": "13.4.7",
+    "next": "13.4.7",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "water.css": "^2.1.1"
+  }
+}

packages/mux-uploader-react/package.json

@@ -6,9 +6,16 @@
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.mjs",
   "exports": {
-    "import": "./dist/index.mjs",
-    "require": "./dist/index.cjs.js",
-    "default": "./dist/index.cjs.js"
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs.js",
+      "default": "./dist/index.cjs.js"
+    },
+    "./rsc": {
+      "import": "./dist/rsc.mjs",
+      "require": "./dist/rsc.cjs.js",
+      "default": "./dist/rsc.mjs"
+    }
   },
   "types": "dist/types-ts3.4/index.d.ts",
   "typesVersions": {
@@ -29,13 +36,17 @@
     "clean": "shx rm -rf dist/",
     "dev:cjs": "yarn build:cjs --watch=forever",
     "dev:esm": "yarn build:esm --watch=forever",
+    "dev:cjs:rsc": "yarn build:cjs:rsc --watch=forever",
+    "dev:esm:rsc": "yarn build:esm:rsc --watch=forever",
     "dev:types": "yarn build:types -w",
-    "dev": "npm-run-all --parallel dev:types dev:cjs dev:esm",
-    "build:cjs": "esbuild src/index.tsx --target=es2019 --minify --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --loader:.css=text --outdir=dist --out-extension:.js=.cjs.js --external:react --external:prop-types",
-    "build:esm": "esbuild src/index.tsx --target=es2019 --minify --bundle --sourcemap --metafile=./dist/esm.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:prop-types",
+    "dev": "npm-run-all --parallel dev:types dev:cjs dev:esm dev:cjs:rsc dev:esm:rsc",
+    "build:cjs": "esbuild src/index.tsx --banner:js='\"use client\";' --target=es2019 --minify --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --loader:.css=text --outdir=dist --out-extension:.js=.cjs.js --external:react --external:prop-types",
+    "build:esm": "esbuild src/index.tsx --banner:js='\"use client\";' --target=es2019 --minify --bundle --sourcemap --metafile=./dist/esm.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:prop-types",
+    "build:cjs:rsc": "esbuild src/rsc.tsx --target=es2019 --format=cjs --outdir=dist --out-extension:.js=.cjs.js",
+    "build:esm:rsc": "esbuild src/rsc.tsx --target=es2019 --format=esm --outdir=dist --out-extension:.js=.mjs",
     "build:types": "tsc",
     "postbuild:types": "downlevel-dts ./dist/types ./dist/types-ts3.4",
-    "build": "npm-run-all --parallel 'build:cjs --minify' 'build:esm --minify'",
+    "build": "npm-run-all --parallel 'build:cjs --minify' 'build:esm --minify' 'build:cjs:rsc --minify' 'build:esm:rsc --minify'",
     "create-release-notes": "create-release-notes ./CHANGELOG.md",
     "publish-release": "../../scripts/publish.sh"
   },
@@ -53,6 +64,7 @@
     }
   },
   "dependencies": {
+    "@mux/mux-node": "^7.3.0",
     "@mux/mux-uploader": "1.0.0-beta.9",
     "prop-types": "^15.7.2"
   },

packages/mux-uploader-react/src/rsc.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Mux from '@mux/mux-node';
+import MuxUploaderClient from './index';
+
+const { Video } = new Mux();
+
+export default async function MuxUploaderServer(props: any) {
+  const upload = await Video.Uploads.create({
+    cors_origin: '*',
+    new_asset_settings: {
+      playback_policy: 'public',
+    },
+  });
+
+  return <MuxUploaderClient endpoint={upload.url} {...props} />;
+}