# Demo for https://github.com/gradio-app/gradio/pull/13660
# (fix for https://github.com/gradio-app/gradio/issues/13659).
#
# Open the browser DevTools Network tab, filter by "upload", then record a
# short clip and press stop.
#   - On the "before" Space (gradio 6.20.0 release): every recording stop
#     sends TWO identical POST /upload requests. The second one rewrites the
#     same server file while the player is fetching it, which intermittently
#     breaks loading the recording (Content-Length errors).
#   - On the "after" Space (PR #13660 wheel): exactly ONE POST /upload.
# The counters below show how often each event fires. Each event has its own
# gr.State so the concurrently running handlers do not overwrite each other.

import gradio as gr

EVENTS = ["change", "stop_recording", "input"]


def bump(name):
    def handler(n):
        n += 1
        return n, f"`{name}`: {n}"

    return handler


with gr.Blocks() as demo:
    gr.Markdown(
        "Open the DevTools **Network** tab, filter by `upload`, record a clip "
        "and press stop. Before the fix, each recording stop sends **two** "
        "identical `POST /upload` requests; after the fix, exactly **one**. "
        "The counters below show how often each event fires per recording.\n\n"
        "[Issue #13659](https://github.com/gradio-app/gradio/issues/13659) · "
        "[PR #13660](https://github.com/gradio-app/gradio/pull/13660)"
    )
    audio = gr.Audio(sources=["microphone"], type="filepath", label="Record me")
    for name in EVENTS:
        state = gr.State(0)
        display = gr.Markdown(f"`{name}`: 0")
        getattr(audio, name)(bump(name), state, [state, display])

if __name__ == "__main__":
    demo.launch(ssr_mode=False)