Make offsets more human readable

apps/twitch-logs/src/app/comments/comments.component.html

@@ -29,9 +29,9 @@
 
             <mat-cell fxFlex="15%" *matCellDef="let comment">
             
-                <a mat-button href="https://www.twitch.tv/videos/{{videoID}}?comment={{comment.id}}&t={{comment.offset | tohms : 'units'}}" target="_blank">
+                <a mat-button href="https://www.twitch.tv/videos/{{videoID}}?comment={{comment.id}}&t={{comment.offset | tohms}}" target="_blank">
 
-                    {{comment.offset | tohms}}
+                    {{comment.offset | tohms : 'colons'}}
 
                 </a>
 

apps/twitch-logs/src/app/pipes/tohms.pipe.ts

@@ -9,7 +9,7 @@ import {
 })
 export class ToHMSPipe implements PipeTransform {
 
-    transform(offset: number): string {
+    transform(offset: number, format: string): string {
         let secs = offset >> 0;
         let seconds = secs % 60;
         let mins = (secs - seconds) / 60 >> 0;
@@ -20,6 +20,12 @@ export class ToHMSPipe implements PipeTransform {
         let m = minutes.toString().padStart(2, '0');
         let h = hours.toString().padStart(2, '0');
 
+        if (format == 'colons') {
+            return `${h}:${m}:${s}`;
+        } else if (format == 'spaces') {
+            return `${h}h ${m}m ${s}s`;
+        }
+
         return `${h}h${m}m${s}s`;
     }
 }

apps/twitch-logs/src/app/videos/videos.component.html

@@ -59,7 +59,7 @@
 
             <mat-header-cell fxFlex="12%" *matHeaderCellDef mat-sort-header>Length</mat-header-cell>
 
-            <mat-cell fxFlex="12%" *matCellDef="let video">{{video.length | tohms}}</mat-cell>
+            <mat-cell fxFlex="12%" *matCellDef="let video">{{video.length | tohms : 'spaces'}}</mat-cell>
 
         </ng-container>