From 454eefbe58895ff5c2e4166f8cbf1de8b79f885b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Sat, 4 Jul 2026 14:34:50 +0400 Subject: [PATCH] fix: corriger toutes les erreurs de lint restantes (263 -> 0) --- app/awtis/[slug]/page.js | 4 +-- app/awtis/page.js | 2 +- app/layout.js | 2 +- app/page.js | 3 +-- app/paroles/[slug]/page.js | 8 +++--- app/paroles/layout.js | 5 ++++ app/robots.js | 2 +- app/sipote/page.js | 2 +- app/theme-registy.js | 14 +++++----- components/akey/an-vedette.js | 4 +-- components/akey/index.js | 11 +------- components/awtis/awtis-detay.js | 19 +++++++------- components/awtis/awtis-kat.js | 3 +-- components/awtis/cheche-awtis.js | 33 +++++++++++------------ components/awtis/social-buttons.js | 42 ++++++++++++++++++------------ components/cc/license-modal.js | 4 +-- components/files/files-list.js | 35 ++++++++++++++++++------- components/files/kits-dialog.js | 4 +-- components/navigasyon.js | 5 ++-- components/soutyen/presantasyon.js | 2 -- components/streaming-buttons.js | 24 +++++++++++------ components/teks/drawer-bar.js | 2 +- components/teks/karaoke-modal.js | 34 ++++++++++++++---------- components/teks/lekte.js | 18 +++++++++---- components/teks/teks-kat.js | 2 +- components/teks/teks.js | 12 ++++----- components/top-loader.js | 5 ++++ eslint.config.mjs | 28 ++++++++++---------- lib/kuveti.js | 16 ++++++++---- lib/oki-api.js | 5 ++-- lib/rezo-lis.js | 4 --- next.config.js | 13 ++++++--- vitest.setup.js | 2 +- 33 files changed, 210 insertions(+), 159 deletions(-) diff --git a/app/awtis/[slug]/page.js b/app/awtis/[slug]/page.js index 8df33d5..dc9a08d 100644 --- a/app/awtis/[slug]/page.js +++ b/app/awtis/[slug]/page.js @@ -20,7 +20,7 @@ async function jwennAwtis(slug) { } export async function generateMetadata(props) { - const params = await props.params; + const params = await props.params const {slug} = params const anAwtis = await jwennAwtis(slug) @@ -64,7 +64,7 @@ export async function generateMetadata(props) { } export default async function AwtisPajSlug(props) { - const params = await props.params; + const params = await props.params const {slug} = params const anAwtis = await jwennAwtis(slug) diff --git a/app/awtis/page.js b/app/awtis/page.js index be22ea7..4fb29e1 100644 --- a/app/awtis/page.js +++ b/app/awtis/page.js @@ -63,7 +63,7 @@ async function jwennDone(paj) { } export default async function AwitsPaj(props) { - const searchParams = await props.searchParams; + const searchParams = await props.searchParams const {paj} = searchParams const {pajTotal, awtisPouChakPaj, pajParsed} = await jwennDone(paj || 1) diff --git a/app/layout.js b/app/layout.js index 34a017d..8dcd484 100644 --- a/app/layout.js +++ b/app/layout.js @@ -78,7 +78,7 @@ export default async function RootLayout({children}) { ) return ( - + {plausibleUrl ? {inner} diff --git a/app/page.js b/app/page.js index 7592a11..ce8c101 100644 --- a/app/page.js +++ b/app/page.js @@ -7,7 +7,6 @@ import Statistik from '../components/akey/statistik' import Akey from '../components/akey' import AnVedette from '../components/akey/an-vedette' -import okiLogo from '../public/logo-512x512.png' import Footer from '../components/footer' import Aso from '../components/akey/aso' @@ -26,7 +25,7 @@ export default async function Page() { return ( - + {dernierTeks && } diff --git a/app/paroles/[slug]/page.js b/app/paroles/[slug]/page.js index 9cb901b..2c58daa 100644 --- a/app/paroles/[slug]/page.js +++ b/app/paroles/[slug]/page.js @@ -21,10 +21,10 @@ async function jwennAnTeks(slug) { } export async function generateMetadata(props) { - const params = await props.params; + const params = await props.params const {slug} = params - const anTeks = await jwennAnTeks(slug) + const anTeks = await jwennAnTeks(slug) const awtis = anTeks?.artistes?.length === 1 ? anTeks?.artistes[0].alias : getAlias(anTeks.artistes, anTeks.prioriteArtistes) const title = `PAWÒL-NU | ${awtis} - ${anTeks.titre}` @@ -67,12 +67,12 @@ export async function generateMetadata(props) { } export default async function AnPawolPaj(props) { - const params = await props.params; + const params = await props.params const {slug} = params const anTeks = await jwennAnTeks(slug) const {couverture} = anTeks - const teksKuvetiFormat = formatKuveti(couverture) + const teksKuvetiFormat = formatKuveti(couverture) const jsonLd = { '@context': 'http://schema.org', diff --git a/app/paroles/layout.js b/app/paroles/layout.js index 63eccfa..ad89736 100644 --- a/app/paroles/layout.js +++ b/app/paroles/layout.js @@ -1,4 +1,5 @@ import {Suspense} from 'react' +import PropTypes from 'prop-types' import TeksDrawerLoader from '../../components/teks/teks-drawer-loader' import {CurrentTrackProvider} from '../../components/teks/current-track-context' import Loading from './loading' @@ -50,3 +51,7 @@ export default function PawolLayout({children}) { ) } + +PawolLayout.propTypes = { + children: PropTypes.node.isRequired +} diff --git a/app/robots.js b/app/robots.js index 8519f3a..a029cae 100644 --- a/app/robots.js +++ b/app/robots.js @@ -1,5 +1,5 @@ export default function robots() { - const isProduction = process.env.NODE_ENV === 'production'; + const isProduction = process.env.NODE_ENV === 'production' if (!isProduction) { return { diff --git a/app/sipote/page.js b/app/sipote/page.js index 427436f..a427aec 100644 --- a/app/sipote/page.js +++ b/app/sipote/page.js @@ -14,7 +14,7 @@ export default function Sipote() { - + Soutenir ORGANISATION KA INTERNATIONALE ! diff --git a/app/theme-registy.js b/app/theme-registy.js index 3730a86..323a247 100644 --- a/app/theme-registy.js +++ b/app/theme-registy.js @@ -69,13 +69,13 @@ export default function ThemeRegistry(props) { return ( <> - - - - - {children} - - + + + + + {children} + + ) } diff --git a/components/akey/an-vedette.js b/components/akey/an-vedette.js index cd4b0d3..ae33d75 100644 --- a/components/akey/an-vedette.js +++ b/components/akey/an-vedette.js @@ -36,10 +36,10 @@ export default function AnVedette({teks}) { {fmt?.url ? ( {titre} @@ -25,7 +20,3 @@ export default function Akey({logo}) { ) } - -Akey.propTypes = { - logo: PropTypes.object.isRequired -} diff --git a/components/awtis/awtis-detay.js b/components/awtis/awtis-detay.js index 83f89e1..ab4a419 100644 --- a/components/awtis/awtis-detay.js +++ b/components/awtis/awtis-detay.js @@ -72,7 +72,8 @@ export default function AwtisDetay({anAwtis}) { position: 'relative', flexShrink: 0, mb: 2, - }}> + }} + > {photoUrl ? ( 0 && ( - {rezoSosyal.map((rezo, i) => ( - + {rezoSosyal.map(rezo => ( + ))} )} @@ -149,9 +150,9 @@ export default function AwtisDetay({anAwtis}) { {titrePhare.titre} - + {titrePhare.titre} @@ -172,8 +173,8 @@ export default function AwtisDetay({anAwtis}) { Écouter sur - {titrePhare.streamAudio.map((lyen, i) => ( - + {titrePhare.streamAudio.map(lyen => ( + ))} @@ -202,7 +203,7 @@ export default function AwtisDetay({anAwtis}) { })} - ) : paroles.length === 0 ? ( + ) : (paroles.length === 0 ? ( Aucune parole pour le moment @@ -213,7 +214,7 @@ export default function AwtisDetay({anAwtis}) { - )} + ))} diff --git a/components/awtis/awtis-kat.js b/components/awtis/awtis-kat.js index c508c8c..889335d 100644 --- a/components/awtis/awtis-kat.js +++ b/components/awtis/awtis-kat.js @@ -19,7 +19,6 @@ import {formatKuveti} from '../../lib/kuveti' import AwtisBiyografi from './awtis-biyografi' const PREFIX = 'awtis-kat' -const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001' const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337' const EXCLUSIVE_LABEL = process.env.NEXT_PUBLIC_EXCLUSIVE_ARTIST_LABEL || 'OKI Exclusif' @@ -84,7 +83,7 @@ export default function AwtisKat({artiste}) { component='img' alt={alias} image={`${photo?.url ? `${IMAGE_URL}${formatKuveti(photo, 'thumbnail')?.url}` : noImageUrl}`} - loading='lazy' + loading='lazy' title={alias} /> diff --git a/components/awtis/cheche-awtis.js b/components/awtis/cheche-awtis.js index 36125cf..5cdad9a 100644 --- a/components/awtis/cheche-awtis.js +++ b/components/awtis/cheche-awtis.js @@ -5,7 +5,6 @@ import {useRouter} from 'next/navigation' import TextField from '@mui/material/TextField' import Autocomplete from '@mui/material/Autocomplete' import Avatar from '@mui/material/Avatar' -import CircularProgress from '@mui/material/CircularProgress' import Container from '@mui/material/Container' import {jwennToutAwtis} from '../../lib/oki-api' @@ -29,7 +28,7 @@ export default function ChecheAwtis() { (async () => { try { const {data} = await jwennToutAwtis() - + const filteredData = data.map(artiste => { const firstLetter = artiste.alias[0].toUpperCase() return { @@ -50,15 +49,13 @@ export default function ChecheAwtis() { } }, [loading]) - const sortedOptions = useMemo(() => { - return [...options].sort((a, b) => - -b.firstLetter.localeCompare(a.firstLetter) - ); - }, [options]); + const sortedOptions = useMemo(() => [...options].sort((a, b) => + -b.firstLetter.localeCompare(a.firstLetter) + ), [options]) return ( option?.firstLetter} - getOptionLabel={(option) => option?.alias} - renderOption={(props, option) => { - const {key, ...rest} = props; + groupBy={option => option?.firstLetter} + getOptionLabel={option => option?.alias} + renderOption={(optionProps, option) => { + const {key, ...rest} = optionProps return (
  • {option?.alias}
    • - ); + ) }} - sx={{ width: 300 }} - renderInput={(params) => ( + sx={{width: 300}} + renderInput={params => ( )} onChange={(event, newValue) => { - router.push(`/awtis/${newValue.slug}`); + router.push(`/awtis/${newValue.slug}`) }} onOpen={() => setOpen(true)} onClose={() => setOpen(false)} diff --git a/components/awtis/social-buttons.js b/components/awtis/social-buttons.js index e9ffcd3..dac2588 100644 --- a/components/awtis/social-buttons.js +++ b/components/awtis/social-buttons.js @@ -1,5 +1,6 @@ 'use client' +import PropTypes from 'prop-types' import Chip from '@mui/material/Chip' import IconButton from '@mui/material/IconButton' import Tooltip from '@mui/material/Tooltip' @@ -11,23 +12,23 @@ import { } from '@icons-pack/react-simple-icons' const SOCIAL_CONFIG = { - Mastodon: {label: 'Mastodon', bg: '#6364FF', color: '#fff', Icon: Mastodon}, - Peertube: {label: 'PeerTube', bg: '#F2690D', color: '#fff', Icon: Peertube}, - Pixelfed: {label: 'Pixelfed', bg: '#11D49D', color: '#fff', Icon: null}, - Funkwhale: {label: 'Funkwhale', bg: '#E01B60', color: '#fff', Icon: null}, - Bluesky: {label: 'Bluesky', bg: '#0085FF', color: '#fff', Icon: null}, - Instagram: {label: 'Instagram', bg: '#E4405F', color: '#fff', Icon: Instagram}, - Youtube: {label: 'YouTube', bg: '#FF0000', color: '#fff', Icon: Youtube}, - Tiktok: {label: 'TikTok', bg: '#000000', color: '#fff', Icon: Tiktok}, - Spotify: {label: 'Spotify', bg: '#1DB954', color: '#fff', Icon: Spotify}, - Deezer: {label: 'Deezer', bg: '#EF5466', color: '#fff', Icon: Deezer}, + Mastodon: {label: 'Mastodon', bg: '#6364FF', color: '#fff', Icon: Mastodon}, + Peertube: {label: 'PeerTube', bg: '#F2690D', color: '#fff', Icon: Peertube}, + Pixelfed: {label: 'Pixelfed', bg: '#11D49D', color: '#fff', Icon: null}, + Funkwhale: {label: 'Funkwhale', bg: '#E01B60', color: '#fff', Icon: null}, + Bluesky: {label: 'Bluesky', bg: '#0085FF', color: '#fff', Icon: null}, + Instagram: {label: 'Instagram', bg: '#E4405F', color: '#fff', Icon: Instagram}, + Youtube: {label: 'YouTube', bg: '#FF0000', color: '#fff', Icon: Youtube}, + Tiktok: {label: 'TikTok', bg: '#000000', color: '#fff', Icon: Tiktok}, + Spotify: {label: 'Spotify', bg: '#1DB954', color: '#fff', Icon: Spotify}, + Deezer: {label: 'Deezer', bg: '#EF5466', color: '#fff', Icon: Deezer}, Applemusic: {label: 'Apple Music', bg: '#FC3C44', color: '#fff', Icon: Applemusic}, - Bandcamp: {label: 'Bandcamp', bg: '#1DA0C3', color: '#fff', Icon: Bandcamp}, - Soundcloud: {label: 'SoundCloud', bg: '#FF5500', color: '#fff', Icon: Soundcloud}, - Facebook: {label: 'Facebook', bg: '#1877F2', color: '#fff', Icon: Facebook}, - Twitter: {label: 'X / Twitter', bg: '#000000', color: '#fff', Icon: Twitter}, - Linktree: {label: 'Linktree', bg: '#43E660', color: '#000', Icon: null}, - SiteWeb: {label: 'Site web', bg: '#555555', color: '#fff', Icon: null}, + Bandcamp: {label: 'Bandcamp', bg: '#1DA0C3', color: '#fff', Icon: Bandcamp}, + Soundcloud: {label: 'SoundCloud', bg: '#FF5500', color: '#fff', Icon: Soundcloud}, + Facebook: {label: 'Facebook', bg: '#1877F2', color: '#fff', Icon: Facebook}, + Twitter: {label: 'X / Twitter', bg: '#000000', color: '#fff', Icon: Twitter}, + Linktree: {label: 'Linktree', bg: '#43E660', color: '#000', Icon: null}, + SiteWeb: {label: 'Site web', bg: '#555555', color: '#fff', Icon: null}, } export function SocialButton({rezo}) { @@ -59,15 +60,22 @@ export function SocialButton({rezo}) { return ( ) } + +SocialButton.propTypes = { + rezo: PropTypes.shape({ + plateforme: PropTypes.string.isRequired, + url: PropTypes.string.isRequired + }).isRequired +} diff --git a/components/cc/license-modal.js b/components/cc/license-modal.js index ecb2d6f..1b65503 100644 --- a/components/cc/license-modal.js +++ b/components/cc/license-modal.js @@ -57,7 +57,7 @@ export default function LicenseModal({license, sourceOriginale, remixes}) { {sourceOriginale && ( - + Basé sur @@ -76,7 +76,7 @@ export default function LicenseModal({license, sourceOriginale, remixes}) { )} {remixes && ( - + Déclinaisons {remixes.map(remix => ( diff --git a/components/files/files-list.js b/components/files/files-list.js index a1410ab..6fa63fc 100644 --- a/components/files/files-list.js +++ b/components/files/files-list.js @@ -70,12 +70,14 @@ export default function FilesList({files}) { useEffect(() => { const audioFiles = files.filter(f => f.mime.startsWith('audio')) - if (audioFiles.length === 0) return + if (audioFiles.length === 0) { + return + } let cancelled = false async function fetchAllMeta() { - const mm = await import('music-metadata-browser') + const mm = await import('music-metadata-browser') // eslint-disable-line node/no-unsupported-features/es-syntax const results = {} await Promise.all( audioFiles.map(async file => { @@ -98,7 +100,9 @@ export default function FilesList({files}) { } }) ) - if (!cancelled) setAudioMeta(results) + if (!cancelled) { + setAudioMeta(results) + } } fetchAllMeta() @@ -121,7 +125,8 @@ export default function FilesList({files}) { fontWeight: 'bold', letterSpacing: '0.05rem', textTransform: 'uppercase', - }}>{isHaute ? 'Haute' : 'Faible'} + }} + >{isHaute ? 'Haute' : 'Faible'} ) } @@ -150,12 +155,16 @@ export default function FilesList({files}) { } useEffect(() => () => { - Object.values(controllersRef.current).forEach(c => c.abort()) + for (const c of Object.values(controllersRef.current)) { + c.abort() + } }, []) const handleClick = async (e, url, fileName, fileId) => { e.stopPropagation() - if (fileId in downloading) return + if (fileId in downloading) { + return + } const controller = new AbortController() controllersRef.current[fileId] = controller @@ -163,14 +172,18 @@ export default function FilesList({files}) { setDownloading(prev => ({...prev, [fileId]: 0})) try { const response = await fetch(url, {signal: controller.signal}) - const contentLength = +response.headers.get('content-length') + const contentLength = Number(response.headers.get('content-length')) const reader = response.body.getReader() const chunks = [] let received = 0 - while (true) { + for (;;) { + // eslint-disable-next-line no-await-in-loop -- chaque chunk dépend du précédent, la lecture est intrinsèquement séquentielle const {done, value} = await reader.read() - if (done) break + if (done) { + break + } + chunks.push(value) received += value.length if (contentLength) { @@ -186,7 +199,9 @@ export default function FilesList({files}) { a.click() URL.revokeObjectURL(blobUrl) } catch (error) { - if (error.name !== 'AbortError') throw error + if (error.name !== 'AbortError') { + throw error + } } finally { delete controllersRef.current[fileId] setDownloading(prev => { diff --git a/components/files/kits-dialog.js b/components/files/kits-dialog.js index 78964b2..8d6ab21 100644 --- a/components/files/kits-dialog.js +++ b/components/files/kits-dialog.js @@ -48,10 +48,10 @@ export default function KitsDialog({kits}) { Télécharger un kit - {kits.map((kit, index) => { + {kits.map(kit => { const PlatformIcon = PLATFORM_ICON[kit.plateforme] ?? CloudDownloadIcon return ( - + diff --git a/components/navigasyon.js b/components/navigasyon.js index 55ff968..0f19bda 100644 --- a/components/navigasyon.js +++ b/components/navigasyon.js @@ -70,7 +70,8 @@ export default function Navigasyon() {
    - {selectedTab !== undefined && } aria-label='Paroles' {...a11yProps(2)} /> } aria-label='Artistes' {...a11yProps(3)} /> - } + )}
    diff --git a/components/soutyen/presantasyon.js b/components/soutyen/presantasyon.js index c23238f..d324a0f 100644 --- a/components/soutyen/presantasyon.js +++ b/components/soutyen/presantasyon.js @@ -4,8 +4,6 @@ import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt' import CGUDialog from '../cgu/cgu-dialog' -const CGU_PDF_LINK = process.env.NEXT_PUBLIC_CGU_DOWNLOAD_LINK - export default function Presantasyon() { const [open, setOpen] = useState(false) diff --git a/components/streaming-buttons.js b/components/streaming-buttons.js index 7f5e4b6..a8053fd 100644 --- a/components/streaming-buttons.js +++ b/components/streaming-buttons.js @@ -1,18 +1,19 @@ 'use client' +import PropTypes from 'prop-types' import Button from '@mui/material/Button' import OpenInNewIcon from '@mui/icons-material/OpenInNew' import {Spotify, Applemusic, Deezer, Tidal, Youtubemusic, Amazon, Soundcloud} from '@icons-pack/react-simple-icons' export const PLATFORM_CONFIG = { - Spotify: {label: 'Spotify', bg: '#1DB954', color: '#fff', Icon: Spotify}, - Applemusic: {label: 'Apple Music', bg: '#FC3C44', color: '#fff', Icon: Applemusic}, - Deezer: {label: 'Deezer', bg: '#EF5466', color: '#fff', Icon: Deezer}, - Tidal: {label: 'Tidal', bg: '#000000', color: '#fff', Icon: Tidal}, - Qobuz: {label: 'Qobuz', bg: '#00245B', color: '#fff', Icon: null}, - Youtubemusic: {label: 'YouTube Music', bg: '#FF0000', color: '#fff', Icon: Youtubemusic}, - Amazon: {label: 'Amazon Music', bg: '#00A8E1', color: '#fff', Icon: Amazon}, - Soundcloud: {label: 'SoundCloud', bg: '#FF5500', color: '#fff', Icon: Soundcloud}, + Spotify: {label: 'Spotify', bg: '#1DB954', color: '#fff', Icon: Spotify}, + Applemusic: {label: 'Apple Music', bg: '#FC3C44', color: '#fff', Icon: Applemusic}, + Deezer: {label: 'Deezer', bg: '#EF5466', color: '#fff', Icon: Deezer}, + Tidal: {label: 'Tidal', bg: '#000000', color: '#fff', Icon: Tidal}, + Qobuz: {label: 'Qobuz', bg: '#00245B', color: '#fff', Icon: null}, + Youtubemusic: {label: 'YouTube Music', bg: '#FF0000', color: '#fff', Icon: Youtubemusic}, + Amazon: {label: 'Amazon Music', bg: '#00A8E1', color: '#fff', Icon: Amazon}, + Soundcloud: {label: 'SoundCloud', bg: '#FF5500', color: '#fff', Icon: Soundcloud}, } export function StreamButton({lyen}) { @@ -39,3 +40,10 @@ export function StreamButton({lyen}) { ) } + +StreamButton.propTypes = { + lyen: PropTypes.shape({ + plateforme: PropTypes.string.isRequired, + url: PropTypes.string.isRequired + }).isRequired +} diff --git a/components/teks/drawer-bar.js b/components/teks/drawer-bar.js index 3834c48..e4a59d8 100644 --- a/components/teks/drawer-bar.js +++ b/components/teks/drawer-bar.js @@ -20,7 +20,7 @@ const getMizikFiltered = (paroles, filter) => { const filteredTitre = paroles.filter(({titre}) => { const deburredTit = deburr(titre) return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase())) - }) + }) const filteredAlias = paroles.filter(({artistes}) => { const aliasLis = artistes.map(({alias}) => deburr(alias)).join(', ') diff --git a/components/teks/karaoke-modal.js b/components/teks/karaoke-modal.js index 7cbf7bf..b957179 100644 --- a/components/teks/karaoke-modal.js +++ b/components/teks/karaoke-modal.js @@ -21,7 +21,7 @@ const pulse = keyframes` ` const SlideUp = forwardRef(function SlideUp(props, ref) { - return + return }) function toEmbedUrl(url) { @@ -31,6 +31,7 @@ function toEmbedUrl(url) { if (match) { return `${u.origin}/videos/embed/${match[1]}?title=0&warningTitle=0&peertubeLink=0&controlBar=1` } + return url } catch { return url @@ -45,7 +46,9 @@ export default function KaraokeModal({url, desktopUrl, titre, artistes}) { const activeUrl = (!isMobile && desktopUrl) ? desktopUrl : url useEffect(() => { - if (!open) setLoaded(false) + if (!open) { + setLoaded(false) + } }, [open]) return ( @@ -55,13 +58,13 @@ export default function KaraokeModal({url, desktopUrl, titre, artistes}) { color='primary' size={isMobile ? 'medium' : 'large'} aria-label='karaoké' - onClick={() => setOpen(true)} sx={{ position: 'fixed', bottom: {xs: 24, sm: 32}, right: {xs: 24, sm: 32}, zIndex: 1050, }} + onClick={() => setOpen(true)} > @@ -69,7 +72,6 @@ export default function KaraokeModal({url, desktopUrl, titre, artistes}) { setOpen(false)} slots={{transition: SlideUp}} maxWidth={false} sx={{ @@ -102,6 +104,7 @@ export default function KaraokeModal({url, desktopUrl, titre, artistes}) { } } }} + onClose={() => setOpen(false)} > {/* Header superposé en gradient */} + }} + > {titre && ( @@ -133,7 +137,6 @@ export default function KaraokeModal({url, desktopUrl, titre, artistes}) { setOpen(false)} aria-label='fermer' sx={{ pointerEvents: 'auto', @@ -143,6 +146,7 @@ export default function KaraokeModal({url, desktopUrl, titre, artistes}) { border: '1px solid rgba(255,255,255,0.12)', '&:hover': {bgcolor: 'rgba(255,255,255,0.25)'}, }} + onClick={() => setOpen(false)} > @@ -166,7 +170,8 @@ export default function KaraokeModal({url, desktopUrl, titre, artistes}) { alignItems: 'center', justifyContent: 'center', gap: 1.5, - }}> + }} + > + }} + >