0

Looking for some help on how to prevent onReady from firing multiple times in an Angular/Ionic app when used in conjunction with $window. Specifically, we're using this method for Wistia videos (as instructed here). The offending code is:

$window._wq = $window._wq || [];
$window._wq.push({ id: "5bbw8l7kl5", onReady: function(video) {
    console.log("I got a handle to the video using Wistia's onReady method!", video.uuid);
}});

What is it about using $window._wq that ends up executing the onReady method multiple times?

How can we make this code Angular friendly (without "hacking" or forcing a work-around) so that onReady only fires once when revisiting the controller view each time?

I put up some sample code that can be used to reproduce the issue locally here, if you so choose.

Any insights, thoughts, ideas would be greatly appreciated!!

raie
  • 1
  • 2
  • Are you using `iframe` embeds or directed embeds? – TheGentleman Jan 06 '17 at 17:24
  • @GentlemanMax: We're using the standard JS embed option, as described [here](https://wistia.com/doc/embed-options#setting_options_on_standard_and_popover_embeds). No `iframes`. – raie Jan 06 '17 at 19:17

2 Answers2

0

These are possible options which causes issues
1.I think you have multiple videos with same id.
2. On api page he used _wq.push instead of $window._wq.push
3. You are using angular, did you checked you have two videos with same ng-models or ng-click events

nivas
  • 3,138
  • 3
  • 16
  • 15
  • Thanks for the reply, nivas. We're following the Wistia instructions [here](https://wistia.com/doc/embed-options#setting_options_on_standard_and_popover_embeds). We're using a single `div` with `class="wistia_embed wistia_async_5bbw8l7kl5"` for the actual embed, and then in the controller, we're using `$window._wq` per Wistia's instructions [here](https://wistia.com/doc/player-api#use_windowwq_to_get_a_video_handle) in order to grab the video player so that we can execute additional functions upon initialization of the video. So, I don't think we're using multiple videos anywhere? – raie Jan 06 '17 at 19:42
  • Also, fair point about `_wq.push` versus `$window._wq.push` but my understanding is that any object attached to `$window` just becomes a global object, so I think they're actually the same thing. Or, at least, I tried both in my code, and there's no effect whatsoever - still seeing the same issue. – raie Jan 06 '17 at 21:25
0

You might have multiples of these anonymous function callbacks floating around. I suggest extracting the onReady callback into a separate function and passing the function to onReady in the object. 

$window._wq = $window._wq || [];
$window._wq.push({ id: "5bbw8l7kl5", onReady: onReadyCallback });
var onReadyCallback = (video) => { console.log('I got a handle to the video using Wistia's onReady method!', video.uuid };

This will help you at least isolate the code out of the anonymous function and isolate the callers of the function, which will help you track down the root cause of the multiple events firing. You might also have multiple instances of the controller in scope, but I don't have any Wistia or Ionic experience.

fishermanswharff
  • 125
  • 6