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/teks/denye-teks.js
+1 -1
View File
@@ -30,7 +30,7 @@ export default function DenyeTeks({denyeTeks}) {
</Container>
)}
<Grid container spacing={3}>
{denyeTeks.map(t => <TeksKat key={t.id} teks={t} />)}
{denyeTeks.map(t => <TeksKat key={t.id} parole={t} />)}
</Grid>
</Container>
</Root>
components/teks/drawer-bar.js
+13 -13
View File
@@ -44,15 +44,15 @@ const Root = styled('div')((
}
}))
const getMizikFiltered = (teks, filter) => {
if (teks) {
const filteredTitre = teks.filter(({tit}) => {
const deburredTit = deburr(tit)
const getMizikFiltered = (paroles, filter) => {
if (paroles) {
const filteredTitre = paroles.filter(({attributes}) => {
const deburredTit = deburr(attributes.titre)
return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase()))
})
const filteredAlias = teks.filter(({awtis}) => {
const aliasLis = awtis.map(({alias}) => deburr(alias)).join(', ')
const filteredAlias = paroles.filter(({attributes}) => {
const aliasLis = attributes.artistes.data.map(({attributes}) => deburr(attributes.alias)).join(', ')
return aliasLis.toLowerCase().includes(deburr(filter.toLowerCase()))
})
@@ -60,13 +60,13 @@ const getMizikFiltered = (teks, filter) => {
}
}
export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
const slug = anTeks ? anTeks.slug : null
export default function DrawerBar({meteEsMobilOuve, paroles, parole}) {
const slug = parole ? parole.slug : null
const [search, setSearch] = useState('')
const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
const mizikFiltered = getMizikFiltered(teks, search)
const mizikFiltered = getMizikFiltered(paroles, search)
const handleSearch = event => {
event.preventDefault()
@@ -94,7 +94,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
<MizikLis
niAwtis
meteEsMobilOuve={meteEsMobilOuve}
teks={mizikFiltered}
paroles={mizikFiltered}
slugTeksChwazi={slugTeksChwazi}
meteSlugTeksChwazi={meteSlugTeksChwazi}
/>
@@ -105,11 +105,11 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
DrawerBar.propTypes = {
meteEsMobilOuve: PropTypes.func,
teks: PropTypes.array.isRequired,
anTeks: PropTypes.object
paroles: PropTypes.array.isRequired,
parole: PropTypes.object
}
DrawerBar.defaultProps = {
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 {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}) => ({
padding: 16,
@@ -49,7 +49,7 @@ const TinyText = styled(Typography)({
letterSpacing: 0.2,
})
export default function Lekte({audio, url, teks}) {
export default function Lekte({audio, url, parole}) {
const audioRef = useRef(new Audio(audio))
const intervalRef = useRef()
const isReady = useRef(false)
@@ -58,7 +58,7 @@ export default function Lekte({audio, url, teks}) {
const [position, setPosition] = useState(0)
const [volume, setVolume] = useState(100)
const [isPlaying, setIsPlaying] = useState(false)
const awtis = teks.awtis.map(({alias}) => alias)
const awtis = parole.artistes.data.map(({attributes}) => attributes.alias)
function formatDuration(value) {
const minute = Math.floor(value / 60)
@@ -139,10 +139,10 @@ export default function Lekte({audio, url, teks}) {
<Box sx={{display: 'flex', alignItems: 'center'}}>
<CoverImage>
<Image
alt={teks.tit}
src={teks?.kouveti?.formats?.thumbnail ? `${apiUrl}${teks.kouveti.formats.thumbnail.url}` : '/oki-logo-192x192.png'}
width={teks?.kouveti?.formats?.thumbnail ? teks.kouveti.formats.thumbnail.width : 192}
height={teks?.kouveti?.formats?.thumbnail ? teks.kouveti.formats.thumbnail.height : 192}
alt={parole.titre}
src={parole?.couverture?.data?.attributes?.formats?.thumbnail ? `${IMAGE_URL}${parole.couverture.data.attributes.formats.thumbnail.url}` : '/oki-logo-192x192.png'}
width={parole?.kouveti?.data?.attributes?.formats?.thumbnail ? parole.couverture.data.attributes.formats.thumbnail.width : 192}
height={parole?.kouveti?.data?.attributes?.formats?.thumbnail ? parole.couverture.data.attributes.formats.thumbnail.height : 192}
/>
</CoverImage>
<Box sx={{ml: 1.5, minWidth: 0}}>
@@ -151,11 +151,11 @@ export default function Lekte({audio, url, teks}) {
</Typography>
<Typography>
<Link underline='hover' sx={{cursor: 'pointer'}} target='_blank' rel='noreferrer' href={url}>
<strong>{teks.tit}</strong>
<strong>{parole.titre}</strong>
</Link>
</Typography>
<Typography variant='caption'>
<i>{teks.lanne}</i>
<i>{parole.annee}</i>
</Typography>
</Box>
</Box>
@@ -263,5 +263,5 @@ export default function Lekte({audio, url, teks}) {
Lekte.propTypes = {
audio: 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'}} />}
)
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 detailsUrl = `${MIZIK_URL}/library/tracks/${id}`
return (
<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>
)
}
OkiMizik.propTypes = {
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'}
]
export default function Pataje({teks, setError, setSuccess}) {
const {tit, awtis, slug} = teks
export default function Pataje({parole, setError, setSuccess}) {
const {titre, artistes, slug} = parole
const [open, setOpen] = useState(false)
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 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 = () => {
setOpen(false)
@@ -123,7 +123,7 @@ export default function Pataje({teks, setError, setSuccess}) {
}
Pataje.propTypes = {
teks: PropTypes.object.isRequired,
parole: PropTypes.object.isRequired,
setError: 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
export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
export default function TeksDrawer({paroles, parole, paroleId, commentaires, denyeTeks}) {
const theme = useTheme()
const [esMobilOuve, meteEsMobilOuve] = useState(false)
const [open, setOpen] = useState(false)
@@ -161,21 +161,21 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
>
<MenuIcon />
</IconButton>
{anTeks ? (
{parole ? (
<>
<Link passHref href='/paroles'>
<IconButton aria-label='return' size='medium'>
<KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
</IconButton>
</Link>
{anTeks.lyen && anTeks.lyen.length > 0 && (
{parole.streamVideo && parole.streamVideo.length > 0 && (
<div className={classes.vwe}>
<VweKouteAchte niVideyo anTeks={anTeks} />
<VweKouteAchte niVideyo parole={parole} />
</div>
)}
{anTeks.kouteyAchtey && anTeks.kouteyAchtey.length > 0 && (
{parole.streamVideo && parole.streamVideo.length > 0 && (
<div className={classes.koute}>
<VweKouteAchte niOdyo anTeks={anTeks} />
<VweKouteAchte niOdyo parole={parole} />
</div>
)}
</>
@@ -201,7 +201,7 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
}}
onClose={handleDrawerToggle}
>
<DrawerBar meteEsMobilOuve={meteEsMobilOuve} teks={teks} anTeks={anTeks} />
<DrawerBar meteEsMobilOuve={meteEsMobilOuve} paroles={paroles} parole={parole} />
</Drawer>
</Hidden>
<Hidden smDown implementation='css'>
@@ -212,15 +212,16 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
}}
variant='permanent'
>
<DrawerBar teks={teks} anTeks={anTeks} />
<DrawerBar paroles={paroles} parole={parole} />
</Drawer>
</Hidden>
</nav>
<main className={classes.content}>
{anTeks ? (
{parole ? (
<Teks
anTeks={anTeks}
komante={komante}
parole={parole}
paroleId={paroleId}
commentaires={commentaires}
open={open}
success={success}
error={error}
@@ -239,14 +240,16 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
}
TeksDrawer.propTypes = {
teks: PropTypes.array.isRequired,
anTeks: PropTypes.object,
komante: PropTypes.array,
paroles: PropTypes.array.isRequired,
parole: PropTypes.object,
paroleId: PropTypes.number,
commentaires: PropTypes.array,
denyeTeks: PropTypes.array
}
TeksDrawer.defaultProps = {
anTeks: null,
komante: null,
parole: null,
paroleId: null,
commentaires: 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 {attributes} = teks
const {attributes} = parole
const {titre, artistes, annee, couverture, publishedAt, slug} = attributes
const datPiblikasyon = format(new Date(publishedAt), 'P', {locale: fr})
@@ -53,25 +53,25 @@ export default function TeksKat({teks}) {
className={classes.media}
component='img'
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}
/>
<CardContent>
<Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
{titre}
</Typography>
{teks.eksplisit && (
{parole.eksplisit && (
<ExplicitIcon style={{marginRight: 5}} color='secondary' fontSize='small' />
)}
<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>
@@ -92,5 +92,5 @@ export default function TeksKat({teks}) {
}
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 = []
if (anTeks && anTeks.tradiksyon) {
const {francais, english, espagnol, deutsch, italiano} = anTeks.tradiksyon
if (parole && parole.traductions) {
const {francais, anglais, espagnol, allemand, italien} = parole.traductions
if (francais) {
langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
}
if (english) {
langArray.push({title: 'Translation', flag: 'en', lang: english})
if (anglais) {
langArray.push({title: 'Translation', flag: 'en', lang: anglais})
}
if (espagnol) {
langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
}
if (deutsch) {
langArray.push({title: 'Übersetzung', flag: 'de', lang: deutsch})
if (allemand) {
langArray.push({title: 'Übersetzung', flag: 'de', lang: allemand})
}
if (italiano) {
langArray.push({title: 'Traduzione', flag: 'it', lang: italiano})
if (italien) {
langArray.push({title: 'Traduzione', flag: 'it', lang: italien})
}
}
@@ -120,15 +120,15 @@ const Alert = forwardRef(function Alert(props, ref) {
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 langArray = langToArray(anTeks)
const awtis = anTeks.awtis.map(({alias}) => alias)
const langArray = langToArray(parole)
const awtis = parole.artistes.data.map(({attributes}) => attributes.alias)
return (
<Root>
<div className={classes.pataje}>
<Pataje teks={anTeks} setError={setError} setSuccess={setSuccess} />
<Pataje parole={parole} setError={setError} setSuccess={setSuccess} />
</div>
<Box sx={{textAlign: 'center', marginTop: 9}}>
<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)}
</Typography>
<Typography variant='h5' component='div'>
{anTeks.tit} <small>({anTeks?.lanne})</small>
{anTeks.eksplisit && (
{parole.titre} <small>({parole?.annee})</small>
{parole.explicite && (
<ExplicitTooltip
title='Explicit Lyrics'
placement='bottom'
@@ -151,29 +151,29 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
)}
</Typography>
<Grid container alignItems='center' justifyContent='center'>
{komante && (
<VweKomante komante={komante} teks={anTeks} />
{commentaires && (
<VweKomante commentaires={commentaires} parole={parole} paroleId={paroleId} />
)}
</Grid>
</Typography>
{anTeks.user && (
{parole?.user?.data && (
<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>
)}
{anTeks.userAdmin && !anTeks.user && (
{parole.userAdmin && !parole.user && (
<Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
<i>texte soumis par {anTeks.userAdmin}</i>
<i>texte soumis par {parole.userAdmin}</i>
</Typography>
)}
</Box>
{(anTeks.okiMizikID || anTeks.kouteyAchtey.length > 0) && (
{(parole.okiMizikID || parole.streamAudio.length > 0) && (
<Box sx={{textAlign: 'center'}}>
<EntegreMizik anTeks={anTeks} isMobile={isMobile} />
<EntegreMizik parole={parole} isMobile={isMobile} />
</Box>
)}
{anTeks.okiMizikID && (
<OkiMizik id={anTeks.okiMizikID} teks={anTeks} />
{parole.okiMizikID && (
<OkiMizik id={parole.okiMizikID} parole={parole} />
)}
<Grid container justifyContent='start' spacing={1}>
<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
</Typography>
<Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
{formatJsonString(anTeks.transkripsyon)}
{formatJsonString(parole.transcription)}
</Typography>
</div>
</Grid>
@@ -242,8 +242,9 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
}
Teks.propTypes = {
anTeks: PropTypes.object.isRequired,
komante: PropTypes.array,
parole: PropTypes.object.isRequired,
paroleId: PropTypes.number.isRequired,
commentaires: PropTypes.array,
open: PropTypes.bool.isRequired,
success: PropTypes.string,
error: PropTypes.string,
@@ -253,7 +254,7 @@ Teks.propTypes = {
}
Teks.defaultProps = {
komante: null,
commentaires: null,
success: '',
error: ''
}
components/teks/vwe-koute-achte.js
+10 -10
View File
@@ -49,22 +49,22 @@ const vweyIcons = {
Dailymotion: <Dailymotion />,
Lbry: <Lbry />,
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 {kouteyAchtey, lyen} = anTeks
const {streamAudio, streamVideo} = parole
const kouteyAchteyActions = kouteyAchtey.map(({boutik, url}) => ({
icon: kouteyAchteyIcons[boutik],
name: boutik,
const kouteyAchteyActions = streamAudio.map(({plateforme, url}) => ({
icon: kouteyAchteyIcons[plateforme],
name: plateforme,
link: url
}))
const vweyActions = lyen.map(({url, sit}) => ({
icon: vweyIcons[sit],
name: sit,
const vweyActions = streamVideo.map(({plateforme, url}) => ({
icon: vweyIcons[plateforme],
name: plateforme,
link: url
}))
@@ -115,7 +115,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
}
VweKouteAchte.propTypes = {
anTeks: PropTypes.object.isRequired,
parole: PropTypes.object.isRequired,
niVideyo: PropTypes.bool,
niOdyo: PropTypes.bool
}