From 6a6fdcde49330169991975ed5edd09685aeae980 Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Thu, 23 Oct 2014 14:19:07 -0400 Subject: [PATCH] Added comments to clarify some of the changes. --- demo_historic_videos.html | 2 +- google-youtube-video-wall.html | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/demo_historic_videos.html b/demo_historic_videos.html index e9f7289..fad9575 100755 --- a/demo_historic_videos.html +++ b/demo_historic_videos.html @@ -18,7 +18,7 @@ - <google-youtube-video-wall> Demo + Historic Videos from British Pathé diff --git a/google-youtube-video-wall.html b/google-youtube-video-wall.html index 844ef1d..b77a6e2 100755 --- a/google-youtube-video-wall.html +++ b/google-youtube-video-wall.html @@ -532,6 +532,8 @@

{{video.snippet.title}}

// We can take some shortcuts since we know that there won't be any nested objects within the two param objects. _paramsEqual: function(firstParams, secondParams) { + // First, check to make sure that for every key in firstParams, there's a key in secondParams, and both + // keys have values that are equal. If not, return false. for (var key in firstParams) { if (firstParams.hasOwnProperty(key)) { if (firstParams[key] !== secondParams[key]) { @@ -540,12 +542,15 @@

{{video.snippet.title}}

} } + // Then, check to make sure that all the keys secondParams are also present in firstParams. + // If secondParams has a key that's not in firstParams, return false. for (var key in secondParams) { if (secondParams.hasOwnProperty(key) && !firstParams.hasOwnProperty(key)) { return false; } } + // If those tests succeed, return true, since the keys/values in both sets of params match. return true; }, @@ -569,6 +574,16 @@

{{video.snippet.title}}

this._nextPageToken = response.nextPageToken; this.async(function() { + // Additional pages of results are loaded dynamically when there's a scroll event and the user + // has scrolled close to the bottom of the container. (See this.handleResultsScroll) + // There's a bootstrapping issue, though, since if the initial request(s) don't return enough + // videos to trigger scroll bars, it's not possible for the user to trigger a scroll event and they're + // stuck with the initial results. + // Therefore, we check here to see whether there are no scroll bars (clientHeight == scrollHeight + // means there aren't any) and if there aren't, load in the next page of results. + // This check will be done each time there's an API response, so if the next page of results isn't + // enough to show scroll bars, another page will be loaded, until scroll bars are visible or until + // there are no more pages of results. if (this.$.resultspage.scroller.clientHeight == this.$.resultspage.scroller.scrollHeight) { this.updateYouTubeApiParams(); }