add relative date display on channel home

src/libs/date.js

@@ -12,3 +12,30 @@ export function formatDate(dateStr) {
 	const formattedDate = formatter.format(date)
 	return formattedDate
 }
+
+export function substractDays(dateString, days = 0) {
+	const date = new Date(dateString)
+	date.setDate(date.getDate() - days)
+	return date
+}
+
+// Check if the date is fresher than 1 month
+export function isFreshDate(updatedAt) {
+	const trackDate = new Date(updatedAt)
+	const today = new Date()
+
+	// Calculate the date one month ago
+	const oneMonthAgo = new Date(today)
+	oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1)
+
+	// Check if the track was updated within the last month
+	return trackDate >= oneMonthAgo && trackDate <= today
+}
+
+export function relativeDate(dateString) {
+	const date = new Date(dateString)
+	const today = new Date()
+	const diffTime = Math.abs(today - date)
+	const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+	return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`
+}

src/pages/base-channel.js

@@ -3,6 +3,9 @@ import {sdk} from '../libs/sdk.js'
 import R4Page from '../components/r4-page.js'
 
 export default class BaseChannel extends R4Page {
+	createRenderRoot() {
+		return this
+	}
 	static properties = {
 		channel: {type: Object, state: true},
 		channelError: {type: Object, state: true},
@@ -104,10 +107,6 @@ export default class BaseChannel extends R4Page {
 		}
 	}
 
-	createRenderRoot() {
-		return this
-	}
-
 	renderAside() {
 		return html`${this.channel ? this.renderChannelShare() : null}`
 	}

src/pages/r4-page-channel.js

@@ -1,6 +1,7 @@
 import {html} from 'lit'
 import {repeat} from 'lit/directives/repeat.js'
 import BaseChannel from './base-channel'
+import {formatDate, isFreshDate, relativeDate} from '../libs/date.js'
 
 export default class R4PageChannel extends BaseChannel {
 	static properties = {
@@ -51,6 +52,7 @@ export default class R4PageChannel extends BaseChannel {
 			return html`
 				<section>${this.renderChannelCard()}</section>
 				<section>${this.renderTracksList()}</section>
+				<section>${this.renderTimes()}</section>
 				<section>
 					<button type="button" role="menuitem" @click=${() => this.openDialog('share')}>Share</button>
 				</section>
@@ -83,4 +85,15 @@ export default class R4PageChannel extends BaseChannel {
 			}
 		}
 	}
+	renderTimes() {
+		const lastTrack = this.tracks[0]
+		if (!lastTrack) return
+		const doms = []
+		if (isFreshDate(lastTrack.updated_at)) {
+			doms.push(html`Last updated <date>${relativeDate(lastTrack?.updated_at)}</date>.`)
+			doms.push(' ')
+		}
+		doms.push(html`Brodcasting since <date>${formatDate(this.channel?.created_at)}</date>.`)
+		return html`<i>${doms}</i>`
+	}
 }