fix(branding): lock APK download buttons strictly to official YakTube domain (v1.4.32)

.prettierignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+package-lock.json
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "printWidth": 120,
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
+}

README.md

@@ -15,7 +15,8 @@
 - **⚡ Live Web & YouTube On-Demand Search:** Seamlessly search YouTube directly within your instance search bar. If the video is already on your instance, it plays immediately; otherwise, users can import it in 1 click.
 - **🔥 Hybrid Smart Recommendations:** Intelligently discovers related content across local federated videos first, supplemented with relevant live discoveries.
 - **♿ Full Screen Reader Accessibility (A11y):**
-  - Dynamic result counters with live polite announcements (`aria-live`).
+  - Dynamic result counters with live polite and assertive announcements (`aria-live`).
+  - Auto-clearing live regions after speech lifecycle (WCAG 2.2 AAA compliant, prevents persistent DOM clutter for virtual cursors).
   - Accessible keyboard navigation modal (`?` shortcut).
   - Auto-labeled player controls, buttons, and thumbnails.
 - **💬 Dynamic Live YouTube Comments:** View original YouTube community comments under imported videos on demand.

client.js

@@ -1,4 +1,3 @@
-
 // 100% Incompatible Browser Suppression & Error Guardian
 // CRITICAL: PeerTube's Angular app (my-app ngOnInit) relies on document.getElementById('incompatible-browser')
 // to exist so it can do .className += " browser-ok" before calling this.loadUser()!
@@ -53,6 +52,13 @@ try {
     } catch (e) {}
     console.log('[YakTube] YakNet SSO, Custom Branding, A11y & On-Demand Engine Active');
 
+    // Ensure Fediverse Global Search (SepiaSearch) is default in PeertubeServerConfig
+    try {
+      if (window.PeertubeServerConfig && window.PeertubeServerConfig.search && window.PeertubeServerConfig.search.searchIndex) {
+        window.PeertubeServerConfig.search.searchIndex.isDefaultSearch = true;
+      }
+    } catch (e) {}
+
     // Dynamic Instance Name Helper
     function getInstanceName() {
       if (
@@ -69,33 +75,66 @@ try {
       return 'YakTube';
     }
 
-    // 1. Screen Reader Live Announcer
+    // 1. Screen Reader Live Announcer (W3C WCAG 2.2 AAA Compliant Auto-Clearing Engine)
-    var liveRegion = null;
+    function applySrOnlyStyles(el) {
-    function getLiveRegion() {
+      el.className = 'yaktube-sr-only';
-      if (!liveRegion || !document.body.contains(liveRegion)) {
+      el.style.position = 'absolute';
-        liveRegion = document.getElementById('yaktube-a11y-live-region');
+      el.style.width = '1px';
-        if (!liveRegion) {
+      el.style.height = '1px';
-          liveRegion = document.createElement('div');
+      el.style.padding = '0';
-          liveRegion.id = 'yaktube-a11y-live-region';
+      el.style.margin = '-1px';
-          liveRegion.setAttribute('aria-live', 'polite');
+      el.style.overflow = 'hidden';
-          liveRegion.setAttribute('aria-atomic', 'true');
+      el.style.clip = 'rect(0, 0, 0, 0)';
-          liveRegion.className = 'yaktube-sr-only';
+      el.style.whiteSpace = 'nowrap';
-          document.body.appendChild(liveRegion);
+      el.style.border = '0';
     }
+
+    function getLiveRegion(assertive) {
+      var id = assertive ? 'yaktube-a11y-live-assertive' : 'yaktube-a11y-live-region';
+      var region = document.getElementById(id);
+      if (!region || !document.body.contains(region)) {
+        region = document.createElement('div');
+        region.id = id;
+        region.setAttribute('aria-live', assertive ? 'assertive' : 'polite');
+        region.setAttribute('aria-atomic', 'true');
+        region.setAttribute('aria-relevant', 'additions text');
+        applySrOnlyStyles(region);
+        document.body.appendChild(region);
       }
-      return liveRegion;
+      return region;
     }
 
     function announce(text, assertive) {
-      var region = getLiveRegion();
+      if (!text || !String(text).trim()) return;
-      if (assertive) {
+      var strText = String(text).trim();
-        region.setAttribute('aria-live', 'assertive');
+      var region = getLiveRegion(assertive);
-      } else {
+
-        region.setAttribute('aria-live', 'polite');
+      if (region._setTimer) {
+        clearTimeout(region._setTimer);
+        region._setTimer = null;
       }
+      if (region._clearTimer) {
+        clearTimeout(region._clearTimer);
+        region._clearTimer = null;
+      }
+
+      // Screen reader mutation trigger: clear first so repeat announcements are re-announced
       region.textContent = '';
-      setTimeout(function () {
+
-        region.textContent = text;
+      region._setTimer = setTimeout(function () {
+        region.textContent = strText;
+
+        // Seslendirme yapıldıktan veya ekran okuyucu kuyruğuna alındıktan sonra
+        // sayfanın en altında ya da sanal imleç gezintisinde eski metin kalmaması için
+        // DOM'daki duyuru metnini temizle (Metin uzunluğuna göre 3 ile 7 saniye arası)
+        var clearDelay = Math.min(7000, Math.max(3000, strText.length * 50));
+        region._clearTimer = setTimeout(function () {
+          if (region && document.body.contains(region)) {
+            region.textContent = '';
+          }
+          region._clearTimer = null;
+        }, clearDelay);
+        region._setTimer = null;
       }, 50);
     }
 
@@ -172,10 +211,7 @@ try {
           var hasToken = localStorage.getItem('access_token') || localStorage.getItem('username');
           if (hasToken) {
             console.log('[YakTube] YakNet session ended elsewhere. Clearing YakTube...');
-            try {
+            clearYakTubeAuthSession();
-              localStorage.clear();
-              sessionStorage.clear();
-            } catch (e) {}
             window.location.reload();
           }
         }
@@ -198,20 +234,32 @@ try {
       } else if (e.detail && e.detail.authenticated === false) {
         var hasToken = localStorage.getItem('access_token') || localStorage.getItem('username');
         if (hasToken) {
-          try {
+          clearYakTubeAuthSession();
-            localStorage.clear();
-            sessionStorage.clear();
-          } catch (err) {}
           window.location.reload();
         }
       }
     });
 
+    // Clear YakTube auth session and cloud search cache safely
+    function clearYakTubeAuthSession() {
+      try {
+        localStorage.removeItem('access_token');
+        localStorage.removeItem('refresh_token');
+        localStorage.removeItem('token_type');
+        localStorage.removeItem('id');
+        localStorage.removeItem('username');
+        localStorage.removeItem('displayName');
+        localStorage.removeItem('email');
+        localStorage.removeItem('role');
+        localStorage.removeItem('yaktube_recent_searches');
+        sessionStorage.clear();
+      } catch (e) {}
+    }
+
     // Unified single sign-out for YakTube and YakNet
     function performUnifiedLogout() {
+      clearYakTubeAuthSession();
       try {
-        localStorage.clear();
-        sessionStorage.clear();
         sessionStorage.setItem('yaknet_manual_logout', 'true');
       } catch (err) {}
       window.location.replace(
@@ -1309,8 +1357,114 @@ try {
 
     // 5. On-Demand Search & Import with Duplicate Awareness
     var lastQuery = null;
+    var lastSearchTarget = null;
     var isSearching = false;
 
+    function escapeHtml(str) {
+      if (!str) return '';
+      return String(str)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    }
+
+    function formatClockTime(seconds) {
+      if (isNaN(seconds) || seconds < 0) return '00:00';
+      var hrs = Math.floor(seconds / 3600);
+      var mins = Math.floor((seconds % 3600) / 60);
+      var secs = Math.floor(seconds % 60);
+      var sSecs = (secs < 10 ? '0' : '') + secs;
+      if (hrs > 0) {
+        var sMins = (mins < 10 ? '0' : '') + mins;
+        return hrs + ':' + sMins + ':' + sSecs;
+      }
+      return (mins < 10 ? '0' : '') + mins + ':' + sSecs;
+    }
+
+    function switchSearchTarget(target) {
+      var radio = document.getElementById(target === 'local' ? 'searchTargetLocal' : 'searchTargetSearchIndex');
+      if (radio) {
+        radio.checked = true;
+        radio.dispatchEvent(new Event('change', { bubbles: true }));
+        radio.dispatchEvent(new Event('input', { bubbles: true }));
+        var form = radio.closest('form');
+        var submitBtn = form ? form.querySelector('.submit-button button') : null;
+        if (submitBtn) {
+          submitBtn.click();
+          return;
+        }
+      }
+      var url = new URL(window.location.href);
+      url.searchParams.set('searchTarget', target);
+      window.location.href = url.toString();
+    }
+
+    function ensureFediverseBridge(query, currentSearchTarget) {
+      var bridge = document.getElementById('yaktube-fediverse-bridge');
+      if (!bridge) {
+        bridge = document.createElement('div');
+        bridge.id = 'yaktube-fediverse-bridge';
+        bridge.className = 'yaktube-fediverse-bridge';
+        bridge.setAttribute('role', 'region');
+        bridge.setAttribute('aria-label', 'Fediverse Video Arama Ağı ve Kapsam Seçimi');
+
+        var searchResult = document.querySelector('.search-result, my-search .search-result');
+        var ondemandContainer = document.getElementById('yaktube-ondemand-container');
+
+        if (searchResult && searchResult.parentNode) {
+          searchResult.parentNode.insertBefore(bridge, searchResult);
+        } else if (ondemandContainer && ondemandContainer.parentNode) {
+          ondemandContainer.parentNode.insertBefore(bridge, ondemandContainer.nextSibling);
+        } else {
+          var mainCol = document.querySelector('my-search, main, .main-col') || document.body;
+          mainCol.appendChild(bridge);
+        }
+      }
+
+      var isFediverse = currentSearchTarget === 'search-index';
+
+      bridge.innerHTML =
+        '<div class="yaktube-fediverse-bridge-content">' +
+          '<div class="yaktube-fediverse-bridge-left">' +
+            '<div class="yaktube-fediverse-bridge-badge-wrap">' +
+              '<span class="yaktube-fediverse-badge">🌐 Fediverse Ağı</span>' +
+              '<span class="yaktube-fediverse-status">' +
+                (isFediverse ? 'SepiaSearch Küresel Fediverse Arama Aktif' : escapeHtml(getInstanceName()) + ' Yerel Arama Aktif') +
+              '</span>' +
+            '</div>' +
+            '<h2 class="yaktube-fediverse-title">🌐 Fediverse & Küresel Ağ Arama Sonuçları</h2>' +
+            '<p class="yaktube-fediverse-sub">Merkeziyetsiz federe ağdaki (SepiaSearch ve bağımsız PeerTube sunucuları) video sonuçları aşağıda listelenmektedir.</p>' +
+          '</div>' +
+          '<div class="yaktube-scope-selector" role="tablist" aria-label="Arama Kapsamı Seçimi">' +
+            '<button type="button" id="yaktube-scope-global-btn" class="yaktube-scope-btn ' + (isFediverse ? 'active' : '') + '" role="tab" aria-selected="' + (isFediverse ? 'true' : 'false') + '" aria-label="Tüm Fediverse ve SepiaSearch ağındaki videoları ara" title="Tüm Fediverse genelinde ara">' +
+              '🌐 Tüm Fediverse (SepiaSearch)' +
+            '</button>' +
+            '<button type="button" id="yaktube-scope-local-btn" class="yaktube-scope-btn ' + (!isFediverse ? 'active' : '') + '" role="tab" aria-selected="' + (!isFediverse ? 'true' : 'false') + '" aria-label="Sadece ' + escapeHtml(getInstanceName()) + ' yerel sunucusundaki videoları ara" title="Sadece ' + escapeHtml(getInstanceName()) + ' yerel kütüphanesinde ara">' +
+              '🏠 Sadece ' + escapeHtml(getInstanceName()) + ' (Yerel)' +
+            '</button>' +
+          '</div>' +
+        '</div>';
+
+      var globalBtn = document.getElementById('yaktube-scope-global-btn');
+      if (globalBtn) {
+        globalBtn.addEventListener('click', function () {
+          if (currentSearchTarget !== 'search-index') {
+            switchSearchTarget('search-index');
+          }
+        });
+      }
+      var localBtn = document.getElementById('yaktube-scope-local-btn');
+      if (localBtn) {
+        localBtn.addEventListener('click', function () {
+          if (currentSearchTarget !== 'local') {
+            switchSearchTarget('local');
+          }
+        });
+      }
+    }
+
     function showModal(title, desc) {
       var overlay = document.getElementById('yaktube-import-modal');
       if (!overlay) {
@@ -1651,7 +1805,7 @@ try {
                   clearInterval(pollInterval);
                   hideModal();
                   btn.disabled = false;
-                  btn.innerHTML = "📥 YakTube'a Aktar & İzle";
+                  btn.innerHTML = '📥 ' + escapeHtml(getInstanceName()) + "'a Aktar & İzle";
                   alert('Video indirme sırasında bir hata oluştu.');
                   announce('Video indirme sırasında bir hata oluştu.', true);
                 }
@@ -1664,7 +1818,7 @@ try {
               clearInterval(pollInterval);
               hideModal();
               btn.disabled = false;
-              btn.innerHTML = "📥 YakTube'a Aktar & İzle";
+              btn.innerHTML = '📥 ' + escapeHtml(getInstanceName()) + "'a Aktar & İzle";
               alert(
                 'İndirme arka planda tamamlanıyor. Ana sayfada veya Videolarım sayfasında kısa süre içinde hazır olacaktır.'
               );
@@ -1675,7 +1829,7 @@ try {
         .catch(function (err) {
           hideModal();
           btn.disabled = false;
-          btn.innerHTML = "📥 YakTube'a Aktar & İzle";
+          btn.innerHTML = '📥 ' + escapeHtml(getInstanceName()) + "'a Aktar & İzle";
           alert('İndirme hatası: ' + err.message);
           announce('İndirme hatası: ' + err.message, true);
         });
@@ -1685,7 +1839,9 @@ try {
       // Clean up stray 404 error mascot pages if on search
       try {
         var errPages = document.querySelectorAll('my-error-page');
-        errPages.forEach(function(ep) { ep.remove(); });
+        errPages.forEach(function (ep) {
+          ep.remove();
+        });
       } catch (e) {}
 
       // Instant URL fixer: redirect legacy /search/videos to native /search
@@ -1700,13 +1856,35 @@ try {
       if (!window.location.pathname.includes('/search') || !searchParam || searchParam.trim().length < 2) {
         var existing = document.getElementById('yaktube-ondemand-container');
         if (existing) existing.remove();
+        var existingBridge = document.getElementById('yaktube-fediverse-bridge');
+        if (existingBridge) existingBridge.remove();
         lastQuery = null;
+        lastSearchTarget = null;
         return;
       }
 
       var query = searchParam.trim();
-      if (query === lastQuery) return;
+
+      // Ensure Fediverse Global Search (SepiaSearch) is default target if not specified in URL
+      if (!url.searchParams.has('searchTarget')) {
+        url.searchParams.set('searchTarget', 'search-index');
+        window.location.replace(url.toString());
+        return;
+      }
+
+      var currentSearchTarget = url.searchParams.get('searchTarget') || 'search-index';
+      var queryKey = query + '___' + currentSearchTarget;
+      var lastQueryKey = lastQuery + '___' + lastSearchTarget;
+
+      if (queryKey === lastQueryKey) {
+        var existingBridge = document.getElementById('yaktube-fediverse-bridge');
+        if (!existingBridge && document.querySelector('my-search')) {
+          ensureFediverseBridge(query, currentSearchTarget);
+        }
+        return;
+      }
       lastQuery = query;
+      lastSearchTarget = currentSearchTarget;
 
       var container = document.getElementById('yaktube-ondemand-container');
       if (!container) {
@@ -1714,7 +1892,7 @@ try {
         container.id = 'yaktube-ondemand-container';
         container.className = 'yaktube-ondemand-section';
         container.setAttribute('role', 'region');
-        container.setAttribute('aria-label', 'Canl\u0131 YouTube Arama Sonu\u00e7lar\u0131');
+        container.setAttribute('aria-label', 'Canlı YouTube ve ' + getInstanceName() + ' Arama Sonuçları');
 
         var mainContent =
           document.querySelector('my-search, my-search-results, router-outlet, main, .main-col') || document.body;
@@ -1728,18 +1906,18 @@ try {
       container.innerHTML =
         '<div class="yaktube-header">' +
         '<div class="yaktube-header-left">' +
-        '<span class="yaktube-badge">\u26a1 Canl\u0131 YouTube & Web Arama</span>' +
+        '<span class="yaktube-badge">⚡ Canlı YouTube & Web Arama</span>' +
         '<h2 class="yaktube-title-h3" style="margin:0; font-size:1.15rem;">"' +
-        query +
+        escapeHtml(query) +
-        '" i\u00e7in YouTube Sonu\u00e7lar\u0131 Taran\u0131yor...</h2>' +
+        '" için Sonuçlar Taranıyor...</h2>' +
         '</div>' +
-        '<button class="yaktube-shortcuts-btn" id="yaktube-open-shortcuts" aria-label="Klavye K\u0131sayollar\u0131 K\u0131lavuzunu A\u00e7">' +
+        '<button class="yaktube-shortcuts-btn" id="yaktube-open-shortcuts" aria-label="Klavye Kısayolları Kılavuzunu Aç">' +
-        '\u2328\ufe0f K\u0131sayollar (?)' +
+        '⌨️ Kısayollar (?)' +
         '</button>' +
         '</div>' +
         '<div class="yaktube-loading">' +
         '<div class="yaktube-spinner" aria-hidden="true"></div>' +
-        '<div style="margin-top: 10px;">YouTube\'daki en pop\u00fcler e\u015fle\u015fmeler taran\u0131yor...</div>' +
+        '<div style="margin-top: 10px;">YouTube ve ' + escapeHtml(getInstanceName()) + ' yerel kütüphanesindeki eşleşmeler taranıyor...</div>' +
         '</div>';
 
       var shortcutsBtn = document.getElementById('yaktube-open-shortcuts');
@@ -1747,45 +1925,88 @@ try {
         shortcutsBtn.addEventListener('click', toggleShortcutsModal);
       }
 
-      announce(query + ' i\u00e7in canl\u0131 YouTube aramas\u0131 ba\u015flat\u0131ld\u0131.');
+      ensureFediverseBridge(query, currentSearchTarget);
+      announce(query + ' için arama başlatıldı.');
       isSearching = true;
 
+      Promise.all([
         fetch('/api-custom/youtube-search?q=' + encodeURIComponent(query))
           .then(function (res) {
             return res.json();
           })
-        .then(function (data) {
+          .catch(function (err) {
-          var rawResults = data.results || [];
+            console.warn('[YakTube] YouTube search fetch error:', err);
-          var uniqueResults = [];
+            return { results: [] };
+          }),
+        fetch('/api/v1/search/videos?search=' + encodeURIComponent(query) + '&isLocal=true&count=12')
+          .then(function (res) {
+            return res.json();
+          })
+          .catch(function (err) {
+            console.warn('[YakTube] Local videos search fetch error:', err);
+            return { total: 0, data: [] };
+          })
+      ])
+        .then(function (responses) {
+          var ytData = responses[0] || {};
+          var localData = responses[1] || {};
+
+          var rawYtResults = ytData.results || [];
+          var uniqueYtResults = [];
           var seenIds = {};
 
-          rawResults.forEach(function (item) {
+          rawYtResults.forEach(function (item) {
             if (item && item.id && !seenIds[item.id] && item.title) {
               seenIds[item.id] = true;
-              uniqueResults.push(item);
+              uniqueYtResults.push(item);
             }
           });
 
-          var count = uniqueResults.length;
+          var ytCount = uniqueYtResults.length;
-          if (count === 0) {
+          var localResults = localData.data || [];
+          var localTotal = typeof localData.total === 'number' ? localData.total : localResults.length;
+
+          if (ytCount === 0 && localResults.length === 0) {
             container.innerHTML =
               '<div class="yaktube-header">' +
               '<div class="yaktube-header-left">' +
               '<span class="yaktube-badge">⚡ Canlı YouTube & Web Arama</span>' +
               '<h2 class="yaktube-title-h3" style="margin:0; font-size:1.15rem;">"' +
-              query +
+              escapeHtml(query) +
-              '" için YouTube\'da Sonuç Bulunamadı</h2>' +
+              '" için Sonuç Bulunamadı</h2>' +
               '</div>' +
+              '<button class="yaktube-shortcuts-btn" id="yaktube-open-shortcuts" aria-label="Klavye Kısayolları Kılavuzunu Aç">' +
+              '⌨️ Kısayollar (?)' +
+              '</button>' +
               '</div>';
-            announce(query + " için YouTube\'da eşleşen video bulunamadı.");
+            announce(query + ' için YouTube veya yerel sunucuda eşleşen video bulunamadı.');
           } else {
-            var countText = count === 1 ? '1 Video Bulundu' : count + ' Video Bulundu';
+            var visibleYtCount = Math.min(12, ytCount);
-            announce(query + ' araması için ' + count + ' video listelendi.');
-            var visibleCount = Math.min(12, count);
 
-            function render() {
+            function renderAll() {
-              var visibleResults = uniqueResults.slice(0, visibleCount);
+              // 1. YouTube Section
-              var cardsHtml = '';
+              var ytHeaderHtml = '';
+              var ytCardsHtml = '';
+              var ytLoadMoreHtml = '';
+
+              if (ytCount > 0) {
+                var countText = ytCount === 1 ? '1 Video Bulundu' : ytCount + ' Video Bulundu';
+                ytHeaderHtml =
+                  '<div class="yaktube-header">' +
+                  '<div class="yaktube-header-left">' +
+                  '<span class="yaktube-badge">⚡ Canlı YouTube & Web Arama</span>' +
+                  '<h2 class="yaktube-title-h3" style="margin:0; font-size:1.15rem;">"' +
+                  escapeHtml(query) +
+                  '" için ' +
+                  countText +
+                  '</h2>' +
+                  '</div>' +
+                  '<button class="yaktube-shortcuts-btn" id="yaktube-open-shortcuts" aria-label="Klavye Kısayolları Kılavuzunu Aç">' +
+                  '⌨️ Kısayollar (?)' +
+                  '</button>' +
+                  '</div>';
+
+                var visibleResults = uniqueYtResults.slice(0, visibleYtCount);
                 visibleResults.forEach(function (item) {
                   var isLocal = !!item.isDownloaded;
                   var isLive = !!item.isLive;
@@ -1797,45 +2018,45 @@ try {
                   } else if (isLocal) {
                     statusBadge =
                       '<span class="yaktube-badge" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); margin-bottom: 6px; display: inline-block;">✅ ' +
-                    getInstanceName() +
+                      escapeHtml(getInstanceName()) +
-                    "'da Mevcut</span>";
+                      '\'da Mevcut</span>';
                   }
 
                   var actionButton = '';
                   if (isLive) {
                     actionButton =
                       '<button class="yaktube-live-btn" data-url="' +
-                    item.url +
+                      escapeHtml(item.url) +
                       '" data-title="' +
-                    item.title.replace(/"/g, '&quot;') +
+                      escapeHtml(item.title) +
                       '" style="background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); color: #fff; border: none; padding: 8px 14px; border-radius: 6px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;" aria-label="' +
-                    item.title.replace(/"/g, '&quot;') +
+                      escapeHtml(item.title) +
                       ' canlı yayınını hemen izle">🔴 Canlı Yayını İzle</button>';
-                } else if (isLocal) {
+                  } else if (isLocal && item.localVideo && item.localVideo.url) {
                     actionButton =
                       '<a href="' +
-                    item.localVideo.url +
+                      escapeHtml(item.localVideo.url) +
                       '" class="yaktube-play-btn" aria-label="' +
-                    item.title.replace(/"/g, '&quot;') +
+                      escapeHtml(item.title) +
-                    ' videosunu YakTube\'dan hemen izle">▶️ ' +
+                      ' videosunu ' + escapeHtml(getInstanceName()) + '\'dan hemen izle">▶️ ' +
-                    getInstanceName() +
+                      escapeHtml(getInstanceName()) +
-                    "'dan İzle</a>";
+                      '\'dan İzle</a>';
                   } else {
                     actionButton =
                       '<button class="yaktube-import-btn" data-url="' +
-                    item.url +
+                      escapeHtml(item.url) +
                       '" data-title="' +
-                    item.title.replace(/"/g, '&quot;') +
+                      escapeHtml(item.title) +
                       '" aria-label="' +
-                    item.title.replace(/"/g, '&quot;') +
+                      escapeHtml(item.title) +
                       ' videosunu ' +
-                    getInstanceName() +
+                      escapeHtml(getInstanceName()) +
-                    '\'a indir ve izle">📥 ' +
+                      '\'a aktar ve izle">📥 ' +
-                    getInstanceName() +
+                      escapeHtml(getInstanceName()) +
-                    "'a Aktar & İzle</button>";
+                      '\'a Aktar & İzle</button>';
                   }
 
-                var durationText = isLive ? 'CANLI' : item.durationFormatted;
+                  var durationText = isLive ? 'CANLI' : (item.durationFormatted || formatClockTime(item.duration));
                   var cardLabel =
                     item.title +
                     (isLive ? ' (Canlı Yayın)' : isLocal ? ' (' + getInstanceName() + ' kütüphanenizde mevcut)' : '') +
@@ -1843,32 +2064,33 @@ try {
                     item.channel +
                     ' kanalı, Süre: ' +
                     durationText;
-                cardsHtml +=
+
+                  ytCardsHtml +=
                     '<div class="yaktube-card" role="article" tabindex="0" aria-label="' +
-                  cardLabel.replace(/"/g, '&quot;') +
+                    escapeHtml(cardLabel) +
                     '">' +
                     '<div class="yaktube-thumb-wrap">' +
                     '<img class="yaktube-thumb-img" src="' +
-                  item.thumbnail +
+                    escapeHtml(item.thumbnail) +
                     '" alt="' +
-                  item.title.replace(/"/g, '&quot;') +
+                    escapeHtml(item.title) +
                     '" loading="lazy" />' +
                     '<span class="yaktube-duration-badge" style="' +
                     (isLive ? 'background:#dc2626;font-weight:700;' : '') +
                     '" aria-label="Süre">' +
-                  durationText +
+                    escapeHtml(durationText) +
                     '</span>' +
                     '</div>' +
                     '<div class="yaktube-info">' +
                     '<div>' +
                     statusBadge +
                     '<h3 class="yaktube-video-name" title="' +
-                  item.title +
+                    escapeHtml(item.title) +
                     '" style="margin:0; font-size:13px; font-weight:600; line-height:1.35;">' +
-                  item.title +
+                    escapeHtml(item.title) +
                     '</h3>' +
                     '<div class="yaktube-channel-name">' +
-                  item.channel +
+                    escapeHtml(item.channel) +
                     '</div>' +
                     '</div>' +
                     actionButton +
@@ -1876,38 +2098,89 @@ try {
                     '</div>';
                 });
 
-              var loadMoreHtml = '';
+                if (visibleYtCount < ytCount) {
-              if (visibleCount < count) {
+                  ytLoadMoreHtml =
-                loadMoreHtml =
                     '<div style="text-align: center; margin: 20px 0 10px 0;">' +
                     '<button id="yaktube-load-more-btn" class="yaktube-load-more-btn" style="background: #1e293b; color: #ff8f37; border: 1px solid #ff8f37; padding: 10px 24px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3);" aria-label="Daha fazla video yükle">' +
                     '➕ Daha Fazla Video Göster (' +
-                  visibleCount +
+                    visibleYtCount +
                     ' / ' +
-                  count +
+                    ytCount +
                     ')' +
                     '</button>' +
                     '</div>';
                 }
+              }
 
-              container.innerHTML =
+              // 2. Local Videos Shelf
-                '<div class="yaktube-header">' +
+              var localShelfHtml = '';
-                '<div class="yaktube-header-left">' +
+              if (localResults.length > 0) {
-                '<span class="yaktube-badge">⚡ Canlı YouTube & Web Arama</span>' +
+                var localCardsHtml = '';
-                '<h2 class="yaktube-title-h3" style="margin:0; font-size:1.15rem;">"' +
+                localResults.forEach(function (lItem) {
-                query +
+                  var lThumb = lItem.thumbnailPath || (lItem.thumbnails && lItem.thumbnails[0] ? lItem.thumbnails[0].fileUrl : '/client/assets/images/default-thumbnail.jpg');
-                '" için ' +
+                  var lDuration = formatClockTime(lItem.duration);
-                countText +
+                  var lChannel = (lItem.channel && (lItem.channel.displayName || lItem.channel.name)) ||
-                '</h2>' +
+                                 (lItem.account && (lItem.account.displayName || lItem.account.name)) ||
+                                 getInstanceName();
+                  var lWatchUrl = lItem.url || ('/videos/watch/' + (lItem.shortUUID || lItem.uuid));
+                  var lViews = (lItem.views || 0) + ' görüntüleme';
+                  var lLabel = lItem.name + ', ' + lChannel + ', ' + getInstanceName() + ' yerel sunucusunda mevcut, Süre: ' + lDuration;
+
+                  localCardsHtml +=
+                    '<div class="yaktube-card yaktube-local-card" role="article" tabindex="0" aria-label="' +
+                    escapeHtml(lLabel) +
+                    '">' +
+                    '<a href="' + escapeHtml(lWatchUrl) + '" style="text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%;">' +
+                    '<div class="yaktube-thumb-wrap">' +
+                    '<img class="yaktube-thumb-img" src="' +
+                    escapeHtml(lThumb) +
+                    '" alt="' +
+                    escapeHtml(lItem.name) +
+                    '" loading="lazy" onerror="this.src=\'/client/assets/images/default-thumbnail.jpg\'" />' +
+                    '<span class="yaktube-duration-badge" aria-label="Süre">' +
+                    escapeHtml(lDuration) +
+                    '</span>' +
                     '</div>' +
-                '<button class="yaktube-shortcuts-btn" id="yaktube-open-shortcuts" aria-label="Klavye Kısayolları Kılavuzunu Aç">' +
+                    '<div class="yaktube-info">' +
-                '⌨️ Kısayollar (?)' +
+                    '<div>' +
-                '</button>' +
+                    '<span class="yaktube-badge" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); margin-bottom: 6px; display: inline-block;">✅ ' + escapeHtml(getInstanceName()) + '\'da Mevcut</span>' +
+                    '<h3 class="yaktube-video-name" title="' +
+                    escapeHtml(lItem.name) +
+                    '" style="margin:0; font-size:13px; font-weight:600; line-height:1.35;">' +
+                    escapeHtml(lItem.name) +
+                    '</h3>' +
+                    '<div class="yaktube-channel-name">' +
+                    escapeHtml(lChannel) + ' • ' + escapeHtml(lViews) +
+                    '</div>' +
+                    '</div>' +
+                    '<div class="yaktube-play-btn" style="margin-top:8px;">▶️ ' + escapeHtml(getInstanceName()) + '\'dan Hemen İzle</div>' +
+                    '</div>' +
+                    '</a>' +
+                    '</div>';
+                });
+
+                localShelfHtml =
+                  '<div id="yaktube-local-shelf" class="yaktube-local-shelf" role="region" aria-label="' + escapeHtml(getInstanceName()) + ' Yerel Kütüphanesi">' +
+                  '<div class="yaktube-header" style="margin-top: 24px; border-bottom-color: rgba(16, 185, 129, 0.3);">' +
+                  '<div class="yaktube-header-left">' +
+                  '<span class="yaktube-badge" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">✅ Yerel Kütüphane</span>' +
+                  '<h2 class="yaktube-title-h3" style="margin:0; font-size:1.15rem;">"' +
+                  escapeHtml(query) +
+                  '" için ' + escapeHtml(getInstanceName()) + ' Sunucusunda ' + localTotal + ' Video Bulundu</h2>' +
+                  '</div>' +
+                  '<span class="yaktube-local-shelf-sub">Doğrudan sunucumuzda barındırılan, yüksek hızlı ve anında izlenebilen videolar</span>' +
                   '</div>' +
                   '<div class="yaktube-grid">' +
-                cardsHtml +
+                  localCardsHtml +
                   '</div>' +
-                loadMoreHtml;
+                  '</div>';
+              }
+
+              container.innerHTML =
+                ytHeaderHtml +
+                (ytCount > 0 ? '<div class="yaktube-grid">' + ytCardsHtml + '</div>' : '') +
+                ytLoadMoreHtml +
+                localShelfHtml;
 
               var sBtn = document.getElementById('yaktube-open-shortcuts');
               if (sBtn) {
@@ -1917,9 +2190,9 @@ try {
               var loadMoreBtn = document.getElementById('yaktube-load-more-btn');
               if (loadMoreBtn) {
                 loadMoreBtn.addEventListener('click', function () {
-                  visibleCount = Math.min(visibleCount + 6, count);
+                  visibleYtCount = Math.min(visibleYtCount + 6, ytCount);
-                  render();
+                  renderAll();
-                  announce(visibleCount + ' adet video gösteriliyor.');
+                  announce(visibleYtCount + ' adet video gösteriliyor.');
                 });
               }
 
@@ -1940,7 +2213,17 @@ try {
               });
             }
 
-            render();
+            renderAll();
+
+            var announceMsg = '"' + query + '" için arama sonuçları listelendi: ';
+            if (localTotal > 0) {
+              announceMsg += localTotal + ' adet yerel ' + getInstanceName() + ' videosu, ';
+            }
+            if (ytCount > 0) {
+              announceMsg += ytCount + ' adet YouTube sonucu ve ';
+            }
+            announceMsg += 'Fediverse sonuçları hazır.';
+            announce(announceMsg);
           }
         })
         .catch(function (err) {
@@ -1948,14 +2231,15 @@ try {
           container.innerHTML =
             '<div class="yaktube-header">' +
             '<div class="yaktube-header-left">' +
-            '<span class="yaktube-badge">\u26a1 Canl\u0131 YouTube & Web Arama</span>' +
+            '<span class="yaktube-badge">⚡ Canlı YouTube & Web Arama</span>' +
-            '<h2 class="yaktube-title-h3" style="margin:0; font-size:1.15rem;">Arama s\u0131ras\u0131nda bir ba\u011flant\u0131 sorunu olu\u015ftu.</h2>' +
+            '<h2 class="yaktube-title-h3" style="margin:0; font-size:1.15rem;">Arama sırasında bir bağlantı sorunu oluştu.</h2>' +
             '</div>' +
             '</div>';
-          announce('Arama s\u0131ras\u0131nda bir ba\u011flant\u0131 sorunu olu\u015ftu.');
+          announce('Arama sırasında bir bağlantı sorunu oluştu.');
         })
         .finally(function () {
           isSearching = false;
+          ensureFediverseBridge(query, currentSearchTarget);
         });
     }
 
@@ -2005,37 +2289,79 @@ try {
       } catch (e) {}
       // Default initial recent searches for first-time visitors
       var defaults = ['Tarkan', 'Barış Manço', 'Yapay Zeka', 'Canlı Haber'];
+      if (!isUserLoggedIn()) {
         try {
           localStorage.setItem('yaktube_recent_searches', JSON.stringify(defaults));
         } catch (e) {}
+      }
       return defaults;
     }
 
+    function callCloudSearchHistory(method, queryParams, body, onSuccess, onError) {
+      var token = localStorage.getItem('access_token');
+      var email = localStorage.getItem('email');
+      var username = localStorage.getItem('username');
+      var headers = {};
+      if (body) headers['Content-Type'] = 'application/json';
+      if (token) headers['Authorization'] = 'Bearer ' + token;
+      if (email) headers['X-User-Email'] = email;
+      if (username) headers['X-User-Username'] = username;
+
+      var authUrl = 'https://auth.yakhub.com.tr/api/yaktube/search-history' + (queryParams || '');
+      var bridgeUrl = '/api-custom/search-history' + (queryParams || '');
+
+      var options = {
+        method: method,
+        headers: headers,
+        credentials: 'include'
+      };
+      if (body) options.body = JSON.stringify(body);
+
+      fetch(authUrl, options)
+        .then(function (res) {
+          if (!res.ok) throw new Error('Auth server status ' + res.status);
+          return res.json();
+        })
+        .then(function (data) {
+          if (typeof onSuccess === 'function') onSuccess(data);
+        })
+        .catch(function () {
+          // Fallback to local PeerTube bridge proxy
+          fetch(bridgeUrl, options)
+            .then(function (res) {
+              return res.json();
+            })
+            .then(function (data) {
+              if (typeof onSuccess === 'function') onSuccess(data);
+            })
+            .catch(function (e) {
+              if (typeof onError === 'function') onError(e);
+            });
+        });
+    }
+
     var isSyncingHistory = false;
     function syncCloudSearchHistory(callback) {
       if (!isAccountSyncEnabled() || isSyncingHistory) return;
       isSyncingHistory = true;
 
-      var token = localStorage.getItem('access_token');
+      callCloudSearchHistory(
-      var headers = {};
+        'GET',
-      if (token) headers['Authorization'] = 'Bearer ' + token;
+        '',
-
+        null,
-      fetch('/api-custom/search-history', {
+        function (data) {
-        method: 'GET',
-        headers: headers,
-        credentials: 'include'
-      })
-        .then(function (res) { return res.json(); })
-        .then(function (data) {
           isSyncingHistory = false;
-          if (data && data.status === 'success' && Array.isArray(data.history) && data.history.length > 0) {
+          if (data && data.status === 'success' && Array.isArray(data.history)) {
+            if (data.history.length > 0) {
               localStorage.setItem('yaktube_recent_searches', JSON.stringify(data.history));
+            }
             if (typeof callback === 'function') callback();
           }
-        })
+        },
-        .catch(function () {
+        function () {
           isSyncingHistory = false;
-        });
+        }
+      );
     }
 
     function saveRecentSearch(query) {
@@ -2053,16 +2379,7 @@ try {
 
       // If user is logged in and sync is active, sync with YakNet account
       if (isAccountSyncEnabled()) {
-        var token = localStorage.getItem('access_token');
+        callCloudSearchHistory('POST', '', { query: q, device_name: 'YakTube Web' });
-        var headers = { 'Content-Type': 'application/json' };
-        if (token) headers['Authorization'] = 'Bearer ' + token;
-
-        fetch('/api-custom/search-history', {
-          method: 'POST',
-          headers: headers,
-          credentials: 'include',
-          body: JSON.stringify({ query: q })
-        }).catch(function () {});
       }
     }
 
@@ -2072,15 +2389,7 @@ try {
       } catch (e) {}
 
       if (isAccountSyncEnabled()) {
-        var token = localStorage.getItem('access_token');
+        callCloudSearchHistory('DELETE', '', null);
-        var headers = { 'Content-Type': 'application/json' };
-        if (token) headers['Authorization'] = 'Bearer ' + token;
-
-        fetch('/api-custom/search-history', {
-          method: 'DELETE',
-          headers: headers,
-          credentials: 'include'
-        }).catch(function () {});
       }
 
       renderDynamicSearchChips();
@@ -2318,7 +2627,7 @@ try {
           saveRecentSearch(q);
           announce('"' + q + '" için arama yapılıyor...', true);
           closeFullSearchModal();
-          window.location.href = '/search?search=' + encodeURIComponent(q);
+          window.location.href = '/search?search=' + encodeURIComponent(q) + '&searchTarget=search-index';
         }
       }
       window.__yaktube_execute_search__ = executeSearch;
@@ -2450,7 +2759,7 @@ try {
               announce('"' + transcript + '" için arama başlatılıyor...', true);
               setTimeout(function () {
                 closeFullSearchModal();
-                window.location.href = '/search?search=' + encodeURIComponent(transcript);
+                window.location.href = '/search?search=' + encodeURIComponent(transcript) + '&searchTarget=search-index';
               }, 500);
             }
           }
@@ -2611,6 +2920,13 @@ try {
       }
     });
 
+    // Automatically trigger cloud search history pull on startup if logged in
+    try {
+      if (isAccountSyncEnabled()) {
+        syncCloudSearchHistory();
+      }
+    } catch (e) {}
+
     // 7.5. Reactive Hybrid Related Videos Engine (Watch Page)
     var currentActiveVideoKey = null;
     var isFetchingRelated = false;
@@ -2643,7 +2959,9 @@ try {
             item.localVideo.url +
             '" class="yaktube-play-btn yaktube-related-play-link" style="font-size:11px; padding:6px 10px;" aria-label="' +
             item.title.replace(/"/g, '&quot;') +
-            ' videosunu YakTube\'dan hemen izle">▶️ Hemen İzle</a>'
+            ' videosunu ' +
+            escapeHtml(getInstanceName()) +
+            '\'dan hemen izle">▶️ Hemen İzle</a>'
           : '<button class="yaktube-import-btn yaktube-related-import" data-url="' +
             item.url +
             '" data-title="' +
@@ -3163,7 +3481,7 @@ try {
       installBtn.id = 'yaktube-pwa-install-btn';
       installBtn.className = 'yaktube-pwa-btn';
       installBtn.setAttribute('type', 'button');
-      installBtn.setAttribute('aria-label', 'YakTube Mobil Uygulamasını Yükle');
+      installBtn.setAttribute('aria-label', getInstanceName() + ' Mobil Uygulamasını Yükle');
       installBtn.style.cssText =
         'background: linear-gradient(135deg, #ff8f37, #f97316); color: #000; border: none; padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; box-shadow: 0 4px 12px rgba(255,143,55,0.4);';
       installBtn.innerHTML = '📲 Uygulamayı Yükle';
@@ -3174,7 +3492,7 @@ try {
           deferredInstallPrompt.userChoice.then(function (choiceResult) {
             if (choiceResult.outcome === 'accepted') {
               installBtn.remove();
-              announce('YakTube uygulaması cihazınıza yükleniyor.');
+              announce(getInstanceName() + ' uygulaması cihazınıza yükleniyor.');
             }
             deferredInstallPrompt = null;
           });
@@ -3184,12 +3502,19 @@ try {
       headerButtons.prepend(installBtn);
     }
 
-    function isYakTubeInstance() {
+    function isOfficialYakTubeServer() {
-      return window.location.hostname.includes('yaktube.yakhub.com.tr') || getInstanceName() === 'YakTube';
+      var host = (window.location.hostname || '').toLowerCase();
+      // Sadece ve sadece resmi YakTube alan adında veya yerel test ortamında çalışsın
+      // Diğer PeerTube sunucularında yaktube.apk dosyası olmayacağı için ASLA gösterilmez
+      return host === 'yaktube.yakhub.com.tr' || host === '127.0.0.1' || host === 'localhost';
     }
 
     function injectApkDownloadButton() {
-      if (!isYakTubeInstance()) return;
+      if (!isOfficialYakTubeServer()) {
+        var existBtnOther = document.getElementById('yaktube-apk-download-btn');
+        if (existBtnOther) existBtnOther.remove();
+        return;
+      }
       // 1. If inside APK: NEVER show APK button
       if (isInsideYakTubeApp) {
         var existBtnApp = document.getElementById('yaktube-apk-download-btn');
@@ -3234,7 +3559,11 @@ try {
     }
 
     function injectSidebarApkLink() {
-      if (!isYakTubeInstance()) return;
+      if (!isOfficialYakTubeServer()) {
+        var existLinkOther = document.getElementById('yaktube-sidebar-apk-link');
+        if (existLinkOther) existLinkOther.remove();
+        return;
+      }
       // If inside APK: NEVER show in sidebar
       if (isInsideYakTubeApp) {
         var existLink = document.getElementById('yaktube-sidebar-apk-link');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "peertube-plugin-yaktube-ondemand",
-  "version": "1.4.25",
+  "version": "1.4.32",
   "description": "Accessible On-Demand YouTube Import, Live Streams, Smart Recommendations and A11y Engine for PeerTube",
   "main": "main.js",
   "library": "./main.js",

style.css

@@ -1,7 +1,7 @@
 /* 100% Elimination of PeerTube Mobile Open-in-App & Incompatible Browser Banners */
 #incompatible-browser,
 .alert-light#incompatible-browser,
-div[id="incompatible-browser"],
+div[id='incompatible-browser'],
 .incompatible-browser,
 .mobile-msg,
 my-header .mobile-msg,
@@ -947,7 +947,6 @@ body.yaktube-theater-mode .video-js {
   outline: none !important;
 }
 
-
 /* Suppress 404 Mascot and Error Page on Search results */
 body:has(#yaktube-ondemand-container) my-error-page,
 #yaktube-ondemand-container ~ my-error-page,
@@ -961,3 +960,140 @@ body:has(#yaktube-ondemand-container) my-error-page {
   height: 0 !important;
   overflow: hidden !important;
 }
+
+/* -------------------------------------------------------------------------- */
+/* YakTube Local Video Shelf & Highlights (v1.4.29)                           */
+/* -------------------------------------------------------------------------- */
+.yaktube-local-shelf {
+  margin-top: 24px;
+  padding-top: 20px;
+  border-top: 1px solid rgba(16, 185, 129, 0.25);
+}
+
+.yaktube-local-shelf-sub {
+  font-size: 12px;
+  color: #a7f3d0;
+  margin-top: 4px;
+  display: block;
+}
+
+.yaktube-local-card {
+  border-color: rgba(16, 185, 129, 0.35) !important;
+}
+
+.yaktube-local-card:hover,
+.yaktube-local-card:focus-within {
+  border-color: #10b981 !important;
+  box-shadow: 0 10px 22px rgba(16, 185, 129, 0.22) !important;
+}
+
+/* -------------------------------------------------------------------------- */
+/* YakTube Fediverse Bridge & Scope Selector (v1.4.29)                        */
+/* -------------------------------------------------------------------------- */
+.yaktube-fediverse-bridge {
+  margin: 28px 0 16px 0;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, rgba(30, 27, 75, 0.85) 0%, rgba(15, 23, 42, 0.9) 100%);
+  border: 1px solid rgba(99, 102, 241, 0.4);
+  border-radius: 14px;
+  backdrop-filter: blur(12px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
+  color: #ffffff;
+}
+
+.yaktube-fediverse-bridge-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.yaktube-fediverse-bridge-left {
+  flex: 1 1 320px;
+}
+
+.yaktube-fediverse-bridge-badge-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.yaktube-fediverse-badge {
+  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 9px;
+  border-radius: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.yaktube-fediverse-status {
+  font-size: 12px;
+  font-weight: 600;
+  color: #a5b4fc;
+}
+
+.yaktube-fediverse-title {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.yaktube-fediverse-sub {
+  margin: 4px 0 0 0;
+  font-size: 12px;
+  color: #94a3b8;
+  line-height: 1.4;
+}
+
+.yaktube-scope-selector {
+  display: inline-flex;
+  align-items: center;
+  background: rgba(15, 23, 42, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 10px;
+  padding: 4px;
+  gap: 4px;
+}
+
+.yaktube-scope-btn {
+  background: transparent;
+  border: 1px solid transparent;
+  color: #94a3b8;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 8px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.2s ease;
+}
+
+.yaktube-scope-btn:hover {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.yaktube-scope-btn.active {
+  background: linear-gradient(135deg, #ff8f37 0%, #ff5e3a 100%);
+  color: #ffffff;
+  border-color: rgba(255, 143, 55, 0.4);
+  box-shadow: 0 2px 8px rgba(255, 143, 55, 0.35);
+  font-weight: 700;
+}
+
+.yaktube-scope-btn:focus-visible {
+  outline: 2px solid #ff8f37;
+  outline-offset: 2px;
+}