CODEWITHSUNDEEP
polymerpolymer-1.0
Junior
Junior

Reputation: 3

No more than 26 <audio> items work in my Polymer iron-list of 100 JSON instances

Me: Code writer level 4 in a 1-10 scale.

None of the audio tags with an index greater than '25' seem to work in my iron-list. I have a paper-icon-button firing on-Tap="_playing" for each template instance in order to make it's corresponding song play by using currentSound.play(); and it works but only for songs 0-25.

I suspect it has to do with what the iron-list docs say. "only' a small subset of actual template elements (enough to fill the viewport) are rendered and reused as the user scrolls". But I've been at it for over 7 hrs :( with no luck.

If you have a look at the image in the link, you'll notice I added the controls attribute to the audio tag. An interesting point to note is that all 100 songs can be played, paused and all, using these native controls, however I'm only using these to test things out as all buttons are intended to be customized.

I looked into finding whatever accessibility these native html controls have but found nothing. I also tried understanding models in a dom-repeat template but couldn't get around it either. Help! I need somebooooody Help! :P

same image here

Upvotes: 0

Views: 112

Answers (2)

Junior
Junior

Reputation: 3

Ok guys, thanks for the help. I think I found the problem! I found that in <style> host: { position: absolute } causes songs 0-25 to repeat 4 times up to 100 instead of continuing with 26-100. I removed it, and all 100 songs play correctly now.

Then, I tried the using:

Polymer.dom(item.target).parentNode; & Polymer.dom(parentNode).querySelector(".theSound");

but couldn't make it my select .theSound. Then I tried document.getElementsByClassName("theSound")[index]; and POOFF like magic! everything works now hoorraaaay

Problem: position: absolute on the host styling was making things whacky. Solution: move position: absolute to the toolbar styling

Upvotes: 0

Whyser
Whyser

Reputation: 2247

Okay, I've found the issue (I think)!

You need to change your method _playing to this:

_playing: function(item)
{
   var parentNode = Polymer.dom(item.target).parentNode;
   var currentSound = Polymer.dom(parentNode).querySelector(".theSound");
   currentSound.play();
}

So what was wrong with your first solution?

When you write: document.getElementsByClassName("theSound") it will return all your elements with the class theSound that is currently visible (which is a specific behaviour for iron-list, see Dogs comment for details), meaning you won't get the 26th element. If you scroll down and that code is ran, it will still only return 25 elements (for example 5-30), but they will still be indexed in the array as 0-25. So when you press the 30th element, you will try to access element 30, when it's actually at position 25 in the array.

My solution eliminates this by not relying on the index. What I do is I pick the parentNode of the item being pressed and then I search for the element with the class theSound within that node, and thus it will only return one item (in the row that you pressed).

Upvotes: 1

Related Questions