Update with-mux-video to use latest upchunk and replace video player …

…with mux-player-react (#37621)

* Update upchunk to latest (2.3.1).

* Add mux-player package to package.json

* WIP: Make VideoPlayer return mux-player

* Remove unused code from prev video player

* Use mux-player-react directly

* Fix import line for mux-player-react

* chore: fix lint issues

examples/with-mux-video/package.json

@@ -7,8 +7,8 @@
   },
   "dependencies": {
     "@mux/mux-node": "^2.8.0",
-    "@mux/upchunk": "^2.0.0",
-    "hls.js": "^0.13.2",
+    "@mux-elements/mux-player-react": "0.1.0-beta.19",
+    "@mux/upchunk": "^2.3.1",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

examples/with-mux-video/pages/v/[id].js

@@ -1,15 +1,14 @@
+import MuxPlayer from '@mux-elements/mux-player-react'
 import Link from 'next/link'
 import Layout from '../../components/layout'
-import VideoPlayer from '../../components/video-player'
 import Spinner from '../../components/spinner'
 import { MUX_HOME_PAGE_URL } from '../../constants'
 import { useRouter } from 'next/router'
 
 export function getStaticProps({ params: { id: playbackId } }) {
-  const src = `https://stream.mux.com/${playbackId}.m3u8`
   const poster = `https://image.mux.com/${playbackId}/thumbnail.png`
 
-  return { props: { playbackId, src, poster } }
+  return { props: { playbackId, poster } }
 }
 
 export function getStaticPaths() {
@@ -33,7 +32,7 @@ const Code = ({ children }) => (
   </>
 )
 
-export default function Playback({ playbackId, src, poster }) {
+export default function Playback({ playbackId, poster }) {
   const router = useRouter()
 
   if (router.isFallback) {
@@ -51,7 +50,7 @@ export default function Playback({ playbackId, src, poster }) {
       loadTwitterWidget
     >
       <div className="flash-message">This video is ready for playback</div>
-      <VideoPlayer src={src} poster={poster} />
+      <MuxPlayer style={{ width: '100%' }} playbackId={playbackId} />
       <p>
         Go{' '}
         <Link href="/">