Spaces:

DeliberatorArchiver
/

discography_v2_cdn_front

Running

App Files Files Community

discography_v2_cdn_front / index.html

daydreamer-json

Some fix

0cfe7b7 verified about 1 year ago

raw

history blame

14.6 kB

	<!DOCTYPE html>
	<html lang="en" data-bs-theme="dark">
	<head>
	<meta charset="utf-8">
	<title>discography_v2_cdn_front</title>
	<!-- Responsive viewport meta -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 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>
	<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">
	<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="style.css">
	</head>
	<body>
	<div id="mainContainer" class="container 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>
	<div class="modal fade user-select-none" id="settingsModal" tabindex="-1">
	<div class="modal-dialog modal-dialog-scrollable">
	<div class="modal-content">
	<div class="modal-header">
	<h1 class="modal-title fs-5" id="settingsModalLabel"><i class="bi bi-gear-wide-connected me-2"></i>Settings</h1>
	<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>
	<div class="btn-group w-100%" id="settingsUiSwitchUiModeDiv" role="group">
	<input type="radio" class="btn-check" name="settingsUiSwitchUiMode" id="settingsUiSwitchUiModeLight" autocomplete="off" value="light">
	<label class="btn btn-outline-primary" for="settingsUiSwitchUiModeLight">Light</label>
	<input type="radio" class="btn-check" name="settingsUiSwitchUiMode" id="settingsUiSwitchUiModeDark" autocomplete="off" value="dark">
	<label class="btn btn-outline-primary" for="settingsUiSwitchUiModeDark">Dark</label>
	</div>
	</form>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
	<button type="button" class="btn btn-primary" id="settingsApplyButton">Save/Apply</button>
	</div>
	</div>
	</div>
	</div>
	<hr class="my-4">
	<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">
	<span class="visually-hidden">Loading...</span>
	</div>
	<span>Fetching data ...</span>
	</div>
	</div>
	<div id="trackAllListGroup" class="list-group user-select-none">
	<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">Album</div>
	<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>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">
	<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 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 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 class="mb-3" id="trackInfoModal-coverArtLinkDiv">
	</div>
	<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>
	</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">
	<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>
	</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>
	</div>
	</div>
	</div>
	<hr class="my-4">
	</div>
	<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>
	<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>
	</body>
	</html>