Replace default player

components/teks/oki-mizik.js

@@ -1,32 +1,28 @@
-import {Typography, Link, Box} from '@mui/material'
 import PropTypes from 'prop-types'
+import {Box, CircularProgress} from '@mui/material'
+import dynamic from 'next/dynamic'
 
 const MIZIK_URL = process.env.NEXT_PUBLIC_OKI_MIZIK_URL || 'https://funkwhale-server.com'
 const MIZIK_API_USER = process.env.NEXT_PUBLIC_MIZIK_API_USER || 'user'
 const MIZIK_API_PASSWORD = process.env.NEXT_PUBLIC_MIZIK_API_PASSWORD || 'password'
 
-export default function OkiMizik({id}) {
+const DinamikLekte = dynamic(
+  () => import('./lekte'),
+  {ssr: false, loading: () => <CircularProgress sx={{color: '#29d'}} />}
+)
+
+export default function OkiMizik({id, teks}) {
   const mizikStreamUrl = `${MIZIK_URL}/rest/stream?u=${MIZIK_API_USER}&p=${MIZIK_API_PASSWORD}&id=${id}`
   const detailsUrl = `${MIZIK_URL}/library/tracks/${id}`
 
   return (
     <Box style={{marginTop: '0.3em', display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
-      <audio controls src={mizikStreamUrl}>
+      <DinamikLekte audio={mizikStreamUrl} url={detailsUrl} teks={teks} />
-        <p>
-          Votre navigateur ne prend pas en charge l’audio HTML. Voici un
-          un <a href={mizikStreamUrl}>lien vers le fichier audio</a> pour le
-          télécharger.
-        </p>
-      </audio>
-      <Typography style={{marginTop: '0.5em'}} variant='h5'>
-        <Link target='_blank' rel='noreferrer' href={detailsUrl}>
-          #OKi Mizik
-        </Link>
-      </Typography>
     </Box>
   )
 }
 
 OkiMizik.propTypes = {
-  id: PropTypes.number.isRequired
+  id: PropTypes.number.isRequired,
+  teks: PropTypes.object.isRequired
 }