From 72f3b9b111dd35ac4494a7ba63fca4c5f7675cc4 Mon Sep 17 00:00:00 2001
From: Phill Pover <phill@anatid.net>
Date: Thu, 3 Apr 2025 11:41:00 +0100
Subject: [PATCH] Adding time formatting

---
 backend/src/song/dto/update-song.dto.ts       |  1 +
 frontend/src/app/album/[id]/page.tsx          | 13 ++++++-----
 frontend/src/app/album/page.tsx               |  2 +-
 .../src/{common => entities}/album.entity.tsx |  2 +-
 .../src/{common => entities}/song.entity.tsx  |  2 +-
 frontend/src/utils/time.util.tsx              | 22 +++++++++++++++++++
 6 files changed, 34 insertions(+), 8 deletions(-)
 rename frontend/src/{common => entities}/album.entity.tsx (68%)
 rename frontend/src/{common => entities}/song.entity.tsx (64%)
 create mode 100644 frontend/src/utils/time.util.tsx

diff --git a/backend/src/song/dto/update-song.dto.ts b/backend/src/song/dto/update-song.dto.ts
index b200229..8768771 100644
--- a/backend/src/song/dto/update-song.dto.ts
+++ b/backend/src/song/dto/update-song.dto.ts
@@ -2,4 +2,5 @@ export class UpdateSongDto {
   id: number;
   title: string;
   duration: number;
+  albumId: number;
 }
diff --git a/frontend/src/app/album/[id]/page.tsx b/frontend/src/app/album/[id]/page.tsx
index 2636eea..887dc5f 100644
--- a/frontend/src/app/album/[id]/page.tsx
+++ b/frontend/src/app/album/[id]/page.tsx
@@ -1,9 +1,10 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Album } from '@/common/album.entity';
-import { Song } from '@/common/song.entity';
 import { useParams } from 'next/navigation'
+import { Album } from '@/entities/album.entity';
+import { Song } from '@/entities/song.entity';
+import { TimeUtils } from '@/utils/time.util';
 
 export default function Page() {
   const [album, setAlbum] = useState<Album>();
@@ -28,9 +29,11 @@ export default function Page() {
         <em>{album.title}</em> by {album.artist} ({album.genre})
       </div>
       <ul>
-        {album.songs.map((song: Song) => (
-          <li key={song.id}>{song.title} ({song.duration})</li>
-        ))}
+        if (album.songs) {
+          album.songs.map((song: Song) => (
+            <li key={song.id}>{song.title} ({TimeUtils.fancyTimeFormat(song.duration)})</li>
+          ))
+        }
       </ul>
     </div>
   );
diff --git a/frontend/src/app/album/page.tsx b/frontend/src/app/album/page.tsx
index 5d141f7..fe5ba66 100644
--- a/frontend/src/app/album/page.tsx
+++ b/frontend/src/app/album/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { Album } from '@/common/album.entity';
+import { Album } from '@/entities/album.entity';
 
 export default function Page() {
   const [albums, setAlbums] = useState<Album[]>([]);
diff --git a/frontend/src/common/album.entity.tsx b/frontend/src/entities/album.entity.tsx
similarity index 68%
rename from frontend/src/common/album.entity.tsx
rename to frontend/src/entities/album.entity.tsx
index 0dffb64..2f57063 100644
--- a/frontend/src/common/album.entity.tsx
+++ b/frontend/src/entities/album.entity.tsx
@@ -1,4 +1,4 @@
-import { Song } from '@/common/song.entity';
+import { Song } from '@/entities/song.entity';
 
 export interface Album {
     id: number;
diff --git a/frontend/src/common/song.entity.tsx b/frontend/src/entities/song.entity.tsx
similarity index 64%
rename from frontend/src/common/song.entity.tsx
rename to frontend/src/entities/song.entity.tsx
index 63e7bbe..594cdcb 100644
--- a/frontend/src/common/song.entity.tsx
+++ b/frontend/src/entities/song.entity.tsx
@@ -1,4 +1,4 @@
-import { Album } from '@/common/album.entity';
+import { Album } from '@/entities/album.entity';
 
 export interface Song {
     id: number;
diff --git a/frontend/src/utils/time.util.tsx b/frontend/src/utils/time.util.tsx
new file mode 100644
index 0000000..8f03295
--- /dev/null
+++ b/frontend/src/utils/time.util.tsx
@@ -0,0 +1,22 @@
+export class TimeUtils {
+
+  // Copied from https://stackoverflow.com/a/11486026
+  static fancyTimeFormat(duration: number) {
+    // Hours, minutes and seconds
+    const hrs = ~~(duration / 3600);
+    const mins = ~~((duration % 3600) / 60);
+    const secs = ~~duration % 60;
+
+    // Output like "1:01" or "4:03:59" or "123:03:59"
+    let ret = "";
+
+    if (hrs > 0) {
+      ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
+    }
+
+    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
+    ret += "" + secs;
+
+    return ret;
+  }
+}