From f425b9842f9e20282218331099ef6a07094a5f71 Mon Sep 17 00:00:00 2001
From: Isaac Abadi <IsaacMGrynsztein@gmail.com>
Date: Tue, 8 Dec 2020 22:57:09 -0500
Subject: [PATCH] Updated twitch chat component to support user colors and to
 auto open if the chat has already been downloaded

---
 backend/app.js                                            | 2 ++
 backend/twitch.js                                         | 6 ++++--
 src/app/components/twitch-chat/twitch-chat.component.html | 4 ++--
 src/app/player/player.component.html                      | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/backend/app.js b/backend/app.js
index e50dc8d..0cdd414 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -2037,6 +2037,8 @@ app.post('/api/getFile', optionalJwt, function (req, res) {
         if (!file && type) file = db.get(`files.${type}`).find({uid: uid}).value();
     }
 
+    // check if chat exists for twitch videos
+    if (file['url'].includes('twitch.tv')) file['chat_exists'] = fs.existsSync(file['path'].substring(0, file['path'].length - 4) + '.twitch_chat.json');
 
     if (file) {
         res.send({
diff --git a/backend/twitch.js b/backend/twitch.js
index 62c390d..fb05fbb 100644
--- a/backend/twitch.js
+++ b/backend/twitch.js
@@ -28,7 +28,8 @@ async function getCommentsForVOD(clientID, vodId) {
                             created_at: acctCreated
                         },
                         message: {
-                            body: msg
+                            body: msg,
+                            user_color: user_color
                         }
                     } = c;
 
@@ -49,7 +50,8 @@ async function getCommentsForVOD(clientID, vodId) {
                     timestamp: timestamp,
                     timestamp_str: timestamp_str,
                     name: name,
-                    message: msg
+                    message: msg,
+                    user_color: user_color
                 });
                 // let line = `${timestamp},${msgCreated.format(tsFormat)},${name},${_id},"${msg.replace(/"/g, '""')}",${acctCreated.format(tsFormat)}`;
                 // return line;
diff --git a/src/app/components/twitch-chat/twitch-chat.component.html b/src/app/components/twitch-chat/twitch-chat.component.html
index 7ad40fc..634cac6 100644
--- a/src/app/components/twitch-chat/twitch-chat.component.html
+++ b/src/app/components/twitch-chat/twitch-chat.component.html
@@ -1,11 +1,11 @@
 <div class="chat-container" #scrollContainer *ngIf="visible_chat">
     <div style="width: 250px; text-align: center;"><strong>Twitch Chat</strong></div>
     <div style="max-width: 250px" *ngFor="let chat of visible_chat">
-        {{chat.timestamp_str}} - <strong>{{chat.name}}</strong>: {{chat.message}}
+        {{chat.timestamp_str}} - <strong [style.color]="chat.user_color ? chat.user_color : null">{{chat.name}}</strong>: {{chat.message}}
     </div>
 </div>
 
 <ng-container *ngIf="chat_response_received && !full_chat">
-    <button (click)="downloadTwitchChat()" class="download-button" mat-raised-button color="accent"><ng-container i18n="Download Twitch Chat button">Download Twitch Chat</ng-container></button>
+    <button [disabled]="downloading_chat" (click)="downloadTwitchChat()" class="download-button" mat-raised-button color="accent"><ng-container i18n="Download Twitch Chat button">Download Twitch Chat</ng-container></button>
     <mat-spinner *ngIf="downloading_chat" class="downloading-spinner" [diameter]="30"></mat-spinner>
 </ng-container>
\ No newline at end of file
diff --git a/src/app/player/player.component.html b/src/app/player/player.component.html
index c70800d..6774ace 100644
--- a/src/app/player/player.component.html
+++ b/src/app/player/player.component.html
@@ -13,7 +13,7 @@
                             <mat-button-toggle cdkDrag *ngFor="let playlist_item of playlist; let i = index" [checked]="currentItem.title === playlist_item.title" (click)="onClickPlaylistItem(playlist_item, i)" class="toggle-button" [value]="playlist_item.title">{{playlist_item.label}}</mat-button-toggle>
                         </mat-button-toggle-group>
                     </div>
-                    <mat-drawer #drawer class="example-sidenav" mode="side" position="end" opened="false">
+                    <mat-drawer #drawer class="example-sidenav" mode="side" position="end" [opened]="db_file && db_file['chat_exists']">
                         <ng-container *ngIf="api_ready && db_file && db_file.url.includes('twitch.tv/videos/')">
                             <app-twitch-chat #twitchchat [db_file]="db_file" [current_timestamp]="api.currentTime"></app-twitch-chat>
                         </ng-container>