Cédric FAMIBELLE-PRONZOLA
393 lines
11 KiB
JavaScript
393 lines
11 KiB
JavaScript
import {useEffect, useState} from 'react'
|
||
import PropTypes from 'prop-types'
|
||
import Link from 'next/link'
|
||
import {useRouter} from 'next/router'
|
||
import {useSession} from 'next-auth/client'
|
||
|
||
import {
|
||
Grid,
|
||
Toolbar,
|
||
Typography,
|
||
AppBar,
|
||
CssBaseline,
|
||
Drawer,
|
||
Hidden,
|
||
IconButton,
|
||
Box,
|
||
useMediaQuery,
|
||
Snackbar,
|
||
Tooltip,
|
||
Zoom,
|
||
withStyles
|
||
} from '@material-ui/core'
|
||
|
||
import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
|
||
import ExplicitIcon from '@material-ui/icons/Explicit'
|
||
|
||
import MenuIcon from '@material-ui/icons/Menu'
|
||
|
||
import {makeStyles, useTheme} from '@material-ui/core/styles'
|
||
|
||
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'
|
||
|
||
import MuiAlert from '@material-ui/lab/Alert'
|
||
|
||
function Alert(props) {
|
||
return <MuiAlert elevation={6} variant='filled' {...props} />
|
||
}
|
||
|
||
const drawerWidth = 240
|
||
|
||
const useStyles = makeStyles(theme => ({
|
||
root: {
|
||
display: 'flex'
|
||
},
|
||
drawer: {
|
||
marginTop: '10em',
|
||
[theme.breakpoints.up('sm')]: {
|
||
width: drawerWidth,
|
||
flexShrink: 0
|
||
}
|
||
},
|
||
appBar: {
|
||
borderTop: '2px solid #303030',
|
||
marginTop: '4.71rem',
|
||
[theme.breakpoints.up('sm')]: {
|
||
width: `calc(100% - ${drawerWidth}px)`,
|
||
marginLeft: drawerWidth
|
||
},
|
||
zIndex: 1
|
||
},
|
||
menuButton: {
|
||
[theme.breakpoints.up('sm')]: {
|
||
display: 'none'
|
||
}
|
||
},
|
||
toolbar: theme.mixins.toolbar,
|
||
drawerPaper: {
|
||
borderTop: '2px solid #303030',
|
||
marginTop: '4.71rem',
|
||
width: drawerWidth
|
||
},
|
||
content: {
|
||
flexGrow: 1,
|
||
padding: theme.spacing(3)
|
||
},
|
||
list: {
|
||
marginBottom: '6em'
|
||
},
|
||
form: {
|
||
marginLeft: theme.spacing(1)
|
||
},
|
||
text: {
|
||
marginBottom: '0.5em'
|
||
},
|
||
gridText: {
|
||
border: '2px solid grey',
|
||
borderRadius: '5px',
|
||
marginTop: '2em',
|
||
padding: '1em'
|
||
},
|
||
grid: {
|
||
marginTop: '1em'
|
||
},
|
||
koute: {
|
||
position: 'absolute',
|
||
right: '40px',
|
||
top: '8px',
|
||
[theme.breakpoints.up('sm')]: {
|
||
top: '10px'
|
||
}
|
||
},
|
||
vwe: {
|
||
position: 'absolute',
|
||
right: '90px',
|
||
top: '8px',
|
||
[theme.breakpoints.up('sm')]: {
|
||
top: '10px'
|
||
}
|
||
},
|
||
pataje: {
|
||
position: 'fixed',
|
||
top: '85px',
|
||
left: '110px',
|
||
zIndex: 2,
|
||
[theme.breakpoints.up('sm')]: {
|
||
top: '88px',
|
||
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 ExplicitTooltip = withStyles(() => ({
|
||
tooltip: {
|
||
fontSize: 18,
|
||
fontWeight: 'bold',
|
||
backgroundColor: 'rgba(245, 0, 87, 0.8)'
|
||
}
|
||
}))(Tooltip)
|
||
|
||
export default function TeksDrawer({teks, anTeks, komante}) {
|
||
const [session] = useSession()
|
||
const router = useRouter()
|
||
|
||
const isMobile = useMediaQuery('(max-width:800px)')
|
||
const langArray = langToArray(anTeks)
|
||
const classes = useStyles()
|
||
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 (
|
||
<div className={classes.root}>
|
||
<CssBaseline />
|
||
<AppBar position='fixed' className={classes.appBar}>
|
||
<Toolbar>
|
||
<IconButton
|
||
color='inherit'
|
||
aria-label='open drawer'
|
||
edge='start'
|
||
className={classes.menuButton}
|
||
onClick={handleDrawerToggle}
|
||
>
|
||
<MenuIcon />
|
||
</IconButton>
|
||
{anTeks ? (
|
||
<>
|
||
<Link 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 xsDown 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 align='center'>
|
||
<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}>
|
||
<ExplicitIcon style={{marginLeft: 10}} color='secondary' />
|
||
</ExplicitTooltip>
|
||
)}
|
||
</Typography>
|
||
{komante && (
|
||
<VweKomante komante={komante} teks={anTeks} />
|
||
)}
|
||
{session && (
|
||
<Dekoneksyon chimen={router.asPath} tooltipPlacement='bottom' />
|
||
)}
|
||
</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) && (
|
||
<EntegreMizik anTeks={anTeks} isMobile={isMobile} />
|
||
)}
|
||
{anTeks.okiMizikID && (
|
||
<OkiMizik id={anTeks.okiMizikID} />
|
||
)}
|
||
<Grid container justify='center' 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>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
TeksDrawer.propTypes = {
|
||
teks: PropTypes.array.isRequired,
|
||
anTeks: PropTypes.object,
|
||
komante: PropTypes.array
|
||
}
|
||
|
||
TeksDrawer.defaultProps = {
|
||
anTeks: null,
|
||
komante: null
|
||
}
|