Merge pull request #235 from Tzahi12345/locale-based-dates

File cards now use the locale to format dates

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

@@ -2,7 +2,7 @@
     <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>
+                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [locale]="postsService.locale" (goToFile)="goToPlaylist($event)" [file_obj]="playlist" [is_playlist]="true" (editPlaylist)="editPlaylistDialog($event)" (deleteFile)="deletePlaylist($event)" [loading]="false"></app-unified-file-card>
             </div>
         </div>
     </div>

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

@@ -32,12 +32,12 @@
         <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 d-flex justify-content-center" [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>
+                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [locale]="postsService.locale" (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 d-flex justify-content-center" [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>
+                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [locale]="postsService.locale" [loading]="true" [theme]="postsService.theme"></app-unified-file-card>
                 </div>
             </ng-container>
         </div>

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

@@ -1,5 +1,5 @@
 <div (mouseover)="elevated=true" (mouseout)="elevated=false" (contextmenu)="onRightClick($event)" 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"><mat-icon class="audio-video-icon">{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>&nbsp;&nbsp;{{file_obj.registered | date:'shortDate' : undefined : locale.ngID}}</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>
     <!-- The context menu trigger must be kept above the "more info" menu -->
     <div style="visibility: hidden; position: fixed"

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

@@ -3,6 +3,20 @@ import { MatDialog } from '@angular/material/dialog';
 import { VideoInfoDialogComponent } from 'app/dialogs/video-info-dialog/video-info-dialog.component';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MatMenuTrigger } from '@angular/material/menu';
+import { registerLocaleData } from '@angular/common';
+import localeGB from '@angular/common/locales/en-GB';
+import localeFR from '@angular/common/locales/fr';
+import localeES from '@angular/common/locales/es';
+import localeDE from '@angular/common/locales/de';
+import localeZH from '@angular/common/locales/zh';
+import localeNB from '@angular/common/locales/nb';
+
+registerLocaleData(localeGB);
+registerLocaleData(localeFR);
+registerLocaleData(localeES);
+registerLocaleData(localeDE);
+registerLocaleData(localeZH);
+registerLocaleData(localeNB);
 
 @Component({
   selector: 'app-unified-file-card',
@@ -29,10 +43,12 @@ export class UnifiedFileCardComponent implements OnInit {
   @Input() use_youtubedl_archive = false;
   @Input() is_playlist = false;
   @Input() index: number;
+  @Input() locale = null;
   @Output() goToFile = new EventEmitter<any>();
   @Output() goToSubscription = new EventEmitter<any>();
   @Output() deleteFile = new EventEmitter<any>();
   @Output() editPlaylist = new EventEmitter<any>();
+  
 
   @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;
   contextMenuPosition = { x: '0px', y: '0px' };

src/app/posts.services.ts

@@ -11,6 +11,7 @@ import { BehaviorSubject } from 'rxjs';
 import { v4 as uuid } from 'uuid';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import * as Fingerprint2 from 'fingerprintjs2';
+import { isoLangs } from './settings/locales_list';
 
 @Injectable()
 export class PostsService implements CanActivate {
@@ -53,6 +54,7 @@ export class PostsService implements CanActivate {
     config = null;
     subscriptions = null;
     sidenav = null;
+    locale = isoLangs['en'];
 
     constructor(private http: HttpClient, private router: Router, @Inject(DOCUMENT) private document: Document,
                 public snackBar: MatSnackBar) {
@@ -114,6 +116,17 @@ export class PostsService implements CanActivate {
         if (localStorage.getItem('card_size')) {
             this.card_size = localStorage.getItem('card_size');
         }
+
+        // localization
+        const locale = localStorage.getItem('locale');
+        if (!locale) {
+        localStorage.setItem('locale', 'en');
+        }
+
+        if (isoLangs[locale]) {
+            this.locale = isoLangs[locale];
+        }
+
     }
     canActivate(route, state): Promise<boolean> {
         return new Promise(resolve => {

src/app/settings/locales_list.ts

@@ -122,7 +122,8 @@ export const isoLangs = {
    },
    'zh': {
        'name': 'Chinese',
-       'nativeName': '中文 (Zhōngwén), 汉语, 漢語'
+       'nativeName': '中文 (Zhōngwén), 汉语, 漢語',
+       'ngID': 'zh'
    },
    'cv': {
        'name': 'Chuvash',
@@ -162,8 +163,14 @@ export const isoLangs = {
    },
    'en': {
        'name': 'English',
-       'nativeName': 'English'
-   },
+       'nativeName': 'English',
+       'ngID': 'en-US'
+   },
+   'en-GB': {
+        'name': 'British English',
+        'nativeName': 'British English',
+        'ngID': 'en-GB'
+    },
    'eo': {
        'name': 'Esperanto',
        'nativeName': 'Esperanto'
@@ -190,7 +197,8 @@ export const isoLangs = {
    },
    'fr': {
        'name': 'French',
-       'nativeName': 'français'
+       'nativeName': 'français',
+       'ngID': 'fr'
    },
    'ff': {
        'name': 'Fula; Fulah; Pulaar; Pular',
@@ -206,7 +214,8 @@ export const isoLangs = {
    },
    'de': {
        'name': 'German',
-       'nativeName': 'Deutsch'
+       'nativeName': 'Deutsch',
+       'ngID': 'de'
    },
    'el': {
        'name': 'Greek, Modern',
@@ -438,7 +447,8 @@ export const isoLangs = {
    },
    'nb': {
        'name': 'Norwegian Bokmål',
-       'nativeName': 'Norsk bokmål'
+       'nativeName': 'Norsk bokmål',
+       'ngID': 'nb'
    },
    'nd': {
        'name': 'North Ndebele',
@@ -594,7 +604,8 @@ export const isoLangs = {
    },
    'es': {
        'name': 'Spanish; Castilian',
-       'nativeName': 'español'
+       'nativeName': 'español',
+       'ngID': 'es'
    },
    'su': {
        'name': 'Sundanese',

src/app/settings/settings.component.ts

@@ -17,7 +17,7 @@ import { ConfirmDialogComponent } from 'app/dialogs/confirm-dialog/confirm-dialo
 })
 export class SettingsComponent implements OnInit {
   all_locales = isoLangs;
-  supported_locales = ['en', 'es', 'de', 'fr', 'zh', 'nb'];
+  supported_locales = ['en', 'es', 'de', 'fr', 'zh', 'nb', 'en-GB'];
   initialLocale = localStorage.getItem('locale');
 
   initial_config = null;