ORGANISATION-KA-INTERNATIONALE/pawol.nu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change teks to parole

Browse Source
This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
2022-05-20 02:15:56 +04:00
parent b8be0ccd97
commit 2aa9e63e14
13 changed files with 158 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/awtis/mizik-badj-meni.js
+6 -6
View File
@@ -37,13 +37,13 @@ const Root = styled('div')((
} }
})) }))
const sortTeks = teks => teks.sort((a, b) => b.id - a.id) const sortTeks = paroles => paroles.sort((a, b) => b.id - a.id)
export default function MizikBadjMeni({teks}) { export default function MizikBadjMeni({paroles}) {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const anchorRef = useRef(null) const anchorRef = useRef(null)
const router = useRouter() const router = useRouter()
const sortedTeks = sortTeks(teks) const sortedTeks = sortTeks(paroles)
const handleToggle = () => { const handleToggle = () => {
setOpen(previousOpen_ => !previousOpen_) setOpen(previousOpen_ => !previousOpen_)
@@ -90,7 +90,7 @@ export default function MizikBadjMeni({teks}) {
vertical: 'top', vertical: 'top',
horizontal: 'right' horizontal: 'right'
}} }}
badgeContent={teks.length} badgeContent={paroles.length}
color='primary' color='primary'
> >
<MenuBookIcon style={{fontSize: 30}} /> <MenuBookIcon style={{fontSize: 30}} />
@@ -105,7 +105,7 @@ export default function MizikBadjMeni({teks}) {
<Paper> <Paper>
<ClickAwayListener onClickAway={handleClose}> <ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id='menu-list-grow' onKeyDown={() => handleListKeyDown()}> <MenuList autoFocusItem={open} id='menu-list-grow' onKeyDown={() => handleListKeyDown()}>
{sortedTeks.map(t => <MenuItem key={t.id} onClick={() => handleClick(t.slug)}>{t.tit}</MenuItem>)} {sortedTeks.map(({id, attributes}) => <MenuItem key={id} onClick={() => handleClick(attributes.slug)}>{attributes.titre}</MenuItem>)}
</MenuList> </MenuList>
</ClickAwayListener> </ClickAwayListener>
</Paper> </Paper>
@@ -117,5 +117,5 @@ export default function MizikBadjMeni({teks}) {
} }
MizikBadjMeni.propTypes = { MizikBadjMeni.propTypes = {
teks: PropTypes.array.isRequired paroles: PropTypes.array.isRequired
} }
components/awtis/mizik-lis.js
+11 -11
View File
@@ -27,7 +27,7 @@ const StyledList = styled(List)((
} }
})) }))
export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi, meteSlugTeksChwazi}) { export default function MizikLis({meteEsMobilOuve, niAwtis, paroles, slugTeksChwazi, meteSlugTeksChwazi}) {
const router = useRouter() const router = useRouter()
const handleClick = slug => { const handleClick = slug => {
@@ -50,22 +50,22 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
return ( return (
<StyledList component='nav' className={classes.root} aria-label='mizik'> <StyledList component='nav' className={classes.root} aria-label='mizik'>
{teks.map(({slug, tit, awtis, published_at, okiMizikID, eksplisit}) => ( {paroles.map(({id, attributes}) => (
<ListItem <ListItem
key={slug} key={id}
button button
id={slug} id={attributes.slug}
selected={slugTeksChwazi === slug} selected={slugTeksChwazi === attributes.slug}
onClick={() => handleClick(slug)} onClick={() => handleClick(attributes.slug)}
> >
<ListItemText primary={tit} secondary={niAwtis ? new Intl.ListFormat('fr').format(awtis.map(({alias}) => alias)) : null} /> <ListItemText primary={attributes.titre} secondary={niAwtis ? new Intl.ListFormat('fr').format(attributes.artistes.data.map(({attributes}) => attributes.alias)) : null} />
{eksplisit && ( {attributes.explicite && (
<ExplicitIcon style={{marginRight: 5}} color='secondary' /> <ExplicitIcon style={{marginRight: 5}} color='secondary' />
)} )}
{okiMizikID && ( {attributes.okiMizikID && (
<LibraryMusicIcon style={{fontSize: 40}} color='primary' /> <LibraryMusicIcon style={{fontSize: 40}} color='primary' />
)} )}
{esBrandNew(published_at) && ( {esBrandNew(attributes.publishedAt) && (
<FiberNewOutlinedIcon style={{fontSize: 40}} color='primary' /> <FiberNewOutlinedIcon style={{fontSize: 40}} color='primary' />
)} )}
</ListItem> </ListItem>
@@ -77,7 +77,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
MizikLis.propTypes = { MizikLis.propTypes = {
meteEsMobilOuve: PropTypes.func, meteEsMobilOuve: PropTypes.func,
niAwtis: PropTypes.bool, niAwtis: PropTypes.bool,
teks: PropTypes.array.isRequired, paroles: PropTypes.array.isRequired,
slugTeksChwazi: PropTypes.string, slugTeksChwazi: PropTypes.string,
meteSlugTeksChwazi: PropTypes.func meteSlugTeksChwazi: PropTypes.func
} }
components/teks/denye-teks.js
+1 -1
View File
@@ -30,7 +30,7 @@ export default function DenyeTeks({denyeTeks}) {
</Container> </Container>
)} )}
<Grid container spacing={3}> <Grid container spacing={3}>
{denyeTeks.map(t => <TeksKat key={t.id} teks={t} />)} {denyeTeks.map(t => <TeksKat key={t.id} parole={t} />)}
</Grid> </Grid>
</Container> </Container>
</Root> </Root>
components/teks/drawer-bar.js
+13 -13
View File
@@ -44,15 +44,15 @@ const Root = styled('div')((
} }
})) }))
const getMizikFiltered = (teks, filter) => { const getMizikFiltered = (paroles, filter) => {
if (teks) { if (paroles) {
const filteredTitre = teks.filter(({tit}) => { const filteredTitre = paroles.filter(({attributes}) => {
const deburredTit = deburr(tit) const deburredTit = deburr(attributes.titre)
return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase())) return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase()))
}) })
const filteredAlias = teks.filter(({awtis}) => { const filteredAlias = paroles.filter(({attributes}) => {
const aliasLis = awtis.map(({alias}) => deburr(alias)).join(', ') const aliasLis = attributes.artistes.data.map(({attributes}) => deburr(attributes.alias)).join(', ')
return aliasLis.toLowerCase().includes(deburr(filter.toLowerCase())) return aliasLis.toLowerCase().includes(deburr(filter.toLowerCase()))
}) })
@@ -60,13 +60,13 @@ const getMizikFiltered = (teks, filter) => {
} }
} }
export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) { export default function DrawerBar({meteEsMobilOuve, paroles, parole}) {
const slug = anTeks ? anTeks.slug : null const slug = parole ? parole.slug : null
const [search, setSearch] = useState('') const [search, setSearch] = useState('')
const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug) const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
const mizikFiltered = getMizikFiltered(teks, search) const mizikFiltered = getMizikFiltered(paroles, search)
const handleSearch = event => { const handleSearch = event => {
event.preventDefault() event.preventDefault()
@@ -94,7 +94,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
<MizikLis <MizikLis
niAwtis niAwtis
meteEsMobilOuve={meteEsMobilOuve} meteEsMobilOuve={meteEsMobilOuve}
teks={mizikFiltered} paroles={mizikFiltered}
slugTeksChwazi={slugTeksChwazi} slugTeksChwazi={slugTeksChwazi}
meteSlugTeksChwazi={meteSlugTeksChwazi} meteSlugTeksChwazi={meteSlugTeksChwazi}
/> />
@@ -105,11 +105,11 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
DrawerBar.propTypes = { DrawerBar.propTypes = {
meteEsMobilOuve: PropTypes.func, meteEsMobilOuve: PropTypes.func,
teks: PropTypes.array.isRequired, paroles: PropTypes.array.isRequired,
anTeks: PropTypes.object parole: PropTypes.object
} }
DrawerBar.defaultProps = { DrawerBar.defaultProps = {
meteEsMobilOuve: null, meteEsMobilOuve: null,
anTeks: null parole: null
} }
components/teks/lekte.js
+10 -10
View File
@@ -14,7 +14,7 @@ import Image from 'next/image'
import {grey} from '@mui/material/colors' import {grey} from '@mui/material/colors'
import {Link} from '@mui/material' import {Link} from '@mui/material'
const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337' const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const Widget = styled('div')(({theme}) => ({ const Widget = styled('div')(({theme}) => ({
padding: 16, padding: 16,
@@ -49,7 +49,7 @@ const TinyText = styled(Typography)({
letterSpacing: 0.2, letterSpacing: 0.2,
}) })
export default function Lekte({audio, url, teks}) { export default function Lekte({audio, url, parole}) {
const audioRef = useRef(new Audio(audio)) const audioRef = useRef(new Audio(audio))
const intervalRef = useRef() const intervalRef = useRef()
const isReady = useRef(false) const isReady = useRef(false)
@@ -58,7 +58,7 @@ export default function Lekte({audio, url, teks}) {
const [position, setPosition] = useState(0) const [position, setPosition] = useState(0)
const [volume, setVolume] = useState(100) const [volume, setVolume] = useState(100)
const [isPlaying, setIsPlaying] = useState(false) const [isPlaying, setIsPlaying] = useState(false)
const awtis = teks.awtis.map(({alias}) => alias) const awtis = parole.artistes.data.map(({attributes}) => attributes.alias)
function formatDuration(value) { function formatDuration(value) {
const minute = Math.floor(value / 60) const minute = Math.floor(value / 60)
@@ -139,10 +139,10 @@ export default function Lekte({audio, url, teks}) {
<Box sx={{display: 'flex', alignItems: 'center'}}> <Box sx={{display: 'flex', alignItems: 'center'}}>
<CoverImage> <CoverImage>
<Image <Image
alt={teks.tit} alt={parole.titre}
src={teks?.kouveti?.formats?.thumbnail ? `${apiUrl}${teks.kouveti.formats.thumbnail.url}` : '/oki-logo-192x192.png'} src={parole?.couverture?.data?.attributes?.formats?.thumbnail ? `${IMAGE_URL}${parole.couverture.data.attributes.formats.thumbnail.url}` : '/oki-logo-192x192.png'}
width={teks?.kouveti?.formats?.thumbnail ? teks.kouveti.formats.thumbnail.width : 192} width={parole?.kouveti?.data?.attributes?.formats?.thumbnail ? parole.couverture.data.attributes.formats.thumbnail.width : 192}
height={teks?.kouveti?.formats?.thumbnail ? teks.kouveti.formats.thumbnail.height : 192} height={parole?.kouveti?.data?.attributes?.formats?.thumbnail ? parole.couverture.data.attributes.formats.thumbnail.height : 192}
/> />
</CoverImage> </CoverImage>
<Box sx={{ml: 1.5, minWidth: 0}}> <Box sx={{ml: 1.5, minWidth: 0}}>
@@ -151,11 +151,11 @@ export default function Lekte({audio, url, teks}) {
</Typography> </Typography>
<Typography> <Typography>
<Link underline='hover' sx={{cursor: 'pointer'}} target='_blank' rel='noreferrer' href={url}> <Link underline='hover' sx={{cursor: 'pointer'}} target='_blank' rel='noreferrer' href={url}>
<strong>{teks.tit}</strong> <strong>{parole.titre}</strong>
</Link> </Link>
</Typography> </Typography>
<Typography variant='caption'> <Typography variant='caption'>
<i>{teks.lanne}</i> <i>{parole.annee}</i>
</Typography> </Typography>
</Box> </Box>
</Box> </Box>
@@ -263,5 +263,5 @@ export default function Lekte({audio, url, teks}) {
Lekte.propTypes = { Lekte.propTypes = {
audio: PropTypes.string.isRequired, audio: PropTypes.string.isRequired,
url: PropTypes.string.isRequired, url: PropTypes.string.isRequired,
teks: PropTypes.object.isRequired parole: PropTypes.object.isRequired
} }
components/teks/oki-mizik.js
+3 -3
View File
@@ -11,18 +11,18 @@ const DinamikLekte = dynamic(
{ssr: false, loading: () => <CircularProgress sx={{color: '#29d'}} />} {ssr: false, loading: () => <CircularProgress sx={{color: '#29d'}} />}
) )
export default function OkiMizik({id, teks}) { export default function OkiMizik({id, parole}) {
const mizikStreamUrl = `${MIZIK_URL}/rest/stream?u=${MIZIK_API_USER}&p=${MIZIK_API_PASSWORD}&id=${id}` const mizikStreamUrl = `${MIZIK_URL}/rest/stream?u=${MIZIK_API_USER}&p=${MIZIK_API_PASSWORD}&id=${id}`
const detailsUrl = `${MIZIK_URL}/library/tracks/${id}` const detailsUrl = `${MIZIK_URL}/library/tracks/${id}`
return ( return (
<Box style={{marginTop: '0.3em', display: 'flex', flexDirection: 'column', alignItems: 'center'}}> <Box style={{marginTop: '0.3em', display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<DinamikLekte audio={mizikStreamUrl} url={detailsUrl} teks={teks} /> <DinamikLekte audio={mizikStreamUrl} url={detailsUrl} parole={parole} />
</Box> </Box>
) )
} }
OkiMizik.propTypes = { OkiMizik.propTypes = {
id: PropTypes.number.isRequired, id: PropTypes.number.isRequired,
teks: PropTypes.object.isRequired parole: PropTypes.object.isRequired
} }
components/teks/pataje.js
+5 -5
View File
@@ -43,15 +43,15 @@ const actions = [
{icon: <FileCopyIcon />, name: 'Copier le lien', code: 'copy'} {icon: <FileCopyIcon />, name: 'Copier le lien', code: 'copy'}
] ]
export default function Pataje({teks, setError, setSuccess}) { export default function Pataje({parole, setError, setSuccess}) {
const {tit, awtis, slug} = teks const {titre, artistes, slug} = parole
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const patajeUrl = `${SITE_URL}/paroles/${slug}` const patajeUrl = `${SITE_URL}/paroles/${slug}`
const alias = awtis.map(({alias}) => alias) const alias = artistes.data.map(({attributes}) => attributes.alias)
const renderAwtis = new Intl.ListFormat('fr').format(alias) const renderAwtis = new Intl.ListFormat('fr').format(alias)
const text = teks.user || teks.userAdmin ? `${renderAwtis} - ${tit} (Paroles et Traductions) - (texte soumis par ${teks?.user?.username || teks.userAdmin})` : `${renderAwtis} - ${tit} (Paroles et Traductions)` const text = parole.user || parole.userAdmin ? `${renderAwtis} - ${titre} (Paroles et Traductions) - (texte soumis par ${parole?.user?.username || parole.userAdmin})` : `${renderAwtis} - ${parole} (Paroles et Traductions)`
const handleClose = () => { const handleClose = () => {
setOpen(false) setOpen(false)
@@ -123,7 +123,7 @@ export default function Pataje({teks, setError, setSuccess}) {
} }
Pataje.propTypes = { Pataje.propTypes = {
teks: PropTypes.object.isRequired, parole: PropTypes.object.isRequired,
setError: PropTypes.func.isRequired, setError: PropTypes.func.isRequired,
setSuccess: PropTypes.func.isRequired setSuccess: PropTypes.func.isRequired
} }
components/teks/teks-drawer.js
+19 -16
View File
@@ -117,7 +117,7 @@ const Root = styled('div')((
const drawerWidth = 240 const drawerWidth = 240
export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) { export default function TeksDrawer({paroles, parole, paroleId, commentaires, denyeTeks}) {
const theme = useTheme() const theme = useTheme()
const [esMobilOuve, meteEsMobilOuve] = useState(false) const [esMobilOuve, meteEsMobilOuve] = useState(false)
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
@@ -161,21 +161,21 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
> >
<MenuIcon /> <MenuIcon />
</IconButton> </IconButton>
{anTeks ? ( {parole ? (
<> <>
<Link passHref href='/paroles'> <Link passHref href='/paroles'>
<IconButton aria-label='return' size='medium'> <IconButton aria-label='return' size='medium'>
<KeyboardBackspaceIcon style={{fontSize: '1.5em'}} /> <KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
</IconButton> </IconButton>
</Link> </Link>
{anTeks.lyen && anTeks.lyen.length > 0 && ( {parole.streamVideo && parole.streamVideo.length > 0 && (
<div className={classes.vwe}> <div className={classes.vwe}>
<VweKouteAchte niVideyo anTeks={anTeks} /> <VweKouteAchte niVideyo parole={parole} />
</div> </div>
)} )}
{anTeks.kouteyAchtey && anTeks.kouteyAchtey.length > 0 && ( {parole.streamVideo && parole.streamVideo.length > 0 && (
<div className={classes.koute}> <div className={classes.koute}>
<VweKouteAchte niOdyo anTeks={anTeks} /> <VweKouteAchte niOdyo parole={parole} />
</div> </div>
)} )}
</> </>
@@ -201,7 +201,7 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
}} }}
onClose={handleDrawerToggle} onClose={handleDrawerToggle}
> >
<DrawerBar meteEsMobilOuve={meteEsMobilOuve} teks={teks} anTeks={anTeks} /> <DrawerBar meteEsMobilOuve={meteEsMobilOuve} paroles={paroles} parole={parole} />
</Drawer> </Drawer>
</Hidden> </Hidden>
<Hidden smDown implementation='css'> <Hidden smDown implementation='css'>
@@ -212,15 +212,16 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
}} }}
variant='permanent' variant='permanent'
> >
<DrawerBar teks={teks} anTeks={anTeks} /> <DrawerBar paroles={paroles} parole={parole} />
</Drawer> </Drawer>
</Hidden> </Hidden>
</nav> </nav>
<main className={classes.content}> <main className={classes.content}>
{anTeks ? ( {parole ? (
<Teks <Teks
anTeks={anTeks} parole={parole}
komante={komante} paroleId={paroleId}
commentaires={commentaires}
open={open} open={open}
success={success} success={success}
error={error} error={error}
@@ -239,14 +240,16 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
} }
TeksDrawer.propTypes = { TeksDrawer.propTypes = {
teks: PropTypes.array.isRequired, paroles: PropTypes.array.isRequired,
anTeks: PropTypes.object, parole: PropTypes.object,
komante: PropTypes.array, paroleId: PropTypes.number,
commentaires: PropTypes.array,
denyeTeks: PropTypes.array denyeTeks: PropTypes.array
} }
TeksDrawer.defaultProps = { TeksDrawer.defaultProps = {
anTeks: null, parole: null,
komante: null, paroleId: null,
commentaires: null,
denyeTeks: null denyeTeks: null
} }
components/teks/teks-kat.js
+10 -10
View File
@@ -31,11 +31,11 @@ const StyledGrid = styled(Grid)({
} }
}) })
const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj' const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
export default function TeksKat({teks}) { export default function TeksKat({parole}) {
const router = useRouter() const router = useRouter()
const {attributes} = teks const {attributes} = parole
const {titre, artistes, annee, couverture, publishedAt, slug} = attributes const {titre, artistes, annee, couverture, publishedAt, slug} = attributes
const datPiblikasyon = format(new Date(publishedAt), 'P', {locale: fr}) const datPiblikasyon = format(new Date(publishedAt), 'P', {locale: fr})
@@ -53,25 +53,25 @@ export default function TeksKat({teks}) {
className={classes.media} className={classes.media}
component='img' component='img'
alt={titre} alt={titre}
image={couverture ? `${IMAGE_URL}${couverture.data.attributes.url}` : noImageUrl} image={couverture?.data?.attributes?.url ? `${IMAGE_URL}${couverture.data.attributes.url}` : noImageUrl}
title={titre} title={titre}
/> />
<CardContent> <CardContent>
<Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'> <Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
{titre} {titre}
</Typography> </Typography>
{teks.eksplisit && ( {parole.eksplisit && (
<ExplicitIcon style={{marginRight: 5}} color='secondary' fontSize='small' /> <ExplicitIcon style={{marginRight: 5}} color='secondary' fontSize='small' />
)} )}
<Typography variant='caption'> <Typography variant='caption'>
{teks.user && ( {parole.user && (
<> <>
(<i>texte soumis par {teks.user.username}</i>) (<i>texte soumis par {parole.user.username}</i>)
</> </>
)} )}
{teks.userAdmin && !teks.user && ( {parole.userAdmin && !parole.user && (
<> <>
(<i>texte soumis par {teks.userAdmin}</i>) (<i>texte soumis par {parole.userAdmin}</i>)
</> </>
)} )}
</Typography> </Typography>
@@ -92,5 +92,5 @@ export default function TeksKat({teks}) {
} }
TeksKat.propTypes = { TeksKat.propTypes = {
teks: PropTypes.object.isRequired parole: PropTypes.object.isRequired
} }
components/teks/teks.js
+30 -29
View File
@@ -66,30 +66,30 @@ const Root = styled('div')((
} }
})) }))
const langToArray = anTeks => { const langToArray = parole => {
const langArray = [] const langArray = []
if (anTeks && anTeks.tradiksyon) { if (parole && parole.traductions) {
const {francais, english, espagnol, deutsch, italiano} = anTeks.tradiksyon const {francais, anglais, espagnol, allemand, italien} = parole.traductions
if (francais) { if (francais) {
langArray.push({title: 'Traduction', flag: 'fr', lang: francais}) langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
} }
if (english) { if (anglais) {
langArray.push({title: 'Translation', flag: 'en', lang: english}) langArray.push({title: 'Translation', flag: 'en', lang: anglais})
} }
if (espagnol) { if (espagnol) {
langArray.push({title: 'Traducción', flag: 'es', lang: espagnol}) langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
} }
if (deutsch) { if (allemand) {
langArray.push({title: 'Übersetzung', flag: 'de', lang: deutsch}) langArray.push({title: 'Übersetzung', flag: 'de', lang: allemand})
} }
if (italiano) { if (italien) {
langArray.push({title: 'Traduzione', flag: 'it', lang: italiano}) langArray.push({title: 'Traduzione', flag: 'it', lang: italien})
} }
} }
@@ -120,15 +120,15 @@ const Alert = forwardRef(function Alert(props, ref) {
const ExplicitTooltip = Tooltip const ExplicitTooltip = Tooltip
export default function Teks({anTeks, komante, open, success, error, setSuccess, setError, handleClose}) { export default function Teks({parole, paroleId, commentaires, open, success, error, setSuccess, setError, handleClose}) {
const isMobile = useMediaQuery('(max-width:800px)') const isMobile = useMediaQuery('(max-width:800px)')
const langArray = langToArray(anTeks) const langArray = langToArray(parole)
const awtis = anTeks.awtis.map(({alias}) => alias) const awtis = parole.artistes.data.map(({attributes}) => attributes.alias)
return ( return (
<Root> <Root>
<div className={classes.pataje}> <div className={classes.pataje}>
<Pataje teks={anTeks} setError={setError} setSuccess={setSuccess} /> <Pataje parole={parole} setError={setError} setSuccess={setSuccess} />
</div> </div>
<Box sx={{textAlign: 'center', marginTop: 9}}> <Box sx={{textAlign: 'center', marginTop: 9}}>
<Typography style={{marginTop: '0.8em'}} variant='h4' component='div' display='block'> <Typography style={{marginTop: '0.8em'}} variant='h4' component='div' display='block'>
@@ -136,8 +136,8 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
{new Intl.ListFormat('fr').format(awtis)} {new Intl.ListFormat('fr').format(awtis)}
</Typography> </Typography>
<Typography variant='h5' component='div'> <Typography variant='h5' component='div'>
{anTeks.tit} <small>({anTeks?.lanne})</small> {parole.titre} <small>({parole?.annee})</small>
{anTeks.eksplisit && ( {parole.explicite && (
<ExplicitTooltip <ExplicitTooltip
title='Explicit Lyrics' title='Explicit Lyrics'
placement='bottom' placement='bottom'
@@ -151,29 +151,29 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
)} )}
</Typography> </Typography>
<Grid container alignItems='center' justifyContent='center'> <Grid container alignItems='center' justifyContent='center'>
{komante && ( {commentaires && (
<VweKomante komante={komante} teks={anTeks} /> <VweKomante commentaires={commentaires} parole={parole} paroleId={paroleId} />
)} )}
</Grid> </Grid>
</Typography> </Typography>
{anTeks.user && ( {parole?.user?.data && (
<Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'> <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
<i>texte soumis par {anTeks.user.username}</i> <i>texte soumis par {parole.user.data.attributes.username}</i>
</Typography> </Typography>
)} )}
{anTeks.userAdmin && !anTeks.user && ( {parole.userAdmin && !parole.user && (
<Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'> <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
<i>texte soumis par {anTeks.userAdmin}</i> <i>texte soumis par {parole.userAdmin}</i>
</Typography> </Typography>
)} )}
</Box> </Box>
{(anTeks.okiMizikID || anTeks.kouteyAchtey.length > 0) && ( {(parole.okiMizikID || parole.streamAudio.length > 0) && (
<Box sx={{textAlign: 'center'}}> <Box sx={{textAlign: 'center'}}>
<EntegreMizik anTeks={anTeks} isMobile={isMobile} /> <EntegreMizik parole={parole} isMobile={isMobile} />
</Box> </Box>
)} )}
{anTeks.okiMizikID && ( {parole.okiMizikID && (
<OkiMizik id={anTeks.okiMizikID} teks={anTeks} /> <OkiMizik id={parole.okiMizikID} parole={parole} />
)} )}
<Grid container justifyContent='start' spacing={1}> <Grid container justifyContent='start' spacing={1}>
<Grid item xs={12} md={langArray.length > 0 ? 6 : null}> <Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
@@ -182,7 +182,7 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
Transcription Transcription
</Typography> </Typography>
<Typography paragraph align={alignTeks(langArray, isMobile)} component='span'> <Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
{formatJsonString(anTeks.transkripsyon)} {formatJsonString(parole.transcription)}
</Typography> </Typography>
</div> </div>
</Grid> </Grid>
@@ -242,8 +242,9 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
} }
Teks.propTypes = { Teks.propTypes = {
anTeks: PropTypes.object.isRequired, parole: PropTypes.object.isRequired,
komante: PropTypes.array, paroleId: PropTypes.number.isRequired,
commentaires: PropTypes.array,
open: PropTypes.bool.isRequired, open: PropTypes.bool.isRequired,
success: PropTypes.string, success: PropTypes.string,
error: PropTypes.string, error: PropTypes.string,
@@ -253,7 +254,7 @@ Teks.propTypes = {
} }
Teks.defaultProps = { Teks.defaultProps = {
komante: null, commentaires: null,
success: '', success: '',
error: '' error: ''
} }
components/teks/vwe-koute-achte.js
+10 -10
View File
@@ -49,22 +49,22 @@ const vweyIcons = {
Dailymotion: <Dailymotion />, Dailymotion: <Dailymotion />,
Lbry: <Lbry />, Lbry: <Lbry />,
Rumble: <PlayCircleFilledIcon />, Rumble: <PlayCircleFilledIcon />,
Peertube: <Peertube /> Gadé: <Peertube />
} }
export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) { export default function VweKouteAchte({parole, niVideyo, niOdyo}) {
const [ouve, meteOuve] = useState(false) const [ouve, meteOuve] = useState(false)
const {kouteyAchtey, lyen} = anTeks const {streamAudio, streamVideo} = parole
const kouteyAchteyActions = kouteyAchtey.map(({boutik, url}) => ({ const kouteyAchteyActions = streamAudio.map(({plateforme, url}) => ({
icon: kouteyAchteyIcons[boutik], icon: kouteyAchteyIcons[plateforme],
name: boutik, name: plateforme,
link: url link: url
})) }))
const vweyActions = lyen.map(({url, sit}) => ({ const vweyActions = streamVideo.map(({plateforme, url}) => ({
icon: vweyIcons[sit], icon: vweyIcons[plateforme],
name: sit, name: plateforme,
link: url link: url
})) }))
@@ -115,7 +115,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
} }
VweKouteAchte.propTypes = { VweKouteAchte.propTypes = {
anTeks: PropTypes.object.isRequired, parole: PropTypes.object.isRequired,
niVideyo: PropTypes.bool, niVideyo: PropTypes.bool,
niOdyo: PropTypes.bool niOdyo: PropTypes.bool
} }
pages/paroles/[slug].js
+33 -32
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import {jwennTeksEpiSlug, jwennTeks, jwennKomanteEpiTeksId} from '../../lib/oki-api' import {jwennTeks, jwennKomanteEpiTeksId} from '../../lib/oki-api'
import TeksDrawer from '../../components/teks/teks-drawer' import TeksDrawer from '../../components/teks/teks-drawer'
import HeadLayout from '../../components/head-layout' import HeadLayout from '../../components/head-layout'
@@ -8,41 +8,41 @@ import HeadLayout from '../../components/head-layout'
import Custom500 from '../500' import Custom500 from '../500'
import Custom404 from '../404' import Custom404 from '../404'
const jwennAwtis = awtis => { const jwennAwtis = artiste => {
const alias = awtis.map(({alias}) => alias) const alias = artiste.data.map(({attributes}) => attributes.alias)
return new Intl.ListFormat('fr').format(alias) return new Intl.ListFormat('fr').format(alias)
} }
export default function SlugTeks({hasError, errorMessage, teks, anTeks, slug, komante}) { export default function SlugTeks({hasError, errorMessage, paroles, parole, slug, commentaires}) {
if (hasError) { if (hasError) {
console.log('⚠️ error :', errorMessage) console.log('⚠️ error :', errorMessage)
return <Custom500 /> return <Custom500 />
} }
if (!anTeks) { if (!parole) {
return <Custom404 /> return <Custom404 />
} }
const awtis = anTeks.awtis.length === 1 ? anTeks.awtis[0].alias : jwennAwtis(anTeks.awtis) const artistes = parole.attributes.artistes.length === 1 ? parole.attributes.artistes[0].data.attributes.alias : jwennAwtis(parole.attributes.artistes)
const {kouveti} = anTeks const {couverture} = parole.attributes
const formatKouveti = () => { const formatKouveti = () => {
if (!kouveti) { if (!couverture) {
return null return null
} }
if (kouveti && kouveti.formats && kouveti.formats.large) { if (couverture && couverture.formats && couverture.formats.large) {
return kouveti.formats.large return couverture.formats.large
} }
if (kouveti && kouveti.formats && kouveti.formats.medium) { if (couverture && couverture.formats && couverture.formats.medium) {
return kouveti.formats.medium return couverture.formats.medium
} }
if (kouveti && kouveti.formats && kouveti.formats.small) { if (couverture && couverture.formats && couverture.formats.small) {
return kouveti.formats.small return couverture.formats.small
} }
return kouveti return couverture
} }
return ( return (
@@ -51,25 +51,26 @@ export default function SlugTeks({hasError, errorMessage, teks, anTeks, slug, ko
imageWidth={formatKouveti() ? formatKouveti().width : null} imageWidth={formatKouveti() ? formatKouveti().width : null}
imageHeight={formatKouveti() ? formatKouveti().height : null} imageHeight={formatKouveti() ? formatKouveti().height : null}
imageMime={formatKouveti() ? formatKouveti().mime : null} imageMime={formatKouveti() ? formatKouveti().mime : null}
title={`${awtis} - ${anTeks.tit} | Paroles et Traductions`} tab={1} slug={`paroles/${slug}`} title={`${artistes} - ${parole.attributes.titre} | Paroles et Traductions`} tab={1} slug={`paroles/${slug}`}
> >
<TeksDrawer teks={teks} anTeks={anTeks} komante={komante} /> <TeksDrawer paroles={paroles} parole={parole.attributes} paroleId={parole.id} commentaires={commentaires} />
</HeadLayout> </HeadLayout>
) )
} }
export async function getServerSideProps({query}) { export async function getServerSideProps({query}) {
const {slug} = query const {slug} = query
let teks let paroles
let anTeks let parole
let hasError let hasError
let errorMessage let errorMessage
let komante let commentaires
try { try {
teks = await jwennTeks() paroles = await jwennTeks()
anTeks = await jwennTeksEpiSlug(slug) parole = paroles.find(({attributes}) => attributes.slug === slug)
komante = await jwennKomanteEpiTeksId(anTeks?.id) commentaires = paroles.map(({attributes}) => attributes.commentaires)
commentaires = await jwennKomanteEpiTeksId(parole?.id)
} catch (error) { } catch (error) {
errorMessage = error errorMessage = error
hasError = true hasError = true
@@ -79,10 +80,10 @@ export async function getServerSideProps({query}) {
props: { props: {
hasError: hasError || null, hasError: hasError || null,
errorMessage: errorMessage ? errorMessage.message : null, errorMessage: errorMessage ? errorMessage.message : null,
teks: teks || null, paroles: paroles || null,
anTeks: anTeks || null, parole: parole || null,
slug, slug,
komante: komante || null commentaires: commentaires || null
} }
} }
} }
@@ -90,16 +91,16 @@ export async function getServerSideProps({query}) {
SlugTeks.defaultProps = { SlugTeks.defaultProps = {
hasError: null, hasError: null,
errorMessage: null, errorMessage: null,
teks: null, paroles: null,
anTeks: null, parole: null,
komante: null commentaires: null
} }
SlugTeks.propTypes = { SlugTeks.propTypes = {
hasError: PropTypes.bool, hasError: PropTypes.bool,
errorMessage: PropTypes.string, errorMessage: PropTypes.string,
teks: PropTypes.array, paroles: PropTypes.array,
anTeks: PropTypes.object, parole: PropTypes.object,
slug: PropTypes.string.isRequired, slug: PropTypes.string.isRequired,
komante: PropTypes.array commentaires: PropTypes.array
} }
pages/paroles/index.js
+7 -7
View File
@@ -7,7 +7,7 @@ import HeadLayout from '../../components/head-layout'
import Custom500 from '../500' import Custom500 from '../500'
export default function Teks({errorCode, errorMessage, teks, denyeTeks}) { export default function Teks({errorCode, errorMessage, paroles, denyeTeks}) {
if (errorCode) { if (errorCode) {
console.log('⚠️ error', errorMessage) console.log('⚠️ error', errorMessage)
return <Custom500 /> return <Custom500 />
@@ -15,19 +15,19 @@ export default function Teks({errorCode, errorMessage, teks, denyeTeks}) {
return ( return (
<HeadLayout title='Paroles et Traductions' tab={1} slug='paroles'> <HeadLayout title='Paroles et Traductions' tab={1} slug='paroles'>
<TeksDrawer teks={teks} denyeTeks={denyeTeks} /> <TeksDrawer paroles={paroles} denyeTeks={denyeTeks} />
</HeadLayout> </HeadLayout>
) )
} }
export async function getServerSideProps() { export async function getServerSideProps() {
let teks let paroles
let denyeTeks let denyeTeks
let hasError let hasError
let errorMessage let errorMessage
try { try {
teks = await jwennTeks() paroles = await jwennTeks()
denyeTeks = await jwennDenyeTeks() denyeTeks = await jwennDenyeTeks()
} catch (error) { } catch (error) {
errorMessage = error.message errorMessage = error.message
@@ -38,7 +38,7 @@ export async function getServerSideProps() {
props: { props: {
errorCode: hasError || null, errorCode: hasError || null,
errorMessage: errorMessage || null, errorMessage: errorMessage || null,
teks: teks || null, paroles: paroles || null,
denyeTeks: denyeTeks || null denyeTeks: denyeTeks || null
} }
} }
@@ -47,13 +47,13 @@ export async function getServerSideProps() {
Teks.defaultProps = { Teks.defaultProps = {
errorCode: null, errorCode: null,
errorMessage: null, errorMessage: null,
teks: null, paroles: null,
denyeTeks: null denyeTeks: null
} }
Teks.propTypes = { Teks.propTypes = {
errorCode: PropTypes.bool, errorCode: PropTypes.bool,
errorMessage: PropTypes.string, errorMessage: PropTypes.string,
teks: PropTypes.array, paroles: PropTypes.array,
denyeTeks: PropTypes.array denyeTeks: PropTypes.array
} }