MBS-12572: Convert cdtoc/info to React

lib/MusicBrainz/Server/Entity/CDTOC.pm

@@ -38,18 +38,6 @@ has 'degraded' => (
     isa => 'Boolean'
 );
 
-sub first_track
-{
-    return 1;
-}
-
-sub last_track
-{
-    my ($self) = @_;
-
-    return $self->track_count;
-}
-
 sub sectors_to_ms
 {
     return int($_[0] / 75 * 1000);
@@ -69,14 +57,14 @@ sub track_details
     my @track_info;
     foreach my $track (0 .. ($self->track_count - 1)) {
         my %info;
-        $info{start_sectors} = $self->track_offset->[$track];
-        $info{start_time} = sectors_to_ms($info{start_sectors});
+        $info{start_sectors} = 0 + $self->track_offset->[$track];
+        $info{start_time} = 0 + sectors_to_ms($info{start_sectors});
         $info{end_sectors} = ($track == $self->track_count - 1)
-            ? $self->leadout_offset
-            : $self->track_offset->[$track + 1];
-        $info{end_time} = sectors_to_ms($info{end_sectors});
-        $info{length_sectors} = $info{end_sectors} - $info{start_sectors};
-        $info{length_time} = sectors_to_ms($info{length_sectors});
+            ? 0 + $self->leadout_offset
+            : 0 + $self->track_offset->[$track + 1];
+        $info{end_time} = 0 + sectors_to_ms($info{end_sectors});
+        $info{length_sectors} = 0 + ($info{end_sectors} - $info{start_sectors});
+        $info{length_time} = 0 + sectors_to_ms($info{length_sectors});
         push @track_info, \%info;
     }
     return \@track_info;
@@ -143,10 +131,18 @@ with 'MusicBrainz::Server::Entity::Role::TOC';
 around TO_JSON => sub {
     my ($orig, $self) = @_;
 
-    my $json = $self->$orig;
-    $json->{discid} = $self->discid;
-
-    return $json;
+    my $data = {
+        %{ $self->$orig },
+        discid          => $self->discid,
+        freedb_id       => $self->freedb_id,
+        leadout_offset  => 0 + $self->leadout_offset,
+        length          => 0 + $self->length,
+        track_count     => 0 + $self->track_count,
+        track_details   => $self->track_details,
+        track_offset    => [map { 0 + $_ } @{ $self->track_offset }],
+    };
+
+    return $data;
 };
 
 

root/cdtoc/CDTocInfo.js

@@ -0,0 +1,86 @@
+/*
+ * @flow strict-local
+ * Copyright (C) 2022 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+import * as React from 'react';
+
+import formatTrackLength
+  from '../static/scripts/common/utility/formatTrackLength.js';
+
+type Props = {
+  +cdToc: CDTocT,
+};
+
+function calculateFullToc(cdtoc: CDTocT) {
+  const trackOffsets = cdtoc.track_offset.join(' ');
+  return `1 ${cdtoc.track_count} ${cdtoc.leadout_offset} ${trackOffsets}`;
+}
+
+const CDTocInfo = ({cdToc}: Props): React.Element<typeof React.Fragment> => (
+  <>
+    <h2>{l('CD TOC details')}</h2>
+
+    <table>
+      <tr>
+        <th>{l('Full TOC:')}</th>
+        <td>{calculateFullToc(cdToc)}</td>
+      </tr>
+
+      <tr>
+        <th>{l('Disc ID:')}</th>
+        <td><code>{cdToc.discid}</code></td>
+      </tr>
+      <tr>
+        <th>{l('FreeDB:')}</th>
+        <td>{cdToc.freedb_id}</td>
+      </tr>
+      <tr>
+        <th>{l('Total tracks:')}</th>
+        <td>{cdToc.track_count}</td>
+      </tr>
+      <tr>
+        <th>{l('Total length:')}</th>
+        <td>{formatTrackLength(cdToc.length)}</td>
+      </tr>
+      <tr>
+        <th>{l('Track details:')}</th>
+        <td>
+          <table>
+            <tr>
+              <th rowSpan="2">{l('Track')}</th>
+              <th colSpan="2">{l('Start')}</th>
+              <th colSpan="2">{l('Length')}</th>
+              <th colSpan="2">{l('End')}</th>
+            </tr>
+            <tr>
+              <th>{l('Time')}</th>
+              <th>{l('Sectors')}</th>
+              <th>{l('Time')}</th>
+              <th>{l('Sectors')}</th>
+              <th>{l('Time')}</th>
+              <th>{l('Sectors')}</th>
+            </tr>
+            {cdToc.track_details.map((track, index) => (
+              <tr key={index}>
+                <td>{index + 1}</td>
+                <td>{formatTrackLength(track.start_time)}</td>
+                <td>{track.start_sectors}</td>
+                <td>{formatTrackLength(track.length_time)}</td>
+                <td>{track.length_sectors}</td>
+                <td>{formatTrackLength(track.end_time)}</td>
+                <td>{track.end_sectors}</td>
+              </tr>
+            ))}
+          </table>
+        </td>
+      </tr>
+    </table>
+  </>
+);
+
+export default CDTocInfo;

root/cdtoc/index.tt

@@ -2,7 +2,8 @@
 
     <h1>[% l('Disc ID “<code>{discid}</code>”', { discid => link_cdtoc(cdtoc) }) %]</h1>
 
-    [% INCLUDE 'cdtoc/info.tt' %]
+    [%- cdtoc_json_obj = React.to_json_object(cdtoc) -%]
+    [% React.embed(c, 'cdtoc/CDTocInfo', {cdToc => cdtoc_json_obj}) %]
 
     <h2>[% l('Attached to releases') %]</h2>
     [% INCLUDE 'cdtoc/list.tt' edit_links = 1 %]

root/cdtoc/set_durations.tt

@@ -5,7 +5,8 @@
           to match that of the below disc ID.') %]
   </p>
 
-  [% INCLUDE 'cdtoc/info.tt' %]
+  [%- cdtoc_json_obj = React.to_json_object(cdtoc) -%]
+  [% React.embed(c, 'cdtoc/CDTocInfo', {cdToc => cdtoc_json_obj}) %]
 
   <h2>[% l('Medium') %]</h2>
   <table class="tbl"><tbody>

root/server/components.mjs

@@ -343,6 +343,7 @@ export default {
    */
   'area/AreaHeader': (): Promise<mixed> => import('../area/AreaHeader.js'),
   'artist/ArtistHeader': (): Promise<mixed> => import('../artist/ArtistHeader.js'),
+  'cdtoc/CDTocInfo': (): Promise<mixed> => import('../cdtoc/CDTocInfo.js'),
   'collection/CollectionHeader': (): Promise<mixed> => import('../collection/CollectionHeader.js'),
   'components/UserAccountTabs': (): Promise<mixed> => import('../components/UserAccountTabs.js'),
   'edit/components/EditList': (): Promise<mixed> => import('../edit/components/EditList.js'),

root/types/medium.js

@@ -10,6 +10,19 @@
 declare type CDTocT = $ReadOnly<{
   ...EntityRoleT<'cdtoc'>,
   +discid: string,
+  +freedb_id: string,
+  +leadout_offset: number,
+  +length: number,
+  +track_count: number,
+  +track_details: $ReadOnlyArray<{
+    +end_sectors: number,
+    +end_time: number,
+    +length_sectors: number,
+    +length_time: number,
+    +start_sectors: number,
+    +start_time: number,
+  }>,
+  +track_offset: $ReadOnlyArray<number>,
 }>;
 
 declare type MediumCDTocT = $ReadOnly<{