diff --git a/components/teks/lekte.js b/components/teks/lekte.js
index 15124f7..eaeac05 100644
--- a/components/teks/lekte.js
+++ b/components/teks/lekte.js
@@ -20,6 +20,18 @@ import {getAlias} from '../../lib/utils/format'
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
+function parseLrc(text) {
+ const lines = []
+ for (const raw of text.split('\n')) {
+ 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()})
+ }
+ }
+
+ return lines.sort((a, b) => a.time - b.time).filter(l => l.text)
+}
+
const Widget = styled('div')(({theme}) => ({
padding: 16,
borderRadius: 16,
@@ -64,6 +76,7 @@ export default function Lekte({audio, url, parole}) {
const [position, setPosition] = useState(0)
const [volume, setVolume] = useState(100)
const [isPlaying, setIsPlaying] = useState(false)
+ const [lrcLines, setLrcLines] = useState(null)
const alias = getAlias(parole.artistes, parole.prioriteArtistes)
function formatDuration(value) {
@@ -127,6 +140,18 @@ export default function Lekte({audio, url, parole}) {
setPosition(0)
}, [audio])
+ useEffect(() => {
+ if (!parole?.pawol?.url) return
+ fetch(new URL(parole.pawol.url, IMAGE_URL).toString())
+ .then(r => r.text())
+ .then(text => setLrcLines(parseLrc(text)))
+ .catch(() => setLrcLines([]))
+ }, [parole?.pawol?.url])
+
+ const activeIndex = lrcLines
+ ? lrcLines.reduce((last, line, i) => line.time <= position ? i : last, -1)
+ : -1
+
const handleChangePosition = value => {
setPosition(value)
audioRef.current.currentTime = value
@@ -273,6 +298,31 @@ export default function Lekte({audio, url, parole}) {
/>
+ {lrcLines && lrcLines.length > 0 && (
+
+ {[-1, 0, 1].map(offset => {
+ const idx = activeIndex + offset
+ const line = lrcLines[idx]
+ if (!line) return
+ return (
+
+ {line.text}
+
+ )
+ })}
+
+ )}
)
diff --git a/lib/oki-api.js b/lib/oki-api.js
index d48f6a4..d469884 100644
--- a/lib/oki-api.js
+++ b/lib/oki-api.js
@@ -56,6 +56,9 @@ export async function jwennTeksEpiSlug(slug) {
},
traductions: {
populate: '*'
+ },
+ pawol: {
+ populate: '*'
}
},
filters: {