diff --git a/client.js b/client.js index e100b89..365a2fb 100644 --- a/client.js +++ b/client.js @@ -1404,7 +1404,8 @@ // -------------------------------------------------------------------------- // -------------------------------------------------------------------------- // -------------------------------------------------------------------------- - // 8. FULL YOUTUBE SEARCH & VOICE MODAL ENGINE (v1.3.0) + // -------------------------------------------------------------------------- + // 8. FULL YOUTUBE SEARCH & VOICE MODAL ENGINE (v1.3.1) // -------------------------------------------------------------------------- var activeVoiceRec = null; var isVoiceListening = false; @@ -1547,8 +1548,10 @@ if (inp) { inp.value = initialQuery || ''; if (inp.value) clearBtn.style.display = 'inline-flex'; - inp.focus(); - inp.select(); + setTimeout(function () { + inp.focus(); + inp.select(); + }, 50); } announce('Arama penceresi açıldı. Arayacağınız konuyu yazın veya sesle arayın.', true); @@ -1653,52 +1656,52 @@ } function transformToYouTubeSearchBar(searchInp, searchContainer) { - if (searchInp.hasAttribute('data-yaktube-yt-styled')) return; - searchInp.setAttribute('data-yaktube-yt-styled', 'true'); - searchInp.setAttribute('aria-label', getInstanceName() + ' Video Arama (Açmak için tıklayın)'); - searchInp.setAttribute('title', 'Arama Penceresini Aç'); + if (searchContainer.hasAttribute('data-yaktube-trigger-styled')) return; + searchContainer.setAttribute('data-yaktube-trigger-styled', 'true'); + + // Hide original native inputs to prevent typing outside modal and avoid clutter + searchInp.style.display = 'none'; + searchInp.setAttribute('tabindex', '-1'); + searchInp.setAttribute('aria-hidden', 'true'); + + var nativeInputs = searchContainer.querySelectorAll('input, button'); + nativeInputs.forEach(function (el) { + if (!el.classList.contains('yaktube-search-trigger-pill') && !el.classList.contains('yaktube-voice-search-btn')) { + el.style.display = 'none'; + el.setAttribute('tabindex', '-1'); + el.setAttribute('aria-hidden', 'true'); + } + }); // 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); + searchContainer.appendChild(outerWrap); } - // 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); + // 2. Create Single Sleek Pill Trigger + var triggerPill = outerWrap.querySelector('.yaktube-search-trigger-pill'); + if (!triggerPill) { + triggerPill = document.createElement('button'); + triggerPill.type = 'button'; + triggerPill.className = 'yaktube-search-trigger-pill'; + triggerPill.setAttribute('aria-label', getInstanceName() + " ve YouTube'da Arama Yap (Açmak için tıklayın)"); + triggerPill.setAttribute('title', 'Arama Penceresini Aç (/)'); - // Move Input Inside Pill - pillWrapper.appendChild(searchInp); + triggerPill.innerHTML = + '🔍' + + '' + + getInstanceName() + + " ve YouTube'da arayın..." + + '/'; - // Add Search Submit Button (🔍) - var submitBtn = document.createElement('button'); - submitBtn.type = 'button'; - submitBtn.className = 'yaktube-search-submit-btn'; - submitBtn.setAttribute('aria-label', 'Arama Penceresini Aç'); - submitBtn.setAttribute('title', 'Ara'); - submitBtn.innerHTML = '🔍'; - pillWrapper.appendChild(submitBtn); + outerWrap.appendChild(triggerPill); - // Click on search pill opens full YouTube search modal! - searchInp.addEventListener('click', function (e) { + triggerPill.addEventListener('click', function (e) { e.preventDefault(); - openFullSearchModal(searchInp.value, false); - }); - - searchInp.addEventListener('focus', function (e) { - e.preventDefault(); - openFullSearchModal(searchInp.value, false); - }); - - submitBtn.addEventListener('click', function (e) { - e.preventDefault(); - openFullSearchModal(searchInp.value, false); + openFullSearchModal('', false); }); } @@ -1733,19 +1736,6 @@ } }); - 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) { var thumbLink = card.querySelector('a.thumbnail-link, .video-thumbnail a, a.thumbnail'); diff --git a/package.json b/package.json index 687cd9c..84e683e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "peertube-plugin-yaktube-ondemand", - "version": "1.3.0", + "version": "1.3.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 b62c248..3e8b088 100644 --- a/style.css +++ b/style.css @@ -411,10 +411,11 @@ my-header .action-buttons { /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ -/* YOUTUBE FULL SEARCH & VOICE MODAL (v1.3.0) */ +/* -------------------------------------------------------------------------- */ +/* YOUTUBE FULL SEARCH & VOICE MODAL (v1.3.1 - Sleek Trigger Pill) */ /* -------------------------------------------------------------------------- */ -/* Header Search Bar Trigger (Pill Shape) */ +/* Header Search Trigger Container */ my-search-typeahead, .search-container, .header-search { @@ -422,7 +423,7 @@ my-search-typeahead, align-items: center !important; position: relative !important; width: 100% !important; - max-width: 580px !important; + max-width: 540px !important; margin: 0 auto !important; } @@ -432,50 +433,56 @@ my-search-typeahead, width: 100% !important; } -.yaktube-search-pill-wrapper { +/* Clickable Pill Button in Header */ +.yaktube-search-trigger-pill { display: flex !important; align-items: center !important; background: #121212 !important; border: 1px solid #303030 !important; border-radius: 40px !important; - padding: 0 0 0 14px !important; + padding: 8px 18px !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; - cursor: text !important; -} - -.yaktube-search-pill-wrapper:hover { - border-color: #555 !important; -} - -.yaktube-search-pill-wrapper input { - background: transparent !important; - border: none !important; - color: #f1f1f1 !important; - font-size: 15px !important; - padding: 8px 6px !important; - width: 100% !important; - outline: none !important; - box-shadow: none !important; -} - -.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; + color: #888 !important; + font-size: 15px !important; + user-select: none !important; + gap: 10px !important; } +.yaktube-search-trigger-pill:hover, +.yaktube-search-trigger-pill:focus { + border-color: #ff8f37 !important; + background: #18181c !important; + color: #f1f1f1 !important; + box-shadow: 0 0 12px rgba(255, 143, 55, 0.25) !important; + outline: none !important; +} + +.yaktube-search-trigger-icon { + font-size: 15px !important; + color: #ff8f37 !important; +} + +.yaktube-search-trigger-text { + flex: 1 !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + text-align: left !important; +} + +.yaktube-search-trigger-shortcut { + font-size: 11px !important; + background: #252530 !important; + color: #aaa !important; + padding: 2px 6px !important; + border-radius: 6px !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; +} + +/* Circular Voice Button in Header */ .yaktube-voice-search-btn { background: #1f1f1f !important; color: #f1f1f1 !important; @@ -494,11 +501,13 @@ my-search-typeahead, box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } -.yaktube-voice-search-btn:hover { +.yaktube-voice-search-btn:hover, +.yaktube-voice-search-btn:focus { background: #2a2a2a !important; border-color: #ff8f37 !important; color: #ff8f37 !important; transform: scale(1.06) !important; + outline: none !important; } /* -------------------------------------------------------------------------- */