Tasks actions styling update

Fixed api types build errors

.github/workflows/docker.yml

@@ -80,7 +80,7 @@ jobs:
         with:
           context: .
           file: ./Dockerfile
-          platforms: linux/amd64,linux/arm64/v8,linux/arm/v7
+          platforms: linux/amd64,linux/arm64/v8
           push: true
           tags: ${{ steps.docker-meta.outputs.tags }}
           labels: ${{ steps.docker-meta.outputs.labels }}

backend/app.js

@@ -1945,10 +1945,6 @@ app.post('/api/auth/register', optionalJwt, async (req, res) => {
         res.sendStatus(409);
         return;
     }
-
-    if (!userid || !username) {
-        logger.error(`Registration failed for user ${userid}. Username or userid is invalid.`);
-    }
   
     const new_user = await auth_api.registerUser(userid, username, plaintextPassword);
   

backend/entrypoint.sh

@@ -1,7 +1,17 @@
-#!/bin/bash
+#!/bin/sh
 set -eu
 
+CMD="npm start && pm2 start"
+
+# if the first arg starts with "-" pass it to program
+if [ "${1#-}" != "$1" ]; then
+  set -- "$CMD" "$@"
+fi
+
 # chown current working directory to current user
-echo "[entrypoint] setup permission, this may take a while"
+if [ "$*" = "$CMD" ] && [ "$(id -u)" = "0" ]; then
-find . \! -user "$UID" -exec chown "$UID:$GID" '{}' + || echo "WARNING! Could not change directory ownership. If you manage permissions externally this is fine, otherwise you may experience issues when downloading or deleting videos."
+  find . \! -user "$UID" -exec chown "$UID:$GID" -R '{}' + || echo "WARNING! Could not change directory ownership. If you manage permissions externally this is fine, otherwise you may experience issues when downloading or deleting videos."
-exec gosu "$UID:$GID" "$@"
+  exec gosu "$UID:$GID" "$0" "$@"
+fi
+
+exec "$@"

backend/subscriptions.js

@@ -373,13 +373,10 @@ async function generateArgsForSubscription(sub, user_uid, redownload = false, de
 
     // skip videos that are in the archive. otherwise sub download can be permanently slow (vs. just the first time)
     const archive_text = await archive_api.generateArchive(sub.type, sub.user_uid, sub.id);
-    const archive_count = archive_text.split('\n').length - 1;
+    logger.verbose(`Generating temporary archive file for subscription ${sub.name} with ${archive_text.split('\n').length - 1} entries.`)
-    if (archive_count > 0) {
+    const archive_path = path.join(appendedBasePath, 'archive.txt');
-        logger.verbose(`Generating temporary archive file for subscription ${sub.name} with ${archive_count} entries.`)
+    await fs.writeFile(archive_path, archive_text);
-        const archive_path = path.join(appendedBasePath, 'archive.txt');
+    downloadConfig.push('--download-archive', archive_path);
-        await fs.writeFile(archive_path, archive_text);
-        downloadConfig.push('--download-archive', archive_path);
-    }
 
     if (sub.custom_args) {
         const customArgsArray = sub.custom_args.split(',,');

chart/Chart.yaml

@@ -21,4 +21,4 @@ version: 0.1.0
 # incremented each time you make changes to the application. Versions are not expected to
 # follow Semantic Versioning. They should reflect the version the application is using.
 # It is recommended to use it with quotes.
-appVersion: "4.3.2"
+appVersion: "4.3.1"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "youtube-dl-material",
-  "version": "4.3.2",
+  "version": "4.3.1",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

src/app/app.component.html

@@ -17,11 +17,11 @@
                         </mat-menu>
                         <button [matMenuTriggerFor]="menuSettings" mat-icon-button><mat-icon>more_vert</mat-icon></button>
                         <mat-menu #menuSettings="matMenu">
-                            <button class="top-menu-button" (click)="openProfileDialog()" mat-menu-item>
+                            <button class="top-menu-button" (click)="openProfileDialog()" *ngIf="postsService.isLoggedIn" mat-menu-item>
                                 <mat-icon>person</mat-icon>
                                 <span i18n="Profile menu label">Profile</span>
                             </button>
-                            <button *ngIf="!postsService.config?.Advanced.multi_user_mode || postsService.isLoggedIn" class="top-menu-button" (click)="openArchivesDialog()" mat-menu-item>
+                            <button class="top-menu-button" (click)="openArchivesDialog()" mat-menu-item>
                                 <mat-icon>topic</mat-icon>
                                 <span i18n="Archives menu label">Archives</span>
                             </button>

src/app/app.module.ts

@@ -34,7 +34,6 @@ import { MatBadgeModule } from '@angular/material/badge';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import { ScrollingModule } from '@angular/cdk/scrolling';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
@@ -190,7 +189,6 @@ registerLocaleData(es, 'es');
         DragDropModule,
         ClipboardModule,
         TextFieldModule,
-        ScrollingModule,
         NgxFileDropModule,
         AvatarModule,
         ContentLoaderModule,

src/app/components/downloads/downloads.component.html

@@ -10,8 +10,8 @@
       
           <!-- Title Column -->
           <ng-container matColumnDef="title">
-            <mat-header-cell *matHeaderCellDef mat-sort-header style="flex: 2"> <ng-container i18n="Title">Title</ng-container> </mat-header-cell>
+            <mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Title">Title</ng-container> </mat-header-cell>
-            <mat-cell *matCellDef="let element" style="flex: 2">
+            <mat-cell *matCellDef="let element">
                 <span class="one-line" [matTooltip]="element.title ? element.title : null">
                     {{element.title}}
                 </span>
@@ -31,47 +31,41 @@
             </mat-cell>
           </ng-container>
       
+          <!-- Stage Column -->
+          <ng-container matColumnDef="step_index">
+            <mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Stage">Stage</ng-container> </mat-header-cell>
+            <mat-cell *matCellDef="let element"> {{STEP_INDEX_TO_LABEL[element.step_index]}} </mat-cell>
+          </ng-container>
+      
           <!-- Progress Column -->
           <ng-container matColumnDef="percent_complete">
             <mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Progress">Progress</ng-container> </mat-header-cell>
             <mat-cell *matCellDef="let element">
-              <ng-container *ngIf="!element.error && element.step_index !== 2">
-                {{STEP_INDEX_TO_LABEL[element.step_index]}}
-              </ng-container>
-              <ng-container *ngIf="!element.error && element.step_index === 2">
                 <ng-container *ngIf="element.percent_complete">
-                  {{+(element.percent_complete) > 100 ? '100' : element.percent_complete}}%
+                    {{+(element.percent_complete) > 100 ? '100' : element.percent_complete}}%
                 </ng-container>
                 <ng-container *ngIf="!element.percent_complete">
-                  N/A
+                    N/A
                 </ng-container>
-              </ng-container>
-              <ng-container *ngIf="element.error" i18n="Error">Error</ng-container>
             </mat-cell>
           </ng-container>
 
           <!-- Actions Column -->
           <ng-container matColumnDef="actions">
-            <mat-header-cell *matHeaderCellDef [ngStyle]="{flex: actionsFlex}"> <ng-container i18n="Actions">Actions</ng-container> </mat-header-cell>
+            <mat-header-cell *matHeaderCellDef> <ng-container i18n="Actions">Actions</ng-container> </mat-header-cell>
-            <mat-cell *matCellDef="let element" [ngStyle]="{flex: actionsFlex}">
+            <mat-cell *matCellDef="let element">
-                <div *ngIf="!minimizeButtons">
+                <div>
-                  <ng-container *ngFor="let downloadAction of downloadActions">
+                  <ng-container *ngIf="!element.finished">
-                    <span class="button-span">
+                    <button (click)="pauseDownload(element.uid)" *ngIf="!element.paused || !element.finished_step" [disabled]="element.paused && !element.finished_step" mat-icon-button matTooltip="Pause" i18n-matTooltip="Pause"><mat-spinner [diameter]="28" *ngIf="element.paused && !element.finished_step" class="icon-button-spinner"></mat-spinner><mat-icon>pause</mat-icon></button>
-                      <mat-spinner [diameter]="28" *ngIf="downloadAction.loading && downloadAction.loading(element)" class="icon-button-spinner"></mat-spinner>
+                    <button (click)="resumeDownload(element.uid)" *ngIf="element.paused && element.finished_step" mat-icon-button matTooltip="Resume" i18n-matTooltip="Resume"><mat-icon>play_arrow</mat-icon></button>
-                      <button *ngIf="downloadAction.show(element)" (click)="downloadAction.action(element)" [disabled]="downloadAction.loading && downloadAction.loading(element)" [matTooltip]="downloadAction.tooltip" mat-icon-button><mat-icon>{{downloadAction.icon}}</mat-icon></button>
+                    <button *ngIf="false && !element.paused" (click)="cancelDownload(element.uid)" mat-icon-button matTooltip="Cancel" i18n-matTooltip="Cancel"><mat-icon>cancel</mat-icon></button>
-                    </span>
                   </ng-container>
-                </div>
+                  <ng-container *ngIf="element.finished">
-                <div *ngIf="minimizeButtons">
+                    <button *ngIf="!element.error" (click)="watchContent(element)" mat-icon-button matTooltip="Watch content" i18n-matTooltip="Watch content"><mat-icon>smart_display</mat-icon></button>
-                  <button [matMenuTriggerFor]="download_actions" mat-icon-button><mat-icon>more_vert</mat-icon></button>
+                    <button *ngIf="element.error" (click)="showError(element)" mat-icon-button matTooltip="Show error" i18n-matTooltip="Show error"><mat-icon>warning</mat-icon></button>
-                  <mat-menu #download_actions="matMenu">
+                    <button (click)="restartDownload(element.uid)" mat-icon-button matTooltip="Restart" i18n-matTooltip="Restart"><mat-icon>restart_alt</mat-icon></button>
-                    <ng-container *ngFor="let downloadAction of downloadActions">
+                  </ng-container>
-                      <button *ngIf="downloadAction.show(element)" (click)="downloadAction.action(element)" [disabled]="downloadAction.loading && downloadAction.loading(element)" mat-menu-item>
+                  <button *ngIf="element.finished || element.paused" (click)="clearDownload(element.uid)" mat-icon-button matTooltip="Clear" i18n-matTooltip="Clear"><mat-icon>delete</mat-icon></button>
-                        <mat-icon>{{downloadAction.icon}}</mat-icon>
-                        <span>{{downloadAction.tooltip}}</span>
-                      </button>
-                    </ng-container>
-                  </mat-menu>
                 </div>
             </mat-cell>
           </ng-container>
@@ -86,9 +80,9 @@
         </mat-paginator>
       </div>
       <div *ngIf="!uids" class="downloads-action-button-div">
-        <button class="downloads-action-button" [disabled]="!running_download_exists" mat-stroked-button (click)="pauseAllDownloads()"><ng-container i18n="Pause all downloads">Pause all downloads</ng-container></button>
+        <button [disabled]="!running_download_exists" mat-stroked-button (click)="pauseAllDownloads()"><ng-container i18n="Pause all downloads">Pause all downloads</ng-container></button>
-        <button class="downloads-action-button" [disabled]="!paused_download_exists" mat-stroked-button (click)="resumeAllDownloads()"><ng-container i18n="Resume all downloads">Resume all downloads</ng-container></button>
+        <button style="margin-left: 10px;" [disabled]="!paused_download_exists" mat-stroked-button (click)="resumeAllDownloads()"><ng-container i18n="Resume all downloads">Resume all downloads</ng-container></button>
-        <button class="downloads-action-button" color="warn" mat-stroked-button (click)="clearDownloadsByType()"><ng-container i18n="Clear downloads">Clear downloads</ng-container></button>
+        <button color="warn" style="margin-left: 10px;" mat-stroked-button (click)="clearDownloadsByType()"><ng-container i18n="Clear downloads">Clear downloads</ng-container></button>
       </div>
 </div>
 

src/app/components/downloads/downloads.component.scss

@@ -10,21 +10,13 @@ mat-header-cell, mat-cell {
 
 .icon-button-spinner {
     position: absolute;
-    top: -13px;
+    top: 7px;
-    left: 10px;
+    left: 6px;
-}
-
-.button-span {
-    position: relative;;
 }
 
 .downloads-action-button-div {
-    margin-left: 5px;
-}
-
-.downloads-action-button {
     margin-top: 10px;
-    margin-right: 10px;
+    margin-left: 5px;
 }
 
 .rounded-top {

src/app/components/downloads/downloads.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ViewChild, Input, EventEmitter, HostListener } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, Input, EventEmitter } from '@angular/core';
 import { PostsService } from 'app/posts.services';
 import { trigger, transition, animateChild, stagger, query, style, animate } from '@angular/animations';
 import { Router } from '@angular/router';
@@ -13,7 +13,31 @@ import { Download } from 'api-types';
 @Component({
   selector: 'app-downloads',
   templateUrl: './downloads.component.html',
-  styleUrls: ['./downloads.component.scss']
+  styleUrls: ['./downloads.component.scss'],
+  animations: [
+    // nice stagger effect when showing existing elements
+    trigger('list', [
+      transition(':enter', [
+        // child animation selector + stagger
+        query('@items',
+          stagger(100, animateChild()), { optional: true }
+        )
+      ]),
+    ]),
+    trigger('items', [
+      // cubic-bezier for a tiny bouncing feel
+      transition(':enter', [
+        style({ transform: 'scale(0.5)', opacity: 0 }),
+        animate('500ms cubic-bezier(.8,-0.6,0.2,1.5)',
+          style({ transform: 'scale(1)', opacity: 1 }))
+      ]),
+      transition(':leave', [
+        style({ transform: 'scale(1)', opacity: 1, height: '*' }),
+        animate('1s cubic-bezier(.8,-0.6,0.2,1.5)',
+          style({ transform: 'scale(0.5)', opacity: 0, height: '0px', margin: '0px' }))
+      ]),
+    ])
+  ],
 })
 export class DownloadsComponent implements OnInit, OnDestroy {
 
@@ -38,79 +62,13 @@ export class DownloadsComponent implements OnInit, OnDestroy {
       3: $localize`Complete`
   }
 
-  actionsFlex = 2;
+  displayedColumns: string[] = ['timestamp_start', 'title', 'step_index', 'sub_name', 'percent_complete', 'actions'];
-  minimizeButtons = false;
-  displayedColumnsBig: string[] = ['timestamp_start', 'title', 'sub_name', 'percent_complete', 'actions'];
-  displayedColumnsSmall: string[] = ['title', 'percent_complete', 'actions'];
-  displayedColumns: string[] = this.displayedColumnsBig;
   dataSource = null; // new MatTableDataSource<Download>();
-
-  // The purpose of this is to reduce code reuse for displaying these actions as icons or in a menu
-  downloadActions: DownloadAction[] = [
-    {
-      tooltip: $localize`Watch content`,
-      action: (download: Download) => this.watchContent(download),
-      show: (download: Download) => download.finished && !download.error,
-      icon: 'smart_display'
-    },
-    {
-      tooltip: $localize`Show error`,
-      action: (download: Download) => this.showError(download),
-      show: (download: Download) => download.finished && !!download.error,
-      icon: 'warning'
-    },
-    {
-      tooltip: $localize`Restart`,
-      action: (download: Download) => this.restartDownload(download),
-      show: (download: Download) => download.finished,
-      icon: 'restart_alt'
-    },
-    {
-      tooltip: $localize`Pause`,
-      action: (download: Download) => this.pauseDownload(download),
-      show: (download: Download) => !download.finished && (!download.paused || !download.finished_step),
-      icon: 'pause',
-      loading: (download: Download) => download.paused && !download.finished_step
-    },
-    {
-      tooltip: $localize`Resume`,
-      action: (download: Download) => this.resumeDownload(download),
-      show: (download: Download) => !download.finished && download.paused && download.finished_step,
-      icon: 'play_arrow'
-    },
-    {
-      tooltip: $localize`Resume`,
-      action: (download: Download) => this.resumeDownload(download),
-      show: (download: Download) => !download.finished && download.paused && download.finished_step,
-      icon: 'play_arrow'
-    },
-    {
-      tooltip: $localize`Cancel`,
-      action: (download: Download) => this.cancelDownload(download),
-      show: (download: Download) => false && !download.finished && !download.paused, // TODO: add possibility to cancel download
-      icon: 'cancel'
-    },
-    {
-      tooltip: $localize`Clear`,
-      action: (download: Download) => this.clearDownload(download),
-      show: (download: Download) => download.finished || download.paused,
-      icon: 'delete'
-    }
-  ]
-
   downloads_retrieved = false;
 
-  innerWidth: number;
-
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-  @HostListener('window:resize', ['$event'])
-  onResize(): void {
-    this.innerWidth = window.innerWidth;
-    this.recalculateColumns();
-  }
-
   sort_downloads = (a: Download, b: Download): number => {
     const result = b.timestamp_start - a.timestamp_start;
     return result;
@@ -119,10 +77,6 @@ export class DownloadsComponent implements OnInit, OnDestroy {
   constructor(public postsService: PostsService, private router: Router, private dialog: MatDialog, private clipboard: Clipboard) { }
 
   ngOnInit(): void {
-    // Remove sub name as it's not necessary for one-off downloads
-    if (this.uids) this.displayedColumnsBig = this.displayedColumnsBig.filter(col => col !== 'sub_name');
-    this.innerWidth = window.innerWidth;
-    this.recalculateColumns();
     if (this.postsService.initialized) {
       this.getCurrentDownloadsRecurring();
     } else {
@@ -210,8 +164,8 @@ export class DownloadsComponent implements OnInit, OnDestroy {
     });
   }
 
-  pauseDownload(download: Download): void {
+  pauseDownload(download_uid: string): void {
-    this.postsService.pauseDownload(download['uid']).subscribe(res => {
+    this.postsService.pauseDownload(download_uid).subscribe(res => {
       if (!res['success']) {
         this.postsService.openSnackBar($localize`Failed to pause download! See server logs for more info.`);
       }
@@ -226,8 +180,8 @@ export class DownloadsComponent implements OnInit, OnDestroy {
     });
   }
 
-  resumeDownload(download: Download): void {
+  resumeDownload(download_uid: string): void {
-    this.postsService.resumeDownload(download['uid']).subscribe(res => {
+    this.postsService.resumeDownload(download_uid).subscribe(res => {
       if (!res['success']) {
         this.postsService.openSnackBar($localize`Failed to resume download! See server logs for more info.`);
       }
@@ -242,8 +196,8 @@ export class DownloadsComponent implements OnInit, OnDestroy {
     });
   }
 
-  restartDownload(download: Download): void {
+  restartDownload(download_uid: string): void {
-    this.postsService.restartDownload(download['uid']).subscribe(res => {
+    this.postsService.restartDownload(download_uid).subscribe(res => {
       if (!res['success']) {
         this.postsService.openSnackBar($localize`Failed to restart download! See server logs for more info.`);
       } else {
@@ -254,16 +208,16 @@ export class DownloadsComponent implements OnInit, OnDestroy {
     });
   }
 
-  cancelDownload(download: Download): void {
+  cancelDownload(download_uid: string): void {
-    this.postsService.cancelDownload(download['uid']).subscribe(res => {
+    this.postsService.cancelDownload(download_uid).subscribe(res => {
       if (!res['success']) {
         this.postsService.openSnackBar($localize`Failed to cancel download! See server logs for more info.`);
       }
     });
   }
 
-  clearDownload(download: Download): void {
+  clearDownload(download_uid: string): void {
-    this.postsService.clearDownload(download['uid']).subscribe(res => {
+    this.postsService.clearDownload(download_uid).subscribe(res => {
       if (!res['success']) {
         this.postsService.openSnackBar($localize`Failed to pause download! See server logs for more info.`);
       }
@@ -303,7 +257,6 @@ export class DownloadsComponent implements OnInit, OnDestroy {
   }
 
   showError(download: Download): void {
-    console.log(download)
     const copyToClipboardEmitter = new EventEmitter<boolean>();
     this.dialog.open(ConfirmDialogComponent, {
       data: {
@@ -323,22 +276,4 @@ export class DownloadsComponent implements OnInit, OnDestroy {
       }
     });
   }
-
-  recalculateColumns() {
-    if (this.innerWidth < 650) this.displayedColumns = this.displayedColumnsSmall;
-    else                       this.displayedColumns = this.displayedColumnsBig;
-
-    this.actionsFlex = this.uids || this.innerWidth < 800 ? 1 : 2;
-
-    if (this.innerWidth < 800 && !this.uids || this.innerWidth < 1100 && this.uids) this.minimizeButtons = true;
-    else                                                                            this.minimizeButtons = false;
-  }
 }
-
-interface DownloadAction {
-  tooltip: string,
-  action: (download: Download) => void,
-  show: (download: Download) => boolean,
-  icon: string,
-  loading?: (download: Download) => boolean
-}

src/app/components/notifications-list/notifications-list.component.html

@@ -1,32 +1,30 @@
-<cdk-virtual-scroll-viewport itemSize="50" class="viewport" minBufferPx="1200" maxBufferPx="1200">
+<div class="card-radius mat-elevation-z2" *ngFor="let notification of notifications; let i = index;">
-    <div #notification_parent class="notification-card-parent card-radius mat-elevation-z2" *cdkVirtualFor="let notification of notifications; let i = index;">
+    <mat-card class="notification-card card-radius">
-        <mat-card class="notification-card card-radius">
+        <mat-card-header>
-            <mat-card-header>
+            <mat-card-subtitle>
-                <mat-card-subtitle>
+                <div>
-                    <div>
+                    <span class="notification-timestamp">{{notification.timestamp * 1000 | date:'short'}}</span>
-                        <span class="notification-timestamp">{{notification.timestamp * 1000 | date:'short'}}</span>
+                </div>
-                    </div>
+            </mat-card-subtitle>
-                </mat-card-subtitle>
+            <mat-card-title>
-                <mat-card-title>
+                <ng-container *ngIf="NOTIFICATION_PREFIX[notification.type]">
-                    <ng-container *ngIf="NOTIFICATION_PREFIX[notification.type]">
+                    {{NOTIFICATION_PREFIX[notification.type]}}
-                        {{NOTIFICATION_PREFIX[notification.type]}}
-                    </ng-container>
-                </mat-card-title>
-            </mat-card-header>
-            <mat-card-content>
-                <ng-container *ngIf="NOTIFICATION_SUFFIX_KEY[notification.type]">
-                    <div style="word-break: break-word">
-                        {{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
-                    </div>
                 </ng-container>
-            </mat-card-content>
+            </mat-card-title>
-            <mat-card-actions class="notification-actions" *ngIf="notification.actions?.length > 0">
+        </mat-card-header>
-                <button matTooltip="Remove" i18n-matTooltip="Remove" (click)="emitDeleteNotification(notification.uid)" mat-icon-button><mat-icon>close</mat-icon></button>
+        <mat-card-content>
-                <span *ngFor="let action of notification.actions">
+            <ng-container *ngIf="NOTIFICATION_SUFFIX_KEY[notification.type]">
-                    <button [matTooltip]="NOTIFICATION_ACTION_TO_STRING[action]" (click)="emitNotificationAction(notification, action)" mat-icon-button><mat-icon>{{NOTIFICATION_ICON[action]}}</mat-icon></button>
+                <div style="word-break: break-word">
-                </span>
+                    {{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
-            </mat-card-actions>
+                </div>
-            <span *ngIf="!notification.read" class="dot"></span>
+            </ng-container>
-        </mat-card>
+        </mat-card-content>
-    </div>
+        <mat-card-actions *ngIf="notification.actions?.length > 0">
-</cdk-virtual-scroll-viewport>
+            <button matTooltip="Remove" i18n-matTooltip="Remove" (click)="emitDeleteNotification(notification.uid)" mat-icon-button><mat-icon>close</mat-icon></button>
+            <span *ngFor="let action of notification.actions">
+                <button [matTooltip]="NOTIFICATION_ACTION_TO_STRING[action]" (click)="emitNotificationAction(notification, action)" mat-icon-button><mat-icon>{{NOTIFICATION_ICON[action]}}</mat-icon></button>
+            </span>
+        </mat-card-actions>
+        <span *ngIf="!notification.read" class="dot"></span>
+    </mat-card>
+</div>

src/app/components/notifications-list/notifications-list.component.scss

@@ -13,21 +13,12 @@
     font-size: 14px;
 }
 
-.notification-card-parent {
-    margin: 5px;
-}
-
 .notification-card {
     margin-top: 5px;
 }
 
-.notification-actions {
-    margin-top: auto;
-}
-
 .card-radius {
     border-radius: 12px;
-    height: 166px;
 }
 
 .dot {
@@ -39,8 +30,4 @@
     position: absolute;
     right: 8px;
     top: 8px;
-}
+  }
-
-.viewport {
-    height: 100%;
-}

src/app/components/notifications/notifications.component.css

@@ -4,10 +4,7 @@
 }
 
 .notifications-list-parent {
+    max-height: 70vh;
     overflow-y: auto;
     padding: 0px 10px 10px 10px;
-}
-
-.notifications-list {
-    display: block
 }

src/app/components/notifications/notifications.component.html

@@ -4,7 +4,7 @@
         <mat-chip-listbox [value]="selectedFilters" [multiple]="true" (change)="selectedFiltersChanged($event)">
             <mat-chip-option *ngFor="let filter of notificationFilters | keyvalue: originalOrder" [value]="filter.key" [selected]="selectedFilters.includes(filter.key)" color="accent">{{filter.value.label}}</mat-chip-option>
         </mat-chip-listbox>
-        <app-notifications-list class="notifications-list" [style.height]="list_height" (notificationAction)="notificationAction($event)" (deleteNotification)="deleteNotification($event)" [notifications]="filtered_notifications"></app-notifications-list>
+        <app-notifications-list (notificationAction)="notificationAction($event)" (deleteNotification)="deleteNotification($event)" [notifications]="filtered_notifications"></app-notifications-list>
     </div>
     <button style="margin: 10px 0px 2px 10px;" *ngIf="notifications?.length > 0" color="warn" (click)="deleteAllNotifications()" mat-stroked-button>Remove all</button>
 </div>

src/app/components/notifications/notifications.component.ts

@@ -14,7 +14,6 @@ export class NotificationsComponent implements OnInit {
 
   notifications: Notification[] = null;
   filtered_notifications: Notification[] = null;
-  list_height = '65vh';
 
   @Output() notificationCount = new EventEmitter<number>();
 
@@ -111,8 +110,6 @@ export class NotificationsComponent implements OnInit {
 
   filterNotifications(): void {
     this.filtered_notifications = this.notifications.filter(notification => this.selectedFilters.length === 0 || this.selectedFilters.includes(notification.type));
-    // We need to do this to get the virtual scroll component to have an appropriate height
-    this.calculateListHeight();
   }
 
   selectedFiltersChanged(event: MatChipListboxChange): void {
@@ -120,12 +117,6 @@ export class NotificationsComponent implements OnInit {
     this.filterNotifications();
   }
 
-  calculateListHeight() {
-    const avgHeight = 166;
-    const calcHeight = this.filtered_notifications.length * avgHeight;
-    this.list_height = calcHeight > window.innerHeight*0.65 ? '65vh' : `${calcHeight}px`;
-  }
-
   originalOrder = (): number => {
     return 0;
   }

src/app/consts.ts

@@ -1 +1 @@
-export const CURRENT_VERSION = 'v4.3.2';
+export const CURRENT_VERSION = 'v4.3.1';

src/app/dialogs/about-dialog/about-dialog.component.html

@@ -35,6 +35,36 @@
         <p>
             <ng-container i18n="About bug prefix">Found a bug or have a suggestion?</ng-container>&nbsp;<a [href]="issuesLink" target="_blank"><ng-container i18n="About bug click here">Click here</ng-container></a>&nbsp;<ng-container i18n="About bug suffix">to create an issue!</ng-container>
         </p>
+        <mat-divider></mat-divider>
+        <div style="margin-top: 10px;">
+            <h5>Personal settings:</h5>
+            <mat-form-field>
+                <mat-label i18n="Sidepanel mode">Sidepanel mode</mat-label>
+                <mat-select [(ngModel)]="sidepanel_mode" (selectionChange)="sidePanelModeChanged($event.value)">
+                    <mat-option value="over">
+                        Over
+                    </mat-option>
+                    <mat-option value="side">
+                        Side
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+            <br/>
+            <mat-form-field>
+                <mat-label i18n="File card size">File card size</mat-label>
+                <mat-select [(ngModel)]="card_size" (selectionChange)="cardSizeOptionChanged($event.value)">
+                    <mat-option value="large">
+                        Large
+                    </mat-option>
+                    <mat-option value="medium">
+                        Medium
+                    </mat-option>
+                    <mat-option value="small">
+                        Small
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
     </div>
 </mat-dialog-content>
 

src/app/dialogs/about-dialog/about-dialog.component.ts

@@ -16,6 +16,8 @@ export class AboutDialogComponent implements OnInit {
   checking_for_updates = true;
 
   current_version_tag = CURRENT_VERSION;
+  sidepanel_mode = this.postsService.sidepanel_mode;
+  card_size = this.postsService.card_size;
 
   constructor(public postsService: PostsService) { }
 
@@ -29,4 +31,15 @@ export class AboutDialogComponent implements OnInit {
       this.latestGithubRelease = res;
     });
   }
+
+  sidePanelModeChanged(new_mode) {
+    localStorage.setItem('sidepanel_mode', new_mode);
+    this.postsService.sidepanel_mode = new_mode;
+  }
+
+  cardSizeOptionChanged(new_size) {
+    localStorage.setItem('card_size', new_size);
+    this.postsService.card_size = new_size;
+  }
+
 }

src/app/dialogs/user-profile-dialog/user-profile-dialog.component.html

@@ -13,52 +13,19 @@
         </div>
         <div style="margin-top: 20px;">
         </div>
-        <mat-divider style="margin-bottom: 20px"></mat-divider>
     </div>
-    <mat-form-field color="accent">
+
-        <mat-label><ng-container i18n="Language select label">Language</ng-container></mat-label>
+    <div *ngIf="!postsService.isLoggedIn || !postsService.user">
-        <mat-select (selectionChange)="localeSelectChanged($event.value)" [(value)]="initialLocale">
+        <h5><mat-icon>warn</mat-icon><ng-container i18n="Not logged in notification">You are not logged in.</ng-container></h5>
-            <mat-option *ngFor="let locale of supported_locales" [value]="locale">
+        <button (click)="loginClicked()" mat-raised-button color="primary"><ng-container i18n="Login">Login</ng-container></button>
-                <ng-container *ngIf="all_locales[locale]">
+    </div>
-                    {{all_locales[locale]['nativeName']}}
-                </ng-container>
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-    <br/>
-    <mat-form-field>
-        <mat-label i18n="Sidepanel mode">Sidepanel mode</mat-label>
-        <mat-select [(ngModel)]="sidepanel_mode" (selectionChange)="sidePanelModeChanged($event.value)">
-            <mat-option i18n="Over" value="over">
-                Over
-            </mat-option>
-            <mat-option i18n="Side" value="side">
-                Side
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-    <br/>
-    <mat-form-field>
-        <mat-label i18n="File card size">File card size</mat-label>
-        <mat-select [(ngModel)]="card_size" (selectionChange)="cardSizeOptionChanged($event.value)">
-            <mat-option i18n="Large" value="large">
-                Large
-            </mat-option>
-            <mat-option i18n="Medium" value="medium">
-                Medium
-            </mat-option>
-            <mat-option i18n="Small" value="small">
-                Small
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
 </mat-dialog-content>
 
 <mat-dialog-actions>
     <div style="width: 100%">
         <div style="position: relative">
             <button mat-stroked-button mat-dialog-close color="primary"><ng-container i18n="Close">Close</ng-container></button>
-            <button *ngIf="postsService.isLoggedIn" style="position: absolute; right: 0px;" (click)="logoutClicked()" mat-stroked-button color="warn"><ng-container i18n="Logout">Logout</ng-container></button>
+            <button style="position: absolute; right: 0px;" (click)="logoutClicked()" mat-stroked-button color="warn"><ng-container i18n="Logout">Logout</ng-container></button>
         </div>
     </div>
 </mat-dialog-actions>

src/app/dialogs/user-profile-dialog/user-profile-dialog.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import { PostsService } from 'app/posts.services';
 import { Router } from '@angular/router';
 import { MatDialogRef } from '@angular/material/dialog';
-import { isoLangs } from './locales_list';
 
 @Component({
   selector: 'app-user-profile-dialog',
@@ -11,24 +10,9 @@ import { isoLangs } from './locales_list';
 })
 export class UserProfileDialogComponent implements OnInit {
 
-  all_locales = isoLangs;
-  supported_locales = ['en', 'es', 'de', 'fr', 'nl', 'pt', 'it', 'ca', 'cs', 'nb', 'ru', 'zh', 'ko', 'id', 'en-GB'];
-  initialLocale = localStorage.getItem('locale');
-  sidepanel_mode = this.postsService.sidepanel_mode;
-  card_size = this.postsService.card_size;
-
   constructor(public postsService: PostsService, private router: Router, public dialogRef: MatDialogRef<UserProfileDialogComponent>) { }
 
   ngOnInit(): void {
-    this.postsService.getSupportedLocales().subscribe(res => {
-      if (res && res['supported_locales']) {
-        this.supported_locales = ['en', 'en-GB']; // required
-        this.supported_locales = this.supported_locales.concat(res['supported_locales']);
-      }
-    }, err => {
-      console.error(`Failed to retrieve list of supported languages! You may need to run: 'node src/postbuild.mjs'. Error below:`);
-      console.error(err);
-    });
   }
 
   loginClicked() {
@@ -41,19 +25,4 @@ export class UserProfileDialogComponent implements OnInit {
     this.dialogRef.close();
   }
 
-  localeSelectChanged(new_val: string): void {
-    localStorage.setItem('locale', new_val);
-    this.postsService.openSnackBar($localize`Language successfully changed! Reload to update the page.`)
-  }
-
-  sidePanelModeChanged(new_mode) {
-    localStorage.setItem('sidepanel_mode', new_mode);
-    this.postsService.sidepanel_mode = new_mode;
-  }
-
-  cardSizeOptionChanged(new_size) {
-    localStorage.setItem('card_size', new_size);
-    this.postsService.card_size = new_size;
-  }
-
 }

src/app/main/main.component.html

@@ -205,7 +205,7 @@
 </div>
 
 <div style="display: flex; justify-content: center;" *ngIf="downloads && downloads.length > 0 && !autoplay">
-    <app-downloads style="width: 80%; min-width: 350px; margin-bottom: 10px" [uids]="download_uids"></app-downloads>
+    <app-downloads style="width: 80%; margin-bottom: 10px" [uids]="download_uids"></app-downloads>
 </div>
 
 <ng-container *ngIf="cachedFileManagerEnabled || fileManagerEnabled">

src/app/player/player.component.css

@@ -37,15 +37,11 @@
 }
 
 .spinner {
-    bottom: -2px;
+    bottom: 1px;
-    left: 6px;
+    left: 2px;
     position: absolute;
 }
 
-.buttons {
-    position: relative;
-}
-
 .save-button {
     right: 25px;
     position: fixed;
@@ -89,6 +85,13 @@
     margin-bottom: 15px;
 }
 
+.spinner-div {
+    position: relative;
+    display: inline-block;
+    margin-right: 12px;
+    top: 8px;
+}
+
 .skip-ad-button {
     position: absolute;
     right: 20px;

src/app/player/player.component.html

@@ -22,22 +22,20 @@
                                         </p>
                                     </ng-container>
                                     <ng-container *ngIf="!db_file || !db_file['description']">
-                                        <p i18n="No description" style="text-align: center;">
+                                        <p style="text-align: center;">
                                             No description available.
                                         </p>
                                     </ng-container>
                                 </div>
                                 <div class="col-2">
-                                    <span class="buttons" *ngIf="db_playlist">
+                                    <ng-container *ngIf="db_playlist">
-                                        <button (click)="downloadContent()" [disabled]="downloading" mat-icon-button><mat-icon>save</mat-icon></button>
+                                        <button (click)="downloadContent()" [disabled]="downloading" mat-icon-button><mat-icon>save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="35"></mat-spinner></button>
-                                        <mat-spinner *ngIf="downloading" class="spinner" [diameter]="35"></mat-spinner>
                                         <button *ngIf="(!postsService.isLoggedIn || postsService.permissions.includes('sharing')) && !auto" (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button>
-                                    </span>
+                                    </ng-container>
-                                    <span class="buttons" *ngIf="db_file">
+                                    <ng-container *ngIf="db_file">
-                                        <button (click)="downloadFile()" [disabled]="downloading" mat-icon-button><mat-icon>cloud_download</mat-icon></button>
+                                        <button (click)="downloadFile()" [disabled]="downloading" mat-icon-button><mat-icon>cloud_download</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="35"></mat-spinner></button>
-                                        <mat-spinner *ngIf="downloading" class="spinner" [diameter]="35"></mat-spinner>
                                         <button *ngIf="!postsService.isLoggedIn || postsService.permissions.includes('sharing')" (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button>
-                                    </span>
+                                    </ng-container>
                                     <ng-container *ngIf="db_file || playlist[currentIndex]"></ng-container>
                                     <button (click)="openFileInfoDialog()" *ngIf="db_file || db_playlist" mat-icon-button><mat-icon>info</mat-icon></button>
                                     <button *ngIf="db_file && db_file.url.includes('twitch.tv')" (click)="drawer.toggle()" mat-icon-button><mat-icon>chat</mat-icon></button>
@@ -58,6 +56,14 @@
                             <app-twitch-chat #twitchchat [db_file]="db_file" [current_timestamp]="api.currentTime" [sub]="subscription"></app-twitch-chat>
                         </ng-container>
                     </mat-drawer>
+
+                    <!-- <div class="update-playlist-button-div" *ngIf="id && playlistChanged()">
+                        <div class="spinner-div">
+                            <mat-spinner *ngIf="playlist_updating" [diameter]="25"></mat-spinner>
+                        </div>
+                        <button color="primary" [disabled]="playlist_updating" (click)="updatePlaylist()" mat-raised-button><ng-container i18n="Playlist save changes button">Save changes</ng-container>&nbsp;<mat-icon>update</mat-icon></button>
+                        
+                    </div> -->
                 </mat-drawer-container>
             </div>
     </div>

src/app/player/player.component.ts

@@ -61,6 +61,8 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
   url = null;
   name = null;
 
+  innerWidth: number;
+
   downloading = false;
 
   save_volume_timer = null;
@@ -68,7 +70,14 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @ViewChild('twitchchat') twitchChat: TwitchChatComponent;
 
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    this.innerWidth = window.innerWidth;
+  }
+
   ngOnInit(): void {
+    this.innerWidth = window.innerWidth;
+
     this.playlist_id = this.route.snapshot.paramMap.get('playlist_id');
     this.uid = this.route.snapshot.paramMap.get('uid');
     this.sub_id = this.route.snapshot.paramMap.get('sub_id');

src/app/posts.services.ts

@@ -115,7 +115,7 @@ import {
     RestartDownloadResponse,
     TaskType
 } from '../api-types';
-import { isoLangs } from './dialogs/user-profile-dialog/locales_list';
+import { isoLangs } from './settings/locales_list';
 import { Title } from '@angular/platform-browser';
 import { MatDrawerMode } from '@angular/material/sidenav';
 

src/app/settings/settings.component.html

@@ -78,6 +78,23 @@
                     </div>
                 </div>
             </div>
+            <mat-divider></mat-divider>
+            <div *ngIf="new_config" class="container-fluid">
+                <div class="row">
+                    <div class="col-12 mt-3">
+                        <mat-form-field color="accent">
+                            <mat-label><ng-container i18n="Language select label">Language</ng-container></mat-label>
+                            <mat-select (selectionChange)="localeSelectChanged($event.value)" [(value)]="initialLocale">
+                                <mat-option *ngFor="let locale of supported_locales" [value]="locale">
+                                    <ng-container *ngIf="all_locales[locale]">
+                                        {{all_locales[locale]['nativeName']}}
+                                    </ng-container>
+                                </mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                </div>
+            </div>
         </ng-template>
     </mat-tab>
     <!-- Downloader -->

src/app/settings/settings.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, EventEmitter } from '@angular/core';
 import { PostsService } from 'app/posts.services';
+import { isoLangs } from './locales_list';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import {DomSanitizer} from '@angular/platform-browser';
 import { MatDialog } from '@angular/material/dialog';
@@ -21,6 +22,10 @@ import { GenerateRssUrlComponent } from 'app/dialogs/generate-rss-url/generate-r
   styleUrls: ['./settings.component.scss']
 })
 export class SettingsComponent implements OnInit {
+  all_locales = isoLangs;
+  supported_locales = ['en', 'es', 'de', 'fr', 'nl', 'pt', 'it', 'ca', 'cs', 'nb', 'ru', 'zh', 'ko', 'id', 'en-GB'];
+  initialLocale = localStorage.getItem('locale');
+
   initial_config = null;
   new_config = null
   loading_config = false;
@@ -78,6 +83,16 @@ export class SettingsComponent implements OnInit {
 
     const tab = this.route.snapshot.paramMap.get('tab');
     this.tabIndex = tab && this.TAB_TO_INDEX[tab] ? this.TAB_TO_INDEX[tab] : 0;
+
+    this.postsService.getSupportedLocales().subscribe(res => {
+      if (res && res['supported_locales']) {
+        this.supported_locales = ['en', 'en-GB']; // required
+        this.supported_locales = this.supported_locales.concat(res['supported_locales']);
+      }
+    }, err => {
+      console.error(`Failed to retrieve list of supported languages! You may need to run: 'node src/postbuild.mjs'. Error below:`);
+      console.error(err);
+    });
   }
 
   getConfig(): void {
@@ -192,6 +207,11 @@ export class SettingsComponent implements OnInit {
     });
   }
 
+  localeSelectChanged(new_val: string): void {
+    localStorage.setItem('locale', new_val);
+    this.postsService.openSnackBar($localize`Language successfully changed! Reload to update the page.`)
+  }
+
   generateBookmarklet(): void {
     this.bookmarksite('YTDL-Material', this.generated_bookmarklet_code);
   }

src/assets/i18n/messages.zh.xlf

@@ -1432,7 +1432,7 @@
       </trans-unit>
       <trans-unit id="994363f08f9fbfa3b3994ff7b35c6904fdff18d8" datatype="html">
         <source>Profile</source>
-        <target state="translated">个人资料</target>
+        <target state="translated">资料</target>
         <context-group purpose="location">
           <context context-type="sourcefile">app/app.component.html</context>
           <context context-type="linenumber">19</context>
@@ -5015,24 +5015,6 @@
         </context-group>
         <note priority="1" from="description">Use gotify API setting</note>
       </trans-unit>
-      <trans-unit id="7cedb649779673568447b994463b2882c4e0436a" datatype="html">
-        <source>Slack Webhook URL</source>
-        <target state="translated">Slack Webhook 网址</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/settings/settings.component.html</context>
-          <context context-type="linenumber">397</context>
-        </context-group>
-        <note priority="1" from="description">Slack Webhook URL</note>
-      </trans-unit>
-      <trans-unit id="3264d82792954815be755b3da01e2625458711dc" datatype="html">
-        <source>Discord Webhook URL</source>
-        <target state="translated">Discord Webhook 网址</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/settings/settings.component.html</context>
-          <context context-type="linenumber">390</context>
-        </context-group>
-        <note priority="1" from="description">Discord Webhook URL</note>
-      </trans-unit>
     </body>
   </file>
 </xliff>