<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="color-scheme" content="light dark" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>音乐播放器</title>
    <style>
      html.ui-boot #root {
        visibility: hidden;
      }
      #ui-boot-loader {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99999;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 14px;
        margin: 0;
        overflow: hidden;
        background: #0a0a0c;
        color: rgba(255, 255, 255, 0.9);
        font:
          15px/1.4 system-ui,
          -apple-system,
          'Segoe UI',
          sans-serif;
        letter-spacing: 0.04em;
        user-select: none;
        pointer-events: none;
      }
      #ui-boot-loader::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.55)),
          url('/images/background.webp') center / cover no-repeat;
        filter: blur(18px);
        transform: scale(1.08);
        z-index: 0;
      }
      #ui-boot-loader > * {
        position: relative;
        z-index: 1;
      }
      html.ui-boot #ui-boot-loader {
        display: flex;
      }
      #ui-boot-loader .ui-boot-spinner {
        width: 28px;
        height: 28px;
        border: 2px solid rgba(255, 255, 255, 0.18);
        border-top-color: rgba(255, 255, 255, 0.85);
        border-radius: 50%;
        animation: ui-boot-spin 0.75s linear infinite;
      }
      @keyframes ui-boot-spin {
        to {
          transform: rotate(360deg);
        }
      }
    </style>
    <script>
      (function () {
        try {
          if (!localStorage.getItem('ui.skinId')) {
            document.documentElement.classList.add('ui-boot');
          }
        } catch (e) {
          document.documentElement.classList.add('ui-boot');
        }
      })();
    </script>
    <link rel="icon" href="/favicon.ico" />
    <link rel="manifest" href="/webmanifest" />
    <meta name="theme-color" content="#000000" />

    <noscript></noscript>
    <link rel="apple-touch-icon" href="/images/cd.webp" />
    <link rel="prefetch" href="/webmanifest" as="fetch" crossorigin />
    <link rel="prefetch" href="/music.json" as="fetch" crossorigin />
    <script type="module" crossorigin src="/assets/index-B2b5wQ3b.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-DnxA9v5e.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DUrXd9BH.css">
  </head>
  <body>
    <div id="ui-boot-loader" aria-live="polite" aria-busy="true">
      <div class="ui-boot-spinner" aria-hidden="true"></div>
      <span>加载中</span>
    </div>
    <div id="root"></div>
    <script>
      (function () {
        function setupPwaInstallPrompt() {
          var deferredPrompt = null;
          window.addEventListener('beforeinstallprompt', function (e) {
            e.preventDefault();
            deferredPrompt = e;
            try {
              if (localStorage.getItem('pwa-install-dismissed')) return;
            } catch (err) {}
            if (document.getElementById('pwa-install-banner')) return;
            if (window.matchMedia('(display-mode: standalone)').matches) return;
            var bar = document.createElement('div');
            bar.id = 'pwa-install-banner';
            bar.className = 'pwa-install-banner';
            bar.setAttribute('role', 'region');
            bar.setAttribute('aria-label', '安装应用');
            var text = document.createElement('span');
            text.className = 'pwa-install-banner-text';
            text.textContent = '安装播放器应用，离线访问更稳定。';
            var btnLater = document.createElement('button');
            btnLater.type = 'button';
            btnLater.className = 'pwa-install-banner-btn pwa-install-banner-btn-ghost';
            btnLater.textContent = '暂不';
            var btnInstall = document.createElement('button');
            btnInstall.type = 'button';
            btnInstall.className = 'pwa-install-banner-btn pwa-install-banner-btn-primary';
            btnInstall.textContent = '安装应用';
            function dismissInstall() {
              try {
                localStorage.setItem('pwa-install-dismissed', '1');
              } catch (err2) {}
              if (bar.parentNode) bar.parentNode.removeChild(bar);
            }
            btnLater.addEventListener('click', dismissInstall);
            btnInstall.addEventListener('click', function () {
              if (!deferredPrompt) return;
              deferredPrompt.prompt();
              deferredPrompt.userChoice.finally(function () {
                deferredPrompt = null;
                dismissInstall();
              });
            });
            bar.appendChild(text);
            bar.appendChild(btnLater);
            bar.appendChild(btnInstall);
            document.body.appendChild(bar);
          });
        }

        if (!('serviceWorker' in navigator)) {
          console.warn('❌ 当前浏览器不支持 Service Worker');
          setupPwaInstallPrompt();
          return;
        }
        function registerSw() {
          var refreshing = false;
          var hadControllerOnLoad = Boolean(navigator.serviceWorker.controller);
          navigator.serviceWorker.addEventListener('controllerchange', function () {
            if (!hadControllerOnLoad) {
              hadControllerOnLoad = true;
              return;
            }
            if (refreshing) return;
            refreshing = true;
            window.location.reload();
          });

          navigator.serviceWorker
            .register('/sw.js', { scope: '/' })
            .then((registration) => {
              console.log('✅ 离线缓存已启用，版本:', registration.scope);

              try {
                if (registration.update) registration.update();
                setInterval(
                  function () {
                    registration.update().catch(function () {});
                  },
                  60 * 60 * 1000,
                );
              } catch (e) {}

              registration.addEventListener('updatefound', () => {
                const newWorker = registration.installing;
                if (!newWorker) return;
                newWorker.addEventListener('statechange', () => {
                  if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                    console.log('🔄 发现新版本，可刷新页面以使用');
                    if (document.getElementById('sw-update-banner')) return;
                    var bar = document.createElement('div');
                    bar.id = 'sw-update-banner';
                    bar.className = 'sw-update-banner';
                    bar.setAttribute('role', 'status');
                    bar.setAttribute('aria-live', 'polite');
                    var text = document.createElement('span');
                    text.className = 'sw-update-banner-text';
                    text.textContent = '新版本已就绪，刷新后即可使用最新缓存与功能。';
                    var btnLater = document.createElement('button');
                    btnLater.type = 'button';
                    btnLater.className = 'sw-update-banner-btn sw-update-banner-btn-ghost';
                    btnLater.textContent = '稍后';
                    var btnRefresh = document.createElement('button');
                    btnRefresh.type = 'button';
                    btnRefresh.className = 'sw-update-banner-btn sw-update-banner-btn-primary';
                    btnRefresh.textContent = '立即刷新';
                    function dismiss() {
                      if (bar.parentNode) bar.parentNode.removeChild(bar);
                    }
                    function applyAndReload() {
                      try {
                        newWorker.postMessage({ action: 'skipWaiting' });
                      } catch (e) {}
                      setTimeout(function () {
                        if (!refreshing) window.location.reload();
                      }, 400);
                    }
                    btnRefresh.addEventListener('click', applyAndReload);
                    btnLater.addEventListener('click', dismiss);
                    bar.appendChild(text);
                    bar.appendChild(btnLater);
                    bar.appendChild(btnRefresh);
                    document.body.appendChild(bar);
                  }
                });
              });
            })
            .catch((registrationError) => {
              console.warn('❌ 离线缓存启用失败:', registrationError);
            });
        }
        setupPwaInstallPrompt();
        if (document.readyState === 'loading') {
          document.addEventListener('DOMContentLoaded', registerSw, { once: true });
        } else {
          registerSw();
        }
      })();
    </script>
  </body>
</html>
