archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/examples/with-mux-video/public/mux.svg

65 lines
5.5 KiB
XML
Raw Normal View History

Add example: with-mux-video (#13120) * 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>
2020-05-22 23:13:12 +02:00
<svg width="71" height="25" viewBox="0 0 71 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path opacity="0.7" d="M66.7332 22.6532C67.6983 23.6231 69.215 23.6231 70.1112 22.6532C71.0763 21.6834 71.0763 20.1593 70.1112 19.2587L52.3248 1.3856C51.3597 0.415738 49.843 0.415738 48.9468 1.3856C48.0506 2.35546 47.9816 3.87952 48.9468 4.78011L66.7332 22.6532Z" fill="url(#paint0_linear)"/>
<path d="M52.3248 22.8613C51.3597 23.8311 49.843 23.8311 48.9468 22.8613C48.0506 21.8914 47.9816 20.3673 48.9468 19.4667L66.7332 1.59361C67.6983 0.623746 69.215 0.623746 70.1112 1.59361C71.0074 2.56347 71.0763 4.08753 70.1112 4.98812L52.3248 22.8613Z" fill="url(#paint1_linear)"/>
<path opacity="0.7" d="M35.8484 18.566C38.8818 18.566 41.3636 16.0721 41.3636 13.0239V3.1868C41.3636 1.80128 42.3977 0.692871 43.7765 0.692871C45.1552 0.692871 46.1893 1.80128 46.1893 3.1868V12.9547C46.1893 18.7046 41.5704 23.346 35.8484 23.346C34.5386 23.346 33.4355 22.2376 33.4355 20.9214C33.5045 19.6051 34.5386 18.566 35.8484 18.566Z" fill="url(#paint2_linear)"/>
<path opacity="0.7" d="M21.0266 0.900879C19.6479 0.900879 18.6138 2.00929 18.6138 3.3948V21.0601C18.6138 22.4456 19.6479 23.554 21.0266 23.554C22.4054 23.554 23.4395 22.4456 23.4395 21.0601V3.3948C23.4395 2.00929 22.4054 0.900879 21.0266 0.900879Z" fill="url(#paint3_linear)"/>
<path d="M43.7767 5.54217C45.1092 5.54217 46.1895 4.45662 46.1895 3.11752C46.1895 1.77842 45.1092 0.692871 43.7767 0.692871C42.4441 0.692871 41.3638 1.77842 41.3638 3.11752C41.3638 4.45662 42.4441 5.54217 43.7767 5.54217Z" fill="url(#paint4_linear)"/>
<path d="M68.595 23.5539C69.9276 23.5539 71.0079 22.4683 71.0079 21.1292C71.0079 19.7901 69.9276 18.7046 68.595 18.7046C67.2624 18.7046 66.1821 19.7901 66.1821 21.1292C66.1821 22.4683 67.2624 23.5539 68.595 23.5539Z" fill="url(#paint5_linear)"/>
<path d="M3.10233 0.900879C1.72354 0.900879 0.689453 2.00929 0.689453 3.3948V21.0601C0.689453 22.4456 1.72354 23.554 3.10233 23.554C4.48112 23.554 5.51521 22.4456 5.51521 21.0601V3.3948C5.51521 2.00929 4.48112 0.900879 3.10233 0.900879Z" fill="url(#paint6_linear)"/>
<path d="M21.0266 23.5539C22.3592 23.5539 23.4395 22.4683 23.4395 21.1292C23.4395 19.7901 22.3592 18.7046 21.0266 18.7046C19.6941 18.7046 18.6138 19.7901 18.6138 21.1292C18.6138 22.4683 19.6941 23.5539 21.0266 23.5539Z" fill="url(#paint7_linear)"/>
<path opacity="0.7" d="M10.2721 13.786C11.2373 14.7559 12.7539 14.7559 13.6501 13.786C14.5463 12.8162 14.6153 11.2921 13.6501 10.3915L4.75695 1.45493C3.86073 0.485074 2.34407 0.485074 1.37891 1.45493C0.413763 2.42479 0.482702 3.94886 1.37891 4.84944L10.2721 13.786Z" fill="url(#paint8_linear)"/>
<path d="M13.7882 13.786C12.823 14.7559 11.3064 14.7559 10.4102 13.786C9.51395 12.8162 9.44501 11.2921 10.4102 10.3915L19.3033 1.45493C20.2685 0.485074 21.7852 0.485074 22.6814 1.45493C23.6465 2.42479 23.6465 3.94886 22.6814 4.84944L13.7882 13.786Z" fill="url(#paint9_linear)"/>
<path d="M35.8487 18.566C32.8154 18.566 30.3336 16.0721 30.3336 13.0239V3.1868C30.3336 1.80128 29.2995 0.692871 27.9207 0.692871C26.5419 0.692871 25.5078 1.80128 25.5078 3.1868V12.9547C25.5078 18.7046 30.1268 23.346 35.8487 23.346C37.1586 23.346 38.2616 22.2376 38.2616 20.9214C38.1927 19.6051 37.1586 18.566 35.8487 18.566Z" fill="url(#paint10_linear)"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="-0.000211689" y1="12.0227" x2="70.8359" y2="12.0227" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF4E00"/>
<stop offset="1" stop-color="#FF1791"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="0.861528" y1="12.2242" x2="70.8359" y2="12.2242" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF4E00"/>
<stop offset="1" stop-color="#FF1791"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="72.4818" y1="12.0227" x2="0.754128" y2="12.0227" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF4E00"/>
<stop offset="1" stop-color="#FF1791"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="0.142208" y1="12.2242" x2="71.8699" y2="12.2242" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF4E00"/>
<stop offset="1" stop-color="#FF1791"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="0.632025" y1="3.10346" x2="70.894" y2="3.10346" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF4E00"/>
<stop offset="1" stop-color="#FF1791"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="-0.747154" y1="21.1433" x2="70.9803" y2="21.1433" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF4E00"/>
<stop offset="1" stop-color="#FF1791"/>
</linearGradient>
<linearGradient id="paint6_linear" x1="-0.0302055" y1="12.2242" x2="71.6975" y2="12.2242" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF4E00"/>
<stop offset="1" stop-color="#FF1791"/>
</linearGradient>
<linearGradient id="paint7_linear" x1="0.0345948" y1="21.1292" x2="72.1801" y2="21.1292" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF4E00"/>
<stop offset="1" stop-color="#FF1791"/>
</linearGradient>
<linearGradient id="paint8_linear" x1="1.03422" y1="7.62047" x2="71.5604" y2="7.62047" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF4E00"/>
<stop offset="1" stop-color="#FF1791"/>
</linearGradient>
<linearGradient id="paint9_linear" x1="0.862056" y1="7.62047" x2="69.9773" y2="7.62047" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF4E00"/>
<stop offset="1" stop-color="#FF1791"/>
</linearGradient>
<linearGradient id="paint10_linear" x1="-0.400385" y1="12.0227" x2="71.3273" y2="12.0227" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF4E00"/>
<stop offset="1" stop-color="#FF1791"/>
</linearGradient>
<clipPath id="clip0">
<rect width="71" height="24.85" fill="white"/>
</clipPath>
</defs>
</svg>
Reference in a new issue Copy permalink