pawol.nu/components/teks/karaoke-modal.js

'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,
}