Multi tab compatibility.

.eslintrc.json

@@ -18,7 +18,7 @@
         "prettier/prettier": ["warn"],
         "one-var": ["off"],
         "no-unused-vars": "warn",
-        "no-console": "warn",
+        "no-console": ["warn", { "allow": ["warn", "error"] }],
         "no-restricted-syntax": "warn",
         "func-names":"off",
         "no-param-reassign": "off",

src/content.js

@@ -11,8 +11,6 @@ function setUpTimeouts(state) {
   const { joinTime } = state,
     joinTimeDateObj = getDateObject(joinTime);
 
-  console.log("setting up timeouts", { join: joinTimeDateObj });
-
   if (joinTime) {
     new Promise((resolve, reject) => {
       state.joinTimerId = setTimeout(() => {
@@ -33,7 +31,7 @@ function setUpTimeouts(state) {
         state.joinTimerId = 0;
       })
       .catch((e) => {
-        console.log(e);
+        console.error(e);
         state.joinTimerOn = false;
         state.joinTimerId = 0;
       });
@@ -50,8 +48,8 @@ function sendJoinInfo(e) {
       join: !!joinBtn,
     });
   sending.then(
-    (respone) => {
-      console.log("sent join info");
+    (response) => {
+      console.log("sent join info. response:", response);
     },
     (err) => console.error(err)
   );
@@ -65,8 +63,6 @@ function sendJoinInfo(e) {
   }
   window.hasRun = true;
 
-  console.log("contentscript");
-
   const state = {
     joinTime: 10,
     leaveThreshold: 0,
@@ -110,14 +106,11 @@ function sendJoinInfo(e) {
     state.leaveInitId = 0;
     state.leaveTimerOn = false;
     storeTimeoutIds(0);
-    console.log("All timeouts cleared");
   }
 
   browser.runtime.onMessage.addListener((recievedObj, sender, sendResponse) => {
     const { message, state: recievedState } = recievedObj;
-    console.log("hi");
     updateState(recievedState);
-    console.log("message recieved in content:", message);
     switch (message) {
       case "submit":
         onSubmit();
@@ -129,12 +122,10 @@ function sendJoinInfo(e) {
         break;
       case "updateWords":
         startSubtitleTimers(state);
-        console.log(state)
         break;
       default:
         console.log("message did not match: ", message);
     }
-    console.log("content", state);
     return Promise.resolve(state);
   });
 })();

src/helpers.js

@@ -5,16 +5,19 @@ export function getDateObject(timeObjectFromPicker) {
 
   if (hours !== 12) {
     hours += timeObjectFromPicker.amOrPm === "PM" ? 12 : 0;
-  }
-  if (timeObjectFromPicker.amOrPm === "AM" && hours === 12) hours = 0;
+  } else if (timeObjectFromPicker.amOrPm === "AM") hours = 0;
 
   date.setHours(hours, minutes, 0);
   return date;
 }
 
 export function to24hours(time) {
   let str24hr = "",
-    hours = time.hours + (time.amOrPm === "PM" ? 12 : 0);
+    { hours } = time;
+
+  if (hours !== 12) hours += time.amOrPm === "PM" ? 12 : 0;
+  else if (time.amOrPm === "AM") hours = 0;
+
   if (hours < 10) hours = `0${hours}`;
   const minutes = time.minutes < 10 ? `0${time.minutes}` : time.minutes;
   str24hr += `${hours}:${minutes}`;
@@ -23,12 +26,20 @@ export function to24hours(time) {
 
 export function convertToChipsData(dataArray) {
   const chipsData = [];
-  dataArray.forEach(word => chipsData.push({tag: word}));
+  dataArray.forEach((word) => chipsData.push({ tag: word }));
   return chipsData;
 }
 
 export function convertChipsData(chipsDataArray) {
   const data = [];
-  chipsDataArray.forEach(dataObj => data.push(dataObj.tag));
+  chipsDataArray.forEach((dataObj) => data.push(dataObj.tag));
   return data;
 }
+
+export function getPageURL() {
+  return browser.tabs
+    .query({ currentWindow: true, active: true })
+    .then((tabs) => {
+      return tabs[0].url;
+    });
+}

src/main.js

@@ -1,16 +1,16 @@
 import M from "materialize-css";
 import "materialize-css/dist/css/materialize.min.css";
 import "./index.css";
-import { convertChipsData, convertToChipsData, to24hours } from "./helpers";
-import "./checkbox";
+import {
+  convertChipsData,
+  convertToChipsData,
+  getDateObject,
+  getPageURL,
+  to24hours,
+} from "./helpers";
 import MChips from "./chips";
 
-import {
-  saveJoinTimeToStorage,
-  setUpSettingsFromStorage,
-  storeAlertWords,
-  storeLeaveThreshold,
-} from "./storage";
+import { setUpSettingsFromStorage, storeSettings } from "./storage";
 
 let state = {
   joinTime: 0,
@@ -24,9 +24,7 @@ let state = {
   subtitleTimerId: 0,
 };
 
-
 function handleJoinInfo(request, sender, sendResponse) {
-  console.log(request);
   if (!request.join) {
     document.getElementById("join").disabled = true;
     state.canJoin = false;
@@ -36,7 +34,7 @@ function handleJoinInfo(request, sender, sendResponse) {
 function toggleUI() {
   const leaveInput = document.getElementById("leave_threshold"),
     joinButton = document.getElementById("join");
-  if (state.submitReset == "reset") {
+  if (state.submitReset === "reset") {
     leaveInput.setAttribute("readonly", "");
     leaveInput.setAttribute("class", "dark_border");
     joinButton.setAttribute("disabled", "");
@@ -62,25 +60,23 @@ function changeResetToSubmit() {
   toggleUI();
 }
 function catchError(e) {
-  console.log(e);
+  console.error(e);
 }
 
-function success(recievedState) {
-  console.log("Submit success, storing times");
+function SubmitSuccess(recievedState) {
   updateState(recievedState);
-  console.log(state);
-  saveJoinTimeToStorage(state.joinTime);
+  getPageURL().then((url) => {
+    storeSettings(url, state.joinTime, state.leaveThreshold, state.alertWords);
+  });
   changeSubmitToReset();
 }
 
 function listenForSubmit() {
-  console.log("listen");
   function onSubmitResetClick() {
-    if (state.submitReset == "submit") onSubmitClick();
-    if (state.submitReset == "reset") onResetClick();
+    if (state.submitReset === "submit") onSubmitClick();
+    if (state.submitReset === "reset") onResetClick();
   }
   function clearAllTimeouts() {
-    console.log("initiating clear timouts in main");
     browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
       browser.tabs
         .sendMessage(tabs[0].id, { message: "clearAllTimeouts", state })
@@ -89,25 +85,23 @@ function listenForSubmit() {
     });
   }
   function onResetClick() {
+    browser.storage.local.remove("joinTime");
+    const joinTimeButton = document.querySelector(".timepicker");
+    joinTimeButton.innerHTML = "Join Time";
     clearAllTimeouts();
     changeResetToSubmit();
   }
   function onSubmitClick() {
-    console.log("onSubmit click");
-
     state.alertWords = getAlertWords();
     state.leaveThreshold = parseInt(
       document.getElementById("leave_threshold").value,
       10
     );
 
-    storeAlertWords(state.alertWords);
-    storeLeaveThreshold(state.leaveThreshold);
-
     browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
       browser.tabs
         .sendMessage(tabs[0].id, { message: "submit", state })
-        .then(success)
+        .then(SubmitSuccess)
         .catch(catchError);
     });
   }
@@ -119,10 +113,14 @@ let joinInstance;
 
 function setupTimepickers({ joinTime: joinTimeStored }) {
   let joinTimeStr;
-  if (joinTimeStored) {
+
+  // When this evaluate to true it mostly means join time button is blocked.
+  // When unblocked by clicking reset we delete the time object from storage.
+  //  This check is just to avoid inconsistencies in odd cases like reloading
+  // the extension while letting the time object stay in storage.
+  if (joinTimeStored && getDateObject(joinTimeStored) > new Date()) {
     state.joinTime = joinTimeStored;
     joinTimeStr = to24hours(joinTimeStored);
-    console.log(joinTimeStr, joinTimeStored);
   }
   const elems = document.querySelectorAll(".timepicker");
   joinInstance = M.Timepicker.init(elems[0], {
@@ -138,15 +136,14 @@ function setupTimepickers({ joinTime: joinTimeStored }) {
           "<div id='textContainer'><div class='left'>Join:</div><div id='joinSpan' class='right'></div></div>";
         const span = document.getElementById("joinSpan");
         span.innerHTML = this.time + this.amOrPm;
-        console.log("onClose", state.joinTime);
       }
     },
   });
   // todo: rewrite these functions
 }
 
 function setupChips(words) {
-  function onChipsModified(){
+  function onChipsModified() {
     state.alertWords = getAlertWords();
     storeAlertWords(state.alertWords);
     browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
@@ -162,10 +159,10 @@ function setupChips(words) {
     data: words,
     placeholder: "Enter alert words to get notified!",
     secondaryPlaceholder: "Alert word",
-    onChipAdd(){
+    onChipAdd() {
       onChipsModified();
     },
-    onChipDelete(){
+    onChipDelete() {
       onChipsModified();
     },
   });
@@ -188,7 +185,6 @@ function updateState(recievedState) {
       })
       .catch((e) => console.error(e));
   });
-  console.log("main state updated:", state);
 }
 
 setUpSettingsFromStorage(state).then((joinTime) => {
@@ -214,4 +210,3 @@ browser.tabs
   .catch((e) => console.error(`Error occured: ${e}`));
 
 browser.runtime.onMessage.addListener(handleJoinInfo);
-//setUpListnerForInput();

src/page.js

@@ -19,7 +19,6 @@ export function leaveCall(state) {
   const leaveButton = getLeaveButton();
   if (leaveButton !== undefined) {
     leaveButton.click();
-    console.log("left meeting");
   } else {
     console.error("leave button not found");
   }
@@ -28,9 +27,7 @@ export function leaveCall(state) {
 
 export function joinCall() {
   const joinButton = getJoinButton();
-  console.log(joinButton);
   if (joinButton !== undefined) {
-    console.log("joined meeting.");
     joinButton.click();
     return 1;
   }
@@ -106,9 +103,9 @@ export function leaveWhenPeopleLessThan(state) {
   function leave() {
     const peopleCountNow = getPeopleCount();
     if (count > peopleCountNow) {
-      console.log("leaving now. people count:", peopleCountNow);
       clearInterval(state.leaveId);
       leaveCall(state);
+      browser.storage.local.remove("joinTime");
     }
   }
 
@@ -120,5 +117,4 @@ export function leaveWhenPeopleLessThan(state) {
     }
   }
   state.leaveInitId = setInterval(runInit, 1000);
-  // change setTimeout to setTimer ?
 }