MediaLiveButton indicator never activates -- mediaTimeIsLive is always false

[rlaphoenix]

I'm using Shaka-Player under the hood and no matter what stream I play, the calculated timeBehindEdge is always way way off. Like multitudes off. Yet clicking the Live button does correctly bring it to live edge, so however that is calculating it is correct.

At a quick glance of the code it seems like the seekable range is wrong (when compared to calling shakaPlayer.seekRange() anyway), and the computed time behind edge is therefore wrong (always like hours behind edge, when in reality your only a few seconds behind).

I have the following wrapper around the MediaLiveButton as a hacky fix by directly using player, but this means I need to trickle down the player variable, or use a react portal/provider. Not ideal.

import { useEffect, useState } from "react"

import { clsx } from "@nextui-org/shared-utils"
import { useMediaSelector } from "media-chrome/react/media-store"

import { MediaLiveButton } from "media-chrome/react"


export default function LiveButton({ player }) {
  /**
   * Small wrapper over MediaLiveButton to fix the indicator.
   *
   * Media-Chrome gets the value for seekable range wrong, somehow.
   * Since the seekable range value is wrong, then calculating how
   * far behind edge the player is cannot be correct. Usually it is
   * way behind, when in reality it's only a few seconds behind.
   */
  const currentTime = useMediaSelector(state => state.mediaCurrentTime)
  /* only used when player is not passed or is falsey */
  const timeIsLive = useMediaSelector(state => state.mediaTimeIsLive)

  const [isLive, setIsLive] = useState(false)

  useEffect(() => {
    if (player) {
      const seekRange = player.seekRange()  // media-chrome get's this value wrong, we must use this
      const behindEdge = Math.max(0, Math.floor(seekRange.end - currentTime))
      setIsLive(behindEdge <= 2)
    } else {
      setIsLive(timeIsLive)
    }
  }, [player, currentTime])

  return (
    <MediaLiveButton>
      <span
        slot="indicator"
        className={clsx(
          "text-lg leading-none icon-[mdi--circle-medium]",
          isLive ? "text-danger" : "text-gray-500"
        )}
      />
    </MediaLiveButton>
  )
}

[luwes]

thanks for the feedback. would you be able to provide an online example / demo? that would help out a lot.