150 lines
4.2 KiB
JavaScript
150 lines
4.2 KiB
JavaScript
'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,
|
|
}
|