MBS-12572: Convert cdtoc/info to React

first_track and last_track seemed completely useless, so I'm just removing them and using a map on track_details. Since they didn't seem to be used elsewhere either, this also removes the methods.
metabrainz · Sep 13, 2022 · 8d8ebff · 8d8ebff
1 parent f5041ba
commit 8d8ebff
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 78 deletions.
diff --git a/lib/MusicBrainz/Server/Entity/CDTOC.pm b/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);
@@ -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    => $self->track_offset,
+    };
+
+    return $data;
 };
 
 

diff --git a/root/cdtoc/CDTocInfo.js b/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;
diff --git a/root/cdtoc/index.tt b/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 %]

diff --git a/root/cdtoc/info.tt b/root/cdtoc/info.tt
diff --git a/root/cdtoc/set_durations.tt b/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>

diff --git a/root/server/components.mjs b/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'),

diff --git a/root/types/medium.js b/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<{