Updated arm dockerfile and moved hooks to the right place

armhf.Dockerfile

@@ -1,15 +1,11 @@
-FROM alpine:3.12 as frontend
+FROM arm32v7/alpine:3.12 as frontend
 
 RUN apk add --no-cache \
-  npm \
-  curl
+  npm
 
 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
 
@@ -21,7 +17,7 @@ RUN ng build --prod
 
 FROM arm32v7/alpine:3.12
 
-COPY --from=frontend /build/qemu-arm-static /usr/bin
+COPY qemu-arm-static /usr/bin
 
 ENV UID=1000 \
   GID=1000 \

backend/config.js

@@ -157,7 +157,7 @@ function setConfigItems(items) {
 
 function globalArgsRequiresSafeDownload() {
     const globalArgs = getConfigItem('ytdl_custom_args').split(',,');
-    const argsThatRequireSafeDownload = ['--write-sub', '--write-srt', '--proxy'];
+    const argsThatRequireSafeDownload = ['--write-sub', '--write-srt'];
     const failedArgs = globalArgs.filter(arg => argsThatRequireSafeDownload.includes(arg));
     return failedArgs && failedArgs.length > 0;
 }

hooks/post_checkout

@@ -0,0 +1,3 @@
+#!/bin/bash
+# downloads a local copy of qemu on docker-hub build machines
+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 .

hooks/pre_build

@@ -0,0 +1,4 @@
+#!/bin/bash
+# Register qemu-*-static for all supported processors except the 
+# current one, but also remove all registered binfmt_misc before
+docker run --rm --privileged multiarch/qemu-user-static:register --reset

package-lock.json

@@ -1404,21 +1404,6 @@
         }
       }
     },
-    "@ngneat/content-loader": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@ngneat/content-loader/-/content-loader-5.0.0.tgz",
-      "integrity": "sha512-XrS53rsiJoQIOy2BwmOHkvgPv0a5cTzXbbM+/3IpgezPFdNqDunpZW+AciWQffVOfgbmL+7cYp1DVb6WM15LhQ==",
-      "requires": {
-        "tslib": "^2.0.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
-          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
-        }
-      }
-    },
     "@ngtools/webpack": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.0.tgz",

package.json

@@ -30,7 +30,6 @@
     "@angular/platform-browser": "^9.1.0",
     "@angular/platform-browser-dynamic": "^9.1.0",
     "@angular/router": "^9.1.0",
-    "@ngneat/content-loader": "^5.0.0",
     "core-js": "^2.4.1",
     "file-saver": "^2.0.2",
     "filesize": "^6.1.0",

src/app/app.module.ts

@@ -54,7 +54,6 @@ import { SettingsComponent } from './settings/settings.component';
 import { MatChipsModule } from '@angular/material/chips';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { AvatarModule } from 'ngx-avatar';
-import { ContentLoaderModule } from '@ngneat/content-loader';
 
 import es from '@angular/common/locales/es';
 import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
@@ -153,6 +152,7 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     MatMenuModule,
     MatDialogModule,
     MatSlideToggleModule,
+    MatMenuModule,
     MatAutocompleteModule,
     MatTabsModule,
     MatTooltipModule,
@@ -164,7 +164,6 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     ClipboardModule,
     NgxFileDropModule,
     AvatarModule,
-    ContentLoaderModule,
     VgCoreModule,
     VgControlsModule,
     VgOverlayPlayModule,

src/app/components/custom-playlists/custom-playlists.component.html

@@ -1,8 +1,8 @@
 <div *ngIf="playlists && playlists.length > 0">
     <div class="container">
         <div class="row justify-content-center">
-            <div *ngFor="let playlist of playlists; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
-                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToPlaylist($event)" [file_obj]="playlist" [is_playlist]="true" (editPlaylist)="editPlaylistDialog($event)" (deleteFile)="deletePlaylist($event)" [loading]="false"></app-unified-file-card>
+            <div *ngFor="let playlist of playlists; let i = index" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
+                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToPlaylist($event)" [file_obj]="playlist" [is_playlist]="true" (editPlaylist)="editPlaylistDialog($event)" (deleteFile)="deletePlaylist($event)"></app-unified-file-card>
             </div>
         </div>
     </div>

src/app/components/custom-playlists/custom-playlists.component.scss

@@ -5,14 +5,6 @@
     right: 15px;
 }
 
-.large-col {
-    max-width: 320px;
-}
-
-.medium-col {
-    max-width: 240px;
-}
-
-.small-col {
+.file-col {
     max-width: 240px;
 }

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

@@ -1,4 +1,4 @@
-<div class="container-fluid" style="max-width: 941px;">
+<div class="container-fluid">
     <div class="row">
         <div class="col-12 order-2 col-sm-4 order-sm-1 d-flex justify-content-center">
             <div>
@@ -17,7 +17,7 @@
             </div>
         </div>
         <div class="col-12 order-1 col-sm-4 order-sm-2 d-flex justify-content-center">
-            <h4 class="my-videos-title" i18n="My videos title">My videos</h4>
+            <h4 style="text-align: center">My videos</h4>
         </div>
         <div class="col-12 order-3 col-sm-4 order-sm-3 d-flex justify-content-center">
             <mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
@@ -30,16 +30,9 @@
 <div>
     <div class="container">
         <div class="row justify-content-center">
-            <ng-container *ngIf="normal_files_received">
-                <div *ngFor="let file of filtered_files; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
-                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" [loading]="false" (deleteFile)="deleteFile($event)"></app-unified-file-card>
-                </div>
-            </ng-container>
-            <ng-container *ngIf="!normal_files_received && loading_files && loading_files.length > 0">
-                <div *ngFor="let file of loading_files; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
-                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [loading]="true" [theme]="postsService.theme"></app-unified-file-card>
-                </div>
-            </ng-container>
+            <div *ngFor="let file of filtered_files; let i = index" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
+                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" (deleteFile)="deleteFile($event)"></app-unified-file-card>
+            </div>
         </div>
     </div>
 </div>

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

@@ -1,12 +1,4 @@
-.large-col {
-    max-width: 320px;
-}
-
-.medium-col {
-    max-width: 240px;
-}
-
-.small-col {
+.file-col {
     max-width: 240px;
 }
 
@@ -45,16 +37,4 @@
     display: inline-block;
     position: absolute;
     top: 10px;
-}
-
-.my-videos-title {
-    text-align: center;
-    position: relative;
-    top: 12px;
-}
-
-@media (max-width: 576px) {
-    .my-videos-title {
-        top: 0px;
-    }
 }

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

@@ -9,9 +9,6 @@ import { Router } from '@angular/router';
 })
 export class RecentVideosComponent implements OnInit {
 
-  cached_file_count = 0;
-  loading_files = null;
-
   normal_files_received = false;
   subscription_files_received = false;
   files: any[] = null;
@@ -50,14 +47,7 @@ export class RecentVideosComponent implements OnInit {
   };
   filterProperty = this.filterProperties['upload_date'];
 
-  constructor(public postsService: PostsService, private router: Router) {
-    // get cached file count
-    if (localStorage.getItem('cached_file_count')) {
-      this.cached_file_count = +localStorage.getItem('cached_file_count');
-      this.loading_files = Array(this.cached_file_count).fill(0);
-      console.log(this.loading_files);
-    }
-  }
+  constructor(public postsService: PostsService, private router: Router) { }
 
   ngOnInit(): void {
     this.postsService.service_initialized.subscribe(init => {
@@ -124,11 +114,6 @@ export class RecentVideosComponent implements OnInit {
         this.filtered_files = this.files;
       }
       this.filterByProperty(this.filterProperty['property']);
-
-      // set cached file count for future use, note that we convert the amount of files to a string
-      localStorage.setItem('cached_file_count', '' + this.files.length);
-
-      this.normal_files_received = true;
     });
   }
 

src/app/components/unified-file-card/unified-file-card.component.html

@@ -1,9 +1,8 @@
 <div (mouseover)="elevated=true" (mouseout)="elevated=false" style="position: relative; width: fit-content;">
-    <div *ngIf="!loading" class="download-time"><mat-icon class="audio-video-icon">{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>&nbsp;&nbsp;{{file_obj.registered | date:'shortDate'}}</div>
-    <div *ngIf="loading" class="download-time" style="width: 75%; margin-top: 5px;"><content-loader [primaryColor]="theme.ghost_primary" [secondaryColor]="theme.ghost_secondary" width="250" height="30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></div>
-    <button [disabled]="loading" [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
+    <div class="download-time"><mat-icon class="audio-video-icon">{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>&nbsp;&nbsp;{{file_obj.registered | date:'shortDate'}}</div>
+    <button [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
     <mat-menu #action_menu="matMenu">
-        <ng-container *ngIf="!is_playlist && !loading">
+        <ng-container *ngIf="!is_playlist">
             <button (click)="openFileInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Video info button">Info</ng-container></button>
             <button (click)="navigateToSubscription()" mat-menu-item *ngIf="file_obj.sub_id"><mat-icon>{{file_obj.isAudio ? 'library_music' : 'video_library'}}</mat-icon>&nbsp;<ng-container i18n="Go to subscription menu item">Go to subscription</ng-container></button>
             <mat-divider></mat-divider>
@@ -16,20 +15,17 @@
             <button *ngIf="!file_obj.sub_id" (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete</mat-icon><ng-container i18n="Delete video button">Delete</ng-container></button>
             <button *ngIf="!file_obj.sub_id && use_youtubedl_archive" (click)="emitDeleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and blacklist video button">Delete and blacklist</ng-container></button>
         </ng-container>
-        <ng-container *ngIf="is_playlist && !loading">
+        <ng-container *ngIf="is_playlist">
             <button (click)="emitEditPlaylist()" mat-menu-item><mat-icon>edit</mat-icon><ng-container i18n="Playlist edit button">Edit</ng-container></button>
             <mat-divider></mat-divider>
             <button (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete playlist">Delete</ng-container></button>
         </ng-container>
-        <ng-container *ngIf="loading">
-            <button mat-menu-item>Placeholder</button>
-        </ng-container>
     </mat-menu>
-    <mat-card [matTooltip]="null" (click)="navigateToFile()" matRipple class="file-mat-card" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium', 'large-mat-card': card_size === 'large', 'mat-elevation-z4': !elevated, 'mat-elevation-z8': elevated}">
+    <mat-card [matTooltip]="null" (click)="navigateToFile()" matRipple class="file-mat-card" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium', 'mat-elevation-z4': !elevated, 'mat-elevation-z8': elevated}">
         <div style="padding:5px">
-            <div *ngIf="!loading && file_obj.thumbnailURL" class="img-div">
+            <div *ngIf="file_obj.thumbnailURL" class="img-div">
                 <div style="position: relative">
-                    <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailURL" alt="Thumbnail">
+                    <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium'}" [src]="file_obj.thumbnailURL" alt="Thumbnail">
                     <div class="duration-time">
                         {{file_length}}
                     </div>
@@ -37,12 +33,7 @@
                 
             </div>
 
-            <div *ngIf="loading" class="img-div">
-                <content-loader [primaryColor]="theme.ghost_primary" [secondaryColor]="theme.ghost_secondary" width="100" height="55"><svg:rect x="0" y="0" rx="0" ry="0" width="100" height="55" /></content-loader>
-            </div>
-
-            <span *ngIf="!loading" [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }">{{card_size === 'large' && file_obj.uploader ? file_obj.uploader + ' - ' : ''}}<strong>{{!is_playlist ? file_obj.title : file_obj.name}}</strong></span>
-            <span *ngIf="loading" class="title-loading"><content-loader [primaryColor]="theme.ghost_primary" [secondaryColor]="theme.ghost_secondary" width="250" height="30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></span>
+            <span [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }"><strong>{{!is_playlist ? file_obj.title : file_obj.name}}</strong></span>      
         </div>
     </mat-card>
 </div>

src/app/components/unified-file-card/unified-file-card.component.scss

@@ -1,10 +1,3 @@
-.large-mat-card {
-  width: 300px;
-  height: 250px;
-  padding: 0px;
-  cursor: pointer;
-}
-
 .file-mat-card {
     width: 200px;
     height: 200px;
@@ -33,12 +26,6 @@
   justify-content: center;
 }
 
-.image-large {
-  width: 300px;
-  height: 167.5px;
-  object-fit: cover;
-}
-
 .image {
   width: 200px;
   height: 112.5px;
@@ -117,12 +104,6 @@
   top: 6px;
 }
 
-.title-loading {
-  width: 93%;
-  position: absolute;
-  bottom: 1px;
-}
-
 @media (max-width: 576px){
   
   // .example-card {

src/app/components/unified-file-card/unified-file-card.component.ts

@@ -16,8 +16,6 @@ export class UnifiedFileCardComponent implements OnInit {
   type = null;
   elevated = false;
 
-  @Input() loading = true;
-  @Input() theme = null;
   @Input() file_obj = null;
   @Input() card_size = 'medium';
   @Input() use_youtubedl_archive = false;
@@ -38,9 +36,7 @@ export class UnifiedFileCardComponent implements OnInit {
   constructor(private dialog: MatDialog) { }
 
   ngOnInit(): void {
-    if (!this.loading) {
-      this.file_length = fancyTimeFormat(this.file_obj.duration);
-    }
+    this.file_length = fancyTimeFormat(this.file_obj.duration);
   }
 
   emitDeleteFile(blacklistMode = false) {

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

@@ -40,7 +40,7 @@
             <br/>
             <mat-form-field placeholder="Card size">
                 <mat-select [(ngModel)]="card_size" (selectionChange)="cardSizeOptionChanged($event.value)">
-                    <mat-option value="large">
+                    <mat-option value="large" [disabled]="true">
                         Large
                     </mat-option>
                     <mat-option value="medium">

src/themes.ts

@@ -3,8 +3,6 @@ const THEMES_CONFIG = {
         'key': 'default',
         'background_color': 'ghostwhite',
         'alternate_color': 'gray',
-        'ghost_primary': '#f9f9f9',
-        'ghost_secondary': '#ecebeb',
         'css_label': 'default-theme',
         'social_theme': 'material-light'
     },
@@ -12,16 +10,12 @@ const THEMES_CONFIG = {
         'key': 'dark',
         'background_color': '#141414',
         'alternate_color': '#695959',
-        'ghost_primary': '#444444',
-        'ghost_secondary': '#141414',
         'css_label': 'dark-theme',
         'social_theme': 'material-dark'
     },
     'light': {
         'key': 'light',
         'background_color': 'white',
-        'ghost_primary': '#f9f9f9',
-        'ghost_secondary': '#ecebeb',
         'css_label': 'light-theme',
         'social_theme': 'material-light'
     }