Fix bugs deleting all saved time entries use ResumeManager class

The first one is a stupid mistake due to the fact I was only testing with one
video at a time, so I didn't notice that the first item of the list was getting
deleted if the entry wasn't found.

The second one: I didn't like the `setInterval`, because I couldn't stop it, but
I didn't think of another solution first. Now the function calls itself with a
`setTimeout`, only when it knows the video hasn't ended yet — no infinite calls
anymore. And each time we get a new video, we `runResume()`, whith the
ResumeManager class handling the preferences.

This code can clearly be improved, but bug's fixed.

extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "PeerTubeify",
-  "version": "0.5.1",
+  "version": "0.5.1.1",
   "description": "On YouTube, displays a link to the same video on PeerTube, if it exists.",
   "homepage_url": "https://gitlab.com/Ealhad/peertubeify",
   "icons": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "peertubeify",
-  "version": "0.5.1",
+  "version": "0.5.1a",
   "description": "PeerTubeify is a browser extension to help discovering which YouTube videos are also available on PeerTube.",
   "main": "webpack.config.js",
   "dependencies": {},

src/peertube.ts

@@ -19,7 +19,7 @@ import * as browser from 'webextension-polyfill';
 
 import { htmlToElement, getPeertubeVideoURL } from './util';
 import { MessageKind, RedirectType } from './types';
-import { runResume } from './resume';
+import { ResumeManager } from './resume';
 import Preferences from './preferences';
 
 const thumbnailURL = (host, path) => `https://${host}${path}`;
@@ -60,22 +60,6 @@ async function peertubeify() {
     }
 }
 
-const throttledPeertubeify = _.throttle(1000, peertubeify);
-const observer = new MutationObserver(function(mutationsList) {
-    for (const mutation of mutationsList) {
-        if ((mutation.target as Element).id == 'video-element-wrapper') {
-            throttledPeertubeify();
-            runResume();
-        }
-    }
-});
-runResume();
-
-observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-})
-
 const videoLink = (url, video) => htmlToElement(`
 <div id="${LINK_ID}"
   style="
@@ -133,3 +117,24 @@ function removeVideoLink() {
     const existingLink = document.getElementById(LINK_ID);
     existingLink && existingLink.remove();
 }
+
+(async function () {
+    const resumeManager = await ResumeManager.create();
+
+    const throttledPeertubeify = _.throttle(1000, peertubeify);
+    const observer = new MutationObserver(function(mutationsList) {
+        for (const mutation of mutationsList) {
+            console.log('peertubeify ' + (mutation.target as Element).id)
+            if ((mutation.target as Element).id == 'video-element-wrapper') {
+                throttledPeertubeify();
+                resumeManager.resume()
+            }
+        }
+    });
+    resumeManager.start();
+
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+})();

src/resume.ts

@@ -7,17 +7,37 @@ interface VideoEntry {
     currentTime: number,
 }
 
-export async function runResume() {
+export class ResumeManager {
+    private shouldResume: boolean
+
+    constructor (shouldResume) {
+        this.shouldResume = shouldResume;
+    }
+
+    resume() {
+        if (!this.shouldResume) {
+            return;
+        }
+
+        resumeVideo();
+    }
+
+    start() {
+        window.setInterval(updateStorage, 1000)
+    }
+
+    static async create() {
         const prefs = await Preferences.getPreferences();
-
+        return new ResumeManager(prefs.resumeUncompletedVideo);
-    if (prefs.resumeUncompletedVideo) {
-        const videoElement = document.getElementById('vjs_video_3_html5_api') as HTMLVideoElement;
-        resumeVideo(videoElement);
-        window.setInterval(() => updateStorage(videoElement), 1000);
     }
 }
 
-async function resumeVideo(videoElement: HTMLVideoElement) {
+function getVideoElement () {
+    return document.getElementById('vjs_video_3_html5_api') as HTMLVideoElement;
+}
+
+async function resumeVideo() {
+    const videoElement = getVideoElement();
     const storage = await browser.storage.local.get('uncompletedVideos');
     const uncompletedVideos: Array<VideoEntry> = storage.uncompletedVideos;
     const uuid = _.last(_.split('/', location.href));
@@ -27,10 +47,13 @@ async function resumeVideo(videoElement: HTMLVideoElement) {
     if (savedEntry) {
         videoElement.currentTime = savedEntry.currentTime;
         browser.storage.local.set({ uncompletedVideos });
+    } else {
+        window.setTimeout(resumeVideo, 1000);
     }
 }
 
-async function updateStorage(videoElement: HTMLVideoElement) {
+async function updateStorage() {
+    const videoElement = getVideoElement();
     const storage = await browser.storage.local.get('uncompletedVideos');
     const uuid = _.last(_.split('/', location.href));
 
@@ -50,7 +73,10 @@ async function updateStorage(videoElement: HTMLVideoElement) {
             uncompletedVideos.push(entry);
         }
     } else {
-        uncompletedVideos.splice(_.findIndex((e: VideoEntry) => e.uuid == uuid, uncompletedVideos), 1);
+        const index = _.findIndex((e: VideoEntry) => e.uuid == uuid, uncompletedVideos);
+        if (index !== -1) {
+            uncompletedVideos.splice(index, 1);
+        }
     }
 
     browser.storage.local.set({ uncompletedVideos });