Create Teks component and use it in TeksDraw
This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
@@ -0,0 +1,241 @@
|
||||
import {forwardRef} from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import {
|
||||
Box,
|
||||
Grid,
|
||||
Snackbar,
|
||||
Typography,
|
||||
Tooltip,
|
||||
Zoom,
|
||||
useMediaQuery
|
||||
} from '@mui/material'
|
||||
import {styled} from '@mui/material/styles'
|
||||
import MuiAlert from '@mui/material/Alert'
|
||||
import ExplicitIcon from '@mui/icons-material/Explicit'
|
||||
import {useSession} from 'next-auth/client'
|
||||
|
||||
import {formatJsonString} from '../../lib/utils/format'
|
||||
|
||||
import VweKomante from '../komante/vwe-komante'
|
||||
import Dekoneksyon from '../sesyon/dekoneksyon'
|
||||
|
||||
import EntegreMizik from './entegre-mizik'
|
||||
import OkiMizik from './oki-mizik'
|
||||
import Pataje from './pataje'
|
||||
|
||||
const PREFIX = 'teks'
|
||||
|
||||
const classes = {
|
||||
root: `${PREFIX}-root`,
|
||||
tooltip: `${PREFIX}-tooltip`,
|
||||
text: `${PREFIX}-text`,
|
||||
gridText: `${PREFIX}-gridText`,
|
||||
grid: `${PREFIX}-grid`,
|
||||
koute: `${PREFIX}-koute`,
|
||||
vwe: `${PREFIX}-vwe`,
|
||||
pataje: `${PREFIX}-pataje`
|
||||
}
|
||||
|
||||
const Root = styled('div')((
|
||||
{
|
||||
theme
|
||||
}
|
||||
) => ({
|
||||
[`& .${classes.text}`]: {
|
||||
marginBottom: '0.5em'
|
||||
},
|
||||
|
||||
[`& .${classes.gridText}`]: {
|
||||
border: '2px solid grey',
|
||||
borderRadius: '5px',
|
||||
marginTop: '2em',
|
||||
padding: '1em'
|
||||
},
|
||||
|
||||
[`& .${classes.grid}`]: {
|
||||
marginTop: '1em'
|
||||
},
|
||||
|
||||
[`& .${classes.pataje}`]: {
|
||||
position: 'fixed',
|
||||
top: '59px',
|
||||
left: '110px',
|
||||
zIndex: 2,
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
top: '62px',
|
||||
left: '340px'
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
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 Alert = forwardRef(function Alert(props, ref) {
|
||||
return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
|
||||
})
|
||||
|
||||
const ExplicitTooltip = Tooltip
|
||||
|
||||
export default function Teks({anTeks, komante, open, success, error, setSuccess, setError, handleClose}) {
|
||||
const isMobile = useMediaQuery('(max-width:800px)')
|
||||
const [session] = useSession()
|
||||
const langArray = langToArray(anTeks)
|
||||
|
||||
return (
|
||||
<Root>
|
||||
<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>
|
||||
)}
|
||||
</Root>
|
||||
)
|
||||
}
|
||||
|
||||
Teks.propTypes = {
|
||||
anTeks: PropTypes.object.isRequired,
|
||||
komante: PropTypes.array,
|
||||
open: PropTypes.bool.isRequired,
|
||||
success: PropTypes.string,
|
||||
error: PropTypes.string,
|
||||
setSuccess: PropTypes.func.isRequired,
|
||||
setError: PropTypes.func.isRequired,
|
||||
handleClose: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
Teks.defaultProps = {
|
||||
komante: null,
|
||||
success: '',
|
||||
error: ''
|
||||
}
|
||||
Reference in New Issue
Block a user