Misc style improvements and code cleanup

src/app/components/recent-videos/recent-videos.component.html

@@ -87,7 +87,7 @@
                     <mat-list-option [selected]="selected_data.includes(file.uid)" *ngFor="let file of paged_data" [value]="file">
                         <div class="container">
                             <div class="row justify-content-center">
-                                <div class="col-10">
+                                <div class="col-10 select-file-title">
                                     <mat-icon class="audio-video-icon">{{(file.type === 'audio' || file.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>
                                     {{file.title}}
                                 </div>

src/app/components/recent-videos/recent-videos.component.scss

@@ -100,7 +100,7 @@
 .remove-item-button {
     right: 10px;
     position: absolute;
-    top: 4px;
+    top: 0px;
 }
 
 .playlist-item-text {
@@ -126,4 +126,10 @@
 
 .hide {
     display: none !important;
+}
+
+.select-file-title {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }

src/app/components/recent-videos/recent-videos.component.ts

@@ -6,8 +6,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { Subject } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { MatChipListboxChange, MatChipOption } from '@angular/material/chips';
-import { KeyValue } from '@angular/common';
+import { MatChipListboxChange } from '@angular/material/chips';
 
 @Component({
   selector: 'app-recent-videos',

src/app/create-playlist/create-playlist.component.html

@@ -1,4 +1,3 @@
-<div class="fixActionRow">
 <h4 mat-dialog-title *ngIf="create_mode" ><ng-container i18n="Create a playlist dialog title">Create a playlist</ng-container></h4>
 <h4 mat-dialog-title *ngIf="!create_mode"><ng-container i18n="Modify playlist dialog title">Modify playlist</ng-container></h4>
 
@@ -19,12 +18,11 @@
 <div class="spacer"></div>
 
 <mat-dialog-actions>
-    <button *ngIf="create_mode" (click)="createPlaylist()" [disabled]="!name || !filesSelect.value || filesSelect.value.length === 0" color="primary" style="float: right" mat-flat-button>
+    <button *ngIf="create_mode" (click)="createPlaylist()" [disabled]="!name || !filesSelect.value || filesSelect.value.length === 0" color="primary" style="float: right" mat-button>
         <ng-container i18n="Create button">Create</ng-container>
     </button>
-    <button *ngIf="!create_mode" (click)="updatePlaylist()" [disabled]="!name || !playlistChanged()" color="primary" style="float: right" mat-flat-button>
+    <button *ngIf="!create_mode" (click)="updatePlaylist()" [disabled]="!name || !playlistChanged()" color="primary" style="float: right" mat-button>
         <ng-container i18n="Save button">Save</ng-container>
     </button>
     <div *ngIf="create_in_progress" style="margin-left: 10px"><mat-spinner [diameter]="25"></mat-spinner></div>
 </mat-dialog-actions>
-</div>

src/app/main/main.component.html

@@ -79,7 +79,7 @@
                     Download
                 </ng-container>
             </button>
-            <button (click)="cancelDownload()" style="float: right" *ngIf="!!current_download" mat-stroked-button color="warn">
+            <button (click)="cancelDownload()" style="margin-left: 8px; margin-bottom: 8px" *ngIf="!!current_download" mat-stroked-button color="warn">
                 <ng-container i18n="Cancel download button">
                     Cancel
                 </ng-container>

src/app/player/player.component.html

@@ -37,7 +37,7 @@
                                         <button *ngIf="type !== 'subscription' && (!postsService.isLoggedIn || postsService.permissions.includes('sharing'))" (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button>
                                         <button (click)="openFileInfoDialog()" *ngIf="db_file" mat-icon-button><mat-icon>info</mat-icon></button>
                                     </ng-container>
-                                    <button *ngIf="db_file && db_file.url.includes('twitch.tv/videos/') && postsService['config']['API']['use_twitch_API']" (click)="drawer.toggle()" mat-icon-button><mat-icon>chat</mat-icon></button>
+                                    <button *ngIf="db_file && db_file.url.includes('twitch.tv') && postsService['config']['API']['use_twitch_API']" (click)="drawer.toggle()" mat-icon-button><mat-icon>chat</mat-icon></button>
                                 </div>
                             </div>
                         </div>
@@ -51,7 +51,7 @@
                     <app-concurrent-stream *ngIf="db_file && api && postsService.config" (setPlaybackRate)="setPlaybackRate($event)" (togglePlayback)="togglePlayback($event)" (setPlaybackTimestamp)="setPlaybackTimestamp($event)" [playing]="api.state === 'playing'" [uid]="uid" [playback_timestamp]="api.time.current/1000" [server_mode]="!postsService.config.Advanced.multi_user_mode || postsService.isLoggedIn"></app-concurrent-stream>
 
                     <mat-drawer #drawer class="example-sidenav" mode="side" position="end" [opened]="db_file && db_file['chat_exists'] && postsService['config']['API']['use_twitch_API']">
-                        <ng-container *ngIf="api_ready && db_file && db_file.url.includes('twitch.tv/videos/')">
+                        <ng-container *ngIf="api_ready && db_file && db_file.url.includes('twitch.tv')">
                             <app-twitch-chat #twitchchat [db_file]="db_file" [current_timestamp]="api.currentTime" [sub]="subscription"></app-twitch-chat>
                         </ng-container>
                     </mat-drawer>

src/styles.scss

@@ -143,3 +143,13 @@ $light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
+
+.mat-mdc-icon {
+  align-items: center;
+  display: inline-flex;
+}
+
+.mdc-icon-button {
+  align-items: center !important;
+  display: inline-flex !important;
+}