-
diff --git a/twirch/src/app/app.component.scss b/twirch/src/app/app.component.scss
index 92be210..2c69e2b 100644
--- a/twirch/src/app/app.component.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/twirch/src/app/app.component.ts b/twirch/src/app/app.component.ts
index ee87686..a19817c 100644
--- a/twirch/src/app/app.component.ts
+++ b/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);
}
diff --git a/twirch/src/app/app.module.ts b/twirch/src/app/app.module.ts
index 7886805..98f98ce 100644
--- a/twirch/src/app/app.module.ts
+++ b/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 { }
diff --git a/twirch/src/app/components/aboutDialog/aboutDialog.component.html b/twirch/src/app/components/aboutDialog/aboutDialog.component.html
new file mode 100644
index 0000000..ede8581
--- /dev/null
+++ b/twirch/src/app/components/aboutDialog/aboutDialog.component.html
@@ -0,0 +1,10 @@
+
+
diff --git a/twirch/src/app/components/aboutDialog/aboutDialog.component.scss b/twirch/src/app/components/aboutDialog/aboutDialog.component.scss
new file mode 100644
index 0000000..e120f1d
--- /dev/null
+++ b/twirch/src/app/components/aboutDialog/aboutDialog.component.scss
@@ -0,0 +1,6 @@
+@use '../../../variables';
+
+#aboutContent {
+ width: 100%;
+ height: 100%;
+}
diff --git a/twirch/src/app/components/toolbar/toolbar.component.spec.ts b/twirch/src/app/components/aboutDialog/aboutDialog.component.spec.ts
similarity index 61%
rename from twirch/src/app/components/toolbar/toolbar.component.spec.ts
rename to twirch/src/app/components/aboutDialog/aboutDialog.component.spec.ts
index 4ace9e8..2b7fd75 100644
--- a/twirch/src/app/components/toolbar/toolbar.component.spec.ts
+++ b/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: ComponentFixtureWhat is twirch?
+twirch is a simple web application designed to combine multiple Twitch chats into a single scrolling window.
+How do I use it?
+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
+Who makes this?
+I'm Michael "UrzaMTG" McBride, I develop this in my downtime. If you see any issues, the project is on GitHub at + https://github.com/UrzaMTG/twirch
+
- twirch
- 
-
diff --git a/twirch/src/app/components/toolbar/toolbar.component.scss b/twirch/src/app/components/toolbar/toolbar.component.scss
deleted file mode 100644
index 0d6c6a5..0000000
--- a/twirch/src/app/components/toolbar/toolbar.component.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-#navBar {
- background:rgba(0, 0, 0, 0.75);
- color: rgba(224, 224, 224, 1);
- 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;
-}
-
-.flexSpacer {
- flex-grow: 99;
- text-align: center;
-}
-
-.icon {
- position: relative;
- color: inherit;
- top: 0px;
- width: 24px;
- height: 24px;
-}
\ No newline at end of file
diff --git a/twirch/src/app/components/toolbar/toolbar.component.ts b/twirch/src/app/components/toolbar/toolbar.component.ts
deleted file mode 100644
index edf00f1..0000000
--- a/twirch/src/app/components/toolbar/toolbar.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-toolbar',
- templateUrl: './toolbar.component.html',
- styleUrls: ['./toolbar.component.scss']
-})
-export class ToolbarComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit() {
- }
-
-}
diff --git a/twirch/src/app/models/BadgeData.ts b/twirch/src/app/models/BadgeData.ts
new file mode 100644
index 0000000..480ee6e
--- /dev/null
+++ b/twirch/src/app/models/BadgeData.ts
@@ -0,0 +1,12 @@
+export interface BadgeData {
+ badge_sets: {[id: string]: FullBadge};
+}
+
+export interface FullBadge {
+ versions: {[version: string]: BadgeVersion};
+}
+
+export interface BadgeVersion {
+ image_url_1x: string;
+ title: string;
+}
\ No newline at end of file
diff --git a/twirch/src/app/services/Badges.service.spec.ts b/twirch/src/app/services/Badges.service.spec.ts
new file mode 100644
index 0000000..4967171
--- /dev/null
+++ b/twirch/src/app/services/Badges.service.spec.ts
@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { BadgeService } from './Badges.service';
+
+describe('Service: Badges', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [BadgeService]
+ });
+ });
+
+ it('should ...', inject([BadgeService], (service: BadgeService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/twirch/src/app/services/Badges.service.ts b/twirch/src/app/services/Badges.service.ts
new file mode 100644
index 0000000..7c9439d
--- /dev/null
+++ b/twirch/src/app/services/Badges.service.ts
@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from "@angular/common/http";
+
+import { Badges } from 'tmi.js';
+import { BadgeData } from '../models/BadgeData';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class BadgeService {
+ private data?: BadgeData;
+
+ constructor(private http: HttpClient) {
+ const url = 'https://badges.twitch.tv/v1/badges/global/display';
+ this.http.get
-