⬆️v1.1 Update (PR #7)

Merge pull request #7 from yungsamd17/update

manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Sam's Twitch Live",
     "description": "Sam's Twitch Live: Your Following Channels, Constantly in View.",
-    "version": "1.0",
+    "version": "1.1",
     "author": "yungsamd17",
     "homepage_url": "https://github.com/yungsamd17/Twitch-Live",
     "icons":

popup.html

@@ -54,7 +54,7 @@ <h2 class="settings-header-text">Settings</h2>
                 <!-- Settings options -->
                 <div class="option-container">
                     <div class="text-container">
-                        <span>Open streams in New Window</span>
+                        <span>Open in a new window</span>
                     </div>
                     <div class="slider-container">
                         <label class="switch">
@@ -65,7 +65,7 @@ <h2 class="settings-header-text">Settings</h2>
                 </div>
                 <div class="option-container">
                     <div class="text-container">
-                        <span>Open streams in Player</span>
+                        <span>Open streams in player <a href="https://player.twitch.tv/?channel=rifftrax&parent=twitch" aria-label-4="player.twitch.tv example" target="_blank"><i class="fa-solid fa-circle-info"></i></a></span>
                     </div>
                     <div class="slider-container">
                         <label class="switch">
@@ -74,6 +74,14 @@ <h2 class="settings-header-text">Settings</h2>
                         </label>
                     </div>
                 </div>
+                <div class="option-container">
+                    <div class="text-container">
+                        <span>Custom badge color</span>
+                    </div>
+                    <div class="color-input">
+                        <input type="text" id="colorInput" placeholder="#RRGGBB" minlength="7" maxlength="7" autocomplete="off" spellcheck="false"/>
+                    </div>
+                </div>
 
                 <!-- Settings footer link -->
                 <div class="settings-footer">

src/css/settings.css

@@ -87,6 +87,18 @@
     user-select: none;
 }
 
+.text-container a {
+    color: #999999;
+}
+
+.text-container a:hover {
+    color: #fff;
+}
+
+.text-container a:active {
+    color: #9146ff;
+}
+
 /*  TOGGLE SWITCH  */
 .slider-container {
     float: right;
@@ -154,6 +166,36 @@ input:checked+.slider:before {
     background-color: #9146ff;
 }
 
+/*  COLOR INPUT  */
+.color-input {
+    float: right;
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+}
+
+.color-input input[type="text"] {
+    width: 64px;
+    background-color: #0e0e10;
+    color: #999999;
+    border: 2px solid #999999;
+    border-radius: 10px;
+    padding: 8px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.color-input input[type="text"]:hover {
+    color: #fff;
+    border: 2px solid #fff;
+}
+
+.color-input input[type="text"]:focus {
+    color: #fff;
+    border: 2px solid #9146ff;
+    outline: 0;
+}
+
 /*  SETTINGS FOOTER  */
 .settings-footer {
     display: flex;

src/css/tooltips.css

@@ -182,3 +182,65 @@
 [aria-label-3]:not(:hover):before {
     transition-delay: 0s;
 }
+
+
+/*  "Open streams in Player" SETTINGS OPTION INFO LINK TOOLTIP  */
+
+[aria-label-4] {
+    position: relative;
+}
+
+[aria-label-4]:after,
+[aria-label-4]:before {
+    content: "";
+    position: absolute;
+    z-index: 500;
+    pointer-events: none;
+}
+
+[aria-label-4]:after {
+    content: attr(aria-label-4);
+    display: block;
+    position: absolute;
+    top: 174%;
+    left: -420%;
+    z-index: 500;
+    pointer-events: none;
+    padding: 6px 5px;
+    line-height: 15px;
+    white-space: nowrap;
+    text-decoration: none;
+    text-indent: 0;
+    overflow: visible;
+    font-size: .8em;
+    color: #000;
+    background-color: #fff;
+    border-radius: 5px;
+    opacity: 0;
+}
+
+[aria-label-4]:before {
+    content: "";
+    border-style: solid;
+    border-width: 0 8px 10px 8px;
+    border-color: transparent transparent #fff transparent;
+    top: 23px;
+    right: 50%;
+    transform: translateX(50%);
+    opacity: 0;
+}
+
+[aria-label-4]:hover:after {
+    opacity: 1;
+    transition-delay: 0.3s;
+}
+
+[aria-label-4]:hover:before {
+    opacity: 1;
+    transition-delay: 0.3s;
+}
+
+[aria-label-4]:not(:hover):after,
+[aria-label-4]:not(:hover):before {
+    transition-delay: 0s;
+}

src/js/background.js

@@ -63,8 +63,13 @@ const getLiveChannelsCount = async () => {
 const updateBadge = async () => {
     const liveChannelsCount = await getLiveChannelsCount();
     const badgeText = liveChannelsCount > 0 ? liveChannelsCount.toString() : "";
-    chrome.action.setBadgeText({ text: badgeText });
-    chrome.action.setBadgeBackgroundColor({ color: "#67676b" });
+
+    // Retrieve custom badge color from local storage
+    chrome.storage.local.get("customBadgeColor", (result) => {
+        const badgeColor = result.customBadgeColor || "#666666";
+        chrome.action.setBadgeText({ text: badgeText });
+        chrome.action.setBadgeBackgroundColor({ color: badgeColor });
+    });
 };
 
 // Twitch app token

src/js/settings.js

@@ -8,9 +8,10 @@ const setToggleSwitchStatus = (toggleId, status) => {
 };
 
 // Retrieve the stored settings on popup load
-chrome.storage.local.get(["openInPlayerToggle", "openInNewWindowToggle"], (result) => {
+chrome.storage.local.get(["openInPlayerToggle", "openInNewWindowToggle", "customBadgeColor"], (result) => {
     setToggleSwitchStatus("openInPlayerToggle", result.openInPlayerToggle !== undefined ? result.openInPlayerToggle : false);
     setToggleSwitchStatus("openInNewWindowToggle", result.openInNewWindowToggle !== undefined ? result.openInNewWindowToggle : false);
+    document.getElementById("colorInput").value = result.customBadgeColor || "";
 });
 
 // Listen for changes in the toggle switches and store the settings
@@ -35,9 +36,33 @@ chrome.storage.onChanged.addListener((changes) => {
 // Log the toggle switch statuses
 const openInPlayerToggle = document.getElementById("openInPlayerToggle");
 const openInNewWindowToggle = document.getElementById("openInNewWindowToggle");
+const colorInput = document.getElementById("colorInput");
 /*console.log("Toggle Switch Status - Open in Player:", openInPlayerToggle.checked);
 console.log("Toggle Switch Status - Open in New Window:", openInNewWindowToggle.checked);*/
 
+// Custom color badge input
+colorInput.addEventListener("keydown", function (event) {
+    if (event.key === "Enter") {
+        const color = this.value.trim();
+
+        // Check if the entered color is a valid HEX format and starts with "#"
+        if (/^#[0-9A-Fa-f]{6}$/.test(color) && color.startsWith("#")) {
+            chrome.storage.local.set({ customBadgeColor: color }, () => {
+                // Update the badge color
+                chrome.action.setBadgeBackgroundColor({ color });
+            });
+        } else {
+            // If the input is invalid or empty, set to default color and clear the input
+            chrome.storage.local.set({ customBadgeColor: "" }, () => {
+                this.value = "";
+                chrome.action.setBadgeBackgroundColor({ color: "#666666" });
+            });
+        }
+
+        // Prevent the default form submission behavior
+        event.preventDefault();
+    }
+});
 
 // Settings Modal
 var modal = document.getElementById("settingsModal");