import gradio as gr


get_video_data = """async (video, video_data_dummy) => {
  const videoEl = document.querySelector("#video_in video");
  if (!videoEl){
    return [video, {}]
  }
  const metadata = {
    duration: videoEl.duration,
    currentTime: videoEl.currentTime,
    isPaused: videoEl.paused,
    hasEnded: videoEl.ended,
    volume: videoEl.volume,
    isMuted: videoEl.muted,
    playbackRate: videoEl.playbackRate,
    videoWidth: videoEl.videoWidth,
    videoHeight: videoEl.videoHeight,
    readyState: videoEl.readyState,
    bufferedTimeRanges: Array.from(
      { length: videoEl.buffered.length },
      (v, i) => ({
        start: videoEl.buffered.start(i),
        end: videoEl.buffered.end(i),
      })
    ),
  };
  console.log(metadata);
  return [video, metadata];
}"""


def predict(video, video_data):
    timestamp = video_data["currentTime"]
    return video_data


with gr.Blocks() as demo:
    video_data_dummy = gr.JSON({}, visible=False)
    with gr.Row():
        with gr.Column():
            video = gr.Video(elem_id="video_in", type="filepath")
        with gr.Column():
            timestamp = gr.JSON()
    with gr.Row():
        btn = gr.Button(value="Run")
    btn.click(
        predict, inputs=[video, video_data_dummy], outputs=[timestamp], _js=get_video_data
    )
    gr.Examples(examples=[["./tmp3bh8w099.mp4"]], fn=predict, inputs=[video, video_data_dummy], outputs=[timestamp])
demo.launch()