Add support for showing channel subscribers

- Stores the "notification" information in cache - New entry for "notifications" Resolves #7
rantstats · Apr 11, 2023 · 5736a16 · 5736a16
1 parent 7f0eab9
commit 5736a16
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 8 deletions.
diff --git a/src/cache.ts b/src/cache.ts
@@ -1,5 +1,6 @@
 import {CHAT_POPUP_REGEX} from "./types/consts";
 import {defaultOptions, Options, SortOrder, Theme} from "./types/option-types";
+import {RumbleNotification} from "./types/rumble-types";
 
 /**
  * Object for storing the Rant price
@@ -39,6 +40,10 @@ export type CachedRant = {
      * Rant data
      */
     rant?: Rant,
+    /**
+     * Notification associated with message
+     */
+    notification?: RumbleNotification
     /**
      * Badges associated with user who sent Rant
      */

diff --git a/src/components/rants/rant.scss b/src/components/rants/rant.scss
@@ -11,7 +11,15 @@
         opacity: 0.5;
     }
 
-    .rant-amount {
+    &.notification {
+        background: #BB0218;
+    }
+
+    &.notification * {
+        color: white;
+    }
+
+    .rant-amount, .notification-info {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -28,6 +36,15 @@
         }
     }
 
+    .notification-info {
+        background: #D0021B;
+
+        .timestamp {
+            font-size: 0.7rem;
+            font-weight: normal;
+        }
+    }
+
     p {
         margin: 0;
     }
@@ -85,6 +102,12 @@
             }
         }
 
+        .notification-badge {
+            height: 5rem;
+            width: auto;
+            margin-left: auto;
+        }
+
         .timestamp {
             justify-self: flex-end;
             margin-left: auto;

diff --git a/src/components/rants/rant.ts b/src/components/rants/rant.ts
@@ -1,7 +1,15 @@
-import {CacheBadge, cacheMessage, getAllCachedMessageIds, getBadges, getUser, updateCachedMessage} from "../../cache";
+import {
+    CacheBadge,
+    cacheMessage,
+    getAllCachedMessageIds,
+    getBadge,
+    getBadges,
+    getUser,
+    updateCachedMessage
+} from "../../cache";
 import {RANT_LIST_ID, READ_CHECK, TOTAL_ID} from "../../types/consts";
 import {SortOrder} from "../../types/option-types";
-import {RumbleMessage, RumbleRant, RumbleUser} from "../../types/rumble-types";
+import {RumbleMessage, RumbleNotification, RumbleRant, RumbleUser} from "../../types/rumble-types";
 import {getVideoIdFromDiv} from "../../utils";
 
 /**
@@ -114,11 +122,11 @@ const parseMessage = (
         videoId: string,
         userBadges: Map<string, Array<string>>,
 ) => {
-    const {id, time, user_id, text, rant} = message
+    const {id, time, user_id, text, rant, notification} = message
     const badges = userBadges.get(user.id)
-    // render rants
-    if (rant) {
-        renderMessage(videoId, id, time, user_id, text, rant, user.username, user["image.1"], badges)
+    // render rants and notifications
+    if (rant || notification) {
+        renderMessage(videoId, id, time, user_id, text, rant, notification, user.username, user["image.1"], badges)
                 .then(() => {
                 })
     }
@@ -133,6 +141,7 @@ const parseMessage = (
  * @param userId id of user who made message
  * @param text text of the message
  * @param rant paid Rumble Rant data
+ * @param notification notification associated with Rant
  * @param username Username for user
  * @param userImage Optional path to profile image
  * @param badges badges for user
@@ -147,6 +156,7 @@ export const renderMessage = async (
         userId: string,
         text: string,
         rant: RumbleRant = undefined,
+        notification: RumbleNotification = undefined,
         username: string = undefined,
         userImage: string = undefined,
         badges: Array<string> = undefined,
@@ -183,6 +193,7 @@ export const renderMessage = async (
                     rant: {
                         price_cents: rant.price_cents,
                     },
+                    notification: notification,
                     badges: badges,
                     read: read
                 }
@@ -193,6 +204,10 @@ export const renderMessage = async (
     if (rant) {
         await renderRant(messageId, time, text, rant, username, userImage, badges, read, cachePage)
     }
+    if (notification) {
+        const messageIdNotification = `${messageId}-notification`
+        await renderNotification(messageIdNotification, time, notification, username, userImage, read, cachePage)
+    }
 }
 
 const renderRant = async (
@@ -267,6 +282,83 @@ const renderRant = async (
     updateTotal(amount)
 }
 
+const renderNotification = async (
+        messageId: string,
+        time: string,
+        notification: RumbleNotification,
+        username: string,
+        userImage: string,
+        read: boolean = false,
+        cachePage: boolean = false
+) => {
+    if (notification.text === undefined || notification.badge === undefined) {
+        return
+    }
+
+    const userImageHTML = getUserImageHtml(userImage, username, messageId)
+
+    const badgeData = await getBadge(notification.badge)
+    let badgeHtml = ''
+    if (badgeData) {
+        badgeHtml = getBadgeImage(notification.badge, badgeData, "notification-badge")
+    }
+
+    const chatDate = new Date(time)
+    const isoDate = chatDate.toISOString()
+
+    const chatDiv = document.createElement('div') as HTMLDivElement
+    chatDiv.classList.add('external-chat')
+    chatDiv.classList.add('notification')
+    if (read) {
+        chatDiv.classList.add('read')
+    }
+    chatDiv.setAttribute('data-chat-id', messageId)
+    chatDiv.setAttribute('data-date', isoDate)
+
+    let html = `
+        <div class="notification-info">
+            <time class="timestamp" datatype="${isoDate}">${chatDate.toLocaleDateString()}
+                ${chatDate.toLocaleTimeString()}
+            </time>
+            <label for="${messageId}" class="show-hide-checkbox">
+                Read:
+                <input type="checkbox" id="${messageId}" class="${READ_CHECK}" ${read ? "checked" : ""}/>
+            </label>
+        </div>
+    `
+    if (cachePage) {
+        html = `
+            ${html}
+            <div class="rant-data">
+                <div class="user-image">${userImageHTML}</div>
+
+                <div class="rant-details">
+                    <div class="user-info">
+                        <p class="notification-text">${username} ${notification.text}</p>
+                        ${badgeHtml}
+                    </div>
+                </div>
+            </div>
+        `
+    } else {
+        html = `
+            ${html}
+            <div class="user-info">
+                <div class="user-image">${userImageHTML}</div>
+                <p class="notification-text">${username} ${notification.text}</p>
+                ${badgeHtml}
+            </div>
+        `
+    }
+    chatDiv.innerHTML = html
+
+    addChat(chatDiv, messageId)
+
+    const userImageElement = document.getElementById(`img-${messageId}`) as HTMLImageElement
+    if (userImageElement)
+        userImageElement.addEventListener('error', imageErrorHandler)
+}
+
 /**
  * Get the user details from the cached user data
  *

diff --git a/src/components/rants/rants.ts b/src/components/rants/rants.ts
@@ -453,7 +453,7 @@ export const displayCachedRants = (videoId: string, cachePage: boolean = false)
                 cachedRants.forEach((value) => {
                     renderMessage(
                             videoId, value.id, value.time, value.user_id, value.text,
-                            value.rant as RumbleRant, value.username,
+                            value.rant as RumbleRant, value.notification, value.username,
                             undefined, value.badges, true, value.read,
                             cachePage
                     )

diff --git a/src/pages/rants/rants.scss b/src/pages/rants/rants.scss
@@ -127,6 +127,12 @@
                         .timestamp {
                             font-size: 0.8em;
                         }
+
+                        .notification-badge {
+                            height: 5rem;
+                            width: auto;
+                            margin-left: auto;
+                        }
                     }
 
                     .chat-text {

diff --git a/src/types/rumble-types.ts b/src/types/rumble-types.ts
@@ -50,6 +50,20 @@ export type RumbleRant = {
     price_cents: number,
 }
 
+/**
+ * Object containing the Rumble notification information
+ */
+export type RumbleNotification = {
+    /**
+     * Name of badge for notification
+     */
+    badge: string,
+    /**
+     * Text of notification
+     */
+    text: string,
+}
+
 /**
  * Object containing the Rumble chat message
  */
@@ -78,6 +92,10 @@ export type RumbleMessage = {
      * Optional paid Rant information
      */
     rant?: RumbleRant,
+    /**
+     * Optional notification information (ex: monthly subscriber)
+     */
+    notification?: RumbleNotification,
 }
 
 /**