Test build

index.html

@@ -8,6 +8,7 @@
     <!-- JavaScript load -->
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <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>
     <!-- CSS load -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
@@ -72,8 +73,7 @@
         </div>
       </div>
       <hr class="my-4">
-      <h3 class="user-select-none">Track listing test</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>
+      <h3 class="user-select-none">Track List</h3>
       <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">
@@ -89,8 +89,128 @@
           <div class="flex-fill w-100">Track</div>
         </button>
       </div>
+      <div class="modal fade user-select-none" id="trackInfoModal" tabindex="-1">
+        <div class="modal-dialog modal-lg modal-fullscreen-md-down modal-dialog-scrollable">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h1 class="modal-title fs-5" id="trackInfoModalLabel"><i class="bi bi-file-earmark-music me-2"></i>Track Info</h1>
+              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+              <h3>Download</h3>
+              <table class="table table-sm table-responsive table-hover table-borderless align-middle">
+                <tbody id="trackInfoModal-downloadTable">
+                </tbody>
+              </table>
+              <h3>Metadata</h3>
+              <h4>General</h4>
+              <table class="table table-sm table-responsive table-hover table-borderless align-middle">
+                <tbody>
+                  <tr>
+                    <td>Track Title</td>
+                    <td id="trackInfoModal-metadataTable-trackTitle">---</td>
+                  </tr>
+                  <tr>
+                    <td>Artists</td>
+                    <td id="trackInfoModal-metadataTable-artists">---</td>
+                  </tr>
+                  <tr>
+                    <td>Lyricist</td>
+                    <td id="trackInfoModal-metadataTable-lyricist">---</td>
+                  </tr>
+                  <tr>
+                    <td>Composer</td>
+                    <td id="trackInfoModal-metadataTable-composer">---</td>
+                  </tr>
+                  <tr>
+                    <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>
+                  </tr>
+                  <tr>
+                    <td>Track Duration (MS)</td>
+                    <td id="trackInfoModal-metadataTable-trackDurationMsec">---</td>
+                  </tr>
+                  <tr>
+                    <td>Track Duration (Samples)</td>
+                    <td id="trackInfoModal-metadataTable-trackDurationSamples">---</td>
+                  </tr>
+                </tbody>
+              </table>
+              <table class="table table-sm table-responsive table-hover table-borderless align-middle">
+                <tbody>
+                  <tr>
+                    <td>Album Title</td>
+                    <td id="trackInfoModal-metadataTable-albumTitle">---</td>
+                  </tr>
+                  <tr>
+                    <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>
+                  </tr>
+                  <tr>
+                    <td>Album Barcode</td>
+                    <td id="trackInfoModal-metadataTable-albumBarcode">Sample Number</td>
+                  </tr>
+                  <tr>
+                    <td>Album Copyright</td>
+                    <td id="trackInfoModal-metadataTable-albumCopyright">---</td>
+                  </tr>
+                </tbody>
+              </table>
+              <h4>External Links</h4>
+              <table id="trackInfoModal-externalLinkTableRoot" class="table table-sm table-responsive table-hover table-borderless align-middle">
+                <tbody id="trackInfoModal-externalLinkTable">
+                </tbody>
+              </table>
+              <h4>Cover Artwork Images</h4>
+              <div id="trackInfoModal-coverArtLinkDiv">
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+          </div>
+        </div>
+      </div>
       <hr class="my-4">
-      <h3 class="user-select-none">Fetch data output testing</h3>
+      <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">
@@ -118,8 +238,8 @@
       <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><small class="text-body-tertiary user-select-none">This page using: Bootstrap, Axios, CryptoJS, A-ADS, Inter, Fira Code, Noto Sans JP</small></p>
-        <p><small class="text-body-tertiary user-select-none">(C) 2024 daydreamer-json, and other contributer. All rights reserved.</small></p>
+        <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>
+        <p class="my-1"><small class="text-body-tertiary user-select-none">(C) 2024 daydreamer-json, and other contributer. All rights reserved.</small></p>
       </footer>
     </div>
     <script src="script.js"></script>

script.js

@@ -42,11 +42,13 @@ window.addEventListener('load', async function(){
   await loadRequiredDatabase();
   await decryptConfig();
   pushToTrackListGroupUi();
+  loadTrackInfoModal('018d2827-8ae1-7a2d-823e-2557a01e70ca');
 });
 
 document.querySelector('#loadDatabaseTestButton').addEventListener('click', async function() {
   console.log('loadDatabaseTestButton clicked!');
   await loadRequiredDatabase();
+  await decryptConfig();
 });
 
 document.querySelector('#trackListingTestButton').addEventListener('click', () => {
@@ -87,6 +89,7 @@ function pushToTrackListGroupUi () {
       let divTrackNodeEl = document.createElement('div');
       buttonNodeEl.classList.add('list-group-item', 'list-group-item-action', 'd-flex');
       buttonNodeEl.setAttribute('type', 'button');
+      buttonNodeEl.setAttribute('data-track-uuid', trackObject.uuid);
       divArtistNodeEl.classList.add('flex-fill', 'w-100');
       divAlbumNodeEl.classList.add('flex-fill', 'w-100');
       divTrackNodeEl.classList.add('flex-fill', 'w-100');
@@ -100,11 +103,205 @@ function pushToTrackListGroupUi () {
       buttonNodeEl.appendChild(divArtistNodeEl);
       buttonNodeEl.appendChild(divAlbumNodeEl);
       buttonNodeEl.appendChild(divTrackNodeEl);
+      buttonNodeEl.addEventListener('click', () => {
+        loadTrackInfoModal(trackObject.uuid);
+      });
       trackAllListGroup.appendChild(buttonNodeEl);
     });
   });
 }
 
+// ========== trackInfoModalの処理 ==========
+
+function loadTrackInfoModal (trackUuid) {
+  const albumParsedObject = getParsedAlbumObjectFromAlbumUuid(getAlbumUuidFromTrackUuid(trackUuid));
+  const trackParsedObject = albumParsedObject.tracks.find((obj) => obj.uuid === trackUuid);
+  document.getElementById('trackInfoModal-metadataTable-trackTitle').innerHTML = trackParsedObject.title;
+  if (trackParsedObject.titleLatin === null) {
+    document.getElementById('trackInfoModal-metadataTable-trackTitleLatin').parentNode.classList.add('d-none');
+  } else {
+    document.getElementById('trackInfoModal-metadataTable-trackTitleLatin').parentNode.classList.remove('d-none');
+    document.getElementById('trackInfoModal-metadataTable-trackTitleLatin').innerHTML = 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');
+  } else {
+    document.getElementById('trackInfoModal-metadataTable-artistsLatin').parentNode.classList.remove('d-none');
+    document.getElementById('trackInfoModal-metadataTable-artistsLatin').innerHTML = trackParsedObject.artist.map((obj) => obj.nameLatin).join(', ');
+  }
+  if (trackParsedObject.lyricist === null) {
+    document.getElementById('trackInfoModal-metadataTable-lyricist').parentNode.classList.add('d-none');
+    document.getElementById('trackInfoModal-metadataTable-lyricistLatin').parentNode.classList.add('d-none');
+  } 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');
+    } else {
+      document.getElementById('trackInfoModal-metadataTable-lyricistLatin').parentNode.classList.remove('d-none');
+      document.getElementById('trackInfoModal-metadataTable-lyricistLatin').innerHTML = trackParsedObject.lyricist.map((obj) => obj.nameLatin).join(', ');
+    }
+  }
+  if (trackParsedObject.composer === null) {
+    document.getElementById('trackInfoModal-metadataTable-composer').parentNode.classList.add('d-none');
+    document.getElementById('trackInfoModal-metadataTable-composerLatin').parentNode.classList.add('d-none');
+  } 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');
+    } else {
+      document.getElementById('trackInfoModal-metadataTable-composerLatin').parentNode.classList.remove('d-none');
+      document.getElementById('trackInfoModal-metadataTable-composerLatin').innerHTML = trackParsedObject.composer.map((obj) => obj.nameLatin).join(', ');
+    }
+  }
+  if (trackParsedObject.arranger === null) {
+    document.getElementById('trackInfoModal-metadataTable-arranger').parentNode.classList.add('d-none');
+    document.getElementById('trackInfoModal-metadataTable-arrangerLatin').parentNode.classList.add('d-none');
+  } 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');
+    } 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-trackDurationReadable').innerHTML = msecToReadableTime(trackParsedObject.durationMsecs);
+  document.getElementById('trackInfoModal-metadataTable-trackDurationMsec').innerHTML = `${trackParsedObject.durationMsecs} ms`;
+  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');
+  } else {
+    document.getElementById('trackInfoModal-metadataTable-albumTitleLatin').parentNode.classList.remove('d-none');
+    document.getElementById('trackInfoModal-metadataTable-albumTitleLatin').innerHTML = 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');
+  } 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-albumReleaseDate').innerHTML = moment(albumParsedObject.releaseDate).format('YYYY/MM/DD');
+  document.getElementById('trackInfoModal-metadataTable-albumBarcode').innerHTML = albumParsedObject.barCode;
+  document.getElementById('trackInfoModal-metadataTable-albumCopyright').innerHTML = albumParsedObject.copyright;
+  while(document.getElementById('trackInfoModal-externalLinkTable').firstChild) {
+    document.getElementById('trackInfoModal-externalLinkTable').removeChild(document.getElementById('trackInfoModal-externalLinkTable').firstChild);
+  }
+  while(document.getElementById('trackInfoModal-coverArtLinkDiv').firstChild) {
+    document.getElementById('trackInfoModal-coverArtLinkDiv').removeChild(document.getElementById('trackInfoModal-coverArtLinkDiv').firstChild);
+  }
+  while(document.getElementById('trackInfoModal-downloadTable').firstChild) {
+    document.getElementById('trackInfoModal-downloadTable').removeChild(document.getElementById('trackInfoModal-downloadTable').firstChild);
+  }
+  if (albumParsedObject.link.itunes !== null || albumParsedObject.link.spotify !== null) {
+    let temp_extLinkAlbumTrEl = document.createElement('tr');
+    let temp_extLinkAlbumTdKeyEl = document.createElement('td');
+    let temp_extLinkAlbumTdValueEl = document.createElement('td');
+    let temp_extLinkAlbumA1El = document.createElement('a');
+    let temp_extLinkAlbumA2El = document.createElement('a');
+    temp_extLinkAlbumTdKeyEl.innerHTML = 'Album Link';
+    if (albumParsedObject.link.itunes !== null) {
+      temp_extLinkAlbumA1El.classList.add('btn','btn-outline-primary','btn-sm','me-1');
+      temp_extLinkAlbumA1El.setAttribute('href', `https://music.apple.com/album/${albumParsedObject.link.itunes}`);
+      temp_extLinkAlbumA1El.setAttribute('role', 'button');
+      temp_extLinkAlbumA1El.setAttribute('target', '_blank');
+      temp_extLinkAlbumA1El.setAttribute('rel', 'noopener noreferrer');
+      temp_extLinkAlbumA1El.innerHTML = 'Apple Music';
+      temp_extLinkAlbumTdValueEl.appendChild(temp_extLinkAlbumA1El);
+    }
+    if (albumParsedObject.link.spotify !== null) {
+      temp_extLinkAlbumA2El.classList.add('btn','btn-outline-primary','btn-sm','me-1');
+      temp_extLinkAlbumA2El.setAttribute('href', `https://open.spotify.com/album/${albumParsedObject.link.spotify}`);
+      temp_extLinkAlbumA2El.setAttribute('role', 'button');
+      temp_extLinkAlbumA2El.setAttribute('target', '_blank');
+      temp_extLinkAlbumA2El.setAttribute('rel', 'noopener noreferrer');
+      temp_extLinkAlbumA2El.innerHTML = 'Spotify';
+      temp_extLinkAlbumTdValueEl.appendChild(temp_extLinkAlbumA2El);
+    }
+    temp_extLinkAlbumTrEl.appendChild(temp_extLinkAlbumTdKeyEl);
+    temp_extLinkAlbumTrEl.appendChild(temp_extLinkAlbumTdValueEl);
+    document.getElementById('trackInfoModal-externalLinkTable').appendChild(temp_extLinkAlbumTrEl);
+  }
+  albumParsedObject.coverArts.forEach((obj1) => {
+    obj1.format.forEach((obj2) => {
+      let temp_coverArtAEl = document.createElement('a');
+      temp_coverArtAEl.classList.add('btn','btn-primary','btn-sm','me-1','mb-1');
+      temp_coverArtAEl.setAttribute('href', `${apiDataConfig.response.config.decrypted.rawMediaUrlBase64}/media/${albumParsedObject.uuid}/${obj1.fileName}.${obj2.extension}`);
+      temp_coverArtAEl.setAttribute('role', 'button');
+      temp_coverArtAEl.setAttribute('target', '_blank');
+      temp_coverArtAEl.setAttribute('rel', 'noopener noreferrer');
+      temp_coverArtAEl.innerHTML = `${obj2.name} ${obj1.height}px`;
+      document.getElementById('trackInfoModal-coverArtLinkDiv').appendChild(temp_coverArtAEl);
+    });
+  });
+  let temp_codecListImported = new Array();
+  if (albumParsedObject.isAllTrackSameCodecs === false) {temp_codecListImported = trackParsedObject.codecs} else {temp_codecListImported = albumParsedObject.codecs}
+  temp_codecListImported.forEach((obj) => {
+    let temp_dlTrEl = document.createElement('tr');
+    let temp_dlTdCodecEl = document.createElement('td');
+    let temp_dlTdInfoEl = document.createElement('td');
+    let temp_dlTdBtnEl = document.createElement('td');
+    let temp_dlButtonGroupEl = document.createElement('div');
+    let temp_dlButtonEl = document.createElement('button');
+    let temp_dlButtonExtEl = document.createElement('a');
+    let temp_dlButtonIconEl = document.createElement('i');
+    let temp_dlButtonExtIconEl = document.createElement('i');
+    let temp_codecBitrateTemporal = null;
+    temp_dlTdCodecEl.innerHTML = obj.nameBasic;
+    temp_dlTdCodecEl.setAttribute('data-bs-toggle', 'tooltip');
+    temp_dlTdCodecEl.setAttribute('data-bs-title', obj.nameLong);
+    if ((obj.bitRateAvg !== null && obj.bitRateMax !== null) || (obj.bitRateAvg !== null && obj.bitRateMax === null)) {
+      temp_codecBitrateTemporal = obj.bitRateAvg;
+    } else {
+      temp_codecBitrateTemporal = obj.bitRateMax;
+    }
+    if (obj.bitDepth === null) {
+      temp_dlTdInfoEl.innerHTML = `${obj.sampleRate / 1000}kHz ${obj.channelCount}ch ${temp_codecBitrateTemporal / 1000}kbps`;
+    } else {
+      temp_dlTdInfoEl.innerHTML = `${obj.bitDepth}bit ${obj.sampleRate / 1000}kHz ${obj.channelCount}ch ${temp_codecBitrateTemporal / 1000}kbps`;
+    }
+    if (obj.isOriginal === true) {
+      temp_dlButtonEl.classList.add('btn', 'btn-primary');
+      temp_dlButtonExtEl.classList.add('btn', 'btn-primary', 'text-center');
+    } else {
+      temp_dlButtonEl.classList.add('btn', 'btn-secondary');
+      temp_dlButtonExtEl.classList.add('btn', 'btn-secondary', 'text-center');
+    }
+    temp_dlButtonEl.setAttribute('type', 'button');
+    temp_dlButtonEl.addEventListener('click', async () => {
+      await downloadAudioDataToBlob (trackParsedObject.uuid, obj.uuid)
+    })
+    temp_dlButtonExtEl.setAttribute('href', `${apiDataConfig.response.config.decrypted.rawMediaUrlBase64}/media/${albumParsedObject.uuid}/${obj.path}/${trackParsedObject.uuid}.${obj.extension}`);
+    temp_dlButtonExtEl.setAttribute('role', 'button');
+    temp_dlButtonExtEl.setAttribute('target', '_blank');
+    temp_dlButtonExtEl.setAttribute('rel', 'noopener noreferrer');
+    temp_dlButtonGroupEl.setAttribute('role', 'group');
+    temp_dlButtonGroupEl.classList.add('btn-group');
+    temp_dlButtonIconEl.classList.add('bi', 'bi-download');
+    temp_dlButtonExtIconEl.classList.add('bi', 'bi-box-arrow-up-right');
+    temp_dlTdBtnEl.classList.add('text-end');
+    temp_dlButtonEl.appendChild(temp_dlButtonIconEl);
+    temp_dlButtonExtEl.appendChild(temp_dlButtonExtIconEl);
+    temp_dlButtonGroupEl.appendChild(temp_dlButtonEl);
+    temp_dlButtonGroupEl.appendChild(temp_dlButtonExtEl);
+    temp_dlTdBtnEl.appendChild(temp_dlButtonGroupEl);
+    temp_dlTrEl.appendChild(temp_dlTdCodecEl);
+    temp_dlTrEl.appendChild(temp_dlTdInfoEl);
+    temp_dlTrEl.appendChild(temp_dlTdBtnEl);
+    document.getElementById('trackInfoModal-downloadTable').appendChild(temp_dlTrEl);
+  });
+  const bootstrapTooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+  const bootstrapTooltipList = [...bootstrapTooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+  console.log(trackParsedObject);
+  const trackInfoModal = new bootstrap.Modal(document.getElementById('trackInfoModal'));
+  trackInfoModal.show();
+}
+
 // ========== 設定画面のイベントリスナー登録など ==========
 
 document.querySelector('#settingsApplyButton').addEventListener('click', () => {appSettingsApply()});
@@ -175,8 +372,6 @@ async function loadRequiredDatabase () {
     'headers': apiConnectDefaultHeader,
     'timeout': internalConfig.network.timeout
   });
-  console.log(apiDataMasterDB);
-  console.log(apiDataConfig);
   if (apiDataMasterDB) {
     document.querySelector('#databaseTestInfoCodeEl').innerHTML = `OK (Time: ${Math.ceil(apiDataMasterDB.apiConnectionTime)} ms)`;
     document.querySelector('#databaseTestOutputCodeEl').innerHTML = JSON.stringify(apiDataMasterDB.response, '', '  ');
@@ -188,6 +383,157 @@ async function loadRequiredDatabase () {
   });
 }
 
+// ========== データベース内部検索などの処理 ==========
+
+function getAlbumUuidFromTrackUuid (trackUuid) {
+  let albumUuid = null;
+  apiDataMasterDB.response.data.albums.forEach((albumObject) => {
+    if (albumObject.tracks.some((trackObject) => trackObject.uuid === trackUuid)) {
+      albumUuid = albumObject.uuid;
+    }
+  });
+  return albumUuid;
+}
+
+function getDbObjectFromUuid (uuid, type) {
+  switch (type) {
+    case 'album':
+      if (apiDataMasterDB.response.data.albums.some((albumObject) => albumObject.uuid === uuid)) {
+        return apiDataMasterDB.response.data.albums.filter((albumObject) => albumObject.uuid === uuid)[0];
+      } else {
+        return null;
+      }
+    case 'track':
+      apiDataMasterDB.response.data.albums.forEach((albumObject) => {
+        if (albumObject.tracks.some((trackObject) => trackObject.uuid === uuid)) {
+          return albumObject.tracks.filter((trackObject) => trackObject.uuid === uuid)[0];
+        }
+      });
+      return null;
+    case 'artist':
+      if (apiDataMasterDB.response.data.artists.some((artistObject) => artistObject.uuid === uuid)) {
+        return apiDataMasterDB.response.data.artists.filter((artistObject) => artistObject.uuid === uuid)[0];
+      } else {
+        return null;
+      }
+    case 'codec':
+      if (apiDataMasterDB.response.data.codecs.some((codecObject) => codecObject.uuid === uuid)) {
+        return apiDataMasterDB.response.data.codecs.filter((codecObject) => codecObject.uuid === uuid)[0];
+      } else {
+        return null;
+      }
+    default:
+      throw new Error ('unexpected type');
+  }
+}
+
+function getParsedAlbumObjectFromAlbumUuid (uuid) {
+  const rawAlbumObject = getDbObjectFromUuid(uuid, 'album');
+  let outputObject = JSON.parse(JSON.stringify(rawAlbumObject));
+  outputObject.artist = new Array();
+  rawAlbumObject.artist.forEach((artistUuidStr) => {
+    outputObject.artist.push(getDbObjectFromUuid(artistUuidStr, 'artist'));
+  });
+  if (rawAlbumObject.isAllTrackSameCodecs === true) {
+    outputObject.codecs = new Array();
+    rawAlbumObject.codecs.forEach((codecObj) => {
+      let temp_searchedCodecObj = new Object();
+      temp_searchedCodecObj = getDbObjectFromUuid(codecObj.uuid, 'codec');
+      temp_searchedCodecObj.isOriginal = codecObj.isOriginal;
+      temp_searchedCodecObj.path = codecObj.path;
+      outputObject.codecs.push(temp_searchedCodecObj);
+    });
+  }
+  if (rawAlbumObject.isCoverArtsUseDefault === true) {
+    outputObject.coverArts = apiDataMasterDB.response.data.coverArtDefaults;
+  }
+  outputObject.tracks = new Array();
+  rawAlbumObject.tracks.forEach((rawTrackObj) => {
+    let temp_outputTrackObj = new Object();
+    temp_outputTrackObj = JSON.parse(JSON.stringify(rawTrackObj));
+    temp_outputTrackObj.artist = new Array();
+    rawTrackObj.artist.forEach((artistUuidStr) => {
+      temp_outputTrackObj.artist.push(getDbObjectFromUuid(artistUuidStr, 'artist'));
+    });
+    if (rawTrackObj.lyricist !== null) {
+      temp_outputTrackObj.lyricist = new Array();
+      rawTrackObj.lyricist.forEach((artistUuidStr) => {
+        temp_outputTrackObj.lyricist.push(getDbObjectFromUuid(artistUuidStr, 'artist'));
+      });
+    }
+    if (rawTrackObj.composer !== null) {
+      temp_outputTrackObj.composer = new Array();
+      rawTrackObj.composer.forEach((artistUuidStr) => {
+        temp_outputTrackObj.composer.push(getDbObjectFromUuid(artistUuidStr, 'artist'));
+      });
+    }
+    if (rawTrackObj.arranger !== null) {
+      temp_outputTrackObj.arranger = new Array();
+      rawTrackObj.arranger.forEach((artistUuidStr) => {
+        temp_outputTrackObj.arranger.push(getDbObjectFromUuid(artistUuidStr, 'artist'));
+      });
+    }
+    if (rawAlbumObject.isAllTrackSameCodecs === false || rawTrackObj.codecs !== null) {
+      temp_outputTrackObj.codecs = new Array();
+      rawTrackObj.codecs.forEach((codecObj) => {
+        let temp_searchedCodecObj2 = new Object();
+        temp_searchedCodecObj2 = getDbObjectFromUuid(codecObj.uuid, 'codec');
+        temp_searchedCodecObj2.isOriginal = codecObj.isOriginal;
+        temp_searchedCodecObj2.path = codecObj.path;
+        temp_outputTrackObj.codecs.push(temp_searchedCodecObj2);
+      });
+      temp_outputTrackObj.durationMsecs = (rawTrackObj.durationSamples / temp_outputTrackObj.codecs.filter((t) => t.isOriginal === true)[0].sampleRate) * 1000;
+    } else {
+      temp_outputTrackObj.durationMsecs = (rawTrackObj.durationSamples / outputObject.codecs.filter((t) => t.isOriginal === true)[0].sampleRate) * 1000;
+    }
+    outputObject.tracks.push(temp_outputTrackObj);
+  });
+  let temp_albumTotalDurationSamples = 0;
+  let temp_albumTotalDurationMsecs = 0;
+  for (let i = 0; i < rawAlbumObject.tracks.length; i++) {
+    temp_albumTotalDurationSamples += outputObject.tracks[i].durationSamples;
+    temp_albumTotalDurationMsecs += outputObject.tracks[i].durationMsecs;
+  }
+  outputObject.durationSamples = temp_albumTotalDurationSamples;
+  outputObject.durationMsecs = temp_albumTotalDurationMsecs;
+  return outputObject;
+}
+
+// ========== ファイルをDLしてBlob化、ブラウザに開かせる ==========
+
+async function downloadAudioDataToBlob (trackUuid, codecUuid) {
+  const albumParsedObject = getParsedAlbumObjectFromAlbumUuid(getAlbumUuidFromTrackUuid(trackUuid));
+  const trackParsedObject = albumParsedObject.tracks.find((obj) => obj.uuid === trackUuid);
+  let codecParsedObject = null;
+  if (albumParsedObject.isAllTrackSameCodecs === false) {
+    codecParsedObject = trackParsedObject.codecs.find((obj) => obj.uuid === codecUuid);
+  } else {
+    codecParsedObject = albumParsedObject.codecs.find((obj) => obj.uuid === codecUuid);
+  }
+  const axiosRes = await apiConnect ({
+    'method': 'get',
+    'url': `${apiDataConfig.response.config.decrypted.rawMediaUrlBase64}/media/${albumParsedObject.uuid}/${codecParsedObject.path}/${trackParsedObject.uuid}.${codecParsedObject.extension}`,
+    'headers': apiConnectDefaultHeader,
+    'timeout': internalConfig.network.timeout,
+    'responseType': 'blob'
+  });
+  console.log(`File downloaded to Blob\nDownload time: ${axiosRes.apiConnectionTime} ms`);
+  const blobUrl = window.URL.createObjectURL(response.data);
+  const link = document.createElement('a');
+  let saveFileName = null;
+  if (trackParsedObject.titleFileName !== null) {
+    saveFileName = `${trackParsedObject.disc}_${('00' + trackParsedObject.index).slice(-2)}_${trackParsedObject.titleFileName}.${codecParsedObject.extension}`;
+  } else {
+    saveFileName = `${trackParsedObject.disc}_${('00' + trackParsedObject.index).slice(-2)}_${trackParsedObject.title}.${codecParsedObject.extension}`;
+  }
+  link.href = blobUrl;
+  link.setAttribute('download', saveFileName);
+  link.classList.add('d-none');
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
 // ========== MasterDB/Configの暗号化を解く ==========
 
 async function decryptConfig () {
@@ -213,8 +559,7 @@ function loadAppSettingsFromLocalStorage () {
   if (localStorage.hasOwnProperty(appSettingsStorageName)) {
     appSettingsSaveData = JSON.parse(CryptoJS.enc.Base64.parse(localStorage.getItem(appSettingsStorageName)).toString(CryptoJS.enc.Utf8));
     console.warn(`LocalStorage key detected`);
-    console.log(`Loaded appSettings:`);
-    console.log(appSettingsSaveData);
+    console.log(`Loaded appSettings:\n${JSON.stringify(appSettingsSaveData)}`);
   } else {
     appSettingsSaveData = appSettingsSaveDataDefault;
     console.warn(`LocalStorage key not found\nUsing default settings`);
@@ -233,6 +578,15 @@ function checkAppSettingsExistsOnStorage () {
 function writeAppSettingsToLocalStorage () {
   // CryptoJS.enc.Utf8.parseを使うことでCryptoJS内部形式を強制
   localStorage.setItem(appSettingsStorageName, CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(JSON.stringify(appSettingsSaveData))));
-  console.log(`Wrote appSettings:`);
-  console.log(appSettingsSaveData);
+  console.log(`Wrote appSettings:\n${JSON.stringify(appSettingsSaveData)}`);
+}
+
+// ========== その他使い回す汎用関数など ==========
+
+function msecToReadableTime (msec) {
+  let msecCeiled = Math.ceil(msec);
+  let sec = msec / 1000;
+  let min = ('00' + Math.floor(sec / 60)).slice(-2);
+  let secPart = ('00' + Math.floor(sec % 60)).slice(-2);
+  return `${min}:${secPart}.${('000' + msecCeiled % 1000).slice(-3)}`;
 }

style.css

@@ -1,4 +1,4 @@
-body {
+body, .tooltip {
   font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif
 }
 pre, code {