esriPopup on close stop video play ?

747
6
Jump to solution
05-01-2018 05:15 AM
MayurDodiya
Occasional Contributor

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,

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Mayur,

  I would go with setting the popups content to null.

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

View solution in original post

6 Replies
RobertScheitlin__GISP
MVP Emeritus

Mayur,

  I would go with setting the popups content to null.

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

MayurDodiya
Occasional Contributor

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 ?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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
Occasional Contributor

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 ?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
MayurDodiya
Occasional Contributor

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.!

0 Kudos