Add Preferences class to handle localStorage

src/background.ts

@@ -18,7 +18,7 @@ import * as _ from 'lodash/fp';
 import * as browser from 'webextension-polyfill';
 
 import { MessageKind } from './types';
-import { constants } from './constants';
+import constants from './constants';
 
 const buildSearchByNameURL = (instance: string, query: string): string => `https://${instance}/api/v1/search/videos?search=${encodeURIComponent(query)}`;
 
@@ -45,7 +45,7 @@ const searchByID = id => new Promise(async (resolve, reject) => {
 
     fetch(buildSearchByIDURL(instance, id))
         .then(res => res.json())
-    .then(function (video) {
+        .then(function(video) {
             resolve({ url: `https://${instance}/videos/watch/${id}`, video });
         })
 })

src/constants.ts

@@ -1,3 +1,3 @@
-export const constants = {
+export default {
   defaultInstance: 'peertube.social'
 };

src/options.ts

@@ -16,8 +16,7 @@
 
 import * as _ from 'lodash/fp';
 import * as browser from 'webextension-polyfill';
-
-import { constants } from './constants';
+import Preferences from './preferences'
 
 function id(id: string): Element { return document.getElementById(id); }
 
@@ -25,24 +24,18 @@ const searchInstance = () => id('search-instance') as HTMLInputElement;
 const openInOriginalInstance = () => id('open-in-original-instance') as HTMLInputElement;
 const showOnPeertube = () => id('show-on-peertube') as HTMLInputElement;
 
-function saveOptions(e) {
+Preferences.getPreferences().then(preferences => {
+    searchInstance().value = preferences.searchInstance;
+    openInOriginalInstance().checked = preferences.openInOriginalInstance;
+    showOnPeertube().checked = preferences.showOnPeertube;
+
+    function saveOptions(e) {
         e.preventDefault();
-  browser.storage.local.set({
-    searchInstance: _.defaultTo(constants.defaultInstance, stripProtocol(searchInstance().value)),
-    openInOriginalInstance: _.defaultTo(true, openInOriginalInstance().checked),
-    showOnPeertube: _.defaultTo(false, showOnPeertube().checked),
-  });
-}
+        preferences.searchInstance = searchInstance().value;
+        preferences.openInOriginalInstance = openInOriginalInstance().checked;
+        preferences.showOnPeertube = showOnPeertube().checked;
+        preferences.save();
+    }
 
-const stripProtocol = _.replace(/^https?:\/\//, '');
-
-function restoreOptions() {
-  browser.storage.local.get().then(result => {
-    searchInstance().value = _.defaultTo(constants.defaultInstance, result.searchInstance as string);
-    openInOriginalInstance().checked = _.defaultTo(true, result.openInOriginalInstance as boolean);
-    showOnPeertube().checked = _.defaultTo(false, result.showOnPeertube as boolean);
-  })
-}
-
-document.addEventListener('DOMContentLoaded', restoreOptions);
-document.querySelector('form').addEventListener('submit', saveOptions);
+    document.querySelector('form').addEventListener('submit', saveOptions);
+})

src/peertube.ts

@@ -19,7 +19,7 @@ import * as browser from 'webextension-polyfill';
 
 import { htmlToElement } from './util';
 import { MessageKind } from './types';
-import { constants } from './constants';
+import Preferences from './preferences';
 
 const watchURL = (host, uuid) => `https://${host}/videos/watch/${uuid}`;
 const thumbnailURL = (host, path) => `https://${host}${path}`;
@@ -27,17 +27,16 @@ const thumbnailURL = (host, path) => `https://${host}${path}`;
 const LINK_ID = 'peertube-link';
 
 async function peertubeify() {
-  const options = await browser.storage.local.get();
-  const showOnPeertube = _.getOr(false, 'showOnPeertube', options);
-  const preferredInstance = _.getOr(constants.defaultInstance, 'searchInstance', options);
-  const isPreferredInstance = _.equals(preferredInstance, location.hostname)
-  if (showOnPeertube && !isPreferredInstance) {
+    const prefs = await Preferences.getPreferences()
+
+    const isPreferredInstance = _.equals(prefs.searchInstance, location.hostname)
+    if (prefs.showOnPeertube && !isPreferredInstance) {
         const id = _.last(_.split('/', location.href));
 
         browser.runtime.sendMessage({
             kind: MessageKind.SearchByID,
             id
-    }).then(async ({video, url}) => {
+        }).then(async ({ video, url }) => {
             const link = videoLink(url, video);
 
             removeVideoLink();
@@ -49,7 +48,7 @@ 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') {
+        if ((mutation.target as Element).id == 'video-element-wrapper') {
             throttledPeertubeify();
         }
     }

src/preferences.ts

@@ -0,0 +1,55 @@
+/* This file is part of PeerTubeify.
+ *
+ * PeerTubeify is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option) any later
+ * version.
+ *
+ * PeerTubeify is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * PeerTubeify. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import * as _ from 'lodash/fp';
+import * as browser from 'webextension-polyfill';
+import constants from './constants'
+
+const stripProtocol = _.replace(/^https?:\/\//, '');
+
+export default class Preferences {
+    private _searchInstance: string;
+    openInOriginalInstance: boolean;
+    showOnPeertube: boolean;
+
+    constructor(localStorage) {
+        this.searchInstance = _.defaultTo(constants.defaultInstance, localStorage.searchInstance as string);
+        this.openInOriginalInstance = _.defaultTo(true, localStorage.openInOriginalInstance as boolean);
+        this.showOnPeertube = _.defaultTo(false, localStorage.showOnPeertube as boolean);
+    }
+
+    static async getPreferences() {
+        const localStorage = await browser.storage.local.get();
+        return new Preferences(localStorage);
+    }
+
+    async save() {
+        await browser.storage.local.set({
+            searchInstance: this.searchInstance,
+            openInOriginalInstance: this.openInOriginalInstance,
+            showOnPeertube: this.showOnPeertube,
+        })
+        const prefs = await browser.storage.local.get()
+    }
+
+    get searchInstance() {
+        return this._searchInstance;
+    }
+
+    set searchInstance(instance) {
+        this._searchInstance = _.isEmpty(instance) ? constants.defaultInstance : stripProtocol(instance)
+    }
+}

src/youtube.ts

@@ -19,7 +19,7 @@ import * as browser from 'webextension-polyfill';
 
 import { htmlToElement } from './util';
 import { MessageKind } from './types';
-import { constants } from './constants';
+import Preferences from './preferences'
 
 const watchURL = (host, uuid) => `https://${host}/videos/watch/${uuid}`;
 const thumbnailURL = (host, path) => `https://${host}${path}`;
@@ -31,11 +31,9 @@ function peertubeify(query: string) {
         kind: MessageKind.SearchByName,
         query,
     }).then(async video => {
-    const options = await browser.storage.local.get();
-    const openInOriginalInstance = _.getOr(true, 'openInOriginalInstance', options);
-    const searchInstance = _.getOr(constants.defaultInstance, 'searchInstance', options);
+        const prefs = await Preferences.getPreferences();
 
-    const url = watchURL(openInOriginalInstance ? video.account.host : searchInstance, video.uuid);
+        const url = watchURL(prefs.openInOriginalInstance ? video.account.host : prefs.searchInstance, video.uuid);
         const link = videoLink(url, video);
 
         removeVideoLink();