Improve time representation

src/components/generics/Timing.jsx

@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types'
+
+import {
+  formatDuration,
+  formatTime,
+  formatDateTime,
+  formatTimeRelative,
+} from 'utils'
+
+export function Duration({ duration }) {
+  const [iso, hhmm, ss] = formatDuration(duration)
+
+  return (
+    <time className="timing duration" dateTime={iso}>
+      {hhmm}
+      <span className="seconds">{ss}</span>
+    </time>
+  )
+}
+
+Duration.propTypes = {
+  duration: PropTypes.string.isRequired,
+}
+
+export function Time({ iso }) {
+  const date = formatTime(iso)
+
+  return (
+    <time className="timing time" dateTime={iso}>
+      {date}
+    </time>
+  )
+}
+
+Time.propTypes = {
+  iso: PropTypes.string.isRequired,
+}
+
+export function DateTime({ iso, showSeconds = false }) {
+  const [date, ss] = formatDateTime(iso, showSeconds)
+
+  return (
+    <time className="timing date-time" dateTime={iso}>
+      {date}
+      {showSeconds && <span className="seconds">{ss}</span>}
+    </time>
+  )
+}
+
+DateTime.propTypes = {
+  iso: PropTypes.string.isRequired,
+  showSeconds: PropTypes.bool,
+}
+
+export function TimeRelative({ iso }) {
+  const date = formatTimeRelative(iso)
+
+  return (
+    <time className="timing time-relative" dateTime={iso}>
+      {date}
+    </time>
+  )
+}
+
+TimeRelative.propTypes = {
+  iso: PropTypes.string.isRequired,
+}

src/components/karaoke/player/Carousel.jsx

@@ -1,13 +1,15 @@
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import duration from 'dayjs/plugin/duration'
 import queryString from 'query-string'
 import { useSelector } from 'react-redux'
 import { Link } from 'react-router'
 
 import { CarouselEntry } from 'components/generics/Carousel'
+import { Duration, Time } from 'components/generics/Timing'
 import PlaylistEntryWidget from 'components/playlist/widgets/PlaylistEntry'
-import { formatDate, formatDuration } from 'utils'
 
+dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
 export function CarouselEntryCurrentSong() {
@@ -40,8 +42,12 @@ export function CarouselEntryCurrentSong() {
         />
       </Link>
       <div className="timing">
-        <div className="current">{formatDuration(timing)}</div>
-        <div className="duration">{formatDuration(entry.song.duration)}</div>
+        <div className="current">
+          <Duration duration={timing} />
+        </div>
+        <div className="duration">
+          <Duration duration={entry.song.duration} />
+        </div>
       </div>
     </CarouselEntry>
   )
@@ -147,7 +153,10 @@ export function CarouselEntryStats() {
   if (playlistEndDate && !karaokeEndDate) {
     end = (
       <li>
-        Playlist ends at <q>{formatDate(playlistEndDate)}</q>
+        Playlist ends at{' '}
+        <q>
+          <Time iso={playlistEndDate} />
+        </q>
       </li>
     )
     // only karaoke date end
@@ -156,10 +165,20 @@ export function CarouselEntryStats() {
       end = (
         <>
           <li>
-            Karaoke ends at <q>{formatDate(karaokeEndDate)}</q>
+            Karaoke ends at{' '}
+            <q>
+              <Time iso={karaokeEndDate} />
+            </q>
           </li>
           <li>
-            <q>{dayjs().to(karaokeEndDate, true)}</q> remaining
+            <q>
+              <time
+                dateTime={dayjs.duration(karaokeEndDate.diff()).toISOString()}
+              >
+                {dayjs().to(karaokeEndDate, true)}
+              </time>
+            </q>{' '}
+            remaining
           </li>
         </>
       )
@@ -173,10 +192,20 @@ export function CarouselEntryStats() {
       end = (
         <>
           <li>
-            Karaoke ends at <q>{formatDate(karaokeEndDate)}</q>
+            Karaoke ends at{' '}
+            <q>
+              <Time iso={karaokeEndDate} />
+            </q>
           </li>
           <li>
-            <q>{dayjs().to(karaokeEndDate, true)}</q> remaining
+            <q>
+              <time
+                dateTime={dayjs.duration(karaokeEndDate.diff()).toISOString()}
+              >
+                {dayjs().to(karaokeEndDate, true)}
+              </time>
+            </q>{' '}
+            remaining
           </li>
         </>
       )
@@ -186,7 +215,9 @@ export function CarouselEntryStats() {
         <>
           <li>
             Playlist should end after karaoke at{' '}
-            <q>{formatDate(playlistEndDate)}</q>
+            <q>
+              <Time iso={playlistEndDate} />
+            </q>
           </li>
           <li>Playlist exceeds karaoke scheduled end!</li>
         </>

src/components/library/status/InPlaylist.jsx

@@ -6,7 +6,8 @@ import { Link } from 'react-router'
 
 import UserWidget from 'components/user/widgets/User'
 import { playlistEntryPropType } from 'serverPropTypes/playlist'
-import { formatDate, formatDateRelative, getMostPertinentEntry } from 'utils'
+import { getMostPertinentEntry } from 'utils'
+import { Time, TimeRelative } from 'components/generics/Timing'
 
 function Playing({ entry }) {
   const playerStatus = useSelector((state) => state.playlist.playerStatus.data)
@@ -35,7 +36,7 @@ function Queuing({ entry }) {
       <span className="icon">
         <i className="las la-chevron-right"></i>
       </span>
-      <time className="date">{formatDate(entry.date_play)}</time>
+      <Time iso={entry.date_play} />
     </div>
   )
 }
@@ -50,7 +51,7 @@ function Played({ entry }) {
       <span className="icon">
         <i className="las la-chevron-left"></i>
       </span>
-      <time className="date">{formatDate(entry.date_play)}</time>
+      <Time iso={entry.date_play} />
     </div>
   )
 }
@@ -114,7 +115,7 @@ export default function InPlaylist({
             >
               will play
             </Link>{' '}
-            {formatDateRelative(entry.date_play)}
+            <TimeRelative iso={entry.date_play} />
           </span>
         )
       }
@@ -137,7 +138,7 @@ export default function InPlaylist({
             >
               played
             </Link>{' '}
-            {formatDateRelative(entry.date_play)}
+            <TimeRelative iso={entry.date_play} />
           </span>
         )
       }

src/components/library/widgets/Song.jsx

@@ -6,7 +6,8 @@ import SongTagList from 'components/library/SongTagList'
 import ArtistWidget from 'components/library/widgets/Artist'
 import WorkLinkWidget from 'components/library/widgets/WorkLink'
 import { songPropType } from 'serverPropTypes/library'
-import { formatDuration, isDisplayable } from 'utils'
+import { isDisplayable } from 'utils'
+import { Duration } from 'components/generics/Timing'
 
 export default function SongWidget({
   song,
@@ -69,7 +70,7 @@ export default function SongWidget({
   // song duration
   let duration
   if (!noDuration) {
-    duration = <span className="duration">{formatDuration(song.duration)}</span>
+    duration = <Duration duration={song.duration} />
   }
 
   // song tags

src/components/playlist/played/Entry.jsx

@@ -10,7 +10,7 @@ import {
 import HasError from 'components/playlist/status/HasError'
 import PlaylistEntryWidget from 'components/playlist/widgets/PlaylistEntry'
 import { playlistEntryPropType } from 'serverPropTypes/playlist'
-import { formatDateLong } from 'utils'
+import { DateTime } from 'components/generics/Timing'
 
 export default function PlayedEntry({ entry, ...rest }) {
   const query = useSelector((state) => state.playlist.played.data.query)
@@ -65,10 +65,10 @@ export default function PlayedEntry({ entry, ...rest }) {
           </DetailText>
         )}
         <DetailText icon="la-clock" name="Requested at">
-          {formatDateLong(entry.date_created)}
+          <DateTime iso={entry.date_created} />
         </DetailText>
         <DetailText icon="la-clock" name="Played at">
-          {formatDateLong(entry.date_play)}
+          <DateTime iso={entry.date_play} />
         </DetailText>
       </Details>
     </ListingEntryExpanded>

src/components/playlist/playerErrors/Entry.jsx

@@ -14,7 +14,7 @@ import {
 } from 'components/generics/listing/Entry'
 import PlaylistEntryWidget from 'components/playlist/widgets/PlaylistEntry'
 import { playerErrorPropType } from 'serverPropTypes/playlist'
-import { formatDateLong } from 'utils'
+import { DateTime } from 'components/generics/Timing'
 
 export default function PlayerErrorsEntry({ playerError, ...rest }) {
   const query = useSelector((state) => state.playlist.playerErrors.data.query)
@@ -69,7 +69,7 @@ export default function PlayerErrorsEntry({ playerError, ...rest }) {
     <ListingEntryExpanded controls={controlsExpanded}>
       <Details>
         <DetailText icon="la-clock" name="Error at">
-          {formatDateLong(date, /* seconds = */ true)}
+          <DateTime iso={date} showSeconds />
         </DetailText>
         <DetailLongText icon="la-file-alt" name="Error message">
           <HighlighterQuery

src/components/playlist/queuing/Entry.jsx

@@ -21,7 +21,7 @@ import {
   IsPlaylistManagerOrOwner,
 } from 'permissions/components/Playlist'
 import { playlistEntryPropType } from 'serverPropTypes/playlist'
-import { formatDateLong } from 'utils'
+import { DateTime } from 'components/generics/Timing'
 
 function ReorderButton({ handleReorder, className, id }) {
   return (
@@ -319,11 +319,11 @@ export default function QueuingEntry({ entry, positions, ...rest }) {
           </DetailText>
         )}
         <DetailText icon="la-clock" name="Requested at">
-          {formatDateLong(entry.date_created)}
+          <DateTime iso={entry.date_created} />
         </DetailText>
         {queuingEntryDigest && (
           <DetailText icon="la-clock" name="Should play at">
-            {formatDateLong(queuingEntryDigest.date_play)}
+            <DateTime iso={entry.date_play} />
           </DetailText>
         )}
       </Details>

src/components/playlist/widgets/PlaylistEntry.jsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 
 import SongWidget from 'components/library/widgets/Song'
 import UserWidget from 'components/user/widgets/User'
-import { formatDateRelative } from 'utils'
+import { TimeRelative } from 'components/generics/Timing'
 
 export default function PlaylistEntryWidget({
   entry,
@@ -46,11 +46,7 @@ export default function PlaylistEntryWidget({
         <span className="icon">
           <i className="las la-clock"></i>
         </span>
-        {playlistEntry && (
-          <time className="date">
-            {formatDateRelative(playlistEntry.date_play)}
-          </time>
-        )}
+        {playlistEntry && <TimeRelative iso={playlistEntry.date_play} />}
       </span>
     )
   }

src/style/components/generics/_index.scss

@@ -14,4 +14,5 @@
 @use 'searchbox';
 @use 'shapes';
 @use 'tab_bar';
+@use 'timing';
 @use 'token_widget';

src/style/components/generics/_timing.scss

@@ -0,0 +1,5 @@
+.timing {
+  .seconds {
+    font-size: 0.8em;
+  }
+}

src/style/components/library/status/_in_playlist.scss

@@ -25,7 +25,7 @@
     font-size: 1em;
   }
 
-  .date {
+  .time {
     font-size: x-small;
     text-align: center;
     white-space: nowrap;