What do you mean by "properly handle nil checks"? What's not proper about when-let?

I'm thinking if I have to pass the !@video on other function I have to do the when-let everytime So I was thinking if there is a way to just do the check once.

The usages are all in different places, so you cannot do the check once.

But you can use some-> at some points.

E.g. (some-> @!audio .-duration (/ 60))

Cool. I like it.

[:div {:class "absolute bg-blue" :width (str (percentage @!audio) "%") }]

(some-> @!audio .-duration (or 0) (/ 60))

Wait, that's wrong.

It would short-circuit even before .-duration.

Yeah, I guess I have to create util functions to reduce clutter

Thanks a lot

For what it’s worth, the “ugliness” here can be solved by using https://github.com/mfikes/cljs-bean. That would give you idiomatic keyword access to your JS object, and no need for some->

If I'm not mistaken, with this code you won't get real-time values for the duration and current time. Because when the state of <audio> changes, there will be nothing that will trigger the re-render.

Hmmmm. This two are being re-rendered. Because they deref the @!audio?

[:div "Duration: " (when-let [audio @!audio] (/ (.-duration @!audio) 60))]
        [:div "Current Time: " (when-let [audio @!audio] (.-currentTime @!audio))]

No?

I think !audio should be changed only once the component is rendered for the first time. Usually, it doesn't change that often. But if it works fine, then I have no idea why.

Will investigate this one :thumbsup:

I imagine you need to attach some sort of event handlers to the audio player, beyond just capturing the reference, to get the changes to the duration to update your UI

But Jaime said that it was updating even with the code above - that's what puzzles me.

Yes, you guys are right. I need to add the event handler

(defn audio-player []
  (let [!audio (r/atom nil)
        state (r/atom {:currentTime 0})
        time-update-handler #(swap! state assoc :currentTime (.. % -target -value))]
    (r/create-class
     {:component-did-mount
      (fn [this]
        (some-> @!audio (.addEventListener "timeupdate" #(swap! state assoc :currentTime (.. % -target -currentTime)))))

      :reagent-render
      (fn []
        [:div {:class "mx-auto p-16"}
         [:div {:class "flex flex-1 items-center p-4 border border-gray-500 rounded-full relative"}
          [:div {:class "absolute bg-blue" :width (str (if !audio 0 (percentage !audio)) "%")}] ;; error since I forgot to check if its not nil
          [:button {:class "absolute"
                    :on-click (fn []
                                (when-let [audio @!audio]
                                  (if (.-paused audio)
                                    (.play audio)
                                    (.pause audio))))}
           "play"]]
         [:audio {:src "audios/sample.mp3"
                  :ref (fn [el]
                         (reset! !audio el))}]
         [:div {:class "flex flex-row flex-1"}

          [:div "Duration: " (when-let [audio @!audio] (.-duration @!audio))]
          [:div "Current Time: " (:currentTime @state)]
          [:button {:on-click (fn [] (backward @!audio 5))} "Back"]
          [:button {:on-click (fn [] (forward @!audio 5))} "Forward"]]])}
     )))

Ah, so it wasn't working before? :)

It was working before, it updates the Duration even before event handling. Maybe because of when-let? The child was initially nil then ref was set and re-rendered?

[:div "Duration: " (when-let [audio @!audio] (/ (.-duration @!audio) 60))]

Ah, right, the duration is a one time thing.

I thought that the current time was also updating.

Sorry. I meant the Current Time

Yeah, I can confirm that below gets re-rendered

[:div "Current Time: " (when-let [audio @!audio] (.-currentTime @!audio))]

And this one I do not understand. If it works for some good reason (of which I have no clue), then you don't need any event listeners.

Either way, one might want to track the interesting values of the stateful JS component in a ratom of some sort, for proper reactivity. See this for a good explanation https://github.com/day8/re-frame/blob/master/docs/Using-Stateful-JS-Components.md

thanks a lot. good read

Never mind, found https://github.com/alex-dixon/shadow-cljs-react-spring