EPUB: fix media: properties

epub.js

@@ -165,12 +165,23 @@ const getMetadata = opf => {
             : getValue(obj, arr.find(filter))]
     }))
 
-    const getProperties = prefix => Object.fromEntries($$($metadata, 'meta')
+    const $$meta = $$($metadata, 'meta')
+    const getMetasByPrefix = prefix => $$meta
         .filter(filterAttribute('property', x => x?.startsWith(prefix)))
-        .map(el => [el.getAttribute('property').replace(prefix, ''),
-            getElementText(el)]))
-    const rendition = getProperties('rendition:')
-    const media = getProperties('media:')
+        .map(el => [el.getAttribute('property').replace(prefix, ''), el])
+
+    const rendition = Object.fromEntries(getMetasByPrefix('rendition:')
+        .map(([k, el]) => [k, getElementText(el)]))
+
+    const media = { narrator: [], duration: {} }
+    for (const [k, el] of getMetasByPrefix('media:')) {
+        const v = getElementText(el)
+        if (k === 'duration') media.duration[
+            el.getAttribute('refines')?.split('#')?.[1] ?? ''] = parseClock(v)
+        else if (k === 'active-class') media.activeClass = v
+        else if (k === 'narrator') media.narrator.push(v)
+        else if (k === 'playback-active-class') media.playbackActiveClass = v
+    }
     return { metadata, rendition, media }
 }
 

view.js

@@ -114,7 +114,8 @@ export class View extends HTMLElement {
         this.#root.append(this.renderer)
 
         if (book.sections.some(section => section.mediaOverlay)) {
-            const activeClass = book.media['active-class']
+            book.media.activeClass ||= '-epub-media-overlay-active'
+            const activeClass = book.media.activeClass
             this.mediaOverlay = book.getMediaOverlay()
             let lastActive
             this.mediaOverlay.addEventListener('highlight', e => {