function PlaylistController(playlist, sourceLogo, videoDate, caption, thumbsContainer, scrollbarContainer, videoController) { this.div = playlist; this.videoController = videoController; this.sourceLogo = sourceLogo; this.date = videoDate; this.caption = caption; this.thumbsContainer = thumbsContainer; this.scrollbarContainer = scrollbarContainer; this.thumbs = new Array(); this.captions = new Array(); this.currentVideoIndex = 0; this.hasStarted = false; this.isScrolling = 0; this.initializePlaylist(); this.bitrate="3G"; }; PlaylistController.prototype.initializePlaylist = function() { var context = this; var top = 0; $.each(H5Settings.playlist.videos, function(index, video) { if (index < H5Settings.playlist.videos.length) { var thumb = $('
'); var thumbImage = $(''); var caption = $('
'); var captionText = $('
' + video.headline + '
'); var captionMask = $('
'); caption.append(captionText); thumb.bind("click", function() { context.ScrollToIndex(index); context.loadVideo(context, index); }); thumb.append(thumbImage); context.thumbsContainer.append(thumb); context.thumbsContainer.append(caption); context.thumbsContainer.append(captionMask); context.thumbs.push(thumb); context.captions.push(caption); var left = parseInt(thumb.css("width").replace(/px/,"")); thumb.css("top", top); caption.css("top", top); captionMask.css("top", top); top += parseInt(thumb.css("height").replace(/px/,"")); top += parseInt(thumb.css("margin-bottom").replace(/px/, "")); } }); this.thumbsContainer.css("height", top); }; PlaylistController.prototype.handleStateChanged = function(state) { switch (state) { case VideoState.ENDED: this.ScrollToIndex(this.currentVideoIndex + 1); this.loadVideo(this, this.currentVideoIndex + 1); break; case VideoState.LOADING: break; case VideoState.LOADED: break; case VideoState.PLAY: break; case VideoState.PAUSED: break; } }; PlaylistController.prototype.loadVideo = function(context, index) { this.hasStarted = false; this.bitRate=this.videoController.bitrate; if (index < H5Settings.playlist.videos.length && index < context.thumbs.length && index < context.captions.length) { /* remove the now/next labels from the video thumbs */ context.thumbs[context.currentVideoIndex].children("span").remove(); if (context.currentVideoIndex + 1 < context.thumbs.length) { context.thumbs[context.currentVideoIndex + 1].children("span").remove(); } /* update the current video index */ context.currentVideoIndex = index; /* get a handle to the current video for ease of coding */ var video = H5Settings.playlist.videos[context.currentVideoIndex]; // We want ellipsis after a certain number of words var cap = ""; var words = video.caption.split(" "); if (words.length > 25) { for (var i = 0; i < 25; i++) cap += words[i] + " "; cap += "..."; } else { cap = video.caption; } /* Set the caption */ context.caption.html(cap); /* get the prefix to use for the title */ var titlePrefix = (H5Settings.titlePrefix == undefined || H5Settings.titlePrefix == null ) ? "" : H5Settings.titlePrefix; /* Set the window title */ try{ if (titlePrefix!=""){ window.parent.document.title = titlePrefix + video.headline; } } catch(e){ //noop } /* Set the date (if it's supposed to be shown) */ if (H5Settings.playlist.videos[context.currentVideoIndex].hideDate.toLowerCase() == "false") { context.date.html(H5Settings.playlist.videos[index].prettyDate); } /* Set the video source on the video controller */ context.videoController.setSource( video.videoUrls.high, video.videoUrls.low, video.docid, video.pg, video.isLive); /* Set the source skin */ H5Settings.playlist.videos[index].sourceSkin(function(skin) { /* context.sourceLogo.css("background-repeat", "no-repeat"); context.sourceLogo.css("background-image", "url('" + skin.brand + "')"); */ if (skin.brand){ context.sourceLogo.html(""); } context.sourceLogo.bind("click", function(event) { var callback = function(sourceUrl) { window.open(sourceUrl, "_top"); }; video.sourceUrl(callback); }); if (H5Settings.useBackgroundImage) { context.div.css("background-image", "url('" + H5Settings.skinBack + "')"); context.div.css("background-repeat", "no-repeat"); } else { context.div.css("background-image", "url('" + skin.sourceBackground + "')"); context.div.css("background-repeat", "no-repeat"); } }); var now = $('Now'); var next = $('Next'); context.thumbs[context.currentVideoIndex].append(now); if (context.currentVideoIndex + 1 < context.thumbs.length) { context.thumbs[context.currentVideoIndex + 1].append(next); } } }; PlaylistController.prototype.increment = function(current, duration) { // we only want to start the report when the video first starts if ((!this.hasStarted||(this.videoController.bitrate!=this.bitrate))&&(current>0)) { this.bitrate=this.videoController.bitrate; this.hasStarted = true; H5Settings.report.start(this.currentVideoIndex, this.videoController.bitrate); } }; PlaylistController.prototype.decrement = function(current, duration) { }; PlaylistController.prototype.ApplicationInitialized = function() { this.loadVideo(this, this.currentVideoIndex); }; PlaylistController.prototype.ScrollToIndex = function(index) { var thumbHeight = this.GetThumbnailHeight(); var currentPosition = parseInt($(this.thumbsContainer).css("top")); var desiredPosition = thumbHeight * index; var distance = Math.abs(currentPosition) - Math.abs(desiredPosition); this.ScrollListByY(distance); }; PlaylistController.prototype.ScrollListByY = function(offset) { /* to calculate the bottom we sum the height of each thumbail in the list excluding the last thumbail */ /* bottom needs to be a negative number */ var bottom = 0 - (this.GetThumbnailHeight() * (this.thumbs.length - 1)); var currentTop = parseInt($(this.thumbsContainer).css("top")); /* offset > 0 means we're scrolling towards the top of the list */ var newTop = (offset > 0) ? currentTop + offset : currentTop - Math.abs(offset); /* make sure we don't scroll above the first thumb */ if(newTop > 0) { newTop = 0; } /* make sure we don't scroll past the last thumb */ if(newTop < bottom) { newTop = bottom; } $(this.thumbsContainer).css("top", newTop); }; PlaylistController.prototype.GetThumbnailHeight = function() { if(this.thumbs.length > 0) { var height = parseInt($(this.thumbs[0]).css("height").replace(/px/,"")); var margin = parseInt($(this.thumbs[0]).css("margin-bottom").replace(/px/,"")); return height + margin; } return 0; }; PlaylistController.prototype.GetCaptionHeight = function() { if(this.captions.length > 0) { var height = parseInt($(this.captions[0]).css("height").replace(/px/,"")); return height; } return 0; }; PlaylistController.prototype.touchHandler = function(event) { if ( event.type == "touchstart" ) { /* if there is any scrolling still going we need to stop it */ $(this.thumbsContainer).stop(); this.ScrollY = event.targetTouches[0].pageY; this.ScrollMoves = 0; this.ScrollTotalDistance = 0; } else if ( event.type == "touchmove" ) { event.preventDefault(); var curX = event.targetTouches[0].pageX; var curY = event.targetTouches[0].pageY; var distance = curY - this.ScrollY; this.ScrollListByY(distance); this.ScrollY = curY; /* keep some metrics for emulating a flick */ this.ScrollDirection = (distance > 0) ? 1 : -1; this.ScrollMoves++; this.ScrollTotalDistance += Math.abs(distance); } else if ( event.type == "touchend" ) { /* Determine how far to keep scrolling after the user has finished the swipe */ /* in order to emulate a flick */ var averageDistance = (this.ScrollTotalDistance / this.ScrollMoves); averageDistance = (this.ScrollDirection > 0) ? "+=" + (averageDistance * 7) : "-=" + (averageDistance * 7); var context = this; $(this.thumbsContainer).animate({top:averageDistance}, 700, "linear", function() { context.ScrollListByY(0) }); } };