YakNet/peertube-plugin-yaktube-ondemand
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): streamline search header into unified trigger pill and voice button v1.3.1

Browse Source
This commit is contained in:
Enes Yakıştır
2026-08-29 23:04:50 +03:00
parent 7572ddb565
commit efa61318f6
3 changed files with 87 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client.js
+40 -50
View File
@@ -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 =
'<span class="yaktube-search-trigger-icon">🔍</span>' +
'<span class="yaktube-search-trigger-text">' +
getInstanceName() +
" ve YouTube'da arayın...</span>" +
'<span class="yaktube-search-trigger-shortcut">/</span>';
// 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');
package.json
+1 -1
View File
@@ -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": [
style.css
+46 -37
View File
@@ -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;
}
/* -------------------------------------------------------------------------- */