diff --git a/client.js b/client.js index aa382fb..3b687c7 100644 --- a/client.js +++ b/client.js @@ -1398,49 +1398,268 @@ } // -------------------------------------------------------------------------- - // 8. VOICE SEARCH, CLEAR BUTTON & ACCESSIBLE SEARCH UX (YouTube Style) // -------------------------------------------------------------------------- - var activeRecognition = null; - var isVoiceListening = false; + // 8. YOUTUBE-IDENTICAL SEARCH BAR & VOICE MODAL ENGINE (v1.2.0) + // -------------------------------------------------------------------------- + var activeVoiceRecognition = null; + var isVoiceListeningActive = false; + var modalTargetInput = null; - function initVoiceSearch(searchInp, searchWrap) { - var SpeechRec = window.SpeechRecognition || window.webkitSpeechRecognition; - var voiceBtn = searchWrap.querySelector('#yaktube-voice-search-btn'); + function createYouTubeVoiceModal() { + var existingModal = document.getElementById('yaktube-voice-modal'); + if (existingModal) return existingModal; - if (!voiceBtn) { - voiceBtn = document.createElement('button'); - voiceBtn.id = 'yaktube-voice-search-btn'; - voiceBtn.type = 'button'; - voiceBtn.className = 'yaktube-voice-search-btn'; - voiceBtn.setAttribute('aria-label', 'Sesle Ara (Shift+V)'); - voiceBtn.setAttribute('title', 'Sesle Ara (Shift+V)'); - voiceBtn.innerHTML = '🎙️'; - voiceBtn.style.cssText = - 'background: rgba(255, 143, 55, 0.12); color: #ff8f37; border: 1px solid rgba(255, 143, 55, 0.35); border-radius: 50%; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; margin-left: 6px; transition: all 0.2s ease; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.2);'; + var modal = document.createElement('div'); + modal.id = 'yaktube-voice-modal'; + modal.className = 'yaktube-voice-modal-overlay'; + modal.setAttribute('role', 'dialog'); + modal.setAttribute('aria-modal', 'true'); + modal.setAttribute('aria-labelledby', 'yaktube-voice-modal-title'); + modal.style.display = 'none'; - searchWrap.appendChild(voiceBtn); + modal.innerHTML = + '