Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#8611 closed defect (fixed)

[patch]Starting slideshow doesn't advance images in some cases

Reported by: dkarr Owned by: Shane O'Sullivan
Priority: high Milestone: 1.3
Component: Dojox Version: 1.2.3
Keywords: Cc:
Blocked By: Blocking:

Description

In certain indeterminate cases, when clicking the "Play" icon in the Slideshow component, it changes the icon, but doesn't advance images.

On the component author's sample page: http://www.skynet.ie/~sos/photos.php , I've been able to repeat this every time I've tried.

When I display the page, then hover on the first picture and then click the orange "play" button, the button changes from the right arrow icon to the square icon, but outside of that, nothing happens.

However, if I instead click on the second thumbnail, then in the big picture click the left arrow, and NOW click the "play" button, it starts automatically stepping through the pictures (starting on the THIRD picture, instead of the second). I can repeat this on your page every time.

Attachments (3)

SlideShow.js (19.0 KB) - added by dkarr 10 years ago.
Modified version of debuggable SlideShow?.js with some "console.log()" statements added.
SlideShow.js.patch (417 bytes) - added by dkarr 10 years ago.
Patch file adding publish right after subscribe
SlideShow_width_autostart_css.patch (1.0 KB) - added by Shane O'Sullivan 10 years ago.
Patch to address this issue, also #8801, #8800

Download all attachments as: .zip

Change History (10)

Changed 10 years ago by dkarr

Attachment: SlideShow.js added

Modified version of debuggable SlideShow?.js with some "console.log()" statements added.

comment:1 Changed 10 years ago by dkarr

I've done some debugging of this by adding some "console.log()" statements to the debuggable version of "SlideShow?.js" and then running my test case. I will include here the debugging output that may illuminate the problem for you.

My test case is the following:

Display page, wait until it finishes displaying. Click Start button in slideshow. Wait a few seconds to be sure it's not doing anything (instead, it should be running the slideshow now). Click right arrow button in slideshow. Wait a second or two. Click stop button in slideshow. Wait a second or two. Click left arrow button in slideshow. Surprisingly, it now starts the slideshow, which shouldn't happen. After displaying several images automatically, I click the stop button again, which stops the slideshow.

With the debugging added in my version, along with some manual console.log() calls from the Firebug console, here's the console output from this test:

In showImage. index[0] In showImage. index[0] Publishing to [dojox_image_SlideShow_0/imageShow]

console.log("Finished displaying, about to click start button.")

Finished displaying, about to click start button. In toggleSlideShow. idx[0] showTopicName[dojox_image_SlideShow_0/imageShow]

console.log("Clicked start button, nothing happening.")

Clicked start button, nothing happening.

console.log("Clicking right arrow in slideshow.")

Clicking right arrow in slideshow. In showNextImage. inTimer[undefined] forceLoop[undefined] In showImage. index[1] In showImage. index[1] Publishing to [dojox_image_SlideShow_0/imageShow]

console.log("Clicking stop button.")

Clicking stop button. In toggleSlideShow. idx[1] showTopicName[dojox_image_SlideShow_0/imageShow]

console.log("Clicking left arrow in slideshow.")

Clicking left arrow in slideshow. In showImage. index[0] Publishing to [dojox_image_SlideShow_0/imageShow] In showNextImage. inTimer[true] forceLoop[true] In showImage. index[1] Publishing to [dojox_image_SlideShow_0/imageShow] In showNextImage. inTimer[true] forceLoop[true] In showImage. index[2] In showNextImage. inTimer[true] forceLoop[undefined] In showImage. index[3] exception in animation handler for: onEndfx.js (line 135) [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.appendChild]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://localhost:8080/photocatalog/dojosrc/dojox/image/SlideShow.js :: anonymous :: line 366" data: no]fx.js (line 136) In showImage. index[2] Publishing to [dojox_image_SlideShow_0/imageShow] In showNextImage. inTimer[true] forceLoop[undefined] In showImage. index[3] In showImage. index[3] Publishing to [dojox_image_SlideShow_0/imageShow] In toggleSlideShow. Stopping the slideshow.

console.log("After letting it display several images, clicked stop button.")

After letting it display several images, clicked stop button.

That may be helpful to you.

Focusing on the code for a moment, I think the key area is the following in the "toggleSlideShow()" function:

var idx = this.imageIndex; var handle = dojo.subscribe(this.getShowTopicName(), dojo.hitch(this,function(info){

setTimeout(dojo.hitch(this,function(){ if(info.index == idx){

var success = this.showNextImage(true, true); if(!success){

this._stop();

} dojo.unsubscribe(handle);

}}),this.slideshowInterval * 1000);

}));

What bothers me here is that the only way this is going to call "showNextImage()" on a timer is if "this.getShowTopicName()" is published somewhere. Ironically, the only place this happens is in "showImage()", which isn't going to be called unless we show another image.

I have no idea why this code is wrapped in a "subscribe()". I'm sure there was a good reason for it, but I don't see it.

comment:2 Changed 10 years ago by dkarr

After more experimentation, I've managed to find something that works, for my test case at least. I'm not familiar enough with the design to be sure it won't break something else.

The key to my solution is simply to immediately publish the subscribed event immediately after subscribing to it. In the published event, I only care about (I think) the index value, and not the title or url, as neither of those are used while processing the subscribed event. My added code is at the end of this sample code block.

var idx = this.imageIndex; console.log("idx+ idx +? showTopicName+ this.getShowTopicName() +?"); var handle = dojo.subscribe(this.getShowTopicName(), dojo.hitch(this,function(info){

console.log("Got subscribed event."); setTimeout(dojo.hitch(this,function(){

console.log("info.index+ info.index +? idx+ idx +?"); if(info.index == idx){

var success = this.showNextImage(true, true); if(!success){

this._stop();

} dojo.unsubscribe(handle);

}

}),this.slideshowInterval * 1000);

})); console.log("Publishing + this.getShowTopicName() +?"); dojo.publish(this.getShowTopicName(),

[{index: idx,

title: "", url: ""}]);

Changed 10 years ago by dkarr

Attachment: SlideShow.js.patch added

Patch file adding publish right after subscribe

comment:3 Changed 10 years ago by Adam Peller

Component: GeneralDojox
Owner: changed from anonymous to Shane O'Sullivan

comment:4 Changed 10 years ago by Shane O'Sullivan

I've tested this patch, and it works. The SlideShow? now successfully starts and ends when it should.

Changed 10 years ago by Shane O'Sullivan

Patch to address this issue, also #8801, #8800

comment:5 Changed 10 years ago by Adam Peller

Summary: Starting slideshow doesn't advance images in some cases[patch]Starting slideshow doesn't advance images in some cases

comment:6 Changed 10 years ago by Adam Peller

Resolution: fixed
Status: newclosed

(In [16935]) Committing patch from Shane O'Sullivan (CLA). Fixes #8611, #8800, #8801

comment:7 Changed 10 years ago by Adam Peller

Milestone: tbd1.3
Note: See TracTickets for help on using tickets.