mikesingleton · mikesingleton · Apr 19, 2023 · Apr 18, 2023 · Apr 19, 2023 · Apr 19, 2023
diff --git a/app/extension/html/popup.html b/app/extension/html/popup.html
@@ -22,13 +22,43 @@
             </svg>
         </div>
         <div id="popupBox">
-            <div class="if">
+            <div id="if-title" class="if" style="cursor: pointer;">
                 Internet Friends
             </div>
             <div id="website" class="website">
                 website.com
             </div>
-            <table class="table">
+            <table id="pauseTable" class="table">
+                <tr>
+                    <td>
+                        Internet Friends is paused...
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <span id="countdownTimer"></span>
+                    </td>
+                </tr>
+                <tr><td></td></tr>
+                <tr>
+                    <td style="justify-content: space-between;">
+                        Add Time
+                        <div style="display: flex;">
+                            <button id="pause15m" class="pauseButton">15m</button>
+                            <button id="pause3h" class="pauseButton">3h</button>
+                            <button id="pause24h" class="pauseButton">24h</button>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <button id="unpauseButton" class="unpauseButton">
+                            Unpause Internet Friends
+                        </button>
+                    </td>
+                </tr>
+            </table>
+            <table id="settingsTable" class="table" style="display: hidden">
                 <tr>
                     <td>
                         Enable for this website
@@ -61,6 +91,16 @@
                         </button>
                     </td>
                 </tr>
+                <tr>
+                    <td>
+                        Pause extension   
+                        <div style="display: flex;">
+                            <button id="pause15m" class="pauseButton">15m</button>
+                            <button id="pause3h" class="pauseButton">3h</button>
+                            <button id="pause24h" class="pauseButton">24h</button>
+                        </div>
+                    </td>
+                </tr>
             </table>
             <div id="refresh" class="refresh">
                 Refresh for changes to take effect

diff --git a/app/manifest.json b/app/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "__MSG_appName__",
-    "version": "1.1.5",
+    "version": "1.1.6",
     "manifest_version": 3,
     "description": "__MSG_appDescription__",
     "icons": {

diff --git a/app/scripts.babel/inject.js b/app/scripts.babel/inject.js
@@ -47,11 +47,17 @@ var Inject = (function() {
 
     _this.init = function() {
         Logger.log(`Internet Friends Initializing Room "${window.location.host + window.location.pathname} : ${document.title}"`);
+
+        // if InternetFriends is paused, return
+        if (IFSettings.pausedUntil > Date.now()) {
+            Logger.log('Internet Friends is paused. Exiting.');
+            return;
+        }
 
         // if websiteUrl is present in disabledSites, InternetFriends is disabled for this site, return
         let websiteUrl = window.location.host;
         if (IFSettings.disabledSites[websiteUrl]) {
-            Logger.log('Website is disabled. Exiting.');
+            Logger.log('Website is disabled in Internet Friends settings. Exiting.');
             return;
         }
 
@@ -230,7 +236,7 @@ if (isWebRTCSupported) {
             // else, init now
             Inject.tryInit();
         }
-    }, false);
+    }, { once: true });
 } else {
     console.log("InternetFriends does not work without WebRTC support!"); // use console log here so it's logged regardless of whether general logging is enabled
 }
diff --git a/app/scripts.babel/popup.js b/app/scripts.babel/popup.js
@@ -3,13 +3,19 @@
 var Popup = (function() {
     // variables ----------------------------------------------------------------
     var _this = {},
+        _settingsTable = null,
+        _title = null,
         _website = null,
         _websiteUrl = null,
         _enableForSite = null,
         _enableChat = null,
         _keyComboInput = null,
         _settingsTimeout = null,
-        _userColor = null;
+        _userColor = null,
+        _pauseTable = null,
+        _countdownTimeout = null,
+        _pausedUntil = null,
+        _pausedUntilTimeout = null;
 
     // initialize ---------------------------------------------------------------
     _this.init = function() {
@@ -20,10 +26,19 @@ var Popup = (function() {
 
         // Get document elements
 
+        _title = document.getElementById('if-title');
         _website = document.getElementById('website');
         _enableForSite = document.getElementById('enableForSite');
         _enableChat = document.getElementById('enableChat');
         _keyComboInput = document.getElementById('keyComboInput');
+        _pauseTable = document.getElementById('pauseTable');
+        _settingsTable = document.getElementById('settingsTable');
+
+        // Set website click event
+
+        _title.addEventListener('click', function () {
+            window.open('https://internetfriends.social', '_blank');
+        });
 
         // Populate values
 
@@ -102,6 +117,21 @@ var Popup = (function() {
 
         _cursorColorButton.addEventListener("click", onCursorButtonClicked);
         _colorWheelContainerBackground.addEventListener("click", onPopupContainerClicked);
+
+        // Handle Pause Timer
+
+        _pausedUntil = IFSettings.pausedUntil
+        setupPauseButtons();
+
+        // Handle Table Display
+
+        // if currently paused
+        if (_pausedUntil > Date.now()) {
+            _settingsTable.classList.add("hidden");
+            updateCountdown();
+        } else {
+            _pauseTable.classList.add("hidden");
+        }
     };
 
     // private functions --------------------------------------------------------
@@ -208,6 +238,79 @@ var Popup = (function() {
         _refreshText.style.visibility = "visible";
     };
 
+    function updateCountdown() {
+        var countdownTimer = document.getElementById('countdownTimer');
+        const timeLeft = _pausedUntil - new Date().getTime();
+
+        if (timeLeft <= 0) {
+            _pauseTable.classList.add("hidden");
+            _settingsTable.classList.remove("hidden");
+            clearTimeout(_countdownTimeout);
+        } else {
+            const days = Math.floor(timeLeft / (24 * 60 * 60 * 1000));
+            const hours = Math.floor((timeLeft % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
+            const minutes = Math.floor((timeLeft % (60 * 60 * 1000)) / (60 * 1000));
+            const seconds = Math.floor((timeLeft % (60 * 1000)) / 1000);
+
+            countdownTimer.textContent = `${days}d ${hours}h ${minutes}m ${seconds}s`;                
+            _countdownTimeout = setTimeout(updateCountdown, 1000);
+        }
+    }
+
+    function setupPauseButtons() {
+        var pauseButtons = document.querySelectorAll(".pauseButton");
+        var unpauseButton = document.getElementById('unpauseButton');
+
+        pauseButtons.forEach(button => {
+            button.addEventListener("click", function() {
+                const duration = button.id === "pause15m" ? 15 * 60 * 1000 :      // 15m
+                                button.id === "pause3h" ? 3 * 60 * 60 * 1000 :   // 3h
+                                24 * 60 * 60 * 1000;                             // 24hr
+
+                // Clear any existing countdown
+                if (_countdownTimeout) {
+                clearTimeout(_countdownTimeout);
+                }
+
+                // If extension is already paused
+                if (_pausedUntil > new Date().getTime()) {
+                    // Add time
+                    _pausedUntil += duration
+                } else {
+                    // Set time
+                    _pausedUntil = new Date().getTime() + duration
+
+                    // Set refresh text
+                    var _refreshText = document.getElementById('refresh');
+                    _refreshText.style.visibility = "visible";
+                }
+
+                // use timeout to prevent settings from being updated too quickly
+                if (_pausedUntilTimeout)
+                    clearTimeout(_pausedUntilTimeout);
+                _pausedUntilTimeout = setTimeout(updatePausedUntil, 100);
+                _pauseTable.classList.remove("hidden");
+                _settingsTable.classList.add("hidden");
+
+                updateCountdown();
+            });
+        });
+
+        unpauseButton.addEventListener("click", function() {
+            _pausedUntil = -1
+            updatePausedUntil();
+            _pauseTable.classList.add("hidden");
+            _settingsTable.classList.remove("hidden");
+
+            var _refreshText = document.getElementById('refresh');
+            _refreshText.style.visibility = "visible";
+        });
+    }
+
+    function updatePausedUntil () {
+        chrome.storage.sync.set({'pausedUntil': _pausedUntil});
+    }
+
     return _this;
 }());
 

diff --git a/app/scripts.babel/settings.js b/app/scripts.babel/settings.js
@@ -34,7 +34,8 @@ var IFEvents = new EventTarget();
                 combo: storedSettings?.combo || _defaultCombo,
                 disabledSites: storedSettings?.disabledSites || {},
                 enableChat: storedSettings?.enableChat === true || storedSettings?.enableChat === undefined,
-                userColor: storedSettings?.userColor || getRandomIroColor()
+                userColor: storedSettings?.userColor || getRandomIroColor(),
+                pausedUntil: storedSettings?.pausedUntil || -1
             }
 
             // set new settings
@@ -66,7 +67,8 @@ var IFEvents = new EventTarget();
             combo: _defaultCombo,
             disabledSites: {},
             enableChat: true,
-            userColor: getRandomIroColor()
+            userColor: getRandomIroColor(),
+            pausedUntil: -1
         }
 
         IFEvents.dispatchEvent(initEvent);

diff --git a/app/styles/popup.css b/app/styles/popup.css
@@ -9,16 +9,20 @@
 body {
   text-align: center;
   width: 314px;
-  height: 282px;
+  height: 318px;
   overflow: hidden;
   margin: auto;
   user-select: none;
 }
 
+.hidden {
+  display: none;
+}
+
 .popupContainer {
   position: absolute;
   width: 314px;
-  height: 282px;
+  height: 318px;
 }
 
 table {
@@ -34,9 +38,16 @@ td {
   height: 34px;
   align-items: center;
   display: flex;
+}
+
+#settingsTable td {
   justify-content: space-between;
 }
 
+#pauseTable td {
+  justify-content: center;
+}
+
 #keyComboInput {
   width: 146px;
 }
@@ -111,6 +122,18 @@ td {
   cursor: pointer;
 }
 
+.pauseButton {
+  font-size: 10px;
+  font-weight: bold;
+  width: 30px;
+  height: 30px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  font-family: "Open Sans",Verdana,Geneva,Tahoma,sans-serif;
+  margin-left: 5px;
+}
+
 .popup {
   position: relative;
   display: inline-block;