Compare commits

..
43 Commits
Author SHA1 Message Date
Enes Yakıştır 9ad6f12223 fix(branding): lock APK download buttons strictly to official YakTube domain (v1.4.32) 2026-09-09 07:06:23 +03:00
Enes Yakıştır afdb78a479 fix(a11y): implement auto-clearing live announcer engine (v1.4.31) to prevent lingering DOM announcements 2026-09-06 08:13:21 +03:00
Enes Yakıştır caea63d4a5 fix(branding): ensure 100% dynamic instance name throughout search, shelves and labels v1.4.30 2026-09-05 15:54:10 +03:00
Enes Yakıştır 6462410b02 feat(search): strengthen local YakTube video shelf and integrate accessible Fediverse bridge with scope selector v1.4.29 2026-09-05 15:48:27 +03:00
Enes Yakıştır a67bb3339e Release v1.4.28 (formatted codebase) 2026-09-04 12:56:11 +03:00
Enes Yakıştır b952663f3a Format codebase with Prettier 2026-09-04 12:54:11 +03:00
Enes Yakıştır 0c98d079be feat: universal CORS and multi-instance roaming search history sync 2026-09-04 07:38:28 +03:00
Enes Yakıştır 0bf905f81f fix(search-history): reliable cross-session sync with auth server and safe logout session clearing 2026-09-04 07:32:05 +03:00
Enes Yakıştır f1720448c7 fix(auth): preserve incompatible-browser DOM element for Angular loadUser and restore native auth links (v1.4.25) 2026-09-04 07:07:34 +03:00
Enes Yakıştır f73a1171c4 fix(auth): guarantee all login links are hidden when user is logged in (v1.4.24) 2026-09-04 06:55:20 +03:00
Enes Yakıştır 64afa7c5e9 fix(mobile): eradicate incompatible browser false positive banner across mobile and desktop (v1.4.23) 2026-09-04 06:42:38 +03:00
Enes Yakıştır c0af4e86b2 feat(search): implement YakNet cloud search history sync with auth.yakhub.com.tr (v1.4.22) 2026-09-03 20:16:33 +03:00
Enes Yakıştır 3cc2711e8c fix(search): route to native /search instead of 404 /search/videos and cleanup error mascot (v1.4.21) 2026-09-03 18:19:15 +03:00
Enes Yakıştır 330ff2da2e feat(bgplay): install peertube-plugin-background-play v0.0.5 into database and integrate exact engine into client v1.4.20 2026-08-31 21:42:52 +03:00
Enes Yakıştır 80ea826948 feat(webaudio): implement WebAudio AudioContext bridge to prevent mobile Chrome audio suspension and wire prominent 10s seek buttons v1.4.19 2026-08-31 21:37:33 +03:00
Enes Yakıştır e7dc5136e5 feat(lockscreen): ultimate lock-screen MediaSession player with real video metadata and 10s seek buttons v1.4.18 2026-08-31 21:34:30 +03:00
Enes Yakıştır 1aba41c992 feat(player): full lock-screen MediaSession player integration and silent audio bridge for background audio v1.4.17 2026-08-31 21:27:46 +03:00
Enes Yakıştır afaf4ef856 fix(mobile): permanently suppress .mobile-msg banner and close button, and upgrade WakeLock background playback v1.4.16 2026-08-31 20:52:34 +03:00
Enes Yakıştır 52480401c8 feat(sso): add silent sso-frame probe to automatically recognize active YakNet sessions v1.4.15 2026-08-31 20:35:08 +03:00
Enes Yakıştır 46a9c8ab8c feat(auth): robust hybrid YakNet SSO architecture with zero shadow DOM duplicate buttons v1.4.14 2026-08-31 20:29:13 +03:00
Enes Yakıştır a5568de3cc fix(a11y): completely remove yaknet-account from DOM tree when guest for 100% screen reader cleanliness v1.4.13 2026-08-31 20:25:24 +03:00
Enes Yakıştır d629c97dd8 fix(header): keep yaknet-account hidden for silent SSO probe when guest and show only single clean login button v1.4.12 2026-08-31 20:23:46 +03:00
Enes Yakıştır 3016fc6328 fix: suppress app banners, seamless background audio auto-resume, and continuous YakNet SSO session probe v1.4.11 2026-08-31 20:20:55 +03:00
Enes Yakıştır dac3137330 fix(compatibility): safe matchMedia check and wrap client in try-catch to prevent incompatible browser screen v1.4.10 2026-08-31 18:48:19 +03:00
Enes Yakıştır 15361a21b6 fix(search): restore dynamic recent searches in search modal and auto URL search capture v1.4.9 2026-08-31 18:46:13 +03:00
Enes Yakıştır c6e5abf87e chore: remove internal docs from public repo, make apk download instance-scoped v1.4.8 2026-08-31 17:04:44 +03:00
Enes Yakıştır e161dea9da feat(player): add native background playback on lock-screen and MediaSession API integration v1.4.7 2026-08-31 16:41:58 +03:00
Enes Yakıştır 6fc0f0ef97 feat(search): dynamic recent search history and popular trending topics v1.4.6 2026-08-31 14:43:22 +03:00
Enes Yakıştır c4fc917677 fix(a11y): polish login button label to YakNet ile Giriş Yap across DOM text and attributes v1.4.5 2026-08-31 14:33:55 +03:00
Enes Yakıştır 551b6d1ab6 fix(header): eliminate duplicate login button and polish single YakNet login link v1.4.4 2026-08-31 14:32:22 +03:00
Enes Yakıştır 51e41df3ca fix(peertube-spec): add library, staticDirs, translations, bugs for 100% PeerTube core compliance v1.4.3 2026-08-31 14:27:10 +03:00
Enes Yakıştır 97079931f2 feat(admin): add dedicated local admin login modal, Alt+A shortcut and 403 handler v1.4.2 2026-08-31 14:04:28 +03:00
Enes Yakıştır 22ed7a4bda chore(pkg): update GitHub repository URL in package.json 2026-08-30 12:29:35 +03:00
Enes Yakıştır 774c8f0f02 feat(a11y): add Alt modifier shortcuts, Turkish Q key mapping and accessible player action bar v1.4.1 2026-08-30 11:38:46 +03:00
Enes Yakıştır b5c2c97559 feat(player): add pro player controls, speed adjustment, theater mode and quick info toast v1.4.0 2026-08-30 02:21:21 +03:00
Enes Yakıştır b71e2a83a0 fix(modal): fix close button display none override and prettier format v1.3.3 2026-08-29 23:09:14 +03:00
Enes Yakıştır 85340b85c6 chore(ui): clean generic search labels and placeholders v1.3.2 2026-08-29 23:06:17 +03:00
Enes Yakıştır efa61318f6 refactor(ui): streamline search header into unified trigger pill and voice button v1.3.1 2026-08-29 23:04:50 +03:00
Enes Yakıştır 7572ddb565 feat(modal): implement interactive full YouTube search & voice modal with trends v1.3.0 2026-08-29 23:02:50 +03:00
Enes Yakıştır 8bc648a6bd fix(modal): guarantee unconditional voice modal opening and instant user feedback v1.2.4 2026-08-29 23:01:08 +03:00
Enes Yakıştır f17b1a3ecc feat(ui): ensure universal visibility for pill search bar, submit & voice buttons v1.2.3 2026-08-29 22:59:18 +03:00
Enes Yakıştır 1342281bef fix(a11y): remove repetitive card titles, clean date buttons & simplify search header v1.2.2 2026-08-29 22:43:55 +03:00
Enes Yakıştır 51979ed8eb fix(ux): accurate mobile search toggle, back button hide & desktop pill styling v1.2.1 2026-08-29 22:37:27 +03:00
8 changed files with 4219 additions and 2491 deletions
+1 -1
View File
@@ -1,4 +1,4 @@
node_modules/
docs/
*.log
.DS_Store
dist/
+4
View File
@@ -0,0 +1,4 @@
docs/
*.log
.git
.github
+4
View File
@@ -0,0 +1,4 @@
node_modules/
dist/
package-lock.json
pnpm-lock.yaml
+9
View File
@@ -0,0 +1,9 @@
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "none",
"printWidth": 120,
"arrowParens": "avoid",
"endOfLine": "auto"
}
+2 -1
View File
@@ -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.
+3568 -2251
View File
File diff suppressed because it is too large Load Diff
+8 -4
View File
@@ -1,14 +1,17 @@
{
"name": "peertube-plugin-yaktube-ondemand",
"version": "1.2.0",
"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",
"staticDirs": {},
"translations": {},
"clientScripts": [
{
"script": "client.js",
"scopes": [
"common"
],
"script": "client.js"
]
}
],
"css": [
@@ -36,8 +39,9 @@
"author": "Enes Yakıştır <[email protected]>",
"repository": {
"type": "git",
"url": "https://github.com/enesyakistir/peertube-plugin-yaktube-ondemand.git"
"url": "https://github.com/yakistir98/peertube-plugin-yaktube-ondemand.git"
},
"homepage": "https://yaktube.yakhub.com.tr",
"bugs": "https://github.com/yakistir98/peertube-plugin-yaktube-ondemand/issues",
"license": "AGPL-3.0-or-later"
}
+623 -234
View File
@@ -1,3 +1,55 @@
/* 100% Elimination of PeerTube Mobile Open-in-App & Incompatible Browser Banners */
#incompatible-browser,
.alert-light#incompatible-browser,
div[id='incompatible-browser'],
.incompatible-browser,
.mobile-msg,
my-header .mobile-msg,
[class*='mobile-msg'],
button[title*='Bu mesajı kapat'],
button[aria-label*='Bu mesajı kapat'],
button[title*='Dismiss'],
.msg.ellipsis,
.peertube-button-link.secondary-button {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
opacity: 0 !important;
position: absolute !important;
z-index: -999999 !important;
clip: rect(0, 0, 0, 0) !important;
}
/* Permanent Aggressive Suppression of Generic JoinPeerTube / Framasoft Open-in-App Banners */
my-open-app,
my-open-in-app,
my-client-app-banner,
.open-app-container,
.app-banner,
[class*='open-app'],
[class*='open-in-app'],
.mobile-app-banner,
.app-promotion,
.client-app-banner,
a[href*='play.google.com/store/apps/details?id=app.joinpeertube'],
a[href*='f-droid.org'],
a[href*='joinpeertube'] {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
opacity: 0 !important;
position: absolute !important;
z-index: -99999 !important;
}
/* YakTube Accessibility & On-Demand CSS */
:focus-visible {
@@ -407,102 +459,83 @@ my-header .action-buttons {
}
/* -------------------------------------------------------------------------- */
/* YOUTUBE-STYLE SEARCH BAR & VOICE SEARCH MODAL (v1.2.0) */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* YOUTUBE FULL SEARCH & VOICE MODAL (v1.3.3 - Display Fix) */
/* -------------------------------------------------------------------------- */
/* Header Search Container Pill Styling */
/* Header Search Trigger Container */
my-search-typeahead,
.search-container,
.header-search {
display: flex !important;
align-items: center !important;
position: relative !important;
width: 100% !important;
max-width: 540px !important;
margin: 0 auto !important;
}
.yaktube-search-pill-wrapper {
.yaktube-search-outer-wrap {
display: flex !important;
align-items: center !important;
width: 100% !important;
}
/* 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: 2px 6px 2px 14px !important;
transition: all 0.2s ease !important;
width: 100% !important;
max-width: 580px !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
.yaktube-search-pill-wrapper:focus-within {
border-color: #ff8f37 !important;
box-shadow:
0 0 0 1px #ff8f37,
0 0 12px rgba(255, 143, 55, 0.3) !important;
background: #0f0f0f !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-pill-wrapper input::placeholder {
color: #888 !important;
font-size: 14px !important;
}
/* 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;
display: none;
align-items: center !important;
justify-content: center !important;
font-size: 12px !important;
font-weight: 700 !important;
cursor: pointer !important;
margin: 0 6px !important;
transition: all 0.2s ease !important;
flex-shrink: 0 !important;
}
.yaktube-clear-search-btn:hover {
background: rgba(255, 255, 255, 0.25) !important;
color: #fff !important;
}
/* 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;
border-radius: 0 40px 40px 0 !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;
margin: -2px -6px -2px 0 !important;
width: 100% !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
cursor: pointer !important;
color: #888 !important;
font-size: 15px !important;
user-select: none !important;
gap: 10px !important;
}
.yaktube-search-submit-btn:hover {
background: #272727 !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;
}
/* YouTube Circular Voice Button Beside Search Box */
.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;
@@ -515,196 +548,552 @@ my-search-typeahead,
justify-content: center !important;
font-size: 18px !important;
cursor: pointer !important;
margin-left: 10px !important;
margin-left: 8px !important;
transition: all 0.25s ease !important;
flex-shrink: 0 !important;
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;
}
/* YouTube-Style Voice Search Modal Overlay */
.yaktube-voice-modal-overlay {
/* -------------------------------------------------------------------------- */
/* FULL YOUTUBE SEARCH & VOICE MODAL OVERLAY */
/* -------------------------------------------------------------------------- */
.yaktube-full-search-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.75) !important;
backdrop-filter: blur(8px) !important;
z-index: 99999 !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
padding-top: 80px !important;
animation: yaktube-fade-in 0.2s ease !important;
}
.yaktube-voice-modal-card {
background: #212121 !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 16px !important;
width: 90% !important;
max-width: 560px !important;
padding: 24px 28px !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7) !important;
color: #fff !important;
position: relative !important;
}
.yaktube-voice-modal-header {
display: flex !important;
justify-content: space-between !important;
background: rgba(0, 0, 0, 0.82) !important;
backdrop-filter: blur(12px) !important;
z-index: 999999 !important;
display: none;
flex-direction: column !important;
align-items: center !important;
margin-bottom: 24px !important;
justify-content: flex-start !important;
padding-top: 40px !important;
}
.yaktube-voice-modal-title {
font-size: 20px !important;
font-weight: 500 !important;
margin: 0 !important;
color: #f1f1f1 !important;
.yaktube-full-search-modal.yaktube-modal-open {
display: flex !important;
animation: yaktube-fade-in 0.2s ease-out !important;
}
.yaktube-voice-modal-close-btn {
.yaktube-modal-search-card {
background: #1e1e24 !important;
border: 1px solid rgba(255, 143, 55, 0.3) !important;
border-radius: 20px !important;
width: 92% !important;
max-width: 680px !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
overflow: hidden !important;
color: #fff !important;
}
/* Modal Search Bar */
.yaktube-modal-search-bar {
display: flex !important;
align-items: center !important;
padding: 10px 14px !important;
background: #141418 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.yaktube-modal-back-btn {
background: transparent !important;
border: none !important;
color: #aaa !important;
font-size: 20px !important;
cursor: pointer !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
}
.yaktube-voice-modal-close-btn:hover {
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
}
.yaktube-voice-modal-body {
text-align: center !important;
padding: 10px 0 20px 0 !important;
}
.yaktube-voice-status-text {
font-size: 22px !important;
font-weight: 600 !important;
color: #f1f1f1 !important;
margin-bottom: 12px !important;
min-height: 30px !important;
}
.yaktube-voice-transcript-preview {
font-size: 16px !important;
color: #ff8f37 !important;
font-weight: 500 !important;
margin-bottom: 30px !important;
min-height: 24px !important;
word-break: break-word !important;
}
/* Pulsing Mic Circle Animation */
.yaktube-voice-mic-wrapper {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 10px 0 25px 0 !important;
}
.yaktube-voice-mic-pulse-btn {
background: #cc0000 !important;
color: #fff !important;
border: none !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
width: 76px !important;
height: 76px !important;
font-size: 34px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 20px rgba(204, 0, 0, 0.5) !important;
z-index: 2 !important;
transition: all 0.2s ease !important;
}
.yaktube-voice-mic-pulse-btn:hover {
transform: scale(1.05) !important;
}
.yaktube-voice-mic-pulse-btn.yaktube-idle-mic {
background: #333 !important;
box-shadow: none !important;
}
.yaktube-voice-ripple {
position: absolute !important;
width: 76px !important;
height: 76px !important;
border-radius: 50% !important;
background: rgba(204, 0, 0, 0.4) !important;
animation: yaktube-ripple-wave 1.6s infinite ease-out !important;
z-index: 1 !important;
}
@keyframes yaktube-ripple-wave {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(2.2);
opacity: 0;
}
}
.yaktube-voice-hint-text {
font-size: 13px !important;
color: #888 !important;
margin-top: 10px !important;
}
/* Mobile Search Overlay Mode */
@media (max-width: 768px) {
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 {
display: none !important;
}
body.yaktube-mobile-search-active my-search-typeahead,
body.yaktube-mobile-search-active .search-container {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
}
.yaktube-search-back-btn {
display: inline-flex !important;
}
}
.yaktube-search-back-btn {
display: none;
background: transparent !important;
border: none !important;
color: #fff !important;
font-size: 20px !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
margin-right: 8px !important;
flex-shrink: 0 !important;
transition: all 0.2s ease !important;
}
.yaktube-modal-back-btn:hover {
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
}
.yaktube-modal-input-wrap {
display: flex !important;
align-items: center !important;
flex: 1 !important;
background: #22222a !important;
border: 1px solid #33333f !important;
border-radius: 30px !important;
padding: 2px 8px 2px 14px !important;
margin-right: 10px !important;
}
.yaktube-modal-input-wrap:focus-within {
border-color: #ff8f37 !important;
box-shadow: 0 0 10px rgba(255, 143, 55, 0.3) !important;
}
.yaktube-modal-input-wrap input {
flex: 1 !important;
background: transparent !important;
border: none !important;
color: #fff !important;
font-size: 16px !important;
padding: 8px 4px !important;
outline: none !important;
}
.yaktube-modal-clear-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;
display: none;
align-items: center !important;
justify-content: center !important;
font-size: 12px !important;
font-weight: 700 !important;
cursor: pointer !important;
margin-right: 4px !important;
}
.yaktube-modal-clear-btn:hover {
background: rgba(255, 255, 255, 0.25) !important;
color: #fff !important;
}
.yaktube-modal-search-action-btn {
background: linear-gradient(135deg, #ff8f37 0%, #ff5e3a 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 30px !important;
padding: 8px 18px !important;
font-size: 14px !important;
font-weight: 700 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
transition: all 0.2s ease !important;
flex-shrink: 0 !important;
}
.yaktube-modal-search-action-btn:hover {
transform: scale(1.03) !important;
box-shadow: 0 4px 14px rgba(255, 143, 55, 0.4) !important;
}
.yaktube-modal-voice-btn {
background: #2a2a34 !important;
color: #ff8f37 !important;
border: 1px solid rgba(255, 143, 55, 0.3) !important;
border-radius: 50% !important;
width: 40px !important;
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 18px !important;
cursor: pointer !important;
margin-left: 8px !important;
transition: all 0.2s ease !important;
flex-shrink: 0 !important;
}
.yaktube-modal-voice-btn:hover {
background: #ff8f37 !important;
color: #fff !important;
transform: scale(1.06) !important;
}
/* Modal Body Content */
.yaktube-modal-body {
padding: 20px 24px 28px 24px !important;
}
/* Voice Recognition Banner Inside Modal */
.yaktube-modal-voice-section {
display: none;
background: #141418 !important;
border: 1px solid rgba(255, 143, 55, 0.3) !important;
border-radius: 14px !important;
padding: 20px !important;
text-align: center !important;
margin-bottom: 20px !important;
animation: yaktube-fade-in 0.2s ease !important;
}
.yaktube-modal-voice-status {
font-size: 18px !important;
font-weight: 700 !important;
color: #f1f1f1 !important;
margin-bottom: 12px !important;
}
.yaktube-modal-voice-transcript {
font-size: 16px !important;
color: #ff8f37 !important;
font-weight: 600 !important;
min-height: 24px !important;
margin-bottom: 16px !important;
}
.yaktube-modal-mic-pulse-btn {
background: #cc0000 !important;
color: #fff !important;
border: none !important;
border-radius: 50% !important;
width: 64px !important;
height: 64px !important;
font-size: 28px !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 20px rgba(204, 0, 0, 0.5) !important;
animation: yaktube-pulse-recording 1.5s infinite !important;
}
/* Popular Topics & Chips */
.yaktube-modal-section-title {
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: #888 !important;
margin-bottom: 12px !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.yaktube-modal-chips-grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-bottom: 18px !important;
}
.yaktube-modal-chip {
background: #252530 !important;
color: #e2e8f0 !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 20px !important;
padding: 8px 14px !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.yaktube-modal-chip:hover {
background: rgba(255, 143, 55, 0.2) !important;
border-color: #ff8f37 !important;
color: #fff !important;
transform: translateY(-1px) !important;
}
.yaktube-modal-hint-footer {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
font-size: 12px !important;
color: #777 !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
padding-top: 12px !important;
margin-top: 8px !important;
}
/* -------------------------------------------------------------------------- */
/* YOUTUBE THEATER MODE & QUICK VIDEO INFO TOAST (v1.4.0) */
/* -------------------------------------------------------------------------- */
/* Theater / Cinema Mode (T) */
body.yaktube-theater-mode my-video-watch,
body.yaktube-theater-mode .video-watch,
body.yaktube-theater-mode .watch-container {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
}
body.yaktube-theater-mode .player-container,
body.yaktube-theater-mode .video-player-container,
body.yaktube-theater-mode .player-wrapper {
max-height: 82vh !important;
height: 82vh !important;
width: 100% !important;
max-width: 100% !important;
background: #000 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin-bottom: 20px !important;
}
body.yaktube-theater-mode video,
body.yaktube-theater-mode .video-js {
width: 100% !important;
height: 100% !important;
max-height: 82vh !important;
}
/* Quick Video Info Toast (I) */
.yaktube-video-info-toast {
position: fixed !important;
top: 70px !important;
right: 20px !important;
background: rgba(20, 20, 26, 0.95) !important;
backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 143, 55, 0.4) !important;
border-radius: 14px !important;
padding: 16px 20px !important;
color: #fff !important;
font-size: 14px !important;
z-index: 99999 !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
max-width: 380px !important;
animation: yaktube-fade-in 0.25s ease-out !important;
pointer-events: none !important;
}
.yaktube-info-toast-title {
font-size: 15px !important;
font-weight: 700 !important;
color: #ff8f37 !important;
margin-bottom: 8px !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.yaktube-info-toast-row {
display: flex !important;
justify-content: space-between !important;
margin: 4px 0 !important;
font-size: 13px !important;
color: #ccc !important;
}
.yaktube-info-toast-row b {
color: #fff !important;
}
/* -------------------------------------------------------------------------- */
/* ACCESSIBLE PLAYER ACTION BAR & SHORTCUTS (v1.4.1) */
/* -------------------------------------------------------------------------- */
.yaktube-player-action-bar {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
align-items: center !important;
background: #181820 !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
padding: 10px 14px !important;
margin: 12px 0 16px 0 !important;
width: 100% !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
.yaktube-player-bar-label {
font-size: 13px !important;
font-weight: 700 !important;
color: #ff8f37 !important;
margin-right: 6px !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
.yaktube-player-action-btn {
background: #252530 !important;
color: #f1f1f1 !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
padding: 6px 12px !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
transition: all 0.2s ease !important;
}
.yaktube-player-action-btn:hover,
.yaktube-player-action-btn:focus {
background: rgba(255, 143, 55, 0.2) !important;
border-color: #ff8f37 !important;
color: #fff !important;
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,
my-error-page:has(~ #yaktube-ondemand-container),
my-error-page {
/* Only hide if search param is active */
}
body:has(#yaktube-ondemand-container) my-error-page {
display: none !important;
visibility: hidden !important;
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;
}