From f17b1a3eccf15920e71633c263ae80c3c318ecf9 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:59:18 +0300 Subject: [PATCH] feat(ui): ensure universal visibility for pill search bar, submit & voice buttons v1.2.3 --- client.js | 94 ++++++++++++++++++++++++--------------------- package.json | 2 +- style.css | 105 +++++++++++++++++++++++++-------------------------- 3 files changed, 104 insertions(+), 97 deletions(-) diff --git a/client.js b/client.js index 161d7b8..8ed6933 100644 --- a/client.js +++ b/client.js @@ -1401,7 +1401,8 @@ // -------------------------------------------------------------------------- // -------------------------------------------------------------------------- // -------------------------------------------------------------------------- - // 8. YOUTUBE-IDENTICAL SEARCH BAR & VOICE MODAL ENGINE (v1.2.2) + // -------------------------------------------------------------------------- + // 8. YOUTUBE-IDENTICAL SEARCH BAR & VOICE MODAL ENGINE (v1.2.3 - Universal) // -------------------------------------------------------------------------- var activeVoiceRecognition = null; var isVoiceListeningActive = false; @@ -1607,33 +1608,22 @@ searchInp.setAttribute('data-yaktube-yt-styled', 'true'); searchInp.setAttribute('aria-label', getInstanceName() + ' Video Arama'); - // 1. Back button for Mobile Navigation (←) - var backBtn = searchContainer.querySelector('.yaktube-search-back-btn'); - if (!backBtn) { - backBtn = document.createElement('button'); - backBtn.type = 'button'; - backBtn.className = 'yaktube-search-back-btn'; - backBtn.setAttribute('aria-label', 'Aramadan Çık'); - backBtn.setAttribute('title', 'Aramadan Çık'); - 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ı.'); - }); + // 1. Create Outer Wrapper + var outerWrap = searchContainer.querySelector('.yaktube-search-outer-wrap'); + if (!outerWrap) { + outerWrap = document.createElement('div'); + outerWrap.className = 'yaktube-search-outer-wrap'; + searchInp.parentNode.insertBefore(outerWrap, searchInp); } - // 2. Wrap input inside YouTube Pill Container - var pillWrapper = searchInp.closest('.yaktube-search-pill-wrapper'); + // 2. Create Pill Box + var pillWrapper = outerWrap.querySelector('.yaktube-search-pill-wrapper'); if (!pillWrapper) { pillWrapper = document.createElement('div'); pillWrapper.className = 'yaktube-search-pill-wrapper'; + outerWrap.appendChild(pillWrapper); - searchInp.parentNode.insertBefore(pillWrapper, searchInp); + // Move Input Inside Pill pillWrapper.appendChild(searchInp); // Add Clear Button (✕) @@ -1644,6 +1634,15 @@ clearBtn.innerHTML = '✕'; pillWrapper.appendChild(clearBtn); + // Add Search Submit Button (🔍) + var submitBtn = document.createElement('button'); + submitBtn.type = 'submit'; + submitBtn.className = 'yaktube-search-submit-btn'; + submitBtn.setAttribute('aria-label', 'Ara'); + submitBtn.setAttribute('title', 'Ara'); + submitBtn.innerHTML = '🔍'; + pillWrapper.appendChild(submitBtn); + function updateClearState() { if (searchInp.value && searchInp.value.trim().length > 0) { clearBtn.style.display = 'inline-flex'; @@ -1653,12 +1652,7 @@ } searchInp.addEventListener('input', updateClearState); - searchInp.addEventListener('focus', function () { - updateClearState(); - if (window.innerWidth <= 768) { - document.body.classList.add('yaktube-mobile-search-active'); - } - }); + searchInp.addEventListener('focus', updateClearState); clearBtn.addEventListener('click', function (e) { e.preventDefault(); @@ -1670,10 +1664,22 @@ searchInp.focus(); announce('Arama kutusu temizlendi.'); }); + + submitBtn.addEventListener('click', function (e) { + var query = (searchInp.value || '').trim(); + if (query) { + var form = searchInp.closest('form'); + if (form) { + form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })); + } else { + window.location.href = '/search/videos?search=' + encodeURIComponent(query); + } + } + }); } - // 3. Single YouTube Circular Voice Button (🎙️) Beside Search Box - var voiceBtn = searchContainer.querySelector('.yaktube-voice-search-btn'); + // 3. YouTube Circular Voice Button (🎙️) Beside the Pill Box + var voiceBtn = outerWrap.querySelector('.yaktube-voice-search-btn'); if (!voiceBtn) { voiceBtn = document.createElement('button'); voiceBtn.type = 'button'; @@ -1682,7 +1688,7 @@ voiceBtn.setAttribute('title', 'Sesle Ara (Shift+V)'); voiceBtn.innerHTML = '🎙️'; - searchContainer.appendChild(voiceBtn); + outerWrap.appendChild(voiceBtn); voiceBtn.addEventListener('click', function (e) { e.preventDefault(); @@ -1699,7 +1705,6 @@ searchInp.dispatchEvent(new Event('input', { bubbles: true })); announce('Arama metni temizlendi.'); } else { - document.body.classList.remove('yaktube-mobile-search-active'); searchInp.blur(); announce('Arama kutusundan çıkıldı.'); } @@ -1718,16 +1723,27 @@ } }); + var headerInputs = document.querySelectorAll('my-header input'); + headerInputs.forEach(function (inp) { + var parent = inp.closest('my-search-typeahead') || inp.parentElement; + if ( + parent && + (inp.type === 'search' || + inp.type === 'text' || + (inp.placeholder && inp.placeholder.toLowerCase().includes('ara'))) + ) { + transformToYouTubeSearchBar(inp, parent); + } + }); + // Clean up repetitive card titles and strange relative date buttons document.querySelectorAll('my-video-miniature, .video-miniature').forEach(function (card) { - // 1. Hide duplicate thumbnail links from screen reader so title link is read ONCE var thumbLink = card.querySelector('a.thumbnail-link, .video-thumbnail a, a.thumbnail'); if (thumbLink && !thumbLink.hasAttribute('aria-hidden')) { thumbLink.setAttribute('aria-hidden', 'true'); thumbLink.setAttribute('tabindex', '-1'); } - // 2. Clean up date buttons (e.g. "Bu tarih birimini ... olarak değiştir") var dateBtn = card.querySelector('.video-date-line button, .video-date button, button[title*="tarih"]'); if (dateBtn && !dateBtn.hasAttribute('data-cleaned')) { dateBtn.setAttribute('data-cleaned', 'true'); @@ -1750,20 +1766,12 @@ ); openYouTubeVoiceModal(searchInp); } - // Escape: Close Voice Modal or exit mobile search + // Escape: Close Voice Modal 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 diff --git a/package.json b/package.json index cde74e4..8ef292d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "peertube-plugin-yaktube-ondemand", - "version": "1.2.2", + "version": "1.2.3", "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 76a3007..6b0de97 100644 --- a/style.css +++ b/style.css @@ -409,10 +409,10 @@ my-header .action-buttons { /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ -/* YOUTUBE-STYLE SEARCH BAR & VOICE SEARCH MODAL (v1.2.2 - A11y Optimized) */ +/* -------------------------------------------------------------------------- */ +/* YOUTUBE-STYLE SEARCH BAR & VOICE SEARCH (v1.2.3 - Universal & Visible) */ /* -------------------------------------------------------------------------- */ -/* Header Search Container Pill Styling */ my-search-typeahead, .search-container, .header-search { @@ -422,6 +422,15 @@ my-search-typeahead, width: 100% !important; max-width: 580px !important; margin: 0 auto !important; + visibility: visible !important; + opacity: 1 !important; +} + +.yaktube-search-outer-wrap { + display: flex !important; + align-items: center !important; + width: 100% !important; + position: relative !important; } .yaktube-search-pill-wrapper { @@ -430,10 +439,11 @@ my-search-typeahead, background: #121212 !important; border: 1px solid #303030 !important; border-radius: 40px !important; - padding: 2px 10px 2px 14px !important; + padding: 0 0 0 14px !important; transition: all 0.2s ease !important; width: 100% !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important; + overflow: hidden !important; } .yaktube-search-pill-wrapper:focus-within { @@ -460,18 +470,18 @@ my-search-typeahead, font-size: 14px !important; } -/* Clear Button Inside Pill */ +/* Clear Button Inside Pill (✕) */ .yaktube-clear-search-btn { background: rgba(255, 255, 255, 0.12) !important; color: #aaa !important; border: none !important; border-radius: 50% !important; - width: 24px !important; - height: 24px !important; + width: 22px !important; + height: 22px !important; display: none; align-items: center !important; justify-content: center !important; - font-size: 12px !important; + font-size: 11px !important; font-weight: 700 !important; cursor: pointer !important; margin: 0 6px !important; @@ -484,7 +494,28 @@ my-search-typeahead, color: #fff !important; } -/* YouTube Circular Voice Button Beside Search Box */ +/* Search Submit Button on Right of Pill (🔍) */ +.yaktube-search-submit-btn { + background: #222222 !important; + color: #f1f1f1 !important; + border: none !important; + border-left: 1px solid #303030 !important; + padding: 8px 18px !important; + cursor: pointer !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + font-size: 14px !important; + transition: all 0.2s ease !important; + flex-shrink: 0 !important; +} + +.yaktube-search-submit-btn:hover { + background: #272727 !important; + color: #ff8f37 !important; +} + +/* YouTube Circular Voice Button (🎙️) */ .yaktube-voice-search-btn { background: #1f1f1f !important; color: #f1f1f1 !important; @@ -510,16 +541,6 @@ my-search-typeahead, transform: scale(1.06) !important; } -/* Hide back button on desktop */ -@media (min-width: 769px) { - .yaktube-search-back-btn { - display: none !important; - } - .yaktube-mobile-search-trigger { - display: none !important; - } -} - /* YouTube-Style Voice Search Modal Overlay */ .yaktube-voice-modal-overlay { position: fixed !important; @@ -667,43 +688,21 @@ my-search-typeahead, margin-top: 10px !important; } -/* Mobile Search Overlay (< 768px) */ +/* Mobile Responsiveness */ @media (max-width: 768px) { - body:not(.yaktube-mobile-search-active) my-search-typeahead, - body:not(.yaktube-mobile-search-active) .search-container { - display: none !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; + my-search-typeahead, + .search-container, + .header-search { max-width: 100% !important; - display: flex !important; - position: static !important; - margin: 0 !important; - z-index: 1000 !important; + padding: 0 4px !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-submit-btn { + padding: 8px 12px !important; + } + .yaktube-voice-search-btn { + width: 36px !important; + height: 36px !important; + font-size: 16px !important; + margin-left: 4px !important; } }