14 support badges

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twirch",
-  "version": "0.0.1",
+  "version": "0.3.0",
   "description": "App for viewing multiple Twitch chats in a single feed",
   "author": "Michael McBride",
   "license": "MIT",

server.js

@@ -18,7 +18,8 @@ const io = new Server(httpServer, {
   cors: {
     origin: [
       'https://twirch.io',
-      'http://localhost:3080'
+      'http://localhost:3080',
+      'http://localhost:4200'
     ],
     preflightContinue: true
   }

twirch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twirch",
-  "version": "0.0.0",
+  "version": "0.3.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^15.2.0",
+    "@angular/cdk": "^15.2.6",
     "@angular/common": "^15.2.0",
     "@angular/compiler": "^15.2.0",
     "@angular/core": "^15.2.0",
     "@angular/forms": "^15.2.0",
+    "@angular/material": "^15.2.6",
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
@@ -39,4 +41,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.9.4"
   }
-}
+}

twirch/src/_variables.scss

@@ -0,0 +1,5 @@
+$background-color: rgb(15, 15, 15);
+$background-alt-row-color: rgb(41, 41, 41);
+$text-color: rgb(224, 224, 224);
+$channel-color: rgb(150, 150, 150);
+$timestamp-color: rgb(105, 105, 105);

twirch/src/app/app.component.html

@@ -1,10 +1,13 @@
-<app-toolbar></app-toolbar>
-
+<div id="navBar">
+  <span class="flexSpacer">twirch</span>
+  <span><img class="icon" src="../../assets/images/gear.svg" role="img" alt><img class="icon" src="../../assets/images/question.svg" role="img" (click)="openAbout()" alt></span>
+</div>
 <div id="main">
   <ul id="messages" #scrollArea>
     <li *ngFor="let message of messages" class="messageContainer">
       <span class="messageChannel">({{message.channel}})</span>
       <span class="messageTimestamp" [hidden]="!message.timestamp">{{message.timestamp | date:'h:mm'}}</span>
+      <span class="messageBadges" [hidden]="!message['badges-raw']" [innerHTML]="message['badges-raw']"></span>
       <span class="messageUsername" [ngStyle]="{'color': message.color}">{{message['display-name']}}:</span>
       <span class="messageText" [innerHTML]="message.message"></span>
     </li>

twirch/src/app/app.component.scss

@@ -1,8 +1,43 @@
-$background-color: rgb(15, 15, 15);
-$background-alt-row-color: rgb(41, 41, 41);
-$text-color: rgb(224, 224, 224);
-$channel-color: rgb(150, 150, 150);
-$timestamp-color: rgb(105, 105, 105);
+@use '../variables';
+
+#navBar {
+  background:rgba(0, 0, 0, 0.75);
+  color: variables.$text-color;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 32px;
+  line-height: 32px;
+  padding: 0px 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  z-index: 1;
+}
+
+#main {
+  z-index: 0;
+}
+
+.flexSpacer {
+  flex-grow: 99;
+  text-align: center;
+}
+
+.icon {
+  position: relative;
+  color: inherit;
+  top: 0px;
+  width: 24px;
+  height: 24px;
+}
+
+.icon:hover {
+  cursor: pointer;
+}
 
 #messages {
   list-style-type: none;
@@ -11,17 +46,28 @@ $timestamp-color: rgb(105, 105, 105);
   bottom: 0;
   left: 0;
   right: 0;
-  overflow: auto;
+  overflow: overlay;
   overflow-y: scroll;
   margin: 32px 0 0 0;
   padding: 0;
 }
+
+#messages::-webkit-scrollbar {
+  width: 4px;
+}
+
+#messages::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0);
+}
+
+#messages::-webkit-scrollbar-thumb {
+  background-color: variables.$timestamp-color;
+  border-radius: 10px;
+}
+
 #messages > li {
   padding: 0.5rem 0.5rem;
 }
-#messages > li:nth-child(odd) {
-  background: $background-alt-row-color;
-}
 
 .messageContainer {
   word-wrap: break-word;
@@ -30,27 +76,37 @@ $timestamp-color: rgb(105, 105, 105);
 }
 
 .messageChannel {
-  color: $channel-color;
+  color: variables.$channel-color;
   padding-right: 4px;
 }
 
 .messageTimestamp {
-  color: $timestamp-color;
+  color: variables.$timestamp-color;
   padding-right: 4px;
 }
 
+.messageBadges {
+  padding-right: 2px;
+}
+
 .messageUsername {
-  color: $text-color;
+  color: variables.$text-color;
   font-weight: 600;
   padding-right: 4px;
 }
 
 .messageText {
-  color: $text-color;
+  color: variables.$text-color;
 }
 
 img.twitch-emote {
   margin: -0.5rem 0;
   position: relative;
   vertical-align: initial;
+}
+
+img.twitch-badge {
+  position: relative;
+  vertical-align: text-top;
+  padding-right: 2px;
 }

twirch/src/app/app.component.ts

@@ -1,10 +1,13 @@
 import { AfterViewChecked, Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Location } from '@angular/common';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import { EmoteOptions, parse } from 'simple-tmi-emotes'
 
 import { Message } from './models/message';
 import { ChannelService } from './services/channel-service.service';
+import { BadgeService } from './services/Badges.service';
+import { AboutDialogComponent } from './components/aboutDialog/aboutDialog.component';
 
 @Component({
   selector: 'app-root',
@@ -20,7 +23,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewChecked  {
 
   private _msgSub?: Subscription;
 
-  constructor(private location: Location, private channelService: ChannelService) {
+  constructor(private location: Location, private channelService: ChannelService, private badgeService: BadgeService, private dialog: MatDialog) {
     channelService.selectChannels(location.path().split('/').splice(1));
   }
 
@@ -36,6 +39,16 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewChecked  {
     this._msgSub?.unsubscribe();
   }
 
+  openAbout() {
+    const dialogConfig = new MatDialogConfig();
+
+    dialogConfig.panelClass = 'aboutPanel';
+    dialogConfig.maxHeight = '90%';
+    dialogConfig.maxWidth = '90%';
+
+    this.dialog.open(AboutDialogComponent, dialogConfig);
+  }
+
   private processMessage(msg: Message): void {
     // Add timestamp
     msg.timestamp = new Date(Date.now());
@@ -53,6 +66,10 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewChecked  {
       msg.message = parse(msg.message, msg.emotes, options);
     }
 
+    if (msg.badges) {
+      msg['badges-raw'] = this.badgeService.parseBadges(msg.badges);
+    }
+
     // Push to bound array
     this.messages.push(msg);
   }

twirch/src/app/app.module.ts

@@ -5,26 +5,32 @@ import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { ToolbarComponent } from './components/toolbar/toolbar.component';
+import { AboutDialogComponent } from './components/aboutDialog/aboutDialog.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { HttpClientModule } from '@angular/common/http';
 
 const config: SocketIoConfig = {
   url: 'https://twirch.io',
   options: {
-    transports: ['polling', 'websocket']
-  }
+    transports: ['polling', 'websocket'],
+    closeOnBeforeunload: true
+  },
 };
 
 @NgModule({
   declarations: [		
     AppComponent,
-    ToolbarComponent
+    AboutDialogComponent
    ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    SocketIoModule.forRoot(config)
+    SocketIoModule.forRoot(config),
+    MatDialogModule,
+    HttpClientModule
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  entryComponents: [AboutDialogComponent]
 })
 export class AppModule { }

twirch/src/app/components/aboutDialog/aboutDialog.component.html

@@ -0,0 +1,10 @@
+<div id="aboutContent">
+  <h2>What is twirch?</h2>
+  <p>twirch is a simple web application designed to combine multiple Twitch chats into a single scrolling window.</p>
+  <h2>How do I use it?</h2>
+  <p>Type the channels that you want to combine into the URL bar, separated by slashes (/). For example, if you want to
+    combine Channel1 and Channel2, your twirch URL would be twirch.io/channel1/channel2</p>
+  <h2>Who makes this?</h2>
+  <p>I'm Michael "UrzaMTG" McBride, I develop this in my downtime. If you see any issues, the project is on GitHub at 
+    <a target="_blank" href="https://github.com/UrzaMTG/twirch">https://github.com/UrzaMTG/twirch</a></p>
+</div>

twirch/src/app/components/aboutDialog/aboutDialog.component.scss

@@ -0,0 +1,6 @@
+@use '../../../variables';
+
+#aboutContent {
+  width: 100%;
+  height: 100%;
+}

twirch/src/app/components/toolbar/toolbar.component.spec.ts → twirch/src/app/components/aboutDialog/aboutDialog.component.spec.ts

@@ -3,21 +3,21 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 
-import { ToolbarComponent } from './toolbar.component';
+import { AboutDialogComponent } from './aboutDialog.component';
 
-describe('ToolbarComponent', () => {
-  let component: ToolbarComponent;
-  let fixture: ComponentFixture<ToolbarComponent>;
+describe('AboutDialogComponent', () => {
+  let component: AboutDialogComponent;
+  let fixture: ComponentFixture<AboutDialogComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ToolbarComponent ]
+      declarations: [ AboutDialogComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ToolbarComponent);
+    fixture = TestBed.createComponent(AboutDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

twirch/src/app/components/aboutDialog/aboutDialog.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-aboutDialog',
+  templateUrl: './aboutDialog.component.html',
+  styleUrls: ['./aboutDialog.component.scss']
+})
+export class AboutDialogComponent implements OnInit {
+
+  constructor(public dialogRef: MatDialogRef<AboutDialogComponent>) { }
+
+  ngOnInit() {
+  }
+
+}