Updated twitch chat component to support user colors and to auto open if the chat has already been downloaded

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({

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;

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>

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>