esriPopup on close stop video play ?

[MayurDodiya]

Hi,

I have MEDIA column in my attribute table contains video URLs (YouTube iframe & HTML5 video tag).

By Clicking on feature on map popup display and play the video.

I would like to stop video play when I click on close button of esriPopup window (InfoWindow).

I know the hide event of infoWindow, but How do I stop play video on close of the InfoWindow

app.map.infoWindow.on('hide', function () {
var info = app.map.infoWindow.features[0].attributes.MEDIA;
});

Is there a way to stop video on close event of infoWindow ? Any idea please ?

Thanks,

[RobertScheitlin__GISP · Accepted solution]

Mayur,

  I would go with setting the popups content to null.

app.map.infoWindow.on('hide', function () {
  app.map.infoWindow.setContent(null);
});‍‍‍‍‍‍

[MayurDodiya]

Hi Robert,

Yes it working.

Thank you so much.

I have another question, I created app using Web App Builder.

I download and hosted on my server. Now, I want to apply same popup hide event in Web App Builder application.

Do you have any idea where should I add code ?

[RobertScheitlin__GISP]

Mayur,

   At the end of the resetInfoWindow function in the jimu.js/MapManager.js file would be fine.

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

[MayurDodiya]

Hi Robert,

There is no MapManager.js file in jimu.js, but I copied the same code in jimu.js/main.js at the end in resetInfoWindow function

this.map.infoWindow.on('hide', function () {
this.map.infoWindow.setContent(null);
});

This worked for me.

Below is the code working in Story Map to make esriPopup draggable and I want to add same for WAB application(Hosted on my server), so where should I copy the code in WAB application

var handle = query(".title", app.map.infoWindow.domNode)[0]; 
var dnd = new Moveable(app.map.infoWindow.domNode, {
handle: handle
});
// when the infoWindow is moved, hide the arrow:
on(dnd, 'FirstMove', function () {
// hide pointer and outerpointer (used depending on where the pointer is shown)
var arrowNode = query(".outerPointer", app.map.infoWindow.domNode)[0];
domClass.add(arrowNode, "hidden");

var arrowNode = query(".pointer", app.map.infoWindow.domNode)[0];
domClass.add(arrowNode, "hidden");
}.bind(this));

Please any idea where and what code should I add in WAB ?

[RobertScheitlin__GISP]

Mayur, Since your original question is answered you should mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

I will address you second question in the new thread you opened.

[MayurDodiya]

Hi Robert,

I am sorry for the confusion.You are right, I created app using WAB developer edition and after I downloaded, I see MapManager.js file and resetInfoWindow function.I copied the same code and its working fine.

Thank you so much.!