Some fix

index.html

@@ -10,9 +10,12 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/moment@2/moment.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/cdn/with-layouts/vidstack.js" type="module"></script>
     <!-- CSS load -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/player/styles/default/theme.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/player/styles/default/layouts/audio.min.css">
     <link rel="preconnect" href="https://rsms.me">
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/distr/fira_code.css">
@@ -97,11 +100,23 @@
               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body">
-              <h3>Download</h3>
+              <h3>Direct Download</h3>
               <table class="table table-sm table-responsive table-hover table-borderless align-middle">
                 <tbody id="trackInfoModal-downloadTable">
                 </tbody>
               </table>
+              <h3>Preview</h3>
+              <!-- <table class="table table-sm table-responsive table-hover table-borderless align-middle">
+                <tbody id="trackInfoModal-previewTable">
+                  <tr>
+                    <td>FLAC</td>
+                    <td class="w-100">
+                      <audio class="w-100 align-middle" controls controlslist="nodownload" src="https://hf.co/datasets/DeliberatorArchiver/discography_v2_cdn/resolve/main/media/018d269e-89c0-7371-b748-79730286a132/flac/018d2827-8ae1-7a2d-823e-2558c99d6eed.flac"></audio>
+                    </td>
+                  </tr>
+                </tbody>
+              </table> -->
+              <audio id="trackInfoModal-previewAudio" class="w-100 align-middle text-center mb-3" controls controlslist="nodownload" src=""></audio>
               <h3>Metadata</h3>
               <h4>General</h4>
               <table class="table table-sm table-responsive table-hover table-borderless align-middle">
@@ -126,26 +141,6 @@
                     <td>Arranger</td>
                     <td id="trackInfoModal-metadataTable-arranger">---</td>
                   </tr>
-                  <tr>
-                    <td>Track Title (Latin)</td>
-                    <td id="trackInfoModal-metadataTable-trackTitleLatin">---</td>
-                  </tr>
-                  <tr>
-                    <td>Artists (Latin)</td>
-                    <td id="trackInfoModal-metadataTable-artistsLatin">---</td>
-                  </tr>
-                  <tr>
-                    <td>Lyricist (Latin)</td>
-                    <td id="trackInfoModal-metadataTable-lyricistLatin">---</td>
-                  </tr>
-                  <tr>
-                    <td>Composer (Latin)</td>
-                    <td id="trackInfoModal-metadataTable-composerLatin">---</td>
-                  </tr>
-                  <tr>
-                    <td>Arranger (Latin)</td>
-                    <td id="trackInfoModal-metadataTable-arrangerLatin">---</td>
-                  </tr>
                   <tr>
                     <td>Track Duration (Readable)</td>
                     <td id="trackInfoModal-metadataTable-trackDurationReadable">---</td>
@@ -170,14 +165,6 @@
                     <td>Album Artist</td>
                     <td id="trackInfoModal-metadataTable-albumArtist">---</td>
                   </tr>
-                  <tr>
-                    <td>Album Title (Latin)</td>
-                    <td id="trackInfoModal-metadataTable-albumTitleLatin">---</td>
-                  </tr>
-                  <tr>
-                    <td>Album Artist (Latin)</td>
-                    <td id="trackInfoModal-metadataTable-albumArtistLatin">---</td>
-                  </tr>
                   <tr>
                     <td>Album Released</td>
                     <td id="trackInfoModal-metadataTable-albumReleaseDate">YYYY/MM/DD</td>
@@ -200,15 +187,17 @@
               <h4>Cover Artwork Images</h4>
               <div class="mb-3" id="trackInfoModal-coverArtLinkDiv">
               </div>
-              <h3>Debug Area</h3>
-              <div class="accordion" id="trackInfoModal-DebugAcd">
-                <div class="accordion-item">
-                  <h2 class="accordion-header">
-                    <button class="accordion-button collapsed user-select-none" type="button" data-bs-toggle="collapse" data-bs-target="#trackInfoModal-DebugAcdInCollapse">Parsed data output (album)</button>
-                  </h2>
-                  <div id="trackInfoModal-DebugAcdInCollapse" class="accordion-collapse collapse" data-bs-parent="#trackInfoModal-DebugAcd">
-                    <div class="accordion-body">
-                      <pre class=""><code id="trackInfoModal-DebugAcdOutputEl"></code></pre>
+              <div id="debugAreaSection" class="d-none">
+                <h3>Debug Area</h3>
+                <div class="accordion" id="trackInfoModal-DebugAcd">
+                  <div class="accordion-item">
+                    <h2 class="accordion-header">
+                      <button class="accordion-button collapsed user-select-none" type="button" data-bs-toggle="collapse" data-bs-target="#trackInfoModal-DebugAcdInCollapse">Parsed data output (album)</button>
+                    </h2>
+                    <div id="trackInfoModal-DebugAcdInCollapse" class="accordion-collapse collapse" data-bs-parent="#trackInfoModal-DebugAcd">
+                      <div class="accordion-body">
+                        <pre class=""><code id="trackInfoModal-DebugAcdOutputEl"></code></pre>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -221,34 +210,36 @@
         </div>
       </div>
       <hr class="my-4">
-      <h3 class="user-select-none">Debug Area</h3>
-      <button id="trackListingTestButton" class="btn btn-primary mb-3" type="button"><i class="bi bi-menu-button-wide me-1"></i>List track</button>
-      <h4 class="user-select-none">Fetch data output testing</h3>
-      <button id="loadDatabaseTestButton" class="btn btn-primary mb-3" type="button"><i class="bi bi-database-down me-1"></i>Load Database</button>
-      <div class="fetchingDataNowLabel user-select-none d-none">
-        <div class="d-inline-flex align-items-center mb-3">
-          <div class="spinner-border text-primary me-2" role="status">
-            <span class="visually-hidden">Loading...</span>
+      <div id="debugAreaSection" class="d-none">
+        <h3 class="user-select-none">Debug Area</h3>
+        <button id="trackListingTestButton" class="btn btn-primary mb-3" type="button"><i class="bi bi-menu-button-wide me-1"></i>List track</button>
+        <h4 class="user-select-none">Fetch data output testing</h3>
+        <button id="loadDatabaseTestButton" class="btn btn-primary mb-3" type="button"><i class="bi bi-database-down me-1"></i>Load Database</button>
+        <div class="fetchingDataNowLabel user-select-none d-none">
+          <div class="d-inline-flex align-items-center mb-3">
+            <div class="spinner-border text-primary me-2" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+            <span>Fetching data ...</span>
           </div>
-          <span>Fetching data ...</span>
         </div>
-      </div>
-      <div class="accordion" id="databaseTestOutputAccordion">
-        <div class="accordion-item">
-          <h2 class="accordion-header">
-            <button class="accordion-button collapsed user-select-none" type="button" data-bs-toggle="collapse" data-bs-target="#databaseTestRawOutputCollapse">
-              Raw data output
-            </button>
-          </h2>
-          <div id="databaseTestRawOutputCollapse" class="accordion-collapse collapse" data-bs-parent="#databaseTestOutputAccordion">
-            <div class="accordion-body">
-              <pre class=""><code id="databaseTestInfoCodeEl"></code></pre>
-              <pre class=""><code id="databaseTestOutputCodeEl"></code></pre>
+        <div class="accordion" id="databaseTestOutputAccordion">
+          <div class="accordion-item">
+            <h2 class="accordion-header">
+              <button class="accordion-button collapsed user-select-none" type="button" data-bs-toggle="collapse" data-bs-target="#databaseTestRawOutputCollapse">
+                Raw data output
+              </button>
+            </h2>
+            <div id="databaseTestRawOutputCollapse" class="accordion-collapse collapse" data-bs-parent="#databaseTestOutputAccordion">
+              <div class="accordion-body">
+                <pre class=""><code id="databaseTestInfoCodeEl"></code></pre>
+                <pre class=""><code id="databaseTestOutputCodeEl"></code></pre>
+              </div>
             </div>
           </div>
         </div>
+        <hr class="my-4">
       </div>
-      <hr class="my-4">
       <iframe data-aa='2297053' src='//acceptable.a-ads.com/2297053' style='border:0px; padding:0; width:100%; height:100%; overflow:hidden; background-color: transparent;'></iframe>
       <footer>
         <p class="my-1"><small class="text-body-tertiary user-select-none">This page using: Bootstrap, Axios, CryptoJS, A-ADS, Inter, Fira Code, Noto Sans JP</small></p>

script.js

@@ -29,9 +29,11 @@ window.addEventListener('load', async function(){
   } else {
     loadAppSettingsFromLocalStorage();
     if (window.matchMedia('(prefers-color-scheme:dark)').matches === true) {
-      console.warn(`prefers-color-scheme:dark detected`)
-      appSettingsSaveData.ui.uiThemeMode = 'dark';
-      writeAppSettingsToLocalStorage();
+      console.warn(`prefers-color-scheme:dark detected`);
+      if (appSettingsSaveData.ui.uiThemeMode !== 'dark') {
+        appSettingsSaveData.ui.uiThemeMode = 'dark';
+        writeAppSettingsToLocalStorage();
+      }
     } else {
       appSettingsSaveData.ui.uiThemeMode = 'light';
       writeAppSettingsToLocalStorage();
@@ -112,74 +114,70 @@ function pushToTrackListGroupUi () {
 
 // ========== trackInfoModalの処理 ==========
 
+let bootstrapTooltipList = null;
 function loadTrackInfoModal (trackUuid) {
   const albumParsedObject = getParsedAlbumObjectFromAlbumUuid(getAlbumUuidFromTrackUuid(trackUuid));
   const trackParsedObject = albumParsedObject.tracks.find((obj) => obj.uuid === trackUuid);
-  document.getElementById('trackInfoModal-metadataTable-trackTitleLatin').classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-artistsLatin').classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-lyricistLatin').classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-composerLatin').classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-arrangerLatin').classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-albumTitleLatin').classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-albumArtistLatin').classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-trackTitleLatin').previousElementSibling.classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-artistsLatin').previousElementSibling.classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-lyricistLatin').previousElementSibling.classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-composerLatin').previousElementSibling.classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-arrangerLatin').previousElementSibling.classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-albumTitleLatin').previousElementSibling.classList.add('text-body-tertiary');
-  document.getElementById('trackInfoModal-metadataTable-albumArtistLatin').previousElementSibling.classList.add('text-body-tertiary');
+  if (bootstrapTooltipList !== null) {bootstrapTooltipList.forEach(el => el.dispose())}
   document.getElementById('trackInfoModal-metadataTable-trackTitle').innerHTML = trackParsedObject.title;
   if (trackParsedObject.titleLatin === null) {
-    document.getElementById('trackInfoModal-metadataTable-trackTitleLatin').parentNode.classList.add('d-none');
+    document.getElementById('trackInfoModal-metadataTable-trackTitle').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal-metadataTable-trackTitle').removeAttribute('data-bs-title');
   } else {
-    document.getElementById('trackInfoModal-metadataTable-trackTitleLatin').parentNode.classList.remove('d-none');
-    document.getElementById('trackInfoModal-metadataTable-trackTitleLatin').innerHTML = trackParsedObject.titleLatin;
+    document.getElementById('trackInfoModal-metadataTable-trackTitle').setAttribute('data-bs-toggle', 'tooltip');
+    document.getElementById('trackInfoModal-metadataTable-trackTitle').setAttribute('data-bs-title', trackParsedObject.titleLatin);
   }
   document.getElementById('trackInfoModal-metadataTable-artists').innerHTML = trackParsedObject.artist.map((obj) => obj.name).join(', ');
-  if (trackParsedObject.artist.some((obj) => obj.nameLatin === null)) {
-    document.getElementById('trackInfoModal-metadataTable-artistsLatin').parentNode.classList.add('d-none');
+  if (trackParsedObject.artist.some((obj) => obj.nameLatin !== null)) {
+    document.getElementById('trackInfoModal-metadataTable-artists').setAttribute('data-bs-toggle', 'tooltip');
+    document.getElementById('trackInfoModal-metadataTable-artists').setAttribute('data-bs-title', trackParsedObject.artist.map((obj) => {if (obj.nameLatin !== null) {return obj.nameLatin} else {return obj.name}}).join(', '));
   } else {
-    document.getElementById('trackInfoModal-metadataTable-artistsLatin').parentNode.classList.remove('d-none');
-    document.getElementById('trackInfoModal-metadataTable-artistsLatin').innerHTML = trackParsedObject.artist.map((obj) => obj.nameLatin).join(', ');
+    document.getElementById('trackInfoModal-metadataTable-artistsLatin').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal-metadataTable-artistsLatin').removeAttribute('data-bs-title');
   }
   if (trackParsedObject.lyricist === null) {
     document.getElementById('trackInfoModal-metadataTable-lyricist').parentNode.classList.add('d-none');
-    document.getElementById('trackInfoModal-metadataTable-lyricistLatin').parentNode.classList.add('d-none');
+    document.getElementById('trackInfoModal-metadataTable-lyricist').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal-metadataTable-lyricist').removeAttribute('data-bs-title');
   } else {
     document.getElementById('trackInfoModal-metadataTable-lyricist').parentNode.classList.remove('d-none');
     document.getElementById('trackInfoModal-metadataTable-lyricist').innerHTML = trackParsedObject.lyricist.map((obj) => obj.name).join(', ');
-    if (trackParsedObject.lyricist.some((obj) => obj.nameLatin === null)) {
-      document.getElementById('trackInfoModal-metadataTable-lyricistLatin').parentNode.classList.add('d-none');
+    if (trackParsedObject.lyricist.some((obj) => obj.nameLatin !== null)) {
+      document.getElementById('trackInfoModal-metadataTable-lyricist').setAttribute('data-bs-toggle', 'tooltip');
+      document.getElementById('trackInfoModal-metadataTable-lyricist').setAttribute('data-bs-title', trackParsedObject.lyricist.map((obj) => {if (obj.nameLatin !== null) {return obj.nameLatin} else {return obj.name}}).join(', '));
     } else {
-      document.getElementById('trackInfoModal-metadataTable-lyricistLatin').parentNode.classList.remove('d-none');
-      document.getElementById('trackInfoModal-metadataTable-lyricistLatin').innerHTML = trackParsedObject.lyricist.map((obj) => obj.nameLatin).join(', ');
+      document.getElementById('trackInfoModal-metadataTable-lyricist').removeAttribute('data-bs-toggle');
+      document.getElementById('trackInfoModal-metadataTable-lyricist').removeAttribute('data-bs-title');
     }
   }
   if (trackParsedObject.composer === null) {
     document.getElementById('trackInfoModal-metadataTable-composer').parentNode.classList.add('d-none');
-    document.getElementById('trackInfoModal-metadataTable-composerLatin').parentNode.classList.add('d-none');
+    document.getElementById('trackInfoModal-metadataTable-composer').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal-metadataTable-composer').removeAttribute('data-bs-title');
   } else {
     document.getElementById('trackInfoModal-metadataTable-composer').parentNode.classList.remove('d-none');
     document.getElementById('trackInfoModal-metadataTable-composer').innerHTML = trackParsedObject.composer.map((obj) => obj.name).join(', ');
-    if (trackParsedObject.composer.some((obj) => obj.nameLatin === null)) {
-      document.getElementById('trackInfoModal-metadataTable-composerLatin').parentNode.classList.add('d-none');
+    if (trackParsedObject.composer.some((obj) => obj.nameLatin !== null)) {
+      document.getElementById('trackInfoModal-metadataTable-composer').setAttribute('data-bs-toggle', 'tooltip');
+      document.getElementById('trackInfoModal-metadataTable-composer').setAttribute('data-bs-title', trackParsedObject.composer.map((obj) => {if (obj.nameLatin !== null) {return obj.nameLatin} else {return obj.name}}).join(', '));
     } else {
-      document.getElementById('trackInfoModal-metadataTable-composerLatin').parentNode.classList.remove('d-none');
-      document.getElementById('trackInfoModal-metadataTable-composerLatin').innerHTML = trackParsedObject.composer.map((obj) => obj.nameLatin).join(', ');
+      document.getElementById('trackInfoModal-metadataTable-composer').removeAttribute('data-bs-toggle');
+      document.getElementById('trackInfoModal-metadataTable-composer').removeAttribute('data-bs-title');
     }
   }
   if (trackParsedObject.arranger === null) {
     document.getElementById('trackInfoModal-metadataTable-arranger').parentNode.classList.add('d-none');
-    document.getElementById('trackInfoModal-metadataTable-arrangerLatin').parentNode.classList.add('d-none');
+    document.getElementById('trackInfoModal-metadataTable-arranger').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal-metadataTable-arranger').removeAttribute('data-bs-title');
   } else {
     document.getElementById('trackInfoModal-metadataTable-arranger').parentNode.classList.remove('d-none');
     document.getElementById('trackInfoModal-metadataTable-arranger').innerHTML = trackParsedObject.arranger.map((obj) => obj.name).join(', ');
-    if (trackParsedObject.arranger.some((obj) => obj.nameLatin === null)) {
-      document.getElementById('trackInfoModal-metadataTable-arrangerLatin').parentNode.classList.add('d-none');
+    if (trackParsedObject.arranger.some((obj) => obj.nameLatin !== null)) {
+      document.getElementById('trackInfoModal-metadataTable-arranger').setAttribute('data-bs-toggle', 'tooltip');
+      document.getElementById('trackInfoModal-metadataTable-arranger').setAttribute('data-bs-title', trackParsedObject.arranger.map((obj) => {if (obj.nameLatin !== null) {return obj.nameLatin} else {return obj.name}}).join(', '));
     } else {
-      document.getElementById('trackInfoModal-metadataTable-arrangerLatin').parentNode.classList.remove('d-none');
-      document.getElementById('trackInfoModal-metadataTable-arrangerLatin').innerHTML = trackParsedObject.arranger.map((obj) => obj.nameLatin).join(', ');
+      document.getElementById('trackInfoModal-metadataTable-arranger').removeAttribute('data-bs-toggle');
+      document.getElementById('trackInfoModal-metadataTable-arranger').removeAttribute('data-bs-title');
     }
   }
   document.getElementById('trackInfoModal-metadataTable-trackDurationReadable').innerHTML = msecToReadableTime(trackParsedObject.durationMsecs);
@@ -187,17 +185,19 @@ function loadTrackInfoModal (trackUuid) {
   document.getElementById('trackInfoModal-metadataTable-trackDurationSamples').innerHTML = `${trackParsedObject.durationSamples} samples`;
   document.getElementById('trackInfoModal-metadataTable-albumTitle').innerHTML = albumParsedObject.title;
   if (albumParsedObject.titleLatin === null) {
-    document.getElementById('trackInfoModal-metadataTable-albumTitleLatin').parentNode.classList.add('d-none');
+    document.getElementById('trackInfoModal-metadataTable-albumTitle').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal-metadataTable-albumTitle').removeAttribute('data-bs-title');
   } else {
-    document.getElementById('trackInfoModal-metadataTable-albumTitleLatin').parentNode.classList.remove('d-none');
-    document.getElementById('trackInfoModal-metadataTable-albumTitleLatin').innerHTML = albumParsedObject.titleLatin;
+    document.getElementById('trackInfoModal-metadataTable-albumTitle').setAttribute('data-bs-toggle', 'tooltip');
+    document.getElementById('trackInfoModal-metadataTable-albumTitle').setAttribute('data-bs-title', albumParsedObject.titleLatin);
   }
   document.getElementById('trackInfoModal-metadataTable-albumArtist').innerHTML = albumParsedObject.artist.map((obj) => obj.name).join(', ');
-  if (albumParsedObject.artist.some((obj) => obj.nameLatin === null)) {
-    document.getElementById('trackInfoModal-metadataTable-albumArtistLatin').parentNode.classList.add('d-none');
+  if (albumParsedObject.artist.some((obj) => obj.nameLatin !== null)) {
+    document.getElementById('trackInfoModal-metadataTable-albumArtist').setAttribute('data-bs-toggle', 'tooltip');
+    document.getElementById('trackInfoModal-metadataTable-albumArtist').setAttribute('data-bs-title', albumParsedObject.artist.map((obj) => {if (obj.nameLatin !== null) {return obj.nameLatin} else {return obj.name}}).join(', '));
   } else {
-    document.getElementById('trackInfoModal-metadataTable-albumArtistLatin').parentNode.classList.remove('d-none');
-    document.getElementById('trackInfoModal-metadataTable-albumArtistLatin').innerHTML = albumParsedObject.artist.map((obj) => obj.nameLatin).join(', ');
+    document.getElementById('trackInfoModal-metadataTable-albumArtist').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal-metadataTable-albumArtist').removeAttribute('data-bs-title');
   }
   document.getElementById('trackInfoModal-metadataTable-albumReleaseDate').innerHTML = moment(albumParsedObject.releaseDate).format('YYYY/MM/DD');
   document.getElementById('trackInfoModal-metadataTable-albumBarcode').innerHTML = albumParsedObject.barCode;
@@ -309,8 +309,9 @@ function loadTrackInfoModal (trackUuid) {
     temp_dlTrEl.appendChild(temp_dlTdBtnEl);
     document.getElementById('trackInfoModal-downloadTable').appendChild(temp_dlTrEl);
   });
+  document.getElementById('trackInfoModal-previewAudio').src = `${apiDataConfig.response.config.decrypted.rawMediaUrlBase64}/media/${albumParsedObject.uuid}/${temp_codecListImported.slice(-1)[0].path}/${trackParsedObject.uuid}.${temp_codecListImported.slice(-1)[0].extension}`;
   const bootstrapTooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-  const bootstrapTooltipList = [...bootstrapTooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+  bootstrapTooltipList = [...bootstrapTooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
   document.getElementById('trackInfoModal-DebugAcdOutputEl').innerHTML = JSON.stringify(albumParsedObject, '', '  ');
   const trackInfoModal = new bootstrap.Modal(document.getElementById('trackInfoModal'));
   trackInfoModal.show();