From 7d2e1f63b549dbd8eda9d69c357944597bb71bca Mon Sep 17 00:00:00 2001 From: Omar Roth Date: Wed, 15 May 2019 13:30:30 -0500 Subject: [PATCH] Refactor watched_widget.js --- assets/js/watch.js | 81 +++++++++++++++++-------- assets/js/watched_widget.js | 46 ++++++++++++++ src/invidious/views/components/item.ecr | 2 +- src/invidious/views/history.ecr | 38 +++--------- src/invidious/views/subscriptions.ecr | 31 +++------- src/invidious/views/watch.ecr | 2 +- 6 files changed, 120 insertions(+), 80 deletions(-) create mode 100644 assets/js/watched_widget.js diff --git a/assets/js/watch.js b/assets/js/watch.js index 46910620..d447f441 100644 --- a/assets/js/watch.js +++ b/assets/js/watch.js @@ -16,7 +16,8 @@ function toggle_parent(target) { } } -function toggle_comments(target) { +function toggle_comments(event) { + var target = event.target; body = target.parentNode.parentNode.parentNode.children[1]; if (body.style.display === null || body.style.display === '') { target.innerHTML = '[ + ]'; @@ -27,28 +28,44 @@ function toggle_comments(target) { } } -function swap_comments(source) { - if (source == 'youtube') { +function swap_comments(event) { + var source = event.target.getAttribute('data-comments'); + + if (source === 'youtube') { get_youtube_comments(); - } else if (source == 'reddit') { + } else if (source === 'reddit') { get_reddit_comments(); } } -function show_youtube_replies(target, inner_text, sub_text) { - body = target.parentNode.parentNode.children[1]; - body.style.display = ''; +function hide_youtube_replies(event) { + var target = event.target; - target.innerHTML = inner_text; - target.setAttribute('onclick', "hide_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')"); -} + sub_text = target.getAttribute('data-inner-text'); + inner_text = target.getAttribute('data-sub-text'); -function hide_youtube_replies(target, inner_text, sub_text) { body = target.parentNode.parentNode.children[1]; body.style.display = 'none'; target.innerHTML = sub_text; - target.setAttribute('onclick', "show_youtube_replies(this, \'" + inner_text + "\', \'" + 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; + + sub_text = target.getAttribute('data-inner-text'); + inner_text = target.getAttribute('data-sub-text'); + + body = target.parentNode.parentNode.children[1]; + body.style.display = ''; + + target.innerHTML = sub_text; + target.onclick = hide_youtube_replies; + target.setAttribute('data-inner-text', inner_text); + target.setAttribute('data-sub-text', sub_text); } var continue_button = document.getElementById('continue'); @@ -186,12 +203,12 @@ function get_reddit_comments(timeouts = 0) { comments.innerHTML = ' \
\

\ - [ - ] \ + [ - ] \ {title} \

\

\ \ - \ + \ {youtubeCommentsText} \ \ \ @@ -208,6 +225,9 @@ function get_reddit_comments(timeouts = 0) { permalink: xhr.response.permalink, contentHtml: xhr.response.contentHtml }); + + comments.children[0].children[0].children[0].onclick = toggle_comments; + comments.children[0].children[1].children[0].onclick = swap_comments; } else { if (video_data.preferences.comments[1] === 'youtube') { get_youtube_comments(timeouts + 1); @@ -254,11 +274,11 @@ function get_youtube_comments(timeouts = 0) { comments.innerHTML = ' \

\

\ - [ - ] \ + [ - ] \ {commentsText} \

\ \ - \ + \ {redditComments} \ \ \ @@ -271,6 +291,9 @@ function get_youtube_comments(timeouts = 0) { { commentCount: number_with_separator(xhr.response.commentCount) } ) }); + + comments.children[0].children[0].children[0].onclick = toggle_comments; + comments.children[0].children[1].children[0].onclick = swap_comments; } else { comments.innerHTML = ''; } @@ -319,15 +342,23 @@ function get_youtube_replies(target, load_more) { body.removeChild(body.lastElementChild); body.innerHTML += xhr.response.contentHtml; } else { - body.innerHTML = ' \ -

{hideRepliesText} \ -

\ -
{contentHtml}
'.supplant({ - hideRepliesText: video_data.hide_replies_text, - showRepliesText: video_data.show_replies_text, - contentHtml: xhr.response.contentHtml - }); + 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.innerText = video_data.hide_replies_text; + + var div = document.createElement('div'); + div.innerHTML = xhr.response.contentHtml; + + body.appendChild(p); + body.appendChild(div); } } else { body.innerHTML = fallback; diff --git a/assets/js/watched_widget.js b/assets/js/watched_widget.js new file mode 100644 index 00000000..304a7688 --- /dev/null +++ b/assets/js/watched_widget.js @@ -0,0 +1,46 @@ +function mark_watched(target) { + var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode; + tile.style.display = 'none'; + + var url = '/watch_ajax?action_mark_watched=1&redirect=false' + + '&id=' + target.getAttribute('data-id'); + var xhr = new XMLHttpRequest(); + xhr.responseType = 'json'; + xhr.timeout = 20000; + xhr.open('POST', url, true); + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + xhr.send('csrf_token=' + watched_data.csrf_token); + + xhr.onreadystatechange = function () { + if (xhr.readyState == 4) { + if (xhr.status != 200) { + tile.style.display = ''; + } + } + } +} + +function mark_unwatched(target) { + var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode; + tile.style.display = "none"; + var count = document.getElementById('count') + count.innerText = count.innerText - 1; + + var url = '/watch_ajax?action_mark_unwatched=1&redirect=false' + + '&id=' + target.getAttribute('data-id'); + var xhr = new XMLHttpRequest(); + xhr.responseType = 'json'; + xhr.timeout = 20000; + xhr.open('POST', url, true); + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + xhr.send('csrf_token=' + watched_data.csrf_token); + + xhr.onreadystatechange = function () { + if (xhr.readyState == 4) { + if (xhr.status != 200) { + count.innerText = count.innerText - 1 + 2; + tile.style.display = ''; + } + } + } +} \ No newline at end of file diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr index 4a20de51..5ec406cb 100644 --- a/src/invidious/views/components/item.ecr +++ b/src/invidious/views/components/item.ecr @@ -93,7 +93,7 @@
" method="post"> ">

- +

+ + +
<% watched.each_slice(4) do |slice| %> <% slice.each do |item| %> @@ -27,10 +34,10 @@ <% if !env.get("preferences").as(Preferences).thin_mode %>
- " method="post"> + " method="post"> ">

- + @@ -47,33 +54,6 @@ <% end %>

- -
<% if page >= 2 %> diff --git a/src/invidious/views/subscriptions.ecr b/src/invidious/views/subscriptions.ecr index 806e6124..f4725169 100644 --- a/src/invidious/views/subscriptions.ecr +++ b/src/invidious/views/subscriptions.ecr @@ -45,6 +45,13 @@
+ + +
<% videos.each_slice(4) do |slice| %> <% slice.each do |item| %> @@ -53,30 +60,6 @@ <% end %>
- -
<% if page >= 2 %> diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr index d0dba85e..466c71f4 100644 --- a/src/invidious/views/watch.ecr +++ b/src/invidious/views/watch.ecr @@ -207,7 +207,7 @@ var video_data = {
style="display:none"<% end %>>
- checked<% end %>> + checked<% end %>>