Using a_ontimeupdate attribute raises an Uncaught ReferenceError about eliom HOT 12 CLOSED

I've had a look at your code (which does not contain "a_ontimeupdate" :) ).
I've got the same behavior.
What happens is that the browser tries to call the ontimeupdate handler before eliom had time to set it up.

Errors are .. is not dedfined or Uncaught SyntaxError: Unexpected token ILLEGAL depending on the chars used by the handler id caml_closure_id....

I guess eliom should not use on.... to set fake handler
<audio ontimeupdate="caml_closure_id...." />
but customs attribute
<audio eliom-ontimeupdate="caml_closure_id...." />

from eliom.

@hhugo : Yeah, my code evolved, sorry. I should have link a previous commit.

from eliom.

I've spotted few error in the latest version of your code. Mainly because of Js.Unsafe.coerce.
It would be better to give the expected type when you do that.

1- removeEventListner -> removeEventListener
2- you use (get_target ev)##value as a float, but it is js_string Js.t

extra note: I think you should not use a react node for progress_bar but D.input with reactive value for a_value

let progress_bar : Html5_types.input elt =
  let value = React.S.map (fun (current, duration) ->
     if duration = 0. then 0. else current /. duration *. 100.)
     progress_signal in
  let duration_s = React.S.map snd progress_signal in
  let oninput ev =
    let target : Dom_html.inputElement Js.t = Js.Unsafe.coerce (get_target ev) in
    let value_input = Js.parseFloat (target##value) in
    let video_time = (value_input /. 100. *. (React.S.value duration_s)) in
    set_bc_video_signal (BSeek video_time)
in
D.(float_input ~input_type:`Range ()
     ~a:[a_oninput oninput; a_input_min 0.; a_input_max 100.;
           a_onmousedown (fun _ -> set_block_progress_signal true);
           a_onmouseup (fun _ -> set_block_progress_signal false);
           R.a_value (React.S.map (sprintf "%f") value)])

from eliom.

I think we could put this snippet in eliom-widget. Do you mind, @hhugo ?

from eliom.

@hhugo :
Okay great. Thx. I'll fix those errors.
I agree for the progress bar and this is exactly the refactoring I was thinking about.

@Drup : I can even write a tutorial about this with two benefits : Using media audio/video with Eliom with examples and reactives nodes/attributes.

from eliom.

I was more thinking about the very small "progress-bar with a reactive value", not the video part. But yes, a tutorial is always welcome, especially to showcase new features. :)

from eliom.

@hhugo : Did you tried your code or you write it directly on github ? I just tried this idea and it doesn't really work with input range : modifying a_value doesn't change the input range display. I'm working on it.
@Drup : don't put the code too soon.

from eliom.

It works with input##value <- Js.string (sprintf "%f" value)

from eliom.

I've made a fix in eliom to make R.a_value work as expected b4c5ecc

from eliom.

Okay nice. I though that was part of the html specification, not a bug from eliom.
Thanks anyway.

from eliom.

the issue should be fixed by 690e68a

from eliom.

It is :)

from eliom.