paulirish/infinite-scroll — Issue #123: Not working properly with .mb_miniPlayer
Author: JeanHules
Created: 2012-01-24 01:35:54+00:00
State: open

Hi Paul,

Great Plugin...I am building a site with 20 single song audio players on each page. The code I have is meant to play the next visible song at the end of each song. It works fine on the initial page, but once Paul Irish's infinite scroll loads new pages, the code does not work properly. Instead of playing the next song, it plays a random song on the page.

I have noticed a pattern of it often playing a song 9 songs behind or goes to the second song of the first page. The player is:

https://github.com/pupunzi/jquery.mb.miniAudioPlayer

The code I am using is:

$(".audio").mb_miniPlayer({
width:210,
height:34,
inLine:false,
onEnd:playNext
});

var $audios = $('.audio');

function playNext(idx) {
var actualPlayer=$audios.eq(idx),
$filteredAtoms = $container.data('isotope').$filteredAtoms,
isotopeItemParent = actualPlayer.parents('.isotope-item'),
isoIndex = $filteredAtoms.index( isotopeItemParent[0] ),
nextIndex = ( isoIndex + 1 ) % $filteredAtoms.length;

$filteredAtoms.eq( nextIndex ).find('.audio').mb_miniPlayer_play();
};

Plugins used on the site: Isotope, Infinite Scroll, and .mb_miniplayer

The first 10 songs(page1) work as they are suppose to--in FF and safari... The rest of the songs do not. if you click to the end of one of the first 10 songs, you will see it goes to the next visible song, regardless of what filters are active, but on the 2nd and third page, it plays a random song.

The website is: http://www.audiblecoffee.com/beta321432

I am still working on bugs with the site, but this is the one I cant seem to figure out.

Here is my Infinite Scroll Code:

var $container = $('#container');

$container.isotope({
itemSelector : '.square'
});
$container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector : '.square', // selector for all items you'll retrieve
animate :	false,
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},

// call Isotope as a callback

function( newElements ) {
var $newElements = $(newElements);

$newElements.find(".audio").mb_miniPlayer({
width:210,
height:34,
inLine:false,
onEnd:playNext
});
var $audios = $('.audio');

function playNext(idx) {
var actualPlayer=$audios.eq(idx),
$filteredAtoms = $container.data('isotope').$filteredAtoms,
isotopeItemParent = actualPlayer.parents('.isotope-item'),
isoIndex = $filteredAtoms.index( isotopeItemParent[0] ),
nextIndex = ( isoIndex + 1 ) % $filteredAtoms.length;

$filteredAtoms.eq( nextIndex ).find('.audio').mb_miniPlayer_play();
};

// add hover events for new items
bindSquareEvents( $newElements );
setTimeout(function() {
$container.isotope('insert', $newElements );
}, 1000);

});