Bug: onTimeUpdate not reseting the timestamp

[careless10]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-player-react

Which browsers are you using?

Chrome

Which operating systems are you using?

macOS

Description

Hi there,
I am using the MuxPlayer in NextJs 13, in a client Component

"use client";
import MuxPlayer from "@mux/mux-player-react";
import { useEffect, useRef, useState } from "react";
import { useThrottle } from "rooks";
import updateProgress from "../../actions";
import { timeStamp } from "console";

type Props = {
  token: string;
  playbackId: string;
  progress: any;
};

const LessonPlayer = (props: Props) => {
  const { playbackId, token, progress } = props;
  const ref = useRef<any>();

  const [throttleValue, setThrottleValue] = useState<any>("");
  const [throttledFunction, isReady] = useThrottle(setThrottleValue, 10000);
  useEffect(() => {
    updateProgress({ ...progress, progress: throttleValue })
  }, [throttleValue]);

  useEffect(() => {
    if (ref.current && playbackId) {
      console.log(ref.current);
      // ref.current?.seekTo(0);
    }
  }, [ref, playbackId]);

  return (
    <div className="col-span-4 overflow-hidden text-center bg-black">
      <MuxPlayer
        ref={ref}
        key={playbackId}
        onTimeUpdate={(time) => throttledFunction(time.timeStamp)}
        targetLiveWindow={NaN}
        className="w-full xl:w-9/12"
        streamType="on-demand"
        playbackId={playbackId}
        tokens={{
          playback: token,
          thumbnail: token,
        }}
      />
    </div>
  );
};

export default LessonPlayer;

and my page component which uses this player is as following

import { fetchWithAuth } from "@/utils/functions/fetch";
import LessonsList from "./Components/list";
import LessonPlayer from "./Components/player";
import LessonDescription from "./Components/description";

const revalidate = 0;

type Props = {
  params: {
    slug: string;
  };
};

const Lessons = async (props: Props) => {
  // get slug
  const { slug } = props.params;
  const data = slug ? await fetchWithAuth("/lessons/published/" + slug) : await fetchWithAuth("/lessons/current");
  const list = await fetchWithAuth("/chapters/published");

  return (
    <div>
      <LessonsList chapters={list} />
      <LessonPlayer {...data} />
      <LessonDescription chapters={list} />
    </div >
  );
};

export default Lessons;

My problem is that whenever i change the slug which changes the data, the player is changing the video yes but the timestamp keeps continuing, i tried various ways, like using "ref", or adding "key={playbackId}" but nothing seems to work.

Thanks for your time

Reduced test case

No response

Steps to reproduce

1.change props to use playbackId
2.underlying component onTimeUpdate doesn't reset

Current Behavior

onTimeValue is not resetting

Expected Behavior

onTimeValue should get back to 0 whenever the playbackId updates

Errors

No response

What version of the package are you using?

v2.1.0

[careless10]

what i ended up doing is the following

"use client";
import MuxPlayer from "@mux/mux-player-react";
import { useEffect, useRef, useState } from "react";
import { useThrottle } from "rooks";
import updateProgress from "../../actions";

type Props = {
  token: string;
  playbackId: string;
  progress: any;
};

const LessonPlayer = (props: Props) => {
  const { playbackId, token, progress } = props;
  const ref = useRef<any>();

  const [throttleValue, setThrottleValue] = useState<any>("");
  const [throttledFunction] = useThrottle(setThrottleValue, 10000);
  useEffect(() => {
    if (ref.current) {
      updateProgress({ ...progress, progress: ref.current?.currentTime.toFixed(0) })
    }
  }, [throttleValue]);

  function complete() {
    updateProgress({ ...progress, progress: 0,completed: true })
  }

  return (
    <div className="col-span-4 overflow-hidden text-center bg-black">
      <MuxPlayer
        key={playbackId}
        ref={ref}
        currentTime={progress.progress ?? 0}
        onTimeUpdate={(time) => throttledFunction(time.timeStamp)}
        onEnded={complete}
        targetLiveWindow={NaN}
        className="w-full xl:w-9/12"
        streamType="on-demand"
        playbackId={playbackId}
        tokens={{
          playback: token,
          thumbnail: token,
        }}
      />
    </div>
  );
};

export default LessonPlayer;

Where i throttle the timeupdate but i get the current time from the reference, doesn't look ideal but thats the only reliable way now, dont know if i should close this or keep it open since main issue is that function not working well, 🤷🏽‍♂️
and thanks by the way for your services, amazing work!

[davidbater]

This is not the timestamp of the video, it's the timestamp of the event. Since you're already using a ref anyway, as a workaround you can do the following:

<MuxPlayer
    ref={ref}
    key={playbackId}
    onTimeUpdate={() => throttledFunction(ref.current.currentTime)}
    targetLiveWindow={NaN}
    className="w-full xl:w-9/12"
    streamType="on-demand"
    playbackId={playbackId}
    tokens={{
      playback: token,
      thumbnail: token,
    }}
/>