Update

db/master.json

@@ -3,7 +3,7 @@
     "versionMajor": 0,
     "versionMinor": 0,
     "versionPatch": 1,
-    "updateDateUnixMs": 1706629503155
+    "updateDateUnixMs": 1706629503156
   },
   "data": {
     "artists": [
@@ -207,19 +207,19 @@
         "width": 3000,
         "height": 3000,
         "fileName": "cover_3000px",
-        "format": [{"name":"WebP","extension":"webp"},{"name":"JPEG","extension":"jpg"}]
+        "format": [{"name":"WebP","extension":"webp","mime":"image/webp"},{"name":"JPEG","extension":"jpg","mime":"image/jpeg"}]
       },
       {
         "width": 1024,
         "height": 1024,
         "fileName": "cover_1024px",
-        "format": [{"name":"WebP","extension":"webp"},{"name":"JPEG","extension":"jpg"},{"name":"PNG","extension":"png"}]
+        "format": [{"name":"WebP","extension":"webp","mime":"image/webp"},{"name":"JPEG","extension":"jpg","mime":"image/jpeg"},{"name":"PNG","extension":"png","mime":"image/png"}]
       },
       {
         "width": 512,
         "height": 512,
         "fileName": "cover_512px",
-        "format": [{"name":"WebP","extension":"webp"},{"name":"JPEG","extension":"jpg"},{"name":"PNG","extension":"png"}]
+        "format": [{"name":"WebP","extension":"webp","mime":"image/webp"},{"name":"JPEG","extension":"jpg","mime":"image/jpeg"},{"name":"PNG","extension":"png","mime":"image/png"}]
       }
     ],
     "albums": [
@@ -257,6 +257,7 @@
         ],
         "isCoverArtsUseDefault": true,
         "coverArts": null,
+        "coverArtPotatoWebp16pxBase64": "UklGRowAAABXRUJQVlA4IIAAAABQAgCdASoQABAAAsBMJYwAD5MvSBcueurPeYAA/vdB1/AOtMGFAR0sdsKjS7GlyVx426V9Xhs0vXhikzrPL9vaY3slLZSx/vyoSYMNteGkZWn0tn/nc456PA7wdkjRAyYS04Zl+Zxuxr/8F0kUQ/kspmZVIQiAHEmy+z7gcgAAAA==",
         "tracks": [
           {
             "uuid": "018d2827-8ae1-7a2d-823e-2557a01e70ca",
@@ -467,21 +468,22 @@
             "width": 2598,
             "height": 2598,
             "fileName": "cover_2598px",
-            "format": [{"name":"WebP","extension":"webp"},{"name":"JPEG","extension":"jpg"}]
+            "format": [{"name":"WebP","extension":"webp","mime":"image/webp"},{"name":"JPEG","extension":"jpg","mime":"image/jpeg"}]
           },
           {
             "width": 1024,
             "height": 1024,
             "fileName": "cover_1024px",
-            "format": [{"name":"WebP","extension":"webp"},{"name":"JPEG","extension":"jpg"},{"name":"PNG","extension":"png"}]
+            "format": [{"name":"WebP","extension":"webp","mime":"image/webp"},{"name":"JPEG","extension":"jpg","mime":"image/jpeg"},{"name":"PNG","extension":"png","mime":"image/png"}]
           },
           {
             "width": 512,
             "height": 512,
             "fileName": "cover_512px",
-            "format": [{"name":"WebP","extension":"webp"},{"name":"JPEG","extension":"jpg"},{"name":"PNG","extension":"png"}]
+            "format": [{"name":"WebP","extension":"webp","mime":"image/webp"},{"name":"JPEG","extension":"jpg","mime":"image/jpeg"},{"name":"PNG","extension":"png","mime":"image/png"}]
           }
         ],
+        "coverArtPotatoWebp16pxBase64": "UklGRnAAAABXRUJQVlA4IGQAAAAQAgCdASoQABAAAsBMJZgC7AD8C9+6gN4AAP5mCY0LAgpQjA8Um1U9cx8pReol1/HXjEkHhLTLMwUc4BRGwQQbf0Afs0ghTkqkaU/hQtFDrkr1AV2fRU4KdUZ+HfaFVvgk4AAA",
         "tracks": [
           {
             "uuid": "018d5a93-6d52-7deb-9fff-9a9ae28fe127",

index.html

@@ -11,21 +11,31 @@
     <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/vidstack@1.0.0/cdn/with-layouts/vidstack.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js"></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/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/fontawesome.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack@1.0.0/player/styles/default/theme.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack@1.0.0/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="preconnect" href="https://cdn.jsdelivr.net">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap">
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <div id="mainContainer" class="container my-4">
+    <div id="fsOverlayLoadingScr" class="">
+      <div id="fsOverlayLoadingScr_loadingSpinner">
+        <svg class="fsOverlayLoadingScr_loadingCircular">
+          <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
+        </svg>
+      </div>
+    </div>
+    <div id="mainContainer" class="container px-4 my-4">
       <h1 class="user-select-none text-center">discography_v2_cdn_front</h1>
       <hr class="my-4">
       <button id="showSettingsModalButton" class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#settingsModal"><i class="bi bi-gear-wide-connected me-1"></i>Settings</button>
@@ -37,26 +47,6 @@
               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body">
-              <!-- <ul class="nav nav-tabs" id="myTab" role="tablist">
-                <li class="nav-item" role="presentation">
-                  <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
-                </li>
-                <li class="nav-item" role="presentation">
-                  <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
-                </li>
-                <li class="nav-item" role="presentation">
-                  <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
-                </li>
-                <li class="nav-item" role="presentation">
-                  <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
-                </li>
-              </ul>
-              <div class="tab-content" id="myTabContent">
-                <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
-                <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
-                <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
-                <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
-              </div> -->
               <h1 class="fs-3">UI</h1>
               <form id="settingsUiSwitchUiMode" class="d-flex justify-content-between align-items-center">
                 <label>Switch UI mode</label>
@@ -76,7 +66,18 @@
         </div>
       </div>
       <hr class="my-4">
-      <h3 class="user-select-none">Track List</h3>
+      <h3 class="mb-3 user-select-none">Album 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">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+          <span>Fetching data ...</span>
+        </div>
+      </div>
+      <div id="albumAllCardGroup" class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-4 user-select-none"></div>
+      <hr class="my-4">
+      <h3 class="mb-3 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">
@@ -92,13 +93,84 @@
           <div class="flex-fill w-100">Track</div>
         </button>
       </div>
-      <div class="modal fade user-select-none" id="trackInfoModal" tabindex="-1">
+      <div class="modal fade user-select-none" data-bs-backdrop="static" data-bs-keyboard="false" id="albumInfoModal" 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>
+              <h1 class="modal-title fs-5" id="albumInfoModalLabel"><i class="bi bi-file-earmark-music me-2"></i>Album Info</h1>
               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
+            <div class="modal-body">
+              <h3>Metadata</h3>
+              <h4>General</h4>
+              <table class="table table-sm table-responsive table-hover table-borderless align-middle">
+                <tbody>
+                  <tr>
+                    <td>Album Title</td>
+                    <td id="albumInfoModal-metadataTable-albumTitle">---</td>
+                  </tr>
+                  <tr>
+                    <td>Album Artist</td>
+                    <td id="albumInfoModal-metadataTable-albumArtist">---</td>
+                  </tr>
+                  <tr>
+                    <td>Album Released</td>
+                    <td id="albumInfoModal-metadataTable-albumReleaseDate">YYYY/MM/DD</td>
+                  </tr>
+                  <tr>
+                    <td>Album Barcode</td>
+                    <td id="albumInfoModal-metadataTable-albumBarcode">Sample Number</td>
+                  </tr>
+                  <tr>
+                    <td>Album Copyright</td>
+                    <td id="albumInfoModal-metadataTable-albumCopyright">---</td>
+                  </tr>
+                </tbody>
+              </table>
+              <h4>Track List</h4>
+              <div id="albumInfoModal-trackAllListGroup" class="list-group user-select-none mb-4">
+                <!-- <button type="button" class="list-group-item list-group-item-action d-flex" disabled>
+                  <div class="flex-fill w-100">Artist</div>
+                  <div class="flex-fill w-100">Track</div>
+                </button> -->
+              </div>
+              <h4>External Links</h4>
+              <table id="albumInfoModal-externalLinkTableRoot" class="table table-sm table-responsive table-hover table-borderless align-middle">
+                <tbody id="albumInfoModal-externalLinkTable">
+                </tbody>
+              </table>
+              <h4>Cover Artwork Images</h4>
+              <div class="mb-3" id="albumInfoModal-coverArtLinkDiv">
+              </div>
+              <div id="debugAreaSection" class="d-none">
+                <h3>Debug Area</h3>
+                <div class="accordion" id="albumInfoModal-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="#albumInfoModal-DebugAcdInCollapse">Parsed data output (album)</button>
+                    </h2>
+                    <div id="albumInfoModal-DebugAcdInCollapse" class="accordion-collapse collapse" data-bs-parent="#albumInfoModal-DebugAcd">
+                      <div class="accordion-body">
+                        <pre class=""><code id="albumInfoModal-DebugAcdOutputEl"></code></pre>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal fade user-select-none" data-bs-backdrop="static" data-bs-keyboard="false" 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" id="trackInfoModal-ModalCloseIconButton" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
             <div class="modal-body">
               <h3>Direct Download</h3>
               <table class="table table-sm table-responsive table-hover table-borderless align-middle">
@@ -106,17 +178,7 @@
                 </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>
+              <audio id="trackInfoModal-previewAudio" class="w-100 align-middle text-center mb-3" controls controlslist="nodownload" preload="none" src=""></audio>
               <h3>Metadata</h3>
               <h4>General</h4>
               <table class="table table-sm table-responsive table-hover table-borderless align-middle">
@@ -204,7 +266,114 @@
               </div>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" id="trackInfoModal-ModalCloseButton" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal fade user-select-none" data-bs-backdrop="static" data-bs-keyboard="false" id="trackInfoModal2" 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="trackInfoModal2Label"><i class="bi bi-file-earmark-music me-2"></i>Track Info</h1>
+              <button type="button" id="trackInfoModal2-ModalCloseIconButton" class="btn-close" data-bs-target="#albumInfoModal" data-bs-toggle="modal"></button>
+            </div>
+            <div class="modal-body">
+              <h3>Direct Download</h3>
+              <table class="table table-sm table-responsive table-hover table-borderless align-middle">
+                <tbody id="trackInfoModal2-downloadTable">
+                </tbody>
+              </table>
+              <h3>Preview</h3>
+              <audio id="trackInfoModal2-previewAudio" class="w-100 align-middle text-center mb-3" controls controlslist="nodownload" preload="none" src=""></audio>
+              <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="trackInfoModal2-metadataTable-trackTitle">---</td>
+                  </tr>
+                  <tr>
+                    <td>Artists</td>
+                    <td id="trackInfoModal2-metadataTable-artists">---</td>
+                  </tr>
+                  <tr>
+                    <td>Lyricist</td>
+                    <td id="trackInfoModal2-metadataTable-lyricist">---</td>
+                  </tr>
+                  <tr>
+                    <td>Composer</td>
+                    <td id="trackInfoModal2-metadataTable-composer">---</td>
+                  </tr>
+                  <tr>
+                    <td>Arranger</td>
+                    <td id="trackInfoModal2-metadataTable-arranger">---</td>
+                  </tr>
+                  <tr>
+                    <td>Track Duration (Readable)</td>
+                    <td id="trackInfoModal2-metadataTable-trackDurationReadable">---</td>
+                  </tr>
+                  <tr>
+                    <td>Track Duration (MS)</td>
+                    <td id="trackInfoModal2-metadataTable-trackDurationMsec">---</td>
+                  </tr>
+                  <tr>
+                    <td>Track Duration (Samples)</td>
+                    <td id="trackInfoModal2-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="trackInfoModal2-metadataTable-albumTitle">---</td>
+                  </tr>
+                  <tr>
+                    <td>Album Artist</td>
+                    <td id="trackInfoModal2-metadataTable-albumArtist">---</td>
+                  </tr>
+                  <tr>
+                    <td>Album Released</td>
+                    <td id="trackInfoModal2-metadataTable-albumReleaseDate">YYYY/MM/DD</td>
+                  </tr>
+                  <tr>
+                    <td>Album Barcode</td>
+                    <td id="trackInfoModal2-metadataTable-albumBarcode">Sample Number</td>
+                  </tr>
+                  <tr>
+                    <td>Album Copyright</td>
+                    <td id="trackInfoModal2-metadataTable-albumCopyright">---</td>
+                  </tr>
+                </tbody>
+              </table>
+              <h4>External Links</h4>
+              <table id="trackInfoModal2-externalLinkTableRoot" class="table table-sm table-responsive table-hover table-borderless align-middle">
+                <tbody id="trackInfoModal2-externalLinkTable">
+                </tbody>
+              </table>
+              <h4>Cover Artwork Images</h4>
+              <div class="mb-3" id="trackInfoModal2-coverArtLinkDiv">
+              </div>
+              <div id="debugAreaSection" class="d-none">
+                <h3>Debug Area</h3>
+                <div class="accordion" id="trackInfoModal2-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="#trackInfoModal2-DebugAcdInCollapse">Parsed data output (album)</button>
+                    </h2>
+                    <div id="trackInfoModal2-DebugAcdInCollapse" class="accordion-collapse collapse" data-bs-parent="#trackInfoModal2-DebugAcd">
+                      <div class="accordion-body">
+                        <pre class=""><code id="trackInfoModal2-DebugAcdOutputEl"></code></pre>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button type="button" id="trackInfoModal2-ModalCloseButton" class="btn btn-secondary" data-bs-target="#albumInfoModal" data-bs-toggle="modal">Close</button>
             </div>
           </div>
         </div>

script.js

@@ -1,3 +1,5 @@
+document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
+document.body.style.overflow = 'hidden';
 const internalConfig = {
   'network': {
     'userAgent': {
@@ -20,6 +22,7 @@ const appSettingsSaveDataDefault = {
 };
 let apiDataMasterDB = new Object();
 let apiDataConfig = new Object();
+let bootstrapTooltipList = null;
 
 //!========== ページ読み込み時に実行する処理 ==========
 
@@ -44,6 +47,8 @@ window.addEventListener('load', async function(){
   await loadRequiredDatabase();
   await decryptConfig();
   pushToTrackListGroupUi();
+  pushToAlbumListGroupUi();
+  fsOverlayLoadingScrControl();
 });
 
 document.querySelector('#loadDatabaseTestButton').addEventListener('click', async function() {
@@ -57,6 +62,17 @@ document.querySelector('#trackListingTestButton').addEventListener('click', () =
   pushToTrackListGroupUi();
 });
 
+// ========== fsOverlayLoadingScr制御 ==========
+
+function fsOverlayLoadingScrControl () {
+  document.getElementById('fsOverlayLoadingScr').style.backgroundColor = 'rgba(0,0,0,0)';
+  document.getElementById('fsOverlayLoadingScr').style.visibility = 'hidden';
+  document.getElementById('fsOverlayLoadingScr').style.backdropFilter = 'blur(0)';
+  document.getElementById('fsOverlayLoadingScr_loadingSpinner').style.opacity = 0;
+  document.body.style.paddingRight = 0;
+  document.body.style.overflow = 'auto';
+}
+
 // ========== 全てのトラックのリストをTrack Listing TestのListGroupに表示 ==========
 
 function pushToTrackListGroupUi () {
@@ -112,9 +128,49 @@ function pushToTrackListGroupUi () {
   });
 }
 
+// ========== Album Listをビルド ==========
+
+function pushToAlbumListGroupUi () {
+  const albumAllCardGroup = document.getElementById('albumAllCardGroup');
+  while(albumAllCardGroup.firstChild) {
+    albumAllCardGroup.removeChild(albumAllCardGroup.firstChild);
+  }
+  apiDataMasterDB.response.data.albums.forEach((albumObject) => {
+    let albumParsedObject = getParsedAlbumObjectFromAlbumUuid(albumObject.uuid);
+    let elementObj = new Object();
+    elementObj.colDiv = document.createElement('div');
+    elementObj.cardDiv = document.createElement('div');
+    elementObj.cardBodyDiv = document.createElement('div');
+    elementObj.cardImgDiv = document.createElement('div');
+    elementObj.cardImg = document.createElement('img');
+    elementObj.cardTitle = document.createElement('h5');
+    elementObj.cardText = document.createElement('p');
+    elementObj.colDiv.classList.add('col');
+    elementObj.cardDiv.classList.add('card', 'h-100');
+    elementObj.cardBodyDiv.classList.add('card-body');
+    elementObj.cardImgDiv.classList.add('object-fit-cover', 'cs_card-img-wrapper')
+    elementObj.cardImg.classList.add('card-img-top', 'object-fit-cover', 'lazyload', 'customlazyload-blur', 'user-select-none', 'user-drag-none', 'pe-none');
+    elementObj.cardTitle.classList.add('card-title');
+    elementObj.cardText.classList.add('card-text');
+    elementObj.cardImg.src = `data:image/webp;base64,${albumObject.coverArtPotatoWebp16pxBase64}`;
+    // elementObj.cardImg.src = `data:image/bmp;base64,${albumObject.coverArtPotatoBmp8pxBase64}`;
+    elementObj.cardImg.setAttribute('data-src', `${apiDataConfig.response.config.decrypted.rawMediaUrlBase64}/media/${albumParsedObject.uuid}/${albumParsedObject.coverArts.slice(-1)[0].fileName}.${albumParsedObject.coverArts.slice(-1)[0].format[0].extension}`);
+    // elementObj.cardImg.setAttribute('loading', 'lazy');
+    elementObj.cardTitle.innerHTML = albumParsedObject.title;
+    elementObj.cardText.innerHTML = albumParsedObject.artist.map((obj) => obj.name).join(', ');
+    elementObj.cardBodyDiv.appendChild(elementObj.cardTitle);
+    elementObj.cardBodyDiv.appendChild(elementObj.cardText);
+    elementObj.cardImgDiv.appendChild(elementObj.cardImg);
+    elementObj.cardDiv.appendChild(elementObj.cardImgDiv);
+    elementObj.cardDiv.appendChild(elementObj.cardBodyDiv);
+    elementObj.cardDiv.addEventListener('click', () => {loadAlbumInfoModal(albumParsedObject.uuid)});
+    elementObj.colDiv.appendChild(elementObj.cardDiv);
+    albumAllCardGroup.appendChild(elementObj.colDiv);
+  });
+}
+
 // ========== trackInfoModalの処理 ==========
 
-let bootstrapTooltipList = null;
 function loadTrackInfoModal (trackUuid) {
   const albumParsedObject = getParsedAlbumObjectFromAlbumUuid(getAlbumUuidFromTrackUuid(trackUuid));
   const trackParsedObject = albumParsedObject.tracks.find((obj) => obj.uuid === trackUuid);
@@ -219,7 +275,7 @@ function loadTrackInfoModal (trackUuid) {
     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.classList.add('btn','btn-outline-primary','btn-sm','me-2');
       temp_extLinkAlbumA1El.setAttribute('href', `https://music.apple.com/album/${albumParsedObject.link.itunes}`);
       temp_extLinkAlbumA1El.setAttribute('role', 'button');
       temp_extLinkAlbumA1El.setAttribute('target', '_blank');
@@ -228,7 +284,7 @@ function loadTrackInfoModal (trackUuid) {
       temp_extLinkAlbumTdValueEl.appendChild(temp_extLinkAlbumA1El);
     }
     if (albumParsedObject.link.spotify !== null) {
-      temp_extLinkAlbumA2El.classList.add('btn','btn-outline-primary','btn-sm','me-1');
+      temp_extLinkAlbumA2El.classList.add('btn','btn-outline-primary','btn-sm','me-2');
       temp_extLinkAlbumA2El.setAttribute('href', `https://open.spotify.com/album/${albumParsedObject.link.spotify}`);
       temp_extLinkAlbumA2El.setAttribute('role', 'button');
       temp_extLinkAlbumA2El.setAttribute('target', '_blank');
@@ -243,7 +299,7 @@ function loadTrackInfoModal (trackUuid) {
   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.classList.add('btn','btn-primary','btn-sm','me-2','mb-2');
       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');
@@ -316,6 +372,332 @@ function loadTrackInfoModal (trackUuid) {
   const trackInfoModal = new bootstrap.Modal(document.getElementById('trackInfoModal'));
   trackInfoModal.show();
 }
+function loadTrackInfoModal2 (trackUuid) {
+  const albumParsedObject = getParsedAlbumObjectFromAlbumUuid(getAlbumUuidFromTrackUuid(trackUuid));
+  const trackParsedObject = albumParsedObject.tracks.find((obj) => obj.uuid === trackUuid);
+  if (bootstrapTooltipList !== null) {bootstrapTooltipList.forEach(el => el.dispose())}
+  document.getElementById('trackInfoModal2-metadataTable-trackTitle').innerHTML = trackParsedObject.title;
+  if (trackParsedObject.titleLatin === null) {
+    document.getElementById('trackInfoModal2-metadataTable-trackTitle').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal2-metadataTable-trackTitle').removeAttribute('data-bs-title');
+  } else {
+    document.getElementById('trackInfoModal2-metadataTable-trackTitle').setAttribute('data-bs-toggle', 'tooltip');
+    document.getElementById('trackInfoModal2-metadataTable-trackTitle').setAttribute('data-bs-title', trackParsedObject.titleLatin);
+  }
+  document.getElementById('trackInfoModal2-metadataTable-artists').innerHTML = trackParsedObject.artist.map((obj) => obj.name).join(', ');
+  if (trackParsedObject.artist.some((obj) => obj.nameLatin !== null)) {
+    document.getElementById('trackInfoModal2-metadataTable-artists').setAttribute('data-bs-toggle', 'tooltip');
+    document.getElementById('trackInfoModal2-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('trackInfoModal2-metadataTable-artistsLatin').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal2-metadataTable-artistsLatin').removeAttribute('data-bs-title');
+  }
+  if (trackParsedObject.lyricist === null) {
+    document.getElementById('trackInfoModal2-metadataTable-lyricist').parentNode.classList.add('d-none');
+    document.getElementById('trackInfoModal2-metadataTable-lyricist').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal2-metadataTable-lyricist').removeAttribute('data-bs-title');
+  } else {
+    document.getElementById('trackInfoModal2-metadataTable-lyricist').parentNode.classList.remove('d-none');
+    document.getElementById('trackInfoModal2-metadataTable-lyricist').innerHTML = trackParsedObject.lyricist.map((obj) => obj.name).join(', ');
+    if (trackParsedObject.lyricist.some((obj) => obj.nameLatin !== null)) {
+      document.getElementById('trackInfoModal2-metadataTable-lyricist').setAttribute('data-bs-toggle', 'tooltip');
+      document.getElementById('trackInfoModal2-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('trackInfoModal2-metadataTable-lyricist').removeAttribute('data-bs-toggle');
+      document.getElementById('trackInfoModal2-metadataTable-lyricist').removeAttribute('data-bs-title');
+    }
+  }
+  if (trackParsedObject.composer === null) {
+    document.getElementById('trackInfoModal2-metadataTable-composer').parentNode.classList.add('d-none');
+    document.getElementById('trackInfoModal2-metadataTable-composer').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal2-metadataTable-composer').removeAttribute('data-bs-title');
+  } else {
+    document.getElementById('trackInfoModal2-metadataTable-composer').parentNode.classList.remove('d-none');
+    document.getElementById('trackInfoModal2-metadataTable-composer').innerHTML = trackParsedObject.composer.map((obj) => obj.name).join(', ');
+    if (trackParsedObject.composer.some((obj) => obj.nameLatin !== null)) {
+      document.getElementById('trackInfoModal2-metadataTable-composer').setAttribute('data-bs-toggle', 'tooltip');
+      document.getElementById('trackInfoModal2-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('trackInfoModal2-metadataTable-composer').removeAttribute('data-bs-toggle');
+      document.getElementById('trackInfoModal2-metadataTable-composer').removeAttribute('data-bs-title');
+    }
+  }
+  if (trackParsedObject.arranger === null) {
+    document.getElementById('trackInfoModal2-metadataTable-arranger').parentNode.classList.add('d-none');
+    document.getElementById('trackInfoModal2-metadataTable-arranger').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal2-metadataTable-arranger').removeAttribute('data-bs-title');
+  } else {
+    document.getElementById('trackInfoModal2-metadataTable-arranger').parentNode.classList.remove('d-none');
+    document.getElementById('trackInfoModal2-metadataTable-arranger').innerHTML = trackParsedObject.arranger.map((obj) => obj.name).join(', ');
+    if (trackParsedObject.arranger.some((obj) => obj.nameLatin !== null)) {
+      document.getElementById('trackInfoModal2-metadataTable-arranger').setAttribute('data-bs-toggle', 'tooltip');
+      document.getElementById('trackInfoModal2-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('trackInfoModal2-metadataTable-arranger').removeAttribute('data-bs-toggle');
+      document.getElementById('trackInfoModal2-metadataTable-arranger').removeAttribute('data-bs-title');
+    }
+  }
+  document.getElementById('trackInfoModal2-metadataTable-trackDurationReadable').innerHTML = msecToReadableTime(trackParsedObject.durationMsecs);
+  document.getElementById('trackInfoModal2-metadataTable-trackDurationMsec').innerHTML = `${trackParsedObject.durationMsecs} ms`;
+  document.getElementById('trackInfoModal2-metadataTable-trackDurationSamples').innerHTML = `${trackParsedObject.durationSamples} samples`;
+  document.getElementById('trackInfoModal2-metadataTable-albumTitle').innerHTML = albumParsedObject.title;
+  if (albumParsedObject.titleLatin === null) {
+    document.getElementById('trackInfoModal2-metadataTable-albumTitle').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal2-metadataTable-albumTitle').removeAttribute('data-bs-title');
+  } else {
+    document.getElementById('trackInfoModal2-metadataTable-albumTitle').setAttribute('data-bs-toggle', 'tooltip');
+    document.getElementById('trackInfoModal2-metadataTable-albumTitle').setAttribute('data-bs-title', albumParsedObject.titleLatin);
+  }
+  document.getElementById('trackInfoModal2-metadataTable-albumArtist').innerHTML = albumParsedObject.artist.map((obj) => obj.name).join(', ');
+  if (albumParsedObject.artist.some((obj) => obj.nameLatin !== null)) {
+    document.getElementById('trackInfoModal2-metadataTable-albumArtist').setAttribute('data-bs-toggle', 'tooltip');
+    document.getElementById('trackInfoModal2-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('trackInfoModal2-metadataTable-albumArtist').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal2-metadataTable-albumArtist').removeAttribute('data-bs-title');
+  }
+  document.getElementById('trackInfoModal2-metadataTable-albumReleaseDate').innerHTML = moment(albumParsedObject.releaseDate).format('YYYY/MM/DD');
+  document.getElementById('trackInfoModal2-metadataTable-albumBarcode').innerHTML = albumParsedObject.barCode;
+  document.getElementById('trackInfoModal2-metadataTable-albumCopyright').innerHTML = albumParsedObject.copyright;
+  while(document.getElementById('trackInfoModal2-externalLinkTable').firstChild) {
+    document.getElementById('trackInfoModal2-externalLinkTable').removeChild(document.getElementById('trackInfoModal2-externalLinkTable').firstChild);
+  }
+  while(document.getElementById('trackInfoModal2-coverArtLinkDiv').firstChild) {
+    document.getElementById('trackInfoModal2-coverArtLinkDiv').removeChild(document.getElementById('trackInfoModal2-coverArtLinkDiv').firstChild);
+  }
+  while(document.getElementById('trackInfoModal2-downloadTable').firstChild) {
+    document.getElementById('trackInfoModal2-downloadTable').removeChild(document.getElementById('trackInfoModal2-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-2');
+      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-2');
+      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('trackInfoModal2-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-2','mb-2');
+      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('trackInfoModal2-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('download', determineDownloadFileName(trackParsedObject.uuid, obj.uuid));
+    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('trackInfoModal2-downloadTable').appendChild(temp_dlTrEl);
+  });
+  document.getElementById('trackInfoModal2-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"]');
+  bootstrapTooltipList = [...bootstrapTooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+  document.getElementById('trackInfoModal2-DebugAcdOutputEl').innerHTML = JSON.stringify(albumParsedObject, '', '  ');
+  const trackInfoModal2 = new bootstrap.Modal(document.getElementById('trackInfoModal2'));
+  trackInfoModal2.show();
+}
+
+// ========== albumInfoModalの処理 ==========
+
+function loadAlbumInfoModal (albumUuid) {
+  // Parse Album from DB
+  const albumParsedObject = getParsedAlbumObjectFromAlbumUuid(albumUuid);
+  // Metadata label build
+  if (bootstrapTooltipList !== null) {bootstrapTooltipList.forEach(el => el.dispose())};
+  document.getElementById('albumInfoModal-metadataTable-albumTitle').innerHTML = albumParsedObject.title;
+  if (albumParsedObject.titleLatin === null) {
+    document.getElementById('albumInfoModal-metadataTable-albumTitle').removeAttribute('data-bs-toggle');
+    document.getElementById('albumInfoModal-metadataTable-albumTitle').removeAttribute('data-bs-title');
+  } else {
+    document.getElementById('albumInfoModal-metadataTable-albumTitle').setAttribute('data-bs-toggle', 'tooltip');
+    document.getElementById('albumInfoModal-metadataTable-albumTitle').setAttribute('data-bs-title', albumParsedObject.titleLatin);
+  }
+  document.getElementById('albumInfoModal-metadataTable-albumArtist').innerHTML = albumParsedObject.artist.map((obj) => obj.name).join(', ');
+  if (albumParsedObject.artist.some((obj) => obj.nameLatin !== null)) {
+    document.getElementById('albumInfoModal-metadataTable-albumArtist').setAttribute('data-bs-toggle', 'tooltip');
+    document.getElementById('albumInfoModal-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('albumInfoModal-metadataTable-albumArtist').removeAttribute('data-bs-toggle');
+    document.getElementById('albumInfoModal-metadataTable-albumArtist').removeAttribute('data-bs-title');
+  }
+  document.getElementById('albumInfoModal-metadataTable-albumReleaseDate').innerHTML = moment(albumParsedObject.releaseDate).format('YYYY/MM/DD');
+  document.getElementById('albumInfoModal-metadataTable-albumBarcode').innerHTML = albumParsedObject.barCode;
+  document.getElementById('albumInfoModal-metadataTable-albumCopyright').innerHTML = albumParsedObject.copyright;
+  // Table clear el
+  while(document.getElementById('albumInfoModal-externalLinkTable').firstChild) {
+    document.getElementById('albumInfoModal-externalLinkTable').removeChild(document.getElementById('albumInfoModal-externalLinkTable').firstChild);
+  }
+  while(document.getElementById('albumInfoModal-coverArtLinkDiv').firstChild) {
+    document.getElementById('albumInfoModal-coverArtLinkDiv').removeChild(document.getElementById('albumInfoModal-coverArtLinkDiv').firstChild);
+  }
+  // External link table build
+  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-2');
+      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-2');
+      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('albumInfoModal-externalLinkTable').appendChild(temp_extLinkAlbumTrEl);
+  }
+  // Cover art button build
+  albumParsedObject.coverArts.forEach((obj1) => {
+    obj1.format.forEach((obj2) => {
+      let temp_coverArtAEl = document.createElement('a');
+      temp_coverArtAEl.classList.add('btn','btn-primary','btn-sm','me-2','mb-2');
+      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('albumInfoModal-coverArtLinkDiv').appendChild(temp_coverArtAEl);
+    });
+  });
+  // Tooltip initialize
+  const bootstrapTooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+  bootstrapTooltipList = [...bootstrapTooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+  // Modal Initialize
+  const albumInfoModal = new bootstrap.Modal(document.getElementById('albumInfoModal'));
+
+  // Track List build
+  const albumTrackAllListGroup = document.querySelector('#albumInfoModal-trackAllListGroup');
+  while(albumTrackAllListGroup.firstChild) {
+    albumTrackAllListGroup.removeChild(albumTrackAllListGroup.firstChild);
+  }
+  let headerElObj = new Object();
+  headerElObj.buttonNodeEl = document.createElement('button');
+  headerElObj.divArtistNodeEl = document.createElement('div');
+  headerElObj.divTrackNodeEl = document.createElement('div');
+  headerElObj.buttonNodeEl.classList.add('list-group-item', 'list-group-item-action', 'd-flex');
+  headerElObj.buttonNodeEl.setAttribute('type', 'button');
+  headerElObj.buttonNodeEl.disabled = true;
+  headerElObj.divArtistNodeEl.classList.add('flex-fill', 'w-100');
+  headerElObj.divTrackNodeEl.classList.add('flex-fill', 'w-100');
+  headerElObj.divArtistNodeEl.innerHTML = 'Artist';
+  headerElObj.divTrackNodeEl.innerHTML = 'Track';
+  headerElObj.buttonNodeEl.appendChild(headerElObj.divArtistNodeEl);
+  headerElObj.buttonNodeEl.appendChild(headerElObj.divTrackNodeEl);
+  albumTrackAllListGroup.appendChild(headerElObj.buttonNodeEl);
+  albumParsedObject.tracks.forEach((trackParsedObject) => {
+    let buttonNodeEl = document.createElement('button');
+    let divArtistNodeEl = document.createElement('div');
+    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', trackParsedObject.uuid);
+    divArtistNodeEl.classList.add('flex-fill', 'w-100');
+    divTrackNodeEl.classList.add('flex-fill', 'w-100');
+    divArtistNodeEl.innerHTML = trackParsedObject.artist.map((obj) => obj.name).join(', ');
+    divTrackNodeEl.innerHTML = trackParsedObject.title;
+    buttonNodeEl.appendChild(divArtistNodeEl);
+    buttonNodeEl.appendChild(divTrackNodeEl);
+    buttonNodeEl.addEventListener('click', () => {
+      albumInfoModal.hide();
+      loadTrackInfoModal2(trackParsedObject.uuid)
+    });
+    albumTrackAllListGroup.appendChild(buttonNodeEl);
+  });
+  
+  // Show modal
+  albumInfoModal.show();
+}
 
 // ========== 設定画面のイベントリスナー登録など ==========
 
@@ -333,9 +715,11 @@ function appSettingsApply () {
   switch (appSettingsSaveData.ui.uiThemeMode) {
     case 'light':
       document.querySelector('html').setAttribute('data-bs-theme', 'light');
+      document.querySelector('html').setAttribute('data-mdb-theme', 'light');
       break;
     case 'dark':
       document.querySelector('html').setAttribute('data-bs-theme', 'dark');
+      document.querySelector('html').setAttribute('data-mdb-theme', 'dark');
   }
 }
 

style.css

@@ -3,4 +3,140 @@ body, .tooltip {
 }
 pre, code {
   font-family: 'Fira Code', SFMono-Regular, SF Mono, 'Noto Sans JP', ui-monospace, monospace, sans-serif;
+}
+
+.user-drag-none {
+  user-drag: none;
+  -webkit-user-drag: none;
+  -moz-user-select: none;
+}
+
+.customlazyload-blur {
+  -webkit-filter: blur(12px);
+  filter: blur(12px);
+  opacity: 1;
+  transition: filter 400ms, -webkit-filter 400ms, opacity 400ms;
+}
+.customlazyload-blur.lazyloaded {
+  -webkit-filter: blur(0);
+  filter: blur(0);
+  opacity: 1;
+}
+
+.modal-content {
+  box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.6);
+}
+.cs_card-img-wrapper {
+  overflow: hidden;
+}
+#trackAllListGroup {
+  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
+  scale: 1;
+  transition: box-shadow 200ms, scale 200ms;
+  &:hover {
+    box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.6);
+    scale: 1.01;
+  }
+}
+#albumAllCardGroup .col .card {
+  cursor: pointer;
+  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
+  scale: 1;
+  transition: box-shadow 200ms, scale 200ms;
+  &:hover {
+    box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.6);
+    scale: 1.03;
+  }
+  &:active {
+    box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.6);
+    scale: 1.015;
+  }
+}
+.btn, .btn-group {
+  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
+  scale: 1;
+  transition: box-shadow 200ms, scale 200ms;
+  &:hover {
+    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.6);
+    scale: 1.05;
+  }
+  &:active {
+    box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.6);
+    scale: 1.025;
+  }
+}
+.btn-group .btn {
+  box-shadow: none;
+  scale: 1;
+  &:hover {
+    box-shadow: none;
+    scale: 1;
+  }
+  &:active {
+    box-shadow: none;
+    scale: 1;
+  }
+}
+.btn-close {
+  scale: 1;
+  transition: scale 200ms;
+  &:hover {
+    scale: 1.08;
+  }
+}
+
+#fsOverlayLoadingScr {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  visibility: visible;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0,0,0,0.5);
+  z-index: 5001;
+  backdrop-filter: blur(32px);
+  transition: background-color 700ms, visibility 700ms, backdrop-filter 700ms;
+}
+#fsOverlayLoadingScr_loadingSpinner {
+  margin: 0px auto;
+  width: 100px;
+  height: 100px;
+  zoom: 1.5;
+  opacity: 1;
+  transition: opacity 500ms;
+}
+.fsOverlayLoadingScr_loadingCircular {
+  animation: fsOverlayLoadingScr_loadingCircular_rotate 1s linear infinite;
+  height: 100px;
+  position: relative;
+  width: 100px;
+}
+.fsOverlayLoadingScr_loadingCircular circle {
+  stroke: #fff;
+  stroke-dasharray: 1,200;
+  stroke-dashoffset: 0;
+  animation: fsOverlayLoadingScr_loadingCircular_dash 1.5s ease-in-out infinite;
+  stroke-linecap: round;
+}
+@keyframes fsOverlayLoadingScr_loadingCircular_rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fsOverlayLoadingScr_loadingCircular_dash {
+  0% {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -124;
+  }
 }