Fixed docker build issues

.github/workflows/docker-pr.yml

@@ -1,27 +0,0 @@
-name: docker-pr
-
-on:
-  pull_request:
-    branches: [master]
-
-jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout code
-        uses: actions/checkout@v2
-      - name: Set hash
-        id: vars
-        run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
-      - name: Get current date
-        id: date
-        run: echo "::set-output name=date::$(date +'%Y-%m-%d')"
-      - name: create-json
-        id: create-json
-        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 }}"}'
-          dir: 'backend/'
-      - 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": "${{secrets.DOCKERHUB_MASTER_TAG}}", "commit": "${{ steps.vars.outputs.sha_short }}", "date": "${{ steps.date.outputs.date }}"}'
+          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
@@ -39,8 +39,4 @@ jobs:
           file: ./Dockerfile
           platforms: linux/amd64,linux/arm,linux/arm64/v8
           push: true
-          # Defaults:
+          tags: tzahi12345/youtubedl-material:nightly
-          #     DOCKERHUB_USERNAME  : tzahi12345
-          #     DOCKERHUB_REPO      : youtubedl-material
-          #     DOCKERHUB_MASTER_TAG: nightly
-          tags: ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_REPO }}:${{secrets.DOCKERHUB_MASTER_TAG}}

Dockerfile

@@ -1,25 +1,18 @@
 FROM ubuntu:20.04 AS ffmpeg
 
-ENV DEBIAN_FRONTEND=noninteractive
+RUN apt-get update && apt-get -y install curl xz-utils 
-
 COPY docker-build.sh .
 RUN sh ./docker-build.sh
 
 FROM ubuntu:20.04 as frontend
 
 ENV DEBIAN_FRONTEND=noninteractive
-RUN apt-get update && apt-get -y install \
+RUN apt-get update
-  curl \
+RUN apt-get -y install curl gnupg
-  gnupg && \
+RUN curl -sL https://deb.nodesource.com/setup_12.x  | bash -
-  curl -sL https://deb.nodesource.com/setup_12.x  | bash - && \
+RUN apt-get -y install nodejs
-  apt-get -y install \
+
-  nodejs \
+RUN npm install -g @angular/cli
-  # 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,29 +31,23 @@ ENV UID=1000 \
   USER=youtube \
   NO_UPDATE_NOTIFIER=true
 
-ENV DEBIAN_FRONTEND=noninteractive
-
 RUN groupadd -g $GID $USER && useradd --system -g $USER --uid $UID $USER
 
+RUN apt-get update && apt-get -y install curl
+
 RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
 RUN apt-get update && apt-get -y install \
-  npm \
+  nodejs \
   python2 \
   python3 \
-  atomicparsley && \
+  atomicparsley
-  apt-get install -f && \
-  apt-get autoremove --purge && \
-  apt-get autoremove && \
-  apt-get clean && \
-  rm -rf /var/lib/apt
 
 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 config set strict-ssl false && \
+RUN npm install pm2 -g && \
-  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 13](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 11](https://angular.io/) for the frontend, and [Node.js](https://nodejs.org/) on the backend.
 
 Now with [Docker](#Docker) support!
 

armhf.Dockerfile

@@ -0,0 +1,49 @@
+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" ]

backend/subscriptions.js

@@ -141,7 +141,6 @@ async function unsubscribe(sub, deleteMode, user_uid = null) {
         if (sub.archive && (await fs.pathExists(sub.archive))) {
             const archive_file_path = path.join(sub.archive, 'archive.txt');
             // deletes archive if it exists
-            // TODO: Keep entries in blacklist_video.txt by moving them to a global blacklist
             if (await fs.pathExists(archive_file_path)) {
                 await fs.unlink(archive_file_path);
             }
@@ -380,11 +379,7 @@ async function generateArgsForSubscription(sub, user_uid, redownload = false, de
     if (useArchive && !redownload) {
         if (sub.archive) {
             archive_dir = sub.archive;
-            if (sub.type && sub.type === 'audio') {
+            archive_path = path.join(archive_dir, 'archive.txt')
-                archive_path = path.join(archive_dir, 'merged_audio.txt');
-            } else {
-                archive_path = path.join(archive_dir, 'merged_video.txt');
-            }            
         }
         downloadConfig.push('--download-archive', archive_path);
     }

docker-build.sh

@@ -4,6 +4,8 @@
 # and also optimizing some code with this commit.
 # xoxo :D
 
+# set -xeuo pipefail
+
 case $(uname -m) in
   x86_64)
     ARCH=amd64;;
@@ -20,24 +22,15 @@ case $(uname -m) in
     exit 1
 esac
 
-echo "(INFO) Architecture detected: $ARCH"
+echo "Architecture: $ARCH"
-echo "(1/5) READY - Acquire temp dependencies in ffmpeg obtain layer"
+curl --connect-timeout 5 \
-apt-get update && apt-get -y install curl xz-utils
-echo "(2/5) DOWNLOAD - Acquire latest ffmpeg and ffprobe from John van Sickle's master-sourced builds in ffmpeg obtain layer"
-curl -o ffmpeg.txz \
-    --connect-timeout 5 \
     --max-time 10 \
     --retry 5 \
     --retry-delay 0 \
     --retry-max-time 40 \
-    "https://johnvansickle.com/ffmpeg/builds/ffmpeg-git-${ARCH}-static.tar.xz"
+    "https://johnvansickle.com/ffmpeg/builds/ffmpeg-git-${ARCH}-static.tar.xz" -o ffmpeg.txz
 mkdir /tmp/ffmpeg
 tar xf ffmpeg.txz -C /tmp/ffmpeg
-echo "(3/5) CLEANUP - Remove temp dependencies from ffmpeg obtain layer"
-apt-get -y remove curl xz-utils
-apt-get -y autoremove
-echo "(4/5) PROVISION - Provide ffmpeg and ffprobe from ffmpeg obtain layer"
 cp /tmp/ffmpeg/*/ffmpeg /usr/local/bin/ffmpeg
 cp /tmp/ffmpeg/*/ffprobe /usr/local/bin/ffprobe
-echo "(5/5) CLEANUP - Remove temporary downloads from ffmpeg obtain layer"
 rm -rf /tmp/ffmpeg ffmpeg.txz

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-avatars [style.margin-right]="'10px'" size="32" [name]="subscription.name"></ngx-avatars>{{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-avatar [style.margin-right]="'10px'" size="32" [name]="subscription.name"></ngx-avatar>{{subscription.name}}</a>
                     </ng-container>
                 </mat-nav-list>
             </mat-sidenav>

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

@@ -42,11 +42,6 @@ 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 { Component, ElementRef, Input, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, 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, OnDestroy {
+export class TwitchChatComponent implements OnInit, AfterViewInit {
 
   full_chat = null;
   visible_chat = null;
@@ -33,8 +33,7 @@ export class TwitchChatComponent implements OnInit, OnDestroy {
     this.getFullChat();
   }
 
-  ngOnDestroy(): void {
+  ngAfterViewInit() {
-    if (this.chat_check_interval_obj) { clearInterval(this.chat_check_interval_obj); }
   }
 
   private isUserNearBottom(): boolean {

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

@@ -52,8 +52,6 @@ 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();