From e5f891987240f03af327bc71ccaca97dd45e63ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Tue, 12 Jan 2021 21:55:54 +0100
Subject: [PATCH] Create OkiMizik component

---
 components/teks/oki-mizik.js | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 components/teks/oki-mizik.js

diff --git a/components/teks/oki-mizik.js b/components/teks/oki-mizik.js
new file mode 100644
index 0000000..e8d5a8d
--- /dev/null
+++ b/components/teks/oki-mizik.js
@@ -0,0 +1,32 @@
+import {Typography, Link, Box} from '@material-ui/core'
+import PropTypes from 'prop-types'
+
+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 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}>
+        <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
+}