From 51979ed8eb822915b1ed6591c5f556a18b0fc3ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enes=20Yak=C4=B1=C5=9Ft=C4=B1r?= Date: Sat, 29 Aug 2026 22:37:27 +0300 Subject: [PATCH] fix(ux): accurate mobile search toggle, back button hide & desktop pill styling v1.2.1 --- client.js | 80 +++++++++++++++++++++++++++++++++++++++++++-- package.json | 2 +- style.css | 92 +++++++++++++++++++++++++++++++++++----------------- 3 files changed, 141 insertions(+), 33 deletions(-) diff --git a/client.js b/client.js index 3b687c7..36429cb 100644 --- a/client.js +++ b/client.js @@ -1399,7 +1399,8 @@ // -------------------------------------------------------------------------- // -------------------------------------------------------------------------- - // 8. YOUTUBE-IDENTICAL SEARCH BAR & VOICE MODAL ENGINE (v1.2.0) + // -------------------------------------------------------------------------- + // 8. YOUTUBE-IDENTICAL SEARCH BAR & VOICE MODAL ENGINE (v1.2.1) // -------------------------------------------------------------------------- var activeVoiceRecognition = null; var isVoiceListeningActive = false; @@ -1611,11 +1612,13 @@ backBtn.type = 'button'; backBtn.className = 'yaktube-search-back-btn'; backBtn.setAttribute('aria-label', 'Aramadan Çık (Geri)'); + backBtn.setAttribute('title', 'Aramadan Çık (Geri)'); backBtn.innerHTML = '←'; searchContainer.prepend(backBtn); backBtn.addEventListener('click', function (e) { e.preventDefault(); + e.stopPropagation(); document.body.classList.remove('yaktube-mobile-search-active'); searchInp.blur(); announce('Arama kapatıldı.'); @@ -1658,7 +1661,9 @@ searchInp.addEventListener('input', updateClearState); searchInp.addEventListener('focus', function () { updateClearState(); - document.body.classList.add('yaktube-mobile-search-active'); + if (window.innerWidth <= 768) { + document.body.classList.add('yaktube-mobile-search-active'); + } }); clearBtn.addEventListener('click', function (e) { @@ -1720,7 +1725,67 @@ }); } + function injectMobileSearchTrigger() { + var headerRight = + document.querySelector('my-header .header-right') || + document.querySelector('my-header .buttons-container') || + document.querySelector('my-header .user-menu'); + if (!headerRight) return; + + var triggerBtn = headerRight.querySelector('#yaktube-mobile-search-open-btn'); + if (!triggerBtn) { + triggerBtn = document.createElement('button'); + triggerBtn.id = 'yaktube-mobile-search-open-btn'; + triggerBtn.type = 'button'; + triggerBtn.className = 'yaktube-mobile-search-trigger'; + triggerBtn.setAttribute('aria-label', 'Aramayı Aç'); + triggerBtn.setAttribute('title', 'Aramayı Aç'); + triggerBtn.innerHTML = '🔍'; + triggerBtn.style.cssText = + 'background: transparent; color: #fff; border: none; font-size: 18px; width: 38px; height: 38px; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; margin-right: 4px;'; + headerRight.prepend(triggerBtn); + + triggerBtn.addEventListener('click', function (e) { + e.preventDefault(); + e.stopPropagation(); + document.body.classList.add('yaktube-mobile-search-active'); + var searchInp = document.querySelector( + 'my-search-typeahead input, my-header input[type="search"], input[type="search"]' + ); + if (searchInp) { + searchInp.focus(); + } + announce('Arama ekranı açıldı.'); + }); + } + + var mobileVoiceTrigger = headerRight.querySelector('#yaktube-mobile-voice-open-btn'); + if (!mobileVoiceTrigger) { + mobileVoiceTrigger = document.createElement('button'); + mobileVoiceTrigger.id = 'yaktube-mobile-voice-open-btn'; + mobileVoiceTrigger.type = 'button'; + mobileVoiceTrigger.className = 'yaktube-mobile-search-trigger'; + mobileVoiceTrigger.setAttribute('aria-label', 'Sesli Arama'); + mobileVoiceTrigger.setAttribute('title', 'Sesli Arama'); + mobileVoiceTrigger.innerHTML = '🎙️'; + mobileVoiceTrigger.style.cssText = + 'background: transparent; color: #fff; border: none; font-size: 18px; width: 38px; height: 38px; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; margin-right: 4px;'; + headerRight.insertBefore(mobileVoiceTrigger, triggerBtn.nextSibling); + + mobileVoiceTrigger.addEventListener('click', function (e) { + e.preventDefault(); + e.stopPropagation(); + var searchInp = document.querySelector( + 'my-search-typeahead input, my-header input[type="search"], input[type="search"]' + ); + openYouTubeVoiceModal(searchInp); + }); + } + } + function injectSearchEnhancements() { + injectMobileSearchTrigger(); + var searchContainers = document.querySelectorAll( 'my-search-typeahead, .search-container, .header-search, my-header .search' ); @@ -1758,17 +1823,26 @@ ); openYouTubeVoiceModal(searchInp); } - // Escape: Close Voice Modal if open + // Escape: Close Voice Modal or exit mobile search else if (e.key === 'Escape' || e.keyCode === 27) { var modal = document.getElementById('yaktube-voice-modal'); if (modal && modal.style.display === 'flex') { e.preventDefault(); closeYouTubeVoiceModal(); + } else if (document.body.classList.contains('yaktube-mobile-search-active')) { + e.preventDefault(); + document.body.classList.remove('yaktube-mobile-search-active'); + var searchInp = document.querySelector( + 'my-search-typeahead input, my-header input[type="search"], input[type="search"]' + ); + if (searchInp) searchInp.blur(); + announce('Arama kapatıldı.'); } } // / : Focus Search Input else if (e.key === '/' && !isInputActive && !e.ctrlKey && !e.metaKey) { e.preventDefault(); + document.body.classList.add('yaktube-mobile-search-active'); var searchInp = document.querySelector( 'my-search-typeahead input, my-header input[type="search"], input[type="search"]' ); diff --git a/package.json b/package.json index 5236234..7d466b4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "peertube-plugin-yaktube-ondemand", - "version": "1.2.0", + "version": "1.2.1", "description": "Accessible On-Demand YouTube Import, Live Streams, Smart Recommendations and A11y Engine for PeerTube", "main": "main.js", "clientScripts": [ diff --git a/style.css b/style.css index 2f319c7..093bb50 100644 --- a/style.css +++ b/style.css @@ -407,16 +407,30 @@ my-header .action-buttons { } /* -------------------------------------------------------------------------- */ -/* YOUTUBE-STYLE SEARCH BAR & VOICE SEARCH MODAL (v1.2.0) */ +/* -------------------------------------------------------------------------- */ +/* YOUTUBE-STYLE SEARCH BAR & VOICE SEARCH MODAL (v1.2.1) */ /* -------------------------------------------------------------------------- */ -/* Header Search Container Pill Styling */ -my-search-typeahead, -.search-container, -.header-search { - display: flex !important; - align-items: center !important; - position: relative !important; +/* Desktop & Common Pill Styling */ +@media (min-width: 769px) { + my-search-typeahead, + .search-container, + .header-search { + display: flex !important; + align-items: center !important; + position: relative !important; + width: 100% !important; + max-width: 580px !important; + margin: 0 auto !important; + } + + .yaktube-search-back-btn { + display: none !important; + } + + .yaktube-mobile-search-trigger { + display: none !important; + } } .yaktube-search-pill-wrapper { @@ -428,7 +442,6 @@ my-search-typeahead, padding: 2px 6px 2px 14px !important; transition: all 0.2s ease !important; width: 100% !important; - max-width: 580px !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important; } @@ -675,36 +688,57 @@ my-search-typeahead, margin-top: 10px !important; } -/* Mobile Search Overlay Mode */ +/* -------------------------------------------------------------------------- */ +/* MOBILE SEARCH OVERLAY MODE (< 768px) */ +/* -------------------------------------------------------------------------- */ @media (max-width: 768px) { - body.yaktube-mobile-search-active my-header .header-left, - body.yaktube-mobile-search-active my-header .header-right, - body.yaktube-mobile-search-active my-header .user-menu { + /* Default Mobile State: Hide Full Search Input */ + body:not(.yaktube-mobile-search-active) my-search-typeahead, + body:not(.yaktube-mobile-search-active) .search-container, + body:not(.yaktube-mobile-search-active) .header-search { display: none !important; } + + .yaktube-mobile-search-trigger { + display: inline-flex !important; + } + + /* Active Mobile Search Overlay: Full Width Bar */ + body.yaktube-mobile-search-active my-header { + padding: 0 8px !important; + position: relative !important; + } + + body.yaktube-mobile-search-active my-header .header-left, + body.yaktube-mobile-search-active my-header .header-right, + body.yaktube-mobile-search-active my-header .user-menu, + body.yaktube-mobile-search-active my-header .brand-name { + display: none !important; + } + body.yaktube-mobile-search-active my-search-typeahead, body.yaktube-mobile-search-active .search-container { width: 100% !important; max-width: 100% !important; display: flex !important; + position: static !important; + margin: 0 !important; + z-index: 1000 !important; } + .yaktube-search-back-btn { display: inline-flex !important; + background: transparent !important; + border: none !important; + color: #fff !important; + font-size: 22px !important; + width: 38px !important; + height: 38px !important; + border-radius: 50% !important; + align-items: center !important; + justify-content: center !important; + cursor: pointer !important; + margin-right: 6px !important; + flex-shrink: 0 !important; } } - -.yaktube-search-back-btn { - display: none; - background: transparent !important; - border: none !important; - color: #fff !important; - font-size: 20px !important; - width: 36px !important; - height: 36px !important; - border-radius: 50% !important; - align-items: center !important; - justify-content: center !important; - cursor: pointer !important; - margin-right: 8px !important; - flex-shrink: 0 !important; -}