diff --git a/assets/js/comments.js b/assets/js/comments.js index 35ffa96e..abe423ce 100644 --- a/assets/js/comments.js +++ b/assets/js/comments.js @@ -1,5 +1,8 @@ var video_data = JSON.parse(document.getElementById('video_data').textContent); +// Arabic, Persian, Hebrew +var isRTL = ["ar", "fa", "he"].includes(video_data.preferences.locale); + var spinnerHTML = '

'; var spinnerHTMLwithHR = spinnerHTML + '
'; @@ -55,7 +58,7 @@ function show_youtube_replies(event) { function get_youtube_comments() { var comments = document.getElementById('comments'); - var fallback = comments.innerHTML; + var originalHTML = comments.innerHTML; comments.innerHTML = spinnerHTML; var baseUrl = video_data.base_url || '/api/v1/comments/'+ video_data.id @@ -65,10 +68,10 @@ function get_youtube_comments() { '&thin_mode=' + video_data.preferences.thin_mode; if (video_data.ucid) { - url += '&ucid=' + video_data.ucid + url += '&ucid=' + video_data.ucid; } - var onNon200 = function (xhr) { comments.innerHTML = fallback; }; + var onNon200 = function (xhr) { comments.innerHTML = originalHTML; }; if (video_data.params.comments[1] === 'youtube') onNon200 = function (xhr) {}; @@ -119,13 +122,45 @@ function get_youtube_comments() { }); } +function format_count_load_more(content, current_count, total_count) { + var load_more_end_str = content.split('data-load-more'); + if (load_more_end_str.length === 1) + return [content, false]; // no Load More button, return false for has_more_replies + load_more_end_str = load_more_end_str[1].split('\n')[0]; // ' >("Load more" translated string)' + var slice_index = content.indexOf(load_more_end_str) + load_more_end_str.length - 4; // backtrace + var num_remaining = total_count - current_count; + return [ + // More replies may have been added since initally loading parent comment + content.slice(0, slice_index) + ' (+' + (num_remaining > 0 ? num_remaining : '?') + ')' + content.slice(slice_index), + true // Load More button present, return true for has_more_replies + ]; +} + +function format_count_toggle_replies_button(toggle_reply_button, current_count, total_count, has_more_replies) { + if (!has_more_replies) { + // Accept the final current count as the total (comments may have been added or removed since loading) + total_count = current_count; + } else if (current_count >= total_count) { + total_count = '?'; + } + + if (isRTL) [current_count, total_count] = [total_count, current_count]; + ['data-sub-text', 'data-inner-text'].forEach(attr => { + toggle_reply_button.setAttribute(attr, + toggle_reply_button.getAttribute(attr) + .replace(/\(\d+\/\d+\)/, ' (' + current_count + '/' + total_count + ')') + ); + }); + toggle_reply_button.textContent = toggle_reply_button.getAttribute('data-sub-text'); +} + function get_youtube_replies(target, load_more, load_replies) { var continuation = target.getAttribute('data-continuation'); var body = target.parentNode.parentNode; - var fallback = body.innerHTML; + var originalHTML = body.innerHTML; body.innerHTML = spinnerHTML; - var baseUrl = video_data.base_url || '/api/v1/comments/'+ video_data.id + var baseUrl = video_data.base_url || '/api/v1/comments/' + video_data.id var url = baseUrl + '?format=html' + '&hl=' + video_data.preferences.locale + @@ -133,18 +168,35 @@ function get_youtube_replies(target, load_more, load_replies) { '&continuation=' + continuation; if (video_data.ucid) { - url += '&ucid=' + video_data.ucid + url += '&ucid=' + video_data.ucid; } if (load_replies) url += '&action=action_get_comment_replies'; helpers.xhr('GET', url, {}, { on200: function (response) { + var num_incoming_replies = response.contentHtml.split('channel-profile').length - 1; if (load_more) { body = body.parentNode.parentNode; - body.removeChild(body.lastElementChild); - body.insertAdjacentHTML('beforeend', response.contentHtml); + body.removeChild(body.lastElementChild); // Remove spinner + + var toggle_replies_button = body.parentNode.firstChild.firstChild; + if (!toggle_replies_button) { + body.insertAdjacentHTML('beforeend', response.contentHtml);  + return; + } + + var [prev_num_replies, num_total_replies] = toggle_replies_button.textContent.match(/\d+/g); + if (isRTL) [prev_num_replies, num_total_replies] = [num_total_replies, prev_num_replies]; + prev_num_replies -= 0; num_total_replies -= 0; // convert to integers + var num_current_replies = prev_num_replies + num_incoming_replies; + + var [newHTML, has_more_replies] = format_count_load_more(response.contentHtml, num_current_replies, num_total_replies); + format_count_toggle_replies_button(toggle_replies_button, num_current_replies, num_total_replies, has_more_replies); + + body.insertAdjacentHTML('beforeend', newHTML); } else { - body.removeChild(body.lastElementChild); + // loads only once for each comment when first opening their replies + body.removeChild(body.lastElementChild); // Remove spinner var p = document.createElement('p'); var a = document.createElement('a'); @@ -152,23 +204,30 @@ function get_youtube_replies(target, load_more, load_replies) { 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 num_total_replies = originalHTML.split('data-load-replies')[1].match(/\d+/)[0] - 0; + var num_replies_text = ' (0/0)'; // replace later + var hide_replies_text = video_data.hide_replies_text + num_replies_text; + a.setAttribute('data-sub-text', hide_replies_text); + a.setAttribute('data-inner-text', video_data.show_replies_text + num_replies_text); + a.textContent = hide_replies_text; var div = document.createElement('div'); - div.innerHTML = response.contentHtml; + var [newHTML, has_more_replies] = format_count_load_more(response.contentHtml, num_incoming_replies, num_total_replies); + format_count_toggle_replies_button(a, num_incoming_replies, num_total_replies, has_more_replies); + + div.innerHTML = newHTML; body.appendChild(p); body.appendChild(div); } }, onNon200: function (xhr) { - body.innerHTML = fallback; + body.innerHTML = originalHTML; }, onTimeout: function (xhr) { console.warn('Pulling comments failed'); - body.innerHTML = fallback; + body.innerHTML = originalHTML; } }); } \ No newline at end of file