Options page design, re-work logging, general cleanup

src/background.ts

@@ -1,3 +1,4 @@
+import { consoleLog } from "./log"
 import { Message, Messages } from "./types/messages"
 import { Options, Theme } from "./types/option-types"
 
@@ -38,10 +39,7 @@ const handlePageLoaded = (tabUrl: string): void => {
             try {
                 openTabs.set(tab.id, tab)
             } catch (e) {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                // eslint-disable-next-line no-console
-                if (DEBUG) console.log(`error adding tab: ${tab.url}`)
+                consoleLog(`error adding tab: ${tab.url}`)
             }
         })
     })
@@ -78,7 +76,7 @@ const handleUpdateOptions = (options: Options): void => {
             {},
             () => {
                 if (chrome.runtime.lastError) {
-                    // console.log("update options error", chrome.runtime.lastError, "for tab", tab)
+                    // consoleLog("update options error", chrome.runtime.lastError, "for tab", tab)
                     // if unable to send message, assume closed, stop tracking
                     openTabs.delete(tab.id)
                 }
@@ -104,7 +102,7 @@ const handleRumbleThemeChanged = (theme: Theme): void => {
             {},
             () => {
                 if (chrome.runtime.lastError) {
-                    // console.log("update theme error", chrome.runtime.lastError, "for tab", tab)
+                    // consoleLog("update theme error", chrome.runtime.lastError, "for tab", tab)
                     // if unable to send message, assume closed, stop tracking
                     openTabs.delete(tab.id)
                 }

src/components/events/send-action.ts

@@ -18,7 +18,7 @@ export const sendAction = (
         } as Message,
         () => {
             if (chrome.runtime.lastError) {
-                // console.log("action error", chrome.runtime.lastError)
+                // consoleLog("action error", chrome.runtime.lastError)
             }
         },
     )

src/components/open-chat/open-chat.scss

@@ -53,16 +53,32 @@
 
     &.theme-light {
         .chat-history--row {
+            &.chat-history--subscribed {
+                background-image: linear-gradient(to right, var(--light-subscribed), var(--light-accent));
+            }
+
             &:nth-child(odd) {
-                background: var(--light-accent2);
+                background-color: var(--light-accent2);
+
+                &.chat-history--subscribed {
+                    background-image: linear-gradient(to right, var(--light-subscribed), var(--light-accent2));
+                }
             }
         }
     }
 
     &.theme-dark {
         .chat-history--row {
+            &.chat-history--subscribed {
+                background-image: linear-gradient(to right, var(--dark-subscribed), var(--dark-accent));
+            }
+
             &:nth-child(odd) {
-                background: var(--dark-accent2);
+                background-color: var(--dark-accent2);
+
+                &.chat-history--subscribed {
+                    background-image: linear-gradient(to right, var(--dark-subscribed), var(--dark-accent2));
+                }
             }
         }
     }

src/components/rants/handler-init.ts

@@ -1,4 +1,5 @@
 import { saveBadges } from "../../cache"
+import { consoleError, consoleLog } from "../../log"
 import { CacheBadge } from "../../types/cache"
 import { RantsConfig, RumbleBadge, RumbleConfig, RumbleEventInit, RumbleEventType } from "../../types/rumble-types"
 
@@ -55,10 +56,7 @@ const parseBadgeDefinitions = (badges: { [key: string]: RumbleBadge }): void =>
 const parseRants = (rants: RantsConfig): void => {
     const { levels } = rants
     if (levels === null) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        // eslint-disable-next-line no-console
-        if (DEBUG) console.log("Invalid rants config, no levels", levels)
+        consoleLog("Invalid rants config, no levels", levels)
         return
     }
     parseLevels(levels)
@@ -74,10 +72,7 @@ const parseConfig = (config: RumbleConfig): void => {
     parseBadgeDefinitions(badges)
 
     if (rants === null) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        // eslint-disable-next-line no-console
-        if (DEBUG) console.log("Invalid Rumble config, no rants", config)
+        consoleLog("Invalid Rumble config, no rants", config)
         return
     }
     parseRants(rants)
@@ -91,9 +86,7 @@ const parseConfig = (config: RumbleConfig): void => {
 export const initEventHandler = (eventData: RumbleEventInit, videoId: string): void => {
     const { type } = eventData
     if (type !== RumbleEventType.init) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (DEBUG) console.error(`Invalid event type passed to init event handler: ${type}`)
+        consoleError(`Invalid event type passed to init event handler: ${type}`)
         return
     }
 

src/components/rants/handler-message.ts

@@ -1,3 +1,4 @@
+import { consoleError } from "../../log"
 import { RumbleEventMessages, RumbleEventType } from "../../types/rumble-types"
 
 import { parseMessages } from "./messages"
@@ -11,9 +12,7 @@ import { parseUsers } from "./users"
 export const messagesEventHandler = (eventData: RumbleEventMessages, videoId: string): void => {
     const { type } = eventData
     if (type !== RumbleEventType.messages) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (DEBUG) console.error(`Invalid event type passed to messages event handler: ${type}`)
+        consoleError(`Invalid event type passed to messages event handler: ${type}`)
         return
     }
 

src/components/rants/levels.ts

@@ -3,6 +3,89 @@ import { RumbleRantLevel } from "../../types/rumble-types"
 
 import { setRantLevelValues } from "./rant"
 
+const fallbackLevels: Array<RumbleRantLevel> = [
+    {
+        price_dollars: 1,
+        duration: 120,
+        colors: { fg: "white", main: "#4a90e2", bg2: "#4382cb" },
+        ids: ["rant1", "rant1qa", "rant1dev"],
+    },
+    {
+        price_dollars: 2,
+        duration: 180,
+        colors: { fg: "black", main: "#b8e986", bg2: "#a6d279" },
+        ids: ["rant2", "rant2qa", "rant2dev"],
+    },
+    {
+        price_dollars: 5,
+        duration: 300,
+        colors: { fg: "black", main: "#f8e71c", bg2: "#dfd019" },
+        ids: ["rant5", "rant5qa", "rant5dev"],
+    },
+    {
+        price_dollars: 10,
+        duration: 600,
+        colors: { fg: "black", main: "#f5a623", bg2: "#dd9520" },
+        ids: ["rant10", "rant10qa", "rant10dev"],
+    },
+    {
+        price_dollars: 20,
+        duration: 1200,
+        colors: { fg: "white", main: "#bd10e0", bg2: "#aa0eca" },
+        ids: ["rant20", "rant20qa", "rant20dev"],
+    },
+    {
+        price_dollars: 50,
+        duration: 2400,
+        colors: { fg: "white", main: "#9013fe", bg2: "#8211e5" },
+        ids: ["rant50", "rant50qa", "rant50dev"],
+    },
+    {
+        price_dollars: 100,
+        duration: 3600,
+        colors: { fg: "white", main: "#d0021b", bg2: "#bb0218" },
+        ids: ["rant100", "rant100qa", "rant100dev"],
+    },
+    {
+        price_dollars: 200,
+        duration: 7200,
+        colors: { fg: "white", main: "#d0021b", bg2: "#bb0218" },
+        ids: ["rant200", "rant200qa", "rant200dev"],
+    },
+    {
+        price_dollars: 300,
+        duration: 10800,
+        colors: { fg: "white", main: "#d0021b", bg2: "#bb0218" },
+        ids: ["rant300", "rant300qa", "rant300dev"],
+    },
+    {
+        price_dollars: 400,
+        duration: 14400,
+        colors: { fg: "white", main: "#d0021b", bg2: "#bb0218" },
+        ids: ["rant400", "rant400qa", "rant400dev"],
+    },
+    {
+        price_dollars: 500,
+        duration: 18000,
+        colors: { fg: "white", main: "#d0021b", bg2: "#bb0218" },
+        ids: ["rant500", "rant500qa", "rant500dev"],
+    },
+]
+
+/**
+ * Generate CSS style data for Rumble Rants based on the level data received
+ * @param levelInfo The received Rant level data
+ * @returns The CSS style lines
+ */
+const generateStyleLines = (levelInfo: RumbleRantLevel): Array<string> => {
+    const externalChat = `.external-chat[data-level="${levelInfo.price_dollars}"]`
+    return [
+        `${externalChat} { background: ${levelInfo.colors.bg2} !important; }`,
+        `${externalChat} * { color: ${levelInfo.colors.fg} !important; }`,
+        `${externalChat} .rant-amount { background: ${levelInfo.colors.main} !important; }`,
+    ]
+}
+
 /**
  * Parse level data from received message
  * @param levels received level data
@@ -13,71 +96,24 @@ export const parseLevels = (levels: Array<RumbleRantLevel>, fallback: boolean =
         return
     }
 
-    const styleLines = []
+    const styleLines: Array<string> = []
 
+    let levelList: Array<RumbleRantLevel>
     if (fallback || levels.length === 0) {
-        setRantLevelValues([1, 2, 5, 10, 20, 50, 100, 200, 300, 400, 500])
-        styleLines.push(
-            ...[
-                '.external-chat[data-level="1"] { background: #4382CB !important; }',
-                '.external-chat[data-level="1"] * {color: white !important; }',
-                '.external-chat[data-level="1"] .rant-amount { background: #4A90E2 !important; }',
-                '.external-chat[data-level="2"] { background: #A6D279 !important; }',
-                '.external-chat[data-level="2"] * {color: black !important; }',
-                '.external-chat[data-level="2"] .rant-amount { background: #B8E986 !important; }',
-                '.external-chat[data-level="5"] { background: #DFD019 !important; }',
-                '.external-chat[data-level="5"] * {color: black !important; }',
-                '.external-chat[data-level="5"] .rant-amount { background: #F8E71C !important; }',
-                '.external-chat[data-level="10"] { background: #DD9520 !important; }',
-                '.external-chat[data-level="10"] * {color: black !important; }',
-                '.external-chat[data-level="10"] .rant-amount { background: #F5A623 !important; }',
-                '.external-chat[data-level="20"] { background: #AA0ECA !important; }',
-                '.external-chat[data-level="20"] * {color: white !important; }',
-                '.external-chat[data-level="20"] .rant-amount { background: #BD10E0 !important; }',
-                '.external-chat[data-level="50"] { background: #8211E5 !important; }',
-                '.external-chat[data-level="50"] * {color: white !important; }',
-                '.external-chat[data-level="50"] .rant-amount { background: #9013FE !important; }',
-                '.external-chat[data-level="100"] { background: #BB0218 !important; }',
-                '.external-chat[data-level="100"] * {color: white !important; }',
-                '.external-chat[data-level="100"] .rant-amount { background: #D0021B !important; }',
-                '.external-chat[data-level="200"] { background: #BB0218 !important; }',
-                '.external-chat[data-level="200"] * {color: white !important; }',
-                '.external-chat[data-level="200"] .rant-amount { background: #D0021B !important; }',
-                '.external-chat[data-level="300"] { background: #BB0218 !important; }',
-                '.external-chat[data-level="300"] * {color: white !important; }',
-                '.external-chat[data-level="300"] .rant-amount { background: #D0021B !important; }',
-                '.external-chat[data-level="400"] { background: #BB0218 !important; }',
-                '.external-chat[data-level="400"] * {color: white !important; }',
-                '.external-chat[data-level="400"] .rant-amount { background: #D0021B !important; }',
-                '.external-chat[data-level="500"] { background: #BB0218 !important; }',
-                '.external-chat[data-level="500"] * {color: white !important; }',
-                '.external-chat[data-level="500"] .rant-amount { background: #D0021B !important; }',
-            ],
-        )
+        levelList = fallbackLevels
     } else {
-        const rantLevelValues = []
-        levels.forEach((rantLevel: RumbleRantLevel) => {
-            rantLevelValues.push(rantLevel.price_dollars)
-            const externalChat = `.external-chat[data-level="${rantLevel.price_dollars}"]`
-            styleLines.push(
-                ...[
-                    `${externalChat} {`,
-                    `background: ${rantLevel.colors.bg2} !important;`,
-                    `}`,
-                    `${externalChat} * {`,
-                    `color: ${rantLevel.colors.fg} !important;`,
-                    `}`,
-                    `${externalChat} .rant-amount {`,
-                    `background: ${rantLevel.colors.main} !important;`,
-                    `}`,
-                ],
-            )
-        })
-
-        rantLevelValues.sort()
-        setRantLevelValues(rantLevelValues)
+        levelList = levels
     }
 
+    const rantLevelValues: Array<number> = []
+    levelList.forEach((rantLevel) => {
+        rantLevelValues.push(rantLevel.price_dollars)
+        styleLines.push(...generateStyleLines(rantLevel))
+    })
+
+    rantLevelValues.sort()
+    setRantLevelValues(rantLevelValues)
+
     const levelStyle = document.createElement("style") as HTMLStyleElement
     levelStyle.id = CONSTS.LEVEL_STYLE_ID
     levelStyle.appendChild(document.createTextNode(styleLines.join(" ")))

src/components/rants/rant.scss

@@ -105,7 +105,7 @@
         }
 
         .notification-badge {
-            height: 5rem;
+            height: 3rem;
             width: auto;
             margin-left: auto;
         }

src/components/rants/rants.ts

@@ -1,4 +1,5 @@
 import { getLastWidth, getSortOrder, getStream, setLastWidth } from "../../cache"
+import { consoleLog } from "../../log"
 import { triggerOpenOptionsPage } from "../events/events"
 import { updateTheme } from "../../theme"
 import { CONSTS } from "../../types/consts"
@@ -78,10 +79,7 @@ export const addRantStatsSidebar = async (
     popup: boolean = false,
     cache: boolean = false,
 ): Promise<void> => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    // eslint-disable-next-line no-console
-    if (DEBUG) console.log(`open rant stats sidebar for video ${videoId}`)
+    consoleLog(`open rant stats sidebar for video ${videoId}`)
 
     const existingSidebar = document.getElementById(CONSTS.SIDEBAR_ID)
     if (existingSidebar !== null && !popup) {
@@ -107,7 +105,7 @@ export const addRantStatsSidebar = async (
                 <h1 id="${CONSTS.SIDEBAR_TITLE_ID}">Rant Stats</h1>
             </header>
             <div class="hidden" id="${CONSTS.ERROR_ID}">
-                <p>Could not load chats, is the livestream over or are you not logged in to Rumble? Any cached Rants shown below.</p>
+                <p>Could not load chats, is the livestream over? Any cached Rants shown below.</p>
             </div>
             <div class="hidden" id="${CONSTS.CACHE_MESSAGE_ID}">
                 <p>Stream is over, dispalying <span id="${CONSTS.CACHE_MESSAGE_COUNT_ID}">-1</span> cached rants.</p>

src/components/rumble/stream-handler.ts

@@ -1,4 +1,5 @@
 import { cacheStream } from "../../cache"
+import { consoleError } from "../../log"
 import { CONSTS } from "../../types/consts"
 import { RumbleEventBase, RumbleEventInit, RumbleEventMessages, RumbleEventType } from "../../types/rumble-types"
 import { setupPopup } from "../popup/popup"
@@ -63,22 +64,16 @@ export const messageHandler = (event: MessageEvent, videoId: string): void => {
                 messagesEventHandler(eventData as RumbleEventMessages, videoId)
                 break
             case RumbleEventType.mute_users:
-                // TODO: restore message in chat (if configured)
+                // ignored
                 break
             case RumbleEventType.delete_non_rant_messages:
-                // TODO: restore message in chat (if configured)
+                // ignored
                 break
             default:
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                if (DEBUG) console.error("Unknown event type", eventData)
+                consoleError("Unknown event type", eventData)
         }
     } catch (e) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (DEBUG) {
-            console.error("Error parsing message:")
-            console.error(e)
-        }
+        consoleError("Error parsing message:")
+        consoleError(e)
     }
 }