feat: bouton Répondre via Mastodon (authorize_interaction)

Corrige une violation ESLint introduite par le commit précédent :
l'export de configuration de route doit venir après les imports.

.env.sample

@@ -4,19 +4,30 @@ NEXT_PUBLIC_API_URL=$API_URL
 NEXT_PUBLIC_API_URL_ROOT=http://localhost:1337
 SITE_URL=http://localhost:3001
 NEXT_PUBLIC_READ_TOKEN=
-NEXT_PUBLIC_ADMIN_JWT_SECRET=
+
+# IDENTITÉ DU SITE (branding)
+NEXT_PUBLIC_SITE_NAME=PAWÒL-NU. Paroles et traductions.
+NEXT_PUBLIC_SITE_SHORT_NAME=PAWÒL-NU
+NEXT_PUBLIC_SITE_DESCRIPTION=PAWÒL-NU a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.
+NEXT_PUBLIC_ORG_NAME=OKI
+NEXT_PUBLIC_ORG_FULL_NAME=ORGANISATION KA INTERNATIONALE
+NEXT_PUBLIC_ORG_EMAIL=kontak@o-k-i.net
+NEXT_PUBLIC_ORG_LOCATION=Guadeloupe
+NEXT_PUBLIC_EXCLUSIVE_ARTIST_LABEL=OKI Exclusif
 
 # FUNKWHALE VARIABLE
 NEXT_PUBLIC_OKI_MIZIK_URL=https://funkwhale-server.com
-NEXT_PUBLIC_MIZIK_API_USER=user
-NEXT_PUBLIC_MIZIK_API_PASSWORD=password
+MIZIK_API_USER=user
+MIZIK_API_PASSWORD=password
 
 NEXT_PUBLIC_AWTIS_POU_CHAK_PAJ=6
 NEXT_PUBLIC_SITE_URL=$SITE_URL
 
-# NEXT AUTH
+# Auth
 
 NEXTAUTH_URL=http://localhost:3000
+BETTER_AUTH_URL=http://localhost:3000
+BETTER_AUTH_SECRET=
 
 # TWITTER VARIABLE
 
@@ -30,7 +41,13 @@ GOOGLE_CLIENT_SECRET=
 
 # CGU
 
-NEXT_PUBLIC_CGU_DOWNLOAD_LINK=
+NEXT_PUBLIC_CGU_DOWNLOAD_LINK=/cgu/cgu-confidentialite-oki-26-06-2026.pdf
+
+# Debug (mettre YES pour afficher les emails dans les logs en développement)
+SHOW_EMAILS=
+
+# Analytique (Plausible — laisser vide pour désactiver)
+NEXT_PUBLIC_PLAUSIBLE_URL=
 
 # Menu
 
@@ -59,16 +76,19 @@ NEXT_PUBLIC_LIBERAPAY_DONATE=
 NEXT_PUBLIC_PALE_USERNAME=
 NEXT_PUBLIC_GADE_USERNAME=
 NEXT_PUBLIC_YOUTUBE_USERNAME=
-NEXT_PUBLIC_TELEGRAM_GROUP=
 NEXT_PUBLIC_XMPP=
 NEXT_PUBLIC_GIT=
+NEXT_PUBLIC_CODEBERG=
+NEXT_PUBLIC_BLUESKY_URL=
+
+# Commentaires fédérés (bokante.o-k-i.net)
+
+NEXT_PUBLIC_BOKANTE_URL=https://bokante.o-k-i.net
+NEXT_PUBLIC_BOKANTE_ACCOUNT=pawol_nu
 
 # DOMAIN IMAGE
 NEXT_PUBLIC_DOMAINS_IMAGE="localhost:1337 strapi.mondomaine.com"
 
-# JWT SECRET 
-NEXT_PUBLIC_JWT_SECRET=
-
 # STRIPE
 
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
@@ -85,8 +105,11 @@ SMTP_PASSWORD=
 SMTP_FROM=
 SMTP_REPLY_TO=
 SMTP_SEND_TO=
+SMTP_BCC=
+SMTP_SECURE=
 
 # Twitter Authentification
 
 NEXT_PUBLIC_TWITTER_API_KEY=
 NEXT_PUBLIC_TWITTER_API_KEY_SECRET=
+NEXT_PUBLIC_TWITTER_BEARER_TOKEN=

.gitea/workflows/check-pr.yml

@@ -22,6 +22,12 @@ jobs:
     - name: Vérifier les dépendances
       run: yarn install --frozen-lockfile
 
+    - name: Lancer le lint
+      run: yarn lint
+
+    - name: Lancer les tests
+      run: yarn test
+
   deploy-beta:
     needs: check
     runs-on: ubuntu-latest
@@ -33,6 +39,7 @@ jobs:
         username: ${{ secrets.SSH_USER }}
         key: ${{ secrets.SSH_KEY }}
         script: |
+          set -e
           export NVM_DIR="$HOME/.nvm"
           [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
           cd ${{ secrets.FRONT_DEPLOY_PATH }}

.gitea/workflows/deploy-beta.yml

@@ -2,8 +2,6 @@ name: Déploiement FRONT BETA
 run-name: ${{ gitea.actor }} déploie FRONT BETA
 on:
   push:
-    branches:
-    - dev
 
 jobs:
   check:
@@ -22,6 +20,12 @@ jobs:
     - name: Vérifier les dépendances
       run: yarn install --frozen-lockfile
 
+    - name: Lancer le lint
+      run: yarn lint
+
+    - name: Lancer les tests
+      run: yarn test
+
   deploy:
     needs: check
     runs-on: ubuntu-latest
@@ -33,10 +37,12 @@ jobs:
         username: ${{ secrets.SSH_USER }}
         key: ${{ secrets.SSH_KEY }}
         script: |
+          set -e
           export NVM_DIR="$HOME/.nvm"
           [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
           cd ${{ secrets.FRONT_DEPLOY_PATH }}
-          git pull --ff-only origin dev
+          git fetch origin
+          git checkout -B ${{ gitea.ref_name }} origin/${{ gitea.ref_name }}
           corepack enable
           yarn install --frozen-lockfile
           yarn build

.gitea/workflows/deploy-prod.yml

@@ -22,6 +22,12 @@ jobs:
     - name: Vérifier les dépendances
       run: yarn install --frozen-lockfile
 
+    - name: Lancer le lint
+      run: yarn lint
+
+    - name: Lancer les tests
+      run: yarn test
+
   deploy:
     needs: check
     runs-on: ubuntu-latest
@@ -33,6 +39,7 @@ jobs:
         username: ${{ secrets.SSH_USER }}
         key: ${{ secrets.SSH_KEY }}
         script: |
+          set -e
           export NVM_DIR="$HOME/.nvm"
           [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
           cd ${{ secrets.PROD_DEPLOY_PATH }}

app/__tests__/robots.test.js

@@ -0,0 +1,22 @@
+import {describe, it, expect, afterEach} from 'vitest'
+import robots from '../robots'
+
+describe('robots', () => {
+  const originalNodeEnv = process.env.NODE_ENV
+
+  afterEach(() => {
+    process.env.NODE_ENV = originalNodeEnv
+  })
+
+  it('autorise l\'indexation en production', () => {
+    process.env.NODE_ENV = 'production'
+
+    expect(robots().rules).toEqual({userAgent: '*', allow: '/'})
+  })
+
+  it('bloque l\'indexation hors production', () => {
+    process.env.NODE_ENV = 'development'
+
+    expect(robots().rules).toEqual({userAgent: '*', disallow: '/'})
+  })
+})

app/api/mizik-stream/[id]/__tests__/route.test.js

@@ -0,0 +1,55 @@
+import {describe, it, expect, vi, afterEach} from 'vitest'
+import {GET} from '../route'
+
+function fakeUpstreamResponse({status = 200, headers = {}, body = 'audio-bytes'} = {}) {
+  return {
+    status,
+    body,
+    headers: {
+      get: key => headers[key.toLowerCase()] ?? null
+    }
+  }
+}
+
+describe('GET /api/mizik-stream/[id]', () => {
+  const originalFetch = global.fetch
+
+  afterEach(() => {
+    global.fetch = originalFetch
+    vi.restoreAllMocks()
+  })
+
+  it('n\'expose pas les identifiants au client, uniquement l\'id dans l\'URL amont', async () => {
+    global.fetch = vi.fn(async () => fakeUpstreamResponse())
+
+    const request = new Request('http://localhost/api/mizik-stream/42')
+    await GET(request, {params: Promise.resolve({id: '42'})})
+
+    const [calledUrl] = global.fetch.mock.calls[0]
+    expect(calledUrl).toContain('id=42')
+    expect(calledUrl).toMatch(/[?&]u=/)
+    expect(calledUrl).toMatch(/[?&]p=/)
+  })
+
+  it('transmet l\'en-tête Range pour permettre le seek audio', async () => {
+    global.fetch = vi.fn(async () => fakeUpstreamResponse({status: 206, headers: {'content-range': 'bytes 0-99/200'}}))
+
+    const request = new Request('http://localhost/api/mizik-stream/42', {headers: {range: 'bytes=0-99'}})
+    const response = await GET(request, {params: Promise.resolve({id: '42'})})
+
+    const [, options] = global.fetch.mock.calls[0]
+    expect(options.headers.range).toBe('bytes=0-99')
+    expect(response.status).toBe(206)
+    expect(response.headers.get('content-range')).toBe('bytes 0-99/200')
+  })
+
+  it('renvoie le flux et le statut renvoyés par le serveur Funkwhale', async () => {
+    global.fetch = vi.fn(async () => fakeUpstreamResponse({status: 200, headers: {'content-type': 'audio/mpeg'}}))
+
+    const request = new Request('http://localhost/api/mizik-stream/7')
+    const response = await GET(request, {params: Promise.resolve({id: '7'})})
+
+    expect(response.status).toBe(200)
+    expect(response.headers.get('content-type')).toBe('audio/mpeg')
+  })
+})

app/api/mizik-stream/[id]/route.js

@@ -0,0 +1,29 @@
+const MIZIK_URL = process.env.NEXT_PUBLIC_OKI_MIZIK_URL || 'https://funkwhale-server.com'
+const MIZIK_API_USER = process.env.MIZIK_API_USER || 'user'
+const MIZIK_API_PASSWORD = process.env.MIZIK_API_PASSWORD || 'password'
+
+const FORWARDED_HEADERS = ['content-type', 'content-length', 'content-range', 'accept-ranges']
+
+export async function GET(request, props) {
+  const {id} = await props.params
+
+  const upstreamUrl = `${MIZIK_URL}/rest/stream?u=${encodeURIComponent(MIZIK_API_USER)}&p=${encodeURIComponent(MIZIK_API_PASSWORD)}&id=${encodeURIComponent(id)}`
+  const range = request.headers.get('range')
+
+  const upstreamResponse = await fetch(upstreamUrl, {
+    headers: range ? {range} : {}
+  })
+
+  const headers = new Headers()
+  for (const key of FORWARDED_HEADERS) {
+    const value = upstreamResponse.headers.get(key)
+    if (value) {
+      headers.set(key, value)
+    }
+  }
+
+  return new Response(upstreamResponse.body, {
+    status: upstreamResponse.status,
+    headers
+  })
+}

app/auth-provider.js

@@ -1,17 +0,0 @@
-'use client'
-
-import Proptypes from 'prop-types'
-import {SessionProvider} from 'next-auth/react'
-
-export default function AuthProvider({children, session}) {
-  return (
-    <SessionProvider session={session}>
-      {children}
-    </SessionProvider>
-  )
-}
-
-AuthProvider.propTypes = {
-  children: Proptypes.node,
-  session: Proptypes.object
-}

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)
 
@@ -50,11 +50,11 @@ export async function generateMetadata(props) {
       type: 'website'
     },
     twitter: {
-      site: '@OrganisationKA',
+      site: `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`,
       card: 'summary_large_image',
       title,
       description,
-      creator: '@OrganisationKA',
+      creator: `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`,
       images: {
         url: `${apiUrl}${kuvetiFormat?.url}`,
         alt: `Photo de ${anAwtis.alias}`,
@@ -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)
 

app/awtis/page.js

@@ -10,17 +10,21 @@ import Pajinasyon from '../../components/awtis/pajinasyon'
 import {jwennAwtisPajinasyon} from '../../lib/oki-api'
 import Footer from '../../components/footer'
 
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'
+const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
+
 export const metadata = {
-  title: 'PAWÒL-NU | Artistes',
+  title: `${siteName} | Artistes`,
   description: 'Liste des artistes ayant une ou plusieurs œuvres présentes sur le site.',
   openGraph: {
-    title: 'PAWÒL-NU | Artistes',
+    title: `${siteName} | Artistes`,
     description: 'Liste des artistes ayant une ou plusieurs œuvres présentes sur le site.',
-    url: 'https://pawol.nu/sipote',
-    siteName: 'PAWÒL-NU. Paroles et traductions.',
+    url: `${siteUrl}/awtis`,
+    siteName,
     images: [
       {
-        url: 'https://pawol.nu/logo-512x512.png',
+        url: `${siteUrl}/logo-512x512.png`,
         width: 512,
         height: 512
       }
@@ -29,14 +33,14 @@ export const metadata = {
     type: 'website'
   },
   twitter: {
-    site: '@OrganisationKA',
+    site: twitterHandle,
     card: 'summary_large_image',
-    title: 'PAWÒL-NU | Artistes',
+    title: `${siteName} | Artistes`,
     description: 'Liste des artistes ayant une ou plusieurs œuvres présentes sur le site.',
-    creator: '@OrganisationKA',
+    creator: twitterHandle,
     images: {
-      url: 'https://pawol.nu/logo-512x512.png',
-      alt: 'OKI Logo',
+      url: `${siteUrl}/logo-512x512.png`,
+      alt: `${siteName} Logo`,
     }
   }
 }
@@ -59,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)
 

app/layout.js

@@ -3,24 +3,33 @@ import TopLoader from '../components/top-loader'
 import Navigasyon from '../components/navigasyon'
 import ThemeRegistry from './theme-registy'
 
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
+const siteDescription = process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.'
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'
+const orgName = process.env.NEXT_PUBLIC_ORG_NAME || 'OKI'
+const orgEmail = process.env.NEXT_PUBLIC_ORG_EMAIL || 'kontak@o-k-i.net'
+const orgLocation = process.env.NEXT_PUBLIC_ORG_LOCATION || 'Guadeloupe'
+const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
+const plausibleUrl = process.env.NEXT_PUBLIC_PLAUSIBLE_URL || null
+
 export const metadata = {
-  metadataBase: new URL('https://pawol.nu'),
-  manifest: '/manifest.json',
-  title: 'PAWÒL-NU. Paroles et traductions.',
-  description: 'PAWÒL-NU a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.',
-  author: 'OKI',
+  metadataBase: new URL(siteUrl),
+  manifest: '/manifest.webmanifest',
+  title: siteName,
+  description: siteDescription,
+  author: orgName,
   category: 'music',
-  creator: 'OKI',
-  publisher: 'OKI',
-  applicationName: 'PAWÒL-NU. Paroles et traductions.',
+  creator: orgName,
+  publisher: orgName,
+  applicationName: siteName,
   openGraph: {
-    title: 'PAWÒL-NU. Paroles et traductions.',
-    description: 'PAWÒL-NU a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.',
-    url: 'https://pawol.nu',
-    siteName: 'PAWÒL-NU. Paroles et traductions.',
+    title: siteName,
+    description: siteDescription,
+    url: siteUrl,
+    siteName,
     images: [
       {
-        url: 'https://pawol.nu/logo-512x512.png',
+        url: `${siteUrl}/logo-512x512.png`,
         width: 512,
         height: 512
       }
@@ -29,14 +38,14 @@ export const metadata = {
     type: 'website'
   },
   twitter: {
-    site: '@OrganisationKA',
+    site: twitterHandle,
     card: 'summary_large_image',
-    title: 'PAWÒL-NU. Paroles et traductions.',
-    description: 'PAWÒL-NU a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.',
-    creator: '@OrganisationKA',
+    title: siteName,
+    description: siteDescription,
+    creator: twitterHandle,
     images: {
-      url: 'https://pawol.nu/logo-512x512.png',
-      alt: 'PAWÒL-NU Logo',
+      url: `${siteUrl}/logo-512x512.png`,
+      alt: `${siteName} Logo`,
     },
   }
 }
@@ -44,30 +53,36 @@ export const metadata = {
 const jsonLd = {
   '@context': 'https://schema.org',
   '@type': 'Organization',
-  url: 'https://pawol.nu',
-  email: 'kontak@o-k-i.net',
-  keywords: ['OKI', 'PAWÒL-NU', 'Paroles', 'Pawol', 'Medukam', 'Wanni Wannan'],
-  legalName: 'PAWÒL-NU',
-  location: 'Guadeloupe'
+  url: siteUrl,
+  email: orgEmail,
+  keywords: [orgName, siteName, 'Paroles', 'Pawol'],
+  legalName: siteName,
+  location: orgLocation,
 }
 
 export default async function RootLayout({children}) {
+  const inner = (
+    <>
+      <TopLoader color='#ffeb3b' />
+      <ThemeRegistry>
+        <Navigasyon />
+        {children}
+      </ThemeRegistry>
+      <section>
+        <script
+          type='application/ld+json'
+          dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
+        />
+      </section>
+    </>
+  )
+
   return (
-    <html lang='fr' suppressHydrationWarning>
+    <html suppressHydrationWarning lang='fr'>
       <body>
-        <PlausibleProvider src='https://plausible.io/js/pa-3sQidCSfiSOXQUh-4La0T.js'>
-          <TopLoader color='#ffeb3b' />
-          <ThemeRegistry>
-            <Navigasyon />
-            {children}
-          </ThemeRegistry>
-          <section>
-            <script
-              type='application/ld+json'
-              dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
-            />
-          </section>
-        </PlausibleProvider>
+        {plausibleUrl
+          ? <PlausibleProvider src={plausibleUrl}>{inner}</PlausibleProvider>
+          : inner}
       </body>
     </html>
   )

app/manifest.js

@@ -0,0 +1,25 @@
+export default function manifest() {
+  return {
+    name: process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU',
+    short_name: process.env.NEXT_PUBLIC_SITE_SHORT_NAME || 'PAWÒL-NU',
+    description: process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.',
+    scope: '/',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#303030',
+    theme_color: '#303030',
+    orientation: 'portrait-primary',
+    icons: [
+      {src: '/logo-72x72.png', type: 'image/png', sizes: '72x72'},
+      {src: '/logo-96x96.png', type: 'image/png', sizes: '96x96'},
+      {src: '/logo-128x128.png', type: 'image/png', sizes: '128x128'},
+      {src: '/logo-144x144.png', type: 'image/png', sizes: '144x144'},
+      {src: '/logo-152x152.png', type: 'image/png', sizes: '152x152'},
+      {src: '/logo-192x192.png', type: 'image/png', sizes: '192x192'},
+      {src: '/logo-256x256.png', type: 'image/png', sizes: '256x256'},
+      {src: '/logo-384x384.png', type: 'image/png', sizes: '384x384'},
+      {src: '/logo-512x512.png', type: 'image/png', sizes: '512x512'},
+      {src: '/maskable.png', type: 'image/png', sizes: '192x192', purpose: 'maskable'},
+    ],
+  }
+}

app/page.js

@@ -1,5 +1,3 @@
-export const dynamic = 'force-dynamic'
-
 import Box from '@mui/material/Box'
 import Container from '@mui/material/Container'
 import {notFound} from 'next/navigation'
@@ -9,10 +7,11 @@ 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'
 
+export const dynamic = 'force-dynamic'
+
 async function jwennDone() {
   const [statistik, denyeTeks, anVedette] = await Promise.all([jwennStats(), jwennDenyeTeks(), jwennAnVedette()])
 
@@ -28,7 +27,7 @@ export default async function Page() {
 
   return (
     <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
-      <Akey logo={okiLogo} />
+      <Akey />
       <Container sx={{flexGrow: 100}}>
         {dernierTeks && <AnVedette teks={dernierTeks} />}
         <Statistik statistik={statistik} />

app/paroles/[slug]/page.js

@@ -3,7 +3,7 @@ import Box from '@mui/material/Box'
 
 import {jwennTeksEpiSlug} from '../../../lib/oki-api'
 import AnTeks from '../../../components/teks/an-teks'
-import {getAlias} from '../../../lib/utils/format'
+import {getAlias} from '../../../lib/utils/get-alias'
 import {formatKuveti} from '../../../lib/kuveti'
 import Footer from '../../../components/footer'
 
@@ -21,14 +21,14 @@ 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}`
-  const description = `Paroles de « ${anTeks?.titre} » : ${anTeks?.transcription.slice(0, 100)}...`
+  const description = `Paroles de « ${anTeks?.titre} » : ${anTeks?.transcription?.slice(0, 100) ?? ''}...`
   const url = `${siteUrl}/paroles/${slug}`
 
   const {couverture} = anTeks
@@ -53,11 +53,11 @@ export async function generateMetadata(props) {
       type: 'website'
     },
     twitter: {
-      site: '@OrganisationKA',
+      site: `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`,
       card: 'summary_large_image',
       title,
       description,
-      creator: '@OrganisationKA',
+      creator: `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`,
       images: {
         url: `${apiUrl}${kuvetiFormat?.url}`,
         alt: `Couverture ${title}`,
@@ -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',
@@ -80,8 +80,12 @@ export default async function AnPawolPaj(props) {
     '@id': anTeks.musicBrainzUrl || undefined,
     name: anTeks.titre,
     url: `${siteUrl}/paroles/${slug}`,
+    inLanguage: anTeks.langueSource ?? 'ka',
     image: teksKuvetiFormat?.url ? `${apiUrl}${teksKuvetiFormat?.url}` : undefined,
     thumbnailUrl: couverture?.formats?.thumbnail?.url ? `${apiUrl}${couverture.formats.thumbnail.url}` : undefined,
+    license: anTeks.creativeCommons
+      ? `https://creativecommons.org/licenses/${anTeks.creativeCommons.toLowerCase()}/4.0/`
+      : undefined,
     byArtist: anTeks.artistes.map(({photo, musicBrainzUrl, alias, slug}) => {
       const kuvetiFormat = formatKuveti(photo)
 
@@ -93,7 +97,18 @@ export default async function AnPawolPaj(props) {
         image: kuvetiFormat?.url ? `${apiUrl}${kuvetiFormat?.url}` : undefined
       }
     }),
-    datePublished: anTeks?.annee
+    datePublished: anTeks?.annee,
+    potentialAction: anTeks.streamAudio?.length > 0
+      ? anTeks.streamAudio.map(lyen => ({
+        '@type': 'ListenAction',
+        target: lyen.url
+      }))
+      : undefined,
+    isBasedOn: anTeks.sourceOriginale ? {
+      '@type': 'MusicRecording',
+      name: anTeks.sourceOriginale.titre,
+      url: `${siteUrl}/paroles/${anTeks.sourceOriginale.slug}`
+    } : undefined
   }
 
   return (

app/paroles/layout.js

@@ -1,20 +1,24 @@
 import {Suspense} from 'react'
-import {notFound} from 'next/navigation'
-import {jwennTeks} from '../../lib/oki-api'
-import TeksDrawer from '../../components/teks/teks-drawer'
+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'
 
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'
+const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
+
 export const metadata = {
-  title: 'PAWÒL-NU. Paroles et traductions.',
+  title: siteName,
   description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
   openGraph: {
-    title: 'PAWÒL-NU. Paroles et traductions.',
+    title: siteName,
     description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
-    url: 'https://pawol.nu/paroles',
-    siteName: 'PAWÒL-NU. Paroles et traductions.',
+    url: `${siteUrl}/paroles`,
+    siteName,
     images: [
       {
-        url: 'https://pawol.nu/logo-512x512.png',
+        url: `${siteUrl}/logo-512x512.png`,
         width: 512,
         height: 512
       }
@@ -23,39 +27,31 @@ export const metadata = {
     type: 'website'
   },
   twitter: {
-    site: '@OrganisationKA',
+    site: twitterHandle,
     card: 'summary_large_image',
-    title: 'PAWÒL-NU. Paroles et traductions.',
+    title: siteName,
     description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
-    creator: '@OrganisationKA',
+    creator: twitterHandle,
     images: {
-      url: 'https://pawol.nu/logo-512x512.png',
-      alt: 'OKI Logo',
+      url: `${siteUrl}/logo-512x512.png`,
+      alt: `${siteName} Logo`,
     },
   }
 }
 
-async function jwennDotDone() {
-  const teks = await jwennTeks()
-
-  if (!teks) {
-    notFound()
-  }
-
-  return teks
-}
-
-export default async function PawolLayout({children}) {
-  const teks = await jwennDotDone()
-
+export default function PawolLayout({children}) {
   return (
-    <>
+    <CurrentTrackProvider>
       <Suspense fallback={<Loading />}>
-        <TeksDrawer paroles={teks} />
+        <TeksDrawerLoader />
       </Suspense>
       <section>
         {children}
       </section>
-    </>
+    </CurrentTrackProvider>
   )
 }
+
+PawolLayout.propTypes = {
+  children: PropTypes.node.isRequired
+}

app/paroles/page.js

@@ -8,6 +8,8 @@ import Footer from '../../components/footer'
 
 const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
+const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
 
 async function jwennDone() {
   const denyeTeks = await jwennDenyeTeks()
@@ -29,23 +31,23 @@ export async function generateMetadata() {
   const description = `Derniers morceaux : ${songList}…`
 
   return {
-    title: 'PAWÒL-NU | Derniers morceaux',
+    title: `${siteName} | Derniers morceaux`,
     description,
     openGraph: {
-      title: 'PAWÒL-NU | Derniers morceaux',
+      title: `${siteName} | Derniers morceaux`,
       description,
       url: `${siteUrl}/paroles`,
-      siteName: 'PAWÒL-NU. Paroles et traductions.',
+      siteName,
       images: [{url: imageUrl, width: imageWidth, height: imageHeight}],
       locale: 'fr_FR',
       type: 'website',
     },
     twitter: {
-      site: '@OrganisationKA',
+      site: twitterHandle,
       card: 'summary_large_image',
-      title: 'PAWÒL-NU | Derniers morceaux',
+      title: `${siteName} | Derniers morceaux`,
       description,
-      creator: '@OrganisationKA',
+      creator: twitterHandle,
       images: {url: imageUrl, alt: 'Couverture du dernier morceau publié'},
     },
   }

app/robots.js

@@ -1,5 +1,5 @@
 export default function robots() {
-  const isProduction = process.env.NEXT_PUBLIC_ENV === 'production';
+  const isProduction = process.env.NODE_ENV === 'production'
 
   if (!isProduction) {
     return {
@@ -15,6 +15,6 @@ export default function robots() {
       userAgent: '*',
       allow: '/',
     },
-    sitemap: 'https://pawol.nu/sitemap.xml',
+    sitemap: `${process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'}/sitemap.xml`,
   }
 }

app/sipote/layout.js

@@ -1,14 +1,20 @@
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'
+const orgFullName = process.env.NEXT_PUBLIC_ORG_FULL_NAME || process.env.NEXT_PUBLIC_ORG_NAME || 'ORGANISATION KA INTERNATIONALE'
+const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
+const sipoteTitle = `${siteName} | Soutenir ${orgFullName} !`
+
 export const metadata = {
-  title: 'PAWÒL-NU | Soutenir ORGANISATION KA INTERNATIONALE !',
+  title: sipoteTitle,
   description: 'Vous pouvez nous soutenir via Liberapay ou PayPal',
   openGraph: {
-    title: 'PAWÒL-NU | Soutenir ORGANISATION KA INTERNATIONALE !',
+    title: sipoteTitle,
     description: 'Vous pouvez nous soutenir via Liberapay ou PayPal.',
-    url: 'https://pawol.nu/sipote',
-    siteName: 'PAWÒL-NU | Paroles et traductions.',
+    url: `${siteUrl}/sipote`,
+    siteName,
     images: [
       {
-        url: 'https://pawol.nu/sipote.png',
+        url: `${siteUrl}/sipote.png`,
         width: 500,
         height: 500
       }
@@ -17,14 +23,14 @@ export const metadata = {
     type: 'website'
   },
   twitter: {
-    site: '@OrganisationKA',
+    site: twitterHandle,
     card: 'summary_large_image',
-    title: 'PAWÒL-NU | Soutenir ORGANISATION KA INTERNATIONALE !',
+    title: sipoteTitle,
     description: 'Vous pouvez nous soutenir via Liberapay ou PayPal.',
-    creator: '@OrganisationKA',
+    creator: twitterHandle,
     images: {
-      url: 'https://pawol.nu/sipote.png',
-      alt: 'Sipòte OKI',
+      url: `${siteUrl}/sipote.png`,
+      alt: `Sipòte ${process.env.NEXT_PUBLIC_ORG_NAME || 'OKI'}`,
     },
   }
 }

app/sipote/page.js

@@ -14,7 +14,7 @@ export default function Sipote() {
     <Box sx={{display: 'flex', marginTop: 10, flexDirection: 'column', minHeight: '100vh'}}>
       <Box sx={{flexGrow: 1, marginBottom: 10}}>
         <Container>
-          <Typography gutterBottom sx={{fontWeight: 'bold', textAlign:'center' }} variant='h4' component='h1'>
+          <Typography gutterBottom sx={{fontWeight: 'bold', textAlign: 'center'}} variant='h4' component='h1'>
             Soutenir ORGANISATION KA INTERNATIONALE !
           </Typography>
           <Paper sx={{padding: 2, marginTop: 3}}>

app/sitemap.js

@@ -31,10 +31,6 @@ export default async function sitemap() {
     {
       url: `${url}/awtis`,
       priority: 0.6
-    },
-    {
-      url: `${url}/pwopose`,
-      priority: 0.5
     }
   ]
 

app/theme-registy.js

@@ -69,13 +69,13 @@ export default function ThemeRegistry(props) {
   return (
     <>
       <InitColorSchemeScript attribute='class' />
-        <NextAppDirEmotionCacheProvider options={{key: 'mui'}}>
-          <ThemeProvider theme={theme}>
-            <CssBaseline enableColorScheme />
-            <ChanjeTem />
-            {children}
-          </ThemeProvider>
-        </NextAppDirEmotionCacheProvider>
+      <NextAppDirEmotionCacheProvider options={{key: 'mui'}}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline enableColorScheme />
+          <ChanjeTem />
+          {children}
+        </ThemeProvider>
+      </NextAppDirEmotionCacheProvider>
     </>
   )
 }

components/akey/an-vedette.js

@@ -4,23 +4,24 @@ import PropTypes from 'prop-types'
 import Card from '@mui/material/Card'
 import CardActionArea from '@mui/material/CardActionArea'
 import CardContent from '@mui/material/CardContent'
-import CardMedia from '@mui/material/CardMedia'
 import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
 import Chip from '@mui/material/Chip'
+import Image from 'next/image'
 import Link from 'next/link'
 
-import {getAlias} from '../../lib/utils/format'
+import {getAlias} from '../../lib/utils/get-alias'
 import {formatKuveti} from '../../lib/kuveti'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
-const noImageUrl = 'https://place-hold.it/600x600?text=Indisponible'
+
+// 1×1 gris neutre — placeholder pendant le chargement
+const BLUR_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNsYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
 
 export default function AnVedette({teks}) {
   const {titre, artistes, annee, couverture, slug} = teks
   const aliases = getAlias(artistes, teks.prioriteArtistes)
-  const fmt = formatKuveti(couverture)
-  const imageUrl = fmt?.url ? `${IMAGE_URL}${fmt.url}` : noImageUrl
+  const fmt = formatKuveti(couverture, 'medium')
 
   return (
     <Box sx={{mb: 4}}>
@@ -32,17 +33,22 @@ export default function AnVedette({teks}) {
       />
       <Card sx={{borderRadius: 2, overflow: 'hidden'}}>
         <CardActionArea component={Link} href={`/paroles/${slug}`}>
-          <CardMedia
-            component='img'
-            image={imageUrl}
-            alt={titre}
-            sx={{
-              width: '100%',
-              aspectRatio: {xs: '1 / 1', sm: '16 / 9'},
-              objectFit: 'cover',
-              maxHeight: {sm: 420}
-            }}
-          />
+          <Box sx={{position: 'relative', width: '100%', aspectRatio: {xs: '1 / 1', sm: '16 / 9'}, maxHeight: {sm: 420}}}>
+            {fmt?.url ? (
+              <Image
+                fill
+                priority
+                src={`${IMAGE_URL}${fmt.url}`}
+                alt={titre}
+                placeholder='blur'
+                blurDataURL={BLUR_DATA_URL}
+                sizes='(max-width: 600px) 100vw, 800px'
+                style={{objectFit: 'cover'}}
+              />
+            ) : (
+              <Box sx={{width: '100%', height: '100%', bgcolor: 'grey.300'}} />
+            )}
+          </Box>
           <CardContent>
             <Typography variant='h5' component='h2' sx={{fontWeight: 'bold', mb: 0.5}}>
               {titre}

components/akey/index.js

@@ -1,13 +1,8 @@
-import PropTypes from 'prop-types'
 import Container from '@mui/material/Container'
 import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid'
-import Button from '@mui/material/Button'
-import Image from 'next/image'
-import Link from 'next/link'
 
-export default function Akey({logo}) {
+export default function Akey() {
   return (
     <Box sx={{flexGrow: 1, marginBottom: 3, marginTop: 7}}>
       <Container align='center'>
@@ -25,7 +20,3 @@ export default function Akey({logo}) {
     </Box>
   )
 }
-
-Akey.propTypes = {
-  logo: PropTypes.object.isRequired
-}

components/awtis/awtis-detay.js

@@ -1,6 +1,7 @@
 'use client'
 
 import {useState} from 'react'
+import Image from 'next/image'
 import Link from 'next/link'
 import PropTypes from 'prop-types'
 import Accordion from '@mui/material/Accordion'
@@ -11,61 +12,120 @@ import Button from '@mui/material/Button'
 import CardActionArea from '@mui/material/CardActionArea'
 import Chip from '@mui/material/Chip'
 import Container from '@mui/material/Container'
+import Divider from '@mui/material/Divider'
 import Grid from '@mui/material/Grid'
 import Paper from '@mui/material/Paper'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
-import Avatar from '@mui/material/Avatar'
 import Typography from '@mui/material/Typography'
 import {green} from '@mui/material/colors'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
+import MusicNoteIcon from '@mui/icons-material/MusicNote'
+import VerifiedIcon from '@mui/icons-material/Verified'
 
 import {formatKuveti} from '../../lib/kuveti'
+import {StreamButton} from '../streaming-buttons'
+import {SocialButton} from './social-buttons'
 import AwtisBiyografi from './awtis-biyografi'
 import MizikLyen from './mizik-lyen'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
-const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
+const EXCLUSIVE_LABEL = process.env.NEXT_PUBLIC_EXCLUSIVE_ARTIST_LABEL || 'OKI Exclusif'
+const BLUR_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNsYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
 
 const sortTeks = paroles => paroles.sort((a, b) => a.titre.localeCompare(b.titre, 'fr', {sensitivity: 'base'}))
 
 export default function AwtisDetay({anAwtis}) {
   const [esByografiOuve, meteEsByografiOuve] = useState(false)
-  const {alias, biographie, paroles, photo} = anAwtis
+  const {alias, biographie, paroles, photo, isExclusiveArtist, titrePhare, rezoSosyal} = anAwtis
   const sortedTeks = sortTeks(paroles)
   const gwanBiyo = biographie && biographie.length > 100
-
   const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie
 
-  const handleClick = () => {
-    meteEsByografiOuve(true)
-  }
+  const hasStreaming = isExclusiveArtist && titrePhare?.streamAudio?.length > 0
+  const coverUrl = titrePhare?.couverture
+    ? `${IMAGE_URL}${formatKuveti(titrePhare.couverture, 'small')?.url}`
+    : null
+
+  const photoUrl = photo?.url
+    ? `${IMAGE_URL}${formatKuveti(photo, 'small')?.url}`
+    : null
 
   return (
-    <Container>
-      <Box sx={{marginTop: 8, marginBottom: 2}}>
-        <Typography sx={{textAlign: 'center'}} variant='h6' component='h1'>
+    <Container maxWidth='sm'>
+      <Box sx={{mt: 2, mb: 1}}>
+        <Link passHref href='/awtis'>
+          <Button size='small' variant='text' startIcon={<KeyboardBackspaceIcon />} sx={{color: 'text.secondary'}}>
+            Retour aux artistes
+          </Button>
+        </Link>
+      </Box>
+
+      {/* Héro */}
+      <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', pt: 2, pb: 3}}>
+        <Box sx={{
+          width: 150, height: 150,
+          borderRadius: '50%',
+          border: `3px solid ${green[500]}`,
+          overflow: 'hidden',
+          position: 'relative',
+          flexShrink: 0,
+          mb: 2,
+        }}
+        >
+          {photoUrl ? (
+            <Image
+              src={photoUrl}
+              alt={`Photo ${alias}`}
+              width={150}
+              height={150}
+              placeholder='blur'
+              blurDataURL={BLUR_DATA_URL}
+              style={{objectFit: 'cover', width: '100%', height: '100%'}}
+            />
+          ) : (
+            <Box sx={{width: '100%', height: '100%', bgcolor: 'grey.300'}} />
+          )}
+        </Box>
+
+        <Typography variant='h5' component='h1' sx={{fontWeight: 700, mb: 1, textAlign: 'center'}}>
           {alias}
         </Typography>
+
+        {rezoSosyal?.length > 0 && (
+          <Box sx={{display: 'flex', gap: 0.75, flexWrap: 'wrap', justifyContent: 'center', mb: 1.5}}>
+            {rezoSosyal.map(rezo => (
+              <SocialButton key={rezo.url} rezo={rezo} />
+            ))}
+          </Box>
+        )}
+
+        {isExclusiveArtist && (
+          <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5}}>
+            <Chip
+              icon={<VerifiedIcon sx={{fontSize: 16}} />}
+              label={`Artiste ${EXCLUSIVE_LABEL}`}
+              size='small'
+              sx={{bgcolor: '#FFD700', color: '#000', fontWeight: 700, '& .MuiChip-icon': {color: '#000'}}}
+            />
+            <Typography variant='caption' sx={{color: 'text.secondary', textAlign: 'center', maxWidth: 340}}>
+              Certains morceaux sont publiés en exclusivité sur PAWÒL-NU, avant toute sortie sur les plateformes de streaming.
+            </Typography>
+          </Box>
+        )}
       </Box>
-      <Box sx={{justifyContent: 'center', display: 'flex', marginBottom: 2}}>
-        <Avatar
-          src={photo?.url ? `${IMAGE_URL}${photo?.formats?.small?.url || photo?.formats?.thumbnail?.url || photo?.url}` : noImageUrl}
-          alt={`Photo ${alias}`}
-          sx={{width: 200, height: 200, border: `2px solid ${green[500]}`}}
-        />
-      </Box>
-      <Grid sx={{alignItems:'center'}} container direction='column' spacing={3}>
+
+      <Grid container direction='column' spacing={2}>
         {biyo && (
-          <Grid size={{xs: 12, md: 6}}>
-            <Card sx={{minWidth: 300}}>
-              <CardActionArea onClick={handleClick}>
+          <Grid size={12}>
+            <Card>
+              <CardActionArea onClick={() => meteEsByografiOuve(true)}>
                 <CardContent>
-                  <Typography gutterBottom variant='body1' component='h2'>
-                    <strong>Biographie</strong>
+                  <Typography gutterBottom variant='body2' sx={{fontWeight: 700, textTransform: 'uppercase', color: 'text.secondary', letterSpacing: 0.5}}>
+                    Biographie
                   </Typography>
-                  <Typography textalign='justify' variant='subtitle1' component='h3'>
+                  <Typography variant='body1'>
                     {biyo}
                   </Typography>
                 </CardContent>
@@ -73,53 +133,99 @@ export default function AwtisDetay({anAwtis}) {
             </Card>
           </Grid>
         )}
-        <Grid size={{xs: 12, md: 6}}>
-          <Box marginbottom={3}>
-            {paroles.length > 1 ? (
-              <Accordion>
-                <AccordionSummary
-                  expandIcon={<ExpandMoreIcon />}
-                  aria-controls='panel-teks-content'
-                  id='panel-teks-header'
-                >
-                  <Typography sx={{marginRight: 2, textAlign:'center' }} variant='body1' component='h2'><strong>Liste des paroles</strong></Typography>
-                  <Chip color='primary' label={paroles.length} size='small' variant='contained' />
-                </AccordionSummary>
-                <AccordionDetails sx={{paddingInline: 0}}>
-                  {sortedTeks.map(anPawol => {
-                    const {couverture} = anPawol
-                    const kuvetiFormat = couverture?.formats?.thumbnail || formatKuveti(couverture)
 
-                    return (
-                      <Box key={anPawol.id} sx={{paddingBlock: 0.5}}>
-                        <MizikLyen anPawol={anPawol} kuveti={kuvetiFormat} />
+        {hasStreaming && (
+          <Grid size={12}>
+            <Card sx={{overflow: 'hidden'}}>
+              <Box sx={{px: 2, pt: 1.5, pb: 0.5, display: 'flex', alignItems: 'center', gap: 0.75}}>
+                <MusicNoteIcon sx={{fontSize: 14, color: 'text.secondary'}} />
+                <Typography variant='caption' sx={{fontWeight: 700, textTransform: 'uppercase', color: 'text.secondary', letterSpacing: 0.5}}>
+                  Titre phare
+                </Typography>
+              </Box>
+              <Divider />
+              <Grid container>
+                {coverUrl && (
+                  <Grid size={{xs: 12, sm: 4}}>
+                    <Link href={`/paroles/${titrePhare.slug}`} style={{display: 'block', height: '100%'}}>
+                      <Box sx={{position: 'relative', minHeight: 130, height: '100%'}}>
+                        <Image
+                          fill
+                          src={coverUrl}
+                          alt={titrePhare.titre}
+                          placeholder='blur'
+                          blurDataURL={BLUR_DATA_URL}
+                          sizes='200px'
+                          style={{objectFit: 'cover'}}
+                        />
                       </Box>
-                    )
-                  })}
-                </AccordionDetails>
-              </Accordion>
-            ) : (
-              paroles.length === 0 ? (
-                <Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Aucune parole pour le moment</strong></Typography>
-              ) : (
-                <Box>
-                  <Typography gutterBottom textalign='center' variant='body1' component='h2'><strong>Parole</strong></Typography>
-                  <Paper sx={{height: '100%', paddingBlock: 2}}>
-                    <MizikLyen anPawol={paroles[0]} kuveti={paroles[0].couverture?.formats?.thumbnail || formatKuveti(paroles[0].couverture)} />
-                  </Paper>
-                </Box>
-              )
-            )}
-          </Box>
+                    </Link>
+                  </Grid>
+                )}
+                <Grid size={{xs: 12, sm: coverUrl ? 8 : 12}}>
+                  <CardContent>
+                    <Typography gutterBottom variant='subtitle1' sx={{fontWeight: 700}}>
+                      <Link href={`/paroles/${titrePhare.slug}`} style={{color: 'inherit', textDecoration: 'none'}}>
+                        {titrePhare.titre}
+                      </Link>
+                    </Typography>
+                    <Typography variant='caption' sx={{color: 'text.secondary', display: 'block', mb: 1}}>
+                      Écouter sur
+                    </Typography>
+                    <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 1}}>
+                      {titrePhare.streamAudio.map(lyen => (
+                        <StreamButton key={lyen.url} lyen={lyen} />
+                      ))}
+                    </Box>
+                  </CardContent>
+                </Grid>
+              </Grid>
+            </Card>
+          </Grid>
+        )}
+
+        <Grid size={12}>
+          {paroles.length > 1 ? (
+            <Accordion>
+              <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls='panel-teks-content' id='panel-teks-header'>
+                <Typography sx={{marginRight: 2}} variant='body1'><strong>Liste des paroles</strong></Typography>
+                <Chip color='primary' label={paroles.length} size='small' variant='contained' />
+              </AccordionSummary>
+              <AccordionDetails sx={{paddingInline: 0}}>
+                {sortedTeks.map(anPawol => {
+                  const {couverture} = anPawol
+                  const kuvetiFormat = formatKuveti(couverture, 'thumbnail')
+                  return (
+                    <Box key={anPawol.id} sx={{paddingBlock: 0.5}}>
+                      <MizikLyen anPawol={anPawol} kuveti={kuvetiFormat} />
+                    </Box>
+                  )
+                })}
+              </AccordionDetails>
+            </Accordion>
+          ) : (paroles.length === 0 ? (
+            <Typography textAlign='center' variant='body1' color='text.secondary'>
+              Aucune parole pour le moment
+            </Typography>
+          ) : (
+            <Box>
+              <Typography gutterBottom variant='body1'><strong>Parole</strong></Typography>
+              <Paper sx={{paddingBlock: 2}}>
+                <MizikLyen anPawol={paroles[0]} kuveti={formatKuveti(paroles[0].couverture, 'thumbnail')} />
+              </Paper>
+            </Box>
+          ))}
         </Grid>
       </Grid>
-      <Box sx={{textAlign: 'center', marginBlock: 3}} >
+
+      <Box sx={{textAlign: 'center', my: 4}}>
         <Link passHref href='/awtis'>
           <Button variant='outlined' startIcon={<KeyboardBackspaceIcon />}>
             Retour aux artistes
           </Button>
         </Link>
       </Box>
+
       {esByografiOuve && (
         <AwtisBiyografi
           alias={alias}

components/awtis/awtis-kat.js

@@ -10,14 +10,17 @@ import Card from '@mui/material/Card'
 import CardMedia from '@mui/material/CardMedia'
 import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
 
 import {styled} from '@mui/material/styles'
+import VerifiedIcon from '@mui/icons-material/Verified'
 
+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'
 
 const classes = {
   root: `${PREFIX}-root`,
@@ -55,19 +58,32 @@ export default function AwtisKat({artiste}) {
   const router = useRouter()
   const [esByografiOuve, meteEsByografiOuve] = useState(false)
 
-  const {alias, biographie, paroles, photo, slug} = artiste
+  const {alias, biographie, paroles, photo, slug, isExclusiveArtist} = artiste
 
   return (
     <Grid size={{xs: 12, sm: 6, md: 4}}>
       <Kat>
-        <Card sx={{maxWidth: 340}}>
-          <CardActionArea onClick={() => router.push(`${SITE_URL}/awtis/${slug}`)}>
+        <Card sx={{maxWidth: 340, position: 'relative', ...(isExclusiveArtist && {outline: '2px solid #FFD700'})}}>
+          {isExclusiveArtist && (
+            <Chip
+              icon={<VerifiedIcon sx={{fontSize: 14}} />}
+              label={EXCLUSIVE_LABEL}
+              size='small'
+              sx={{
+                position: 'absolute', top: 8, left: 8, zIndex: 1,
+                bgcolor: '#FFD700', color: '#000',
+                fontWeight: 700, fontSize: '0.7rem',
+                '& .MuiChip-icon': {color: '#000'},
+              }}
+            />
+          )}
+          <CardActionArea onClick={() => router.push(`/awtis/${slug}`)}>
             <CardMedia
               className={classes.media}
               component='img'
               alt={alias}
-              image={`${photo?.url ? `${IMAGE_URL}${photo?.formats?.thumbnail?.url || photo?.url}` : noImageUrl}`}
-            loading='lazy'
+              image={`${photo?.url ? `${IMAGE_URL}${formatKuveti(photo, 'thumbnail')?.url}` : noImageUrl}`}
+              loading='lazy'
               title={alias}
             />
             <CardContent>

components/awtis/cheche-awtis.js

@@ -5,10 +5,10 @@ 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'
+import {formatKuveti} from '../../lib/kuveti'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
@@ -28,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 {
@@ -49,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 (
     <Container
-      sx={{ display: 'flex', justifyContent: 'center', marginBottom: 3 }}
+      sx={{display: 'flex', justifyContent: 'center', marginBottom: 3}}
     >
       <Autocomplete
         autoHighlight
@@ -69,35 +67,35 @@ export default function ChecheAwtis() {
         noOptionsText='Aucun résultat'
         id='cheche-awtis'
         options={sortedOptions}
-        groupBy={(option) => 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 (
             <li key={key} {...rest}>
               <Avatar
-                style={{ marginRight: 8 }}
+                style={{marginRight: 8}}
                 alt={option?.alias}
-                src={`${IMAGE_URL}${option?.photo?.formats?.thumbnail?.url || option?.photo?.url || ''}`}
+                src={`${IMAGE_URL}${formatKuveti(option?.photo, 'thumbnail')?.url || ''}`}
               />
               {option?.alias}
             </li>
-          );
+          )
         }}
-        sx={{ width: 300 }}
-        renderInput={(params) => (
+        sx={{width: 300}}
+        renderInput={params => (
           <TextField
             {...params}
             label='Rechercher un artiste'
             slotProps={{
               ...params.slotProps,
-              htmlInput: { ...params.slotProps.htmlInput },
+              htmlInput: {...params.slotProps.htmlInput},
             }}
           />
         )}
         onChange={(event, newValue) => {
-          router.push(`/awtis/${newValue.slug}`);
+          router.push(`/awtis/${newValue.slug}`)
         }}
         onOpen={() => setOpen(true)}
         onClose={() => setOpen(false)}

components/awtis/mizik-lis.js

@@ -34,7 +34,7 @@ export default function MizikLis({niAwtis, paroles, meteEsMobilOuve}) {
       itemContent={index => {
         const anPawol = pawol[index]
         const {couverture} = anPawol
-        const kuvetiFormat = couverture?.formats?.thumbnail || formatKuveti(couverture)
+        const kuvetiFormat = formatKuveti(couverture, 'thumbnail')
 
         return (
           <MizikLyen niAwtis={niAwtis} anPawol={anPawol} kuveti={kuvetiFormat} slug={params.slug} meteEsMobilOuve={meteEsMobilOuve} />

components/awtis/mizik-lyen.js

@@ -12,7 +12,7 @@ import LibraryMusicIcon from '@mui/icons-material/LibraryMusic'
 import ExplicitIcon from '@mui/icons-material/Explicit'
 
 import {esBrandNew} from '../../lib/date'
-import {getAlias} from '../../lib/utils/format'
+import {getAlias} from '../../lib/utils/get-alias'
 
 const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
@@ -20,6 +20,7 @@ export default function MizikLyen({niAwtis, anPawol, kuveti, slug, meteEsMobilOu
   return (
     <Link
       passHref
+      prefetch={false}
       href={`/paroles/${anPawol.slug}#${anPawol.slug}`}
       style={{textDecoration: 'none', width: '100%', display: 'flex', alignItems: 'center'}}
       onClick={() => meteEsMobilOuve(false)}

components/awtis/social-buttons.js

@@ -0,0 +1,81 @@
+'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'
+import {
+  Mastodon, Peertube,
+  Instagram, Youtube, Tiktok,
+  Spotify, Deezer, Applemusic, Bandcamp, Soundcloud,
+  Facebook, Twitter,
+} 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},
+  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},
+}
+
+export function SocialButton({rezo}) {
+  const config = SOCIAL_CONFIG[rezo.plateforme] ?? {label: rezo.plateforme, bg: '#555', color: '#fff', Icon: null}
+  const PlatformIcon = config.Icon
+
+  if (PlatformIcon) {
+    return (
+      <Tooltip title={config.label}>
+        <IconButton
+          component='a'
+          href={rezo.url}
+          target='_blank'
+          rel='noopener noreferrer'
+          size='small'
+          sx={{
+            bgcolor: config.bg,
+            width: 34,
+            height: 34,
+            '&:hover': {bgcolor: config.bg, opacity: 0.8},
+          }}
+        >
+          <PlatformIcon size={17} color={config.color} />
+        </IconButton>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <Tooltip title={rezo.url}>
+      <Chip
+        clickable
+        label={config.label}
+        component='a'
+        href={rezo.url}
+        target='_blank'
+        rel='noopener noreferrer'
+        size='small'
+        sx={{bgcolor: config.bg, color: config.color, fontWeight: 600}}
+      />
+    </Tooltip>
+  )
+}
+
+SocialButton.propTypes = {
+  rezo: PropTypes.shape({
+    plateforme: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }).isRequired
+}

components/cc/license-modal.js

@@ -57,7 +57,7 @@ export default function LicenseModal({license, sourceOriginale, remixes}) {
         <DialogContent dividers>
           {sourceOriginale && (
             <Box sx={{mb: 3}}>
-              <Typography variant='overline' color='text.secondary' display='block' gutterBottom>
+              <Typography gutterBottom variant='overline' color='text.secondary' display='block'>
                 Basé sur
               </Typography>
               <Link href={`/paroles/${sourceOriginale.slug}`} underline='hover' color='inherit'>
@@ -76,7 +76,7 @@ export default function LicenseModal({license, sourceOriginale, remixes}) {
           )}
           {remixes && (
             <Box sx={{mb: 3}}>
-              <Typography variant='overline' color='text.secondary' display='block' gutterBottom>
+              <Typography gutterBottom variant='overline' color='text.secondary' display='block'>
                 Déclinaisons
               </Typography>
               {remixes.map(remix => (

components/cgu/cgu-dialog.js

@@ -2,7 +2,6 @@ import {useRef, useEffect} from 'react'
 import {styled, useTheme} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography} from '@mui/material'
-import {useRouter} from 'next/navigation'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import Cgu from '.'
 
@@ -23,17 +22,11 @@ const CGU_DOWNLOAD_LINK = process.env.NEXT_PUBLIC_CGU_DOWNLOAD_LINK
 export default function CGUDialog({open, setOpen}) {
   const theme = useTheme()
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
-  const router = useRouter()
 
   const handleClose = () => {
     setOpen(false)
   }
 
-  const handleClick = event => {
-    event.preventDefault()
-    router.push(CGU_DOWNLOAD_LINK)
-  }
-
   const descriptionElementRef = useRef(null)
   useEffect(() => {
     if (open) {
@@ -64,7 +57,24 @@ export default function CGUDialog({open, setOpen}) {
             id='scroll-dialog-description'
             tabIndex={-1}
           >
-            <Cgu />
+            {CGU_DOWNLOAD_LINK ? (
+              <div style={{textAlign: 'center', padding: '2rem'}}>
+                <Typography paragraph>
+                  Consultez nos CGU et notre politique de confidentialité :
+                </Typography>
+                <Button
+                  variant='contained'
+                  component='a'
+                  href={CGU_DOWNLOAD_LINK}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  Consulter les CGU
+                </Button>
+              </div>
+            ) : (
+              <Cgu />
+            )}
           </Typography>
         </DialogContent>
         <DialogActions>

components/cgu/index.js

@@ -71,7 +71,7 @@ export default function Cgu() {
         Le responsable publication est une personne morale
       </Typography>
       <Typography variant='body1'>
-        <strong>Réalisation</strong> : ORGANISATION KA INTERNATIONALE (OKI)
+        <strong>Réalisation</strong> : Cédric Pronzola
       </Typography>
       <List>
         <ListItem>
@@ -79,7 +79,7 @@ export default function Cgu() {
             <ArrowRightAltIcon />
           </ListItemIcon>
           <ListItemText>
-            <strong>Courriel</strong> : <Link href='mailto:kontak@o-k-i.net'><strong>kontak@o-k-i.net</strong></Link>
+            <strong>Courriel</strong> : <Link href='mailto:contact@cedric-pronzola.dev'><strong>contact@cedric-pronzola.dev</strong></Link>
           </ListItemText>
         </ListItem>
         <ListItem>
@@ -87,7 +87,7 @@ export default function Cgu() {
             <ArrowRightAltIcon />
           </ListItemIcon>
           <ListItemText>
-            <strong>WEB</strong> : <Link target='_blank' rel='noreferrer' href='https://o-k-i.net'><strong>o-k-i.net</strong></Link>
+            <strong>WEB</strong> : <Link target='_blank' rel='noreferrer' href='https://cedric-pronzola.dev'><strong>cedric-pronzola.dev</strong></Link>
           </ListItemText>
         </ListItem>
         <ListItem>
@@ -530,7 +530,7 @@ export default function Cgu() {
         10. Propriété intellectuelle et licence
       </Typography>
 
-      <Typography paragraph='true' gutterBottom variant='body1'>
+      <Typography gutterBottom paragraph='true' variant='body1'>
         Le site internet <Link href='https://pawol.nu'><strong>pawol.nu</strong></Link> et les éléments qui y sont accessibles
         (textes, images, graphismes, logos, vidéos, icônes, sons, etc.) sont, sauf mention contraire,
         mis à disposition sous la licence <Link href='https://www.gnu.org/licenses/agpl-3.0.html' target='_blank' rel='noopener noreferrer'> <strong>GNU Affero General Public License Version 3 (AGPL-3.0)</strong></Link>. Cette licence garantit aux utilisateurs les libertés suivantes :
@@ -585,7 +585,7 @@ export default function Cgu() {
       </Typography>
 
       <Typography gutterBottom variant='caption' >
-        Dernières modifications le 12/05/2026
+        Dernières modifications le 26/06/2026
       </Typography>
     </Root>
   )

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'}</Typography>
+      }}
+      >{isHaute ? 'Haute' : 'Faible'}</Typography>
     )
   }
 
@@ -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 => {

components/files/kits-dialog.js

@@ -0,0 +1,78 @@
+import {useState} from 'react'
+import PropTypes from 'prop-types'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import {useTheme} from '@mui/material/styles'
+
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
+import {Nextcloud} from '@icons-pack/react-simple-icons'
+
+const PLATFORM_ICON = {
+  NIYAJ: Nextcloud,
+  kDrive: CloudDownloadIcon,
+}
+
+export default function KitsDialog({kits}) {
+  const [open, setOpen] = useState(false)
+  const theme = useTheme()
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <Button endIcon={<CloudDownloadIcon />} sx={{marginBottom: 2}} variant='outlined' onClick={handleClickOpen}>
+        Kits
+      </Button>
+      <Dialog
+        fullScreen={fullScreen}
+        open={open}
+        aria-labelledby='KitsDialog'
+        onClose={handleClose}
+      >
+        <DialogTitle>Télécharger un kit</DialogTitle>
+        <DialogContent dividers>
+          <List>
+            {kits.map(kit => {
+              const PlatformIcon = PLATFORM_ICON[kit.plateforme] ?? CloudDownloadIcon
+              return (
+                <ListItem key={kit.url} disablePadding>
+                  <ListItemButton component='a' href={kit.url} target='_blank' rel='noopener noreferrer'>
+                    <ListItemIcon>
+                      <PlatformIcon />
+                    </ListItemIcon>
+                    <ListItemText primary={kit.type} secondary={kit.plateforme} />
+                  </ListItemButton>
+                </ListItem>
+              )
+            })}
+          </List>
+        </DialogContent>
+        <DialogActions>
+          <Button autoFocus onClick={handleClose}>
+            Fermer
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
+
+KitsDialog.propTypes = {
+  kits: PropTypes.array.isRequired
+}

components/head-layout.js

@@ -5,6 +5,9 @@ import Navigasyon from './navigasyon'
 
 const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
 const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
+const orgName = process.env.NEXT_PUBLIC_ORG_NAME || 'OKI'
+const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
 
 export default function HeadLayout({
   children,
@@ -20,38 +23,38 @@ export default function HeadLayout({
   return (
     <div>
       <Head prefix='website: https://ogp.me/ns/website#'>
-        <title>{`${title ? `PAWÒL-NU | ${title}` : 'PAWÒL-NU. Paroles et traductions.'}`}</title>
+        <title>{`${title ? `${siteName} | ${title}` : siteName}`}</title>
         <link rel='canonical' href={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
         <link rel='manifest' href='/manifest.json' />
         <link rel='icon' type='image/x-icon' sizes='32x32' href='/favicon.ico' />
         <link rel='apple-touch-icon' href='/favicon.ico' />
         <meta name='monetization' content='$ilp.uphold.com/q7MFmYWNpwnr' />
-        <meta name='application-name' content='PAWÒL-NU. Paroles et traductions.' />
+        <meta name='application-name' content={siteName} />
         <meta name='twitter:card' content='summary_large_image' />
         <meta name='twitter:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
-        <meta name='twitter:title' content={`${title ? title : 'PAWÒL-NU. Paroles et traductions.'}`} />
-        <meta name='twitter:description' content={`${summary ? summary : 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
+        <meta name='twitter:title' content={`${title ? title : siteName}`} />
+        <meta name='twitter:description' content={`${summary ? summary : process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
         <meta name='twitter:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-192x192.png`}`} />
-        <meta name='twitter:creator' content='@OrganisationKA' />
-        <meta name='twitter:site' content='@OrganisationKA' />
+        <meta name='twitter:creator' content={twitterHandle} />
+        <meta name='twitter:site' content={twitterHandle} />
         <meta name='theme-color' content='#303030' />
         <meta name='apple-mobile-web-app-status-bar' content='#303030' />
         <meta charSet='utf-8' />
-        <meta name='description' content={`${summary ? summary : 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
-        <meta name='author' content='OKI' />
+        <meta name='description' content={`${summary ? summary : process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
+        <meta name='author' content={orgName} />
         <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width' />
         <meta property='og:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
         <meta property='og:type' content='website' />
-        <meta property='og:site_name' content={`${title ? title : 'PAWÒL-NU. Paroles et traductions.'}`} />
-        <meta property='og:title' content={`${title ? title : 'PAWÒL-NU. Paroles et traductions.'}`} />
-        <meta property='og:description' content={`${summary ? summary : 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
+        <meta property='og:site_name' content={`${title ? title : siteName}`} />
+        <meta property='og:title' content={`${title ? title : siteName}`} />
+        <meta property='og:description' content={`${summary ? summary : process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
         <meta property='og:locale' content='fr_FR' />
         <meta property='og:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-512x512.png`}`} />
         <meta property='og:image:secure_url' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-512x512.png`}`} />
         <meta property='og:image:type' content={imageMime ? imageMime : 'image/png'} />
         <meta property='og:image:width' content={imageWidth ? imageWidth : '512'} />
         <meta property='og:image:height' content={imageHeight ? imageHeight : '512'} />
-        <meta property='og:image:alt' content={`${title && imageUrl ? title : 'PAWÒL-NU Logo'} | PAWÒL-NU. Paroles et traductions.`} />
+        <meta property='og:image:alt' content={`${title && imageUrl ? title : `${siteName} Logo`} | ${siteName}`} />
       </Head>
       <Navigasyon selectedTab={tab} />
       {children}

components/komante/ekri-komante.js

@@ -1,156 +0,0 @@
-import {useCallback, useEffect, useState, forwardRef} from 'react'
-import PropTypes from 'prop-types'
-import axios from 'axios'
-import {
-  TextField,
-  Container,
-  Button,
-  Snackbar,
-  LinearProgress,
-  Typography
-} from '@mui/material'
-import MuiAlert from '@mui/material/Alert'
-
-const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337/api'
-
-const Alert = forwardRef(function Alert(props, ref) {
-  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
-})
-function EkriKomante({session, paroleId, meteEsKomanteOuve}) {
-  const {jwt, user} = session
-  const [komante, meteKomante] = useState({kontni: ''})
-  const [ere, meteEre] = useState('')
-  const [sikse, meteSikse] = useState('')
-  const [chaje, meteChaje] = useState(false)
-  const [esOuve, meteEsOuve] = useState(false)
-
-  const handleClick = async () => {
-    meteChaje(true)
-    const {kontni} = komante
-
-    if (kontni === '') {
-      meteEre({error: {message: 'Champ obligatoire'}})
-      meteChaje(false)
-
-      return
-    }
-
-    const headers = {
-      'content-type': 'application/json',
-      Authorization: `Bearer ${jwt}`
-    }
-
-    try {
-      await axios.post(`${API_URL}/commentaires`, {
-        data: {
-          contenu: kontni,
-          parole: paroleId,
-          user: {
-            id: user.id,
-            username: user.username,
-            email: user.email
-          },
-          datePublication: new Date()
-        }
-      }, {
-        headers
-      })
-
-      meteSikse('Commentaire envoyé avec succès. Il apparaîtra sur le site après validation.')
-      meteChaje(false)
-    } catch (error) {
-      meteEre(error?.response?.data)
-      meteChaje(false)
-    }
-  }
-
-  const handleUpdate = useCallback(update => {
-    meteKomante({...komante, ...update})
-  }, [komante])
-
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return
-    }
-
-    meteEsOuve(false)
-    meteSikse('')
-    meteEre('')
-    meteEsKomanteOuve(false)
-  }
-
-  const handleReset = () => {
-    meteKomante({kontni: ''})
-  }
-
-  useEffect(() => {
-    if (sikse) {
-      meteEsOuve(true)
-      handleReset()
-    }
-  }, [sikse])
-
-  useEffect(() => {
-    if (ere) {
-      meteEsOuve(true)
-    }
-  }, [ere])
-
-  return (
-    <Container maxWidth='sm'>
-      <form noValidate autoComplete='off'>
-        <TextField
-          fullWidth
-          multiline
-          required
-          helperText='*Obligatoire. 500 caractères maximum'
-          style={{marginTop: '1em'}}
-          id='komante'
-          label='Commentaire'
-          value={komante.kontni}
-          rows={8}
-          variant='outlined'
-          onChange={event => handleUpdate({kontni: event.target.value})}
-        />
-      </form>
-      <div>
-        <Button
-          fullWidth
-          disabled={chaje || komante.komante === ''}
-          style={{marginBlock: 20}}
-          variant='contained'
-          color='primary'
-          onClick={handleClick}
-        >
-          <Typography style={{fontWeight: 'bold'}}>
-            Valider
-          </Typography>
-        </Button>
-        {chaje && <LinearProgress size={24} style={{width: '100%', marginBlock: '1em'}} />}
-      </div>
-      {sikse && (
-        <Snackbar open={esOuve} autoHideDuration={10_000} onClose={handleClose}>
-          <Alert severity='success' onClose={handleClose}>
-            <strong>{sikse}</strong>
-          </Alert>
-        </Snackbar>
-      )}
-      {ere && (
-        <Snackbar open={esOuve} autoHideDuration={10_000} onClose={handleClose}>
-          <Alert severity='error' onClose={handleClose}>
-            <strong>Une erreur s’est produite</strong> : <i>{ere?.error?.message}</i>
-          </Alert>
-        </Snackbar>
-      )}
-    </Container>
-  )
-}
-
-EkriKomante.propTypes = {
-  session: PropTypes.object.isRequired,
-  paroleId: PropTypes.number.isRequired,
-  meteEsKomanteOuve: PropTypes.func.isRequired
-}
-
-export default EkriKomante
-

components/komante/komante-list.js

@@ -1,67 +0,0 @@
-import PropTypes from 'prop-types'
-import {format} from 'date-fns'
-import {fr} from 'date-fns/locale'
-import {styled} from '@mui/material/styles'
-
-import {
-  Typography,
-  Divider,
-  List,
-  ListItemText
-} from '@mui/material'
-
-import {formatJsonString} from '../../lib/utils/format'
-
-const PREFIX = 'komante-list'
-
-const classes = {
-  root: `${PREFIX}-root`,
-  inline: `${PREFIX}-inline`
-}
-
-const StyledList = styled(List)((
-  {
-    theme
-  }
-) => ({
-  [`&.${classes.root}`]: {
-    width: '100%',
-    maxWidth: '36ch',
-    backgroundColor: theme.palette.background.paper
-  },
-
-  [`& .${classes.inline}`]: {
-    display: 'inline'
-  }
-}))
-
-export default function KomanteList({commentaires}) {
-  return (
-    <StyledList className={classes.root}>
-      {commentaires.map(({id, user, contenu, datePublication}) => (
-        <div key={id}>
-          <ListItemText
-            primary={
-              <Typography gutterBottom style={{textDecoration: 'underline'}} variant='body1'>
-                <small>{user.username}</small>
-              </Typography>
-            }
-          />
-          <ListItemText
-            primary={formatJsonString(contenu)}
-            secondary={
-              <Typography gutterBottom style={{marginBlock: 5, fontStyle: 'italic'}} variant='caption' display='block'>
-                {format(new Date(datePublication), 'Pp', {locale: fr})}
-              </Typography>
-            }
-          />
-          <Divider style={{marginBottom: '1em'}} />
-        </div>
-      ))}
-    </StyledList>
-  )
-}
-
-KomanteList.propTypes = {
-  commentaires: PropTypes.array.isRequired
-}

components/komante/vwe-komante.js

@@ -1,136 +0,0 @@
-import {useState, useEffect, useRef} from 'react'
-import {styled} from '@mui/material/styles'
-import PropTypes from 'prop-types'
-import {useSession} from 'next-auth/react'
-
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Button,
-  Typography,
-  Badge
-} from '@mui/material'
-import {useRouter} from 'next/navigation'
-import Koneksyon from '../sesyon/koneksyon'
-import KomanteList from './komante-list'
-import EkriKomante from './ekri-komante'
-
-const PREFIX = 'vwe-komante'
-
-const classes = {
-  tooltip: `${PREFIX}-tooltip`,
-  margin: `${PREFIX}-margin`,
-  extendedIcon: `${PREFIX}-extendedIcon`
-}
-
-const Root = styled('div')((
-  {
-    theme
-  }
-) => ({
-  [`& .${classes.margin}`]: {
-    margin: theme.spacing(1)
-  },
-
-  [`& .${classes.extendedIcon}`]: {
-    marginRight: theme.spacing(1)
-  }
-}))
-
-export default function VweKomante({commentaires, parole, paroleId}) {
-  const [esOuve, meteEsOuve] = useState(false)
-  const [esKoneksyonOuve, meteEsKoneksyonOuve] = useState(false)
-  const [esKomenteOuve, meteEsKomanteOuve] = useState(false)
-  const {data: session} = useSession()
-  const router = useRouter()
-
-  const handleClick = () => {
-    meteEsOuve(true)
-  }
-
-  const handleClose = () => {
-    meteEsOuve(false)
-  }
-
-  const descriptionElementRef = useRef(null)
-  useEffect(() => {
-    if (esOuve) {
-      const {current: descriptionElement} = descriptionElementRef
-      if (descriptionElement !== null) {
-        descriptionElement.focus()
-      }
-    }
-  }, [esOuve])
-
-  return (
-    <Root>
-      <Badge badgeContent={commentaires.length} color='primary'>
-        <Button sx={{marginBlock: 3}} variant='outlined' onClick={handleClick}>
-          Voir les commentaires
-        </Button>
-      </Badge>
-      <Dialog
-        open={esOuve}
-        scroll='paper'
-        aria-labelledby='scroll-dialog-title'
-        aria-describedby='scroll-dialog-description'
-        onClose={handleClose}
-      >
-        <DialogTitle align='center' id='scroll-dialog-title'>Commentaires</DialogTitle>
-        <DialogContent dividers>
-          <Typography
-            ref={descriptionElementRef}
-            variant='inherit'
-            id='scroll-dialog-description'
-            tabIndex={-1}
-            component='div'
-          >
-            {commentaires.length > 0 ? (
-              <KomanteList commentaires={commentaires} />
-            ) : (
-              <Typography component='div' align='center'>
-                Aucun commentaire
-              </Typography>
-            )}
-          </Typography>
-        </DialogContent>
-        <DialogActions align='center' >
-          {session && session.user && !esKomenteOuve && (
-            <Button fullWidth color='primary' onClick={() => meteEsKomanteOuve(true)}>
-              Ajouter un commentaire
-            </Button>
-          )}
-          {!session && !esKoneksyonOuve && (
-            <Button fullWidth color='primary' onClick={() => meteEsKoneksyonOuve(true)}>
-              Se connecter pour commenter
-            </Button>
-          )}
-          {!session && esKoneksyonOuve && (
-            <Koneksyon chimen={router.asPath} />
-          )}
-        </DialogActions>
-        {!session && esKoneksyonOuve && (
-          <Button style={{marginBlock: 10}} color='secondary' onClick={() => meteEsKoneksyonOuve(false)}>
-            <strong>Annuler</strong>
-          </Button>
-        )}
-        {session && session.user && esKomenteOuve && (
-          <>
-            <EkriKomante session={session} parole={parole} paroleId={paroleId} meteEsKomanteOuve={meteEsKomanteOuve} />
-            <Button fullWidth style={{marginBottom: 10}} color='primary' onClick={() => meteEsKomanteOuve(false)}>
-              Fermer
-            </Button>
-          </>
-        )}
-      </Dialog>
-    </Root>
-  )
-}
-
-VweKomante.propTypes = {
-  commentaires: PropTypes.array,
-  parole: PropTypes.object.isRequired,
-  paroleId: PropTypes.number.isRequired
-}

components/navigasyon.js

@@ -1,15 +1,11 @@
 'use client'
 
-import {useState} from 'react'
-import PropTypes from 'prop-types'
 import {useRouter, usePathname} from 'next/navigation'
 
 import {styled} from '@mui/material/styles'
 import AppBar from '@mui/material/AppBar'
 import Tabs, {tabsClasses} from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
-import Typography from '@mui/material/Typography'
-import Box from '@mui/material/Box'
 import {useMediaQuery} from '@mui/material'
 
 import MusicNoteIcon from '@mui/icons-material/MusicNote'
@@ -49,32 +45,6 @@ const tabPath = {
   awtis: 3,
 }
 
-function TabPanel(props) {
-  const {children, value, index, ...other} = props
-
-  return (
-    <div
-      role='tabpanel'
-      hidden={value !== index}
-      id={`scrollable-force-tabpanel-${index}`}
-      aria-labelledby={`scrollable-force-tab-${index}`}
-      {...other}
-    >
-      {value === index && (
-        <Box p={3}>
-          <Typography component='div'>{children}</Typography>
-        </Box>
-      )}
-    </div>
-  )
-}
-
-TabPanel.propTypes = {
-  children: PropTypes.node,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired
-}
-
 function a11yProps(index) {
   return {
     id: `scrollable-force-tab-${index}`,
@@ -89,11 +59,8 @@ export default function Navigasyon() {
   const selectedTab = tabPath[selectedPath]
 
   const isMobile = useMediaQuery('(max-width:422px)')
-  const [value, setValue] = useState(0)
 
   const handleChange = (event, newValue) => {
-    setValue(newValue)
-
     if (newValue !== selectedTab) {
       router.push(tabRouteHref[newValue])
     }
@@ -103,7 +70,8 @@ export default function Navigasyon() {
     <Appdiv>
       <div className={classes.root}>
         <AppBar style={{zIndex: 1, boxShadow: 'none'}} position='fixed' color='default'>
-          {selectedTab !== undefined && <Tabs
+          {selectedTab !== undefined && (
+            <Tabs
               allowScrollButtonsMobile
               scrollButtons
               centered={Boolean(!isMobile)}
@@ -124,12 +92,8 @@ export default function Navigasyon() {
               <Tab icon={<MusicNoteIcon />} aria-label='Paroles' {...a11yProps(2)} />
               <Tab icon={<RecordVoiceOverIcon />} aria-label='Artistes' {...a11yProps(3)} />
             </Tabs>
-          }
+          )}
         </AppBar>
-        <TabPanel value={value} index={0} />
-        <TabPanel value={value} index={1} />
-        <TabPanel value={value} index={2} />
-        <TabPanel value={value} index={3} />
       </div>
     </Appdiv>
   )

components/password/new-password.js

@@ -1,202 +0,0 @@
-import {useState, forwardRef} from 'react'
-import PropTypes from 'prop-types'
-import axios from 'axios'
-import {useRouter} from 'next/navigation'
-
-import {FormControl, Snackbar, IconButton, Button, Input, InputAdornment, InputLabel, Box, Container, Typography, LinearProgress} from '@mui/material'
-import MuiAlert from '@mui/material/Alert'
-import Visibility from '@mui/icons-material/Visibility'
-import VisibilityOff from '@mui/icons-material/VisibilityOff'
-import Link from '@mui/material/Link'
-
-const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
-
-const Alert = forwardRef(function Alert(props, ref) {
-  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
-})
-
-export default function NewPassword({code}) {
-  const router = useRouter()
-  const [showPassword, setShowPassword] = useState('')
-  const [showPasswordConfirmation, setShowPasswordConfirmation] = useState('')
-  const [password, setPassword] = useState('')
-  const [passwordConfirmation, setPasswordConfirmation] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState('')
-  const [open, setOpen] = useState(true)
-  const [passwordSuccess, setPasswordSuccess] = useState(false)
-
-  const resetForm = () => {
-    setPassword('')
-    setPasswordConfirmation('')
-  }
-
-  const changePassword = async () => {
-    setLoading(true)
-    try {
-      await axios.post(`${API_URL}/auth/reset-password`, {
-        code,
-        password,
-        passwordConfirmation
-      })
-      setLoading(false)
-      setPasswordSuccess(true)
-      setTimeout(() => {
-        router.push('/pwopose')
-      }, 10_000)
-    } catch {
-      setOpen(true)
-      setError('Une erreur s’est produite. Veuillez réessayer ultérieurement')
-    }
-  }
-
-  const handleMouseDownPassword = event => {
-    event.preventDefault()
-  }
-
-  const handleMouseDownPasswordConfirmation = event => {
-    event.preventDefault()
-  }
-
-  const handleKeyUpPassword = event => {
-    if (event.keyCode === 13) {
-      handleClick()
-    }
-  }
-
-  const handleKeyUpPasswordConfirmation = event => {
-    if (event.keyCode === 13) {
-      handleClick()
-    }
-  }
-
-  const handleClick = async () => {
-    if (password !== passwordConfirmation) {
-      setOpen(true)
-      setError('Les 2 mots de passe de correspondent pas')
-      return
-    }
-
-    if (password.length < 6) {
-      setOpen(true)
-      setError('Le mot de passe est trop court, 6 caratères minimum')
-      return
-    }
-
-    await changePassword()
-    setLoading(false)
-    resetForm()
-  }
-
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return
-    }
-
-    setOpen(false)
-    setError('')
-  }
-
-  return (
-    <Container sx={{marginTop: 2}} maxWidth='sm'>
-      <Box sx={{width: '100%'}}>
-        <Typography sx={{textAlign: 'center'}} variant='h5' component='div'>Nouveau mot de passe</Typography>
-        <FormControl fullWidth style={{marginTop: '1em'}}>
-          <InputLabel htmlFor='password'>Mot de passe</InputLabel>
-          <Input
-            value={password}
-            name='register-password'
-            type={showPassword ? 'text' : 'password'}
-            id='register-password'
-            endAdornment={
-              <InputAdornment position='end'>
-                <IconButton
-                  aria-label='password visibility'
-                  size='large'
-                  onClick={() => setShowPassword(!showPassword)}
-                  onMouseDown={handleMouseDownPassword}
-                >
-                  {showPassword ? <Visibility /> : <VisibilityOff />}
-                </IconButton>
-              </InputAdornment>
-            }
-            onChange={event => setPassword(event.target.value)}
-            onKeyUp={handleKeyUpPassword}
-          />
-        </FormControl>
-        <FormControl fullWidth style={{marginTop: '1em'}}>
-          <InputLabel htmlFor='password'>Vérification du mot de passe</InputLabel>
-          <Input
-            value={passwordConfirmation}
-            name='verification-password'
-            type={showPasswordConfirmation ? 'text' : 'password'}
-            id='verification-password'
-            error={password !== passwordConfirmation}
-            endAdornment={
-              <InputAdornment position='end'>
-                <IconButton
-                  aria-label='password visibility'
-                  size='large'
-                  onClick={() => setShowPasswordConfirmation(!showPassword)}
-                  onMouseDown={handleMouseDownPasswordConfirmation}
-                >
-                  {showPasswordConfirmation ? <Visibility /> : <VisibilityOff />}
-                </IconButton>
-              </InputAdornment>
-            }
-            onChange={event => setPasswordConfirmation(event.target.value)}
-            onKeyUp={handleKeyUpPasswordConfirmation}
-          />
-        </FormControl>
-        <Button
-          fullWidth
-          style={{marginTop: 20}}
-          variant='contained'
-          color='primary'
-          disabled={loading || password !== passwordConfirmation || password === ''}
-          onClick={handleClick}
-        >
-          <Typography style={{fontWeight: 'bold'}}>
-            Changer de mot de passe
-          </Typography>
-        </Button>
-        <Button
-          fullWidth
-          style={{marginTop: 20}}
-          variant='outlined'
-          color='primary'
-          onClick={() => router.push('/pwopose')}
-        >
-          <Typography style={{fontWeight: 'bold'}}>
-            Retour à la page de connexion
-          </Typography>
-        </Button>
-      </Box>
-
-      {loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}
-
-      {error && (
-        <Snackbar
-          open={open}
-          autoHideDuration={6000}
-          onClose={handleClose}
-        >
-          <Alert severity='error' onClose={handleClose}><strong>{error}</strong></Alert>
-        </Snackbar>
-      )}
-
-      {passwordSuccess && (
-        <Snackbar
-          open={passwordSuccess}
-          onClose={handleClose}
-        >
-          <Alert severity='info' onClose={handleClose}>Votre changement de mot de passe a été pris en compte. Vous serez redirigé vers la page de connexion. <Link underline='hover' color='inherit' href='/pwopose'><strong>Cliquez ici si vous n’êtes pas redirigé vers la page de connexion</strong></Link></Alert>
-        </Snackbar>
-      )}
-    </Container>
-  )
-}
-
-NewPassword.propTypes = {
-  code: PropTypes.string.isRequired
-}

components/password/reset-dialog.js

@@ -1,88 +0,0 @@
-import {useState} from 'react'
-import PropTypes from 'prop-types'
-import Button from '@mui/material/Button'
-import TextField from '@mui/material/TextField'
-import Dialog from '@mui/material/Dialog'
-import DialogActions from '@mui/material/DialogActions'
-import DialogContent from '@mui/material/DialogContent'
-import DialogContentText from '@mui/material/DialogContentText'
-import DialogTitle from '@mui/material/DialogTitle'
-
-import {validateEmail} from '../../lib/utils/emails'
-import {jwennUserEpiEmail, passwordRequest} from '../../lib/oki-api'
-
-export default function ResetDialog({lyen, title, activation, content, open, setOpen, setLoading, setError, setSuccess}) {
-  const [email, setEmail] = useState('')
-
-  const forgotPasswordRequest = async () => {
-    setLoading(true)
-    try {
-      await passwordRequest(lyen, email)
-
-      if (activation) {
-        const user = await jwennUserEpiEmail(email)
-        localStorage.setItem('user-id', user?.id)
-      }
-
-      setLoading(false)
-      setSuccess(true)
-    } catch {
-      setError('Une erreur s’est produite. Veuillez réessayer ultérieurement')
-      setLoading(false)
-    }
-  }
-
-  const resetFrom = () => {
-    setEmail('')
-  }
-
-  const handleClick = async () => {
-    forgotPasswordRequest()
-    setOpen(false)
-    resetFrom()
-  }
-
-  const handleClose = () => {
-    setOpen(false)
-  }
-
-  return (
-    <div>
-      <Dialog open={open} onClose={handleClose}>
-        <DialogTitle>{title}</DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            {content}
-          </DialogContentText>
-          <TextField
-            autoFocus
-            fullWidth
-            value={email}
-            margin='dense'
-            id='email'
-            label='Adresse e-mail'
-            type='email'
-            variant='standard'
-            onChange={event => setEmail(event.target.value)}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button variant='contained' color='secondary' onClick={handleClose}>Annuler</Button>
-          <Button disabled={!validateEmail(email)} variant='contained' color='primary' onClick={handleClick}>Valider</Button>
-        </DialogActions>
-      </Dialog>
-    </div>
-  )
-}
-
-ResetDialog.propTypes = {
-  lyen: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  activation: PropTypes.bool,
-  content: PropTypes.string.isRequired,
-  open: PropTypes.bool.isRequired,
-  setOpen: PropTypes.func.isRequired,
-  setLoading: PropTypes.func.isRequired,
-  setError: PropTypes.func.isRequired,
-  setSuccess: PropTypes.func.isRequired,
-}

components/password/reset-password.js

@@ -1,75 +0,0 @@
-import {useState, forwardRef} from 'react'
-import Button from '@mui/material/Button'
-import Typography from '@mui/material/Typography'
-import Box from '@mui/material/Box'
-import Snackbar from '@mui/material/Snackbar'
-import {LinearProgress} from '@mui/material'
-import MuiAlert from '@mui/material/Alert'
-import ResetDialog from './reset-dialog'
-
-const Alert = forwardRef(function Alert(props, ref) {
-  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
-})
-
-export default function ResetPassword() {
-  const [open, setOpen] = useState(false)
-  const [error, setError] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const [success, setSuccess] = useState(false)
-
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return
-    }
-
-    setError('')
-    setSuccess(false)
-  }
-
-  return (
-    <>
-      <Box style={{marginTop: 20}}>
-        <Button
-          fullWidth
-          disabled={loading}
-          variant='outlined'
-          color='warning'
-          onClick={() => setOpen(true)}
-        >
-          <Typography style={{fontWeight: 'bold'}}>
-            Mot de passe oublié
-          </Typography>
-        </Button>
-      </Box>
-      {loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}
-      {error && (
-        <Snackbar
-          open={Boolean(error)}
-          autoHideDuration={6000}
-          onClose={handleClose}
-        >
-          <Alert severity='error' onClose={handleClose}><strong>{error}</strong></Alert>
-        </Snackbar>
-      )}
-      {success && (
-        <Snackbar
-          open={success}
-          autoHideDuration={15_000}
-          onClose={handleClose}
-        >
-          <Alert severity='success' onClose={handleClose}><strong>Email envoyé avec succès. Vous pouvez changer votre mot de passe via le lien qui vous a été envoyé.</strong></Alert>
-        </Snackbar>
-      )}
-      <ResetDialog
-        lyen='forgot-password'
-        title='Mot de passe oublié'
-        content='Indiquez l’adresse e-mail utilisée lors de votre inscription. Vous receverez des instructions par e-mail.'
-        open={open}
-        setOpen={setOpen}
-        setLoading={setLoading}
-        setError={setError}
-        setSuccess={setSuccess}
-      />
-    </>
-  )
-}

components/pwopose.js

@@ -1,113 +0,0 @@
-'use client'
-
-import {useState, useEffect, forwardRef} from 'react'
-import PropTypes from 'prop-types'
-import {useSession} from 'next-auth/react'
-import MuiAlert from '@mui/material/Alert'
-import Snackbar from '@mui/material/Snackbar'
-import Box from '@mui/material/Box'
-
-import Koneksyon from '../../components/sesyon/koneksyon'
-import Dekoneksyon from '../../components/sesyon/dekoneksyon'
-import EkriTeks from '../../components/soumet/ekri-teks'
-import Footer from '../../components/footer'
-
-import {jwennUserEpiToken, jwennUserEpiUsername} from '../../lib/oki-api'
-import NewPassword from '../../components/password/new-password'
-import ChwaTeks from '../../components/soumet/chwa-teks'
-
-const Alert = forwardRef(function Alert(props, ref) {
-  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
-})
-
-export default function Pwopose({code}) {
-  const {data: session} = useSession()
-  const [localUsername, setLocalUsername] = useState(null)
-  const [username, setUsername] = useState(null)
-  const [open, setOpen] = useState(true)
-  const [selectedTeks, setSelectedTeks] = useState(null)
-  const [canAutoTranslate, setCanAutoTranslate] = useState(false)
-
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return
-    }
-
-    setOpen(false)
-  }
-
-  useEffect(() => {
-    if (session?.jwt) {
-      const getUser = async token => {
-        const user = await jwennUserEpiToken(token)
-        setCanAutoTranslate(user.canAutoTranslate)
-      }
-
-      getUser(session.jwt)
-    }
-  })
-
-  useEffect(() => {
-    if (localStorage.getItem('username')) {
-      const username = localStorage.getItem('username')
-      setLocalUsername(username)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (localUsername) {
-      const getUser = async username => {
-        const user = await jwennUserEpiUsername(username)
-        setUsername(user?.username)
-      }
-
-      getUser(localUsername)
-    }
-  }, [localUsername])
-
-  useEffect(() => {
-    if (username && localStorage.getItem('username')) {
-      localStorage.removeItem('username')
-    }
-  }, [username])
-
-  return (
-    <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
-      <Box sx={{flexGrow: 1, marginTop: 1, marginBottom: 10}}>
-        {!session && !code && (
-          <Koneksyon
-            chimen='/pwopose'
-          />
-        )}
-
-        {!session && code && (
-          <NewPassword code={code} />
-        )}
-        {session && session.user && (
-          <>
-            <Dekoneksyon position='absolute' top={95} left={5} chimen='/pwopose' />
-            <ChwaTeks selectedTeks={selectedTeks} setSelectedTeks={setSelectedTeks} />
-            <EkriTeks canAutoTranslate={canAutoTranslate} selectedTeks={selectedTeks} setSelectedTeks={setSelectedTeks} />
-          </>
-        )}
-        {session && !session.user && (
-          <Dekoneksyon position='absolute' top={95} left={5} chimen='/pwopose' />
-        )}
-        {username && (
-          <Snackbar
-            open={open}
-            autoHideDuration={10_000}
-            onClose={handleClose}
-          >
-            <Alert severity='success' onClose={handleClose}><strong>Bonjour {username}, votre compte a été activé avec succès. Vous pouvez vous connecter.</strong></Alert>
-          </Snackbar>
-        )}
-      </Box>
-      <Footer />
-    </Box>
-  )
-}
-
-Pwopose.propTypes = {
-  code: PropTypes.string
-}

components/rezo/rezo-dialog.js

@@ -70,7 +70,7 @@ export default function RezoDialog() {
         onClose={handleClose}
       >
         <BootstrapDialogTitle id='rézo-dialog' onClose={handleClose}>
-          OKI sur le <strong>Fédiverse</strong>
+          {process.env.NEXT_PUBLIC_ORG_NAME || 'OKI'} sur le <strong>Fédiverse</strong>
         </BootstrapDialogTitle>
         <DialogContent>
           <Box>

components/sesyon/dekoneksyon.js

@@ -1,62 +0,0 @@
-import {useState} from 'react'
-import {styled} from '@mui/material/styles'
-import PropTypes from 'prop-types'
-import {signOut} from 'next-auth/react'
-import {Tooltip, Fab, Zoom} from '@mui/material'
-import ExitToAppIcon from '@mui/icons-material/ExitToApp'
-
-import Alet from '../alet'
-
-const PREFIX = 'Dekoneksyon'
-
-const classes = {
-  tooltip: `${PREFIX}-tooltip`,
-  dekoneksyon: `${PREFIX}-dekoneksyon`
-}
-
-const Root = styled('div')(() => ({
-  [`& .${classes.dekoneksyon}`]: {
-    position: props => props.position,
-    top: props => props.top,
-    left: props => props.left,
-    zIndex: 0
-  }
-}))
-
-const DekoneksonTooltip = Tooltip
-
-function Dekoneksyon({tooltipPlacement}) {
-  const [esOuve, meteEsOuve] = useState(false)
-
-  return (
-    (
-      <Root>
-        <DekoneksonTooltip
-          title='Se déconnecter'
-          placement={tooltipPlacement}
-          TransitionComponent={Zoom}
-          classes={{
-            tooltip: classes.tooltip
-          }}
-        >
-          <Fab
-            className={classes.dekoneksyon}
-            color='error'
-            aria-label='logout'
-            size='small'
-            onClick={() => meteEsOuve(true)}
-          >
-            <ExitToAppIcon />
-          </Fab>
-        </DekoneksonTooltip>
-        <Alet esOuve={esOuve} meteEsOuve={meteEsOuve} handleKonfime={() => signOut()} />
-      </Root>
-    )
-  )
-}
-
-Dekoneksyon.propTypes = {
-  tooltipPlacement: PropTypes.string
-}
-
-export default Dekoneksyon

components/sesyon/koneksyon.js

@@ -1,459 +0,0 @@
-import {useEffect, useState, forwardRef} from 'react'
-import {signIn} from 'next-auth/react'
-import {useRouter} from 'next/navigation'
-import PropTypes from 'prop-types'
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import Container from '@mui/material/Container'
-import FormControl from '@mui/material/FormControl'
-import IconButton from '@mui/material/IconButton'
-import Input from '@mui/material/Input'
-import InputAdornment from '@mui/material/InputAdornment'
-import InputLabel from '@mui/material/InputLabel'
-import LinearProgress from '@mui/material/LinearProgress'
-import Snackbar from '@mui/material/Snackbar'
-import Tab from '@mui/material/Tab'
-import Tabs from '@mui/material/Tabs'
-import Typography from '@mui/material/Typography'
-import Grid from '@mui/material/Grid'
-import Visibility from '@mui/icons-material/Visibility'
-import VisibilityOff from '@mui/icons-material/VisibilityOff'
-import MuiAlert from '@mui/material/Alert'
-import LoginIcon from '@mui/icons-material/Login'
-import AppRegistrationRoundedIcon from '@mui/icons-material/AppRegistrationRounded'
-import axios from 'axios'
-
-import {validateEmail} from '../../lib/utils/emails'
-import ResetPassword from '../password/reset-password'
-import ResetDialog from '../password/reset-dialog'
-import LoginProvider from './login-provider'
-
-const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
-const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
-
-const PROVIDERS = [
-  {
-    id: 'google',
-    title: 'Google',
-    width: 16,
-    height: 16
-  },
-  {
-    id: 'twitter',
-    title: 'Twitter',
-    width: 16,
-    height: 13
-  }
-]
-
-function TabPanel(props) {
-  const {children, value, index, ...other} = props
-
-  return (
-    <div
-      role='tabpanel'
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {value === index && (
-        <Box sx={{p: 3}}>
-          {children}
-        </Box>
-      )}
-    </div>
-  )
-}
-
-TabPanel.propTypes = {
-  children: PropTypes.node,
-  index: PropTypes.number.isRequired,
-  value: PropTypes.number.isRequired,
-}
-
-function a11yProps(index) {
-  return {
-    id: `simple-tab-${index}`,
-    'aria-controls': `simple-tabpanel-${index}`,
-  }
-}
-
-const Alert = forwardRef(function Alert(props, ref) {
-  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
-})
-
-function Koneksyon({chimen}) {
-  const [error, setError] = useState('')
-  const [loginCredentials, setLoginCredentials] = useState({username: '', password: ''})
-  const [registerCredentials, setRegisterCredentials] = useState({username: '', email: '', password: ''})
-  const [passwordVerification, setPasswordVerification] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
-  const [showRegisterPassword, setShowRegisterPassword] = useState(false)
-  const [showVerificationPassword, setShowVerificationPassword] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const [open, setOpen] = useState(true)
-  const [success, setSuccess] = useState(false)
-  const [openDialog, setOpenDialog] = useState(false)
-  const [value, setValue] = useState(0)
-  const router = useRouter()
-
-  const handleUpdate = update => {
-    setLoginCredentials({...loginCredentials, ...update})
-  }
-
-  const handleRegisterUpdate = update => {
-    setRegisterCredentials({...registerCredentials, ...update})
-  }
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue)
-  }
-
-  const register = async () => {
-    try {
-      const response = await axios.post(`${apiUrl}/auth/local/register`, {
-        ...registerCredentials
-      }, {
-        headers: {
-          'content-type': 'application/json'
-        }
-      })
-      localStorage.setItem('username', `${response?.data?.user?.username}`)
-      setSuccess(true)
-      resetRegisterForm()
-    } catch (error_) {
-      if (error_.message.endsWith(400)) {
-        setError('E-mail ou utilisateur déjà enregistré')
-      } else {
-        setError('Une erreur s’est produite')
-      }
-    }
-  }
-
-  const resetRegisterForm = () => {
-    setRegisterCredentials({username: '', email: '', password: ''})
-    setPasswordVerification('')
-  }
-
-  const handleClickLogin = async () => {
-    if (!validateEmail(loginCredentials.username) || loginCredentials.password === '') {
-      return
-    }
-
-    setLoading(true)
-    const response = await signIn('credentials', {
-      callbackUrl: `${siteUrl}${chimen}`,
-      redirect: false,
-      ...loginCredentials
-    })
-    if (response.error) {
-      setError(response.error)
-      setLoading(false)
-    } else if (response.ok) {
-      setLoading(false)
-      router.push(chimen)
-    }
-  }
-
-  const handleClickRegister = async () => {
-    setLoading(true)
-    if (!validateEmail(registerCredentials.email) || registerCredentials.password === '') {
-      return
-    }
-
-    if (registerCredentials.password !== passwordVerification) {
-      setError('Les 2 mots de passe de correspondent pas')
-      setLoading(false)
-      return
-    }
-
-    if (registerCredentials.username.length < 3) {
-      setError('Le nom d’utilisateur est trop court, 3 caratères minimum')
-      setLoading(false)
-      return
-    }
-
-    if (registerCredentials.password.length < 6) {
-      setError('Le mot de passe est trop court, 6 caratères minimum')
-      setLoading(false)
-      return
-    }
-
-    await register()
-    setLoading(false)
-  }
-
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return
-    }
-
-    setOpen(false)
-    setSuccess(false)
-    setError('')
-  }
-
-  useEffect(() => {
-    if (error) {
-      setOpen(true)
-    }
-
-    return () => {
-      setLoading(false)
-    }
-  }, [error])
-
-  const handleClickShowPassword = () => {
-    setShowPassword(!showPassword)
-  }
-
-  const handleClickShowRegisterPassword = () => {
-    setShowRegisterPassword(!showRegisterPassword)
-  }
-
-  const handleClickShowVerificationPassword = () => {
-    setShowVerificationPassword(!showVerificationPassword)
-  }
-
-  const handleMouseDownPassword = event => {
-    event.preventDefault()
-  }
-
-  const handleMouseDownRegisterPassword = event => {
-    event.preventDefault()
-  }
-
-  const handleMouseDownVerificationPassword = event => {
-    event.preventDefault()
-  }
-
-  const handleKeyUpLogin = event => {
-    if (event.keyCode === 13) {
-      handleClickLogin()
-    }
-  }
-
-  const handleKeyUpRegister = event => {
-    if (event.keyCode === 13) {
-      handleClickRegister()
-    }
-  }
-
-  return (
-    <Container sx={{marginTop: 6}} maxWidth='sm'>
-
-      <Box sx={{width: '100%'}}>
-        <Tabs centered value={value} aria-label='basic tabs example' onChange={handleChange}>
-          <Tab icon={<LoginIcon />} label='Se connecter' {...a11yProps(0)} />
-          <Tab icon={<AppRegistrationRoundedIcon />} label='S’inscrire' {...a11yProps(1)} />
-        </Tabs>
-        <TabPanel value={value} index={0}>
-
-          <Box sx={{textAlign: 'center', marginBottom: 3}}>
-            <Typography gutterBottom textalign='center'>Connectez-vous avec</Typography>
-            <Grid sx={{justifyContent: 'center'}} container columnSpacing={{xs: 1, sm: 2, md: 3}}>
-              {PROVIDERS.map(({id, title, width, height}) => (
-                <Grid sx={{marginTop: 1}} key={id}>
-                  <LoginProvider id={id} title={title} width={width} height={height} callbackUrl={`${siteUrl}${chimen}`} />
-                </Grid>
-              ))}
-            </Grid>
-          </Box>
-
-          <Box sx={{textAlign: 'center', marginBottom: 3}}>
-            <Typography>ou utilisez votre e-mail pour vous identifier</Typography>
-          </Box>
-
-          <FormControl fullWidth autoComplete='off'>
-            <InputLabel htmlFor='username'>E-mail</InputLabel>
-            <Input
-              autoComplete='new-password'
-              value={loginCredentials.username}
-              name='username'
-              type='email'
-              id='email'
-              onChange={event => handleUpdate({username: event.target.value})}
-              onKeyUp={handleKeyUpLogin}
-            />
-          </FormControl>
-
-          <FormControl fullWidth style={{marginTop: '1em'}}>
-            <InputLabel htmlFor='password'>Mot de passe</InputLabel>
-            <Input
-              autoComplete='new-password'
-              value={loginCredentials.password}
-              name='password'
-              type={showPassword ? 'text' : 'password'}
-              id='password'
-              endAdornment={
-                <InputAdornment position='end'>
-                  <IconButton
-                    aria-label='password visibility'
-                    size='large'
-                    onClick={handleClickShowPassword}
-                    onMouseDown={handleMouseDownPassword}
-                  >
-                    {showPassword ? <Visibility /> : <VisibilityOff />}
-                  </IconButton>
-                </InputAdornment>
-              }
-              onChange={event => handleUpdate({password: event.target.value})}
-              onKeyUp={handleKeyUpLogin}
-            />
-          </FormControl>
-
-          <Button
-            fullWidth
-            disabled={loading || !validateEmail(loginCredentials.username) || loginCredentials.password === ''}
-            style={{marginTop: 20}}
-            variant='contained'
-            color='primary'
-            onClick={handleClickLogin}
-          >
-            <Typography style={{fontWeight: 'bold'}}>
-              Connexion
-            </Typography>
-          </Button>
-          <ResetPassword />
-        </TabPanel>
-        <TabPanel value={value} index={1}>
-          <FormControl fullWidth>
-            <InputLabel htmlFor='register-email'>E-mail</InputLabel>
-            <Input
-              autoComplete='email'
-              value={registerCredentials.email}
-              name='register-email'
-              type='email'
-              id='register-email'
-              onChange={event => handleRegisterUpdate({email: event.target.value})}
-              onKeyUp={handleKeyUpRegister}
-            />
-          </FormControl>
-          <FormControl fullWidth style={{marginTop: '1em'}}>
-            <InputLabel htmlFor='register-username'>Nom d’utilisateur</InputLabel>
-            <Input
-              autoComplete='username'
-              value={registerCredentials.username}
-              name='register-username'
-              type='text'
-              id='register-username'
-              onChange={event => handleRegisterUpdate({username: event.target.value})}
-              onKeyUp={handleKeyUpRegister}
-            />
-          </FormControl>
-          <FormControl fullWidth style={{marginTop: '1em'}}>
-            <InputLabel htmlFor='password'>Mot de passe</InputLabel>
-            <Input
-              autoComplete='new-password' // Disable auto complete
-              value={registerCredentials.password}
-              name='register-password'
-              type={showRegisterPassword ? 'text' : 'password'}
-              id='register-password'
-              endAdornment={
-                <InputAdornment position='end'>
-                  <IconButton
-                    aria-label='password visibility'
-                    size='large'
-                    onClick={handleClickShowRegisterPassword}
-                    onMouseDown={handleMouseDownRegisterPassword}
-                  >
-                    {showRegisterPassword ? <Visibility /> : <VisibilityOff />}
-                  </IconButton>
-                </InputAdornment>
-              }
-              onChange={event => handleRegisterUpdate({password: event.target.value})}
-              onKeyUp={handleKeyUpRegister}
-            />
-          </FormControl>
-          <FormControl fullWidth style={{marginTop: '1em'}}>
-            <InputLabel htmlFor='password'>Vérification du mot de passe</InputLabel>
-            <Input
-              value={passwordVerification}
-              name='verification-password'
-              type={showVerificationPassword ? 'text' : 'password'}
-              id='verification-password'
-              error={registerCredentials.password !== passwordVerification}
-              endAdornment={
-                <InputAdornment position='end'>
-                  <IconButton
-                    aria-label='password visibility'
-                    size='large'
-                    onClick={handleClickShowVerificationPassword}
-                    onMouseDown={handleMouseDownVerificationPassword}
-                  >
-                    {showVerificationPassword ? <Visibility /> : <VisibilityOff />}
-                  </IconButton>
-                </InputAdornment>
-              }
-              onChange={event => setPasswordVerification(event.target.value)}
-              onKeyUp={handleKeyUpRegister}
-            />
-          </FormControl>
-          <Button
-            fullWidth
-            disabled={loading || !validateEmail(registerCredentials.email) || registerCredentials.username === '' || registerCredentials.password === ''}
-            style={{marginTop: 20}}
-            variant='contained'
-            color='primary'
-            onClick={handleClickRegister}
-          >
-            <Typography style={{fontWeight: 'bold'}}>
-              Inscription
-            </Typography>
-          </Button>
-          <Button
-            fullWidth
-            style={{marginTop: 20}}
-            variant='outlined'
-            color='warning'
-            onClick={() => setOpenDialog(true)}
-          >
-            <Typography style={{fontWeight: 'bold'}}>
-              Renvoyer l’e-mail de confirmation
-            </Typography>
-          </Button>
-        </TabPanel>
-      </Box>
-      <ResetDialog
-        activation
-        lyen='send-email-confirmation'
-        title='Envoi de l’e-mail de confirmation'
-        content='Si vous n’avez pas reçu l’e-mail de confirmation, renseignez le champ et validez le formulaire.'
-        open={openDialog}
-        setOpen={setOpenDialog}
-        setLoading={setLoading}
-        setError={setError}
-        setSuccess={setSuccess}
-      />
-
-      {loading && <LinearProgress size={24} style={{width: '100%'}} />}
-
-      {error && (
-        <Snackbar
-          open={open}
-          autoHideDuration={6000}
-          onClose={handleClose}
-        >
-          <Alert severity='error' onClose={handleClose}><strong>{error}</strong></Alert>
-        </Snackbar>
-      )}
-
-      {success && (
-        <Snackbar
-          open={success}
-          autoHideDuration={15_000}
-          onClose={handleClose}
-        >
-          <Alert severity='success' onClose={handleClose}><strong>Veuillez confirmer votre adresse e-mail via le lien qui vous a été envoyé.</strong></Alert>
-        </Snackbar>
-      )}
-    </Container>
-  )
-}
-
-Koneksyon.propTypes = {
-  chimen: PropTypes.string.isRequired
-}
-
-export default Koneksyon

components/sesyon/login-provider.js

@@ -1,38 +0,0 @@
-import PropTypes from 'prop-types'
-import Link from 'next/link'
-import Image from 'next/image'
-import {signIn} from 'next-auth/react'
-import Button from '@mui/material/Button'
-
-export default function LoginProvider({id, title, width, height, callbackUrl}) {
-  const hanleClick = event => {
-    event.preventDefault()
-    signIn(id, {
-      callbackUrl
-    })
-  }
-
-  return (
-    <Link passHref href='/api/auth/signin'>
-      <Button variant='outlined' color='info' startIcon={
-        <Image
-          width={width}
-          height={height}
-          alt={title}
-          src={`/images/${id === 'twitter' ? 'x' : id}.svg`}
-        />
-      } onClick={hanleClick}
-      >
-        {title}
-      </Button>
-    </Link>
-  )
-}
-
-LoginProvider.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  callbackUrl: PropTypes.string.isRequired
-}

components/soumet/ajoute-tradiksyon.js

@@ -1,141 +0,0 @@
-import {useState} from 'react'
-import {styled} from '@mui/material/styles'
-import PropTypes from 'prop-types'
-import {MenuItem, Menu, Button} from '@mui/material'
-import {uniq} from 'lodash'
-
-import OtomatikSwitch from './otomatik-switch'
-
-const PREFIX = 'AjouteTradiksyon'
-
-const classes = {
-  paper: `${PREFIX}-paper`,
-  root: `${PREFIX}-root`
-}
-
-const Root = styled('div')((
-  {
-    theme
-  }
-) => ({
-  [`& .${classes.paper}`]: {
-    border: '1px solid #d3d4d5'
-  },
-
-  [`& .${classes.root}`]: {
-    '&:focus': {
-      backgroundColor: theme.palette.primary.main,
-      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
-        color: theme.palette.common.white
-      }
-    }
-  }
-}))
-
-function StyledMenu(props) {
-  return (
-    <Menu
-      elevation={0}
-      anchorOrigin={{
-        vertical: 'top',
-        horizontal: 'center'
-      }}
-      transformOrigin={{
-        vertical: 'bottom',
-        horizontal: 'center'
-      }}
-      {...props}
-    />
-  )
-}
-
-const StyledMenuItem = MenuItem
-
-function AjouteTradiksyon({showSwitch, disableSwitch, tradiksyonOtomatik, setTradiksyonOtomatik, chwaLang, setChwaLang}) {
-  const [anchorElement, setAnchorElement] = useState(null)
-
-  const handleClick = event => {
-    setAnchorElement(event.currentTarget)
-  }
-
-  const handleClose = event => {
-    setAnchorElement(null)
-    const chwaInik = uniq([...chwaLang, event.currentTarget.id])
-    setChwaLang(chwaInik.filter(c => c !== ''))
-  }
-
-  return (
-    <>
-      {showSwitch && (
-        <OtomatikSwitch tradiksyonOtomatik={tradiksyonOtomatik} setTradiksyonOtomatik={setTradiksyonOtomatik} disabled={disableSwitch} />
-      )}
-      <Root style={{textAlign: 'center', marginTop: 20}}>
-        <Button
-          aria-controls='lang-menu'
-          variant='outlined'
-          aria-haspopup='true'
-          onClick={handleClick}
-        >
-          Ajouter une traduction <br /> 🇺🇸 🇫🇷 🇪🇸 🇩🇪 🇮🇹
-        </Button>
-        <StyledMenu
-          keepMounted
-          id='lang-menu'
-          anchorEl={anchorElement}
-          open={Boolean(anchorElement)}
-          classes={{
-            paper: classes.paper
-          }}
-          onClose={handleClose}
-        >
-          <StyledMenuItem
-            id='en'
-            classes={{
-              root: classes.root
-            }}
-            onClick={handleClose}
-          >🇺🇸 Anglais (US)</StyledMenuItem>
-          <StyledMenuItem
-            id='fr'
-            classes={{
-              root: classes.root
-            }}
-            onClick={handleClose}
-          >🇫🇷 Français</StyledMenuItem>
-          <StyledMenuItem
-            id='es'
-            classes={{
-              root: classes.root
-            }}
-            onClick={handleClose}
-          >🇪🇸 Espagnol</StyledMenuItem>
-          <StyledMenuItem
-            id='de'
-            classes={{
-              root: classes.root
-            }}
-            onClick={handleClose}
-          >🇩🇪 Allemand</StyledMenuItem>
-          <StyledMenuItem
-            id='it'
-            classes={{
-              root: classes.root
-            }}
-            onClick={handleClose}
-          >🇮🇹 Italien</StyledMenuItem>
-        </StyledMenu>
-      </Root>
-    </>
-  )
-}
-
-AjouteTradiksyon.propTypes = {
-  showSwitch: PropTypes.bool.isRequired,
-  disableSwitch: PropTypes.bool.isRequired,
-  tradiksyonOtomatik: PropTypes.bool.isRequired,
-  setTradiksyonOtomatik: PropTypes.func.isRequired,
-  chwaLang: PropTypes.array.isRequired,
-  setChwaLang: PropTypes.func.isRequired
-}
-
-export default AjouteTradiksyon

components/soumet/chwa-teks.js

@@ -1,109 +0,0 @@
-import {useState} from 'react'
-import {useSession} from 'next-auth/react'
-import PropTypes from 'prop-types'
-import Button from '@mui/material/Button'
-import Avatar from '@mui/material/Avatar'
-import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem'
-import ListItemAvatar from '@mui/material/ListItemAvatar'
-import ListItemText from '@mui/material/ListItemText'
-import DialogTitle from '@mui/material/DialogTitle'
-import Dialog from '@mui/material/Dialog'
-import {green} from '@mui/material/colors'
-import Container from '@mui/material/Container'
-import CircularProgress from '@mui/material/CircularProgress'
-import Typography from '@mui/material/Typography'
-import AudiotrackIcon from '@mui/icons-material/Audiotrack'
-
-import {jwennUserEpiToken} from '../../lib/oki-api'
-
-function Chwa(props) {
-  const {onClose, teksLis, selectedTeks, loading, open} = props
-
-  const handleClose = () => {
-    onClose(selectedTeks)
-  }
-
-  const handleListItemClick = value => {
-    onClose(value)
-  }
-
-  return (
-    <Dialog open={open} onClose={handleClose}>
-      <DialogTitle>Choisir la parole à modifier</DialogTitle>
-      {loading ? (
-        <Container sx={{textAlign: 'center', marginBottom: 1}}>
-          <CircularProgress size={20} sx={{color: '#29d'}} />
-        </Container>
-      ) : (
-        <List sx={{pt: 0}}>
-          {teksLis.length > 0 ? teksLis.map(({id, titre, artistes}) => (
-            <ListItem key={id} button onClick={() => handleListItemClick(id)}>
-              <ListItemAvatar>
-                <Avatar sx={{bgcolor: green[100], color: green[600]}}>
-                  <AudiotrackIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={`${new Intl.ListFormat('fr').format(artistes.map(({alias}) => alias))} - ${titre}`} />
-            </ListItem>
-          )) : (
-            <Typography sx={{textAlign: 'center'}} variant='button' component='div'>Aucun texte</Typography>
-          )}
-        </List>
-      )}
-    </Dialog>
-  )
-}
-
-Chwa.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  teksLis: PropTypes.array.isRequired,
-  loading: PropTypes.bool.isRequired,
-  open: PropTypes.bool.isRequired,
-  selectedTeks: PropTypes.object,
-}
-
-export default function ChwaTeks({selectedTeks, setSelectedTeks}) {
-  const {data: session} = useSession()
-  const [loading, setLoading] = useState(false)
-  const [open, setOpen] = useState(false)
-  const [teksLis, setTeksLis] = useState([])
-
-  const handleClickOpen = async () => {
-    setOpen(true)
-    setLoading(true)
-
-    const user = await jwennUserEpiToken(session?.jwt)
-    const {paroles} = user
-    const parolesList = paroles && paroles.length > 0 ? paroles : []
-
-    setTeksLis(parolesList)
-    setLoading(false)
-  }
-
-  const handleClose = value => {
-    const teks = teksLis.find(({id}) => id === value)
-    setSelectedTeks(teks)
-    setOpen(false)
-  }
-
-  return (
-    <Container sx={{textAlign: 'center', marginBottom: 1}} maxWidth='sm'>
-      <Button variant='outlined' onClick={handleClickOpen}>
-        Modifier mes paroles
-      </Button>
-      <Chwa
-        selectedTeks={selectedTeks}
-        teksLis={teksLis}
-        open={open}
-        loading={loading}
-        onClose={handleClose}
-      />
-    </Container>
-  )
-}
-
-ChwaTeks.propTypes = {
-  selectedTeks: PropTypes.object,
-  setSelectedTeks: PropTypes.func.isRequired,
-}

components/soumet/ekri-teks.js

@@ -1,433 +0,0 @@
-import {useCallback, useEffect, forwardRef, useState} from 'react'
-import {styled} from '@mui/material/styles'
-import PropTypes from 'prop-types'
-import axios from 'axios'
-import {useSession} from 'next-auth/react'
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import Container from '@mui/material/Container'
-import FormControl from '@mui/material/FormControl'
-import FormHelperText from '@mui/material/FormHelperText'
-import Grid from '@mui/material/Grid'
-import IconButton from '@mui/material/IconButton'
-import InputAdornment from '@mui/material/InputAdornment'
-import InputLabel from '@mui/material/InputLabel'
-import LinearProgress from '@mui/material/LinearProgress'
-import OutlinedInput from '@mui/material/OutlinedInput'
-import Snackbar from '@mui/material/Snackbar'
-import TextField from '@mui/material/TextField'
-import Tooltip from '@mui/material/Tooltip'
-import Typography from '@mui/material/Typography'
-
-import MuiAlert from '@mui/material/Alert'
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
-
-import {jwennAnTeks} from '../../lib/oki-api'
-
-import AjouteTradiksyon from './ajoute-tradiksyon'
-
-const PREFIX = 'EkriTeks'
-
-const classes = {
-  tooltip: `${PREFIX}-tooltip`
-}
-
-const StyledContainer = styled(Container)(() => ({
-  [`& .${classes.tooltip}`]: {
-    fontSize: 18
-  }
-}))
-
-const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
-
-const textLabels = {
-  fr: {
-    title: 'Traduction',
-    help: 'Traduction des paroles',
-    emoji: '🇫🇷'
-  },
-  en: {
-    title: 'Translation',
-    help: 'Translation of the lyrics',
-    emoji: '🇬🇧'
-  },
-  es: {
-    title: 'Traducción',
-    help: 'Traducción de la letra',
-    emoji: '🇪🇸'
-  },
-  de: {
-    title: 'Übersetzung',
-    help: 'Übersetzung von Liedtexten',
-    emoji: '🇩🇪'
-  },
-  it: {
-    title: 'Traduzione',
-    help: 'Traduzione del testo',
-    emoji: '🇮🇹'
-  }
-}
-
-const Alert = forwardRef(function Alert(props, ref) {
-  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
-})
-
-const RemoveTooltip = Tooltip
-
-function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
-  const {data: session} = useSession()
-  const {jwt, user} = session
-  const [teksEkri, setTeksEkri] = useState({awtis: '', tit: '', transkripsyon: ''})
-  const [tradiksyon, setTradiksyon] = useState({fr: '', en: '', es: '', de: '', it: ''})
-  const [kiChawLang, setKiChwalang] = useState(['fr'])
-  const [error, setError] = useState('')
-  const [success, setSuccess] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [currentTeksId, setCurrentTeksId] = useState(null)
-  const [open, setOpen] = useState(false)
-  const [tradiksyonOtomatik, setTradiksyonOtomatik] = useState(false)
-
-  const handleUpdate = useCallback(update => {
-    setTeksEkri({...teksEkri, ...update})
-  }, [teksEkri])
-
-  const handleUpdateTradiksyon = useCallback(update => {
-    setTradiksyon({...tradiksyon, ...update})
-  }, [tradiksyon])
-
-  const handleRemoveTradiksyon = useCallback(idTradiksyon => {
-    setKiChwalang(kiChawLang.filter(t => t !== idTradiksyon))
-  }, [kiChawLang, setKiChwalang])
-
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return
-    }
-
-    setOpen(false)
-    setSuccess('')
-    setError('')
-  }
-
-  const handleClick = async () => {
-    setLoading(true)
-    const {awtis, tit, transkripsyon} = teksEkri
-    const {fr, en, es, de, it} = tradiksyon
-
-    if (teksEkri.awtis === '' || teksEkri.tit === '' || teksEkri.transkripsyon === '') {
-      setError({message: 'Certains champs sont obligatoires'})
-      setLoading(false)
-
-      return
-    }
-
-    const headers = {
-      'content-type': 'application/json',
-      Authorization: `Bearer ${jwt}`
-    }
-
-    if (currentTeksId) {
-      try {
-        const teks = await jwennAnTeks(currentTeksId, jwt)
-        const teksResponse = await axios.put(`${API_URL}/paroles/${currentTeksId}`, {
-          data: {
-            id: teks.id,
-            titre: tit,
-            transcription: transkripsyon,
-            traductions: {
-              francais: fr === '' ? null : fr,
-              anglais: en === '' ? null : en,
-              espagnol: es === '' ? null : es,
-              allemand: de === '' ? null : de,
-              italien: it === '' ? null : it
-            },
-            user: {
-              id: user.id,
-              username: user.username,
-              email: user.email
-            },
-            artistes: teks.artistes.map(({id}) => id),
-            traductionAuto: tradiksyonOtomatik
-          }
-        }, {
-          headers
-        })
-
-        const {data} = teksResponse
-        setSuccess(`Le morceau "${data.tit}" a été modifié avec succès. Il apparaîtra sur le site après validation.`)
-        setLoading(false)
-      } catch (error) {
-        setError(error?.response?.data)
-        setLoading(false)
-      }
-    } else {
-      try {
-        const artiste = await axios.post(`${API_URL}/artistes`, {
-          data: {
-            alias: awtis,
-            user: {
-              id: user.id,
-              username: user.username,
-              email: user.email
-            }
-          }
-        }, {
-          headers
-        })
-
-        const parole = await axios.post(`${API_URL}/paroles`, {
-          data: {
-            titre: tit,
-            transcription: transkripsyon,
-            traductions: {
-              francais: fr === '' ? null : fr,
-              anglais: en === '' ? null : en,
-              espagnol: es === '' ? null : es,
-              allemand: de === '' ? null : de,
-              italien: it === '' ? null : it
-            },
-            user: {
-              id: user.id,
-              username: user.username,
-              email: user.email
-            },
-            artistes: [artiste.id],
-            traductionAuto: tradiksyonOtomatik
-          }
-        }, {
-          headers
-        })
-
-        const {data} = parole
-
-        setSuccess(`Le texte "${data.titre}" a été soumis avec succès. Il apparaîtra sur le site après validation.`)
-        setLoading(false)
-      } catch (error) {
-        setError(error?.response?.data)
-        setLoading(false)
-      }
-    }
-  }
-
-  const handleReset = () => {
-    setTeksEkri({awtis: '', tit: '', transkripsyon: ''})
-    setTradiksyon({fr: '', en: '', es: '', de: '', it: ''})
-    setKiChwalang(['fr'])
-    setCurrentTeksId(null)
-    setTradiksyonOtomatik(false)
-  }
-
-  useEffect(() => {
-    if (success) {
-      setOpen(true)
-      handleReset()
-    }
-  }, [success])
-
-  useEffect(() => {
-    if (error) {
-      setOpen(true)
-    }
-  }, [error])
-
-  useEffect(() => {
-    if (selectedTeks) {
-      setTradiksyonOtomatik(false)
-      setCurrentTeksId(selectedTeks.id)
-      setTeksEkri({
-        awtis: new Intl.ListFormat('fr').format(selectedTeks.artistes.map(({alias}) => alias)),
-        tit: selectedTeks.titre,
-        transkripsyon: selectedTeks.transcription
-      })
-      setTradiksyon({
-        fr: selectedTeks?.traductions?.francais || '',
-        en: selectedTeks?.traductions?.anglais || '',
-        es: selectedTeks?.traductions?.espagnol || '',
-        de: selectedTeks?.traductions?.allemand || '',
-        it: selectedTeks?.traductions?.italien || ''
-      })
-
-      const jennLangId = () => {
-        const ids = []
-
-        if (selectedTeks?.traductions?.francais) {
-          ids.push('fr')
-        }
-
-        if (selectedTeks?.traductions?.anglais) {
-          ids.push('en')
-        }
-
-        if (selectedTeks?.traductions?.espagnol) {
-          ids.push('es')
-        }
-
-        if (selectedTeks?.traductions?.allemand) {
-          ids.push('de')
-        }
-
-        if (selectedTeks?.traductions?.italien) {
-          ids.push('it')
-        }
-
-        return ids
-      }
-
-      const langIds = jennLangId()
-
-      setKiChwalang(langIds)
-    }
-
-    return () => {
-      setSelectedTeks(null)
-    }
-  }, [teksEkri, selectedTeks, setSelectedTeks, kiChawLang])
-
-  return (
-    <StyledContainer maxWidth='sm'>
-      <Box sx={{textAlign: 'center', marginBottom: 2}}>
-        <Typography display='inline' variant='h6' component='h1'>
-          Proposer une parole
-        </Typography>
-      </Box>
-      <form noValidate autoComplete='off'>
-        <Grid container style={{textAlign: 'center'}} spacing={1}>
-          <Grid xs='true'>
-            <TextField
-              required
-              id='awtis'
-              name='awtis'
-              label='Artiste'
-              value={teksEkri.awtis}
-              disabled={Boolean(currentTeksId)}
-              variant='outlined'
-              helperText='Nom de l’artiste (obligatoire)'
-              onChange={event => handleUpdate({awtis: event.target.value})}
-            />
-          </Grid>
-          <Grid xs='true'>
-            <TextField
-              required
-              id='tit'
-              name='tit'
-              label='Titre'
-              value={selectedTeks?.tit || teksEkri.tit}
-              variant='outlined'
-              helperText='Titre de la musique (obligatoire)'
-              onChange={event => handleUpdate({tit: event.target.value})}
-            />
-          </Grid>
-        </Grid>
-        <TextField
-          fullWidth
-          multiline
-          required
-          helperText='Transcription des paroles (obligatoire)'
-          style={{marginTop: '1em'}}
-          id='transkripsyon'
-          label='Transcription'
-          value={teksEkri.transkripsyon}
-          rows={8}
-          variant='outlined'
-          onChange={event => handleUpdate({transkripsyon: event.target.value})}
-        />
-        {kiChawLang.length > 0 && kiChawLang.map(k => (
-          <FormControl key={k} fullWidth style={{marginBlock: 10}}>
-            <InputLabel htmlFor={`tradiksyon-${k}`}>
-              <span dangerouslySetInnerHTML={{__html: textLabels[k].emoji}} /> {textLabels[k].title}
-            </InputLabel>
-            <OutlinedInput
-              multiline
-              style={{marginTop: '1em'}}
-              id={`tradiksyon-${k}`}
-              name={`tradiksyon-${k}`}
-              label={`${textLabels[k].title}`}
-              value={tradiksyon[k]}
-              rows={8}
-              endAdornment={
-                <InputAdornment position='end'>
-                  <RemoveTooltip
-                    title='Cacher la fenêtre'
-                    placement='left'
-                    classes={{
-                      tooltip: classes.tooltip
-                    }}
-                  >
-                    <IconButton
-                      style={{bottom: 75}}
-                      aria-label='remove-tradiksyon'
-                      edge='end'
-                      size='large'
-                      onClick={() => handleRemoveTradiksyon(k)}
-                    >
-                      <VisibilityOffIcon />
-                    </IconButton>
-                  </RemoveTooltip>
-                </InputAdornment>
-              }
-              onChange={event => handleUpdateTradiksyon({[k]: event.target.value})}
-            />
-            <FormHelperText id={`tradiksyon-${k}`}>{textLabels[k].help}</FormHelperText>
-          </FormControl>
-        ))}
-      </form>
-      <AjouteTradiksyon
-        showSwitch={Boolean(canAutoTranslate) && Boolean(!currentTeksId)}
-        disableSwitch={tradiksyon.fr === '' || tradiksyon.en !== '' || tradiksyon.es !== '' || tradiksyon.de !== '' || tradiksyon.it !== ''}
-        tradiksyonOtomatik={tradiksyonOtomatik}
-        setTradiksyonOtomatik={setTradiksyonOtomatik}
-        chwaLang={kiChawLang}
-        setChwaLang={setKiChwalang}
-      />
-      <div>
-        <Button
-          fullWidth
-          disabled={loading || teksEkri.awtis === '' || teksEkri.tit === '' || teksEkri.transkripsyon === ''}
-          style={{marginTop: 20}}
-          variant='contained'
-          color='primary'
-          onClick={handleClick}
-        >
-          <Typography style={{fontWeight: 'bold'}}>
-            Valider
-          </Typography>
-        </Button>
-        <Button
-          fullWidth
-          disabled={loading || (teksEkri.awtis === '' && teksEkri.tit === '' && teksEkri.transkripsyon === '')}
-          style={{marginTop: 20}}
-          variant='contained'
-          color='error'
-          onClick={handleReset}
-        >
-          <Typography style={{fontWeight: 'bold'}}>
-            Tout effacer
-          </Typography>
-        </Button>
-        {loading && <LinearProgress size={24} style={{width: '100%', marginBlock: '1em'}} />}
-      </div>
-      {success && (
-        <Snackbar open={open} autoHideDuration={10_000} onClose={handleClose}>
-          <Alert severity='success' onClose={handleClose}>
-            <strong>{success}</strong>
-          </Alert>
-        </Snackbar>
-      )}
-      {error && (
-        <Snackbar open={open} autoHideDuration={10_000} onClose={handleClose}>
-          <Alert severity='error' onClose={handleClose}>
-            <strong>Une erreur s’est produite</strong> : <i>{error?.error?.message}</i>
-          </Alert>
-        </Snackbar>
-      )}
-    </StyledContainer>
-  )
-}
-
-EkriTeks.propTypes = {
-  canAutoTranslate: PropTypes.bool,
-  selectedTeks: PropTypes.object,
-  setSelectedTeks: PropTypes.func.isRequired,
-}
-
-export default EkriTeks

components/soumet/otomatik-switch.js

@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types'
-import FormGroup from '@mui/material/FormGroup'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import Switch from '@mui/material/Switch'
-
-export default function OtomatikSwitch({tradiksyonOtomatik, setTradiksyonOtomatik, disabled}) {
-  const handleChange = event => {
-    setTradiksyonOtomatik(event.target.checked)
-  }
-
-  return (
-    <FormGroup sx={{marginTop: 1}}>
-      <FormControlLabel
-        control={<Switch checked={tradiksyonOtomatik && !disabled} onChange={handleChange} />}
-        disabled={disabled}
-        label='Traduction du français vers les autres langues (remplir uniquement la traduction française)'
-      />
-    </FormGroup>
-  )
-}
-
-OtomatikSwitch.propTypes = {
-  tradiksyonOtomatik: PropTypes.bool.isRequired,
-  setTradiksyonOtomatik: PropTypes.func.isRequired,
-  disabled: PropTypes.bool.isRequired
-}

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)
 
@@ -56,7 +54,7 @@ export default function Presantasyon() {
           </ListItem>
         </List>
         <Typography paragraph='true' variant='subtitle1' component='div'>
-          Pour toute question, n’hésitez pas à nous contacter par courriel <Link href='mailto:kontak@o-k-i.net'><strong>kontak@o-k-i.net</strong></Link>.
+          Pour toute question, n’hésitez pas à nous contacter par courriel <Link href={`mailto:${process.env.NEXT_PUBLIC_ORG_EMAIL || 'kontak@o-k-i.net'}`}><strong>{process.env.NEXT_PUBLIC_ORG_EMAIL || 'kontak@o-k-i.net'}</strong></Link>.
         </Typography>
         <Typography paragraph='true' variant='subtitle1' component='div'>
           <strong>Merci par avance pour votre soutien 🥰</strong>

components/stats/bar-stats.js

@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types'
-import {styled} from '@mui/material/styles'
-import Typography from '@mui/material/Typography'
-import Box from '@mui/material/Box'
-import LinearProgress, {linearProgressClasses} from '@mui/material/LinearProgress'
-
-const BorderLinearProgress = styled(LinearProgress)(({theme}) => ({
-  height: 10,
-  borderRadius: 5,
-  [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: 200,
-    ...theme.applyStyles('dark', {
-      backgroundColor: 800
-    })
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    borderRadius: 5,
-    backgroundColor: '#1a90ff',
-    ...theme.applyStyles('dark', {
-      backgroundColor: '#308fe8'
-    })
-  },
-}))
-
-export default function BarStats({percent}) {
-  return (
-    <Box sx={{display: 'flex', alignItems: 'center'}}>
-      <Box sx={{width: '100%'}}>
-        <BorderLinearProgress variant='determinate' value={percent} />
-      </Box>
-      <Box sx={{minWidth: 35}}>
-        <Typography textAlign='right' sx={{fontWeight: 'bold'}} variant='body2' color='text.secondary'>{`${Math.round(
-          percent,
-        )}%`}</Typography>
-      </Box>
-    </Box>
-  )
-}
-
-BarStats.propTypes = {
-  percent: PropTypes.number.isRequired,
-}

components/stats/kat-stats.js

@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types'
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import Grid from '@mui/material/Grid'
-
-import TraductionsStats from './traductions-stats'
-
-export default function KatStats({emoji, value, total}) {
-  return (
-    <Grid size={{xs: 12, md: 2}}>
-      <Card variant='outlined'>
-        <CardContent>
-          <Typography align='center' variant='h6'>
-            <span dangerouslySetInnerHTML={{__html: emoji}} />
-          </Typography>
-          <TraductionsStats value={value} total={total} />
-        </CardContent>
-      </Card>
-    </Grid>
-  )
-}
-
-KatStats.propTypes = {
-  emoji: PropTypes.string.isRequired,
-  value: PropTypes.number.isRequired,
-  total: PropTypes.number.isRequired
-}

components/stats/traductions-stats.js

@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types'
-import Typography from '@mui/material/Typography'
-import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid'
-
-import BarStats from './bar-stats'
-
-export default function TraductionsStats({value, total}) {
-  const translated = total - value
-  const percent = (translated / total) * 100
-
-  return (
-    <Box sx={{width: '100%'}}>
-      <Grid container rowSpacing={3} columnSpacing={6} justifyContent='space-around'>
-        <Grid size={{xs: 12, md: 6}}>
-          <Typography style={{fontWeight: 'bold'}} align='center' variant='h6'>
-            {translated}
-          </Typography>
-        </Grid>
-      </Grid>
-      <BarStats value={value} percent={percent} />
-    </Box>
-  )
-}
-
-TraductionsStats.propTypes = {
-  value: PropTypes.number.isRequired,
-  total: PropTypes.number.isRequired
-}

components/streaming-buttons.js

@@ -0,0 +1,49 @@
+'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},
+}
+
+export function StreamButton({lyen}) {
+  const config = PLATFORM_CONFIG[lyen.plateforme] ?? {label: lyen.plateforme, bg: '#555', color: '#fff', Icon: null}
+  const PlatformIcon = config.Icon
+  return (
+    <Button
+      href={lyen.url}
+      target='_blank'
+      rel='noopener noreferrer'
+      size='small'
+      startIcon={PlatformIcon ? <PlatformIcon size={16} color={config.color} /> : null}
+      endIcon={<OpenInNewIcon sx={{fontSize: 11}} />}
+      sx={{
+        bgcolor: config.bg,
+        color: config.color,
+        fontWeight: 700,
+        fontSize: '0.72rem',
+        textTransform: 'none',
+        '&:hover': {bgcolor: config.bg, opacity: 0.85},
+      }}
+    >
+      {config.label}
+    </Button>
+  )
+}
+
+StreamButton.propTypes = {
+  lyen: PropTypes.shape({
+    plateforme: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }).isRequired
+}

components/teks/__tests__/komante.test.jsx

@@ -0,0 +1,37 @@
+import {describe, it, expect} from 'vitest'
+import {render, screen} from '@testing-library/react'
+import Komante from '../komante'
+
+describe('Komante', () => {
+  it('ne rend rien quand il n\'y a aucun commentaire', () => {
+    const {container} = render(<Komante commentaires={[]} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('affiche un commentaire local avec le pseudo pawol.nu', () => {
+    render(<Komante commentaires={[
+      {id: 1, contenu: 'Bèl tèks', origine: 'local', user: {username: 'foo'}}
+    ]} />)
+
+    expect(screen.getByText('foo')).toBeInTheDocument()
+    expect(screen.getByText('Bèl tèks')).toBeInTheDocument()
+    expect(screen.queryByText('Mastodon')).not.toBeInTheDocument()
+  })
+
+  it('affiche un commentaire fédéré avec le badge et le lien Mastodon', () => {
+    render(<Komante commentaires={[{
+      id: 2,
+      contenu: 'Trè bèl',
+      origine: 'activitypub',
+      auteurNom: 'Quelqu\'un',
+      auteurHandle: '@quelqun@mastodon.social',
+      auteurProfilUrl: 'https://mastodon.social/@quelqun',
+      remoteUrl: 'https://bokante.o-k-i.net/@quelqun/1'
+    }]} />)
+
+    expect(screen.getByText('Quelqu\'un')).toBeInTheDocument()
+    expect(screen.getByText('Mastodon')).toBeInTheDocument()
+    expect(screen.getByRole('link', {name: 'Quelqu\'un'})).toHaveAttribute('href', 'https://mastodon.social/@quelqun')
+    expect(screen.getByRole('link', {name: /voir sur mastodon/i})).toHaveAttribute('href', 'https://bokante.o-k-i.net/@quelqun/1')
+  })
+})

components/teks/__tests__/repons-mastodon.test.jsx

@@ -0,0 +1,55 @@
+import {describe, it, expect, vi, afterEach} from 'vitest'
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ReponsMastodon from '../repons-mastodon'
+
+describe('ReponsMastodon', () => {
+  const originalOpen = window.open
+
+  afterEach(() => {
+    window.open = originalOpen
+  })
+
+  it('ne rend rien sans bokanteStatusId', () => {
+    const {container} = render(<ReponsMastodon bokanteStatusId={null} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('affiche un lien direct vers le fil bokante', () => {
+    render(<ReponsMastodon bokanteStatusId='112233' />)
+    const lien = screen.getByRole('link', {name: 'Mastodon'})
+    expect(lien).toHaveAttribute('href', 'https://bokante.o-k-i.net/@pawol_nu/112233')
+  })
+
+  it('redirige vers authorize_interaction avec le domaine extrait d\'un identifiant complet', async () => {
+    window.open = vi.fn()
+    const user = userEvent.setup()
+    render(<ReponsMastodon bokanteStatusId='112233' />)
+
+    await user.click(screen.getByRole('button', {name: /répondre via mastodon/i}))
+    await user.type(screen.getByLabelText(/@vous@votre-instance/i), '@quelqun@mastodon.social')
+    await user.click(screen.getByRole('button', {name: /continuer/i}))
+
+    expect(window.open).toHaveBeenCalledWith(
+      'https://mastodon.social/authorize_interaction?uri=' + encodeURIComponent('https://bokante.o-k-i.net/@pawol_nu/112233'),
+      '_blank',
+      'noopener,noreferrer'
+    )
+  })
+
+  it('accepte aussi juste un nom d\'instance sans @', async () => {
+    window.open = vi.fn()
+    const user = userEvent.setup()
+    render(<ReponsMastodon bokanteStatusId='112233' />)
+
+    await user.click(screen.getByRole('button', {name: /répondre via mastodon/i}))
+    await user.type(screen.getByLabelText(/@vous@votre-instance/i), 'mastodon.social')
+    await user.click(screen.getByRole('button', {name: /continuer/i}))
+
+    expect(window.open).toHaveBeenCalledWith(
+      expect.stringContaining('https://mastodon.social/authorize_interaction'),
+      '_blank',
+      'noopener,noreferrer'
+    )
+  })
+})

components/teks/an-teks.js

@@ -8,7 +8,6 @@ export default function AnTeks({parole, paroleId}) {
     <Teks
       parole={parole}
       paroleId={paroleId}
-      commentaires={parole?.commentaires}
     />
   )
 }

components/teks/current-track-context.js

@@ -0,0 +1,24 @@
+'use client'
+
+import {createContext, useContext, useState} from 'react'
+import PropTypes from 'prop-types'
+
+const CurrentTrackContext = createContext([null, () => {}])
+
+export function CurrentTrackProvider({children}) {
+  const state = useState(null)
+
+  return (
+    <CurrentTrackContext.Provider value={state}>
+      {children}
+    </CurrentTrackContext.Provider>
+  )
+}
+
+export function useCurrentTrack() {
+  return useContext(CurrentTrackContext)
+}
+
+CurrentTrackProvider.propTypes = {
+  children: PropTypes.node.isRequired
+}

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(', ')

components/teks/entegre-mizik.js

@@ -2,7 +2,7 @@
 
 import {Box, IconButton} from '@mui/material'
 import PropTypes from 'prop-types'
-import {useRouter} from 'next/navigation'
+import {usePathname} from 'next/navigation'
 
 import {
   Tidal,
@@ -69,10 +69,12 @@ function RannIframe({plateforme, url, titre, isMobile}) {
       {plateforme === 'Tidal' && (
         <iframe
           src={src}
+          title={titre}
           allowFullScreen='allowfullscreen'
           frameBorder='0'
           width={`${isMobile ? '100%' : '50%'}`}
           height='96px'
+          sandbox='allow-same-origin allow-scripts allow-popups'
         />
       )}
 
@@ -90,38 +92,44 @@ function RannIframe({plateforme, url, titre, isMobile}) {
 
       {plateforme === 'Deezer' && (
         <iframe
-          title='deezer-widget'
+          title={titre || 'deezer-widget'}
           frameBorder='0'
           src={src}
           allow='encrypted-media; clipboard-write'
           allowtransparency='true'
+          sandbox='allow-same-origin allow-scripts allow-popups'
         />
       )}
 
       {plateforme === 'Spotify' && (
         <iframe
           src={src}
+          title={titre}
           width={`${isMobile ? '100%' : '50%'}`}
           height='80'
           frameBorder='0'
           allowtransparency='true'
           allow='encrypted-media'
+          sandbox='allow-same-origin allow-scripts allow-popups'
         />
       )}
 
       {plateforme === 'Soundcloud' && (
         <iframe
           src={src}
+          title={titre}
           width={`${isMobile ? '100%' : '50%'}`}
           height='166'
           scrolling='no'
           frameBorder='no'
+          sandbox='allow-same-origin allow-scripts allow-popups'
         />
       )}
 
       {plateforme === 'Applemusic' && (
         <iframe
           src={src}
+          title={titre}
           width={`${isMobile ? '100%' : '50%'}`}
           height='175'
           frameBorder='0'
@@ -136,7 +144,7 @@ function RannIframe({plateforme, url, titre, isMobile}) {
 
 function EntegreMizik({parole, isMobile}) {
   const [chwaMizik, meteChwaMizik] = useState(null)
-  const router = useRouter()
+  const pathname = usePathname()
   const {streamAudio, slug, okiMizikID, gadeEmbed, titre} = parole
 
   const filteredKouteyAchtey = streamAudio.filter(({plateforme}) => plateforme === 'Tidal' || plateforme === 'Spotify' || plateforme === 'Deezer' || plateforme === 'Soundcloud' || plateforme === 'Applemusic')
@@ -150,10 +158,10 @@ function EntegreMizik({parole, isMobile}) {
   }
 
   useEffect(() => {
-    if (router.asPath === `/paroles/${slug}` || router.asPath === `/paroles/${slug}#${slug}`) {
+    if (pathname === `/paroles/${slug}`) {
       meteChwaMizik(null)
     }
-  }, [router, slug])
+  }, [pathname, slug])
 
   return (
     <Box align='center'>
@@ -162,7 +170,7 @@ function EntegreMizik({parole, isMobile}) {
           key={id}
           aria-label='player'
           size='large'
-          onClick={() => handleClick(plateforme, url)}
+          onClick={() => handleClick(plateforme, url, titre)}
         >
           {kouteyAchteyIcons[plateforme]}
         </IconButton>

components/teks/karaoke-modal.js

@@ -1,21 +1,27 @@
 'use client'
 
-import {useState, forwardRef} from 'react'
+import {useState, useEffect, forwardRef} from 'react'
 import PropTypes from 'prop-types'
 import Fab from '@mui/material/Fab'
 import Dialog from '@mui/material/Dialog'
 import Slide from '@mui/material/Slide'
 import Box from '@mui/material/Box'
+import Skeleton from '@mui/material/Skeleton'
 import IconButton from '@mui/material/IconButton'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
 import useMediaQuery from '@mui/material/useMediaQuery'
-import {useTheme} from '@mui/material/styles'
+import {useTheme, keyframes} from '@mui/material/styles'
 import MicIcon from '@mui/icons-material/Mic'
 import CloseIcon from '@mui/icons-material/Close'
 
+const pulse = keyframes`
+  0%, 100% { opacity: 0.18; transform: scale(1); }
+  50% { opacity: 0.55; transform: scale(1.2); }
+`
+
 const SlideUp = forwardRef(function SlideUp(props, ref) {
-  return <Slide direction='up' ref={ref} {...props} />
+  return <Slide ref={ref} direction='up' {...props} />
 })
 
 function toEmbedUrl(url) {
@@ -25,16 +31,25 @@ 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
   }
 }
 
-export default function KaraokeModal({url, titre, artistes}) {
+export default function KaraokeModal({url, desktopUrl, titre, artistes}) {
   const [open, setOpen] = useState(false)
+  const [loaded, setLoaded] = useState(false)
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+  const activeUrl = (!isMobile && desktopUrl) ? desktopUrl : url
+
+  useEffect(() => {
+    if (!open) {
+      setLoaded(false)
+    }
+  }, [open])
 
   return (
     <>
@@ -43,13 +58,13 @@ export default function KaraokeModal({url, 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: 10,
+            zIndex: 1050,
           }}
+          onClick={() => setOpen(true)}
         >
           <MicIcon />
         </Fab>
@@ -57,85 +72,151 @@ export default function KaraokeModal({url, titre, artistes}) {
 
       <Dialog
         open={open}
-        onClose={() => setOpen(false)}
-        TransitionComponent={SlideUp}
+        slots={{transition: SlideUp}}
         maxWidth={false}
-        slotProps={{
-          backdrop: {sx: {backdropFilter: 'blur(6px)', bgcolor: 'rgba(0,0,0,0.85)'}}
-        }}
-        PaperProps={{
-          sx: {
-            bgcolor: '#000',
-            overflow: 'hidden',
-            ...(isMobile ? {
-              width: '100vw',
-              height: '100dvh',
-              maxWidth: 'none',
-              maxHeight: 'none',
-              m: 0,
-              borderRadius: 0,
-            } : {
-              width: 'calc(88vh * 9 / 16)',
-              height: '88vh',
-              maxWidth: 'none',
-              maxHeight: 'none',
-              borderRadius: 3,
-            })
+        sx={{
+          '& .MuiDialog-container': {
+            alignItems: {xs: 'flex-end', sm: 'center'},
           }
         }}
+        slotProps={{
+          backdrop: {sx: {backdropFilter: 'blur(6px)', bgcolor: 'rgba(0,0,0,0.85)'}},
+          paper: {
+            sx: {
+              bgcolor: '#000',
+              overflow: 'hidden',
+              ...(isMobile ? {
+                width: '100vw',
+                height: '100dvh',
+                maxWidth: 'none',
+                maxHeight: 'none',
+                m: 0,
+                borderRadius: 0,
+                boxShadow: 'none',
+              } : {
+                width: 'calc(80vh * 16 / 9)',
+                height: '80vh',
+                maxWidth: 'none',
+                maxHeight: 'none',
+                borderRadius: '16px',
+                boxShadow: '0 24px 64px rgba(0,0,0,0.7)',
+              })
+            }
+          }
+        }}
+        onClose={() => setOpen(false)}
       >
-        {/* Header superposé */}
+        {/* Header superposé en gradient */}
         <Box sx={{
           position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
-          zIndex: 1,
+          zIndex: 2,
           px: 2,
-          pt: {xs: 'env(safe-area-inset-top, 12px)', sm: '12px'},
-          pb: 3,
-          background: 'linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%)',
+          pt: 2,
+          pb: 4,
+          background: 'linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%)',
           display: 'flex',
           alignItems: 'flex-start',
           justifyContent: 'space-between',
-        }}>
-          <Box>
+          pointerEvents: 'none',
+        }}
+        >
+          <Box sx={{pointerEvents: 'none'}}>
             {titre && (
-              <Typography variant='subtitle1' sx={{color: '#fff', fontWeight: 700, lineHeight: 1.2}}>
+              <Typography variant='subtitle1' sx={{color: '#fff', fontWeight: 700, lineHeight: 1.2, textShadow: '0 1px 4px rgba(0,0,0,0.5)'}}>
                 {titre}
               </Typography>
             )}
             {artistes?.length > 0 && (
-              <Typography variant='caption' sx={{color: 'rgba(255,255,255,0.7)'}}>
+              <Typography variant='caption' sx={{color: 'rgba(255,255,255,0.65)', textShadow: '0 1px 4px rgba(0,0,0,0.5)'}}>
                 {artistes.map(a => a.alias).join(', ')}
               </Typography>
             )}
           </Box>
           <IconButton
             size='small'
-            onClick={() => setOpen(false)}
             aria-label='fermer'
             sx={{
+              pointerEvents: 'auto',
               color: '#fff',
               bgcolor: 'rgba(255,255,255,0.15)',
-              backdropFilter: 'blur(4px)',
-              mt: 0.5,
+              backdropFilter: 'blur(8px)',
+              border: '1px solid rgba(255,255,255,0.12)',
               '&:hover': {bgcolor: 'rgba(255,255,255,0.25)'},
             }}
+            onClick={() => setOpen(false)}
           >
             <CloseIcon fontSize='small' />
           </IconButton>
         </Box>
 
         {open && (
-          <iframe
-            src={toEmbedUrl(url)}
-            style={{width: '100%', height: '100%', border: 'none', display: 'block'}}
-            allowFullScreen
-            allow='autoplay; fullscreen'
-            sandbox='allow-same-origin allow-scripts allow-popups allow-forms'
-            title='Karaoké'
-          />
+          <Box sx={{position: 'absolute', inset: 0, overflow: 'hidden'}}>
+            {!loaded && (
+              <>
+                <Skeleton
+                  variant='rectangular'
+                  animation='wave'
+                  sx={{position: 'absolute', inset: 0, bgcolor: 'rgba(255,255,255,0.06)', transform: 'none'}}
+                />
+                <Box sx={{
+                  position: 'absolute',
+                  inset: 0,
+                  zIndex: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: 1.5,
+                }}
+                >
+                  <MicIcon sx={{fontSize: 44, color: 'rgba(255,255,255,0.55)', animation: `${pulse} 1.6s ease-in-out infinite`}} />
+                  <Typography
+                    variant='caption'
+                    sx={{color: 'rgba(255,255,255,0.35)', letterSpacing: '0.15em', textTransform: 'uppercase'}}
+                  >
+                    Chargement…
+                  </Typography>
+                </Box>
+              </>
+            )}
+
+            {isMobile ? (
+              /* Vidéo verticale : scale le player 16:9 à la hauteur du portrait et croppe les côtés */
+              <Box sx={{
+                position: 'absolute',
+                top: 0,
+                left: '50%',
+                transform: 'translateX(-50%)',
+                height: '100%',
+                aspectRatio: '16 / 9',
+              }}
+              >
+                <iframe
+                  allowFullScreen
+                  src={toEmbedUrl(activeUrl)}
+                  style={{width: '100%', height: '100%', border: 'none', display: 'block', opacity: loaded ? 1 : 0, transition: 'opacity 0.4s ease'}}
+                  allow='autoplay; fullscreen'
+                  sandbox='allow-same-origin allow-scripts allow-popups allow-forms'
+                  title='Karaoké'
+                  onLoad={() => setLoaded(true)}
+                />
+              </Box>
+            ) : (
+              /* Vidéo 16:9 desktop : player remplit exactement le dialog paysage */
+              <iframe
+                allowFullScreen
+                src={toEmbedUrl(activeUrl)}
+                style={{width: '100%', height: '100%', border: 'none', display: 'block', opacity: loaded ? 1 : 0, transition: 'opacity 0.4s ease'}}
+                allow='autoplay; fullscreen'
+                sandbox='allow-same-origin allow-scripts allow-popups allow-forms'
+                title='Karaoké'
+                onLoad={() => setLoaded(true)}
+              />
+            )}
+          </Box>
         )}
       </Dialog>
     </>
@@ -144,6 +225,7 @@ export default function KaraokeModal({url, titre, artistes}) {
 
 KaraokeModal.propTypes = {
   url: PropTypes.string.isRequired,
+  desktopUrl: PropTypes.string,
   titre: PropTypes.string,
   artistes: PropTypes.array,
 }

components/teks/komante.jsx

@@ -0,0 +1,62 @@
+'use client'
+
+import PropTypes from 'prop-types'
+import Box from '@mui/material/Box'
+import Avatar from '@mui/material/Avatar'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Link from 'next/link'
+
+function formatAuteur(commentaire) {
+  if (commentaire.origine === 'activitypub') {
+    return commentaire.auteurNom || commentaire.auteurHandle || 'Yon moun'
+  }
+
+  return commentaire.user?.username || 'Anonim'
+}
+
+export default function Komante({commentaires}) {
+  if (!commentaires || commentaires.length === 0) {
+    return null
+  }
+
+  return (
+    <Box sx={{maxWidth: 700, margin: '2em auto 0'}}>
+      <Typography gutterBottom variant='h6'>
+        Komantè
+      </Typography>
+      {commentaires.map(commentaire => {
+        const auteur = formatAuteur(commentaire)
+        const estFedere = commentaire.origine === 'activitypub'
+
+        return (
+          <Box key={commentaire.id} sx={{display: 'flex', gap: 1.5, mb: 2}}>
+            <Avatar src={commentaire.auteurAvatarUrl} alt={auteur} />
+            <Box sx={{flex: 1}}>
+              <Typography variant='subtitle2' component='div'>
+                {estFedere && commentaire.auteurProfilUrl ? (
+                  <Link href={commentaire.auteurProfilUrl} target='_blank' rel='noopener noreferrer'>
+                    {auteur}
+                  </Link>
+                ) : auteur}
+                {estFedere && (
+                  <Chip label='Mastodon' size='small' sx={{ml: 1}} />
+                )}
+              </Typography>
+              <Typography variant='body2'>{commentaire.contenu}</Typography>
+              {estFedere && commentaire.remoteUrl && (
+                <Link href={commentaire.remoteUrl} target='_blank' rel='noopener noreferrer'>
+                  <Typography variant='caption' color='text.secondary'>Voir sur Mastodon</Typography>
+                </Link>
+              )}
+            </Box>
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}
+
+Komante.propTypes = {
+  commentaires: PropTypes.array
+}

components/teks/lekte.js

@@ -16,16 +16,24 @@ import Image from 'next/image'
 import {grey} from '@mui/material/colors'
 import {Link} from '@mui/material'
 
-import {getAlias} from '../../lib/utils/format'
+import {getAlias} from '../../lib/utils/get-alias'
+import {formatKuveti} from '../../lib/kuveti'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
+function createAudio(src) {
+  const audio = new Audio(src)
+  audio.preload = 'metadata'
+  return audio
+}
+
 function parseLrc(text) {
   const lines = []
   for (const raw of text.split('\n')) {
-    const match = raw.match(/^\[(\d{2}):(\d{2})[.:]\d+\](.*)$/)
+    const match = raw.match(/^\[(\d{2}):(\d{2})[.:]\d+](.*)$/)
     if (match) {
-      lines.push({time: parseInt(match[1]) * 60 + parseInt(match[2]), text: match[3].trim()})
+      const time = (Number.parseInt(match[1], 10) * 60) + Number.parseInt(match[2], 10)
+      lines.push({time, text: match[3].trim()})
     }
   }
 
@@ -68,9 +76,12 @@ const TinyText = styled(Typography)({
 })
 
 export default function Lekte({audio, url, parole}) {
-  const audioRef = useRef(new Audio(audio))
+  const audioRef = useRef(null)
+  if (audioRef.current === null) {
+    audioRef.current = createAudio(audio)
+  }
+
   const intervalRef = useRef()
-  const isReady = useRef(false)
   const [duration, setDuration] = useState(0)
   const theme = useTheme()
   const {mode} = useColorScheme()
@@ -97,25 +108,9 @@ export default function Lekte({audio, url, parole}) {
     clearInterval(intervalRef.current)
     intervalRef.current = setInterval(() => {
       setPosition(Math.round(audioRef.current.currentTime))
-    }, [1000])
+    }, 1000)
   }
 
-  useEffect(() => {
-    if (isReady.current) {
-      audioRef.current.play()
-      setIsPlaying(true)
-      startTimer()
-    }
-  }, [])
-
-  useEffect(() => {
-    if (isPlaying) {
-      audioRef.current.play()
-    } else {
-      audioRef.current.pause()
-    }
-  }, [isPlaying])
-
   useEffect(() =>
     () => {
       audioRef.current.pause()
@@ -125,7 +120,7 @@ export default function Lekte({audio, url, parole}) {
 
   useEffect(() => {
     if (isPlaying) {
-      audioRef.current.play()
+      audioRef.current.play().catch(() => {})
       startTimer()
     } else {
       clearInterval(intervalRef.current)
@@ -135,7 +130,7 @@ export default function Lekte({audio, url, parole}) {
 
   useEffect(() => {
     audioRef.current.pause()
-    audioRef.current = new Audio(audio)
+    audioRef.current = createAudio(audio)
     setIsPlaying(false)
     setVolume(100)
     setPosition(0)
@@ -151,6 +146,7 @@ export default function Lekte({audio, url, parole}) {
       setPosition(0)
       el.currentTime = 0
     }
+
     el.addEventListener('loadedmetadata', onLoaded)
     el.addEventListener('ended', onEnded)
     return () => {
@@ -160,7 +156,10 @@ export default function Lekte({audio, url, parole}) {
   }, [audio])
 
   useEffect(() => {
-    if (!parole?.pawol?.url) return
+    if (!parole?.pawol?.url) {
+      return
+    }
+
     fetch(new URL(parole.pawol.url, IMAGE_URL).toString())
       .then(r => r.text())
       .then(text => setLrcLines(parseLrc(text)))
@@ -168,7 +167,7 @@ export default function Lekte({audio, url, parole}) {
   }, [parole?.pawol?.url])
 
   const activeIndex = lrcLines
-    ? lrcLines.reduce((last, line, i) => line.time <= position ? i : last, -1)
+    ? lrcLines.findLastIndex(line => line.time <= position)
     : -1
 
   const handleChangePosition = value => {
@@ -181,9 +180,10 @@ export default function Lekte({audio, url, parole}) {
     audioRef.current.volume = value / 100
   }
 
-  const imagePath = parole?.couverture?.formats?.thumbnail?.url
-  const width = parole?.couverture?.formats?.thumbnail?.width || 192
-  const height = parole?.couverture?.formats?.thumbnail?.height || 192
+  const couvertureFormat = formatKuveti(parole?.couverture, 'thumbnail')
+  const imagePath = couvertureFormat?.url
+  const width = couvertureFormat?.width || 192
+  const height = couvertureFormat?.height || 192
 
   const imageSrc = imagePath
     ? new URL(imagePath, IMAGE_URL).toString()
@@ -322,7 +322,10 @@ export default function Lekte({audio, url, parole}) {
             {[-1, 0, 1].map(offset => {
               const idx = activeIndex + offset
               const line = lrcLines[idx]
-              if (!line) return <Box key={offset} sx={{height: offset === 0 ? 28 : 20}} />
+              if (!line) {
+                return <Box key={offset} sx={{height: offset === 0 ? 28 : 20}} />
+              }
+
               return (
                 <Typography
                   key={offset}

components/teks/oki-mizik.js

@@ -3,8 +3,6 @@ import {Box, CircularProgress} from '@mui/material'
 import dynamic from 'next/dynamic'
 
 const MIZIK_URL = process.env.NEXT_PUBLIC_OKI_MIZIK_URL || 'https://funkwhale-server.com'
-const MIZIK_API_USER = process.env.NEXT_PUBLIC_MIZIK_API_USER || 'user'
-const MIZIK_API_PASSWORD = process.env.NEXT_PUBLIC_MIZIK_API_PASSWORD || 'password'
 
 const DinamikLekte = dynamic(
   () => import('./lekte'), // eslint-disable-line node/no-unsupported-features/es-syntax
@@ -12,7 +10,7 @@ const DinamikLekte = dynamic(
 )
 
 export default function OkiMizik({id, parole}) {
-  const mizikStreamUrl = `${MIZIK_URL}/rest/stream?u=${MIZIK_API_USER}&p=${MIZIK_API_PASSWORD}&id=${id}`
+  const mizikStreamUrl = `/api/mizik-stream/${id}`
   const detailsUrl = `${MIZIK_URL}/library/tracks/${id}`
 
   return (

components/teks/repons-mastodon.jsx

@@ -0,0 +1,83 @@
+'use client'
+
+import {useState} from 'react'
+import PropTypes from 'prop-types'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+import Link from 'next/link'
+
+const BOKANTE_URL = process.env.NEXT_PUBLIC_BOKANTE_URL || 'https://bokante.o-k-i.net'
+const BOKANTE_ACCOUNT = process.env.NEXT_PUBLIC_BOKANTE_ACCOUNT || 'pawol_nu'
+
+function extraireInstance(saisie) {
+  const valeur = saisie.trim().replace(/^@/, '').replace(/^https?:\/\//, '').replace(/\/$/, '')
+  return valeur.includes('@') ? valeur.split('@').pop() : valeur
+}
+
+export default function ReponsMastodon({bokanteStatusId}) {
+  const [ouvert, setOuvert] = useState(false)
+  const [saisie, setSaisie] = useState('')
+
+  if (!bokanteStatusId) {
+    return null
+  }
+
+  const tootUrl = `${BOKANTE_URL}/@${BOKANTE_ACCOUNT}/${bokanteStatusId}`
+
+  const repondre = () => {
+    const instance = extraireInstance(saisie)
+    if (!instance) {
+      return
+    }
+
+    window.open(`https://${instance}/authorize_interaction?uri=${encodeURIComponent(tootUrl)}`, '_blank', 'noopener,noreferrer')
+    setOuvert(false)
+  }
+
+  return (
+    <Box sx={{maxWidth: 700, margin: '1em auto 0', textAlign: 'center'}}>
+      <Typography variant='body2' sx={{mb: 1}}>
+        Rejoignez la discussion sur{' '}
+        <Link href={tootUrl} target='_blank' rel='noopener noreferrer'>Mastodon</Link>
+      </Typography>
+      <Button variant='outlined' size='small' onClick={() => setOuvert(true)}>
+        Répondre via Mastodon
+      </Button>
+      <Dialog open={ouvert} onClose={() => setOuvert(false)}>
+        <DialogTitle>Répondre depuis votre compte Mastodon</DialogTitle>
+        <DialogContent>
+          <Typography variant='body2' sx={{mb: 2}}>
+            Indiquez votre identifiant (@vous@votre-instance) ou juste le nom de votre
+            instance, vous serez redirigé·e vers votre compte pour répondre.
+          </Typography>
+          <TextField
+            autoFocus
+            fullWidth
+            label='@vous@votre-instance'
+            value={saisie}
+            onChange={event => setSaisie(event.target.value)}
+            onKeyDown={event => {
+              if (event.key === 'Enter') {
+                repondre()
+              }
+            }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOuvert(false)}>Annuler</Button>
+          <Button variant='contained' onClick={repondre}>Continuer</Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  )
+}
+
+ReponsMastodon.propTypes = {
+  bokanteStatusId: PropTypes.string
+}

components/teks/teks-drawer-loader.js

@@ -0,0 +1,13 @@
+import {notFound} from 'next/navigation'
+import {jwennTeks} from '../../lib/oki-api'
+import TeksDrawer from './teks-drawer'
+
+export default async function TeksDrawerLoader() {
+  const teks = await jwennTeks()
+
+  if (!teks) {
+    notFound()
+  }
+
+  return <TeksDrawer paroles={teks} />
+}

components/teks/teks-drawer.js

@@ -2,7 +2,6 @@
 
 import {useState, useEffect, forwardRef} from 'react'
 import Link from 'next/link'
-import {useParams} from 'next/navigation'
 import PropTypes from 'prop-types'
 import AppBar from '@mui/material/AppBar'
 import Box from '@mui/material/Box'
@@ -19,6 +18,7 @@ import VweKouteAchte from './vwe-koute-achte'
 import DrawerBar from './drawer-bar'
 import Pataje from './pataje'
 import KaraokeModal from './karaoke-modal'
+import {useCurrentTrack} from './current-track-context'
 
 const drawerWidth = 240
 
@@ -27,14 +27,12 @@ const Alert = forwardRef(function Alert(props, ref) {
 })
 
 export default function TeksDrawer({paroles}) {
-  const {slug} = useParams()
+  const [parole] = useCurrentTrack()
   const [mobileOpen, setMobileOpen] = useState(false)
   const [open, setOpen] = useState(false)
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
 
-  const parole = paroles.find((parole) => parole.slug === slug)  
-
   useEffect(() => {
     if (error || success) {
       setOpen(true)
@@ -84,7 +82,7 @@ export default function TeksDrawer({paroles}) {
               <MenuIcon />
             </IconButton>
             {parole && (
-              <Link passHref href='/paroles'>
+              <Link passHref prefetch={false} href='/paroles'>
                 <IconButton aria-label='return' size='medium'>
                   <KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
                 </IconButton>
@@ -139,7 +137,7 @@ export default function TeksDrawer({paroles}) {
         </Drawer>
       </Box>
       {parole?.karaokeUrl && (
-        <KaraokeModal url={parole.karaokeUrl} titre={parole.titre} artistes={parole.artistes} />
+        <KaraokeModal url={parole.karaokeUrl} desktopUrl={parole.karaokeDesktopUrl} titre={parole.titre} artistes={parole.artistes} />
       )}
       {success && (
         <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>

components/teks/teks-kat.js

@@ -9,34 +9,29 @@ import Card from '@mui/material/Card'
 
 import CardActionArea from '@mui/material/CardActionArea'
 import CardContent from '@mui/material/CardContent'
-import CardMedia from '@mui/material/CardMedia'
 import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
 import Grid from '@mui/material/Grid'
 import ExplicitIcon from '@mui/icons-material/Explicit'
 import {styled} from '@mui/material/styles'
 
-import {getAlias} from '../../lib/utils/format'
+import {getAlias} from '../../lib/utils/get-alias'
+import {formatKuveti} from '../../lib/kuveti'
 
 const PREFIX = 'teks-kat'
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
 const classes = {
   root: `${PREFIX}-root`,
-  media: `${PREFIX}-media`
 }
 
 const StyledGrid = styled(Grid)({
   [`& .${classes.root}`]: {
     maxWidth: 345
   },
-  [`& .${classes.media}`]: {
-    height: 240,
-    objectFit: 'contain'
-  }
 })
 
-const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
+const BLUR_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNsYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
 
 export default function TeksKat({parole}) {
   const router = useRouter()
@@ -53,14 +48,21 @@ export default function TeksKat({parole}) {
     <StyledGrid size={{xs: 12, sm: 6, md: 4}}>
       <Card className={classes.root}>
         <CardActionArea onClick={() => handleClick(slug)}>
-          <CardMedia
-            className={classes.media}
-            component='img'
-            alt={titre}
-            image={couverture?.url ? `${IMAGE_URL}${couverture.formats?.thumbnail?.url || couverture.url}` : noImageUrl}
-            title={titre}
-            loading='lazy'
-          />
+          <Box sx={{position: 'relative', height: 240}}>
+            {couverture?.url ? (
+              <Image
+                fill
+                src={`${IMAGE_URL}${formatKuveti(couverture, 'thumbnail')?.url}`}
+                alt={titre}
+                placeholder='blur'
+                blurDataURL={BLUR_DATA_URL}
+                sizes='(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw'
+                style={{objectFit: 'contain'}}
+              />
+            ) : (
+              <Box sx={{width: '100%', height: '100%', bgcolor: 'grey.300'}} />
+            )}
+          </Box>
           <CardContent>
             <Box sx={{display: 'flex', alignItems: 'center'}}>
               <Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>

components/teks/teks.js

@@ -1,9 +1,10 @@
 'use client'
 
-import {useEffect} from 'react'
+import {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
 import {useMediaQuery} from '@mui/material'
@@ -12,17 +13,25 @@ import slugify from 'slugify'
 
 import {styled} from '@mui/material/styles'
 import ExplicitIcon from '@mui/icons-material/Explicit'
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
 
 import Image from 'next/image'
 
-import {formatJsonString, getAlias} from '../../lib/utils/format'
+import {formatJsonString} from '../../lib/utils/format'
+import {getAlias} from '../../lib/utils/get-alias'
 import {formatKuveti} from '../../lib/kuveti'
 
 import LicenseModal from '../cc/license-modal'
 import FilesDialog from '../files/files-dialog'
+import KitsDialog from '../files/kits-dialog'
+import {StreamButton} from '../streaming-buttons'
 import EntegreMizik from './entegre-mizik'
 import OkiMizik from './oki-mizik'
 import DiferansDialog from './diferans-dialog'
+import Komante from './komante'
+import ReponsMastodon from './repons-mastodon'
+import {useCurrentTrack} from './current-track-context'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
@@ -77,54 +86,30 @@ const Root = styled('div')((
   },
 }))
 
-const LANG_NAMES = {fr: 'Français', en: 'English', es: 'Español', de: 'Deutsch', it: 'Italiano'}
-
-const langToArray = parole => {
-  const langArray = []
-
-  if (parole && parole.traductions) {
-    const {francais, anglais, espagnol, allemand, italien} = parole.traductions
-
-    if (anglais) {
-      langArray.push({title: 'English', lang: anglais})
-    }
-
-    if (francais) {
-      langArray.push({title: 'Français', lang: francais})
-    }
-
-    if (espagnol) {
-      langArray.push({title: 'Español', lang: espagnol})
-    }
-
-    if (allemand) {
-      langArray.push({title: 'Deutsch', lang: allemand})
-    }
-
-    if (italien) {
-      langArray.push({title: 'Italiano', lang: italien})
-    }
-  }
-
-  return langArray
+const LANG_NAMES = {
+  fr: 'Français', en: 'English', es: 'Español', de: 'Deutsch', it: 'Italiano',
+  pt: 'Português', ja: '日本語', ko: '한국어',
 }
 
-const alignTeks = (langArray, isMobile) => {
-  if (langArray.length > 0 && !isMobile) {
-    return 'justify'
+const TRAD_FIELDS = [
+  {field: 'anglais', title: 'English'},
+  {field: 'francais', title: 'Français'},
+  {field: 'espagnol', title: 'Español'},
+  {field: 'allemand', title: 'Deutsch'},
+  {field: 'italien', title: 'Italiano'},
+  {field: 'portugais', title: 'Português'},
+  {field: 'japonais', title: '日本語'},
+  {field: 'coreen', title: '한국어'},
+]
+
+const langToArray = parole => {
+  if (!parole || !parole.traductions) {
+    return []
   }
 
-  if (langArray.length > 0 && isMobile) {
-    return 'justify'
-  }
-
-  if (langArray.length === 0 && isMobile) {
-    return 'justify'
-  }
-
-  if (langArray.length === 0 && !isMobile) {
-    return 'center'
-  }
+  return TRAD_FIELDS
+    .filter(({field}) => parole.traductions[field])
+    .map(({field, title}) => ({title, lang: parole.traductions[field]}))
 }
 
 const ExplicitTooltip = Tooltip
@@ -134,6 +119,8 @@ export default function Teks({parole}) {
   const langArray = langToArray(parole)
   const enhancedAliases = getAlias(parole.artistes, parole.prioriteArtistes, true)
   const coverFmt = formatKuveti(parole.couverture)
+  const [tab, setTab] = useState(0)
+  const [, setCurrentTrack] = useCurrentTrack()
 
   useEffect(() => {
     const isBrowser = () => typeof window !== 'undefined'
@@ -144,6 +131,11 @@ export default function Teks({parole}) {
     window.scrollTo({top: 0, behavior: 'smooth'})
   }, [])
 
+  useEffect(() => {
+    setCurrentTrack(parole)
+    return () => setCurrentTrack(null)
+  }, [parole, setCurrentTrack])
+
   return (
     <Root className={classes.container}>
       <Box sx={{textAlign: 'center', marginTop: 12}}>
@@ -193,7 +185,7 @@ export default function Teks({parole}) {
             <i>parole soumise par {parole.user.username}</i>
           </Typography>
         )}
-        {parole?.userAdmin&& !parole.user && (
+        {parole?.userAdmin && !parole.user && (
           <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
             <i>parole soumise par {parole.userAdmin.firstname}</i>
           </Typography>
@@ -203,8 +195,15 @@ export default function Teks({parole}) {
             <LicenseModal license={parole.creativeCommons.toLowerCase()} sourceOriginale={parole.sourceOriginale ?? null} remixes={parole.remixes?.length ? parole.remixes : null} />
           </Box>
         )}
-        {parole?.files && (
-          <FilesDialog files={parole.files} />
+        {(parole?.files || (parole.creativeCommons && parole.kits?.length > 0)) && (
+          <Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 1}}>
+            {parole?.files && (
+              <FilesDialog files={parole.files} />
+            )}
+            {parole.creativeCommons && parole.kits?.length > 0 && (
+              <KitsDialog kits={parole.kits} />
+            )}
+          </Box>
         )}
         {(parole.okiMizikID || parole.streamAudio.length > 0 || parole.gadeEmbed) && (
           <Box sx={{textAlign: 'center'}}>
@@ -217,36 +216,75 @@ export default function Teks({parole}) {
         {parole?.difference?.length > 0 && (
           <DiferansDialog difference={parole.difference} />
         )}
-      </Box>
-      <Grid container justifycontent='center' spacing={1}>
-        <Grid size={{xs: 12, md: langArray.length > 0 ? 6 : null}}>
-          <Box className={classes.gridText}>
-            <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
-              Transcription
-              {parole.langueSource && parole.langueSource !== 'ka' && (
-                <Typography component='span' variant='body2' color='text.secondary' sx={{ml: 1}}>
-                  ({LANG_NAMES[parole.langueSource]})
-                </Typography>
-              )}
+        {parole.streamAudio?.length > 0 && (
+          <Box sx={{mt: 2, mb: 1}}>
+            <Typography variant='overline' sx={{color: 'text.secondary', display: 'block', mb: 1}}>
+              Écouter sur
             </Typography>
-            <Typography paragraph='true' align={alignTeks(langArray, isMobile)} component='span'>
+            <Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 1}}>
+              {parole.streamAudio.map(lyen => (
+                <StreamButton key={lyen.url} lyen={lyen} />
+              ))}
+            </Box>
+          </Box>
+        )}
+      </Box>
+      <Box sx={{maxWidth: 700, margin: '0 auto'}} className={classes.gridText}>
+        <Tabs
+          scrollButtons
+          allowScrollButtonsMobile
+          value={tab}
+          variant='scrollable'
+          centered={langArray.length === 0}
+          slots={{
+            startScrollButtonIcon: ArrowBackIosNewIcon,
+            endScrollButtonIcon: ArrowForwardIosIcon
+          }}
+          sx={{
+            borderBottom: 1,
+            borderColor: 'divider',
+            mb: 2,
+            '& .MuiTabs-scrollButtons': {
+              width: 36,
+              height: 36,
+              borderRadius: '50%',
+              color: 'primary.main',
+              backgroundColor: 'action.hover',
+              mx: 0.5,
+              '&.Mui-disabled': {
+                opacity: 0
+              }
+            }
+          }}
+          onChange={(event, value) => setTab(value)}
+        >
+          <Tab label='Transcription' />
+          {langArray.map(({title}) => (
+            <Tab key={title} label={title} />
+          ))}
+        </Tabs>
+        {tab === 0 && (
+          <>
+            {parole.langueSource && parole.langueSource !== 'ka' && (
+              <Typography align='center' variant='body2' color='text.secondary' sx={{mb: 1}}>
+                ({LANG_NAMES[parole.langueSource]})
+              </Typography>
+            )}
+            <Typography paragraph='true' align={isMobile ? 'justify' : 'center'} component='span'>
               {formatJsonString(parole.transcription)}
             </Typography>
-          </Box>
-        </Grid>
-        {langArray.map(({title, lang}) => (
-          <Grid key={title} size={{xs: 12, md: 6}}>
-            <Box className={classes.gridText}>
-              <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
-                {title}
-              </Typography>
-              <Typography paragraph='true' align='justify' component='span'>
-                {formatJsonString(lang)}
-              </Typography>
-            </Box>
-          </Grid>
+          </>
+        )}
+        {langArray.map(({title, lang}, index) => (
+          tab === index + 1 && (
+            <Typography key={title} paragraph='true' align='justify' component='span'>
+              {formatJsonString(lang)}
+            </Typography>
+          )
         ))}
-      </Grid>
+      </Box>
+      <ReponsMastodon bokanteStatusId={parole.bokanteStatusId} />
+      <Komante commentaires={parole.commentaires} />
     </Root>
   )
 }

components/top-loader.js

@@ -1,7 +1,12 @@
 'use client'
 
+import PropTypes from 'prop-types'
 import NextTopLoader from 'nextjs-toploader'
 
 export default function TopLoader({color}) {
   return <NextTopLoader color={color} />
 }
+
+TopLoader.propTypes = {
+  color: PropTypes.string.isRequired
+}

eslint.config.mjs

@@ -1,25 +1,25 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import {dirname} from 'node:path'
+import {fileURLToPath} from 'node:url'
+import {FlatCompat} from '@eslint/eslintrc'
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 const compat = new FlatCompat({
   baseDirectory: __dirname,
-});
+})
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals"),
+  ...compat.extends('next/core-web-vitals'),
   {
     ignores: [
-      "node_modules/**",
-      ".next/**",
-      "out/**",
-      "build/**",
-      "next-env.d.ts",
+      'node_modules/**',
+      '.next/**',
+      'out/**',
+      'build/**',
+      'next-env.d.ts',
     ],
   },
-];
+]
 
-export default eslintConfig;
+export default eslintConfig

lib/__tests__/kuveti.test.js

@@ -0,0 +1,38 @@
+import {describe, it, expect} from 'vitest'
+import {formatKuveti} from '../kuveti'
+
+const kuveti = {
+  url: '/uploads/original.jpg',
+  formats: {
+    thumbnail: {url: '/uploads/thumbnail.jpg', width: 156, height: 156},
+    small: {url: '/uploads/small.jpg', width: 500, height: 500},
+    medium: {url: '/uploads/medium.jpg', width: 750, height: 750},
+    large: {url: '/uploads/large.jpg', width: 1000, height: 1000},
+  }
+}
+
+describe('formatKuveti', () => {
+  it('returns null when there is no image', () => {
+    expect(formatKuveti(null)).toBeNull()
+    expect(formatKuveti(undefined)).toBeNull()
+  })
+
+  it('defaults to the large format', () => {
+    expect(formatKuveti(kuveti)).toBe(kuveti.formats.large)
+  })
+
+  it('prefers the thumbnail format when asked', () => {
+    expect(formatKuveti(kuveti, 'thumbnail')).toBe(kuveti.formats.thumbnail)
+  })
+
+  it('falls back to small then medium then large when thumbnail is missing', () => {
+    const {thumbnail, ...rest} = kuveti.formats
+    const withoutThumbnail = {...kuveti, formats: rest}
+    expect(formatKuveti(withoutThumbnail, 'thumbnail')).toBe(rest.small)
+  })
+
+  it('falls back to the original file when no format matches', () => {
+    const noFormats = {url: '/uploads/original.jpg', formats: {}}
+    expect(formatKuveti(noFormats, 'thumbnail')).toBe(noFormats)
+  })
+})

lib/__tests__/oki-api-pagination.test.js

@@ -0,0 +1,58 @@
+import {describe, it, expect, vi, afterEach} from 'vitest'
+import {jwennTeksSlug} from '../oki-api'
+
+function fakeEntry(i) {
+  return {slug: `slug-${i}`}
+}
+
+describe('jwennTeksSlug (full pagination)', () => {
+  const originalFetch = global.fetch
+
+  afterEach(() => {
+    global.fetch = originalFetch
+    vi.restoreAllMocks()
+  })
+
+  it('walks every page instead of stopping at the first pageSize chunk', async () => {
+    const pageSize = 200
+    const totalRecords = 250
+
+    let calls = 0
+    global.fetch = vi.fn(async url => {
+      calls++
+      if (calls > 5) {
+        throw new Error('too many pagination calls, likely an infinite loop')
+      }
+
+      const pageMatch = url.match(/pagination\[page]=(\d+)/)
+      const page = pageMatch ? Number(pageMatch[1]) : 1
+      const start = (page - 1) * pageSize
+      const end = Math.min(start + pageSize, totalRecords)
+      const data = Array.from({length: Math.max(end - start, 0)}, (_, i) => fakeEntry(start + i))
+
+      return {
+        ok: true,
+        json: async () => ({data})
+      }
+    })
+
+    const slugs = await jwennTeksSlug()
+
+    expect(slugs).toHaveLength(totalRecords)
+    expect(slugs[0]).toBe('slug-0')
+    expect(slugs.at(-1)).toBe('slug-249')
+    expect(global.fetch).toHaveBeenCalledTimes(2)
+  })
+
+  it('stops after a single page when there are fewer records than pageSize', async () => {
+    global.fetch = vi.fn(async () => ({
+      ok: true,
+      json: async () => ({data: [fakeEntry(1), fakeEntry(2)]})
+    }))
+
+    const slugs = await jwennTeksSlug()
+
+    expect(slugs).toEqual(['slug-1', 'slug-2'])
+    expect(global.fetch).toHaveBeenCalledTimes(1)
+  })
+})

lib/__tests__/oki-api.test.js

@@ -0,0 +1,37 @@
+import {describe, it, expect, vi, afterEach} from 'vitest'
+import {jwennAnTeks} from '../oki-api'
+
+describe('request (via jwennAnTeks)', () => {
+  const originalFetch = global.fetch
+
+  afterEach(() => {
+    global.fetch = originalFetch
+    vi.restoreAllMocks()
+  })
+
+  it('returns the parsed body on a successful response', async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({id: 1, titre: 'Test'})
+    })
+
+    const result = await jwennAnTeks(1, 'token')
+    expect(result).toEqual({id: 1, titre: 'Test'})
+  })
+
+  it('throws a clear error when Strapi returns an error response', async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 400,
+      json: async () => ({data: null, error: {status: 400, name: 'ValidationError', message: 'Invalid key'}})
+    })
+
+    await expect(jwennAnTeks(1, 'token')).rejects.toThrow('Eshwe pu jwenn done-a')
+  })
+
+  it('throws when the network request itself fails', async () => {
+    global.fetch = vi.fn().mockRejectedValue(new TypeError('network down'))
+
+    await expect(jwennAnTeks(1, 'token')).rejects.toThrow('Eshwe pu jwenn done-a')
+  })
+})

lib/emails/payment-succeeded.js

@@ -1,5 +1,8 @@
 const {template} = require('lodash')
 
+const ORG_NAME = process.env.NEXT_PUBLIC_ORG_NAME || 'OKI'
+const SITE_URL = process.env.SITE_URL || process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'
+
 const bodyTemplate = template(`
 <!DOCTYPE html>
 <html lang="fr">
@@ -65,18 +68,18 @@ const bodyTemplate = template(`
 
 <body>
   <div>
-    <img src="https://pawol.nu/logo-72x72.png" alt="Logo OKI">
+    <img src="${SITE_URL}/logo-72x72.png" alt="Logo ${ORG_NAME}">
   </div>
   <div class="title">
     <h2 style="margin:0; mso-line-height-rule:exactly;">Merci !</h2><br>
-    <h3 style="margin:0; mso-line-height-rule:exactly;">Votre soutien à OKI est important et nous vous en sommes très reconnaissant ❤️</h3>
+    <h3 style="margin:0; mso-line-height-rule:exactly;">Votre soutien à ${ORG_NAME} est important et nous vous en sommes très reconnaissant ❤️</h3>
   </div>
 
   <div class="container">
     <section>
       <h4>Une aide indispensable</h4>
       <p>
-        En effet, ce sont les dons qui nous permettent de maintenir tous les services liés à OKI.
+        En effet, ce sont les dons qui nous permettent de maintenir tous les services liés à ${ORG_NAME}.
       </p>
       <p>
         Toute contribution, aussi modeste soit-elle, nous permet d’augmenter nos capacités.<br />
@@ -94,7 +97,7 @@ const bodyTemplate = template(`
     <p>Pour toute question, n’hésitez pas à nous contacter en répondant à ce courriel.</p>
     <p>Merci infiniment pour votre soutien.</p>
 
-    <span><i><span class="forceWhiteLink"><button><a href="https://pawol.nu" target="blank">PAWÒL-NU</a></button></span></i></span>
+    <span><i><span class="forceWhiteLink"><button><a href="${SITE_URL}" target="blank">${ORG_NAME}</a></button></span></i></span>
   </footer>
 </html>
 `)

lib/kuveti.js

@@ -1,18 +1,20 @@
-export const formatKuveti = kuveti => {
+const SIZE_ORDER = {
+  large: ['large', 'medium', 'small'],
+  medium: ['medium', 'small', 'large'],
+  small: ['small', 'medium', 'large'],
+  thumbnail: ['thumbnail', 'small', 'medium', 'large'],
+}
+
+export const formatKuveti = (kuveti, preferred = 'large') => {
   if (!kuveti) {
     return null
   }
 
-  if (kuveti && kuveti.formats && kuveti.formats.large) {
-    return kuveti.formats.large
-  }
-
-  if (kuveti && kuveti.formats && kuveti.formats.medium) {
-    return kuveti.formats.medium
-  }
-
-  if (kuveti && kuveti.formats && kuveti.formats.small) {
-    return kuveti.formats.small
+  const order = SIZE_ORDER[preferred] ?? SIZE_ORDER.large
+  for (const size of order) {
+    if (kuveti.formats?.[size]) {
+      return kuveti.formats[size]
+    }
   }
 
   return kuveti

lib/oki-api.js

@@ -14,12 +14,18 @@ const headers = {
 async function request(url, opts = {}) {
   const {...options} = opts
 
+  let res
   try {
-    const res = await fetch(`${OKI_API}${url}`, options)
-    return res.json()
+    res = await fetch(`${OKI_API}${url}`, options)
   } catch {
     throw new Error('Eshwe pu jwenn done-a')
   }
+
+  if (!res.ok) {
+    throw new Error('Eshwe pu jwenn done-a')
+  }
+
+  return res.json()
 }
 
 export async function jwennTeksEpiSlug(slug) {
@@ -32,7 +38,16 @@ export async function jwennTeksEpiSlug(slug) {
         fields: ['username', 'firstname']
       },
       commentaires: {
-        fields: ['contenu', 'datePublication'],
+        fields: [
+          'contenu',
+          'datePublication',
+          'origine',
+          'auteurNom',
+          'auteurHandle',
+          'auteurAvatarUrl',
+          'auteurProfilUrl',
+          'remoteUrl'
+        ],
         populate: {
           user: {
             fields: ['username']
@@ -54,6 +69,9 @@ export async function jwennTeksEpiSlug(slug) {
       streamVideo: {
         populate: '*'
       },
+      kits: {
+        populate: '*'
+      },
       traductions: {
         populate: '*'
       },
@@ -92,7 +110,7 @@ export async function jwennTeksEpiSlug(slug) {
 
 export async function jwennAwtisEpiSlug(slug) {
   const query = qs.stringify({
-    populate: ['paroles', 'photo', 'paroles.couverture'],
+    populate: ['paroles', 'photo', 'paroles.couverture', 'titrePhare', 'titrePhare.streamAudio', 'titrePhare.streamVideo', 'titrePhare.couverture', 'rezoSosyal'],
     filters: {
       slug: {
         $eq: slug
@@ -111,7 +129,7 @@ export async function jwennAwtisPajinasyon(paj) {
   const start = AWTIS_POU_CHAK_PAJ * (paj - 1)
   const query = qs.stringify({
     populate: ['paroles', 'photo'],
-    sort: ['createdAt:desc'],
+    sort: ['isExclusiveArtist:desc', 'createdAt:desc'],
     pagination: {
       start,
       limit: AWTIS_POU_CHAK_PAJ
@@ -130,7 +148,7 @@ export async function jwennToutAwtis() {
     populate: ['photo'],
     sort: ['alias:asc'],
     pagination: {
-      pageSize: 100
+      pageSize: 200
     }
   }, {
     encodeValuesOnly: true
@@ -143,39 +161,16 @@ export async function jwennToutAwtis() {
 export async function jwennTeks() {
   const query = qs.stringify({
     populate: {
-      user: {
-        fields: ['username']
-      },
-      userAdmin: {
-        fields: ['username', 'firstname']
-      },
-      commentaires: {
-        fields: ['contenu', 'datePublication'],
-        populate: {
-          user: {
-            fields: ['username']
-          }
-        }
-      },
       couverture: {
         populate: '*'
       },
       artistes: {
         fields: ['alias', 'slug']
-      },
-      streamAudio: {
-        populate: '*'
-      },
-      streamVideo: {
-        populate: '*'
-      },
-      traductions: {
-        populate: '*'
       }
     },
     sort: ['titre:asc'],
     pagination: {
-      pageSize: 100
+      pageSize: 200
     }
   }, {
     encodeValuesOnly: true
@@ -185,32 +180,37 @@ export async function jwennTeks() {
   return data
 }
 
-export async function jwennAwtisSlug() {
-  const query = qs.stringify({
-    sort: ['createdAt:desc'],
-    pagination: {
-      pageSize: 100
-    }
-  }, {
-    encodeValuesOnly: true
-  })
+async function jwennTouSlug(endpoint) {
+  const pageSize = 200
+  const slugs = []
+  let page = 1
+  let hasMore = true
 
-  const {data} = await request(`/artistes?${query}`, headers)
-  return data.map(({slug}) => slug)
+  while (hasMore) {
+    const query = qs.stringify({
+      sort: ['createdAt:desc'],
+      fields: ['slug'],
+      pagination: {page, pageSize}
+    }, {
+      encodeValuesOnly: true
+    })
+
+    // eslint-disable-next-line no-await-in-loop -- pagination séquentielle, chaque page dépend du nombre de résultats de la précédente
+    const {data} = await request(`/${endpoint}?${query}`, headers)
+    slugs.push(...data.map(({slug}) => slug))
+    hasMore = data.length === pageSize
+    page += 1
+  }
+
+  return slugs
+}
+
+export async function jwennAwtisSlug() {
+  return jwennTouSlug('artistes')
 }
 
 export async function jwennTeksSlug() {
-  const query = qs.stringify({
-    sort: ['createdAt:desc'],
-    pagination: {
-      pageSize: 100
-    }
-  }, {
-    encodeValuesOnly: true
-  })
-
-  const {data} = await request(`/paroles?${query}`, headers)
-  return data.map(({slug}) => slug)
+  return jwennTouSlug('paroles')
 }
 
 export async function jwennDenyeTeks() {
@@ -233,9 +233,9 @@ export async function jwennAnVedette() {
   const query = qs.stringify({
     populate: ['artistes', 'couverture'],
     filters: {
-      isNewRelease: { $eq: true }
+      isNewRelease: {$eq: true}
     },
-    pagination: { limit: 1 }
+    pagination: {limit: 1}
   }, {
     encodeValuesOnly: true
   })

lib/rezo-lis.js

@@ -1,16 +1,12 @@
 import YouTubeIcon from '@mui/icons-material/YouTube'
 import TelegramIcon from '@mui/icons-material/Telegram'
 
-import PeertubeIcon from './icons/peertube'
-import XmppIcon from './icons/xmpp'
 import XIcon from './icons/x'
 import GiteaIcon from './icons/gitea'
 import BlueskyIcon from './icons/bluesky'
 
 const gitURL = process.env.NEXT_PUBLIC_GIT || 'https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/pawol.nu'
 const blueskyUrl = process.env.NEXT_PUBLIC_BLUESKY_URL || 'https://bsky.app/profile/organisationka.bsky.social'
-const xmppContact = process.env.NEXT_PUBLIC_XMPP || 'oki@xmpp.cz'
-const gadeUsername = process.env.NEXT_PUBLIC_GADE_USERNAME || 'oki'
 const youtubeUsername = process.env.NEXT_PUBLIC_YOUTUBE_USERNAME || 'OrganisationKInternationaleOKi'
 const tiwtterUsername = process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'
 const telegramGroup = process.env.NEXT_PUBLIC_TELEGRAM_GROUP || 'OrganisationKA'

lib/utils/__tests__/get-alias.test.js

@@ -0,0 +1,26 @@
+import {describe, it, expect} from 'vitest'
+import {getAlias} from '../get-alias'
+
+describe('getAlias', () => {
+  it('retourne une chaîne vide sans planter quand artistes est undefined', () => {
+    expect(getAlias(undefined)).toBe('')
+  })
+
+  it('retourne une chaîne vide sans planter quand artistes est un tableau vide', () => {
+    expect(getAlias([])).toBe('')
+  })
+
+  it('retourne l\'alias unique quand il n\'y a qu\'un artiste', () => {
+    expect(getAlias([{id: 1, alias: 'Foo'}])).toBe('Foo')
+  })
+
+  it('ignore un id de priorité qui ne correspond à aucun artiste (donnée obsolète)', () => {
+    const artistes = [{id: 1, alias: 'Foo'}, {id: 2, alias: 'Bar'}]
+    expect(getAlias(artistes, '1-99-2')).toBe('Foo et Bar')
+  })
+
+  it('formate plusieurs artistes selon la priorité fournie', () => {
+    const artistes = [{id: 1, alias: 'Foo'}, {id: 2, alias: 'Bar'}]
+    expect(getAlias(artistes, '2-1')).toBe('Bar et Foo')
+  })
+})

lib/utils/format.js

@@ -1,54 +1,2 @@
-import slugify from 'slugify'
-
 export const formatJsonString = stringToFormat =>
   stringToFormat.split('\n').map((string, index) => <div key={index}>{`${string}`}<br /></div>) // eslint-disable-line react/no-array-index-key
-
-export const getAlias = (artistes, priorite = null, enhanced = false) => {
-  if (artistes.length === 1 && !enhanced) {
-    return artistes[0].alias
-  }
-
-  if (artistes.length === 1 && enhanced) {
-    return [{
-      type: 'element',
-      value: artistes[0].alias
-    }]
-  }
-
-  const alias = []
-  const splittedPriority = priorite ? priorite.split('-')
-    .map(p => Number.parseInt(p, 10)) : null
-
-  if (splittedPriority) {
-    for (const element of splittedPriority) {
-      const foundedArtistes = artistes.find(({id}) => id === element)
-      alias.push(foundedArtistes.alias)
-    }
-  } else {
-    for (const artiste of artistes) {
-      alias.push(artiste.alias)
-    }
-  }
-
-  if (enhanced) {
-    const list = new Intl.ListFormat('fr').formatToParts(alias)
-    return list
-  }
-
-  return new Intl.ListFormat('fr').format(alias)
-}
-
-function separateString(inputString) {
-  const regex = /\s*,\s*|\s+et\s+/
-  const strings = inputString.split(regex).map(element => element.trim())
-  return strings
-}
-
-export const getAliasObject = inputString => {
-  const awtis = separateString(inputString)
-
-  return awtis.map(alias => ({
-    alias,
-    slug: slugify(alias, {lower: true, remove: /[*#+~.()'"!:@]/g})
-  }))
-}

lib/utils/get-alias.js

@@ -0,0 +1,55 @@
+import slugify from 'slugify'
+
+export const getAlias = (artistes, priorite = null, enhanced = false) => {
+  const safeArtistes = artistes || []
+
+  if (safeArtistes.length === 1 && !enhanced) {
+    return safeArtistes[0].alias
+  }
+
+  if (safeArtistes.length === 1 && enhanced) {
+    return [{
+      type: 'element',
+      value: safeArtistes[0].alias
+    }]
+  }
+
+  const alias = []
+  const splittedPriority = priorite ? priorite.split('-')
+    .map(p => Number.parseInt(p, 10)) : null
+
+  if (splittedPriority) {
+    for (const element of splittedPriority) {
+      const foundedArtistes = safeArtistes.find(({id}) => id === element)
+      if (foundedArtistes) {
+        alias.push(foundedArtistes.alias)
+      }
+    }
+  } else {
+    for (const artiste of safeArtistes) {
+      alias.push(artiste.alias)
+    }
+  }
+
+  if (enhanced) {
+    const list = new Intl.ListFormat('fr').formatToParts(alias)
+    return list
+  }
+
+  return new Intl.ListFormat('fr').format(alias)
+}
+
+function separateString(inputString) {
+  const regex = /\s*,\s*|\s+et\s+/
+  const strings = inputString.split(regex).map(element => element.trim())
+  return strings
+}
+
+export const getAliasObject = inputString => {
+  const awtis = separateString(inputString)
+
+  return awtis.map(alias => ({
+    alias,
+    slug: slugify(alias, {lower: true, remove: /[*#+~.()'"!:@]/g})
+  }))
+}

next.config.js

@@ -5,40 +5,32 @@ const withPWA = require('next-pwa')({
   skipWaiting: true
 })
 
+function buildRemotePatterns() {
+  const raw = process.env.NEXT_PUBLIC_DOMAINS_IMAGE || ''
+  const patterns = raw.split(' ').filter(Boolean).map(entry => {
+    const [hostname, port] = entry.split(':')
+    const isLocal = hostname === 'localhost' || hostname === '127.0.0.1'
+    const pattern = {protocol: isLocal ? 'http' : 'https', hostname, pathname: '/uploads/**'}
+    if (port) {
+      pattern.port = port
+    }
+
+    return pattern
+  })
+  if (!raw.includes('localhost')) {
+    patterns.push({protocol: 'http', hostname: 'localhost', port: '1337', pathname: '/uploads/**'})
+  }
+
+  if (!raw.includes('127.0.0.1')) {
+    patterns.push({protocol: 'http', hostname: '127.0.0.1', port: '1337', pathname: '/uploads/**'})
+  }
+
+  return patterns
+}
+
 module.exports = (withPWA({
   turbopack: {},
-  webpack: config => {
-    config.module.rules.push({
-      test: /\.svg$/,
-      use: ['@svgr/webpack', 'url-loader'],
-    })
-
-    return config
-  },
   images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'api.pawol.nu',
-        pathname: '/uploads/**',
-      },
-      {
-        protocol: 'https',
-        hostname: 'pawol.nu',
-      },
-      {
-        protocol: 'http',
-        hostname: '127.0.0.1',
-        port: '1337',
-        pathname: '/uploads/**',
-      },
-      {
-        protocol: 'http',
-        hostname: 'localhost',
-        port: '1337',
-        pathname: '/uploads/**',
-      },
-    ]
-
+    remotePatterns: buildRemotePatterns()
   }
 }))

package.json

@@ -17,7 +17,9 @@
     "lint": "xo",
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
@@ -32,36 +34,36 @@
     "@mui/material-pigment-css": "^9.0.0",
     "@mui/styles": "^6.4.8",
     "@pigment-css/react": "^0.0.30",
-    "@svgr/webpack": "^6.5.0",
-    "axios": "^0.21.0",
-    "compression": "^1.7.4",
     "date-fns": "^2.16.1",
     "dotenv": "^16.0.0",
-    "express": "^4.17.1",
-    "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
     "music-metadata-browser": "^2.5.11",
     "next": "16.2.4",
-    "next-auth": "^5.0.0-beta.31",
     "next-plausible": "^4.0.0",
     "next-pwa": "5.6.0",
     "nextjs-toploader": "^3.9.17",
     "nodemailer": "^6.7.2",
     "nprogress": "^0.2.0",
+    "qs": "^6.15.3",
     "react": "19.2.5",
     "react-dom": "19.2.5",
-    "react-swipeable-views": "^0.13.9",
     "react-virtuoso": "^4.4.0",
     "sharp": "^0.29.3",
     "slugify": "^1.6.6"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitejs/plugin-react": "^6.0.3",
     "eslint": "^8.7.0",
-    "eslint-config-next": "16.2.4",
     "eslint-config-xo-nextjs": "^4.0.3",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "jsdom": "^29.1.1",
+    "vitest": "^4.1.9",
     "xo": "^0.47.0"
   },
   "xo": {
@@ -83,11 +85,11 @@
         "error",
         {
           "capIsNewExceptions": [
-            "CredentialsProvider",
-            "TwitterProvider",
-            "GoogleProvider",
-            "GitHubProvider",
-            "NextAuth"
+            "GET",
+            "POST",
+            "PUT",
+            "DELETE",
+            "PATCH"
           ]
         }
       ],

public/cgu/cgu.md

@@ -0,0 +1,186 @@
+# CGU et politique de confidentialité — PAWÒL-NU
+
+## Définitions
+
+**Prestations et Services** : [pawol.nu](https://pawol.nu) met à disposition :
+
+**Contenu** : Ensemble des éléments constituants l'information présente sur le site, notamment textes – images – vidéos.
+
+**Informations utilisateurs** : Ci après dénommé « Information(s) » qui correspondent à l'ensemble des données personnelles susceptibles d'être détenues par [pawol.nu](https://pawol.nu) pour la gestion de votre compte, et à des fins d'analyses et de statistiques.
+
+**Utilisateur** : Internaute, utilisant le site susnommé.
+
+**Utilisateur enregistré** : Internaute ayant compte utilisateur, utilisant le site susnommé.
+
+**Informations personnelles** : « Les informations qui permettent, sous quelque forme que ce soit, directement ou non, l'identification des personnes physiques auxquelles elles s'appliquent » (article 4 de la loi n° 78-17 du 6 janvier 1978).
+
+Les termes « données à caractère personnel », « personne concernée », « sous traitant » et « données sensibles » ont le sens défini par le Règlement Général sur la Protection des Données (RGPD : n° 2016-679)
+
+## 1. Présentation du site internet
+
+En vertu de l'article 6 de la loi n° 2004-575 du 21 juin 2004 pour la confiance dans l'économie numérique, il est précisé aux utilisateurs du site internet [pawol.nu](https://pawol.nu) l'identité des différents intervenants dans le cadre de sa réalisation et de son suivi :
+
+**Propriétaire** : ORGANISATION KA INTERNATIONALE (Association loi 1901)
+
+**Responsable publication** : ORGANISATION KA INTERNATIONALE – [kontak@o-k-i.net](mailto:kontak@o-k-i.net)
+
+Le responsable publication est une personne morale
+
+**Réalisation** : Cédric Pronzola
+
+- **Courriel** : [contact@cedric-pronzola.dev](mailto:contact@cedric-pronzola.dev)
+- **WEB** : [cedric-pronzola.dev](https://cedric-pronzola.dev)
+- **Git** : [LABOLA - OKI](https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE)
+
+**Hébergeur** : OVH – 2 rue Kellermann - 59100 Roubaix - France
+
+**Délégué à la protection des données** : ORGANISATION KA INTERNATIONALE – [kontak@o-k-i.net](mailto:kontak@o-k-i.net)
+
+Ces mentions légales RGPD sont issues du [générateur gratuit de mentions légales pour un site internet (orson.io)](https://fr.orson.io/1371/generateur-mentions-legales).
+
+## 2. Conditions générales d'utilisation du site et des services proposés
+
+L'utilisation du site [pawol.nu](https://pawol.nu) implique l'acceptation pleine et entière des conditions générales d'utilisation ci-après décrites. Ces conditions d'utilisation sont susceptibles d'être modifiées ou complétées à tout moment, les utilisateurs du site [pawol.nu](https://pawol.nu) sont donc invités à les consulter de manière régulière.
+
+Ce site internet est normalement accessible à tout moment aux utilisateurs. Une interruption pour raison de maintenance technique peut être toutefois décidée par [pawol.nu](https://pawol.nu), qui s'efforcera alors de communiquer préalablement aux utilisateurs les dates et heures de l'intervention. Le site web [pawol.nu](https://pawol.nu) est mis à jour régulièrement par **ORGANISATION KA INTERNATIONALE**. De la même façon, les mentions légales peuvent être modifiées à tout moment : elles s'imposent néanmoins à l'utilisateur qui est invité à s'y référer le plus souvent possible afin d'en prendre connaissance.
+
+## 3. Description des services fournis
+
+[pawol.nu](https://pawol.nu) s'efforce de fournir sur le site, des informations aussi précises que possible. Toutefois, il ne pourra être tenu responsable des oublis, des inexactitudes et des carences dans la mise à jour, qu'elles soient de son fait ou du fait des tiers partenaires qui lui fournissent ces informations.
+
+Toutes les informations indiquées sur le site [pawol.nu](https://pawol.nu) sont données à titre indicatif, et sont susceptibles d'évoluer. Par ailleurs, les renseignements figurant sur le site [pawol.nu](https://pawol.nu) ne sont pas exhaustifs. Ils sont donnés sous réserve de modifications ayant été apportées depuis leur mise en ligne.
+
+## 4. Limitations contractuelles sur les données techniques
+
+Le site utilise la technologie JavaScript. Le site Internet ne pourra être tenu responsable de dommages matériels liés à l'utilisation du site. De plus, l'utilisateur du site s'engage à accéder au site en utilisant un matériel récent, ne contenant pas de virus et avec un navigateur de dernière génération mis-à-jour. Le site [pawol.nu](https://pawol.nu) est hébergé chez un prestataire sur le territoire de l'Union Européenne conformément aux dispositions du Règlement Général sur la Protection des Données (RGPD : n° 2016-679).
+
+L'objectif est d'apporter une prestation qui assure le meilleur taux d'accessibilité. L'hébergeur assure la continuité de son service 24 Heures sur 24, tous les jours de l'année. Il se réserve néanmoins la possibilité d'interrompre le service d'hébergement pour les durées les plus courtes possibles notamment à des fins de maintenance, d'amélioration de ses infrastructures, de défaillance de ses infrastructures ou si les Prestations et Services génèrent un trafic réputé anormal.
+
+[pawol.nu](https://pawol.nu) et l'hébergeur ne pourront être tenus responsables en cas de dysfonctionnement du réseau Internet, des lignes téléphoniques ou du matériel informatique et de téléphonie lié notamment à l'encombrement du réseau empêchant l'accès au serveur.
+
+## 5. Limitations de responsabilité
+
+[pawol.nu](https://pawol.nu) agit en tant qu'éditeur du site. [pawol.nu](https://pawol.nu) est responsable de la qualité et de la véracité du Contenu qu'il publie.
+
+[pawol.nu](https://pawol.nu) ne pourra être tenu responsable des dommages directs et indirects causés au matériel de l'utilisateur, lors de l'accès au site internet [pawol.nu](https://pawol.nu), et résultant soit de l'utilisation d'un matériel ne répondant pas aux spécifications indiquées au point 4, soit de l'apparition d'un bug ou d'une incompatibilité.
+
+## 6. Gestion des données personnelles
+
+### 6.1 Responsables de la collecte des données personnelles
+
+Pour les données personnelles collectées dans le cadre de la création du compte personnel de l'utilisateur et de sa navigation sur le site le responsable du traitement des données personnelles est : ORGANISATION KA INTERNATIONALE. [pawol.nu](https://pawol.nu).
+
+En tant que responsable du traitement des données qu'il collecte, [pawol.nu](https://pawol.nu) s'engage à respecter le cadre des dispositions légales en vigueur. Chaque fois que [pawol.nu](https://pawol.nu) traite des Données Personnelles, [pawol.nu](https://pawol.nu) prend toutes les mesures raisonnables pour s'assurer de l'exactitude et de la pertinence des Données Personnelles au regard des finalités pour lesquelles [pawol.nu](https://pawol.nu) les traite.
+
+### 6.2 Finalité des données collectées
+
+[pawol.nu](https://pawol.nu) est susceptible de traiter tout ou partie des données :
+
+- pour permettre la navigation sur le site et la gestion et la traçabilité des prestations et services commandés par l'utilisateur : données de connexion et d'utilisation du site
+- pour prévenir et lutter contre la fraude informatique (spamming, hacking…) : matériel informatique utilisé pour la navigation, l'adresse IP, le mot de passe (hashé)
+- pour améliorer la navigation sur le site : données de connexion et d'utilisation
+
+### 6.3 Droit d'accès, de rectification et d'opposition
+
+Conformément à la réglementation européenne en vigueur, les Utilisateurs de [pawol.nu](https://pawol.nu) disposent des droits suivants :
+
+- droit d'accès (article 15 RGPD) et de rectification (article 16 RGPD), de mise à jour, de complétude des données des Utilisateurs droit de verrouillage ou d'effacement des données des Utilisateurs à caractère personnel (article 17 du RGPD), lorsqu'elles sont inexactes, incomplètes, équivoques, périmées, ou dont la collecte, l'utilisation, la communication ou la conservation est interdite
+- droit de retirer à tout moment un consentement (article 13-2c RGPD)
+- droit à la limitation du traitement des données des Utilisateurs (article 18 RGPD)
+- droit à la portabilité des données que les Utilisateurs auront fournies, lorsque ces données font l'objet de traitements automatisés fondés sur leur consentement ou sur un contrat (article 20 RGPD)
+- droit de définir le sort des données des Utilisateurs après leur mort et de choisir à qui [pawol.nu](https://pawol.nu) devra communiquer (ou non) ses données à un tiers qu'ils aura préalablement désigné
+
+Dès que [pawol.nu](https://pawol.nu) a connaissance du décès d'un Utilisateur et à défaut d'instructions de sa part, [pawol.nu](https://pawol.nu) s'engage à détruire ses données, sauf si leur conservation s'avère nécessaire à des fins probatoires ou pour répondre à une obligation légale.
+
+Si l'Utilisateur souhaite savoir comment [pawol.nu](https://pawol.nu) utilise ses Données Personnelles, demander à les rectifier ou s'oppose à leur traitement, l'Utilisateur peut contacter [pawol.nu](https://pawol.nu) par courriel à l'adresse suivante, [kontak@o-k-i.net](mailto:kontak@o-k-i.net) ou via XMPP à [oki@xmpp.cz](xmpp:oki@xmpp.cz).
+
+Dans ce cas, l'Utilisateur doit indiquer les Données Personnelles qu'il souhaiterait que [pawol.nu](https://pawol.nu) corrige, mette à jour ou supprime, en s'identifiant précisément avec une copie d'une pièce d'identité (carte d'identité ou passeport).
+
+Les demandes de suppression de Données Personnelles seront soumises aux obligations qui sont imposées à [pawol.nu](https://pawol.nu) par la loi, notamment en matière de conservation ou d'archivage des documents. Enfin, les Utilisateurs de [pawol.nu](https://pawol.nu) peuvent déposer une réclamation auprès des autorités de contrôle, et notamment de la CNIL (https://www.cnil.fr/fr/plaintes).
+
+### 6.4 Non-communication des données personnelles
+
+[pawol.nu](https://pawol.nu) s'interdit de traiter, héberger ou transférer les Informations collectées sur ses utilisateurs vers un pays situé en dehors de l'Union européenne ou reconnu comme « non adéquat » par la Commission européenne sans en informer préalablement l'utilisateur. Pour autant, [pawol.nu](https://pawol.nu) reste libre du choix de ses sous-traitants techniques et commerciaux à la condition qu'il présentent les garanties suffisantes au regard des exigences du Règlement Général sur la Protection des Données (RGPD : n° 2016-679).
+
+[pawol.nu](https://pawol.nu) s'engage à prendre toutes les précautions nécessaires afin de préserver la sécurité des Informations et notamment qu'elles ne soient pas communiquées à des personnes non autorisées. Cependant, si un incident impactant l'intégrité ou la confidentialité des Informations de l'utilisateur est portée à la connaissance de [pawol.nu](https://pawol.nu), celle-ci devra dans les meilleurs délais informer l'utilisateur et lui communiquer les mesures de corrections prises. Par ailleurs [pawol.nu](https://pawol.nu) ne collecte aucune « données sensibles ».
+
+### 6.5 Inscription et connexion
+
+Les utilisateurs peuvent s'inscrire sur [pawol.nu](https://pawol.nu) en renseignant leur adresse e-mail, un nom d'utilisateur ainsi qu'un mot de passe. À la suite de l'inscription, un lien de vérification est envoyé à l'adresse utilisée. Ce lien permet d'activer le compte. Sans cette activation, l'utilisateur n'aura pas la possibilité de se connecter au site. Si un utilisateur n'a pas reçu le lien d'activation, il a la possibilité de demander son renvoi. L'utilisateur ayant oublié son mot de passe peut faire la demande de renouvellement de celui-ci. Avant toute inscription, il est important de noté que le nom d'utilisateur est public et donc accessible à tous. En effet, le site fait appel à une API qui permet la consultation de plusieurs éléments, dont l'identifiant de l'utilisateur ainsi que le nom qu'il aura choisi au moment de l'inscription. Cependant, l'adresse e-mail ne figure pas dans les informations accessibles. Seul [pawol.nu](https://pawol.nu) en à connaissance. Les utilisateurs peuvent également se connecter en utilisant un compte Twitter. Dans ce cas, c'est l'identifiant de cette plateforme qui sera affiché en cas de contribution. Il est également possible de se connecter grâce à un compte Google. En acceptant d'utiliser la fonctionnalité de connexion via Google ou Twitter, vous autorisez [pawol.nu](https://pawol.nu) à récupérer les informations liées à votre profil, que vous avez transmises à ces plateformes lors de votre inscription. Un compte GitHub permet désormais de se connecter au site. Nous utilisons uniquement le nom d'utilisateur, ainsi que l'adresse e-mail.
+
+### 6.6 Proposition de paroles
+
+Les utilisateurs connectés ont la possibilité de proposer des paroles depuis un espace dédié. Il se trouve à l'adresse [pawol.nu/pwopose](https://pawol.nu/pwopose). Les textes soumis ne sont pas directement publiés sur le site. Ils doivent être approuvé par l'équipe de vérification. Après approbation, il apparaît sur le site avec le nom de l'utilisateur l'ayant proposé.
+
+## 7. Notification d'incident
+
+Quels que soient les efforts fournis, aucune méthode de transmission sur Internet et aucune méthode de stockage électronique n'est complètement sûre. Nous ne pouvons en conséquence pas garantir une sécurité absolue. Si nous prenions connaissance d'une brèche de la sécurité, nous avertirions les utilisateurs concernés afin qu'ils puissent prendre les mesures appropriées. Nos procédures de notification d'incident tiennent compte de nos obligations légales, qu'elles se situent au niveau national ou européen. Nous nous engageons à informer pleinement nos utilisateurs de toutes les questions relevant de la sécurité de leur compte et à leur fournir toutes les informations nécessaires pour les aider à respecter leurs propres obligations réglementaires en matière de reporting.
+
+Aucune information personnelle de l'utilisateur du site [pawol.nu](https://pawol.nu) n'est publiée à l'insu de l'utilisateur, échangée, transférée, cédée ou vendue sur un support quelconque à des tiers. Seule l'hypothèse du rachat de [pawol.nu](https://pawol.nu) et de ses droits permettrait la transmission des dites informations à l'éventuel acquéreur qui serait à son tour tenu de la même obligation de conservation et de modification des données vis à vis de l'utilisateur du site [pawol.nu](https://pawol.nu).
+
+## Sécurité
+
+Pour assurer la sécurité et la confidentialité des Données Personnelles et des Données Personnelles de Santé, [pawol.nu](https://pawol.nu) utilise des réseaux protégés par des dispositifs standards tels que par pare-feu, la pseudonymisation, l'encryption et mot de passe.
+
+Lors du traitement des Données Personnelles, [pawol.nu](https://pawol.nu) prend toutes les mesures raisonnables visant à les protéger contre toute perte, utilisation détournée, accès non autorisé, divulgation, altération ou destruction.
+
+## 8. Liens hypertextes « cookies » et balises ("tags") internet
+
+Le site [pawol.nu](https://pawol.nu) contient un certain nombre de liens hypertextes vers d'autres sites, mis en place avec l'autorisation de [pawol.nu](https://pawol.nu). Cependant, [pawol.nu](https://pawol.nu) n'a pas la possibilité de vérifier le contenu des sites ainsi visités, et n'assumera en conséquence aucune responsabilité de ce fait. Sauf si vous décidez de désactiver les cookies, vous acceptez que le site puisse les utiliser. Vous pouvez à tout moment désactiver ces cookies et ce gratuitement à partir des possibilités de désactivation qui vous sont offertes et rappelées ci-après, sachant que cela peut réduire ou empêcher l'accessibilité à tout ou partie des Services proposés par le site.
+
+### 8.1 « COOKIES »
+
+Un « cookie » est un petit fichier d'information envoyé sur le navigateur de l'Utilisateur et enregistré au sein du terminal de l'Utilisateur (ex : ordinateur, smartphone), (ci-après « Cookies »). Ce fichier comprend des informations telles que le nom de domaine de l'Utilisateur, le fournisseur d'accès Internet de l'Utilisateur, le système d'exploitation de l'Utilisateur, ainsi que la date et l'heure d'accès. Les Cookies ne risquent en aucun cas d'endommager le terminal de l'Utilisateur.
+
+[pawol.nu](https://pawol.nu) est susceptible de traiter les informations de l'Utilisateur concernant sa visite du Site, telles que les pages consultées, les recherches effectuées. Ces informations permettent à [pawol.nu](https://pawol.nu) d'améliorer le contenu du Site, de la navigation de l'Utilisateur.
+
+Les Cookies facilitant la navigation et/ou la fourniture des services proposés par le Site, l'Utilisateur peut configurer son navigateur pour qu'il lui permette de décider s'il souhaite ou non les accepter de manière à ce que des Cookies soient enregistrés dans le terminal ou, au contraire, qu'ils soient rejetés, soit systématiquement, soit selon leur émetteur. L'Utilisateur peut également configurer son logiciel de navigation de manière à ce que l'acceptation ou le refus des Cookies lui soient proposés ponctuellement, avant qu'un Cookie soit susceptible d'être enregistré dans son terminal. [pawol.nu](https://pawol.nu) informe l'Utilisateur que, dans ce cas, il se peut que les fonctionnalités de son logiciel de navigation ne soient pas toutes disponibles.
+
+Si l'Utilisateur refuse l'enregistrement de Cookies dans son terminal ou son navigateur, ou si l'Utilisateur supprime ceux qui y sont enregistrés, l'Utilisateur est informé que sa navigation et son expérience sur le Site peuvent être limitées. Cela pourrait également être le cas lorsque [pawol.nu](https://pawol.nu) ne peut pas reconnaître, à des fins de compatibilité technique, le type de navigateur utilisé par le terminal, les paramètres de langue et d'affichage ou le pays depuis lequel le terminal semble connecté à Internet.
+
+Le cas échéant, [pawol.nu](https://pawol.nu) décline toute responsabilité pour les conséquences liées au fonctionnement dégradé du Site et des services éventuellement proposés par [pawol.nu](https://pawol.nu), résultant du refus de Cookies par l'Utilisateur de l'impossibilité pour [pawol.nu](https://pawol.nu) d'enregistrer ou de consulter les Cookies nécessaires à leur fonctionnement du fait du choix de l'Utilisateur.
+
+Enfin, en cliquant sur l'icône dédiée au réseau social Twitter, figurant sur le Site de [pawol.nu](https://pawol.nu) ou dans son application mobile et si l'Utilisateur a accepté le dépôt de cookies en poursuivant sa navigation sur le Site Internet ou l'application mobile de [pawol.nu](https://pawol.nu), Twitter, peut également déposer des cookies sur vos terminaux (ordinateur, tablette, téléphone portable).
+
+Ces types de cookies ne sont déposés sur vos terminaux qu'à condition que vous y consentiez, en continuant votre navigation sur le Site Internet ou l'application mobile de [pawol.nu](https://pawol.nu). À tout moment, l'Utilisateur peut néanmoins revenir sur son consentement à ce que [pawol.nu](https://pawol.nu) dépose ce type de cookies.
+
+## 9. Les dons
+
+Le site dispose d'une page permettant de faire des dons à « ORGANISATION KA INTERNATIONALE » de manière sécurisée. Pour se faire, il faut se rendre sur la page « [soutyen](https://pawol.nu/soutyen) ». L'utilisateur a 2 onglets disponibles :
+
+- LIBERAPAY / PAYPAL
+- CARTE BANCAIRE
+
+### 9.1 LIBERAPAY / PAYPAL
+
+La plateforme [Liberapay](https://liberapay.com/OKi/donate) est mise à disposition. Elle permet non seulement de personnaliser le montant, mais aussi la récurrence des dons. C'est à dire qu'avec cet outil, l'utilisateur peut effectuer des dons hebdomadaires, mensuels ou annuels.
+
+L'utilisateur peut faire un don en passant par la plateforme [PayPal](https://www.paypal.com/donate/?hosted_button_id=5Q3KPR79CAZVW). En cliquant sur le bouton prévu à cet effet, il est redirigé vers la page de don associée à ORGANISATION KA INTERNATIONALE. Il peut ensuite choisir un montant et valider le don en utilisant son compte PayPal ou une carte bancaire s'il n'est pas enregistré.
+
+### 9.2 CARTE BANCAIRE
+
+En cliquant sur le bouton « CARTE BANCAIRE », l'utilisateur se voit proposer plusieurs choix. Parmi ces derniers, deux options sont possibles :
+
+- **Ponctuel** (1€, 5€, 10€, 20€, 50€, Montant personnalisé)
+- **Mensuel** (1€ / mois, 5€ / mois, 10€ / mois, 20€ / mois, 50€ / mois)
+
+Les dons peuvent donc être fait une seule fois ou de manière récurrente. Quelque soit le choix, l'utilisateur est redirigé vers le sous-domaine don.o-k-i.net suivi de l'ID du montant choisit. Cette URL est gérée par la plateforme de paiement sécurisée [Stripe](https://stripe.com/). Il est important de noter qu'**aucune information de paiement n'est stockée sur notre site internet**.
+
+## 10. Propriété intellectuelle et licence
+
+Le site internet [pawol.nu](https://pawol.nu) et les éléments qui y sont accessibles (textes, images, graphismes, logos, vidéos, icônes, sons, etc.) sont, sauf mention contraire, mis à disposition sous la licence [GNU Affero General Public License Version 3 (AGPL-3.0)](https://www.gnu.org/licenses/agpl-3.0.html). Cette licence garantit aux utilisateurs les libertés suivantes :
+
+- Liberté d'exécuter le programme pour tous les usages,
+- Liberté d'étudier le fonctionnement du programme et de l'adapter à vos besoins,
+- Liberté de redistribuer des copies du programme,
+- Liberté d'améliorer le programme et de publier vos modifications.
+
+Conformément aux exigences de la licence AGPL-3.0, si vous redistribuez ou modifiez des éléments du site, vous devez également fournir le code source complet, incluant vos modifications, sous la même licence. Vous pouvez consulter les termes détaillés de la licence AGPL-3.0 sur le site officiel de la [Free Software Foundation](https://www.gnu.org/licenses/agpl-3.0.html).
+
+## 11. Droit applicable et attribution de juridiction
+
+Tout litige en relation avec l'utilisation du site [pawol.nu](https://pawol.nu) est soumis au droit français. En dehors des cas où la loi ne le permet pas, il est fait attribution exclusive de juridiction aux tribunaux compétents.
+
+---
+
+*Dernières modifications le 26/06/2026*

public/manifest.json

@@ -1,64 +0,0 @@
-{
-  "name": "PAWÒL-NU",
-  "short_name": "PAWÒL-NU",
-  "description": "PAWÒL-NU a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.",
-  "scope": "/",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#303030",
-  "theme_color": "#303030",
-  "orientation": "portrait-primary",
-  "icons": [
-    {
-      "src": "/logo-72x72.png",
-      "type": "image/png",
-      "sizes": "72x72"
-    },
-    {
-      "src": "/logo-96x96.png",
-      "type": "image/png",
-      "sizes": "96x96"
-    },
-    {
-      "src": "/logo-128x128.png",
-      "type": "image/png",
-      "sizes": "128x128"
-    },
-    {
-      "src": "/logo-144x144.png",
-      "type": "image/png",
-      "sizes": "144x144"
-    },
-    {
-      "src": "/logo-152x152.png",
-      "type": "image/png",
-      "sizes": "152x152"
-    },
-    {
-      "src": "/logo-192x192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "/logo-256x256.png",
-      "type": "image/png",
-      "sizes": "256x256"
-    },
-    {
-      "src": "/logo-384x384.png",
-      "type": "image/png",
-      "sizes": "384x384"
-    },
-    {
-      "src": "/logo-512x512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    },
-    {
-      "src": "maskable_oki.png",
-      "type": "image/png",
-      "sizes": "192x192",
-      "purpose": "maskable"
-    }
-  ]
-}

scripts/generate-cgu.sh

@@ -0,0 +1,63 @@
+#!/usr/bin/env bash
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+CGU_DIR="$SCRIPT_DIR/../public/cgu"
+MD_FILE="$CGU_DIR/cgu.md"
+DATE=$(date +%d-%m-%Y)
+PDF_FILE="$CGU_DIR/cgu-confidentialite-oki-$DATE.pdf"
+TMP_HTML=$(mktemp /tmp/cgu-XXXXXX.html)
+
+trap 'rm -f "$TMP_HTML"' EXIT
+
+cat > "$TMP_HTML" <<'HTML_HEAD'
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<title>CGU et politique de confidentialité — PAWÒL-NU</title>
+<style>
+  body { font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; color: #222; max-width: 800px; margin: 40px auto; padding: 0 30px; line-height: 1.6; text-align: justify; }
+  h1 { font-size: 20px; margin-bottom: 4px; }
+  h2 { font-size: 16px; margin-top: 28px; margin-bottom: 6px; border-bottom: 1px solid #ccc; padding-bottom: 4px; }
+  h3 { font-size: 14px; margin-top: 18px; margin-bottom: 4px; }
+  p  { margin: 8px 0; }
+  ul { margin: 6px 0 6px 20px; padding: 0; }
+  li { margin: 4px 0; }
+  a  { color: #1a73e8; text-decoration: none; }
+  hr { border: none; border-top: 1px solid #ddd; margin: 32px 0; }
+  em { color: #888; font-size: 11px; }
+</style>
+</head>
+<body>
+HTML_HEAD
+
+node - "$MD_FILE" >> "$TMP_HTML" <<'NODE_EOF'
+const fs = require('fs')
+const md = fs.readFileSync(process.argv[2], 'utf8')
+
+let html = md
+  .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  .replace(/^# (.+)$/gm, '<h1>$1</h1>')
+  .replace(/^## (.+)$/gm, '<h2>$1</h2>')
+  .replace(/^### (.+)$/gm, '<h3>$1</h3>')
+  .replace(/^\*\*\*(.+)\*\*\*$/gm, '<hr>')
+  .replace(/^---$/gm, '<hr>')
+  .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+  .replace(/\*(.+?)\*/g, '<em>$1</em>')
+  .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
+  .replace(/^- (.+)$/gm, '<li>$1</li>')
+  .replace(/(<li>.*<\/li>\n?)+/gs, m => `<ul>${m}</ul>`)
+  .replace(/\n\n/g, '</p><p>')
+  .replace(/^(?!<[hup]|<\/[hup]|<li|<\/li|<ul|<\/ul|<hr)(.+)$/gm, '$1')
+
+process.stdout.write(`<p>${html}</p>`)
+NODE_EOF
+
+echo '</body></html>' >> "$TMP_HTML"
+
+chromium --headless --no-sandbox --no-pdf-header-footer \
+  --print-to-pdf="$PDF_FILE" "$TMP_HTML" 2>/dev/null
+
+echo "PDF généré : $PDF_FILE"
+echo "Pense à mettre à jour NEXT_PUBLIC_CGU_DOWNLOAD_LINK=/cgu/$(basename "$PDF_FILE")"

vitest.config.mjs

@@ -0,0 +1,11 @@
+import {defineConfig} from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.js'],
+    globals: true,
+  },
+})

vitest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest' // eslint-disable-line import/no-unassigned-import