feat: add karaoke modal

2026-06-17 23:47:14 +04:00
parent f28fa96f89
commit b12952f85e
2 changed files with 153 additions and 0 deletions
@@ -0,0 +1,149 @@
+'use client'
+
+import {useState, forwardRef} from 'react'
+import PropTypes from 'prop-types'
+import Fab from '@mui/material/Fab'
+import Dialog from '@mui/material/Dialog'
+import Slide from '@mui/material/Slide'
+import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
+import Typography from '@mui/material/Typography'
+import Tooltip from '@mui/material/Tooltip'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import {useTheme} from '@mui/material/styles'
+import MicIcon from '@mui/icons-material/Mic'
+import CloseIcon from '@mui/icons-material/Close'
+
+const SlideUp = forwardRef(function SlideUp(props, ref) {
+  return <Slide direction='up' ref={ref} {...props} />
+})
+
+function toEmbedUrl(url) {
+  try {
+    const u = new URL(url)
+    const match = u.pathname.match(/\/(?:videos\/watch|w)\/([^/?#]+)/)
+    if (match) {
+      return `${u.origin}/videos/embed/${match[1]}?title=0&warningTitle=0&peertubeLink=0&controlBar=1`
+    }
+    return url
+  } catch {
+    return url
+  }
+}
+
+export default function KaraokeModal({url, titre, artistes}) {
+  const [open, setOpen] = useState(false)
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
+  return (
+    <>
+      <Tooltip title='Karaoké' placement='left'>
+        <Fab
+          color='primary'
+          size={isMobile ? 'medium' : 'large'}
+          aria-label='karaoké'
+          onClick={() => setOpen(true)}
+          sx={{
+            position: 'fixed',
+            bottom: {xs: 24, sm: 32},
+            right: {xs: 24, sm: 32},
+            zIndex: 10,
+          }}
+        >
+          <MicIcon />
+        </Fab>
+      </Tooltip>
+
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        TransitionComponent={SlideUp}
+        maxWidth={false}
+        slotProps={{
+          backdrop: {sx: {backdropFilter: 'blur(6px)', bgcolor: 'rgba(0,0,0,0.85)'}}
+        }}
+        PaperProps={{
+          sx: {
+            bgcolor: '#000',
+            overflow: 'hidden',
+            ...(isMobile ? {
+              width: '100vw',
+              height: '100dvh',
+              maxWidth: 'none',
+              maxHeight: 'none',
+              m: 0,
+              borderRadius: 0,
+            } : {
+              width: 'calc(88vh * 9 / 16)',
+              height: '88vh',
+              maxWidth: 'none',
+              maxHeight: 'none',
+              borderRadius: 3,
+            })
+          }
+        }}
+      >
+        {/* Header superposé */}
+        <Box sx={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1,
+          px: 2,
+          pt: {xs: 'env(safe-area-inset-top, 12px)', sm: '12px'},
+          pb: 3,
+          background: 'linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%)',
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'space-between',
+        }}>
+          <Box>
+            {titre && (
+              <Typography variant='subtitle1' sx={{color: '#fff', fontWeight: 700, lineHeight: 1.2}}>
+                {titre}
+              </Typography>
+            )}
+            {artistes?.length > 0 && (
+              <Typography variant='caption' sx={{color: 'rgba(255,255,255,0.7)'}}>
+                {artistes.map(a => a.alias).join(', ')}
+              </Typography>
+            )}
+          </Box>
+          <IconButton
+            size='small'
+            onClick={() => setOpen(false)}
+            aria-label='fermer'
+            sx={{
+              color: '#fff',
+              bgcolor: 'rgba(255,255,255,0.15)',
+              backdropFilter: 'blur(4px)',
+              mt: 0.5,
+              '&:hover': {bgcolor: 'rgba(255,255,255,0.25)'},
+            }}
+          >
+            <CloseIcon fontSize='small' />
+          </IconButton>
+        </Box>
+
+        {open && (
+          <iframe
+            src={toEmbedUrl(url)}
+            style={{width: '100%', height: '100%', border: 'none', display: 'block'}}
+            allowFullScreen
+            allow='autoplay; fullscreen'
+            sandbox='allow-same-origin allow-scripts allow-popups allow-forms'
+            title='Karaoké'
+          />
+        )}
+      </Dialog>
+    </>
+  )
+}
+
+KaraokeModal.propTypes = {
+  url: PropTypes.string.isRequired,
+  titre: PropTypes.string,
+  artistes: PropTypes.array,
+}