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;
}
/* -------------------------------------------------------------------------- */