js code rewrite. Created _helpers.js with XHR and storage wrapper

1 files changed, 174 insertions, 290 deletions

diff --git a/assets/js/watch.js b/assets/js/watch.js
index 29d58be5..ff0f7822 100644
--- a/assets/js/watch.js
+++ b/assets/js/watch.js
@@ -1,5 +1,7 @@
 'use strict';
 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) {
@@ -10,24 +12,24 @@ String.prototype.supplant = function (o) {
 
 function toggle_parent(target) {
     var body = target.parentNode.parentNode.children[1];
-    if (body.style.display === null || body.style.display === '') {
-        target.textContent = '[ + ]';
-        body.style.display = 'none';
-    } else {
+    if (body.style.display === 'none') {
         target.textContent = '[ − ]';
         body.style.display = '';
+    } else {
+        target.textContent = '[ + ]';
+        body.style.display = 'none';
     }
 }
 
 function toggle_comments(event) {
     var target = event.target;
     var body = target.parentNode.parentNode.parentNode.children[1];
-    if (body.style.display === null || body.style.display === '') {
-        target.textContent = '[ + ]';
-        body.style.display = 'none';
-    } else {
+    if (body.style.display === 'none') {
         target.textContent = '[ − ]';
         body.style.display = '';
+    } else {
+        target.textContent = '[ + ]';
+        body.style.display = 'none';
     }
 }
 
@@ -79,31 +81,22 @@ if (continue_button) {
 function next_video() {
     var url = new URL('https://example.com/watch?v=' + video_data.next_video);
 
-    if (video_data.params.autoplay || video_data.params.continue_autoplay) {
+    if (video_data.params.autoplay || video_data.params.continue_autoplay)
         url.searchParams.set('autoplay', '1');
-    }
-
-    if (video_data.params.listen !== video_data.preferences.listen) {
+    if (video_data.params.listen !== video_data.preferences.listen)
         url.searchParams.set('listen', video_data.params.listen);
-    }
-
-    if (video_data.params.speed !== video_data.preferences.speed) {
+    if (video_data.params.speed !== video_data.preferences.speed)
         url.searchParams.set('speed', video_data.params.speed);
-    }
-
-    if (video_data.params.local !== video_data.preferences.local) {
+    if (video_data.params.local !== video_data.preferences.local)
         url.searchParams.set('local', video_data.params.local);
-    }
-
     url.searchParams.set('continue', '1');
+
     location.assign(url.pathname + url.search);
 }
 
 function continue_autoplay(event) {
     if (event.target.checked) {
-        player.on('ended', function () {
-            next_video();
-        });
+        player.on('ended', next_video);
     } else {
         player.off('ended');
     }
@@ -116,19 +109,10 @@ function number_with_separator(val) {
     return val;
 }
 
-function get_playlist(plid, retries) {
-    if (retries === undefined) retries = 5;
+function get_playlist(plid) {
     var playlist = document.getElementById('playlist');
 
-    if (retries <= 0) {
-        console.warn('Failed to pull playlist');
-        playlist.innerHTML = '';
-        return;
-    }
-
-    playlist.innerHTML = ' \
-        <h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3> \
-        <hr>';
+    playlist.innerHTML = spinnerHTMLwithHR;
 
     var plid_url;
     if (plid.startsWith('RD')) {
@@ -142,225 +126,144 @@ function get_playlist(plid, retries) {
             '&format=html&hl=' + video_data.preferences.locale;
     }
 
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', plid_url, true);
-
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-                playlist.innerHTML = xhr.response.playlistHtml;
-                var nextVideo = document.getElementById(xhr.response.nextVideo);
-                nextVideo.parentNode.parentNode.scrollTop = nextVideo.offsetTop;
-
-                if (xhr.response.nextVideo) {
-                    player.on('ended', function () {
-                        var url = new URL('https://example.com/watch?v=' + xhr.response.nextVideo);
-
-                        url.searchParams.set('list', plid);
-                        if (!plid.startsWith('RD')) {
-                            url.searchParams.set('index', xhr.response.index);
-                        }
-
-                        if (video_data.params.autoplay || video_data.params.continue_autoplay) {
-                            url.searchParams.set('autoplay', '1');
-                        }
-
-                        if (video_data.params.listen !== video_data.preferences.listen) {
-                            url.searchParams.set('listen', video_data.params.listen);
-                        }
-
-                        if (video_data.params.speed !== video_data.preferences.speed) {
-                            url.searchParams.set('speed', video_data.params.speed);
-                        }
-
-                        if (video_data.params.local !== video_data.preferences.local) {
-                            url.searchParams.set('local', video_data.params.local);
-                        }
-
-                        location.assign(url.pathname + url.search);
-                    });
-                }
-            } else {
-                playlist.innerHTML = '';
-                document.getElementById('continue').style.display = '';
-            }
+    helpers.xhr('GET', plid_url, {retries: 5, entity_name: 'playlist'}, {
+        on200: function (response) {
+            playlist.innerHTML = response.playlistHtml;
+
+            if (!response.nextVideo) return;
+
+            var nextVideo = document.getElementById(response.nextVideo);
+            nextVideo.parentNode.parentNode.scrollTop = nextVideo.offsetTop;
+
+            player.on('ended', function () {
+                var url = new URL('https://example.com/watch?v=' + response.nextVideo);
+
+                url.searchParams.set('list', plid);
+                if (!plid.startsWith('RD'))
+                    url.searchParams.set('index', response.index);
+                if (video_data.params.autoplay || video_data.params.continue_autoplay)
+                    url.searchParams.set('autoplay', '1');
+                if (video_data.params.listen !== video_data.preferences.listen)
+                    url.searchParams.set('listen', video_data.params.listen);
+                if (video_data.params.speed !== video_data.preferences.speed)
+                    url.searchParams.set('speed', video_data.params.speed);
+                if (video_data.params.local !== video_data.preferences.local)
+                    url.searchParams.set('local', video_data.params.local);
+
+                location.assign(url.pathname + url.search);
+            });
+        },
+        onNon200: function (xhr) {
+            playlist.innerHTML = '';
+            document.getElementById('continue').style.display = '';
+        },
+        onError: function (xhr) {
+            playlist.innerHTML = spinnerHTMLwithHR;
+        },
+        onTimeout: function (xhr) {
+            playlist.innerHTML = spinnerHTMLwithHR;
         }
-    };
-
-    xhr.onerror = function () {
-        playlist = document.getElementById('playlist');
-        playlist.innerHTML =
-            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
-
-        console.warn('Pulling playlist timed out... ' + retries + '/5');
-        setTimeout(function () { get_playlist(plid, retries - 1); }, 1000);
-    };
-
-    xhr.ontimeout = function () {
-        playlist = document.getElementById('playlist');
-        playlist.innerHTML =
-            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
-
-        console.warn('Pulling playlist timed out... ' + retries + '/5');
-        get_playlist(plid, retries - 1);
-    };
-
-    xhr.send();
+    });
 }
 
-function get_reddit_comments(retries) {
-    if (retries === undefined) retries = 5;
+function get_reddit_comments() {
     var comments = document.getElementById('comments');
 
-    if (retries <= 0) {
-        console.warn('Failed to pull comments');
-        comments.innerHTML = '';
-        return;
-    }
-
     var fallback = comments.innerHTML;
-    comments.innerHTML =
-        '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+    comments.innerHTML = spinnerHTML;
 
     var url = '/api/v1/comments/' + video_data.id +
         '?source=reddit&format=html' +
         '&hl=' + video_data.preferences.locale;
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', url, true);
-
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-                comments.innerHTML = ' \
-                <div> \
-                    <h3> \
-                        <a href="javascript:void(0)">[ − ]</a> \
-                        {title} \
-                    </h3> \
-                    <p> \
-                        <b> \
-                            <a href="javascript:void(0)" data-comments="youtube"> \
-                                {youtubeCommentsText} \
-                            </a> \
-                        </b> \
-                    </p> \
+
+    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: ''}, {
+        on200: function (response) {
+            comments.innerHTML = ' \
+            <div> \
+                <h3> \
+                    <a href="javascript:void(0)">[ − ]</a> \
+                    {title} \
+                </h3> \
+                <p> \
                     <b> \
-                        <a rel="noopener" target="_blank" href="https://reddit.com{permalink}">{redditPermalinkText}</a> \
+                        <a href="javascript:void(0)" data-comments="youtube"> \
+                            {youtubeCommentsText} \
+                        </a> \
                     </b> \
-                </div> \
-                <div>{contentHtml}</div> \
-                <hr>'.supplant({
-                    title: xhr.response.title,
-                    youtubeCommentsText: video_data.youtube_comments_text,
-                    redditPermalinkText: video_data.reddit_permalink_text,
-                    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.params.comments[1] === 'youtube') {
-                    console.warn('Pulling comments failed... ' + retries + '/5');
-                    setTimeout(function () { get_youtube_comments(retries - 1); }, 1000);
-                } else {
-                    comments.innerHTML = fallback;
-                }
-            }
-        }
-    };
-
-    xhr.onerror = function () {
-        console.warn('Pulling comments failed... ' + retries + '/5');
-        setTimeout(function () { get_reddit_comments(retries - 1); }, 1000);
-    };
-
-    xhr.ontimeout = function () {
-        console.warn('Pulling comments failed... ' + retries + '/5');
-        get_reddit_comments(retries - 1);
-    };
-
-    xhr.send();
+                </p> \
+                <b> \
+                    <a rel="noopener" target="_blank" href="https://reddit.com{permalink}">{redditPermalinkText}</a> \
+                </b> \
+            </div> \
+            <div>{contentHtml}</div> \
+            <hr>'.supplant({
+                title: response.title,
+                youtubeCommentsText: video_data.youtube_comments_text,
+                redditPermalinkText: video_data.reddit_permalink_text,
+                permalink: response.permalink,
+                contentHtml: response.contentHtml
+            });
+
+            comments.children[0].children[0].children[0].onclick = toggle_comments;
+            comments.children[0].children[1].children[0].onclick = swap_comments;
+        },
+        onNon200: onNon200, // declared above
+    });
 }
 
-function get_youtube_comments(retries) {
-    if (retries === undefined) retries = 5;
+function get_youtube_comments() {
     var comments = document.getElementById('comments');
 
-    if (retries <= 0) {
-        console.warn('Failed to pull comments');
-        comments.innerHTML = '';
-        return;
-    }
-
     var fallback = comments.innerHTML;
-    comments.innerHTML =
-        '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+    comments.innerHTML = spinnerHTML;
 
     var url = '/api/v1/comments/' + video_data.id +
         '?format=html' +
         '&hl=' + video_data.preferences.locale +
         '&thin_mode=' + video_data.preferences.thin_mode;
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', url, true);
-
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-                comments.innerHTML = ' \
-                <div> \
-                    <h3> \
-                        <a href="javascript:void(0)">[ − ]</a> \
-                        {commentsText}  \
-                    </h3> \
-                    <b> \
-                        <a href="javascript:void(0)" data-comments="reddit"> \
-                            {redditComments} \
-                        </a> \
-                    </b> \
-                </div> \
-                <div>{contentHtml}</div> \
-                <hr>'.supplant({
-                    contentHtml: xhr.response.contentHtml,
-                    redditComments: video_data.reddit_comments_text,
-                    commentsText: video_data.comments_text.supplant(
-                        { 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 {
-                if (video_data.params.comments[1] === 'youtube') {
-                    setTimeout(function () { get_youtube_comments(retries - 1); }, 1000);
-                } else {
-                    comments.innerHTML = '';
-                }
-            }
+    
+    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) {
+            comments.innerHTML = ' \
+            <div> \
+                <h3> \
+                    <a href="javascript:void(0)">[ − ]</a> \
+                    {commentsText}  \
+                </h3> \
+                <b> \
+                    <a href="javascript:void(0)" data-comments="reddit"> \
+                        {redditComments} \
+                    </a> \
+                </b> \
+            </div> \
+            <div>{contentHtml}</div> \
+            <hr>'.supplant({
+                contentHtml: response.contentHtml,
+                redditComments: video_data.reddit_comments_text,
+                commentsText: video_data.comments_text.supplant(
+                    { commentCount: number_with_separator(response.commentCount) }
+                )
+            });
+
+            comments.children[0].children[0].children[0].onclick = toggle_comments;
+            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;
         }
-    };
-
-    xhr.onerror = function () {
-        comments.innerHTML =
-            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-        console.warn('Pulling comments failed... ' + retries + '/5');
-        setTimeout(function () { get_youtube_comments(retries - 1); }, 1000);
-    };
-
-    xhr.ontimeout = function () {
-        comments.innerHTML =
-            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-        console.warn('Pulling comments failed... ' + retries + '/5');
-        get_youtube_comments(retries - 1);
-    };
-
-    xhr.send();
+    });
 }
 
 function get_youtube_replies(target, load_more, load_replies) {
@@ -368,91 +271,72 @@ function get_youtube_replies(target, load_more, load_replies) {
 
     var body = target.parentNode.parentNode;
     var fallback = body.innerHTML;
-    body.innerHTML =
-        '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+    body.innerHTML = spinnerHTML;
 
     var url = '/api/v1/comments/' + video_data.id +
         '?format=html' +
         '&hl=' + video_data.preferences.locale +
         '&thin_mode=' + video_data.preferences.thin_mode +
         '&continuation=' + continuation;
-    if (load_replies) {
-        url += '&action=action_get_comment_replies';
-    }
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', url, true);
-
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-                if (load_more) {
-                    body = body.parentNode.parentNode;
-                    body.removeChild(body.lastElementChild);
-                    body.innerHTML += xhr.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.innerText = video_data.hide_replies_text;
-
-                    var div = document.createElement('div');
-                    div.innerHTML = xhr.response.contentHtml;
-
-                    body.appendChild(p);
-                    body.appendChild(div);
-                }
+    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.innerHTML += response.contentHtml;
             } else {
-                body.innerHTML = fallback;
-            }
-        }
-    };
+                body.removeChild(body.lastElementChild);
+
+                var p = document.createElement('p');
+                var a = document.createElement('a');
+                p.appendChild(a);
 
-    xhr.ontimeout = function () {
-        console.warn('Pulling comments failed.');
-        body.innerHTML = fallback;
-    };
+                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;
 
-    xhr.send();
+                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;    
+        }
+    });
 }
 
 if (video_data.play_next) {
     player.on('ended', function () {
         var url = new URL('https://example.com/watch?v=' + video_data.next_video);
 
-        if (video_data.params.autoplay || video_data.params.continue_autoplay) {
+        if (video_data.params.autoplay || video_data.params.continue_autoplay)
             url.searchParams.set('autoplay', '1');
-        }
-
-        if (video_data.params.listen !== video_data.preferences.listen) {
+        if (video_data.params.listen !== video_data.preferences.listen)
             url.searchParams.set('listen', video_data.params.listen);
-        }
-
-        if (video_data.params.speed !== video_data.preferences.speed) {
+        if (video_data.params.speed !== video_data.preferences.speed)
             url.searchParams.set('speed', video_data.params.speed);
-        }
-
-        if (video_data.params.local !== video_data.preferences.local) {
+        if (video_data.params.local !== video_data.preferences.local)
             url.searchParams.set('local', video_data.params.local);
-        }
-
         url.searchParams.set('continue', '1');
+
         location.assign(url.pathname + url.search);
     });
 }
 
-window.addEventListener('load', function (e) {
-    if (video_data.plid) {
+addEventListener('load', function (e) {
+    if (video_data.plid)
         get_playlist(video_data.plid);
-    }
 
     if (video_data.params.comments[0] === 'youtube') {
         get_youtube_comments();