rectification de 'publishedAt' sur la page 'user/search'

src/app/user/search/page-search/page-search.component.html

@@ -16,7 +16,7 @@
             <!-- Search bar -->
             <div class="input-group" style="width: 100%; margin: 0 auto;">
                 <div class="form-outline" style="width: 100%; margin: 0 auto;">
-                    <input type="search" placeholder="Rechercher..." class="inputSearchBar" [(ngModel)]="search"/>
+                    <input type="search" placeholder="Rechercher..." class="inputSearchBar" [(ngModel)]="search" (keydown)="onEnterOnSearchBar($event)"/>
                     <button mat-icon-button (click)="onSearch()">
                         <mat-icon>search</mat-icon>
                     </button>

src/app/user/search/page-search/page-search.component.ts

@@ -83,4 +83,10 @@ export class PageSearchComponent implements OnInit
         }
     }
 
+
+    onEnterOnSearchBar(event)
+    {
+        if(event.key === 'Enter') this.onSearch();
+    }
+
 }

src/app/user/search/video-grid/video-grid.component.html

@@ -30,7 +30,8 @@
                             {{tronquage(tabVideo[indexPage+k].title)}}
                             <br>
                             <span style="color: gray">
-                                {{tabVideo[indexPage+k].views | number: '1.0-0'}} vues. Il y a 2h.
+                                {{tabVideo[indexPage+k].views | number: '1.0-0'}} vues.
+                                Il y a {{dateToElapsedTime(tabVideo[indexPage+k].publishedAt)}}.
                             </span>
                         </div>
                     </mat-grid-tile>

src/app/user/search/video-grid/video-grid.component.ts

@@ -33,8 +33,8 @@ export class VideoGridComponent
 
     tronquage(str: string)
     {
-        if(str.length < 33) return str;
-        else return str.substring(0, 30) + "..." ;
+        if(str.length < 30) return str;
+        else return str.substring(0, 27) + "..." ;
     }
 
 
@@ -55,4 +55,44 @@ export class VideoGridComponent
         if(retour.status !== "success") console.log(retour);
     }
 
+
+    dateToElapsedTime(date0): string
+    {
+        const ellapsedTimeInMilliSeconds = (new Date()).getTime() - (new Date(date0)).getTime();
+
+        // seconde
+        const ellapsedTimeInSeconds = Math.trunc(ellapsedTimeInMilliSeconds / 1000);
+        if(ellapsedTimeInSeconds < 60) {
+            if(ellapsedTimeInSeconds <= 1)return ellapsedTimeInSeconds + " seconde" ;
+            else return ellapsedTimeInSeconds + " secondes" ;
+        }
+        // minute
+        const ellapsedTimeInMinutes = Math.trunc(ellapsedTimeInSeconds / 60);
+        if(ellapsedTimeInMinutes < 60) {
+            if(ellapsedTimeInMinutes <= 1) return ellapsedTimeInMinutes + " minute" ;
+            else return ellapsedTimeInMinutes + " minutes" ;
+        }
+        // heure
+        const ellapsedTimeInHours = Math.trunc(ellapsedTimeInMinutes / 60);
+        if(ellapsedTimeInHours < 24) {
+            if(ellapsedTimeInHours <= 1) return ellapsedTimeInHours + " heure" ;
+            else return ellapsedTimeInHours + " heures" ;
+        }
+        // jour
+        const ellapsedTimeInDays = Math.trunc(ellapsedTimeInHours / 24);
+        if(ellapsedTimeInDays < 31) {
+            if(ellapsedTimeInDays <= 1) return ellapsedTimeInDays + " jour" ;
+            else return ellapsedTimeInDays + " jours" ;
+        }
+        // mois
+        const ellapsedTimeInMonths = Math.trunc(ellapsedTimeInDays / 31);
+        if(ellapsedTimeInMonths < 12) {
+            return ellapsedTimeInMonths + " mois" ;
+        }
+        // an
+        const ellapsedTimeInYears = Math.trunc(ellapsedTimeInMonths / 12);
+        if(ellapsedTimeInYears <= 1) return ellapsedTimeInYears + " an" ;
+        else return ellapsedTimeInYears + " ans" ;
+    }
+
 }

src/app/user/watching/page-watching-video/page-watching-video.component.html

@@ -17,7 +17,7 @@
             <!-- Search bar -->
             <div class="input-group" style="width: 100%; margin: 0 auto;">
                 <div class="form-outline" style="width: 100%; margin: 0 auto;">
-                    <input type="search" placeholder="Rechercher..." class="inputSearchBar"/>
+                    <input type="search" placeholder="Rechercher..." class="inputSearchBar" (keydown)="onEnterOnSearchBar($event)"/>
                     <button mat-icon-button (click)="onSearch()">
                         <mat-icon>search</mat-icon>
                     </button>

src/app/user/watching/page-watching-video/page-watching-video.component.ts

@@ -169,4 +169,10 @@ export class PageWatchingVideoComponent implements OnInit
         else return "videoCell" ;
     }
 
+
+    onEnterOnSearchBar(event)
+    {
+        if(event.key === 'Enter') this.onSearch();
+    }
+
 }