try different hacky approach

src/view/com/util/post-embeds/VideoEmbedInner.web.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useRef, useState} from 'react'
 import {View} from 'react-native'
-import Hls, {CuesInterface} from 'hls.js'
+import Hls from 'hls.js'
 
 import {atoms as a} from '#/alf'
 import {Controls} from './VideoWebControls'
@@ -27,7 +27,11 @@ export function VideoEmbedInner({
     if (!ref.current) return
     if (!Hls.isSupported()) throw new HLSUnsupportedError()
 
-    const hls = new Hls({capLevelToPlayerSize: true, cueHandler})
+    const hls = new Hls({
+      // unsure whether to enable this -sfn
+      // capLevelToPlayerSize: true,
+      startLevel: 0,
+    })
     hlsRef.current = hls
 
     hls.attachMedia(ref.current)
@@ -49,6 +53,41 @@ export function VideoEmbedInner({
     }
   }, [source])
 
+  // HACK: modify cues to move them up a bit -sfn
+  useEffect(() => {
+    if (!ref.current) return
+    function moveCues() {
+      if (!ref.current) return
+      try {
+        for (let i = 0; i < ref.current.textTracks.length; i++) {
+          const track = ref.current.textTracks[i]
+          console.log(track)
+          if (!track.cues) continue
+          for (let j = 0; j < track.cues.length; j++) {
+            const cue = track.cues[j]
+            console.log(cue)
+            if (cue instanceof VTTCue) {
+              if (cue.line === 'auto') {
+                cue.line = -2
+              }
+            }
+          }
+        }
+      } catch (err) {
+        console.log(err)
+      }
+    }
+
+    moveCues()
+
+    const current = ref.current
+    current.textTracks.addEventListener('change', moveCues)
+
+    return () => {
+      current.textTracks.removeEventListener('change', moveCues)
+    }
+  }, [])
+
   return (
     <View
       style={[
@@ -91,82 +130,3 @@ export class HLSUnsupportedError extends Error {
     super('HLS is not supported')
   }
 }
-
-// copy-pasted from https://github.com/dailymotion/hls.js/blob/master/src/utils/cues.js
-//
-// modified to change the line calculation for Firefox - I've annotated the change
-const cueHandler: CuesInterface = {
-  newCue: (track, startTime, endTime, captionScreen) => {
-    let row
-    let cue
-    let indenting
-    let indent
-    let text
-    let VTTCue = window.VTTCue || window.TextTrackCue
-
-    const cues = []
-
-    for (let r = 0; r < captionScreen.rows.length; r++) {
-      row = captionScreen.rows[r]
-      indenting = true
-      indent = 0
-      text = ''
-
-      if (!row.isEmpty()) {
-        for (let c = 0; c < row.chars.length; c++) {
-          if (row.chars[c].uchar.match(/\s/) && indenting) {
-            indent++
-          } else {
-            text += row.chars[c].uchar
-            indenting = false
-          }
-        }
-        // To be used for cleaning-up orphaned roll-up captions
-        row.cueStartTime = startTime
-
-        // Give a slight bump to the endTime if it's equal to startTime to avoid a SyntaxError in IE
-        if (startTime === endTime) {
-          endTime += 0.0001
-        }
-
-        cue = new VTTCue(startTime, endTime, fixLineBreaks(text.trim()))
-
-        if (indent >= 16) {
-          indent--
-        } else {
-          indent++
-        }
-
-        // VTTCue.line get's flakey when using controls, so let's now include line 13&14
-        // also, drop line 1 since it's to close to the top
-        if (navigator.userAgent.match(/Firefox\//)) {
-          cue.line = -2
-        } else {
-          cue.line = r > 7 ? r - 2 : r + 1
-        }
-
-        cue.align = 'left'
-        // Clamp the position between 0 and 100 - if out of these bounds, Firefox throws an exception and captions break
-        cue.position = Math.max(
-          0,
-          Math.min(
-            100,
-            100 * (indent / 32) +
-              (navigator.userAgent.match(/Firefox\//) ? 50 : 0),
-          ),
-        )
-        // modified - they had a type error
-        cues.push(cue)
-        if (track) {
-          track.addCue(cue)
-        }
-      }
-    }
-
-    return cues
-  },
-}
-
-function fixLineBreaks(input: string) {
-  return input.replace(/<br(?: \/)?>/gi, '\n')
-}