mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
eace44d129
## App Router Moves the `with-mux-video` example to idiomatic App Router, with goodies like * server component data fetching * server actions * layouts * route groups * loading UI ## Mux Dependencies * @mux/mux-node 7 -> 8 * @mux/mux-player-react 1 -> 2 * @mux/upchunk + custom UI -> @mux/mux-uploader ## In other news... * Fleshed out the README * Updated imagery * Moved from styled jsx to tailwind and lightly updated styles ## Contributor Checklist * [x] The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md * [x] Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md --------- Co-authored-by: Sam Ko <[email protected]>
67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { Status } from "./types";
|
|
import Link from "@/app/_components/Link";
|
|
|
|
const Oops = () => (
|
|
<p>
|
|
This is awkward. Let's <Link href="/">refresh</Link> and try again.
|
|
</p>
|
|
);
|
|
|
|
type Props = {
|
|
initialStatus: Status;
|
|
checkAssetStatus: () => Promise<Status>;
|
|
};
|
|
export default function AssetStatusPoll({
|
|
initialStatus,
|
|
checkAssetStatus,
|
|
}: Props) {
|
|
const [{ status, errors }, setStatus] = useState<Status>(() => initialStatus);
|
|
|
|
useEffect(() => {
|
|
const poll = async () => setStatus(await checkAssetStatus());
|
|
const interval = setInterval(poll, 1000);
|
|
return () => clearInterval(interval);
|
|
}, [checkAssetStatus]);
|
|
|
|
switch (status) {
|
|
case "preparing":
|
|
return <p className="animate-pulse">Asset is preparing...</p>;
|
|
case "errored":
|
|
return (
|
|
<div>
|
|
<p className="mb-4">Asset encountered an error.</p>
|
|
{Array.isArray(errors) && (
|
|
<ul className="mb-4">
|
|
{errors.map((error, key) => (
|
|
<li key={key}>{JSON.stringify(error)}</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
<Oops />
|
|
</div>
|
|
);
|
|
case "ready":
|
|
return (
|
|
<div>
|
|
<p className="mb-4">
|
|
Asset is ready. The app really should've redirected you to it by
|
|
now.
|
|
</p>
|
|
<Oops />
|
|
</div>
|
|
);
|
|
default:
|
|
return (
|
|
<div>
|
|
<p className="mb-4">Asset is in an unknown state.</p>
|
|
<pre className="mb-4">{JSON.stringify({ status, errors })}</pre>
|
|
<Oops />
|
|
</div>
|
|
);
|
|
}
|
|
}
|