Cédric FAMIBELLE-PRONZOLA
434 lines
12 KiB
JavaScript
434 lines
12 KiB
JavaScript
import {useEffect, useState, forwardRef} from 'react'
|
||
import PropTypes from 'prop-types'
|
||
import Link from 'next/link'
|
||
import {useSession} from 'next-auth/client'
|
||
|
||
import {
|
||
Grid,
|
||
Toolbar,
|
||
Typography,
|
||
AppBar,
|
||
CssBaseline,
|
||
Drawer,
|
||
Hidden,
|
||
IconButton,
|
||
Box,
|
||
useMediaQuery,
|
||
Snackbar,
|
||
Tooltip,
|
||
Zoom
|
||
} from '@mui/material'
|
||
|
||
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
|
||
import ExplicitIcon from '@mui/icons-material/Explicit'
|
||
|
||
import MenuIcon from '@mui/icons-material/Menu'
|
||
|
||
import {useTheme, styled} from '@mui/material/styles'
|
||
|
||
import MuiAlert from '@mui/material/Alert'
|
||
import {formatJsonString} from '../../lib/utils/format'
|
||
|
||
import VweKomante from '../komante/vwe-komante'
|
||
import Dekoneksyon from '../sesyon/dekoneksyon'
|
||
|
||
import DrawerBar from './drawer-bar'
|
||
import DenyeTeks from './denye-teks'
|
||
import VweKouteAchte from './vwe-koute-achte'
|
||
import OkiMizik from './oki-mizik'
|
||
import Pataje from './pataje'
|
||
import EntegreMizik from './entegre-mizik'
|
||
|
||
const PREFIX = 'teks-drawer'
|
||
|
||
const classes = {
|
||
tooltip: `${PREFIX}-tooltip`,
|
||
root: `${PREFIX}-root`,
|
||
drawer: `${PREFIX}-drawer`,
|
||
appBar: `${PREFIX}-appBar`,
|
||
menuButton: `${PREFIX}-menuButton`,
|
||
toolbar: `${PREFIX}-toolbar`,
|
||
drawerPaper: `${PREFIX}-drawerPaper`,
|
||
content: `${PREFIX}-content`,
|
||
list: `${PREFIX}-list`,
|
||
form: `${PREFIX}-form`,
|
||
text: `${PREFIX}-text`,
|
||
gridText: `${PREFIX}-gridText`,
|
||
grid: `${PREFIX}-grid`,
|
||
koute: `${PREFIX}-koute`,
|
||
vwe: `${PREFIX}-vwe`,
|
||
pataje: `${PREFIX}-pataje`
|
||
}
|
||
|
||
const Root = styled('div')((
|
||
{
|
||
theme
|
||
}
|
||
) => ({
|
||
[`&.${classes.root}`]: {
|
||
display: 'flex'
|
||
},
|
||
|
||
[`& .${classes.drawer}`]: {
|
||
marginTop: '10em',
|
||
[theme.breakpoints.up('sm')]: {
|
||
width: drawerWidth,
|
||
flexShrink: 0
|
||
}
|
||
},
|
||
|
||
[`& .${classes.appBar}`]: {
|
||
borderTop: '2px solid #303030',
|
||
marginTop: '3rem',
|
||
[theme.breakpoints.up('sm')]: {
|
||
width: `calc(100% - ${drawerWidth}px)`,
|
||
marginLeft: drawerWidth
|
||
},
|
||
zIndex: 1
|
||
},
|
||
|
||
[`& .${classes.menuButton}`]: {
|
||
[theme.breakpoints.up('sm')]: {
|
||
display: 'none'
|
||
}
|
||
},
|
||
|
||
[`& .${classes.toolbar}`]: theme.mixins.toolbar,
|
||
|
||
[`& .${classes.drawerPaper}`]: {
|
||
borderTop: '2px solid #303030',
|
||
marginTop: '3rem',
|
||
width: drawerWidth
|
||
},
|
||
|
||
[`& .${classes.content}`]: {
|
||
flexGrow: 1,
|
||
padding: theme.spacing(1)
|
||
},
|
||
|
||
[`& .${classes.list}`]: {
|
||
marginBottom: '6em'
|
||
},
|
||
|
||
[`& .${classes.form}`]: {
|
||
marginLeft: theme.spacing(1)
|
||
},
|
||
|
||
[`& .${classes.text}`]: {
|
||
marginBottom: '0.5em'
|
||
},
|
||
|
||
[`& .${classes.gridText}`]: {
|
||
border: '2px solid grey',
|
||
borderRadius: '5px',
|
||
marginTop: '2em',
|
||
padding: '1em'
|
||
},
|
||
|
||
[`& .${classes.grid}`]: {
|
||
marginTop: '1em'
|
||
},
|
||
|
||
[`& .${classes.koute}`]: {
|
||
position: 'absolute',
|
||
right: '40px',
|
||
top: '8px',
|
||
[theme.breakpoints.up('sm')]: {
|
||
top: '10px'
|
||
}
|
||
},
|
||
|
||
[`& .${classes.vwe}`]: {
|
||
position: 'absolute',
|
||
right: '90px',
|
||
top: '8px',
|
||
[theme.breakpoints.up('sm')]: {
|
||
top: '10px'
|
||
}
|
||
},
|
||
|
||
[`& .${classes.pataje}`]: {
|
||
position: 'fixed',
|
||
top: '59px',
|
||
left: '110px',
|
||
zIndex: 2,
|
||
[theme.breakpoints.up('sm')]: {
|
||
top: '62px',
|
||
left: '340px'
|
||
}
|
||
}
|
||
}))
|
||
|
||
const Alert = forwardRef(function Alert(props, ref) { // eslint-disable-line func-names
|
||
return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
|
||
})
|
||
|
||
const drawerWidth = 240
|
||
|
||
const langToArray = anTeks => {
|
||
const langArray = []
|
||
|
||
if (anTeks && anTeks.tradiksyon) {
|
||
const {francais, english, espagnol} = anTeks.tradiksyon
|
||
|
||
if (francais) {
|
||
langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
|
||
}
|
||
|
||
if (english) {
|
||
langArray.push({title: 'Translation', flag: 'en', lang: english})
|
||
}
|
||
|
||
if (espagnol) {
|
||
langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
|
||
}
|
||
}
|
||
|
||
return langArray
|
||
}
|
||
|
||
const alignTeks = (langArray, isMobile) => {
|
||
if (langArray.length > 0 && !isMobile) {
|
||
return 'justify'
|
||
}
|
||
|
||
if (langArray.length > 0 && isMobile) {
|
||
return 'justify'
|
||
}
|
||
|
||
if (langArray.length === 0 && isMobile) {
|
||
return 'justify'
|
||
}
|
||
|
||
if (langArray.length === 0 && !isMobile) {
|
||
return 'center'
|
||
}
|
||
}
|
||
|
||
const ExplicitTooltip = Tooltip
|
||
|
||
export default function TeksDrawer({teks, anTeks, komante}) {
|
||
const [session] = useSession()
|
||
|
||
const isMobile = useMediaQuery('(max-width:800px)')
|
||
const langArray = langToArray(anTeks)
|
||
|
||
const theme = useTheme()
|
||
const [esMobilOuve, meteEsMobilOuve] = useState(false)
|
||
const [open, setOpen] = useState(false)
|
||
const [error, setError] = useState('')
|
||
const [success, setSuccess] = useState('')
|
||
|
||
const handleClose = (event, reason) => {
|
||
if (reason === 'clickaway') {
|
||
return
|
||
}
|
||
|
||
setOpen(false)
|
||
setSuccess('')
|
||
setError('')
|
||
}
|
||
|
||
const handleDrawerToggle = () => {
|
||
meteEsMobilOuve(!esMobilOuve)
|
||
}
|
||
|
||
const container = typeof window === 'undefined' ? undefined : () => window.document.body
|
||
|
||
useEffect(() => {
|
||
if (error || success) {
|
||
setOpen(true)
|
||
}
|
||
}, [error, success, setOpen])
|
||
|
||
return (
|
||
<Root className={classes.root}>
|
||
<CssBaseline />
|
||
<AppBar position='fixed' className={classes.appBar}>
|
||
<Toolbar>
|
||
<IconButton
|
||
color='inherit'
|
||
aria-label='open drawer'
|
||
edge='start'
|
||
className={classes.menuButton}
|
||
size='large'
|
||
onClick={handleDrawerToggle}
|
||
>
|
||
<MenuIcon />
|
||
</IconButton>
|
||
{anTeks ? (
|
||
<>
|
||
<Link passHref href='/teks'>
|
||
<IconButton aria-label='return' size='medium'>
|
||
<KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
|
||
</IconButton>
|
||
</Link>
|
||
{anTeks.lyen && anTeks.lyen.length > 0 && (
|
||
<div className={classes.vwe}>
|
||
<VweKouteAchte niVideyo anTeks={anTeks} />
|
||
</div>
|
||
)}
|
||
{anTeks.kouteyAchtey && anTeks.kouteyAchtey.length > 0 && (
|
||
<div className={classes.koute}>
|
||
<VweKouteAchte niOdyo anTeks={anTeks} />
|
||
</div>
|
||
)}
|
||
</>
|
||
) : (
|
||
<Typography noWrap variant='h6'>
|
||
Dènyé Tèks
|
||
</Typography>
|
||
)}
|
||
</Toolbar>
|
||
</AppBar>
|
||
<nav className={classes.drawer} aria-label='mailbox folders'>
|
||
<Hidden smUp implementation='css'>
|
||
<Drawer
|
||
container={container}
|
||
variant='temporary'
|
||
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
|
||
open={esMobilOuve}
|
||
classes={{
|
||
paper: classes.drawerPaper
|
||
}}
|
||
ModalProps={{
|
||
keepMounted: true
|
||
}}
|
||
onClose={handleDrawerToggle}
|
||
>
|
||
<DrawerBar meteEsMobilOuve={meteEsMobilOuve} teks={teks} anTeks={anTeks} />
|
||
</Drawer>
|
||
</Hidden>
|
||
<Hidden smDown implementation='css'>
|
||
<Drawer
|
||
open
|
||
classes={{
|
||
paper: classes.drawerPaper
|
||
}}
|
||
variant='permanent'
|
||
>
|
||
<DrawerBar teks={teks} anTeks={anTeks} />
|
||
</Drawer>
|
||
</Hidden>
|
||
</nav>
|
||
<main className={classes.content}>
|
||
{anTeks ? (
|
||
<>
|
||
<div className={classes.pataje}>
|
||
<Pataje teks={anTeks} setError={setError} setSuccess={setSuccess} />
|
||
</div>
|
||
<Box sx={{textAlign: 'center', marginTop: 8}}>
|
||
<Typography style={{marginTop: '0.8em'}} variant='h4' display='block'>
|
||
<Typography gutterBottom variant='h6'>
|
||
{anTeks.awtis.map(a => a.alias).join(', ')}
|
||
</Typography>
|
||
<Typography variant='h5'>
|
||
{anTeks.tit}
|
||
{anTeks.eksplisit && (
|
||
<ExplicitTooltip
|
||
title='Explicit Lyrics'
|
||
placement='bottom'
|
||
TransitionComponent={Zoom}
|
||
classes={{
|
||
tooltip: classes.tooltip
|
||
}}
|
||
>
|
||
<ExplicitIcon style={{marginLeft: 10}} color='secondary' />
|
||
</ExplicitTooltip>
|
||
)}
|
||
</Typography>
|
||
<Grid container alignItems='center' justifyContent='center'>
|
||
{komante && (
|
||
<VweKomante komante={komante} teks={anTeks} />
|
||
)}
|
||
{session && (
|
||
<Dekoneksyon tooltipPlacement='bottom' />
|
||
)}
|
||
</Grid>
|
||
</Typography>
|
||
{anTeks.user && (
|
||
<Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
|
||
<i>texte soumis par {anTeks.user.username}</i>
|
||
</Typography>
|
||
)}
|
||
</Box>
|
||
{(anTeks.okiMizikID || anTeks.kouteyAchtey.length > 0) && (
|
||
<Box sx={{textAlign: 'center'}}>
|
||
<EntegreMizik anTeks={anTeks} isMobile={isMobile} />
|
||
</Box>
|
||
)}
|
||
{anTeks.okiMizikID && (
|
||
<OkiMizik id={anTeks.okiMizikID} />
|
||
)}
|
||
<Grid container justifyContent='start' spacing={1}>
|
||
<Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
|
||
<div className={classes.gridText}>
|
||
<Typography align='center' className={classes.text} variant='h4'>
|
||
Transcription
|
||
</Typography>
|
||
<Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
|
||
{formatJsonString(anTeks.transkripsyon)}
|
||
</Typography>
|
||
</div>
|
||
</Grid>
|
||
{langArray.map(({title, flag, lang}) => (
|
||
<Grid key={title} item xs={12} md={6}>
|
||
<div className={classes.gridText}>
|
||
<Typography align='center' className={classes.text} variant='h4'>
|
||
{flag === 'fr' && (
|
||
<span>
|
||
🇫🇷
|
||
</span>
|
||
)}
|
||
{flag === 'en' && (
|
||
<span>
|
||
🇬🇧
|
||
</span>
|
||
)}
|
||
{flag === 'es' && (
|
||
<span>
|
||
🇪🇸
|
||
</span>
|
||
)} {title}
|
||
</Typography>
|
||
<Typography paragraph align='justify' component='span'>
|
||
{formatJsonString(lang)}
|
||
</Typography>
|
||
</div>
|
||
</Grid>
|
||
))}
|
||
</Grid>
|
||
{success && (
|
||
<Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
|
||
<Alert severity='success' onClose={handleClose}>
|
||
<strong>{success}</strong>
|
||
</Alert>
|
||
</Snackbar>
|
||
)}
|
||
{error && (
|
||
<Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
|
||
<Alert severity='error' onClose={handleClose}>
|
||
<strong>Une erreur s’est produite</strong> : <i>{error.message}</i>
|
||
</Alert>
|
||
</Snackbar>
|
||
)}
|
||
</>
|
||
) : (
|
||
<DenyeTeks {...teks} />
|
||
)}
|
||
</main>
|
||
</Root>
|
||
)
|
||
}
|
||
|
||
TeksDrawer.propTypes = {
|
||
teks: PropTypes.array.isRequired,
|
||
anTeks: PropTypes.object,
|
||
komante: PropTypes.array
|
||
}
|
||
|
||
TeksDrawer.defaultProps = {
|
||
anTeks: null,
|
||
komante: null
|
||
}
|