Merge pull request #25 from yungsamd17/dev

Merge Pull Request dev -> main

manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Sam's Twitch Live",
     "description": "Your ultimate companion for staying connected with your favorite Twitch streams.",
-    "version": "1.3.1",
+    "version": "1.3.2",
     "author": "Sam @yungsamd17",
     "homepage_url": "https://github.com/yungsamd17/Twitch-Live",
     "icons":

popup.html

@@ -60,8 +60,8 @@
         </div>
         <!-- Navbar link/button -->
         <div class="link-container">
-            <a class="navbar-link" twitch-label="Twitch Live Following" href="https://www.twitch.tv/directory/following/live" target="_blank">
-                <i class="fa-brands fa-twitch"></i></a>
+            <button class="navbar-link" twitch-label="Twitch Live Following" id="openTwitchLiveFollowing">
+                <i class="fa-brands fa-twitch"></i></button>
             <button class="navbar-link" id="settingsBtn" settings-label="Settings">
                 <i class="fa-solid fa-gear"></i></button>
         </div>

src/css/main.css

@@ -43,10 +43,11 @@ body {
     color: #fff;
     border: 2px solid #242429;
     border-radius: 5px 0 0 5px;
-    padding: 0 5px 0 8px;
     margin: 10px 0 10px 10px;
+    padding-top: 2px;
     font-size: 1rem;
     font-weight: bold;
+    text-indent: 6px;
 }
 
 .search-container input[type="text"]:focus {
@@ -330,10 +331,10 @@ body {
 }
 
 .popup-anim-in {
-    animation: popup-anim-in 333ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
+    animation: popup-anim-in 200ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
 }
 .popup-anim-out {
-    animation: popup-anim-out 222ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
+    animation: popup-anim-out 120ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
 }
 
 /*  CONTEXT MENU  */

src/css/settings.css

@@ -28,13 +28,13 @@
     animation: settings-background-anim-in 0.2s linear forwards;
 }
 .settings-background-anim-out {
-    animation: settings-background-anim-out 0.2s linear forwards;
+    animation: settings-background-anim-out 0.120s linear forwards;
 }
 .popup-anim-in {
-    animation: popup-anim-in 333ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
+    animation: popup-anim-in 200ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
 }
 .popup-anim-out {
-    animation: popup-anim-out 111ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
+    animation: popup-anim-out 120ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
 }
 
 .settings-modal-body {

src/js/main.js

@@ -306,6 +306,11 @@ const handleRefreshButtonClick = () => {
     loadTwitchContent();
 };
 
+// Open "Twitch Live Following" navbar button link
+document.getElementById('openTwitchLiveFollowing').addEventListener('click', function() {
+    chrome.tabs.create({ url: 'https://www.twitch.tv/directory/following/live' });
+});
+
 // Raid command button toggle
 document.getElementById("showRaidButtonToggle").addEventListener("change", async function() {
     await chrome.storage.local.set({ showRaidButtonToggle: this.checked });
@@ -378,7 +383,7 @@ const setupAutoRefresh = () => {
     // Automatically refresh streams every minute (when popup is "open")
     window.setInterval(async () => {
         await loadTwitchContent();
-    }, 1000 * 60);
+    }, 1000 * 30);
 
     return true;
 };

src/js/settings.js

@@ -199,7 +199,24 @@ filterBtn.addEventListener('mouseenter', function() {
 });
 
 window.onmousedown = function(event) {
-    if (!event.target.matches('.dropdown-content') && dropdown.style.visibility === "visible") {
+    const filterButton = document.getElementById('filterButton');
+    const isFilterDropdownVisible = dropdown.style.visibility === "visible";
+
+    // Check if the clicked target is not within the filter dropdown or its buttons
+    if (!event.target.matches('.dropdown-content') &&
+        !event.target.matches('.filter-button') &&
+        !filterButton.contains(event.target) &&
+        isFilterDropdownVisible) {
+        animatePopup(dropdown, false);
+    }
+}
+
+window.onmouseup = function(event) {
+    const filterButton = document.getElementById('filterButton');
+    const isFilterDropdownVisible = dropdown.style.visibility === "visible";
+
+    // Check if the clicked target is one of the filter buttons and the dropdown is visible
+    if (event.target.matches('.filter-button') && isFilterDropdownVisible) {
         animatePopup(dropdown, false);
     }
 }
@@ -256,4 +273,11 @@ document.addEventListener('keydown', function(event) {
             closeModal();
         }
     }
+});
+
+// Close modal when clicking outside of modal content
+modal.addEventListener("click", function(event) {
+    if (event.target === modal) {
+        closeModal();
+    }
 });