Update index.html

index.html

@@ -931,9 +931,10 @@ document.addEventListener('DOMContentLoaded', function() {
         window.alert(`${message}\n\nエラー詳細: ${error.message}`);
     }
 
-  // サービスワーカー登録関数
+// サービスワーカー登録関数
 async function registerServiceWorker() {
     const statusElement = document.getElementById('sw-status');
+    const registerBtn = document.getElementById('sw-register-btn');
     
     if (!('serviceWorker' in navigator)) {
         statusElement.textContent = "このブラウザはService Workerをサポートしていません";
@@ -941,34 +942,59 @@ async function registerServiceWorker() {
     }
 
     try {
+        // チェックボックスの状態を収集
+        const checkboxStates = {
+            'sw-video': document.getElementById('sw-video').checked,
+            'sw-t-video': document.getElementById('sw-t-video').checked,
+            'sw-piano': document.getElementById('sw-piano').checked,
+            'sw-soprano': document.getElementById('sw-soprano').checked,
+            'sw-alto': document.getElementById('sw-alto').checked,
+            'sw-tenor': document.getElementById('sw-tenor').checked,
+            'sw-combined': document.getElementById('sw-combined').checked,
+            'sw-t-piano': document.getElementById('sw-t-piano').checked,
+            'sw-t-soprano': document.getElementById('sw-t-soprano').checked,
+            'sw-t-alto': document.getElementById('sw-t-alto').checked,
+            'sw-t-tenor': document.getElementById('sw-t-tenor').checked,
+            'sw-t-combined': document.getElementById('sw-t-combined').checked
+        };
+
         // チェックされたファイルを収集
         const filesToCache = [];
         
-        // 基本ファイル
-        if (document.getElementById('sw-index').checked) filesToCache.push('/index.html');
-        if (document.getElementById('sw-root').checked) filesToCache.push('/');
+        // index.htmlは常に含める
+        filesToCache.push('/index.html');
         
         // 通常のメディアファイル
-        if (document.getElementById('sw-video').checked) filesToCache.push('/v.mp4');
-        if (document.getElementById('sw-piano').checked) filesToCache.push('/p.mp3');
-        if (document.getElementById('sw-soprano').checked) filesToCache.push('/s.mp3');
-        if (document.getElementById('sw-alto').checked) filesToCache.push('/a.mp3');
-        if (document.getElementById('sw-tenor').checked) filesToCache.push('/t.mp3');
-        if (document.getElementById('sw-combined').checked) filesToCache.push('/k.mp3');
+        if (checkboxStates['sw-video']) filesToCache.push('/v.mp4');
+        if (checkboxStates['sw-piano']) filesToCache.push('/p.mp3');
+        if (checkboxStates['sw-soprano']) filesToCache.push('/s.mp3');
+        if (checkboxStates['sw-alto']) filesToCache.push('/a.mp3');
+        if (checkboxStates['sw-tenor']) filesToCache.push('/t.mp3');
+        if (checkboxStates['sw-combined']) filesToCache.push('/k.mp3');
         
         // t/ ディレクトリのメディアファイル
-        if (document.getElementById('sw-t-video').checked) filesToCache.push('/t/v.mp4');
-        if (document.getElementById('sw-t-piano').checked) filesToCache.push('/t/p.mp3');
-        if (document.getElementById('sw-t-soprano').checked) filesToCache.push('/t/s.mp3');
-        if (document.getElementById('sw-t-alto').checked) filesToCache.push('/t/a.mp3');
-        if (document.getElementById('sw-t-tenor').checked) filesToCache.push('/t/t.mp3');
-        if (document.getElementById('sw-t-combined').checked) filesToCache.push('/t/k.mp3');
-
+        if (checkboxStates['sw-t-video']) filesToCache.push('/t/v.mp4');
+        if (checkboxStates['sw-t-piano']) filesToCache.push('/t/p.mp3');
+        if (checkboxStates['sw-t-soprano']) filesToCache.push('/t/s.mp3');
+        if (checkboxStates['sw-t-alto']) filesToCache.push('/t/a.mp3');
+        if (checkboxStates['sw-t-tenor']) filesToCache.push('/t/t.mp3');
+        if (checkboxStates['sw-t-combined']) filesToCache.push('/t/k.mp3');
+
+        registerBtn.disabled = true;
         statusElement.textContent = "サービスワーカーを登録中...";
         
         // Service Workerを登録
         const registration = await navigator.serviceWorker.register('/service-worker.js');
         
+        // 進捗表示用のタイマー
+        let progress = 0;
+        const progressInterval = setInterval(() => {
+            progress += 5;
+            if (progress < 100) {
+                statusElement.textContent = `サービスワーカーを登録中... ${progress}%`;
+            }
+        }, 300);
+        
         // Service Workerがアクティブになるのを待つ
         await new Promise(resolve => {
             if (registration.active) {
@@ -985,19 +1011,118 @@ async function registerServiceWorker() {
             }
         });
 
+        clearInterval(progressInterval);
+        
         // Service Workerにキャッシュするファイルを送信
         registration.active.postMessage({
             type: 'CACHE_FILES',
-            files: filesToCache
+            files: filesToCache,
+            checkboxStates: checkboxStates
         });
 
         statusElement.textContent = "サービスワーカーが正常に登録されました";
+        registerBtn.disabled = false;
     } catch (error) {
         console.error('Service Worker登録エラー:', error);
         statusElement.textContent = `サービスワーカー登録に失敗しました: ${error.message}`;
+        registerBtn.disabled = false;
+    }
+}
+
+// チェックボックスの状態を復元
+async function restoreCheckboxStates() {
+    try {
+        const cache = await caches.open('settings-cache');
+        const response = await cache.match('checkbox-states');
+        
+        if (response) {
+            const checkboxStates = await response.json();
+            
+            for (const [id, checked] of Object.entries(checkboxStates)) {
+                const checkbox = document.getElementById(id);
+                if (checkbox) {
+                    checkbox.checked = checked;
+                }
+            }
+        }
+    } catch (error) {
+        console.error('チェックボックス状態の復元に失敗:', error);
+    }
+}
+
+// オフライン状態をチェック
+function checkOnlineStatus() {
+    const settingsSection = document.querySelector('.settings');
+    if (!navigator.onLine) {
+        settingsSection.style.display = 'none';
+    } else {
+        settingsSection.style.display = 'block';
+    }
+}
+
+// 全画面時のUI表示制御
+function setupFullscreenUI() {
+    const videoContainer = document.getElementById('video-container');
+    const controls = document.querySelector('.video-controls');
+    let hideTimeout;
+    let isMouseOverControls = false;
+
+    // マウスがコントロール上にあるかどうかを追跡
+    controls.addEventListener('mouseenter', () => {
+        isMouseOverControls = true;
+        clearTimeout(hideTimeout);
+        controls.style.opacity = '1';
+    });
+
+    controls.addEventListener('mouseleave', () => {
+        isMouseOverControls = false;
+        startHideTimeout();
+    });
+
+    function startHideTimeout() {
+        clearTimeout(hideTimeout);
+        if (isFullscreen && !isMouseOverControls) {
+            hideTimeout = setTimeout(() => {
+                controls.style.opacity = '0';
+            }, 1500);
+        }
     }
+
+    // 動画コンテナでマウス移動を検出
+    videoContainer.addEventListener('mousemove', () => {
+        if (isFullscreen) {
+            controls.style.opacity = '1';
+            startHideTimeout();
+        }
+    });
 }
 
+// DOMContentLoaded時の初期化
+document.addEventListener('DOMContentLoaded', function() {
+    // チェックボックスをデフォルトでオフに
+    document.querySelectorAll('.settings input[type="checkbox"]').forEach(checkbox => {
+        checkbox.checked = false;
+    });
+    
+    // index.htmlのチェックボックスは必須なのでオンに
+    document.getElementById('sw-index').checked = true;
+    document.getElementById('sw-index').disabled = true;
+    
+    // ルートのチェックボックスは非表示に
+    document.getElementById('sw-root').parentElement.style.display = 'none';
+    
+    // チェックボックスの状態を復元
+    restoreCheckboxStates();
+    
+    // オンライン状態をチェック
+    checkOnlineStatus();
+    window.addEventListener('online', checkOnlineStatus);
+    window.addEventListener('offline', checkOnlineStatus);
+    
+    // 全画面UI制御を設定
+    setupFullscreenUI();
+    
+   });
 // 登録ボタンにイベントリスナーを追加
 document.getElementById('sw-register-btn').addEventListener('click', registerServiceWorker);
     // 要素を取得