hoplon / demos

Example ClojureScript applications using hoplon
81 stars 27 forks source link

Can you do a timer trigger sample? #9

Closed johnjelinek closed 10 years ago

johnjelinek commented 10 years ago

I'm thinking of a way to capture the currentTime of an (audio elem. I was thinking of a (js/setInterval to poll a (defelem and then maybe a (cell= based on the currenetTime. Do you recommend another approach to a scenario like this? Concretely, I want to know when audio has passed 30 seconds (whether by seek or in normal play). I don't think it's kosher to do a DOM query. I hope this makes sense.

alandipert commented 10 years ago

Polling is unavoidable in some cases, but in this case it looks like there is a timeupdate event that fires regularly on <audio> elements. We can use this to drive updates to a cell containing the elapsed time. A simple example follows:

(page "index.html"
  (:require
    [tailrecursion.hoplon.reload :refer [reload-all]]))

(reload-all 1000)

(defc seconds-elapsed 0)

(html
  (head)
  (body
    (h1 "Hello, World!")
    (with-let [song (audio :controls ""
                      (source :src "04 She's The One.mp3"))]
      (.bind (js/jQuery song) "timeupdate"
             #(reset! seconds-elapsed
                      (.floor js/Math (.-currentTime song)))))
    (p (text "Seconds Elapsed: ~{seconds-elapsed}"))
    (p :css {:color "red"} :toggle (cell= (>= seconds-elapsed 3))
      "Over 3 seconds have elapsed!!")))

The next step would be a defelem that does the wiring you see in the with-let, but maybe takes a :to cell argument to put new time values into. There's an example of a defelem like this in the contacts demo.

alandipert commented 10 years ago

Oh, if you have further questions along these lines, I encourage you to join our Discourse site. It's fairly active and is a good reference as you continue Hoplon-ing. We're also in IRC, in #hoplon on Freenode, if you require realtime support :smile:

johnjelinek commented 10 years ago

Excellent example, thank you! I'll pop on Discourse as well :)!