Update p1/index.html

p1/index.html

@@ -116,13 +116,13 @@ h1 {
     display: flex;
     flex-direction: column;
     width: 100%;
-    max-width: 1200px;
-    background-color: rgba(17, 34, 64, 0.17);
+    max-width: 1000px;
+    background-color: rgba(17, 34, 64, 0.3);
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 0 20px rgba(100, 255, 218, 0.2);
-    backdrop-filter: blur(1.6px);
-    border: 1.5px solid rgba(100, 255, 218, 0.2);
+    backdrop-filter: blur(1.7px);
+    border: 1px solid rgba(100, 255, 218, 0.1);
 }
 
 .viewing-box {
@@ -225,7 +225,7 @@ h1 {
     right: 5px;
     display: flex;
     gap: 5px;
-    z-index: 200;
+    z-index: 20;
     background: rgba(0, 0, 0, 0.5);
     padding: 5px;
     border-radius: 5px;
@@ -545,19 +545,17 @@ select {
 
 /* 全画面時の操作パネル */
 .viewing-box:-webkit-full-screen .video-controls,
-.viewing-box:fullscreen .video-controls,
-.viewing-box:-moz-full-screen .video-controls {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+.viewing-box:fullscreen .video-controls {
+    position: relative;
+    bottom: auto;
+    left: auto;
+    right: auto;
     width: 100%;
     border-radius: 0;
     background-color: rgba(0, 0, 0, 0.9);
     padding: 15px 20px;
     z-index: 1000;
     flex-shrink: 0;
-    pointer-events: auto;
 }
 
 /* 全画面時のパネル内要素 */
@@ -1154,6 +1152,10 @@ canvas {
     height: 28px;
     padding: 0 4px;
     font-size: 11px;
+    position: relative;
+    z-index: 100000;
+    transform: translateZ(0);
+    isolation: isolate;
 }
 
 .pane-controls button svg {
@@ -1469,7 +1471,7 @@ canvas {
     padding: 8px 16px;
     border-radius: 5px;
     cursor: pointer;
-    z-index: 1000001;
+    z-index: 10001;
     font-size: 12px;
     font-weight: bold;
     transition: all 0.3s;
@@ -1820,7 +1822,7 @@ canvas {
     <h1 id="title-name">文化発表会動画プレイヤー</h1>
 
     <div class="details-container">
-        <details id="usageDetails" style="max-width:1000px;">
+        <details id="usageDetails">
             <summary style="font-size: 25px">使い方</summary>
             <h3>プレイヤーの使い方</h3>
             <p>「▶」や「⏸」ボタンで再生や一時停止ができます。「↺」で再生開始秒数から再生できます。音量スライダーで音量を変更できます。スライダーで再生速度も変更できます。「⇲」で、動画を小さく表示し、他のタブに移動しながら見れるようにします。「⛶」で動画を全画面で表示できます。</p>
@@ -1862,6 +1864,7 @@ canvas {
                 <button id="sw-register-btn">Service Worker を登録</button>
                 <button id="sw-delete-btn" disabled>Service Worker とデータを削除</button>
                 <div id="sw-status"></div>
+                </div>
             </div>
         </details><br><br>
         <div class="mode-tabs-container">
@@ -2009,7 +2012,6 @@ canvas {
                 audio: 'f/a.mp3',
                 mp4: ['f/a.mp4'],
                 vrma: ['idle.vrma'],
-                startTime: 105,
                 timeMarkers: [{
                         time: 0,
                         label: '0'
@@ -3732,144 +3734,90 @@ function restoreModeState(mode) {
             }
         }
 
-function switchMode(newMode) {
-    if (newMode === currentMode) return;
-    saveCurrentModeState();
-    currentMode = newMode;
-    AUDIO_SRC = MODE_DEFINITIONS[currentMode].audio;
-    VIDEO_SOURCES = [...MODE_DEFINITIONS[currentMode].mp4];
-    VRMA_ANIMATIONS = [...MODE_DEFINITIONS[currentMode].vrma];
-    
-    document.querySelectorAll('.mode-tab').forEach(tab => {
-        tab.classList.toggle('active', tab.dataset.mode === currentMode);
-    });
-    
-    updateTimeMarkers();
-    showLoadingOverlay();
-    
-    if (bgmAudioElement) { 
-        bgmAudioElement.pause();
-        bgmAudioElement.src = ''; 
-    }
-    
-    const hasSaved = restoreModeState(currentMode);
-    if (!hasSaved) {
-        const modeDef = MODE_DEFINITIONS[currentMode];
-        const defStartTime = modeDef.startTime !== undefined ? modeDef.startTime : 0;
-        const defEndTime = modeDef.endTime !== undefined && modeDef.endTime !== null ? modeDef.endTime : 0;
-        
-        globalTimeline.startTime = defStartTime;
-        globalTimeline.endTime = defEndTime;
-        globalTimeline.currentTime = defStartTime;
-        globalTimeline.loopEnabled = false;
-        globalTimeline.loopInterval = 0;
-        globalTimeline.isPlaying = false;
-        globalTimeline.hasEnded = false;
-        document.getElementById('start-time').value = 0;
-        document.getElementById('end-time').value = 0;
-        document.getElementById('loop').checked = false;
-        document.getElementById('loop-interval').value = 0;
-    }
-    
-    if (window.markerManager) {
-        if (hasSaved && modeStateStore[currentMode]?.timeline) {
-            const savedTimeline = modeStateStore[currentMode].timeline;
-            if (savedTimeline.startTime > 0) window.markerManager.setStartMarker(savedTimeline.startTime);
-            else window.markerManager.setStartMarker(0);
-            if (savedTimeline.endTime > 0 && savedTimeline.endTime < globalTimeline.duration) window.markerManager.setEndMarker(savedTimeline.endTime);
-            else window.markerManager.setEndMarker(globalTimeline.duration);
-        } else {
-            window.markerManager.setStartMarker(0);
-            window.markerManager.setEndMarker(globalTimeline.duration);
-        }
-    }
-    
-    if (hasSaved && modeStateStore[currentMode].panes) {
-        const savedPanes = modeStateStore[currentMode].panes;
-        const paneMap = new Map();
-        // 既存のパネルをクリーンアップ
-        panes.forEach(p => p.cleanup());
-        panes = [];
-        savedPanes.forEach(pData => {
-            const container = document.createElement('div');
-            container.className = 'split-pane';
-            const pane = new Pane(container, pData.id, pData.type);
-            pane.videoSrc = pData.videoSrc;
-            pane.vrmSrc = pData.vrmSrc;
-            pane.vrmaSrc = pData.vrmaSrc;
-            pane.volume = pData.volume;
-            pane.isFlipped = pData.isFlipped;
-            pane.isMotionFlipped = pData.isMotionFlipped;
-            pane.modelBaseScaleX = pData.modelBaseScaleX;
-            pane.updateContent();
-            pane.applyFlipStates();
-            pane.setVolume(pane.volume);
-            panes.push(pane);
-            paneMap.set(pane.id, pane);
-        });
-        if (savedPanes[0]?.splitInfo) window.splitTree.deserialize(savedPanes[0].splitInfo, paneMap);
-        if (!window.splitTree.root && panes.length > 0) window.splitTree.setRootPane(panes[0]);
-    } else {
-        // 既存のパネルをクリーンアップ
-        panes.forEach(p => p.cleanup());
-        panes = [];
-        const splitContainer = document.getElementById('split-container');
-        if (window.splitTree) {
-            // 既存の splitTree をクリア
-            splitContainer.innerHTML = '';
+        function switchMode(newMode) {
+            if (newMode === currentMode) return;
+            saveCurrentModeState();
+            currentMode = newMode;
+            AUDIO_SRC = MODE_DEFINITIONS[currentMode].audio;
+            VIDEO_SOURCES = [...MODE_DEFINITIONS[currentMode].mp4];
+            VRMA_ANIMATIONS = [...MODE_DEFINITIONS[currentMode].vrma];
+            document.querySelectorAll('.mode-tab').forEach(tab => {
+                tab.classList.toggle('active', tab.dataset.mode === currentMode);
+            });
+            updateTimeMarkers();
+            showLoadingOverlay();
+            if (bgmAudioElement) { bgmAudioElement.pause();
+                bgmAudioElement.src = ''; }
+            const hasSaved = restoreModeState(currentMode);
+            if (!hasSaved) {
+                globalTimeline.startTime = 0;
+                globalTimeline.endTime = 0;
+                globalTimeline.currentTime = 0;
+                globalTimeline.loopEnabled = false;
+                globalTimeline.loopInterval = 0;
+                globalTimeline.isPlaying = false;
+                globalTimeline.hasEnded = false;
+                document.getElementById('start-time').value = 0;
+                document.getElementById('end-time').value = 0;
+                document.getElementById('loop').checked = false;
+                document.getElementById('loop-interval').value = 0;
+            }
+            if (window.markerManager) {
+                if (hasSaved && modeStateStore[currentMode]?.timeline) {
+                    const savedTimeline = modeStateStore[currentMode].timeline;
+                    if (savedTimeline.startTime > 0) window.markerManager.setStartMarker(savedTimeline.startTime);
+                    else window.markerManager.setStartMarker(0);
+                    if (savedTimeline.endTime > 0 && savedTimeline.endTime < globalTimeline.duration) window.markerManager.setEndMarker(savedTimeline.endTime);
+                    else window.markerManager.setEndMarker(globalTimeline.duration);
+                } else {
+                    window.markerManager.setStartMarker(0);
+                    window.markerManager.setEndMarker(globalTimeline.duration);
+                }
+            }
+            if (hasSaved && modeStateStore[currentMode].panes) {
+                const savedPanes = modeStateStore[currentMode].panes;
+                const paneMap = new Map();
+                panes.forEach(p => p.cleanup());
+                panes = [];
+                savedPanes.forEach(pData => {
+                    const container = document.createElement('div');
+                    container.className = 'split-pane';
+                    const pane = new Pane(container, pData.id, pData.type);
+                    pane.videoSrc = pData.videoSrc;
+                    pane.vrmSrc = pData.vrmSrc;
+                    pane.vrmaSrc = pData.vrmaSrc;
+                    pane.volume = pData.volume;
+                    pane.isFlipped = pData.isFlipped;
+                    pane.isMotionFlipped = pData.isMotionFlipped;
+                    pane.modelBaseScaleX = pData.modelBaseScaleX;
+                    pane.updateContent();
+                    pane.applyFlipStates();
+                    pane.setVolume(pane.volume);
+                    panes.push(pane);
+                    paneMap.set(pane.id, pane);
+                });
+                window.splitTree.deserialize(savedPanes[0].splitInfo, paneMap);
+                if (!window.splitTree.root && panes.length > 0) window.splitTree.setRootPane(panes[0]);
+            } else {
+                panes.forEach(p => p.cleanup());
+                panes = [];
+                const splitContainer = document.getElementById('split-container');
+                window.splitTree = new SplitTreeManager(splitContainer);
+                const defaultPaneContainer = document.createElement('div');
+                defaultPaneContainer.className = 'split-pane';
+                const pane = new Pane(defaultPaneContainer, 'pane-main', 'video');
+                pane.videoSrc = VIDEO_SOURCES[0] || 'm.mp4';
+                pane.vrmaSrc = VRMA_ANIMATIONS[0] || 'idle.vrma';
+                pane.updateContent();
+                panes.push(pane);
+                window.splitTree.setRootPane(pane);
+            }
+            panes.forEach(p => p.setGlobalVolumeFactor(globalVolumeFactor));
+            loadBGMAudio();
+            window.seekMedia(globalTimeline.startTime);
+            updateProgressBar();
+            updateTimeDisplay();
         }
-        window.splitTree = new SplitTreeManager(splitContainer);
-        const defaultPaneContainer = document.createElement('div');
-        defaultPaneContainer.className = 'split-pane';
-        const pane = new Pane(defaultPaneContainer, 'pane-main', 'video');
-        pane.videoSrc = VIDEO_SOURCES[0] || 'm.mp4';
-        pane.vrmaSrc = VRMA_ANIMATIONS[0] || 'idle.vrma';
-        pane.updateContent();
-        panes.push(pane);
-        window.splitTree.setRootPane(pane);
-    }
-    
-    panes.forEach(p => p.setGlobalVolumeFactor(globalVolumeFactor));
-    
-    // 重要: コントロールを再有効化
-    setTimeout(() => {
-        enableAllControls();
-    }, 100);
-    
-    loadBGMAudio();
-    window.seekMedia(globalTimeline.startTime);
-    updateProgressBar();
-    updateTimeDisplay();
-}
-function enableAllControls() {
-    const controlIds = [
-        'play-pause-btn', 'reset-btn', 'volume-btn', 'volume-slider', 
-        'fullscreen-btn', 'start-time', 'end-time', 'reset-end-time', 
-        'loop', 'loop-interval', 'global-volume', 'set-start-time', 
-        'set-end-time', 'playback-speed', 'apply-time-btn', 'pip-btn', 
-        'speed-btn'
-    ];
-    
-    controlIds.forEach(id => {
-        const el = document.getElementById(id);
-        if (el) el.disabled = false;
-    });
-    
-    // ★ すべてのパネル内のセレクトボックスとボタンを有効化
-    panes.forEach(pane => {
-        const container = pane.container;
-        if (!container) return;
-        
-        const selects = container.querySelectorAll('select, button, input');
-        selects.forEach(el => {
-            if (el.disabled !== undefined) el.disabled = false;
-        });
-        
-        // 特にタイプセレクトを明示的に有効化
-        const typeSelect = container.querySelector('.pane-type-select');
-        if (typeSelect) typeSelect.disabled = false;
-    });
-}
 
         // ===== ローディングオーバーレイ =====
         function showLoadingOverlay() {
@@ -3886,12 +3834,10 @@ function enableAllControls() {
                 isLoadingComplete = true;
                 overlay.style.transition = 'opacity 1s ease-out';
                 overlay.style.opacity = '0';
-                setTimeout(() => { 
-                    overlay.style.display = 'none';
-                    enableAllControls();  // ローディング完了時にコントロールを有効化
-                }, 1000);
+                setTimeout(() => { overlay.style.display = 'none'; }, 1000);
             }
         }
+
         function loadBGMAudio() {
             if (bgmAudioElement) { bgmAudioElement.pause();
                 bgmAudioElement.src = '';
@@ -3932,21 +3878,15 @@ function enableAllControls() {
                             window.markerManager.setEndMarker(globalTimeline.endTime);
                         }
                     } else {
-                        // MODE_DEFINITIONSからデフォルト値を取得
-                        const modeDef = MODE_DEFINITIONS[currentMode];
-                        const defStartTime = modeDef.startTime !== undefined ? modeDef.startTime : 0;
-                        const defEndTime = (modeDef.endTime !== undefined && modeDef.endTime !== null) ? modeDef.endTime : globalTimeline.duration;
-                        
-                        globalTimeline.startTime = defStartTime;
-                        globalTimeline.endTime = defEndTime;
-                        
+                        globalTimeline.endTime = globalTimeline.duration;
+                        globalTimeline.startTime = 0;
                         if (!isNaN(globalTimeline.duration) && isFinite(globalTimeline.duration)) {
-                            document.getElementById('end-time').value = globalTimeline.endTime;
-                            document.getElementById('start-time').value = globalTimeline.startTime;
+                            document.getElementById('end-time').value = globalTimeline.duration;
+                            document.getElementById('start-time').value = 0;
                         }
                         if (window.markerManager) {
-                            window.markerManager.setStartMarker(globalTimeline.startTime);
-                            window.markerManager.setEndMarker(globalTimeline.endTime);
+                            window.markerManager.setStartMarker(0);
+                            window.markerManager.setEndMarker(globalTimeline.duration);
                         }
                     }
                     updateTimeDisplay();
@@ -4175,7 +4115,7 @@ function applyTimeSettings() {
             initAutoHideControls();
             document.getElementById('speed-btn').addEventListener('click', createSpeedPopup);
             setTimeout(() => {
-                enableAllControls();
+                document.querySelectorAll('#play-pause-btn, #reset-btn, #volume-btn, #volume-slider, #fullscreen-btn, #start-time, #end-time, #reset-end-time, #loop, #loop-interval, #global-volume, #set-start-time, #set-end-time, #playback-speed, #apply-time-btn, #pip-btn, #speed-btn').forEach(el => { if (el) el.disabled = false; });
             }, 1000);
 
             document.querySelectorAll('.mode-tab').forEach(tab => {
@@ -4361,6 +4301,7 @@ function applyTimeSettings() {
             volumeSlider.addEventListener('input', updateVolumeIcon);
             window.addEventListener('beforeunload', () => { saveGlobalState(); });
             setInterval(saveGlobalState, 5000);
+            initSelectHack();
         }
 
         window.addEventListener('load', () => {
@@ -4373,7 +4314,64 @@ function applyTimeSettings() {
             if (loadingOverlay) { loadingOverlay.style.display = 'flex';
                 loadingOverlay.style.opacity = '1'; }
         });
+function applySelectHack() {
+    document.querySelectorAll('.pane-controls select').forEach(original => {
+        if (original.hasAttribute('data-hacked')) return;
+
+        const rect = original.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) return; // 非表示の要素はスキップ
+
+        const clone = original.cloneNode(true);
+        clone.style.position = 'fixed';
+        clone.style.top = rect.top + 'px';
+        clone.style.left = rect.left + 'px';
+        clone.style.width = rect.width + 'px';
+        clone.style.height = rect.height + 'px';
+        clone.style.zIndex = '1000000';
+        clone.style.backgroundColor = '#112240';
+        clone.style.border = '1px solid #64ffda';
+        clone.style.margin = '0';
+        clone.style.padding = '0';
+        clone.style.boxSizing = 'border-box';
+        clone.style.fontSize = window.getComputedStyle(original).fontSize;
+        clone.style.fontFamily = window.getComputedStyle(original).fontFamily;
+
+        // 元のセレクトを透明化
+        original.style.opacity = '0';
+        original.style.pointerEvents = 'none';
+        original.setAttribute('data-hacked', 'true');
+
+        document.body.appendChild(clone);
+
+        // 値の同期
+        clone.addEventListener('change', () => {
+            original.value = clone.value;
+            original.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+
+        // 位置更新（スクロール・リサイズ・親要素の変更に対応）
+        const updatePos = () => {
+            const newRect = original.getBoundingClientRect();
+            clone.style.top = newRect.top + 'px';
+            clone.style.left = newRect.left + 'px';
+            clone.style.width = newRect.width + 'px';
+        };
+        window.addEventListener('scroll', updatePos, { passive: true });
+        window.addEventListener('resize', updatePos);
+        const observer = new ResizeObserver(updatePos);
+        if (original.parentElement) observer.observe(original.parentElement);
+        
+        // 全画面表示などでビューポートが変わったときにも対応
+        document.addEventListener('fullscreenchange', updatePos);
+    });
+}
 
+// 初期ロード時と動的なパネル追加に対応
+function initSelectHack() {
+    applySelectHack();
+    const observer = new MutationObserver(() => applySelectHack());
+    observer.observe(document.body, { childList: true, subtree: true });
+}
 /*
 // マーカーの状態を確認
 console.log('マーカーマネージャー:', window.markerManager);