Fork me on GitHub
#reagent
<
2020-12-15
>
clyfe10:12:57

I want to set up a binding, alike (binding [*current-component* c] ; thins binding must take place on all render calls of components that are children of the component that sets it. Any tips?

Rebecca Bruehlman17:12:27

So, based on reading https://day8.github.io/re-frame/api-builtin-effects/ of reframe (hopefully I can get away with sticking this in her 😉 ), it seems like I should be able to dispatch two effects in one effect handler, like this:

(rf/reg-event-fx
 ::camera-stream-and-modal
 (fn [cofx]
   {:db (:db cofx)
    :fx [[:dispatch [::toggle-camera-modal true]]
         [:dispatch [::get-media-stream]]]}))
However, while each works individually if I just do {:dispatch [::effect]}, I can’t seem to dispatch them together. I get this error in the console instead. Is there something dumb I’m doing wrong?
cljs.core.js:13285 re-frame: no handler registered for effect: {ns: null, name: "fx", fqn: "fx", _hash: -1237829572, cljs$lang$protocol_mask$partition0$: 2153775105, …} . Ignoring.

p-himik17:12:59

There's #re-frame for such specific questions. Update your re-frame dependency - the :fx support is fairly recent.

Rebecca Bruehlman17:12:40

ooh, I didn’t see that channel. Duly noted--I will add that. And thanks--I’ll try that!

👍 3
Rebecca Bruehlman19:12:12

I’m trying to stream video using the computer’s built-in camera (if available). I found https://yo-dave.com/2019/05/13/displaying-video-from-a-webcam-using-clojurescript-and-reagent/ using Clojure/Reagent, which was helpful, but I’m assuming perhaps it’s better not to grab the element directly like they did? (I could be wrong--I’m not really well-versed in frontend development--learning!). I see in https://stackoverflow.com/a/53033746, the “React” way of doing this is to create a ref, but so far my attempts at replicating haven’t …. exactly been successful, hah. How would I properly modify the srcObject of a component? Not really sure how refs work, exactly.

p-himik19:12:58

> the “React” way of doing this is to create a ref Yes. > my attempts at replicating haven’t …. exactly been successful Can you share the most successful or at least the most succinct attempt? > How would I properly modify the srcObject of a component? The srcObject has no HTML attribute counterpart, so you cannot modify it by modifying Hiccup. You have to set it in the same exact way as in the linked example. The only difference is in how you get video-element - in your case it should be via :ref.

Rebecca Bruehlman19:12:01

I thought it would be something like

(defn camera-stream [stream]
  [:video
   {:auto-play true
    :ref #(set! (.-srcObject (reagent/current-component)) stream)}]
  )
or maybe
(defn camera-stream [stream]
  [:video
   {:auto-play true
    :ref (reagent/current-component)
    :srcObject stream}]
but …. did not work. sort of throwing spaghetti on the wall

Rebecca Bruehlman20:12:08

ok, nm, i think i may have figured it out, based on errors i have…. looks like maybe

(defn camera-stream [stream]
  [:video
   {:auto-play true
    :ref (fn [com] (set! (.-current .-srcObject com) stream))}])
is the way to go. i think. i have other issues, but, hey, different errors is progress!

p-himik20:12:39

Yeah, don't use reagent/current-component when you have other means of accessing the component, like com. (.-current .-srcObject com) doesn't look right. Try replacing it with (.-srcObject com).

👍 3