Fixed frontend build error

removing strict SSL from npm config

.github/workflows/docker-pr.yml

@@ -23,20 +23,5 @@ jobs:
           name: "version.json"
           json: '{"type": "docker", "tag": "nightly", "commit": "${{ steps.vars.outputs.sha_short }}", "date": "${{ steps.date.outputs.date }}"}'
           dir: 'backend/'
-      - name: setup platform emulator
-        uses: docker/setup-qemu-action@v1
-      - name: setup multi-arch docker build
-        uses: docker/setup-buildx-action@v1
-      - name: Login to DockerHub
-        uses: docker/login-action@v1
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: build & push images
-        uses: docker/build-push-action@v2
-        with:
-          context: .
-          file: ./Dockerfile
-          platforms: linux/amd64,linux/arm,linux/arm64/v8
-          push: false
-          tags: tzahi12345/youtubedl-material:nightly-pr
+      - name: Build docker images
+        run: docker build . -t tzahi12345/youtubedl-material:nightly-pr

.github/workflows/docker.yml

@@ -21,7 +21,7 @@ jobs:
         uses: jsdaniell/create-json@1.1.2
         with:
           name: "version.json"
-          json: '{"type": "docker", "tag": "nightly", "commit": "${{ steps.vars.outputs.sha_short }}", "date": "${{ steps.date.outputs.date }}"}'
+          json: '{"type": "docker", "tag": "${{secrets.DOCKERHUB_MASTER_TAG}}", "commit": "${{ steps.vars.outputs.sha_short }}", "date": "${{ steps.date.outputs.date }}"}'
           dir: 'backend/'
       - name: setup platform emulator
         uses: docker/setup-qemu-action@v1
@@ -39,4 +39,8 @@ jobs:
           file: ./Dockerfile
           platforms: linux/amd64,linux/arm,linux/arm64/v8
           push: true
-          tags: tzahi12345/youtubedl-material:nightly
+          # Defaults:
+          #     DOCKERHUB_USERNAME  : tzahi12345
+          #     DOCKERHUB_REPO      : youtubedl-material
+          #     DOCKERHUB_MASTER_TAG: nightly
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_REPO }}:${{secrets.DOCKERHUB_MASTER_TAG}}

Dockerfile

@@ -8,12 +8,18 @@ RUN sh ./docker-build.sh
 FROM ubuntu:20.04 as frontend
 
 ENV DEBIAN_FRONTEND=noninteractive
-RUN apt-get update && apt-get -y install curl
-RUN curl -sL https://deb.nodesource.com/setup_12.x  | bash -
-RUN apt-get -y install nodejs \
-  yarn
-RUN npm config set strict-ssl false
-RUN npm install -g @angular/cli
+RUN apt-get update && apt-get -y install \
+  curl \
+  gnupg && \
+  curl -sL https://deb.nodesource.com/setup_12.x  | bash - && \
+  apt-get -y install \
+  nodejs \
+  # YARN: brings along npm, solves dependency conflicts,
+  # spares us this spaghetti approach: https://stackoverflow.com/a/60547197
+  yarn && \
+  apt-get install -f && \
+  npm config set strict-ssl false && \
+  npm install -g @angular/cli
 
 WORKDIR /build
 COPY [ "package.json", "package-lock.json", "/build/" ]
@@ -38,24 +44,23 @@ RUN groupadd -g $GID $USER && useradd --system -g $USER --uid $UID $USER
 
 RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
 RUN apt-get update && apt-get -y install \
-  nodejs \
-  yarn \
+  npm \
   python2 \
   python3 \
   atomicparsley && \
+  apt-get install -f && \
   apt-get autoremove --purge && \
   apt-get autoremove && \
   apt-get clean && \
   rm -rf /var/lib/apt
 
-RUN npm config set strict-ssl false
-
 WORKDIR /app
 COPY --from=ffmpeg /usr/local/bin/ffmpeg /usr/local/bin/ffmpeg
 COPY --from=ffmpeg /usr/local/bin/ffprobe /usr/local/bin/ffprobe 
 COPY --chown=$UID:$GID [ "backend/package.json", "backend/package-lock.json", "/app/" ]
 ENV PM2_HOME=/app/pm2
-RUN npm install pm2 -g && \
+RUN npm config set strict-ssl false && \
+  npm install pm2 -g && \
   npm install && chown -R $UID:$GID ./
 
 COPY --chown=$UID:$GID --from=frontend [ "/build/backend/public/", "/app/public/" ]

README.md

@@ -6,7 +6,7 @@
 [![GitHub issues badge](https://img.shields.io/github/issues/Tzahi12345/YoutubeDL-Material)](https://github.com/Tzahi12345/YoutubeDL-Material/issues)
 [![License badge](https://img.shields.io/github/license/Tzahi12345/YoutubeDL-Material)](https://github.com/Tzahi12345/YoutubeDL-Material/blob/master/LICENSE.md)
 
-YoutubeDL-Material is a Material Design frontend for [youtube-dl](https://rg3.github.io/youtube-dl/). It's coded using [Angular 11](https://angular.io/) for the frontend, and [Node.js](https://nodejs.org/) on the backend.
+YoutubeDL-Material is a Material Design frontend for [youtube-dl](https://rg3.github.io/youtube-dl/). It's coded using [Angular 13](https://angular.io/) for the frontend, and [Node.js](https://nodejs.org/) on the backend.
 
 Now with [Docker](#Docker) support!
 

armhf.Dockerfile

@@ -1,49 +0,0 @@
-FROM alpine:3.12 as frontend
-
-RUN apk add --no-cache \
-  npm \
-  curl
-
-RUN npm install -g @angular/cli
-
-WORKDIR /build
-
-RUN curl -L https://github.com/balena-io/qemu/releases/download/v3.0.0%2Bresin/qemu-3.0.0+resin-arm.tar.gz | tar zxvf - -C . && mv qemu-3.0.0+resin-arm/qemu-arm-static .
-
-COPY [ "package.json", "package-lock.json", "/build/" ]
-RUN npm install
-
-COPY [ "angular.json", "tsconfig.json", "/build/" ]
-COPY [ "src/", "/build/src/" ]
-RUN ng build --prod
-
-#--------------#
-
-FROM arm32v7/alpine:3.12
-
-COPY --from=frontend /build/qemu-arm-static /usr/bin
-
-ENV UID=1000 \
-  GID=1000 \
-  USER=youtube
-
-RUN addgroup -S $USER -g $GID && adduser -D -S $USER -G $USER -u $UID
-
-RUN apk add --no-cache \
-  ffmpeg \
-  npm \
-  python2 \
-  su-exec \
-  && apk add --no-cache --repository http://dl-cdn.alpinelinux.org/alpine/edge/testing/ \
-    atomicparsley
-
-WORKDIR /app
-COPY --chown=$UID:$GID [ "backend/package.json", "backend/package-lock.json", "/app/" ]
-RUN npm install && chown -R $UID:$GID ./
-
-COPY --chown=$UID:$GID --from=frontend [ "/build/backend/public/", "/app/public/" ]
-COPY --chown=$UID:$GID [ "/backend/", "/app/" ]
-
-EXPOSE 17442
-ENTRYPOINT [ "/app/entrypoint.sh" ]
-CMD [ "node", "app.js" ]

src/app/app.component.html

@@ -51,7 +51,7 @@
                     </ng-container>
                     <ng-container *ngIf="postsService.config && allowSubscriptions && postsService.subscriptions && postsService.hasPermission('subscriptions')">
                         <mat-divider *ngIf="postsService.subscriptions.length > 0"></mat-divider>
-                        <a *ngFor="let subscription of postsService.subscriptions" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" [routerLink]="['/subscription', { id: subscription.id }]"><ngx-avatar [style.margin-right]="'10px'" size="32" [name]="subscription.name"></ngx-avatar>{{subscription.name}}</a>
+                        <a *ngFor="let subscription of postsService.subscriptions" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" [routerLink]="['/subscription', { id: subscription.id }]"><ngx-avatars [style.margin-right]="'10px'" size="32" [name]="subscription.name"></ngx-avatars>{{subscription.name}}</a>
                     </ng-container>
                 </mat-nav-list>
             </mat-sidenav>

src/app/components/concurrent-stream/concurrent-stream.component.ts

@@ -42,6 +42,11 @@ export class ConcurrentStreamComponent implements OnInit {
 
   }
 
+  ngOnDestroy(): void {
+    if (this.check_timeout) { clearInterval(this.check_timeout); }
+    if (this.update_timeout) { clearInterval(this.update_timeout); }
+  }
+
   startServer() {
     this.started = true;
     this.server_started = true;

src/app/components/twitch-chat/twitch-chat.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { PostsService } from 'app/posts.services';
 
 @Component({
@@ -6,7 +6,7 @@ import { PostsService } from 'app/posts.services';
   templateUrl: './twitch-chat.component.html',
   styleUrls: ['./twitch-chat.component.scss']
 })
-export class TwitchChatComponent implements OnInit, AfterViewInit {
+export class TwitchChatComponent implements OnInit, OnDestroy {
 
   full_chat = null;
   visible_chat = null;
@@ -33,7 +33,8 @@ export class TwitchChatComponent implements OnInit, AfterViewInit {
     this.getFullChat();
   }
 
-  ngAfterViewInit() {
+  ngOnDestroy(): void {
+    if (this.chat_check_interval_obj) { clearInterval(this.chat_check_interval_obj); }
   }
 
   private isUserNearBottom(): boolean {

src/app/subscription/subscription/subscription.component.ts

@@ -52,6 +52,8 @@ export class SubscriptionComponent implements OnInit, OnDestroy {
     this.route.params.subscribe(params => {
       this.id = params['id'];
 
+      if (this.sub_interval) { clearInterval(this.sub_interval); }
+
       this.postsService.service_initialized.subscribe(init => {
         if (init) {
           this.getConfig();