File cards now use the locale to format dates

2026-03-07 12:00:01 +03:00 · 2020-10-23 01:38:44 -04:00
parent 8366089444
commit edc22cc47b
7 changed files with 51 additions and 11 deletions
--- a/src/app/components/custom-playlists/custom-playlists.component.html
+++ b/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>
--- a/src/app/components/recent-videos/recent-videos.component.html
+++ b/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>
--- a/src/app/components/unified-file-card/unified-file-card.component.html
+++ b/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"
--- a/src/app/components/unified-file-card/unified-file-card.component.ts
+++ b/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' };
--- a/src/app/posts.services.ts
+++ b/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 => {
--- a/src/app/settings/locales_list.ts
+++ b/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',
--- a/src/app/settings/settings.component.ts
+++ b/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;