-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for community post page/comments (#4010)
- Loading branch information
Showing
14 changed files
with
450 additions
and
169 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| var video_data = JSON.parse(document.getElementById('video_data').textContent); | ||
|
|
||
| var spinnerHTML = '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>'; | ||
| var spinnerHTMLwithHR = spinnerHTML + '<hr>'; | ||
|
|
||
| String.prototype.supplant = function (o) { | ||
| return this.replace(/{([^{}]*)}/g, function (a, b) { | ||
| var r = o[b]; | ||
| return typeof r === 'string' || typeof r === 'number' ? r : a; | ||
| }); | ||
| }; | ||
|
|
||
| function toggle_comments(event) { | ||
| var target = event.target; | ||
| var body = target.parentNode.parentNode.parentNode.children[1]; | ||
| if (body.style.display === 'none') { | ||
| target.textContent = '[ − ]'; | ||
| body.style.display = ''; | ||
| } else { | ||
| target.textContent = '[ + ]'; | ||
| body.style.display = 'none'; | ||
| } | ||
| } | ||
|
|
||
| function hide_youtube_replies(event) { | ||
| var target = event.target; | ||
|
|
||
| var sub_text = target.getAttribute('data-inner-text'); | ||
| var inner_text = target.getAttribute('data-sub-text'); | ||
|
|
||
| var body = target.parentNode.parentNode.children[1]; | ||
| body.style.display = 'none'; | ||
|
|
||
| target.textContent = sub_text; | ||
| target.onclick = show_youtube_replies; | ||
| target.setAttribute('data-inner-text', inner_text); | ||
| target.setAttribute('data-sub-text', sub_text); | ||
| } | ||
|
|
||
| function show_youtube_replies(event) { | ||
| var target = event.target; | ||
|
|
||
| var sub_text = target.getAttribute('data-inner-text'); | ||
| var inner_text = target.getAttribute('data-sub-text'); | ||
|
|
||
| var body = target.parentNode.parentNode.children[1]; | ||
| body.style.display = ''; | ||
|
|
||
| target.textContent = sub_text; | ||
| target.onclick = hide_youtube_replies; | ||
| target.setAttribute('data-inner-text', inner_text); | ||
| target.setAttribute('data-sub-text', sub_text); | ||
| } | ||
|
|
||
| function get_youtube_comments() { | ||
| var comments = document.getElementById('comments'); | ||
|
|
||
| var fallback = comments.innerHTML; | ||
| comments.innerHTML = spinnerHTML; | ||
|
|
||
| var baseUrl = video_data.base_url || '/api/v1/comments/'+ video_data.id | ||
| var url = baseUrl + | ||
| '?format=html' + | ||
| '&hl=' + video_data.preferences.locale + | ||
| '&thin_mode=' + video_data.preferences.thin_mode; | ||
|
|
||
| if (video_data.ucid) { | ||
| url += '&ucid=' + video_data.ucid | ||
| } | ||
|
|
||
| var onNon200 = function (xhr) { comments.innerHTML = fallback; }; | ||
| if (video_data.params.comments[1] === 'youtube') | ||
| onNon200 = function (xhr) {}; | ||
|
|
||
| helpers.xhr('GET', url, {retries: 5, entity_name: 'comments'}, { | ||
| on200: function (response) { | ||
| var commentInnerHtml = ' \ | ||
| <div> \ | ||
| <h3> \ | ||
| <a href="javascript:void(0)">[ − ]</a> \ | ||
| {commentsText} \ | ||
| </h3> \ | ||
| <b> \ | ||
| ' | ||
| if (video_data.support_reddit) { | ||
| commentInnerHtml += ' <a href="javascript:void(0)" data-comments="reddit"> \ | ||
| {redditComments} \ | ||
| </a> \ | ||
| ' | ||
| } | ||
| commentInnerHtml += ' </b> \ | ||
| </div> \ | ||
| <div>{contentHtml}</div> \ | ||
| <hr>' | ||
| commentInnerHtml = commentInnerHtml.supplant({ | ||
| contentHtml: response.contentHtml, | ||
| redditComments: video_data.reddit_comments_text, | ||
| commentsText: video_data.comments_text.supplant({ | ||
| // toLocaleString correctly splits number with local thousands separator. e.g.: | ||
| // '1,234,567.89' for user with English locale | ||
| // '1 234 567,89' for user with Russian locale | ||
| // '1.234.567,89' for user with Portuguese locale | ||
| commentCount: response.commentCount.toLocaleString() | ||
| }) | ||
| }); | ||
| comments.innerHTML = commentInnerHtml; | ||
| comments.children[0].children[0].children[0].onclick = toggle_comments; | ||
| if (video_data.support_reddit) { | ||
| comments.children[0].children[1].children[0].onclick = swap_comments; | ||
| } | ||
| }, | ||
| onNon200: onNon200, // declared above | ||
| onError: function (xhr) { | ||
| comments.innerHTML = spinnerHTML; | ||
| }, | ||
| onTimeout: function (xhr) { | ||
| comments.innerHTML = spinnerHTML; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| function get_youtube_replies(target, load_more, load_replies) { | ||
| var continuation = target.getAttribute('data-continuation'); | ||
|
|
||
| var body = target.parentNode.parentNode; | ||
| var fallback = body.innerHTML; | ||
| body.innerHTML = spinnerHTML; | ||
| var baseUrl = video_data.base_url || '/api/v1/comments/'+ video_data.id | ||
| var url = baseUrl + | ||
| '?format=html' + | ||
| '&hl=' + video_data.preferences.locale + | ||
| '&thin_mode=' + video_data.preferences.thin_mode + | ||
| '&continuation=' + continuation; | ||
|
|
||
| if (video_data.ucid) { | ||
| url += '&ucid=' + video_data.ucid | ||
| } | ||
| if (load_replies) url += '&action=action_get_comment_replies'; | ||
|
|
||
| helpers.xhr('GET', url, {}, { | ||
| on200: function (response) { | ||
| if (load_more) { | ||
| body = body.parentNode.parentNode; | ||
| body.removeChild(body.lastElementChild); | ||
| body.insertAdjacentHTML('beforeend', response.contentHtml); | ||
| } else { | ||
| body.removeChild(body.lastElementChild); | ||
|
|
||
| var p = document.createElement('p'); | ||
| var a = document.createElement('a'); | ||
| p.appendChild(a); | ||
|
|
||
| a.href = 'javascript:void(0)'; | ||
| a.onclick = hide_youtube_replies; | ||
| a.setAttribute('data-sub-text', video_data.hide_replies_text); | ||
| a.setAttribute('data-inner-text', video_data.show_replies_text); | ||
| a.textContent = video_data.hide_replies_text; | ||
|
|
||
| var div = document.createElement('div'); | ||
| div.innerHTML = response.contentHtml; | ||
|
|
||
| body.appendChild(p); | ||
| body.appendChild(div); | ||
| } | ||
| }, | ||
| onNon200: function (xhr) { | ||
| body.innerHTML = fallback; | ||
| }, | ||
| onTimeout: function (xhr) { | ||
| console.warn('Pulling comments failed'); | ||
| body.innerHTML = fallback; | ||
| } | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| addEventListener('load', function (e) { | ||
| get_youtube_comments(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.