Spaces:

DeliberatorArchiver
/

discography_v2_cdn_front

Running

App Files Files Community

daydreamer-json commited on Jan 23, 2024

Commit

d7d98b9

verified ·

1 Parent(s): dc024d1

Test build

Browse files

Files changed (3) hide show

index.html +126 -17
script.js +238 -0
style.css +4 -26

index.html CHANGED Viewed

@@ -1,19 +1,128 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!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/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">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.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 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>
+      <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>
+      <hr class="my-4">
+      <h3 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">
+      <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>
+      <hr class="my-4">
+      <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>
+      </footer>
+    </div>
+    <script src="script.js"></script>
+  </body>
 </html>

script.js ADDED Viewed

	@@ -0,0 +1,238 @@

+const internalConfig = {
+  'network': {
+    'userAgent': {
+      'chromeWindows': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36',
+      'curl': 'curl/8.4.0',
+      'curlUnity': 'UnityPlayer/2021.3.14f1 (UnityWebRequest/1.0, libcurl/7.84.0-DEV)'
+    },
+    'timeout': 15000
+  }
+};
+const apiConnectDefaultHeader = {
+  'Access-Controll-Allow-Origin': '*'
+}
+const appSettingsStorageName = '018d2fc7-d0bb-7393-9ebc-6f6ec26b03ce_appSettings';
+let appSettingsSaveData = new Object();
+const appSettingsSaveDataDefault = {
+  'ui': {
+    'uiThemeMode': 'light'
+  }
+};
+let apiDataMasterDB = new Object();
+let apiDataConfig = new Object();
+//!========== ページ読み込み時に実行する処理 ==========
+window.addEventListener('load', async function(){
+  if (checkAppSettingsExistsOnStorage() === true) {
+    loadAppSettingsFromLocalStorage();
+  } else {
+    loadAppSettingsFromLocalStorage();
+    if (window.matchMedia('(prefers-color-scheme:dark)').matches === true) {
+      console.warn(`prefers-color-scheme:dark detected`)
+      appSettingsSaveData.ui.uiThemeMode = 'dark';
+      writeAppSettingsToLocalStorage();
+    } else {
+      appSettingsSaveData.ui.uiThemeMode = 'light';
+      writeAppSettingsToLocalStorage();
+    }
+  }
+  appSettingsCheckedUiUpdate();
+  appSettingsApply();
+  await loadRequiredDatabase();
+  await decryptConfig();
+  pushToTrackListGroupUi();
+});
+document.querySelector('#loadDatabaseTestButton').addEventListener('click', async function() {
+  console.log('loadDatabaseTestButton clicked!');
+  await loadRequiredDatabase();
+});
+document.querySelector('#trackListingTestButton').addEventListener('click', () => {
+  console.log('trackListingTestButton clicked!');
+  pushToTrackListGroupUi();
+});
+// ========== 全てのトラックのリストをTrack Listing TestのListGroupに表示 ==========
+function pushToTrackListGroupUi () {
+  const trackAllListGroup = document.querySelector('#trackAllListGroup');
+  while(trackAllListGroup.firstChild) {
+    trackAllListGroup.removeChild(trackAllListGroup.firstChild);
+  }
+  let headerElObj = new Object();
+  headerElObj.buttonNodeEl = document.createElement('button');
+  headerElObj.divArtistNodeEl = document.createElement('div');
+  headerElObj.divAlbumNodeEl = 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.divAlbumNodeEl.classList.add('flex-fill', 'w-100');
+  headerElObj.divTrackNodeEl.classList.add('flex-fill', 'w-100');
+  headerElObj.divArtistNodeEl.innerHTML = 'Artist';
+  headerElObj.divAlbumNodeEl.innerHTML = 'Album';
+  headerElObj.divTrackNodeEl.innerHTML = 'Track';
+  headerElObj.buttonNodeEl.appendChild(headerElObj.divArtistNodeEl);
+  headerElObj.buttonNodeEl.appendChild(headerElObj.divAlbumNodeEl);
+  headerElObj.buttonNodeEl.appendChild(headerElObj.divTrackNodeEl);
+  trackAllListGroup.appendChild(headerElObj.buttonNodeEl);
+  apiDataMasterDB.response.data.albums.forEach((albumObject) => {
+    albumObject.tracks.forEach((trackObject) => {
+      let buttonNodeEl = document.createElement('button');
+      let divArtistNodeEl = document.createElement('div');
+      let divAlbumNodeEl = document.createElement('div');
+      let divTrackNodeEl = document.createElement('div');
+      buttonNodeEl.classList.add('list-group-item', 'list-group-item-action', 'd-flex');
+      buttonNodeEl.setAttribute('type', 'button');
+      divArtistNodeEl.classList.add('flex-fill', 'w-100');
+      divAlbumNodeEl.classList.add('flex-fill', 'w-100');
+      divTrackNodeEl.classList.add('flex-fill', 'w-100');
+      let albumArtistFilteredList = new Array();
+      albumObject.artist.forEach((str) => {
+        albumArtistFilteredList.push(apiDataMasterDB.response.data.artists.filter((obj) => obj.uuid === str)[0].name);
+      });
+      divArtistNodeEl.innerHTML = albumArtistFilteredList.join(', ');
+      divAlbumNodeEl.innerHTML = albumObject.title;
+      divTrackNodeEl.innerHTML = trackObject.title;
+      buttonNodeEl.appendChild(divArtistNodeEl);
+      buttonNodeEl.appendChild(divAlbumNodeEl);
+      buttonNodeEl.appendChild(divTrackNodeEl);
+      trackAllListGroup.appendChild(buttonNodeEl);
+    });
+  });
+}
+// ========== 設定画面のイベントリスナー登録など ==========
+document.querySelector('#settingsApplyButton').addEventListener('click', () => {appSettingsApply()});
+document.querySelector('#settingsUiSwitchUiModeDiv').addEventListener('click', function () {
+  appSettingsSaveData.ui.uiThemeMode = document.querySelector('#settingsUiSwitchUiMode').elements['settingsUiSwitchUiMode'].value;
+  console.log('settingsUiSwitchUiMode div clicked!');
+});
+// ========== 設定を変更後��保存、反映させる(ボタン押したときの動作) ==========
+function appSettingsApply () {
+  writeAppSettingsToLocalStorage();
+  switch (appSettingsSaveData.ui.uiThemeMode) {
+    case 'light':
+      document.querySelector('html').setAttribute('data-bs-theme', 'light');
+      break;
+    case 'dark':
+      document.querySelector('html').setAttribute('data-bs-theme', 'dark');
+  }
+}
+// ========== appSettingsを元に設定画面の選択状態を更新 ==========
+function appSettingsCheckedUiUpdate () {
+  const settingsUiSwitchUiModeElements = document.querySelector('#settingsUiSwitchUiMode').elements;
+  for (let i = 0; i < settingsUiSwitchUiModeElements.length; i++) {
+    if (settingsUiSwitchUiModeElements[i].value === appSettingsSaveData.ui.uiThemeMode) {
+      settingsUiSwitchUiModeElements[i].checked = true;
+    } else {
+      settingsUiSwitchUiModeElements[i].checked = false;
+    }
+  }
+}
+// ========== API関連の関数など ==========
+async function apiConnect (axiosObj) {
+  let connectionTimerStart = performance.now();
+  try {
+    const response = await axios(axiosObj);
+    let connectionTimerEnd = performance.now();
+    return {
+      'apiConnectionTime': connectionTimerEnd - connectionTimerStart,
+      'response': response.data
+    };
+  } catch (error) {
+    let connectionTimerEnd = performance.now();
+    console.error(`API request failed: ${error.code}`);
+    alert(`API request failed: ${error.code}`);
+    throw error;
+  }
+}
+async function loadRequiredDatabase () {
+  document.querySelectorAll('.fetchingDataNowLabel').forEach((el) => {
+    el.classList.remove('d-none');
+  });
+  apiDataMasterDB = await apiConnect({
+    'method': 'get',
+    'url': `https://corsproxy.io/?${encodeURIComponent(`https://hf.co/datasets/DeliberatorArchiver/discography_v2_cdn/resolve/main/db/master.json`)}`,
+    'headers': apiConnectDefaultHeader,
+    'timeout': internalConfig.network.timeout
+  });
+  apiDataConfig = await apiConnect({
+    'method': 'get',
+    'url': `https://corsproxy.io/?${encodeURIComponent(`https://hf.co/spaces/DeliberatorArchiver/discography_v2_cdn_front/resolve/main/config.json`)}`,
+    '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, '', '  ');
+  } else {
+    document.querySelector('#databaseTestInfoCodeEl').innerHTML = `Failed`;
+  }
+  document.querySelectorAll('.fetchingDataNowLabel').forEach((el) => {
+    el.classList.add('d-none');
+  });
+}
+// ========== MasterDB/Configの暗号化を解く ==========
+async function decryptConfig () {
+  apiDataConfig.response.config.decrypted = new Object();
+  console.log(`Decrypting config data using AES 128-bit CBC ...`)
+  const encryptKey = await CryptoJS.enc.Hex.parse(CryptoJS.enc.Base64.parse(apiDataConfig.response.config.encryption.key.split('').reverse().join('')).toString(CryptoJS.enc.Utf8));
+  const encryptIv = await CryptoJS.enc.Hex.parse(CryptoJS.enc.Base64.parse(apiDataConfig.response.config.encryption.iv.split('').reverse().join('')).toString(CryptoJS.enc.Utf8));
+  Object.keys(apiDataConfig.response.config.encrypted).forEach(async function (keyName) {
+    apiDataConfig.response.config.decrypted[keyName] = await CryptoJS.AES.decrypt({
+      'ciphertext': CryptoJS.enc.Base64.parse(apiDataConfig.response.config.encrypted[keyName])
+    }, encryptKey, {
+      'iv': encryptIv,
+      'mode': CryptoJS.mode.CBC,
+      'padding': CryptoJS.pad.Pkcs7
+    }).toString(CryptoJS.enc.Utf8);
+  });
+  console.log(`All config data has been decrypted`);
+}
+// ========== ブラウザのLocalStorageにあるAppSettingsを読み書きする ==========
+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);
+  } else {
+    appSettingsSaveData = appSettingsSaveDataDefault;
+    console.warn(`LocalStorage key not found\nUsing default settings`);
+    writeAppSettingsToLocalStorage();
+  }
+}
+function checkAppSettingsExistsOnStorage () {
+  if (localStorage.hasOwnProperty(appSettingsStorageName)) {
+    return true
+  } else {
+    return false
+  }
+}
+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);
+}

style.css CHANGED Viewed

@@ -1,28 +1,6 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
 }

 body {
+  font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif
 }
+pre, code {
+  font-family: 'Fira Code', SFMono-Regular, SF Mono, 'Noto Sans JP', ui-monospace, monospace, sans-serif;
+}