32dece149e
* yarn create next-app * create an upload show page * create upload page to handle in-progress upload and asset when it is ready * move things to a layout component * add some button styling * poll for updates intelligently by dynamically setting refreshInterval on SWR hook * better title * edit gitignore, add MIT license use next 'latest' based on feedback from https://github.com/zeit/next.js/pull/12723 * add some messages and spinner to make this a little nicer * update README with environment variables info and Mux account info * add .now to gitignore * cleaner uploading state - redirect to /v/:playback_id when complete * hardset image width in footer * remove unused styles * adjust title font size on mobile and adjust footer height on mobile * use upchunk 1.0.8 so we don't have to dynamically load it * cleaner error message handling * fix brief error from returning Router on the render * yarn lint-fix * update README with note about .env.local * add min height so the layout doesn't shift after selecting a file * set poster attribute at video element * use getStaticProps and fallback:true to render meta tags for social sharing * create a pages/asset/:id route that we can be on while in the preparing state * add copy about Mux, add twitter share widget * add flash message about video ready for playback * call it pre-rendered instead of server-side rendered * pre-rendering, not server-side rendering * Next.js not NextJS * handle asset creation errors in the UI * call hls.destroy() when the component is unmounted * Updated readme and renamed .env.local * Updated description * add suggested patch with links to source code https://github.com/zeit/next.js/pull/13120#issuecomment-632858572 * Added vercel.json * Updated some links * Removed Prerequisites Co-authored-by: Luis Alvarez <luis@vercel.com>
68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
import Layout from './layout'
|
|
import { MUX_HOME_PAGE_URL } from '../constants'
|
|
|
|
export default function UploadPage({ children }) {
|
|
return (
|
|
<Layout
|
|
title="Welcome to Mux + Next.js"
|
|
description="Get started by uploading a video"
|
|
>
|
|
<div className="wrapper">
|
|
<div className="about-mux">
|
|
<p>
|
|
<a
|
|
href={MUX_HOME_PAGE_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Mux
|
|
</a>{' '}
|
|
provides APIs for developers working with video. This example is
|
|
useful if you want to build:
|
|
</p>
|
|
<ul>
|
|
<li>A video on demand service like Youtube or Netflix</li>
|
|
<li>
|
|
A platform that supports user uploaded videos like Tiktok or
|
|
Instagram
|
|
</li>
|
|
<li>Video into your custom CMS</li>
|
|
</ul>
|
|
<p>
|
|
Uploading a video uses the Mux{' '}
|
|
<a href="https://docs.mux.com/docs/direct-upload">
|
|
direct upload API
|
|
</a>
|
|
. When the upload is complete your video will be processed by Mux
|
|
and available for playback on a sharable URL.
|
|
</p>
|
|
<p>
|
|
To learn more,{' '}
|
|
<a
|
|
href="https://github.com/zeit/next.js/tree/canary/examples/with-mux-video"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
check out the source code on GitHub
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
<div className="children">{children}</div>
|
|
</div>
|
|
<style jsx>{`
|
|
.about-mux {
|
|
padding: 0 1rem 1.5rem 1rem;
|
|
max-width: 600px;
|
|
}
|
|
.about-mux {
|
|
line-height: 1.4rem;
|
|
}
|
|
.children {
|
|
text-align: center;
|
|
min-height: 230px;
|
|
}
|
|
`}</style>
|
|
</Layout>
|
|
)
|
|
}
|