Add support for Web notifications

assets/js/embed.js

@@ -1,4 +1,4 @@
-function get_playlist(plid, timeouts = 0) {
+function get_playlist(plid, timeouts) {
     if (timeouts > 10) {
         console.log('Failed to pull playlist');
         return;
@@ -53,7 +53,7 @@ function get_playlist(plid, timeouts = 0) {
 
     xhr.ontimeout = function () {
         console.log('Pulling playlist timed out.');
-        get_playlist(plid, timeouts + 1);
+        get_playlist(plid, timeouts++);
     }
 }
 

assets/js/notifications.js

@@ -0,0 +1,139 @@
+var notifications, delivered;
+
+function get_subscriptions(callback, failures) {
+    if (failures >= 10) {
+        return
+    }
+
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.timeout = 20000;
+    xhr.open('GET', '/api/v1/auth/subscriptions', true);
+    xhr.send(null);
+
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                subscriptions = xhr.response;
+                callback(subscriptions);
+            } else {
+                console.log('Pulling subscriptions failed... ' + failures + '/10');
+                get_subscriptions(callback, failures++)
+            }
+        }
+    }
+
+    xhr.ontimeout = function () {
+        console.log('Pulling subscriptions failed... ' + failures + '/10');
+        get_subscriptions(callback, failures++);
+    }
+}
+
+function create_notification_stream(subscriptions) {
+    notifications = new SSE(
+        '/api/v1/auth/notifications?fields=videoId,title,author,authorId,publishedText,published,authorThumbnails,liveNow', {
+            withCredentials: true,
+            payload: 'topics=' + subscriptions.map(function (subscription) { return subscription.authorId }).join(','),
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+        });
+    delivered = [];
+
+    var start_time = Math.round(new Date() / 1000);
+
+    notifications.onmessage = function (event) {
+        if (!event.id) {
+            return
+        }
+
+        var notification = JSON.parse(event.data);
+        console.log('Got notification:', notification);
+
+        if (start_time < notification.published && !delivered.includes(notification.videoId)) {
+            if (Notification.permission === 'granted') {
+                var system_notification =
+                    new Notification((notification.liveNow ? notification_data.live_now_text : notification_data.upload_text).replace('`x`', notification.author), {
+                        body: notification.title,
+                        icon: '/ggpht' + new URL(notification.authorThumbnails[2].url).pathname,
+                        img: '/ggpht' + new URL(notification.authorThumbnails[4].url).pathname,
+                        tag: notification.videoId
+                    });
+
+                system_notification.onclick = function (event) {
+                    window.open('/watch?v=' + event.currentTarget.tag, '_blank');
+                }
+            }
+
+            delivered.push(notification.videoId);
+            localStorage.setItem('notification_count', parseInt(localStorage.getItem('notification_count') || '0') + 1);
+            var notification_ticker = document.getElementById('notification_ticker');
+
+            if (parseInt(localStorage.getItem('notification_count')) > 0) {
+                notification_ticker.innerHTML =
+                    '<span id="notification_count">' + localStorage.getItem('notification_count') + '</span> <i class="icon ion-ios-notifications"></i>';
+            } else {
+                notification_ticker.innerHTML =
+                    '<i class="icon ion-ios-notifications-outline"></i>';
+            }
+        }
+    }
+
+    notifications.onerror = function (event) {
+        console.log('Something went wrong with notifications, trying to reconnect...');
+        notifications.close();
+        get_subscriptions(create_notification_stream);
+    }
+
+    notifications.ontimeout = function (event) {
+        console.log('Something went wrong with notifications, trying to reconnect...');
+        notifications.close();
+        get_subscriptions(create_notification_stream);
+    }
+
+    notifications.stream();
+}
+
+window.addEventListener('storage', function (e) {
+    if (e.key === 'stream' && !e.newValue) {
+        if (notifications) {
+            localStorage.setItem('stream', true);
+        } else {
+            setTimeout(function () {
+                if (!localStorage.getItem('stream')) {
+                    get_subscriptions(create_notification_stream);
+                    localStorage.setItem('stream', true);
+                }
+            }, Math.random() * 1000 + 10);
+        }
+    } else if (e.key === 'notification_count') {
+        var notification_ticker = document.getElementById('notification_ticker');
+
+        if (parseInt(e.newValue) > 0) {
+            notification_ticker.innerHTML =
+                '<span id="notification_count">' + e.newValue + '</span> <i class="icon ion-ios-notifications"></i>';
+        } else {
+            notification_ticker.innerHTML =
+                '<i class="icon ion-ios-notifications-outline"></i>';
+        }
+    }
+});
+
+window.addEventListener('load', function (e) {
+    localStorage.setItem('notification_count', document.getElementById('notification_count') ? document.getElementById('notification_count').innerText : '0');
+
+    if (localStorage.getItem('stream')) {
+        localStorage.removeItem('stream');
+    } else {
+        setTimeout(function () {
+            if (!localStorage.getItem('stream')) {
+                get_subscriptions(create_notification_stream);
+                localStorage.setItem('stream', true);
+            }
+        }, Math.random() * 1000 + 10);
+    }
+});
+
+window.addEventListener('unload', function (e) {
+    if (notifications) {
+        localStorage.removeItem('stream');
+    }
+});

assets/js/sse.js

@@ -0,0 +1,200 @@
+/**
+ * Copyright (C) 2016 Maxime Petazzoni <maxime.petazzoni@bulix.org>.
+ * All rights reserved.
+ */
+
+var SSE = function (url, options) {
+  if (!(this instanceof SSE)) {
+    return new SSE(url, options);
+  }
+
+  this.INITIALIZING = -1;
+  this.CONNECTING = 0;
+  this.OPEN = 1;
+  this.CLOSED = 2;
+
+  this.url = url;
+
+  options = options || {};
+  this.headers = options.headers || {};
+  this.payload = options.payload !== undefined ? options.payload : '';
+  this.method = options.method || (this.payload && 'POST' || 'GET');
+
+  this.FIELD_SEPARATOR = ':';
+  this.listeners = {};
+
+  this.xhr = null;
+  this.readyState = this.INITIALIZING;
+  this.progress = 0;
+  this.chunk = '';
+
+  this.addEventListener = function(type, listener) {
+    if (this.listeners[type] === undefined) {
+      this.listeners[type] = [];
+    }
+
+    if (this.listeners[type].indexOf(listener) === -1) {
+      this.listeners[type].push(listener);
+    }
+  };
+
+  this.removeEventListener = function(type, listener) {
+    if (this.listeners[type] === undefined) {
+      return;
+    }
+
+    var filtered = [];
+    this.listeners[type].forEach(function(element) {
+      if (element !== listener) {
+        filtered.push(element);
+      }
+    });
+    if (filtered.length === 0) {
+      delete this.listeners[type];
+    } else {
+      this.listeners[type] = filtered;
+    }
+  };
+
+  this.dispatchEvent = function(e) {
+    if (!e) {
+      return true;
+    }
+
+    e.source = this;
+
+    var onHandler = 'on' + e.type;
+    if (this.hasOwnProperty(onHandler)) {
+      this[onHandler].call(this, e);
+      if (e.defaultPrevented) {
+        return false;
+      }
+    }
+
+    if (this.listeners[e.type]) {
+      return this.listeners[e.type].every(function(callback) {
+        callback(e);
+        return !e.defaultPrevented;
+      });
+    }
+
+    return true;
+  };
+
+  this._setReadyState = function (state) {
+    var event = new CustomEvent('readystatechange');
+    event.readyState = state;
+    this.readyState = state;
+    this.dispatchEvent(event);
+  };
+
+  this._onStreamFailure = function(e) {
+    this.dispatchEvent(new CustomEvent('error'));
+    this.close();
+  }
+
+  this._onStreamProgress = function(e) {
+    if (this.xhr.status !== 200) {
+      this._onStreamFailure(e);
+      return;
+    }
+
+    if (this.readyState == this.CONNECTING) {
+      this.dispatchEvent(new CustomEvent('open'));
+      this._setReadyState(this.OPEN);
+    }
+
+    var data = this.xhr.responseText.substring(this.progress);
+    this.progress += data.length;
+    data.split(/(\r\n|\r|\n){2}/g).forEach(function(part) {
+      if (part.trim().length === 0) {
+        this.dispatchEvent(this._parseEventChunk(this.chunk.trim()));
+        this.chunk = '';
+      } else {
+        this.chunk += part;
+      }
+    }.bind(this));
+  };
+
+  this._onStreamLoaded = function(e) {
+    this._onStreamProgress(e);
+
+    // Parse the last chunk.
+    this.dispatchEvent(this._parseEventChunk(this.chunk));
+    this.chunk = '';
+  };
+
+  /**
+   * Parse a received SSE event chunk into a constructed event object.
+   */
+  this._parseEventChunk = function(chunk) {
+    if (!chunk || chunk.length === 0) {
+      return null;
+    }
+
+    var e = {'id': null, 'retry': null, 'data': '', 'event': 'message'};
+    chunk.split(/\n|\r\n|\r/).forEach(function(line) {
+      line = line.trimRight();
+      var index = line.indexOf(this.FIELD_SEPARATOR);
+      if (index <= 0) {
+        // Line was either empty, or started with a separator and is a comment.
+        // Either way, ignore.
+        return;
+      }
+
+      var field = line.substring(0, index);
+      if (!(field in e)) {
+        return;
+      }
+
+      var value = line.substring(index + 1).trimLeft();
+      if (field === 'data') {
+        e[field] += value;
+      } else {
+        e[field] = value;
+      }
+    }.bind(this));
+
+    var event = new CustomEvent(e.event);
+    event.data = e.data;
+    event.id = e.id;
+    return event;
+  };
+
+  this._checkStreamClosed = function() {
+    if (this.xhr.readyState === XMLHttpRequest.DONE) {
+      this._setReadyState(this.CLOSED);
+    }
+  };
+
+  this.stream = function() {
+    this._setReadyState(this.CONNECTING);
+
+    this.xhr = new XMLHttpRequest();
+    this.xhr.addEventListener('progress', this._onStreamProgress.bind(this));
+    this.xhr.addEventListener('load', this._onStreamLoaded.bind(this));
+    this.xhr.addEventListener('readystatechange', this._checkStreamClosed.bind(this));
+    this.xhr.addEventListener('error', this._onStreamFailure.bind(this));
+    this.xhr.addEventListener('abort', this._onStreamFailure.bind(this));
+    this.xhr.open(this.method, this.url);
+    for (var header in this.headers) {
+      this.xhr.setRequestHeader(header, this.headers[header]);
+    }
+    this.xhr.send(this.payload);
+  };
+
+  this.close = function() {
+    if (this.readyState === this.CLOSED) {
+      return;
+    }
+
+    this.xhr.abort();
+    this.xhr = null;
+    this._setReadyState(this.CLOSED);
+  };
+};
+
+// Export our SSE module for npm.js
+if (typeof exports !== 'undefined') {
+  exports.SSE = SSE;
+}

assets/js/subscribe_widget.js

@@ -7,8 +7,8 @@ if (subscribe_button.getAttribute('data-type') === 'subscribe') {
     subscribe_button.onclick = unsubscribe;
 }
 
-function subscribe(timeouts = 0) {
-    if (timeouts > 10) {
+function subscribe(timeouts) {
+    if (timeouts >= 10) {
         console.log('Failed to subscribe.');
         return;
     }
@@ -37,12 +37,12 @@ function subscribe(timeouts = 0) {
 
     xhr.ontimeout = function () {
         console.log('Subscribing timed out.');
-        subscribe(timeouts + 1);
+        subscribe(timeouts++);
     }
 }
 
-function unsubscribe(timeouts = 0) {
-    if (timeouts > 10) {
+function unsubscribe(timeouts) {
+    if (timeouts >= 10) {
         console.log('Failed to subscribe');
         return;
     }
@@ -71,6 +71,6 @@ function unsubscribe(timeouts = 0) {
 
     xhr.ontimeout = function () {
         console.log('Unsubscribing timed out.');
-        unsubscribe(timeouts + 1);
+        unsubscribe(timeouts++);
     }
 }

locales/ar.json

@@ -85,6 +85,9 @@
     "Only show latest unwatched video from channel: ": "فقط اظهر اخر فيديو لم يتم رؤيتة من القناة: ",
     "Only show unwatched: ": "فقط اظهر الذى لم يتم رؤيتة: ",
     "Only show notifications (if there are any): ": "إظهار الإشعارات فقط (إذا كان هناك أي): ",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "إعدادات التفضيلات",
     "Clear watch history": "حذف سجل المشاهدة",
     "Import/export data": "إضافة\\إستخراج البيانات",

locales/de.json

@@ -85,6 +85,9 @@
     "Only show latest unwatched video from channel: ": "Nur neueste ungesehene Videos des Kanals anzeigen: ",
     "Only show unwatched: ": "Nur ungesehene anzeigen: ",
     "Only show notifications (if there are any): ": "Nur Benachrichtigungen anzeigen (wenn es welche gibt): ",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "Dateneinstellungen",
     "Clear watch history": "Verlauf löschen",
     "Import/export data": "Daten im- exportieren",

locales/el.json

@@ -91,6 +91,9 @@
     "Only show latest unwatched video from channel: ": "Προβολή μόνο του τελευταίου μη-προβεβλημένου βίντεο του καναλιού: ",
     "Only show unwatched: ": "Προβολή μόνο μη-προβεβλημένων: ",
     "Only show notifications (if there are any): ": "Προβολή μόνο ειδοποιήσεων (αν υπάρχουν): ",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "Προτιμήσεις δεδομένων",
     "Clear watch history": "Εκκαθάριση ιστορικού προβολής",
     "Import/export data": "Εισαγωγή/εξαγωγή δεδομένων",

locales/en-US.json

@@ -91,6 +91,9 @@
     "Only show latest unwatched video from channel: ": "Only show latest unwatched video from channel: ",
     "Only show unwatched: ": "Only show unwatched: ",
     "Only show notifications (if there are any): ": "Only show notifications (if there are any): ",
+    "Enable web notifications": "Enable web notifications",
+    "`x` uploaded a video": "`x` uploaded a video",
+    "`x` is live": "`x` is live",
     "Data preferences": "Data preferences",
     "Clear watch history": "Clear watch history",
     "Import/export data": "Import/export data",

locales/eo.json

@@ -85,6 +85,9 @@
     "Only show latest unwatched video from channel: ": "Nur montri pli novan malviditan videon el kanalo: ",
     "Only show unwatched: ": "Nur montri malviditajn: ",
     "Only show notifications (if there are any): ": "Nur montri sciigojn (se estas): ",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "Datumagordoj",
     "Clear watch history": "Forigi vidohistorion",
     "Import/export data": "Importi/Eksporti datumojn",

locales/es.json

@@ -85,6 +85,9 @@
     "Only show latest unwatched video from channel: ": "Mostrar solo el último vídeo sin ver del canal: ",
     "Only show unwatched: ": "Mostrar solo los no vistos: ",
     "Only show notifications (if there are any): ": "Mostrar solo notificaciones (si hay alguna): ",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "Preferencias de los datos",
     "Clear watch history": "Borrar el historial de reproducción",
     "Import/export data": "Importar/Exportar datos",

locales/eu.json

@@ -85,6 +85,9 @@
     "Only show latest unwatched video from channel: ": "",
     "Only show unwatched: ": "",
     "Only show notifications (if there are any): ": "",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "",
     "Clear watch history": "",
     "Import/export data": "",

locales/fr.json

@@ -85,6 +85,9 @@
     "Only show latest unwatched video from channel: ": "Afficher uniquement la dernière vidéo de la chaîne non regardée : ",
     "Only show unwatched: ": "Afficher uniquement les vidéos non regardées : ",
     "Only show notifications (if there are any): ": "Afficher uniquement les notifications (s'il y en a) : ",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "Préférences liées aux données",
     "Clear watch history": "Supprimer l'historique des vidéos regardées",
     "Import/export data": "Importer/exporter les données",

locales/it.json

@@ -85,6 +85,9 @@
     "Only show latest unwatched video from channel: ": "Mostra solo il video più recente non guardato del canale: ",
     "Only show unwatched: ": "Mostra solo i video non guardati: ",
     "Only show notifications (if there are any): ": "Mostra solo le notifiche (se presenti): ",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "Preferenze dati",
     "Clear watch history": "Cancella la cronologia dei video guardati",
     "Import/export data": "Importazione/esportazione dati",

locales/nb_NO.json

@@ -85,6 +85,9 @@
     "Only show latest unwatched video from channel: ": "Kun vis siste usette video fra kanal: ",
     "Only show unwatched: ": "Kun vis usette: ",
     "Only show notifications (if there are any): ": "Kun vis merknader (hvis det er noen): ",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "Datainnstillinger",
     "Clear watch history": "Tøm visningshistorikk",
     "Import/export data": "Importer/eksporter data",

locales/nl.json

@@ -85,6 +85,9 @@
     "Only show latest unwatched video from channel: ": "Alleen nieuwste niet-bekeken video van kanaal tonen: ",
     "Only show unwatched: ": "Alleen niet-bekeken videos tonen: ",
     "Only show notifications (if there are any): ": "Alleen meldingen tonen (als die er zijn): ",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "Gegevensinstellingen",
     "Clear watch history": "Kijkgeschiedenis wissen",
     "Import/export data": "Gegevens im-/exporteren",

locales/pl.json

@@ -85,6 +85,9 @@
     "Only show latest unwatched video from channel: ": "Pokazuj tylko najnowszy nie obejrzany film z kanału: ",
     "Only show unwatched: ": "Pokazuj tylko nie obejrzane: ",
     "Only show notifications (if there are any): ": "Pokazuj tylko powiadomienia (jeśli są): ",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "Preferencje danych",
     "Clear watch history": "Wyczyść historię",
     "Import/export data": "Import/Eksport danych",

locales/ru.json

@@ -85,6 +85,9 @@
     "Only show latest unwatched video from channel: ": "Показывать только непросмотренные видео с каналов: ",
     "Only show unwatched: ": "Показывать только непросмотренные видео: ",
     "Only show notifications (if there are any): ": "Показывать только оповещения, если они есть: ",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "Настройки данных",
     "Clear watch history": "Очистить историю просмотров",
     "Import/export data": "Импорт/Экспорт данных",

locales/uk.json

@@ -85,6 +85,9 @@
     "Only show latest unwatched video from channel: ": "Показувати тільки непереглянуті відео з каналів: ",
     "Only show unwatched: ": "Показувати тільки непереглянуті відео: ",
     "Only show notifications (if there are any): ": "Показувати лише сповіщення, якщо вони є: ",
+    "Enable web notifications": "",
+    "`x` uploaded a video": "",
+    "`x` is live": "",
     "Data preferences": "Налаштування даних",
     "Clear watch history": "Очистити історію переглядів",
     "Import/export data": "Імпорт і експорт даних",

src/invidious/views/licenses.ecr

@@ -23,6 +23,20 @@
             </td>
         </tr>
 
+        <tr>
+            <td>
+                <a href="/js/notifications.js?v=<%= ASSET_COMMIT %>">notifications.js</a>
+            </td>
+
+            <td>
+                <a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0</a>
+            </td>
+
+            <td>
+                <a href="/js/notifications.js?v=<%= ASSET_COMMIT %>"><%= translate(locale, "source") %></a>
+            </td>
+        </tr>
+
         <tr>
             <td>
                 <a href="/js/player.js?v=<%= ASSET_COMMIT %>">player.js</a>
@@ -51,6 +65,20 @@
             </td>
         </tr>
 
+        <tr>
+            <td>
+                <a href="/js/sse.js?v=<%= ASSET_COMMIT %>">sse.js</a>
+            </td>
+
+            <td>
+                <a href="http://www.jclark.com/xml/copying.txt">Expat</a>
+            </td>
+
+            <td>
+                <a href="https://github.com/mpetazzoni/sse.js"><%= translate(locale, "source") %></a>
+            </td>
+        </tr>
+
         <tr>
             <td>
                 <a href="/js/subscribe_widget.js?v=<%= ASSET_COMMIT %>">subscribe_widget.js</a>

src/invidious/views/preferences.ecr

@@ -165,6 +165,13 @@ function update_value(element) {
                     <label for="notifications_only"><%= translate(locale, "Only show notifications (if there are any): ") %></label>
                     <input name="notifications_only" id="notifications_only" type="checkbox" <% if preferences.notifications_only %>checked<% end %>>
                 </div>
+
+                <% # Conditions for supporting web notifications %>
+                <% if CONFIG.use_pubsub_feeds && (Kemal.config.ssl || config.https_only) %>
+                    <div class="pure-control-group">
+                        <a href="#" onclick="Notification.requestPermission()"><%= translate(locale, "Enable web notifications") %></a>
+                    </div>
+                <% end %>
             <% end %>
 
             <% if env.get?("user") && config.admins.includes? env.get?("user").as(User).email %>

src/invidious/views/template.ecr

@@ -51,10 +51,10 @@
                             </a>
                         </div>
                         <div class="pure-u-1-4">
-                            <a title="<%= translate(locale, "Subscriptions") %>" href="/feed/subscriptions" class="pure-menu-heading">
+                            <a id="notification_ticker" title="<%= translate(locale, "Subscriptions") %>" href="/feed/subscriptions" class="pure-menu-heading">
                                 <% notification_count = env.get("user").as(User).notifications.size %>
                                 <% if notification_count > 0 %>
-                                    <%= notification_count %> <i class="icon ion-ios-notifications"></i>
+                                    <span id="notification_count"><%= notification_count %></span> <i class="icon ion-ios-notifications"></i>
                                 <% else %>
                                     <i class="icon ion-ios-notifications-outline"></i>
                                 <% end %>
@@ -151,6 +151,16 @@
         <div class="pure-u-1 pure-u-md-2-24"></div>
     </div>
     <script src="/js/themes.js?v=<%= ASSET_COMMIT %>"></script>
+    <% if env.get? "user" %>
+        <script src="/js/sse.js?v=<%= ASSET_COMMIT %>"></script>
+        <script>
+            var notification_data = {
+                upload_text: '<%= HTML.escape(translate(locale, "`x` uploaded a video")) %>',
+                live_upload_text: '<%= HTML.escape(translate(locale, "`x` is live")) %>',
+            }
+        </script>
+        <script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>
+    <% end %>
 </body>
 
 </html>