├── .prettierignore
├── src
    ├── hooks
    │   ├── index.ts
    │   └── fetch.ts
    ├── icons
    │   ├── IconSponsorBlocker64px.png
    │   └── PlayerInfoIconSponsorBlocker.svg
    ├── index.html
    ├── index.js
    ├── block-webos-cast.ts
    ├── yt-fixes.css
    ├── userScript.js
    ├── font-fix.css
    ├── webos-utils.js
    ├── custom-event-target.ts
    ├── domrect-polyfill.js
    ├── screensaver-fix.ts
    ├── video-quality.js
    ├── yt-fixes.js
    ├── auto-login.js
    ├── thumbnail-quality.ts
    ├── utils.js
    ├── config.js
    ├── Sponsorblock-UI.js
    ├── adblock.js
    ├── ui.css
    ├── return-dislike.js
    └── sponsorblock.js
├── .gitignore
├── .github
    ├── FUNDING.yml
    ├── workflows
    │   ├── main.yml
    │   ├── release.yml
    │   └── build_repo.yml
    └── ISSUE_TEMPLATE
    │   └── bug.md
├── assets
    ├── icon.png
    ├── largeIcon.png
    ├── appinfo.json
    └── icon.svg
├── screenshots
    ├── 1_sm.jpg
    ├── 2_sm.jpg
    ├── 1_sm_new.png
    ├── 2_sm_new.png
    ├── webOS_TV_24_Simulator_GEgUgGmuir.png
    └── webOS_TV_24_Simulator_mKe8Gv7zXq.png
├── .editorconfig
├── .vscode
    ├── extensions.json
    └── settings.json
├── postcss.config.ts
├── tsconfig.json
├── .browserslistrc
├── lint-staged.config.js
├── .prettierrc.js
├── .gitattributes
├── tools
    ├── sync-version.cjs
    ├── deploy.js
    └── gen-manifest.cjs
├── tsconfig.tooling.json
├── tsconfig.base.json
├── repo.json
├── babel.config.js
├── package.json
├── eslint.config.ts
├── webpack.config.js
├── README.md
└── CHANGELOG.md


/.prettierignore:
--------------------------------------------------------------------------------
1 | dist
2 | *-polyfill.*
3 | 


--------------------------------------------------------------------------------
/src/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './fetch';
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.ipk
2 | /node_modules/
3 | /dist/
4 | .DS_Store
5 | /.vscode/
6 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [informatic, throwaway96]
2 | ko_fi: throwaway96
3 | 


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NicholasBly/youtube-webos/HEAD/assets/icon.png


--------------------------------------------------------------------------------
/assets/largeIcon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NicholasBly/youtube-webos/HEAD/assets/largeIcon.png


--------------------------------------------------------------------------------
/screenshots/1_sm.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NicholasBly/youtube-webos/HEAD/screenshots/1_sm.jpg


--------------------------------------------------------------------------------
/screenshots/2_sm.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NicholasBly/youtube-webos/HEAD/screenshots/2_sm.jpg


--------------------------------------------------------------------------------
/screenshots/1_sm_new.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NicholasBly/youtube-webos/HEAD/screenshots/1_sm_new.png


--------------------------------------------------------------------------------
/screenshots/2_sm_new.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NicholasBly/youtube-webos/HEAD/screenshots/2_sm_new.png


--------------------------------------------------------------------------------
/src/icons/IconSponsorBlocker64px.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NicholasBly/youtube-webos/HEAD/src/icons/IconSponsorBlocker64px.png


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <html>
3 |   <head>
4 |     <script src="index.js"></script>
5 |   </head>
6 | </html>
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # top-most EditorConfig file
2 | root = true
3 | 
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | insert_final_newline = true
8 | 


--------------------------------------------------------------------------------
/screenshots/webOS_TV_24_Simulator_GEgUgGmuir.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NicholasBly/youtube-webos/HEAD/screenshots/webOS_TV_24_Simulator_GEgUgGmuir.png


--------------------------------------------------------------------------------
/screenshots/webOS_TV_24_Simulator_mKe8Gv7zXq.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NicholasBly/youtube-webos/HEAD/screenshots/webOS_TV_24_Simulator_mKe8Gv7zXq.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { extractLaunchParams, handleLaunch } from './utils';
2 | 
3 | function main() {
4 |   handleLaunch(extractLaunchParams());
5 | }
6 | 
7 | main();


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": [
3 |     "editorconfig.editorconfig",
4 |     "esbenp.prettier-vscode",
5 |     "dbaeumer.vscode-eslint"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/postcss.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'postcss-load-config';
 2 | 
 3 | const config: Config = {
 4 |   plugins: {
 5 |     'postcss-preset-env': {}
 6 |   }
 7 | };
 8 | 
 9 | export default config;
10 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.base.json",
 3 |   "compilerOptions": {
 4 |     "allowJs": true,
 5 | 
 6 |     "lib": ["ESNext", "DOM"]
 7 |   },
 8 |   "include": ["./src"],
 9 |   "references": [{ "path": "./tsconfig.tooling.json" }]
10 | }
11 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "javascript.preferences.quoteStyle": "single",
3 |   "prettier.requireConfig": true,
4 |   "prettier.useEditorConfig": true,
5 |   "editor.formatOnSave": true,
6 |   "prettier.ignorePath": ".prettierignore",
7 |   "typescript.tsdk": "node_modules\\typescript\\lib"
8 | }
9 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # WAM uses WebKit on webOS 1 and 2
 2 | safari 7 # [WebKit 537.71] for webOS 1 [WebKit 537.41]
 3 | safari 8 # [WebKit 538.35] for webOS 2 [WebKit 538.2]
 4 | chrome 38 # webOS 3.x
 5 | chrome 53 # webOS 4.x
 6 | chrome 68 # webOS 5
 7 | chrome 79 # webOS 6
 8 | chrome 87 # webOS 7 (22)
 9 | chrome 94 # webOS 8 (23)
10 | chrome 108 # webOS 9 (24)
11 | 


--------------------------------------------------------------------------------
/lint-staged.config.js:
--------------------------------------------------------------------------------
 1 | function globForCode(/** @type {string} */ toolName) {
 2 |   return '*.?(c|m){js,ts}?(x)' + `*(${toolName})`;
 3 | }
 4 | 
 5 | /** @type {import('lint-staged').Configuration} */
 6 | export default {
 7 |   '*': 'prettier --ignore-unknown --write',
 8 |   [globForCode('eslint')]: 'eslint',
 9 |   [globForCode('tsc')]: () => 'tsc -b'
10 | };
11 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('prettier').Config} */
 2 | const config = {
 3 |   trailingComma: 'none',
 4 |   singleQuote: true,
 5 |   endOfLine: 'auto',
 6 |   overrides: [
 7 |     {
 8 |       files: ['tsconfig.json', 'jsconfig.json', 'tsconfig.*.json'],
 9 |       options: {
10 |         parser: 'jsonc'
11 |       }
12 |     }
13 |   ]
14 | };
15 | 
16 | export default config;
17 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | * text=auto
 2 | 
 3 | *.css text
 4 | *.html text
 5 | *.js text
 6 | *.json text
 7 | *.md text
 8 | *.mjs text
 9 | *.svg text
10 | *.yml text
11 | 
12 | .browserslistrc text
13 | .editorconfig text
14 | .eslintignore text
15 | .gitattributes text
16 | .gitignore text
17 | .prettierignore text
18 | LICENSE text
19 | 
20 | *.sh text eol=lf
21 | 
22 | *.jpg binary
23 | *.png binary
24 | 


--------------------------------------------------------------------------------
/tools/sync-version.cjs:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | const fs = require('fs');
 4 | 
 5 | const packageInfo = require('../package.json');
 6 | const appinfo = require('../assets/appinfo.json');
 7 | 
 8 | fs.writeFileSync(
 9 |   'assets/appinfo.json',
10 |   `${JSON.stringify(
11 |     {
12 |       ...appinfo,
13 |       version: packageInfo.version
14 |     },
15 |     null,
16 |     2
17 |   )}\n`
18 | );
19 | 


--------------------------------------------------------------------------------
/tools/deploy.js:
--------------------------------------------------------------------------------
 1 | import { spawnSync } from 'node:child_process';
 2 | import { normalize } from 'node:path';
 3 | 
 4 | process.exit(
 5 |   spawnSync(
 6 |     normalize('./node_modules/.bin/ares-install'),
 7 |     [
 8 |       normalize(
 9 |         `./youtube.leanback.v4_${process.env.npm_package_version}_all.ipk`
10 |       )
11 |     ],
12 |     { stdio: 'inherit', shell: true }
13 |   ).status ?? 0
14 | );
15 | 


--------------------------------------------------------------------------------
/src/block-webos-cast.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Fixes webosbrew/youtube-webos/issues/343
 3 |  */
 4 | 
 5 | import { FetchRegistry } from './hooks';
 6 | 
 7 | export function initBlockWebOSCast() {
 8 |   console.info('[Block WebOS Cast] Initialized');
 9 | 
10 |   FetchRegistry.getInstance().addEventListener('request', (evt) => {
11 |     const { url, resource, init } = evt.detail;
12 |     if (url.pathname === '/wake_cast_core') evt.preventDefault();
13 |   });
14 | }


--------------------------------------------------------------------------------
/tsconfig.tooling.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.base.json",
 3 |   "compilerOptions": {
 4 |     "checkJs": true,
 5 | 
 6 |     // Remove when webpack-contrib/copy-webpack-plugin/issues/793 is fixed.
 7 |     "skipLibCheck": true,
 8 | 
 9 |     "module": "NodeNext",
10 | 
11 |     "moduleResolution": "NodeNext"
12 |   },
13 |   "include": [
14 |     "./tools",
15 |     "./assets/appinfo.json",
16 |     "./package.json",
17 |     "./webpack.config.js",
18 |     "eslint.config.ts",
19 |     "babel.config.js",
20 |     ".prettierrc.js",
21 |     "lint-staged.config.js",
22 |     "postcss.config.ts"
23 |   ]
24 | }
25 | 


--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     // Language
 4 |     "target": "ESNext",
 5 |     "module": "ESNext",
 6 |     "lib": ["ESNext"],
 7 |     "esModuleInterop": true,
 8 | 
 9 |     // Module handling
10 |     "composite": true,
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "verbatimModuleSyntax": true,
14 |     "isolatedModules": true,
15 | 
16 |     // Linting
17 |     "noErrorTruncation": true,
18 |     "strict": true,
19 |     "noFallthroughCasesInSwitch": true,
20 |     "noUncheckedIndexedAccess": true,
21 |     "noImplicitOverride": true,
22 | 
23 |     "outDir": "./node_modules/.cache/tsc_build"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Build & Test
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [main]
 6 |   pull_request:
 7 |     branches: [main]
 8 | 
 9 | jobs:
10 |   build:
11 |     runs-on: ubuntu-latest
12 | 
13 |     steps:
14 |       - uses: actions/checkout@v4
15 | 
16 |       - name: Set up Node.js
17 |         uses: actions/setup-node@v4
18 |         with:
19 |           node-version: lts/*
20 |           cache: npm
21 | 
22 |       - run: npm ci
23 |       - run: npm run build
24 |       - run: npm run package
25 | 
26 |       - name: Upload artifact
27 |         uses: actions/upload-artifact@v4
28 |         with:
29 |           name: youtube_adfree_ipk
30 |           path: |
31 |             ${{github.workspace}}/youtube.leanback.v4_*_all.ipk
32 | 


--------------------------------------------------------------------------------
/src/yt-fixes.css:
--------------------------------------------------------------------------------
 1 | /* Fixes shorts thumbnails */
 2 | .ytLrTileHeaderRendererShorts {
 3 |   z-index: -1;
 4 | }
 5 | 
 6 | /* Makes black control underneath video player transparent. Set to 0 to remove it */
 7 | .ytLrWatchDefaultControlsBackground { /* webOS 24 */
 8 |   opacity: 0.6;
 9 | }
10 | .judYce { /* webOS 23 */
11 |   opacity: 0.6;
12 | }
13 | 
14 | /**
15 |  * Dirty hack to fix offset <video> on shorts on older webOS versions.
16 |  * This shouldn't work but it does 😵‍💫.
17 |  * See webosbrew/youtube-webos/pull/235 for insanity.
18 |  */
19 | .WEB_PAGE_TYPE_SHORTS video {
20 |   border: black 1px solid;
21 |   /* Smallest transparent image */
22 |   border-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
23 |     30%;
24 | }
25 | 


--------------------------------------------------------------------------------
/src/userScript.js:
--------------------------------------------------------------------------------
 1 | //import 'whatwg-fetch';
 2 | //import './domrect-polyfill';
 3 | 
 4 | import { handleLaunch } from './utils';
 5 | import { WebOSVersion, initializeWebOSVersion } from './webos-utils.js';
 6 | 
 7 | import { initBlockWebOSCast } from './block-webos-cast'; 
 8 | 
 9 | document.addEventListener(
10 |   'webOSRelaunch',
11 |   (evt) => {
12 |     console.info('RELAUNCH:', evt, window.launchParams);
13 |     handleLaunch(evt.detail);
14 |   },
15 |   true
16 | );
17 | 
18 | import './adblock.js';
19 | import './sponsorblock.js';
20 | import './font-fix.css';
21 | import './thumbnail-quality';
22 | import './screensaver-fix';
23 | import './yt-fixes.css';
24 | 
25 | const version = WebOSVersion();
26 | 
27 |   if (version === 25) {
28 |     console.info('[Main] Enabling webOS Google Cast Block');
29 |     initBlockWebOSCast();
30 |   }


--------------------------------------------------------------------------------
/tools/gen-manifest.cjs:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | const crypto = require('crypto');
 4 | const fs = require('fs');
 5 | 
 6 | const outfile = process.argv[2];
 7 | if (!outfile) throw new Error('Usage: gen-manifest <outfile>');
 8 | 
 9 | const appinfo = require('../assets/appinfo.json');
10 | const ipkfile = `${appinfo.id}_${appinfo.version}_all.ipk`;
11 | const ipkhash = crypto
12 |   .createHash('sha256')
13 |   .update(fs.readFileSync(ipkfile))
14 |   .digest('hex');
15 | 
16 | fs.writeFileSync(
17 |   outfile,
18 |   JSON.stringify({
19 |     id: appinfo.id,
20 |     version: appinfo.version,
21 |     type: appinfo.type,
22 |     title: appinfo.title,
23 |     // appDescription: appinfo.appDescription,
24 |     iconUri:
25 |       'https://raw.githubusercontent.com/webosbrew/youtube-webos/main/assets/largeIcon.png',
26 |     sourceUrl: 'https://github.com/webosbrew/youtube-webos',
27 |     rootRequired: false,
28 |     ipkUrl: ipkfile,
29 |     ipkHash: {
30 |       sha256: ipkhash
31 |     }
32 |   })
33 | );
34 | 


--------------------------------------------------------------------------------
/repo.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "paging": {
 3 |     "page": 1,
 4 |     "count": 1,
 5 |     "maxPage": 1,
 6 |     "itemsTotal": 1
 7 |   },
 8 |   "packages": [
 9 |     {
10 |       "id": "youtube.leanback.v4",
11 |       "title": "YouTube AdFree",
12 |       "iconUri": "https://raw.githubusercontent.com/NicholasBly/youtube-webos/main/assets/icon.png",
13 |       "manifest": {
14 |         "id": "youtube.leanback.v4",
15 |         "version": "0.6.5",
16 |         "type": "web",
17 |         "title": "YouTube AdFree",
18 |         "appDescription": "YouTube AdFree",
19 |         "iconUri": "https://raw.githubusercontent.com/NicholasBly/youtube-webos/main/assets/icon.png",
20 |         "sourceUrl": "https://github.com/NicholasBly/youtube-webos",
21 |         "rootRequired": false,
22 |         "ipkUrl": "https://github.com/NicholasBly/youtube-webos/releases/download/0.6.5/youtube.leanback.v4_0.6.5_all.ipk",
23 |         "ipkHash": {
24 |           "sha256": "32bfa2362d8db58e131005f86fd795eec48904a5a8a056445066af2dcb7a856f"
25 |         }
26 |       }
27 |     }
28 |   ]
29 | }


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Build & Release
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - '!*'
 7 |     tags:
 8 |       - 'v*.*'
 9 | 
10 | jobs:
11 |   build-and-release:
12 |     runs-on: ubuntu-latest
13 |     permissions:
14 |       contents: write
15 | 
16 |     steps:
17 |       - uses: actions/checkout@v4
18 | 
19 |       - name: Set up Node.js
20 |         uses: actions/setup-node@v4
21 |         with:
22 |           node-version: lts/*
23 |           cache: npm
24 | 
25 |       - run: npm ci
26 |       - run: npm run build
27 |       - run: npm run package
28 |       - run: npm run manifest
29 | 
30 |       - name: Create release
31 |         uses: ncipollo/release-action@v1
32 |         with:
33 |           name: 'Release ${{ github.ref }}'
34 |           prerelease: true
35 |           draft: false
36 |           allowUpdates: true
37 |           omitNameDuringUpdate: true
38 |           omitBodyDuringUpdate: true
39 |           omitDraftDuringUpdate: true
40 |           omitPrereleaseDuringUpdate: true
41 |           artifacts: '*.ipk,*.manifest.json'
42 | 


--------------------------------------------------------------------------------
/assets/appinfo.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "id": "youtube.leanback.v4",
 3 |   "version": "0.6.5",
 4 |   "vendor": "webosbrew.org",
 5 |   "type": "web",
 6 |   "main": "index.html",
 7 |   "title": "YouTube AdFree",
 8 |   "icon": "icon.png",
 9 |   "largeIcon": "largeIcon.png",
10 |   "iconColor": "#FFFFFF",
11 |   "support360Content": true,
12 |   "checkUpdateOnLaunch": false,
13 |   "accessibility": {
14 |     "supportsAudioGuidance": true
15 |   },
16 |   "vendorExtension": {
17 |     "userAgent": "$browserName$/$browserVersion$ ($platformName$-$platformVersion$), _TV_O18/$firmwareVersion$ (LG, $modelName$, $networkMode$)",
18 |     "allowCrossDomain": true
19 |   },
20 |   "deeplinkingParams": "{\"contentTarget\":\"v=$CONTENTID\"}",
21 |   "inAppSearchParams": "{\"target\":\"q=$SEARCH_KEYWORD\"}",
22 |   "inAppVoiceIntent": "{\"target\":{\"intent\":\"$INTENT\",\"intentParam\":\"$INTENT_PARAM\",\"languageCode\":\"$LANG_CODE\"}}",
23 |   "supportQueryRouting": "{\"amazonAlexa\":true,\"googleAssistant\":true}",
24 |   "enablePigScreenSaver": false,
25 |   "trustLevel": "netcast",
26 |   "privilegedJail": true,
27 |   "supportQuickStart": true,
28 |   "dialAppName": "YouTube",
29 |   "disableBackHistoryAPI": true,
30 |   "supportGIP": true
31 | }


--------------------------------------------------------------------------------
/src/icons/PlayerInfoIconSponsorBlocker.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="svg16" version="1.1" viewBox="0 0 565.15 568">
2 |   <defs/>
3 |   <defs id="defs4"/>
4 |   <path id="path8" fill="#fff" d="M282.58 568a65 65 0 01-34.14-9.66C95.41 463.94 2.54 300.46 0 121a64.91 64.91 0 0134-58.09 522.56 522.56 0 01497.16 0 64.91 64.91 0 0134 58.12c-2.53 179.43-95.4 342.91-248.42 437.3a65 65 0 01-34.16 9.67zm0-548.31A502.24 502.24 0 0043.4 80.22a45.27 45.27 0 00-23.7 40.53c2.44 172.67 91.81 330 239.07 420.83a46.19 46.19 0 0047.61 0C453.64 450.73 543 293.42 545.45 120.75a45.26 45.26 0 00-23.7-40.54 502.26 502.26 0 00-239.17-60.52z"/>
5 |   <path id="path10" fill="#fff" d="M284.705 42.693A479.9 479.9 0 0054.37 100.42a22.53 22.53 0 00-11.7 20c2.4 169.84 93.001 318.22 228.161 401.59a22.48 22.48 0 0023.49 0c135.16-83.37 225.76-231.75 228.16-401.59a22.53 22.53 0 00-11.7-20 479.9 479.9 0 00-226.075-57.727zm-2.13 59.344c89.347 0 162.081 72.712 162.081 162.08 0 89.368-72.734 162.082-162.082 162.082-89.368 0-162.08-72.714-162.08-162.082s72.712-162.08 162.08-162.08zm0 30.389c-72.613 0-131.692 59.079-131.692 131.691 0 72.613 59.079 131.692 131.691 131.692 72.613 0 131.692-59.08 131.692-131.692 0-72.612-59.08-131.691-131.692-131.691zm-2.563 16.695c14.121 0 24.363 10.606 24.363 24.049 0 13.483-10.272 23.432-24.697 23.432-14.73 0-24.354-9.949-24.354-23.432 0-13.443 9.624-24.049 24.688-24.049zm-34.938 68.691h57.397l-.02 134.692 18.295.973v25.638h-76.32v-24.373l10.586-.953c5.754-.638 9.279-2.573 9.279-10.271v-89.155c0-7.08-1.905-9.32-8.014-9.32l-11.203-.629v-26.601z"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/src/font-fix.css:
--------------------------------------------------------------------------------
 1 | /* LG TVs don't have a system font for math unicode symbols. */
 2 | 
 3 | /* Source: https://fonts.googleapis.com/css2?family=Noto+Sans+Math&display=swap */
 4 | @font-face {
 5 |   /* font-family: 'Noto Sans Math'; */
 6 |   font-family: Arial; /* LG TVs don't have the Arial font so replacing is safe. */
 7 |   font-style: normal;
 8 |   font-weight: 400;
 9 |   font-display: swap;
10 |   src: url(https://fonts.gstatic.com/s/notosansmath/v15/7Aump_cpkSecTWaHRlH2hyV5UEl981w.woff2)
11 |     format('woff2');
12 |   unicode-range:
13 |     U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A,
14 |     U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346,
15 |     U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6,
16 |     U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043,
17 |     U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C,
18 |     U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121,
19 |     U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2,
20 |     U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319,
21 |     U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1,
22 |     U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB,
23 |     U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE,
24 |     U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF, U+0000-00FF, U+0131,
25 |     U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
26 |     U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
27 | }


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | import Module from 'node:module';
 2 | 
 3 | const require = Module.createRequire(import.meta.url);
 4 | 
 5 | // From: https://github.com/babel/babel-polyfills/blob/a5db9c31c5b5474b4018e6178bc40882fc3eb5bf/packages/babel-plugin-polyfill-corejs3/README.md#version
 6 | 
 7 | const {
 8 |   version: babelruntimeVersion
 9 | } = require('@babel/runtime-corejs3/package.json');
10 | const { version: corejspureVersion } = require('core-js-pure/package.json');
11 | 
12 | /** @type {import('@babel/core').ConfigFunction} */
13 | function makeConfig(api) {
14 |   api.cache.invalidate(() => babelruntimeVersion + corejspureVersion);
15 | 
16 |   return {
17 |     // Fixes "TypeError: __webpack_require__(...) is not a function"
18 |     // https://github.com/webpack/webpack/issues/9379#issuecomment-509628205
19 |     // https://babel.dev/docs/options#sourcetype
20 |     sourceType: 'unambiguous',
21 |     // https://babel.dev/docs/assumptions
22 |     assumptions: {
23 |       noNewArrows: true
24 |     },
25 |     plugins: [
26 |       [
27 |         '@babel/plugin-transform-typescript',
28 |         {
29 |           strictMode: true
30 |         }
31 |       ],
32 |       [
33 |         '@babel/plugin-transform-runtime',
34 |         {
35 |           regenerator: false,
36 |           version: babelruntimeVersion
37 |         }
38 |       ],
39 |       [
40 |         'polyfill-corejs3',
41 |         {
42 |           method: 'usage-pure',
43 |           version: corejspureVersion
44 |         }
45 |       ],
46 |       [
47 |         'polyfill-regenerator',
48 |         {
49 |           method: 'usage-pure'
50 |         }
51 |       ]
52 |     ],
53 |     presets: [
54 |       [
55 |         '@babel/preset-env',
56 |         {
57 |           bugfixes: true
58 |         }
59 |       ]
60 |     ]
61 |   };
62 | }
63 | 
64 | export default makeConfig;
65 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Report a bug/issue
 4 | title: 'Bug: <title>'
 5 | labels: bug, needs triage
 6 | ---
 7 | 
 8 | <!--
 9 | 
10 | WARNING: Please read this carefully to avoid submitting useless bug reports that will be ignored.
11 | 
12 | If you do not include at least the YTAF version and enough information to determine your webOS version, your issue may be closed without a response.
13 | 
14 | Check existing issues to see if there is already one covering your problem.
15 | 
16 | The more information you include, the better.
17 | 
18 | However, you must include *at least* the YTAF (YouTube Ad-Free) version and:
19 | - webOS version, or
20 | - firmware version (sometimes referred to as "software version" on TV) *and* either OTAID (preferred) or SoC
21 | 
22 | -->
23 | 
24 | ## YTAF information
25 | 
26 | <!--
27 | 
28 |   Example:
29 | 
30 |   - YTAF version: 0.3.3
31 | 
32 | -->
33 | 
34 | - YTAF version:
35 | 
36 | ## TV information
37 | 
38 | <!--
39 | 
40 |   Example:
41 | 
42 |   - webOS version: 6.3.2
43 |   - Firmware version: 03.34.65
44 |   - OTAID: HE_DTV_W21P_AFADATAA
45 |   - SoC: k7lp
46 |   - Model: 50UP7670PUC
47 | 
48 | -->
49 | 
50 | - webOS version:
51 | - Firmware version:
52 | - OTAID:
53 | - SoC:
54 | - Model:
55 | 
56 | <!--
57 | 
58 | This information can all be found in /var/run/nyx/device_info.json and /var/run/nyx/os_info.json.
59 | 
60 | In `device_info.json`:
61 |   * SoC: `device_name`
62 |   * OTAID: `hardware_id`
63 |   * model: `product_id`
64 | 
65 | In `os_info.json`:
66 |   * webOS version: `core_os_release`
67 |   * firmware version: `webos_manufacturing_version`
68 | 
69 | If you do not have access to those files, the webOS version can always be found somewhere in the settings menu.
70 | 
71 | -->
72 | 
73 | ## Issue description
74 | 
75 | <!--
76 | 
77 | Describe the bug/issue and how to reproduce it. Provide as much information as possible. For example, include screenshots or links to videos that trigger the problem.
78 | 
79 | Please also check whether you are able to open the YTAF options panel using the green button and include that information here.
80 | 
81 | -->
82 | 


--------------------------------------------------------------------------------
/src/webos-utils.js:
--------------------------------------------------------------------------------
 1 | /* src/webos-utils.js */
 2 | let cachedWebOSVersion = null;
 3 | let cachedNewLayout = null;
 4 | 
 5 | /**
 6 |  * Detects if the user is using the "New" YouTube UI
 7 |  * @returns {boolean}
 8 |  */
 9 | export function isNewYouTubeLayout() {
10 |   if (cachedNewLayout !== null) {
11 |     return cachedNewLayout;
12 |   }
13 | 
14 |   // WebOS 24 / 25 typically uses this tag for the app host
15 |   cachedNewLayout = !!document.querySelector('gJiGL'); // ytLrAppHost previously
16 |   
17 |   if (cachedNewLayout) {
18 |     console.info('[WebOSUtils] New YouTube UI detected');
19 |   }
20 |   
21 |   return cachedNewLayout;
22 | }
23 | 
24 | /**
25 |  * Detects the webOS version using the User Agent string.
26 |  * Prioritizes firmware version from _TV_O18 pattern (e.g., 33.22.52 = webOS 25).
27 |  * Falls back to Chrome version detection for simulator environments.
28 |  * @returns {number} webOS version number (25, 24, 23, 22, 6, 5, 4, 3, or 0 if unknown)
29 |  */
30 | export function WebOSVersion() {
31 |   if (cachedWebOSVersion !== null) {
32 |     return cachedWebOSVersion;
33 |   }
34 | 
35 |   const ua = window.navigator.userAgent;
36 | 
37 |   // Primary detection: Extract firmware version from _TV_O18/x.x.x pattern
38 |   const firmwareMatch = ua.match(/_TV_O18\/(\d+\.\d+\.\d+)/);
39 |   
40 |   if (firmwareMatch) {
41 |     const firmwareVersion = firmwareMatch[1];
42 |     const majorVersion = parseInt(firmwareVersion.split('.')[0], 10);
43 |     
44 |     if (majorVersion >= 33) {
45 |       console.info(`[WebOSUtils] Detected webOS 25 via firmware version: ${firmwareVersion}`);
46 |       cachedWebOSVersion = 25;
47 |       return 25;
48 |     }
49 | 	
50 | 	if (majorVersion === 4) {
51 |       console.info(`[WebOSUtils] Detected webOS 5 via firmware version: ${firmwareVersion}`);
52 |       cachedWebOSVersion = 5;
53 |       return 5;
54 |     }
55 | 	
56 |     console.info(`[WebOSUtils] Found firmware version ${firmwareVersion}, but no mapping available`);
57 |   }
58 | 
59 |   // Fallback: Chrome version detection (for simulator environments)
60 |   const chromeMatch = ua.match(/Chrome\/(\d+)/);
61 |   
62 |   if (chromeMatch) {
63 |     const chromeVersion = parseInt(chromeMatch[1], 10);
64 |     console.info(`[WebOSUtils] Detected Chrome version: ${chromeVersion} (simulator mode)`);
65 |     
66 |     if (chromeVersion >= 120) {
67 |       cachedWebOSVersion = 25;
68 |     } else {
69 |       cachedWebOSVersion = 0;
70 |     }
71 |     
72 |     return cachedWebOSVersion;
73 |   }
74 | 
75 |   console.warn('[WebOSUtils] Could not detect webOS version from user agent');
76 |   cachedWebOSVersion = 0;
77 |   return 0;
78 | }


--------------------------------------------------------------------------------
/src/custom-event-target.ts:
--------------------------------------------------------------------------------
 1 | type TypedEventPartial<T extends EventTarget, U> = {
 2 |   readonly currentTarget: T | null;
 3 |   readonly type: U;
 4 | };
 5 | 
 6 | type BaseTypedEvent<T extends EventTarget, E extends Event, U> = E &
 7 |   TypedEventPartial<T, U>;
 8 | 
 9 | type EventInstanceType<T, O> = T extends abstract new (
10 |   type: string,
11 |   options?: O
12 | ) => infer R
13 |   ? R
14 |   : never;
15 | 
16 | type EventOptionsType<T> = T extends new (
17 |   type: string,
18 |   options?: infer O
19 | ) => Event
20 |   ? O
21 |   : never;
22 | 
23 | export type TypedCustomEvent<
24 |   D,
25 |   T extends EventTarget,
26 |   U = string
27 | > = BaseTypedEvent<T, CustomEvent<D>, U>;
28 | 
29 | export const TypedCustomEvent = CustomEvent as {
30 |   new <const U extends string, const D = undefined>(
31 |     type: U,
32 |     eventInitDict?: CustomEventInit<D>
33 |   ): TypedCustomEvent<D, EventTarget, U>;
34 | 
35 |   prototype: BaseTypedEvent<EventTarget, CustomEvent<unknown>, string>;
36 | };
37 | 
38 | interface EmptyEventMap {}
39 | 
40 | type EventMapValue<
41 |   T extends EmptyEventMap,
42 |   K extends keyof T & string
43 | > = T[K] extends Event ? T[K] : never;
44 | 
45 | interface EventListener<
46 |   Self extends EventTarget,
47 |   T extends EmptyEventMap,
48 |   EventName extends keyof T
49 | > {
50 |   (this: Self, evt: T[EventName] & TypedEvent<Self, EventName>): void;
51 | }
52 | 
53 | interface EventListenerObject<
54 |   Self extends EventTarget,
55 |   T extends EmptyEventMap,
56 |   EventName extends keyof T
57 | > {
58 |   handleEvent: EventListener<Self, T, EventName>;
59 | }
60 | 
61 | type EventListenerArg<
62 |   Self extends EventTarget,
63 |   T extends EmptyEventMap,
64 |   EventName extends keyof T
65 | > =
66 |   | EventListener<Self, T, EventName>
67 |   | EventListenerObject<Self, T, EventName>
68 |   | null;
69 | 
70 | interface CustomEventTarget<T extends EmptyEventMap> {
71 |   addEventListener<K extends keyof T & string>(
72 |     type: K,
73 |     callback: EventListenerArg<this, T, K>,
74 |     options?: boolean | AddEventListenerOptions
75 |   ): void;
76 | 
77 |   removeEventListener<K extends keyof T & string>(
78 |     type: K,
79 |     callback: EventListenerArg<this, T, K>,
80 |     options?: boolean | EventListenerOptions
81 |   ): void;
82 | 
83 |   dispatchEvent<K extends keyof T & string>(
84 |     event: EventMapValue<T, K>
85 |   ): boolean;
86 | }
87 | 
88 | export const CustomEventTarget = EventTarget as {
89 |   new <T extends EmptyEventMap>(): CustomEventTarget<T>;
90 |   prototype: CustomEventTarget<EmptyEventMap>;
91 | };
92 | 
93 | export type EventMapOf<T> =
94 |   T extends CustomEventTarget<infer U>
95 |     ? { [K in keyof U]: U[K] & TypedEvent<T, K> }
96 |     : never;
97 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "youtube-webos",
 3 |   "version": "0.6.5",
 4 |   "description": "Ad-free YouTube app for webOS",
 5 |   "type": "module",
 6 |   "main": "index.js",
 7 |   "scripts": {
 8 |     "build": "webpack --mode=production",
 9 |     "build:dev": "webpack --mode=development",
10 |     "build:analyze": "webpack --mode=production --env analyze",
11 |     "package": "ares-package -n dist",
12 |     "deploy": "node tools/deploy.js",
13 |     "inspect": "ares-inspect youtube.leanback.v4",
14 |     "launch": "ares-launch youtube.leanback.v4",
15 |     "manifest": "node tools/gen-manifest.cjs youtube.leanback.v4.manifest.json",
16 |     "version": "node tools/sync-version.cjs && git add assets/appinfo.json",
17 |     "prepare": "husky",
18 |     "lint": "eslint",
19 |     "type-check": "tsc -b",
20 |     "prettier-check": "prettier --ignore-path .prettierignore --check ."
21 |   },
22 |   "repository": "github:webosbrew/youtube-webos",
23 |   "license": "GPL-3.0-only",
24 |   "bugs": "https://github.com/NicholasBly/youtube-webos/issues",
25 |   "homepage": "https://github.com/NicholasBly/youtube-webos#readme",
26 |   "dependencies": {
27 |     "@babel/runtime-corejs3": "^7.28.0",
28 |     "core-js-pure": "^3.47.0",
29 |     "regenerator-runtime": "^0.14.1",
30 |     "tiny-sha256": "^1.0.2",
31 |     "whatwg-fetch": "^3.6.20"
32 |   },
33 |   "devDependencies": {
34 |     "@babel/core": "^7.28.0",
35 |     "@babel/plugin-transform-runtime": "^7.28.0",
36 |     "@babel/plugin-transform-typescript": "^7.28.0",
37 |     "@babel/preset-env": "^7.28.0",
38 |     "@eslint/js": "^9.30.1",
39 |     "@stylistic/eslint-plugin": "^5.6.1",
40 |     "@types/babel__core": "^7.20.5",
41 |     "@types/eslint": "^9.6.1",
42 |     "@types/eslint-config-prettier": "^6.11.3",
43 |     "@types/node": "^24.10.1",
44 |     "@webos-tools/cli": "^3.2.1",
45 |     "babel-loader": "^10.0.0",
46 |     "babel-plugin-polyfill-corejs3": "^0.13.0",
47 |     "babel-plugin-polyfill-regenerator": "^0.6.5",
48 |     "copy-webpack-plugin": "^13.0.0",
49 |     "css-loader": "^7.1.2",
50 |     "cssnano": "^7.1.2",
51 |     "eslint": "^9.30.1",
52 |     "eslint-config-prettier": "^10.1.5",
53 |     "eslint-plugin-regexp": "^2.9.0",
54 |     "globals": "^16.3.0",
55 |     "husky": "^9.1.7",
56 |     "jiti": "^2.4.2",
57 |     "lint-staged": "^16.2.7",
58 |     "postcss": "^8.5.6",
59 |     "postcss-load-config": "^6.0.1",
60 |     "postcss-loader": "^8.1.1",
61 |     "postcss-preset-env": "^10.5.0",
62 |     "prettier": "^3.7.4",
63 |     "style-loader": "^4.0.0",
64 |     "transform-async-modules-webpack-plugin": "^1.1.1",
65 |     "typescript": "^5.8.3",
66 |     "webpack": "^5.103.0",
67 |     "webpack-bundle-analyzer": "^5.1.0",
68 |     "webpack-cli": "^6.0.1"
69 |   },
70 |   "engines": {
71 |     "node": ">=22"
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/src/domrect-polyfill.js:
--------------------------------------------------------------------------------
  1 | //
  2 | // https://raw.githubusercontent.com/Financial-Times/polyfill-library/c25c30e4463bef60fba1213ecb697f3e3f253d7b/polyfills/DOMRect/polyfill.js
  3 | // License: MIT
  4 | //
  5 | 
  6 | (function (global) {
  7 | 	function number(v) {
  8 | 		return v === undefined ? 0 : Number(v);
  9 | 	}
 10 | 	
 11 | 	function different(u, v) {
 12 | 		return u !== v && !(isNaN(u) && isNaN(v));
 13 | 	}
 14 | 
 15 | 	function DOMRect(xArg, yArg, wArg, hArg) {
 16 | 		var x, y, width, height, left, right, top, bottom;
 17 | 
 18 | 		x = number(xArg);
 19 | 		y = number(yArg);
 20 | 		width = number(wArg);
 21 | 		height = number(hArg);
 22 | 
 23 | 		Object.defineProperties(this, {
 24 | 			x: {
 25 | 				get: function () { return x; },
 26 | 				set: function (newX) {
 27 | 					if (different(x, newX)) {
 28 | 						x = newX;
 29 | 						left = right = undefined;
 30 | 					}
 31 | 				},
 32 | 				enumerable: true
 33 | 			},
 34 | 			y: {
 35 | 				get: function () { return y; },
 36 | 				set: function (newY) {
 37 | 					if (different(y, newY)) {
 38 | 						y = newY;
 39 | 						top = bottom = undefined;
 40 | 					}
 41 | 				},
 42 | 				enumerable: true
 43 | 			},
 44 | 			width: {
 45 | 				get: function () { return width; },
 46 | 				set: function (newWidth) {
 47 | 					if (different(width, newWidth)) {
 48 | 						width = newWidth;
 49 | 						left = right = undefined;
 50 | 					}
 51 | 				},
 52 | 				enumerable: true
 53 | 			},
 54 | 			height: {
 55 | 				get: function () { return height; },
 56 | 				set: function (newHeight) {
 57 | 					if (different(height, newHeight)) {
 58 | 						height = newHeight;
 59 | 						top = bottom = undefined;
 60 | 					}
 61 | 				},
 62 | 				enumerable: true
 63 | 			},
 64 | 			left: {
 65 | 				get: function () {
 66 | 					if (left === undefined) {
 67 | 						left = x + Math.min(0, width);
 68 | 					}
 69 | 					return left;
 70 | 				},
 71 | 				enumerable: true
 72 | 			},
 73 | 			right: {
 74 | 				get: function () {
 75 | 					if (right === undefined) {
 76 | 						right = x + Math.max(0, width);
 77 | 					}
 78 | 					return right;
 79 | 				},
 80 | 				enumerable: true
 81 | 			},
 82 | 			top: {
 83 | 				get: function () {
 84 | 					if (top === undefined) {
 85 | 						top = y + Math.min(0, height);
 86 | 					}
 87 | 					return top;
 88 | 				},
 89 | 				enumerable: true
 90 | 			},
 91 | 			bottom: {
 92 | 				get: function () {
 93 | 					if (bottom === undefined) {
 94 | 						bottom = y + Math.max(0, height);
 95 | 					}
 96 | 					return bottom;
 97 | 				},
 98 | 				enumerable: true
 99 | 			}
100 | 		});
101 | 	}
102 | 	
103 | 	global.DOMRect = DOMRect;
104 | }(self));
105 | 
106 | /**
107 |  * Force babel to interpret this file as ESM so it
108 |  * polyfills with ESM imports instead of CommonJS.
109 |  */
110 | export {}
111 | 


--------------------------------------------------------------------------------
/src/screensaver-fix.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * On webOS, when a video element doesn't perfectly fill
 3 |  * the entire screen, the screensaver can be kick in.
 4 |  */
 5 | 
 6 | import { waitForChildAdd } from './utils';
 7 | 
 8 | /**
 9 |  * document.querySelector but waits for the Element to be added if it doesn't already exist.
10 |  */
11 | async function requireElement<E extends typeof Element>(
12 |   cssSelectors: string,
13 |   expected: E
14 | ): Promise<InstanceType<E>> {
15 |   const alreadyPresent = document.querySelector(cssSelectors);
16 |   if (alreadyPresent) {
17 |     if (!(alreadyPresent instanceof expected)) throw new Error();
18 | 
19 |     // Cast required due to narrowing limitations.
20 |     // https://github.com/microsoft/TypeScript/issues/55241
21 |     return alreadyPresent as InstanceType<E>;
22 |   }
23 | 
24 |   const result = await waitForChildAdd(
25 |     document.body,
26 |     (node): node is Element =>
27 |       node instanceof Element && node.matches(cssSelectors),
28 |     true
29 |   );
30 | 
31 |   if (!(result instanceof expected)) throw new Error();
32 |   return result as InstanceType<E>;
33 | }
34 | 
35 | function isPlayerHidden(video: HTMLVideoElement) {
36 |   // Youtube uses display none sometimes along with a negative top to hide the HTMLVideoElement.
37 |   return video.style.display == 'none' || video.style.top.startsWith('-');
38 | }
39 | 
40 | function isWatchPage() {
41 |   return document.body.classList.contains('WEB_PAGE_TYPE_WATCH');
42 | }
43 | 
44 | const playerCtrlObs = new MutationObserver((mutations, obs) => {
45 |   // Only watch page has a full-screen player.
46 |   if (!isWatchPage()) {
47 |     obs.disconnect();
48 |     return;
49 |   }
50 | 
51 |   const video = mutations[0]?.target;
52 |   if (!(video instanceof HTMLVideoElement)) throw new Error();
53 |   const style = video.style;
54 | 
55 |   // Not sure if there will be a race condition so just in case.
56 |   if (isPlayerHidden(video)) return;
57 | 
58 |   const targetWidth = `${window.innerWidth}px`;
59 |   const targetHeight = `${window.innerHeight}px`;
60 |   const targetLeft = '0px';
61 |   const targetTop = '0px';
62 | 
63 |   /**
64 |    * Check to see if identical before assignment as some webOS versions will trigger a mutation
65 |    * event even if the assignment effectively does nothing, leading to an infinite loop.
66 |    */
67 |   style.width !== targetWidth && (style.width = targetWidth);
68 |   style.height !== targetHeight && (style.height = targetHeight);
69 |   style.left !== targetLeft && (style.left = targetLeft);
70 |   style.top !== targetTop && (style.top = targetTop);
71 | });
72 | 
73 | const bodyAttrObs = new MutationObserver(async () => {
74 |   if (!isWatchPage()) return;
75 | 
76 |   // Youtube TV re-uses the same video element for everything.
77 |   const video = await requireElement('video', HTMLVideoElement);
78 |   playerCtrlObs.observe(video, {
79 |     attributes: true,
80 |     attributeFilter: ['style']
81 |   });
82 | });
83 | 
84 | bodyAttrObs.observe(document.body, {
85 |   attributes: true,
86 |   attributeFilter: ['class']
87 | });
88 | 


--------------------------------------------------------------------------------
/assets/icon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg
 3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 4 |    xmlns:cc="http://creativecommons.org/ns#"
 5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 6 |    xmlns:svg="http://www.w3.org/2000/svg"
 7 |    xmlns="http://www.w3.org/2000/svg"
 8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10 |    inkscape:export-ydpi="104"
11 |    inkscape:export-xdpi="104"
12 |    inkscape:export-filename="/home/informatic/Projects/youtube-webos/largeIcon.png"
13 |    width="120"
14 |    height="120"
15 |    viewBox="0 0 31.749999 31.750001"
16 |    version="1.1"
17 |    id="svg8"
18 |    inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
19 |    sodipodi:docname="icon.svg">
20 |   <defs
21 |      id="defs2" />
22 |   <sodipodi:namedview
23 |      id="base"
24 |      pagecolor="#fe0000"
25 |      bordercolor="#666666"
26 |      borderopacity="1.0"
27 |      inkscape:pageopacity="1"
28 |      inkscape:pageshadow="2"
29 |      inkscape:zoom="1.5271908"
30 |      inkscape:cx="3.7196771"
31 |      inkscape:cy="111.2233"
32 |      inkscape:document-units="mm"
33 |      inkscape:current-layer="layer1"
34 |      inkscape:document-rotation="0"
35 |      showgrid="false"
36 |      units="px"
37 |      showguides="true"
38 |      inkscape:guide-bbox="true"
39 |      inkscape:window-width="1920"
40 |      inkscape:window-height="1062"
41 |      inkscape:window-x="0"
42 |      inkscape:window-y="18"
43 |      inkscape:window-maximized="1">
44 |     <sodipodi:guide
45 |        position="-111.4957,1.4450555"
46 |        orientation="1,0"
47 |        id="guide849" />
48 |     <sodipodi:guide
49 |        position="-13.576889,81.934487"
50 |        orientation="0,-1"
51 |        id="guide851" />
52 |   </sodipodi:namedview>
53 |   <metadata
54 |      id="metadata5">
55 |     <rdf:RDF>
56 |       <cc:Work
57 |          rdf:about="">
58 |         <dc:format>image/svg+xml</dc:format>
59 |         <dc:type
60 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
61 |         <dc:title></dc:title>
62 |       </cc:Work>
63 |     </rdf:RDF>
64 |   </metadata>
65 |   <g
66 |      inkscape:label="Layer 1"
67 |      inkscape:groupmode="layer"
68 |      id="layer1">
69 |     <path
70 |        id="path853"
71 |        style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:0.15913px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
72 |        d="m 15.912207,8.28089 c -0.195096,0 -1.115834,1.6350003 -2.158524,3.608048 h 4.292244 C 17.016939,9.9158523 16.107306,8.28089 15.912207,8.28089 Z m -2.967261,5.153173 c -0.315755,0.611655 -0.62749,1.222985 -0.923457,1.806608 h 7.732861 c -0.291935,-0.583616 -0.599556,-1.194957 -0.911056,-1.806608 z m -1.702221,3.351734 c -0.552947,1.103335 -0.956147,1.919679 -1.01906,2.04742 H 8.4981896 c -0.3296656,0 -0.5947958,0.265647 -0.5947958,0.595312 v 0.270785 c 0,0.329665 0.2651302,0.594795 0.5947958,0.594795 H 23.251811 c 0.329666,0 0.594795,-0.26513 0.594795,-0.594795 v -0.270785 c 0,-0.329665 -0.265129,-0.595312 -0.594795,-0.595312 h -1.724443 c -0.06203,-0.127755 -0.459747,-0.944093 -1.005107,-2.04742 z" />
73 |     <g
74 |        id="g1053"
75 |        transform="translate(-0.81692282,-0.84791161)" />
76 |   </g>
77 | </svg>
78 | 


--------------------------------------------------------------------------------
/eslint.config.ts:
--------------------------------------------------------------------------------
  1 | import assert from 'node:assert';
  2 | 
  3 | import eslintJs from '@eslint/js';
  4 | import type { ESLint, Linter } from 'eslint';
  5 | import stylistic from '@stylistic/eslint-plugin';
  6 | import prettierConfig from 'eslint-config-prettier';
  7 | import * as regexpPlugin from 'eslint-plugin-regexp';
  8 | import globals from 'globals';
  9 | import pkgJson from './package.json' with { type: 'json' };
 10 | 
 11 | const defaultSourceType: Linter.SourceType = 'module';
 12 | assert(pkgJson.type === defaultSourceType);
 13 | 
 14 | const configs = [
 15 |   eslintJs.configs.recommended,
 16 |   prettierConfig,
 17 |   regexpPlugin.configs['flat/recommended'],
 18 | 
 19 |   {
 20 |     plugins: {
 21 |       // Cast needed due to type mismatch even though this is the recommmended way to use the plugin.
 22 |       '@stylistic': stylistic as ESLint.Plugin
 23 |     },
 24 | 
 25 |     linterOptions: {
 26 |       reportUnusedDisableDirectives: 'error'
 27 |     },
 28 | 
 29 |     languageOptions: {
 30 |       sourceType: defaultSourceType,
 31 |       parserOptions: {
 32 |         ecmaFeatures: {
 33 |           impliedStrict: true
 34 |         }
 35 |       },
 36 |       globals: {
 37 |         ...globals.nodeBuiltin
 38 |       }
 39 |     },
 40 | 
 41 |     rules: {
 42 |       'no-var': 'error',
 43 |       'no-await-in-loop': 'error',
 44 |       'no-implicit-globals': ['error'],
 45 |       'no-unused-vars': ['error', { vars: 'local', argsIgnorePattern: '^_' }],
 46 |       'no-useless-rename': ['error'],
 47 |       'no-useless-computed-key': 'error',
 48 |       'no-useless-constructor': 'error',
 49 |       'no-useless-return': 'error',
 50 |       'arrow-body-style': ['error', 'as-needed'],
 51 |       'no-lonely-if': 'error',
 52 |       'prefer-object-has-own': 'error',
 53 |       'prefer-exponentiation-operator': 'error',
 54 |       'prefer-regex-literals': ['error', { disallowRedundantWrapping: true }],
 55 |       'array-callback-return': [
 56 |         'error',
 57 |         { checkForEach: true, allowVoid: true }
 58 |       ],
 59 |       'no-constructor-return': 'error',
 60 |       'no-unmodified-loop-condition': 'error',
 61 |       'no-useless-assignment': 'error',
 62 | 
 63 |       // @stylistic rules - needed as prettier doesn't handle these
 64 |       '@stylistic/quotes': ['error', 'single', { avoidEscape: true }],
 65 | 
 66 |       /* eslint-plugin-regexp */
 67 |       'regexp/prefer-character-class': ['error', { minAlternatives: 2 }],
 68 |       'regexp/no-empty-alternative': 'error', // Set to warn in recommended config
 69 |       'regexp/no-lazy-ends': 'error', // Set to warn in recommended config
 70 |       'regexp/no-potentially-useless-backreference': 'error', // Set to warn in recommended config
 71 |       'regexp/confusing-quantifier': 'error', // Set to warn in recommended config
 72 |       'regexp/no-useless-flag': 'error', // Set to warn in recommended config
 73 |       'regexp/optimal-lookaround-quantifier': 'error' // Set to warn in recommended config
 74 |     }
 75 |   },
 76 | 
 77 |   {
 78 |     files: ['src/**/*'],
 79 |     languageOptions: {
 80 |       globals: {
 81 |         ...globals.browser
 82 |       }
 83 |     }
 84 |   },
 85 | 
 86 |   {
 87 |     // Why doesn't ESLint do this by default is beyond me.
 88 |     files: ['**/*.cjs'],
 89 |     languageOptions: {
 90 |       sourceType: 'commonjs'
 91 |     }
 92 |   },
 93 | 
 94 |   {
 95 |     // Why doesn't ESLint do this by default is beyond me.
 96 |     files: ['**/*.mjs'],
 97 |     languageOptions: {
 98 |       sourceType: 'module'
 99 |     }
100 |   },
101 | 
102 |   {
103 |     // `ignores` field must be in the very bottom config.
104 |     ignores: ['dist/**/*', '**/*-polyfill.*']
105 |   }
106 | ] as const satisfies Linter.Config[];
107 | 
108 | export default configs;
109 | 


--------------------------------------------------------------------------------
/src/hooks/fetch.ts:
--------------------------------------------------------------------------------
  1 | import { CustomEventTarget, TypedCustomEvent } from '../custom-event-target';
  2 | 
  3 | export interface StringConvertible {
  4 |   toString(): string;
  5 | }
  6 | 
  7 | export type FetchTarget = Request | StringConvertible;
  8 | 
  9 | let registry: FetchRegistry | null = null;
 10 | 
 11 | export interface RequestInfo {
 12 |   url: URL;
 13 |   resource: FetchTarget;
 14 |   init?: RequestInit | undefined;
 15 | }
 16 | 
 17 | interface EventMap {
 18 |   request: CustomEvent<RequestInfo>;
 19 |   response: CustomEvent<Response>;
 20 | }
 21 | 
 22 | export class FetchRegistry extends CustomEventTarget<EventMap> {
 23 |   #originalFetch: typeof fetch;
 24 |   #fetchCount = 0;
 25 | 
 26 |   private constructor() {
 27 |     super();
 28 | 
 29 |     this.#originalFetch = window.fetch.bind(window);
 30 |     window.fetch = this.#customFetch;
 31 |   }
 32 | 
 33 |   static async #dumpBody(resource: Request | Response) {
 34 |     if (
 35 |       !resource?.constructor?.name ||
 36 |       !['Request', 'Response'].includes(resource.constructor.name)
 37 |     )
 38 |       return null;
 39 | 
 40 |     const blob = await resource.clone().blob();
 41 |     if (!blob.size) return null;
 42 | 
 43 |     const fr = new FileReader();
 44 | 
 45 |     const res = new Promise((resolve) => {
 46 |       fr.addEventListener('load', () => {
 47 |         resolve(fr.result);
 48 |       });
 49 |     });
 50 | 
 51 |     fr.readAsDataURL(blob);
 52 | 
 53 |     return res;
 54 |   }
 55 | 
 56 |   #customFetch = async (resource: FetchTarget, init?: RequestInit) => {
 57 |     if (window.__ytaf_debug__) {
 58 |       console.debug(`Request ${this.#fetchCount}:`, resource);
 59 |       init && console.debug(`Options  ${this.#fetchCount}:`, init);
 60 | 
 61 |       if (resource instanceof Request) {
 62 |         const reqBody = await FetchRegistry.#dumpBody(resource);
 63 |         reqBody && console.debug(`Request Body ${this.#fetchCount}:`, reqBody);
 64 |       }
 65 |     }
 66 | 
 67 |     const url = new URL(
 68 |       resource instanceof Request ? resource.url : resource.toString(),
 69 |       document.location.href
 70 |     );
 71 |     const reqAllowed = this.dispatchEvent(
 72 |       new TypedCustomEvent('request', {
 73 |         detail: { url, resource, init },
 74 |         cancelable: true
 75 |       })
 76 |     );
 77 |     if (!reqAllowed) {
 78 |       console.info(
 79 |         `Fetch request ${this.#fetchCount} was cancelled by listener.`,
 80 |         resource,
 81 |         init
 82 |       );
 83 |       throw new TypeError('Failed to fetch');
 84 |     }
 85 | 
 86 |     // @ts-expect-error
 87 |     const res = await this.#originalFetch(resource, init);
 88 | 
 89 |     if (window.__ytaf_debug__) {
 90 |       console.debug(`Response ${this.#fetchCount}:`, res);
 91 | 
 92 |       const resBody = await FetchRegistry.#dumpBody(res);
 93 |       resBody && console.debug(`Response Body ${this.#fetchCount}:`, resBody);
 94 |     }
 95 | 
 96 |     const resAllowed = this.dispatchEvent(
 97 |       new TypedCustomEvent('response', { detail: res, cancelable: true })
 98 |     );
 99 | 
100 |     if (!resAllowed) {
101 |       console.info(
102 |         `Fetch response ${this.#fetchCount} was cancelled by listener.`,
103 |         res
104 |       );
105 |       throw new TypeError('Failed to fetch');
106 |     }
107 | 
108 |     this.#fetchCount++;
109 | 
110 |     return res;
111 |   };
112 | 
113 |   static getInstance() {
114 |     if (!registry) {
115 |       registry = new FetchRegistry();
116 |     }
117 |     return registry;
118 |   }
119 | 
120 |   [Symbol.dispose]() {
121 |     window.fetch = this.#originalFetch;
122 |     registry = null;
123 |   }
124 | }
125 | 


--------------------------------------------------------------------------------
/src/video-quality.js:
--------------------------------------------------------------------------------
  1 | import { configRead, configAddChangeListener, configRemoveChangeListener } from './config.js';
  2 | 
  3 | let player = null;
  4 | let lastVideoId = null;
  5 | let qualityTimer = null;
  6 | let stateHandler = null;
  7 | let initTimer = null;
  8 | let configCleanup = null;
  9 | 
 10 | // Player States
 11 | const STATE_UNSTARTED = -1;
 12 | const STATE_BUFFERING = 3;
 13 | const STATE_PLAYING = 1;
 14 | 
 15 | function shouldForce() {
 16 |   return configRead('forceHighResVideo') && 
 17 |          (!player?.isInline || !player.isInline());
 18 | }
 19 | 
 20 | function setQuality() {
 21 |   if (!player || !shouldForce()) return;
 22 |   
 23 |   try {
 24 |     player.setPlaybackQualityRange('highres', 'highres');
 25 |     player.setPlaybackQuality?.('highres');
 26 |   } catch (e) {}
 27 | }
 28 | 
 29 | function clearTimer() {
 30 |   if (qualityTimer) {
 31 |     clearTimeout(qualityTimer);
 32 |     qualityTimer = null;
 33 |   }
 34 | }
 35 | 
 36 | function checkQuality(tries = 1) {
 37 |   clearTimer();
 38 |   if (!shouldForce() || !player || tries > 3) return;
 39 |   
 40 |   const label = player.getPlaybackQualityLabel?.() || '';
 41 |   if (!label || label === 'auto') {
 42 |     qualityTimer = setTimeout(() => checkQuality(tries + 1), 1000);
 43 |   }
 44 | }
 45 | 
 46 | function onStateChange(state) {
 47 |   if (state === STATE_BUFFERING || state === STATE_UNSTARTED) {
 48 |     setQuality();
 49 |   }
 50 | 
 51 |   if (state === STATE_PLAYING) {
 52 |     const videoId = player.getVideoData?.().video_id;
 53 |     if (videoId && videoId !== lastVideoId) {
 54 |       lastVideoId = videoId;
 55 |       setQuality();
 56 |       clearTimer();
 57 |       qualityTimer = setTimeout(checkQuality, 1000);
 58 |     }
 59 |   }
 60 | }
 61 | 
 62 | export function destroyVideoQuality() {
 63 |   if (initTimer) {
 64 |     clearTimeout(initTimer);
 65 |     initTimer = null;
 66 |   }
 67 |   
 68 |   clearTimer();
 69 |   
 70 |   if (player && stateHandler) {
 71 |     player.removeEventListener?.('onStateChange', stateHandler);
 72 |   }
 73 |   
 74 |   configCleanup?.();
 75 |   
 76 |   player = null;
 77 |   stateHandler = null;
 78 |   lastVideoId = null;
 79 |   configCleanup = null;
 80 | }
 81 | 
 82 | export function initVideoQuality() {
 83 |   if (player) return;
 84 |   
 85 |   const attach = () => {
 86 |     // Direct query - fastest on webOS
 87 |     const p = document.querySelector('.html5-video-player');
 88 |     if (p?.setPlaybackQualityRange) {
 89 |       player = p;
 90 |       stateHandler = onStateChange;
 91 |       
 92 |       player.removeEventListener?.('onStateChange', stateHandler);
 93 |       player.addEventListener?.('onStateChange', stateHandler);
 94 |       
 95 |       if (player.getPlayerState?.() === STATE_PLAYING) {
 96 |         setQuality();
 97 |       }
 98 |       
 99 |       // Set up config listener AFTER player is attached
100 |       if (configAddChangeListener && !configCleanup) {
101 |         const onChange = (evt) => {
102 |           if (evt.detail.newValue) setQuality();
103 |         };
104 |         
105 |         configCleanup = configAddChangeListener('forceHighResVideo', onChange) || 
106 |           (() => configRemoveChangeListener?.('forceHighResVideo', onChange));
107 |       }
108 |       
109 |       return true;
110 |     }
111 |     return false;
112 |   };
113 | 
114 |   if (attach()) return;
115 | 
116 |   // Lightweight polling for webOS - more efficient than MutationObserver on older TVs
117 |   let attempts = 0;
118 |   const poll = () => {
119 |     if (attach() || attempts++ >= 50) {
120 |       clearTimeout(initTimer);
121 |       initTimer = null;
122 |     } else {
123 |       initTimer = setTimeout(poll, 200);
124 |     }
125 |   };
126 |   
127 |   poll();
128 | }


--------------------------------------------------------------------------------
/src/yt-fixes.js:
--------------------------------------------------------------------------------
 1 | /* src/yt-fixes.js */
 2 | import { configRead } from './config.js';
 3 | 
 4 | let historyCache = false;
 5 | 
 6 | export function initYouTubeFixes() {
 7 |     console.log('[YT-Fixes] Initializing...');
 8 |     // initSignInPromptFix(); // Disabled: Handled via JSON block in adblock.js to prevent nav bugs
 9 |     initSearchHistoryFix();
10 | }
11 | 
12 | function initSearchHistoryFix() {
13 |     if (attemptSearchHistoryFix()) return; 
14 | 
15 |     const observer = new MutationObserver((mutations, obs) => {
16 |         if (historyCache) {
17 |             obs.disconnect();
18 |             return;
19 |         }
20 |         if (attemptSearchHistoryFix()) {
21 |             obs.disconnect();
22 |         }
23 |     });
24 | 
25 |     observer.observe(document.body, { childList: true, subtree: true });
26 | }
27 | 
28 | function attemptSearchHistoryFix() {
29 |     if (historyCache) return true;
30 |     const suggestionsBox = document.querySelector('ytlr-search-suggestions');
31 |     if (!suggestionsBox) return false;
32 | 
33 |     if (suggestionsBox.childElementCount > 0) {
34 |         historyCache = true;
35 |         return true;
36 |     }
37 | 
38 |     if (!suggestionsBox.dataset.historyCheckPending) {
39 |         suggestionsBox.dataset.historyCheckPending = 'true';
40 |         
41 |         // Give the app 500ms to populate the list naturally
42 |         setTimeout(() => {
43 |             // Ensure the box still exists in the DOM
44 |             if (!suggestionsBox.isConnected) return;
45 | 
46 |             if (suggestionsBox.childElementCount === 0 && !suggestionsBox.dataset.historyFixed) {
47 |                 const injected = populateSearchHistory(suggestionsBox);
48 |                 if (injected) {
49 |                     historyCache = true;
50 |                 }
51 |             } else {
52 |                 historyCache = true;
53 |             }
54 |         }, 500); 
55 | 
56 |         return true; 
57 |     }
58 | 
59 |     return true; 
60 | }
61 | 
62 | function populateSearchHistory(container) {
63 |     const storageKey = 'yt.leanback.default.search-history::recent-searches';
64 |     const rawData = window.localStorage.getItem(storageKey);
65 |     if (!rawData) return false;
66 | 
67 |     try {
68 |         const parsed = JSON.parse(rawData);
69 |         const historyData = parsed.data;
70 |         if (!historyData || !Array.isArray(historyData) || historyData.length === 0) return false;
71 | 
72 |         container.dataset.historyFixed = 'true';
73 |         container.style.cssText = `display: flex; flex-direction: column; width: 30rem; position: absolute; left: 6.5rem; top: 7.25rem; height: auto; padding: 1rem; box-sizing: border-box; background-color: transparent; z-index: 999;`;
74 | 
75 |         historyData.slice(0, 8).forEach(item => {
76 |             const searchTerm = item[0];
77 |             const row = document.createElement('div');
78 |             row.className = 'injected-history-item';
79 |             row.setAttribute('tabindex', '0');
80 |             row.setAttribute('role', 'button');
81 |             row.style.cssText = `display: flex; align-items: center; padding: 0.8rem 1rem; margin-bottom: 0.5rem; background-color: rgba(255,255,255,0.1); border-radius: 4px; cursor: pointer; color: #f1f1f1; font-family: Roboto, sans-serif; font-size: 1.4rem; transition: background-color 0.2s;`;
82 |             row.innerHTML = `<span style="margin-right: 1rem; opacity: 0.7;">↺</span><span style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${searchTerm}</span>`;
83 |             
84 |             row.addEventListener('click', () => {
85 |                 window.location.hash = `#/results?search_query=${encodeURIComponent(searchTerm)}`;
86 |             });
87 |             row.addEventListener('keydown', (e) => {
88 |                 if (e.key === 'Enter') row.click();
89 |             });
90 | 
91 |             container.appendChild(row);
92 |         });
93 |         return true;
94 |     } catch (e) {
95 |         return false;
96 |     }
97 | }


--------------------------------------------------------------------------------
/src/auto-login.js:
--------------------------------------------------------------------------------
 1 | import { configRead, configAddChangeListener } from './config.js';
 2 | 
 3 | let autoLoginChecked = false;
 4 | let pageObserver = null;
 5 | let currentPageType = null;
 6 | 
 7 | function disableWhosWatching(enableWhoIsWatchingMenu) { // Credit to reisxd || https://github.com/reisxd/TizenTube/
 8 |   try {
 9 |     const recurringActionsKey = 'yt.leanback.default::recurring_actions';
10 |     const storedData = localStorage.getItem(recurringActionsKey);
11 |     
12 |     if (!storedData) {
13 |       console.warn('Auto login: No recurring actions data found in localStorage');
14 |       return;
15 |     }
16 |     
17 |     const LeanbackRecurringActions = JSON.parse(storedData);
18 |     const date = new Date();
19 |     
20 |     if (!enableWhoIsWatchingMenu) {
21 |       // Disable "Who's watching" by setting lastFired to 7 days in the future
22 |       console.info('Auto login: Disabling "Who\'s watching" screen');
23 |       date.setDate(date.getDate() + 7);
24 |       
25 |       // Update all relevant recurring actions
26 |       const actions = LeanbackRecurringActions.data?.data;
27 |       if (actions) {
28 |         if (actions["startup-screen-account-selector-with-guest"]) {
29 |           actions["startup-screen-account-selector-with-guest"].lastFired = date.getTime();
30 |         }
31 |         if (actions.whos_watching_fullscreen_zero_accounts) {
32 |           actions.whos_watching_fullscreen_zero_accounts.lastFired = date.getTime();
33 |         }
34 |         if (actions["startup-screen-signed-out-welcome-back"]) {
35 |           actions["startup-screen-signed-out-welcome-back"].lastFired = date.getTime();
36 |         }
37 |       }
38 |     } else {
39 |       // Enable "Who's watching" but respect the 2-hour cooldown
40 |       console.info('Auto login: Enabling "Who\'s watching" screen with cooldown check');
41 |       
42 |       const actions = LeanbackRecurringActions.data?.data;
43 |       if (actions && actions["startup-screen-account-selector-with-guest"]) {
44 |         const lastFiredTime = actions["startup-screen-account-selector-with-guest"].lastFired;
45 |         const timeDifference = date.getTime() - lastFiredTime;
46 |         const twoHoursInMs = 2 * 60 * 60 * 1000;
47 |         
48 |         // Only update if more than 2 hours have passed or if lastFired is in the future
49 |         if (timeDifference < 0 || timeDifference >= twoHoursInMs) {
50 |           actions["startup-screen-account-selector-with-guest"].lastFired = date.getTime();
51 |           if (actions.whos_watching_fullscreen_zero_accounts) {
52 |             actions.whos_watching_fullscreen_zero_accounts.lastFired = date.getTime();
53 |           }
54 |           if (actions["startup-screen-signed-out-welcome-back"]) {
55 |             actions["startup-screen-signed-out-welcome-back"].lastFired = date.getTime();
56 |           }
57 |         } else {
58 |           console.info('Auto login: Skipping "Who\'s watching" update due to 2-hour cooldown');
59 |           return;
60 |         }
61 |       }
62 |     }
63 |     
64 |     // Save updated data back to localStorage
65 |     localStorage.setItem(recurringActionsKey, JSON.stringify(LeanbackRecurringActions));
66 |     console.info('Auto login: Successfully updated "Who\'s watching" settings');
67 |     
68 |   } catch (error) {
69 |     console.error('Auto login: Failed to update "Who\'s watching" settings:', error);
70 |   }
71 | }
72 | 
73 | function initAutoLogin() {
74 |   const autoLoginEnabled = configRead('enableAutoLogin');
75 |   
76 |   if (autoLoginEnabled) {
77 |     disableWhosWatching(false);
78 |   }
79 | }
80 | 
81 | // Initialize when DOM is ready
82 | if (document.readyState === 'loading') {
83 |   document.addEventListener('DOMContentLoaded', initAutoLogin);
84 | } else {
85 |   initAutoLogin();
86 | }
87 | 
88 | // Listen for changes to the auto-login setting
89 | configAddChangeListener('enableAutoLogin', (evt) => {
90 |   if (evt.detail.newValue) {
91 |     console.info('Auto login setting changed');
92 | 	initAutoLogin();
93 |   } else {
94 |     console.info('Auto login disabled');
95 |   }
96 | });
97 | 
98 | export { initAutoLogin };


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | import CopyPlugin from 'copy-webpack-plugin';
  2 | import { TransformAsyncModulesPlugin } from 'transform-async-modules-webpack-plugin';
  3 | import pkgJson from './package.json' with { type: 'json' };
  4 | import TerserPlugin from 'terser-webpack-plugin';
  5 | 
  6 | /** @type {(env: Record<string, string>) => (import('webpack').Configuration)[]} */
  7 | const makeConfig = () => [
  8 |   {
  9 |     /**
 10 |      * NOTE: Builds with devtool = 'eval' contain very big eval chunks which seem
 11 |      * to cause segfaults (at least) on nodeJS v0.12.2 used on webOS 3.x.
 12 |      * Set to false for smallest bundle size, or 'source-map' for debugging
 13 |      */
 14 |     devtool: false, // Change to 'source-map' if you need debugging
 15 | 
 16 |     entry: {
 17 |       index: './src/index.js',
 18 |       userScript: {
 19 |         import: './src/userScript.js',
 20 |         filename: 'webOSUserScripts/[name].js'
 21 |       }
 22 |     },
 23 | 
 24 |     resolve: {
 25 |       extensions: ['.mjs', '.cjs', '.js', '.json', '.ts']
 26 |     },
 27 | 
 28 |     module: {
 29 |       rules: [
 30 |         {
 31 |           test: /\.[mc]?[jt]s$/i,
 32 | 
 33 |           loader: 'babel-loader',
 34 |           exclude: [
 35 |             // Some module should not be transpiled by Babel
 36 |             // See https://github.com/zloirock/core-js/issues/743#issuecomment-572074215
 37 |             // \\ for Windows, / for macOS and Linux
 38 |             /node_modules[\\/]core-js/,
 39 |             /node_modules[\\/]webpack[\\/]buildin/
 40 |           ],
 41 |           options: {
 42 |             cacheDirectory: true
 43 |           },
 44 |           resolve: {
 45 |             // File extension DON'T MATTER in a bundler.
 46 |             fullySpecified: false
 47 |           }
 48 |         },
 49 |         {
 50 |           test: /\.css$/i,
 51 |           use: [
 52 |             { loader: 'style-loader' },
 53 |             {
 54 |               loader: 'css-loader',
 55 |               options: { 
 56 |                 esModule: false, 
 57 |                 importLoaders: 1,
 58 |                 modules: false
 59 |               }
 60 |             },
 61 |             {
 62 |               loader: 'postcss-loader',
 63 |               options: {
 64 |                 postcssOptions: {
 65 |                   plugins: [
 66 |                     ['cssnano', {
 67 |                       preset: ['default', {
 68 |                         discardComments: {
 69 |                           removeAll: true
 70 |                         },
 71 |                         normalizeWhitespace: true,
 72 |                         colormin: true,
 73 |                         minifySelectors: true,
 74 |                         minifyFontValues: true,
 75 |                       }]
 76 |                     }]
 77 |                   ]
 78 |                 }
 79 |               }
 80 |             }
 81 |           ]
 82 |         }
 83 |       ]
 84 |     },
 85 | 
 86 |     optimization: {
 87 |       minimize: true,
 88 |       minimizer: [
 89 |         new TerserPlugin({
 90 |           terserOptions: {
 91 |             format: {
 92 |               comments: false, // Remove all comments
 93 |               ascii_only: true, // Escape unicode characters
 94 |             },
 95 |             compress: {
 96 |               drop_console: false, // Keep console.log (set true to remove)
 97 |               drop_debugger: true, // Remove debugger statements
 98 |               pure_funcs: ['console.debug', 'console.trace'], // Remove specific console methods
 99 |               passes: 4, // Run compression multiple times for better results
100 |               unsafe: false, // Keep safe (set true for more aggressive compression)
101 |               unsafe_comps: false,
102 |               unsafe_math: false,
103 |               unsafe_proto: false,
104 |             },
105 |             mangle: {
106 |               safari10: true, // Ensure compatibility
107 |             },
108 |           },
109 |           extractComments: false,
110 |         }),
111 |       ],
112 |     },
113 | 
114 |     performance: {
115 |       hints: false, // Disable performance warnings for large bundles
116 |     },
117 | 
118 |     plugins: [
119 |       new CopyPlugin({
120 |         patterns: [
121 |           { context: 'assets', from: '**/*' },
122 |           { context: 'src', from: 'index.html' }
123 |         ]
124 | 	}),
125 |       // babel doesn't transform top-level await.
126 |       // webpack transforms it to async modules.
127 |       // This plugin calls babel again to transform remove the `async` keyword usage after the fact.
128 |       new TransformAsyncModulesPlugin({
129 |         // @ts-expect-error Bad types
130 |         runtime: {
131 |           version: pkgJson.devDependencies['@babel/plugin-transform-runtime']
132 |         }
133 |       })
134 |     ]
135 |   }
136 | ];
137 | 
138 | export default makeConfig;


--------------------------------------------------------------------------------
/.github/workflows/build_repo.yml:
--------------------------------------------------------------------------------
  1 | name: Update Homebrew Repository
  2 | on:
  3 |   release:
  4 |     types: [published]
  5 |   workflow_dispatch:
  6 | permissions:
  7 |   contents: write
  8 |   pages: write
  9 |   id-token: write
 10 | jobs:
 11 |   update-repo:
 12 |     runs-on: ubuntu-latest
 13 |     steps:
 14 |       - name: Checkout code
 15 |         uses: actions/checkout@v4
 16 |       - name: Set up Python
 17 |         uses: actions/setup-python@v4
 18 |         with:
 19 |           python-version: '3.x'
 20 |       - name: Generate repo.json
 21 |         env:
 22 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 23 |           REPO_NAME: ${{ github.repository }}
 24 |         run: |
 25 |           import json
 26 |           import os
 27 |           import sys
 28 |           import urllib.request
 29 |           import hashlib
 30 |           
 31 |           # --- CONFIGURATION ---
 32 |           APP_INFO_PATH = 'assets/appinfo.json' 
 33 |           ICON_PATH_IN_REPO = 'assets/icon.png'
 34 |           # ---------------------
 35 |           
 36 |           if not os.path.exists(APP_INFO_PATH):
 37 |               print(f"Error: {APP_INFO_PATH} not found.")
 38 |               sys.exit(1)
 39 |               
 40 |           with open(APP_INFO_PATH, 'r') as f:
 41 |               app_info = json.load(f)
 42 |           
 43 |           repo_name = os.environ['REPO_NAME']
 44 |           api_url = f"https://api.github.com/repos/{repo_name}/releases/latest"
 45 |           
 46 |           req = urllib.request.Request(api_url)
 47 |           req.add_header('Authorization', f"Bearer {os.environ['GITHUB_TOKEN']}")
 48 |           
 49 |           try:
 50 |               with urllib.request.urlopen(req) as response:
 51 |                   release_data = json.load(response)
 52 |           except Exception as e:
 53 |               print(f"Failed to fetch release: {e}")
 54 |               sys.exit(1)
 55 |           
 56 |           ipk_url = None
 57 |           for asset in release_data['assets']:
 58 |               if asset['name'].endswith('.ipk'):
 59 |                   ipk_url = asset['browser_download_url']
 60 |                   break
 61 |           
 62 |           if not ipk_url:
 63 |               print("No .ipk file found in the latest release")
 64 |               sys.exit(1)
 65 |           
 66 |           # Download IPK and calculate SHA256
 67 |           print(f"Downloading IPK from {ipk_url}")
 68 |           req = urllib.request.Request(ipk_url)
 69 |           with urllib.request.urlopen(req) as response:
 70 |               ipk_data = response.read()
 71 |               sha256_hash = hashlib.sha256(ipk_data).hexdigest()
 72 |           
 73 |           print(f"SHA256: {sha256_hash}")
 74 |           
 75 |           manifest = {
 76 |               "id": app_info.get('id'),
 77 |               "version": app_info.get('version'),
 78 |               "type": app_info.get('type', 'web'),
 79 |               "title": app_info.get('title'),
 80 |               "appDescription": app_info.get('description', app_info.get('title')),
 81 |               "iconUri": f"https://raw.githubusercontent.com/{repo_name}/main/{ICON_PATH_IN_REPO}",
 82 |               "sourceUrl": f"https://github.com/{repo_name}",
 83 |               "rootRequired": False,
 84 |               "ipkUrl": ipk_url,
 85 |               "ipkHash": {
 86 |                   "sha256": sha256_hash
 87 |               }
 88 |           }
 89 |           
 90 |           package = {
 91 |               "id": app_info.get('id'),
 92 |               "title": app_info.get('title'),
 93 |               "iconUri": f"https://raw.githubusercontent.com/{repo_name}/main/{ICON_PATH_IN_REPO}",
 94 |               "manifest": manifest
 95 |           }
 96 |           
 97 |           repo_data = {
 98 |               "paging": {
 99 |                   "page": 1,
100 |                   "count": 1,
101 |                   "maxPage": 1,
102 |                   "itemsTotal": 1
103 |               },
104 |               "packages": [package]
105 |           }
106 |           
107 |           with open('repo.json', 'w') as f:
108 |               json.dump(repo_data, f, indent=2)
109 |           
110 |           print("repo.json generated successfully!")
111 |         shell: python
112 |         
113 |       - name: Commit and Push repo.json
114 |         run: |
115 |           git config --global user.name 'GitHub Actions'
116 |           git config --global user.email 'actions@github.com'
117 |           
118 |           # Checkout the main branch explicitly
119 |           git fetch origin main
120 |           git checkout main
121 |           
122 |           # Add and commit changes
123 |           git add repo.json
124 |           
125 |           # Only commit if there are changes
126 |           if git diff --staged --quiet; then
127 |             echo "No changes to commit"
128 |           else
129 |             git commit -m "Update repo.json for new release"
130 |             git push origin main
131 |           fi
132 | 


--------------------------------------------------------------------------------
/src/thumbnail-quality.ts:
--------------------------------------------------------------------------------
  1 | const webpTestImgs = {
  2 |   lossy: 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
  3 |   lossless: 'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==',
  4 |   alpha:
  5 |     'UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==',
  6 |   animation:
  7 |     'UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA'
  8 | } as const;
  9 | 
 10 | function checkWebpFeature(
 11 |   feature: keyof typeof webpTestImgs,
 12 |   callback: (
 13 |     featureName: keyof typeof webpTestImgs,
 14 |     isSupported: boolean
 15 |   ) => void
 16 | ) {
 17 |   const img = new Image();
 18 |   img.onload = function () {
 19 |     const result = img.width > 0 && img.height > 0;
 20 |     callback(feature, result);
 21 |   };
 22 | 
 23 |   img.onerror = function () {
 24 |     callback(feature, false);
 25 |   };
 26 | 
 27 |   img.src = 'data:image/webp;base64,' + webpTestImgs[feature];
 28 | }
 29 | 
 30 | let webpSupported = false;
 31 | checkWebpFeature('lossy', (_, support) => {
 32 |   webpSupported = support;
 33 | });
 34 | 
 35 | function rewriteURL(url: URL) {
 36 |   const YT_THUMBNAIL_PATHNAME_REGEX =
 37 |     /vi(?:_webp)?(\/.*?\/)([a-z0-9]+?)(_\w*?)?\.[a-z]+$/g;
 38 | 
 39 |   const YT_TARGET_THUMBNAIL_NAMES = [
 40 |     'sddefault',
 41 |     'hqdefault',
 42 |     'mqdefault',
 43 |     'default'
 44 |   ] as const;
 45 | 
 46 |   const isABTest = url.hostname.match(/^i\d/) !== null;
 47 |   // Don't know how to handle A/B test thumbnails so we don't upgrade them.
 48 |   if (isABTest) return null;
 49 | 
 50 |   const replacementPathname = url.pathname.replace(
 51 |     YT_THUMBNAIL_PATHNAME_REGEX,
 52 |     (match, p1, p2, p3) => {
 53 |       if (!YT_TARGET_THUMBNAIL_NAMES.includes(p2)) return match; // Only rewrite regular thumbnail URLs. Not shorts, etc.
 54 |       return `${webpSupported ? 'vi_webp' : 'vi'}${p1}sddefault${p3 ?? ''}.${webpSupported ? 'webp' : 'jpg'}`;
 55 |     }
 56 |   );
 57 |   if (url.pathname === replacementPathname)
 58 |     // pathname not changed because not a regular thumbnail or already upgraded.
 59 |     return null;
 60 | 
 61 |   url = new URL(url);
 62 | 
 63 |   url.pathname = replacementPathname;
 64 |   url.search = '';
 65 | 
 66 |   return url;
 67 | }
 68 | 
 69 | function parseCSSUrl(value: string): URL | undefined {
 70 |   try {
 71 |     return new URL(value.slice(4, -1).replace(/["']/g, ''));
 72 |   } catch (e) {
 73 |     return undefined; // Not a valid URL
 74 |   }
 75 | }
 76 | 
 77 | async function upgradeBgImg(element: HTMLElement) {
 78 |   const style = element.style;
 79 |   const old = parseCSSUrl(style.backgroundImage);
 80 |   if (!old) return;
 81 | 
 82 |   const target = rewriteURL(old);
 83 |   if (!target) return;
 84 | 
 85 |   const lazyLoader = new Image();
 86 | 
 87 |   lazyLoader.onload = () => {
 88 |     // Don't swap if a placeholder thumbnail was provided.
 89 |     // Placeholder thumbnails are the same size as the "default" size.
 90 |     if (lazyLoader.naturalHeight === 90) return;
 91 | 
 92 |     const curr = parseCSSUrl(style.backgroundImage);
 93 |     if (!curr) return;
 94 | 
 95 |     // Don't swap out element image if it has been changed while target image was loading.
 96 |     if (curr.href !== old.href) return;
 97 | 
 98 |     style.backgroundImage = `url(${target.href})`;
 99 |   };
100 | 
101 |   lazyLoader.src = target.href;
102 | }
103 | 
104 | const obs = new MutationObserver((mutations) => {
105 |   const YT_THUMBNAIL_ELEMENT_TAG = 'ytlr-thumbnail-details';
106 | 
107 |   const dummy = document.createElement('div');
108 | 
109 |   // handle backgroundImage change
110 |   // YT re-uses thumbnail elements in its virtual list implementation.
111 |   mutations
112 |     .filter((mut) => mut.type === 'attributes')
113 |     .map((mut) => [mut.target, mut] as const)
114 |     .filter((value): value is [HTMLElement, MutationRecord] => {
115 |       const [node, { oldValue }] = value;
116 |       dummy.style.cssText = oldValue ?? '';
117 | 
118 |       return (
119 |         node instanceof HTMLElement &&
120 |         node.matches(YT_THUMBNAIL_ELEMENT_TAG) &&
121 |         node.style.backgroundImage !== '' &&
122 |         node.style.backgroundImage !== dummy.style.backgroundImage
123 |       );
124 |     })
125 |     .map(([elem]) => elem)
126 |     .forEach(upgradeBgImg);
127 | 
128 |   // handle element add
129 |   mutations
130 |     .filter((mut) => mut.type === 'childList')
131 |     .flatMap((mut) => Array.from(mut.addedNodes))
132 |     .filter((node) => node instanceof HTMLElement)
133 |     .flatMap((elem) =>
134 |       Array.from(elem.querySelectorAll<HTMLElement>(YT_THUMBNAIL_ELEMENT_TAG))
135 |     )
136 |     .filter((elem) => elem.style.backgroundImage !== '')
137 |     .forEach(upgradeBgImg);
138 | });
139 | 
140 | function enableObserver() {
141 |   obs.observe(document.body, {
142 |     subtree: true,
143 |     childList: true,
144 |     attributes: true,
145 |     attributeFilter: ['style'],
146 |     attributeOldValue: true
147 |   });
148 | }
149 | 
150 | import { configRead, configAddChangeListener } from './config';
151 | 
152 | if (configRead('upgradeThumbnails')) enableObserver();
153 | 
154 | configAddChangeListener('upgradeThumbnails', (value) =>
155 |   value ? enableObserver() : obs.disconnect()
156 | );
157 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # youtube-webos
  2 | 
  3 | An upgraded fork of webosbrew's youtube-webos with extended features and fixes.
  4 | 
  5 | ## Added Features
  6 | - Full support for webOS 3, 4, 5, 6, 22, 23, 24, and 25 (older versions are untested)
  7 | - Enhanced Menu UI
  8 | - Auto Login - bypasses account selection screen
  9 | - Force Max Quality
 10 | - Hide Endcards
 11 | - Shortcuts - Programmable 0-9 key shortcuts during video playback
 12 | 
 13 | - SponsorBlock: Highlight feature added
 14 | -- All segment types added (Hook, Tangents, muted segments)
 15 | -- Color selector for all segments
 16 | -- Segment UI list replicating desktop segment list
 17 | -- Jump to highlight segment with blue button on LG remote
 18 | 
 19 | - Toggle black screen with red button on LG remote for OLED TVs
 20 | - Return YouTube Dislike - added to description tab in video
 21 | - Bug fixes, UI fixes
 22 | - Specific rules for different YouTube UI layouts
 23 | 
 24 | ## Improvements
 25 | - Rewritten codebase optimized for performance and efficiency to support LG TV hardware
 26 | 
 27 | Review changes made since 0.3.8 [here](https://github.com/NicholasBly/youtube-webos/blob/main/CHANGELOG.md)
 28 | 
 29 | <img width="537" height="450" alt="webOS_TV_25_Simulator_1 4 3_cNtrOpwkMt" src="https://github.com/user-attachments/assets/ce136794-d27f-4c9c-bcb8-6b0a495e3207" />
 30 | 
 31 | <img width="537" height="569" alt="webOS_TV_25_Simulator_1 4 3_g0uM4TjeIc" src="https://github.com/user-attachments/assets/857a939f-80d6-4cc4-9ecd-d07ecd02b552" />
 32 | 
 33 | <img width="537" height="507" alt="webOS_TV_25_Simulator_1 4 3_OMUQXUo48c" src="https://github.com/user-attachments/assets/60ab37ee-0322-438b-91b5-09dee100b4bf" />
 34 | 
 35 | 
 36 | <!--![Configuration Screen](https://github.com/NicholasBly/youtube-webos/blob/main/screenshots/webOS_TV_24_Simulator_mKe8Gv7zXq.png?raw=true)-->
 37 | ![Segment Skipped](https://github.com/NicholasBly/youtube-webos/blob/main/screenshots/2_sm_new.png?raw=true)
 38 | 
 39 | ## Features
 40 | 
 41 | - Advertisements blocking
 42 | - [SponsorBlock](https://sponsor.ajay.app/) integration
 43 | - [Autostart](#autostart)
 44 | 
 45 | **Note:** Configuration screen can be opened by pressing 🟩 GREEN button on the remote.
 46 | 
 47 | ## Pre-requisites
 48 | 
 49 | - Official YouTube app needs to be uninstalled before installation.
 50 | 
 51 | ## Installation
 52 | 
 53 | - Use [webOS Homebrew Channel](https://github.com/webosbrew/webos-homebrew-channel) - app is available via repo link: https://raw.githubusercontent.com/NicholasBly/youtube-webos/main/repo.json
 54 | - Use [Device Manager app](https://github.com/webosbrew/dev-manager-desktop) - see [Releases](https://github.com/NicholasBly/youtube-webos/releases) for a
 55 |   prebuilt `.ipk` binary file
 56 | - Use [webOS TV CLI tools](https://webostv.developer.lge.com/develop/tools/cli-installation) -
 57 |   `ares-install youtube...ipk` (For more information on configuring the webOS CLI tools, see [below](#development-tv-setup))
 58 | 
 59 | ## Configuration
 60 | 
 61 | Configuration screen can be opened by pressing 🟩 GREEN button on the remote.
 62 | Black screen / OLED mode can be toggled by pressing 🟥 RED button on the remote.
 63 | 
 64 | ### Autostart
 65 | 
 66 | In order to autostart an application the following command needs to be executed
 67 | via SSH or Telnet:
 68 | 
 69 | ```sh
 70 | luna-send-pub -n 1 'luna://com.webos.service.eim/addDevice' '{"appId":"youtube.leanback.v4","pigImage":"","mvpdIcon":""}'
 71 | ```
 72 | 
 73 | This will make "YouTube AdFree" display as an eligible input application (next
 74 | to HDMI/Live TV, etc...), and, if it was the last selected input, it will be
 75 | automatically launched when turning on the TV.
 76 | 
 77 | This will also greatly increase startup performance, since it will be runnning
 78 | constantly in the background, at the cost of increased idle memory usage.
 79 | (so far, relatively unnoticable in normal usage)
 80 | 
 81 | In order to disable autostart run this:
 82 | 
 83 | ```sh
 84 | luna-send-pub -n 1 'luna://com.webos.service.eim/deleteDevice' '{"appId":"youtube.leanback.v4"}'
 85 | ```
 86 | 
 87 | ## Building
 88 | 
 89 | - Clone the repository
 90 | 
 91 | ```sh
 92 | git clone https://github.com/NicholasBly/youtube-webos.git
 93 | ```
 94 | 
 95 | - Enter the folder and build the App, this will generate a `*.ipk` file.
 96 | 
 97 | ```sh
 98 | cd youtube-webos
 99 | 
100 | # Install dependencies (need to do this only when updating local repository / package.json is changed)
101 | npm install
102 | 
103 | npm run build && npm run package
104 | ```
105 | 
106 | ## Development TV setup
107 | 
108 | These instructions use the [webOS CLI tools](https://github.com/webos-tools/cli).
109 | See <https://webostv.developer.lge.com/develop/tools/cli-introduction> for more information.
110 | 
111 | ### Configuring webOS CLI tools with Developer Mode App
112 | 
113 | This is partially based on <https://webostv.developer.lge.com/develop/getting-started/developer-mode-app>.
114 | 
115 | - Install Developer Mode app from Content Store
116 | - Enable Developer Mode
117 | - Enable key server and download TV's private key: `http://TV_IP:9991/webos_rsa`  
118 |   The key must be saved under `~/.ssh` (or `%USERPROFILE%\.ssh` on Windows)
119 | - Configure the device using `ares-setup-device` (`-a` may need to be replaced with `-m` if device named `webos` is already configured)
120 |   - `PASSPHRASE` is the 6-character passphrase printed on screen in developer mode app
121 |   - `privatekey` path is relative to `${HOME}/.ssh` (Windows: `%USERPROFILE%\.ssh`)
122 | 
123 | ```sh
124 | ares-setup-device -a webos -i "username=prisoner" -i "privatekey=webos_rsa" -i "passphrase=PASSPHRASE" -i "host=TV_IP" -i "port=9922"
125 | ```
126 | 
127 | ### Configuring webOS CLI tools with Homebrew Channel / root
128 | 
129 | - Enable SSH in Homebrew Channel app
130 | - Generate SSH key on developer machine (`ssh-keygen -t rsa`)
131 | - Copy the private key (`id_rsa`) to the `~/.ssh` directory (or `%USERPROFILE%\.ssh` on Windows) on the local computer
132 | - Append the public key (`id_rsa.pub`) to the `/home/root/.ssh/authorized_keys` file on the TV
133 | - Configure the device using `ares-setup-device` (`-a` may need to be replaced with `-m` if device named `webos` is already configured)
134 |   - `privatekey` path is relative to `${HOME}/.ssh` (Windows: `%USERPROFILE%\.ssh`)
135 | 
136 | ```sh
137 | ares-setup-device -a webos -i "username=root" -i "privatekey=id_rsa" -i "passphrase=SSH_KEY_PASSPHRASE" -i "host=TV_IP" -i "port=22"
138 | ```
139 | 
140 | ## Installation
141 | 
142 | ```sh
143 | npm run deploy
144 | ```
145 | 
146 | ## Launching
147 | 
148 | - The app will be available in the TV's app list. You can also launch it using the webOS CLI tools.
149 | 
150 | ```sh
151 | npm run launch
152 | ```
153 | 
154 | To jump immediately into some specific video use:
155 | 
156 | ```sh
157 | npm run launch -- -p '{"contentTarget":"v=F8PGWLvn1mQ"}'
158 | ```
159 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | const CONTENT_INTENT_REGEX = /^.+(?=Content)/g;
  2 | 
  3 | export const REMOTE_KEYS = {
  4 |   ENTER:  { code: 13,  key: 'Enter' },
  5 |   BACK:   { code: 461, key: 'Back' },
  6 |   LEFT:   { code: 37,  key: 'ArrowLeft' },
  7 |   UP:     { code: 38,  key: 'ArrowUp' },
  8 |   RIGHT:  { code: 39,  key: 'ArrowRight' },
  9 |   DOWN:   { code: 40,  key: 'ArrowDown' },
 10 |   RED:    { code: 403, key: 'Red' },
 11 |   GREEN:  { code: 404, key: 'Green' },
 12 |   YELLOW: { code: 405, key: 'Yellow' },
 13 |   BLUE:   { code: 406, key: 'Blue' },
 14 | 
 15 |   0: { code: 48, key: '0' },
 16 |   1: { code: 49, key: '1' },
 17 |   2: { code: 50, key: '2' },
 18 |   3: { code: 51, key: '3' },
 19 |   4: { code: 52, key: '4' },
 20 |   5: { code: 53, key: '5' },
 21 |   6: { code: 54, key: '6' },
 22 |   7: { code: 55, key: '7' },
 23 |   8: { code: 56, key: '8' },
 24 |   9: { code: 57, key: '9' }
 25 | };
 26 | 
 27 | let cachedGuestMode = null;
 28 | 
 29 | export function isGuestMode() {
 30 |   if (cachedGuestMode !== null) return cachedGuestMode;
 31 | 
 32 |   try {
 33 |     const lastIdentity = window.localStorage.getItem('yt.leanback.default::last-identity-used');
 34 |     if (lastIdentity) {
 35 |       const parsed = JSON.parse(lastIdentity);
 36 |       if (parsed?.data?.identityType === 'UNAUTHENTICATED_IDENTITY_TYPE_GUEST') {
 37 |         cachedGuestMode = true;
 38 |         return true;
 39 |       }
 40 |       cachedGuestMode = false;
 41 |       return false; 
 42 |     }
 43 |     const autoNav = window.localStorage.getItem('yt.leanback.default::AUTONAV_FOR_LIVING_ROOM');
 44 |     if (autoNav) {
 45 |       const parsed = JSON.parse(autoNav);
 46 |       if (parsed?.data?.guest === true) {
 47 |         cachedGuestMode = true;
 48 |         return true;
 49 |       }
 50 |     }
 51 |     
 52 |     cachedGuestMode = false;
 53 |     return false;
 54 |   } catch (e) {
 55 |     return false;
 56 |   }
 57 | }
 58 | 
 59 | export function sendKey(keyDef, target = document.body) {
 60 |   if (!keyDef || !keyDef.code) {
 61 |     console.warn('[Utils] Invalid key definition passed to sendKey');
 62 |     return;
 63 |   }
 64 | 
 65 |   const eventOpts = {
 66 |     bubbles: true,
 67 |     cancelable: true,
 68 |     composed: true,
 69 |     view: window,
 70 |     key: keyDef.key,
 71 | 	code: keyDef.key,
 72 |     keyCode: keyDef.code,
 73 |     which: keyDef.code,
 74 |     charCode: 0
 75 |   };
 76 | 
 77 |   const keyDownEvt = new KeyboardEvent('keydown', eventOpts);
 78 |   Object.defineProperty(keyDownEvt, 'keyCode', { get: () => keyDef.code });
 79 |   Object.defineProperty(keyDownEvt, 'which', { get: () => keyDef.code });
 80 |   
 81 |   const keyUpEvt = new KeyboardEvent('keyup', eventOpts);
 82 |   Object.defineProperty(keyUpEvt, 'keyCode', { get: () => keyDef.code });
 83 |   Object.defineProperty(keyUpEvt, 'which', { get: () => keyDef.code });
 84 | 
 85 |   target.dispatchEvent(keyDownEvt);
 86 |   target.dispatchEvent(keyUpEvt);
 87 | }
 88 | 
 89 | export function extractLaunchParams() {
 90 |   if (window.launchParams) {
 91 |     try {
 92 |       return JSON.parse(window.launchParams);
 93 |     } catch (e) {
 94 |       console.warn('Failed to parse launchParams', e);
 95 |       return {};
 96 |     }
 97 |   }
 98 |   return {};
 99 | }
100 | 
101 | function getYTURL() {
102 |   const ytURL = new URL('https://www.youtube.com/tv#/');
103 |   ytURL.searchParams.append('env_forceFullAnimation', '1');
104 |   ytURL.searchParams.append('env_enableWebSpeech', '1');
105 |   ytURL.searchParams.append('env_enableVoice', '1');
106 |   return ytURL;
107 | }
108 | 
109 | function concatSearchParams(a, b) {
110 |   return new URLSearchParams([...a.entries(), ...b.entries()]);
111 | }
112 | 
113 | export function handleLaunch(params) {
114 |   console.info('handleLaunch', params);
115 |   let ytURL = getYTURL();
116 |   let { target, contentTarget = target } = params;
117 | 
118 |   switch (typeof contentTarget) {
119 |     case 'string': {
120 |       if (contentTarget.indexOf(ytURL.origin) === 0) {
121 |         ytURL = new URL(contentTarget);
122 |       } else {
123 |         if (contentTarget.indexOf('v=v=') === 0)
124 |           contentTarget = contentTarget.substring(2);
125 | 
126 |         ytURL.search = concatSearchParams(
127 |           ytURL.searchParams,
128 |           new URLSearchParams(contentTarget)
129 |         );
130 |       }
131 |       break;
132 |     }
133 |     case 'object': {
134 |       const { intent, intentParam } = contentTarget;
135 |       const search = ytURL.searchParams;
136 |       const voiceContentIntent = intent
137 |         .match(CONTENT_INTENT_REGEX)?.[0]
138 |         ?.toLowerCase();
139 | 
140 |       search.set('inApp', true);
141 |       search.set('vs', 9); 
142 |       if (voiceContentIntent) search.set('va', voiceContentIntent);
143 |       search.append('launch', 'voice');
144 |       if (voiceContentIntent === 'search') search.append('launch', 'search');
145 |       search.set('vq', intentParam);
146 |       break;
147 |     }
148 |   }
149 | 
150 |   window.location.href = ytURL.toString();
151 | }
152 | 
153 | /**
154 |  * Wait for a child element to be added.
155 |  * Includes a safety timeout (default 30s) to prevent memory leaks.
156 |  */
157 | export async function waitForChildAdd(
158 |   parent,
159 |   predicate,
160 |   observeAttributes,
161 |   abortSignal,
162 |   timeoutMs = 30000
163 | ) {
164 |   return new Promise((resolve, reject) => {
165 |     let timer = null;
166 |     
167 |     const obs = new MutationObserver((mutations) => {
168 |       for (const mut of mutations) {
169 |         if (mut.type === 'attributes') {
170 |           if (predicate(mut.target)) {
171 |             cleanup();
172 |             resolve(mut.target);
173 |             return;
174 |           }
175 |         } else if (mut.type === 'childList') {
176 |           for (const node of mut.addedNodes) {
177 |             if (predicate(node)) {
178 |               cleanup();
179 |               resolve(node);
180 |               return;
181 |             }
182 |           }
183 |         }
184 |       }
185 |     });
186 | 
187 |     const cleanup = () => {
188 |         obs.disconnect();
189 |         if (timer) clearTimeout(timer);
190 |         if (abortSignal) abortSignal.removeEventListener('abort', onAbort);
191 |     };
192 | 
193 |     const onAbort = () => {
194 |         cleanup();
195 |         reject(new Error('aborted'));
196 |     };
197 | 
198 |     if (abortSignal) {
199 |       abortSignal.addEventListener('abort', onAbort);
200 |     }
201 | 
202 |     // Safety timeout
203 |     if (timeoutMs > 0) {
204 |         timer = setTimeout(() => {
205 |             cleanup();
206 |             reject(new Error('waitForChildAdd timed out'));
207 |         }, timeoutMs);
208 |     }
209 | 
210 |     obs.observe(parent, {
211 |       subtree: true,
212 |       attributes: observeAttributes,
213 |       childList: true
214 |     });
215 |   });
216 | }


--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
  1 | /* src/config.js */
  2 | const CONFIG_KEY = 'ytaf-configuration';
  3 | 
  4 | export const segmentTypes = {
  5 |   sponsor: {
  6 |     color: '#00d400',
  7 |     opacity: '0.7',
  8 |     name: 'sponsored segment'
  9 |   },
 10 |   intro: {
 11 |     color: '#00ffff',
 12 |     opacity: '0.7',
 13 |     name: 'intro'
 14 |   },
 15 |   outro: {
 16 |     color: '#0202ed',
 17 |     opacity: '0.7',
 18 |     name: 'outro'
 19 |   },
 20 |   interaction: {
 21 |     color: '#cc00ff',
 22 |     opacity: '0.7',
 23 |     name: 'interaction reminder'
 24 |   },
 25 |   selfpromo: {
 26 |     color: '#ffff00',
 27 |     opacity: '0.7',
 28 |     name: 'self-promotion'
 29 |   },
 30 |   musicofftopic: {
 31 |     color: '#ff9900',
 32 |     opacity: '0.7',
 33 |     name: 'non-music part'
 34 |   },
 35 |   preview: {
 36 |     color: '#008fd6',
 37 |     opacity: '0.7',
 38 |     name: 'recap or preview'
 39 |   },
 40 |   poi_highlight: {
 41 |     color: '#ff1684',
 42 |     opacity: '0.8',
 43 |     name: 'poi_highlight'
 44 |   },
 45 |   filler: {
 46 |     color: '#7300ff',
 47 |     opacity: '0.7',
 48 |     name: 'tangents/jokes'
 49 |   },
 50 |   hook: {
 51 |     color: '#395699',
 52 |     opacity: '0.7',
 53 |     name: 'hook/greetings'
 54 |   }
 55 | };
 56 | 
 57 | export const shortcutActions = {
 58 |   none: 'None',
 59 |   chapter_skip: 'Skip to Next Chapter',
 60 |   chapter_skip_prev: 'Skip to Previous Chapter',
 61 |   seek_15_fwd: 'Fast Forward 15s',
 62 |   seek_15_back: 'Rewind 15s',
 63 |   play_pause: 'Play/Pause',
 64 |   toggle_subs: 'Toggle Subtitles',
 65 |   toggle_comments: 'Toggle Comments/Desc'
 66 | };
 67 | 
 68 | const configOptions = new Map([
 69 |   ['enableAdBlock', { default: true, desc: 'Ad Blocking' }],
 70 |   ['enableReturnYouTubeDislike', { default: true, desc: 'Return YouTube Dislike' }],
 71 |   ['upgradeThumbnails', { default: false, desc: 'Upgrade Thumbnail Quality' }],
 72 |   [
 73 |     'removeShorts',
 74 |     { default: false, desc: 'Remove Shorts From Subscriptions' }
 75 |   ],
 76 |   ['enableSponsorBlock', { default: true, desc: 'SponsorBlock' }],
 77 |   ['enableMutedSegments', { default: false, desc: 'Allow segments that mute audio' }],
 78 |   [
 79 |     'enableSponsorBlockSponsor',
 80 |     { default: true, desc: 'Skip sponsor segments' }
 81 |   ],
 82 |   ['enableSponsorBlockIntro', { default: true, desc: 'Skip intro segments' }],
 83 |   ['enableSponsorBlockOutro', { default: true, desc: 'Skip outro segments' }],
 84 |   [
 85 |     'enableSponsorBlockInteraction',
 86 |     {
 87 |       default: true,
 88 |       desc: 'Skip interaction reminder segments'
 89 |     }
 90 |   ],
 91 |   [
 92 |     'enableSponsorBlockSelfPromo',
 93 |     {
 94 |       default: true,
 95 |       desc: 'Skip self promotion segments'
 96 |     }
 97 |   ],
 98 |   [
 99 |     'enableSponsorBlockMusicOfftopic',
100 |     {
101 |       default: true,
102 |       desc: 'Skip non-music segments in music videos'
103 |     }
104 |   ],
105 |   [
106 |   'hideEndcards',
107 |   {
108 |     default: false,
109 |     desc: 'Hide Endcards'
110 |   }
111 |   ],
112 |   [
113 |     'enableSponsorBlockHighlight',
114 |     {
115 |       default: true,
116 |       desc: 'Show highlight segments'
117 |     }
118 |   ],
119 |   [
120 |     'enableSponsorBlockFiller',
121 |     {
122 |       default: false,
123 |       desc: 'Skip tangents/jokes'
124 |     }
125 |   ],
126 |   [
127 |     'enableSponsorBlockHook',
128 |     {
129 |       default: false,
130 |       desc: 'Skip hook/greetings'
131 |     }
132 |   ],
133 |   [
134 |     'enableHighlightJump',
135 |     {
136 |       default: true,
137 |       desc: 'Jump to highlight with blue button'
138 |     }
139 |   ],
140 |   [
141 |   'enableAutoLogin',
142 |   {
143 |     default: true,
144 |     desc: 'Auto Login'
145 |   }
146 |   ],
147 |   [
148 |     'enableSponsorBlockPreview',
149 |     {
150 |       default: false,
151 |       desc: 'Skip recaps and previews'
152 |     }
153 |   ],
154 |   [
155 |     'hideLogo',
156 |     {
157 |       default: false,
158 |       desc: 'Hide YouTube Logo'
159 |     }
160 |   ],
161 |   ['enableOledCareMode', { default: false, desc: 'OLED-Care Mode (True Black UI)' }],
162 |   ['hideGuestSignInPrompts', { default: false, desc: 'Guest Mode: Hide Sign-in Buttons' }],
163 |   ['forceHighResVideo', { default: false, desc: 'Force Max Quality' }],
164 |   ['disableNotifications', { default: false, desc: 'Disable Notifications' }]
165 | ]);
166 | 
167 | // Register shortcut keys 0-9
168 | for (let i = 0; i < 10; i++) {
169 |   configOptions.set(`shortcut_key_${i}`, {
170 |     default: i === 5 ? 'chapter_skip' : 'none',
171 |     desc: `Key ${i} Action`
172 |   });
173 | }
174 | 
175 | for (const [key, value] of Object.entries(segmentTypes)) {
176 |   configOptions.set(`${key}Color`, {
177 |     default: value.color,
178 |     desc: `Color for ${value.name}`
179 |   });
180 | }
181 | 
182 | const defaultConfig = (() => {
183 |   let ret = {};
184 |   for (const [k, v] of configOptions) {
185 |     ret[k] = v.default;
186 |   }
187 |   return ret;
188 | })();
189 | 
190 | /** @type {Record<string, DocumentFragment>} as const */
191 | const configFrags = (() => {
192 |   let ret = {};
193 |   for (const k of configOptions.keys()) {
194 |     ret[k] = new DocumentFragment();
195 |   }
196 |   return ret;
197 | })();
198 | 
199 | function loadStoredConfig() {
200 |   const storage = window.localStorage.getItem(CONFIG_KEY);
201 | 
202 |   if (storage === null) {
203 |     console.info('Config not set; using defaults.');
204 |     return null;
205 |   }
206 | 
207 |   try {
208 |     return JSON.parse(storage);
209 |   } catch (err) {
210 |     console.warn('Error parsing stored config:', err);
211 |     return null;
212 |   }
213 | }
214 | 
215 | // Use defaultConfig as a prototype so writes to localConfig don't change it.
216 | let localConfig = loadStoredConfig() || { ...defaultConfig };
217 | 
218 | function configExists(key) {
219 |   return configOptions.has(key);
220 | }
221 | 
222 | export function configGetDesc(key) {
223 |   if (!configExists(key)) {
224 |     throw new Error('tried to get desc for unknown config key: ' + key);
225 |   }
226 | 
227 |   return configOptions.get(key).desc;
228 | }
229 | 
230 | export function configRead(key) {
231 |   if (!configExists(key)) {
232 |     throw new Error('tried to read unknown config key: ' + key);
233 |   }
234 | 
235 |   if (localConfig[key] === undefined) {
236 |     console.warn(
237 |       'Populating key',
238 |       key,
239 |       'with default value',
240 |       defaultConfig[key]
241 |     );
242 | 
243 |     localConfig[key] = defaultConfig[key];
244 |   }
245 | 
246 |   return localConfig[key];
247 | }
248 | 
249 | export function configWrite(key, value) {
250 |   if (!configExists(key)) {
251 |     throw new Error('tried to write unknown config key: ' + key);
252 |   }
253 | 
254 |   const oldValue =
255 |     localConfig[key] !== undefined ? localConfig[key] : defaultConfig[key];
256 | 
257 |   console.info('Changing key', key, 'from', oldValue, 'to', value);
258 |   localConfig[key] = value;
259 |   window.localStorage[CONFIG_KEY] = JSON.stringify(localConfig);
260 | 
261 |   configFrags[key].dispatchEvent(
262 |     new CustomEvent('ytafConfigChange', {
263 |       detail: { key, newValue: value, oldValue }
264 |     })
265 |   );
266 | }
267 | 
268 | /**
269 |  * Add a listener for changes in the value of a specified config option
270 |  * @param {string} key Config option to monitor
271 |  * @param {(evt: Event) => void} callback Function to be called on change
272 |  */
273 | export function configAddChangeListener(key, callback) {
274 |   const frag = configFrags[key];
275 | 
276 |   frag.addEventListener('ytafConfigChange', callback);
277 | }
278 | export function configRemoveChangeListener(key, callback) {
279 |   if (configFrags[key]) {
280 |     const frag = configFrags[key];
281 |     frag.removeEventListener('ytafConfigChange', callback);
282 |   }
283 | }
284 | 
285 | export function configGetDefault(key) {
286 |   if (!configExists(key)) {
287 |     throw new Error('tried to get default for unknown config key: ' + key);
288 |   }
289 |   return configOptions.get(key).default;
290 | }


--------------------------------------------------------------------------------
/src/Sponsorblock-UI.js:
--------------------------------------------------------------------------------
  1 | const sponsorBlockIcon = 'https://raw.githubusercontent.com/NicholasBly/youtube-webos/refs/heads/main/src/icons/IconSponsorBlocker64px.png';
  2 | 
  3 | const STYLES = `
  4 |     /* --- Popup Styles --- */
  5 |     .sb-segments-popup {
  6 |         position: fixed;
  7 |         top: 5%;
  8 |         right: 2%;
  9 |         bottom: auto;
 10 |         left: auto;
 11 |         transform: none;
 12 |         
 13 |         background-color: #000000;
 14 |         border: 1px solid rgba(255, 255, 255, 0.1);
 15 |         border-radius: 16px;
 16 |         padding: 20px;
 17 |         
 18 |         width: 750px;
 19 |         max-height: 85vh;
 20 |         overflow-y: auto;
 21 |         
 22 |         z-index: 9999;
 23 |         display: none;
 24 |         color: #eee;
 25 |         font-family: Roboto, Arial, sans-serif;
 26 |         box-shadow: 0 10px 30px rgba(0,0,0,0.8);
 27 |     }
 28 |     
 29 |     .sb-segments-popup.visible {
 30 |         display: block;
 31 |         animation: sbFadeIn 0.2s ease-out;
 32 |     }
 33 | 
 34 |     .sb-popup-header {
 35 |         display: flex;
 36 |         flex-direction: column;
 37 |         align-items: center;
 38 |         justify-content: center;
 39 |         padding-bottom: 15px;
 40 |         margin-bottom: 15px;
 41 |         border-bottom: 1px solid rgba(255,255,255,0.1);
 42 |         text-align: center;
 43 |     }
 44 | 
 45 |     .sb-header-title-row {
 46 |         display: flex;
 47 |         align-items: center;
 48 |         gap: 10px;
 49 |         margin-bottom: 5px;
 50 |     }
 51 | 
 52 |     .sb-header-icon {
 53 |         width: 32px;
 54 |         height: 32px;
 55 |         fill: #ff0000;
 56 |     }
 57 | 
 58 |     .sb-header-text {
 59 |         font-size: 48px;
 60 |         font-weight: 700;
 61 |         color: #fff;
 62 |     }
 63 | 
 64 |     .sb-header-subtitle {
 65 |         font-size: 28px;
 66 |         color: #aaa;
 67 |     }
 68 | 
 69 |     .sb-segment-row {
 70 |         display: flex;
 71 |         align-items: center;
 72 |         justify-content: space-between;
 73 |         padding: 10px 12px;
 74 |         border-radius: 6px;
 75 |         margin-bottom: 4px;
 76 |         background: transparent;
 77 |         transition: background-color 0.2s;
 78 |     }
 79 | 
 80 |     .sb-row-left {
 81 |         display: flex;
 82 |         align-items: center;
 83 |         gap: 12px;
 84 |     }
 85 | 
 86 |     .sb-segment-dot {
 87 |         width: 10px;
 88 |         height: 10px;
 89 |         border-radius: 50%;
 90 |         flex-shrink: 0;
 91 |     }
 92 | 
 93 |     .sb-segment-category {
 94 |         font-weight: 600;
 95 |         font-size: 32px;
 96 |         color: #e0e0e0;
 97 |     }
 98 | 
 99 |     .sb-segment-time {
100 |         font-size: 32px;
101 |         font-family: "Roboto Mono", monospace;
102 |         color: #fff;
103 |         font-weight: 500;
104 |     }
105 | 
106 |     .sb-segments-popup:focus {
107 |         outline: none;
108 |         border-color: #fff;
109 |     }
110 | 
111 |     .sb-segment-row:focus {
112 |         background-color: #fff;
113 |         outline: none;
114 |     }
115 |     
116 |     .sb-segment-row:focus .sb-segment-category,
117 |     .sb-segment-row:focus .sb-segment-time {
118 |         color: #000;
119 |     }
120 | `;
121 | 
122 | class SponsorBlockUI {
123 |     constructor() {
124 |         this.popup = null;
125 |         this.visible = false;
126 | 		this.hasSegments = false;
127 |         this.injectStyles();
128 |     }
129 | 
130 |     injectStyles() {
131 |         if (!document.getElementById('sb-ui-styles')) {
132 |             const style = document.createElement('style');
133 |             style.id = 'sb-ui-styles';
134 |             style.textContent = STYLES;
135 |             document.head.appendChild(style);
136 |         }
137 |     }
138 | 
139 |     formatTime(seconds) {
140 |         const date = new Date(0);
141 |         date.setSeconds(seconds);
142 |         const timeStr = date.toISOString().substr(11, 8);
143 |         return timeStr.startsWith('00:') ? timeStr.slice(3) : timeStr;
144 |     }
145 | 
146 |     getSegmentColor(category) {
147 |         const colors = {
148 |             sponsor: '#00d400',
149 |             intro: '#00ffff',
150 |             outro: '#0202ed',
151 |             interaction: '#cc00ff',
152 |             selfpromo: '#ffff00',
153 |             music_offtopic: '#ff9900',
154 |             preview: '#008fd6',
155 |             poi: '#ff1684',
156 |             filler: '#7300FF',
157 |             poi_highlight: '#ff1684',
158 | 			hook: '#395699'
159 |         };
160 |         return colors[category] || '#777';
161 |     }
162 | 
163 |     getCategoryName(category) {
164 |         const names = {
165 |             sponsor: 'Sponsor',
166 |             intro: 'Intermission/Intro',
167 |             outro: 'Endcards/Credits',
168 |             interaction: 'Interaction',
169 |             selfpromo: 'Unpaid/Self Promotion',
170 |             music_offtopic: 'Non-Music Section',
171 |             preview: 'Preview/Recap',
172 |             poi: 'Highlight',
173 |             poi_highlight: 'Highlight',
174 |             filler: 'Filler/Tangents'
175 |         };
176 |         return names[category] || category.charAt(0).toUpperCase() + category.slice(1);
177 |     }
178 | 
179 |     createPopup() {
180 |         if (this.popup) return this.popup;
181 | 
182 |         const popup = document.createElement('div');
183 |         popup.className = 'sb-segments-popup';
184 |         popup.setAttribute('tabindex', '-1'); 
185 |         
186 |         popup.innerHTML = `
187 |             <div class="sb-popup-header">
188 |                 <div class="sb-header-title-row">
189 |                     <img class="sb-header-icon" src="${sponsorBlockIcon}" alt="SponsorBlock">
190 |                     <span class="sb-header-text">SponsorBlock</span>
191 |                 </div>
192 |                 <div class="sb-header-subtitle">This video has segments in the database!</div>
193 |             </div>
194 |             <div class="sb-list-container"></div>
195 |         `;
196 |         document.body.appendChild(popup);
197 |         this.popup = popup;
198 | 
199 |         return popup;
200 |     }
201 | 
202 |     updateSegments(segments) {
203 |         if (!this.popup) this.createPopup();
204 |         const container = this.popup.querySelector('.sb-list-container');
205 |         container.innerHTML = '';
206 | 		
207 |         this.hasSegments = segments && segments.length > 0;
208 |         if (!this.hasSegments) {
209 |             this.popup.classList.remove('visible');
210 | 			return;
211 | 		}
212 | 
213 |         // Sort segments chronologically by start time
214 |         const sortedSegments = [...segments].sort((a, b) => a.segment[0] - b.segment[0]);
215 | 
216 |         sortedSegments.forEach(segment => {
217 |             const row = document.createElement('div');
218 |             row.className = 'sb-segment-row';
219 |             row.setAttribute('tabindex', '-1'); 
220 |             
221 |             const color = this.getSegmentColor(segment.category);
222 |             const startTime = this.formatTime(segment.segment[0]);
223 |             const endTime = this.formatTime(segment.segment[1]);
224 |             const categoryName = this.getCategoryName(segment.category);
225 | 
226 |             // Handle Highlights specifically (single timestamp vs range)
227 |             let timeLabel;
228 |             if (segment.category === 'poi_highlight' || segment.category === 'poi') {
229 |                 timeLabel = startTime;
230 |             } else {
231 |                 timeLabel = `${startTime} to ${endTime}`;
232 |             }
233 | 
234 |             row.innerHTML = `
235 |                 <div class="sb-row-left">
236 |                     <div class="sb-segment-dot" style="background-color: ${color}"></div>
237 |                     <span class="sb-segment-category">${categoryName}</span>
238 |                 </div>
239 |                 <span class="sb-segment-time">${timeLabel}</span>
240 |             `;
241 |             container.appendChild(row);
242 |         });
243 | 			if (this.visible) {
244 | 				this.popup.classList.add('visible');
245 | 			}
246 |     }
247 | 
248 |     togglePopup(visible) {
249 |         if (!this.popup) this.createPopup();
250 |         this.visible = visible;
251 |         
252 |         if (this.visible && this.hasSegments) {
253 |             this.popup.classList.add('visible');
254 |         } else {
255 |             this.popup.classList.remove('visible');
256 |         }
257 |     }
258 | }
259 | 
260 | export default new SponsorBlockUI();


--------------------------------------------------------------------------------
/src/adblock.js:
--------------------------------------------------------------------------------
  1 | import { configRead, configAddChangeListener, configRemoveChangeListener } from './config';
  2 | import { isGuestMode } from './utils';
  3 | 
  4 | // Module state
  5 | let origParse = JSON.parse;
  6 | let isHooked = false;
  7 | 
  8 | // Cache config values to avoid repeated reads during JSON parsing
  9 | let configCache = {
 10 |   enableAdBlock: true,
 11 |   removeShorts: false,
 12 |   hideGuestPrompts: false,
 13 |   lastUpdate: 0
 14 | };
 15 | 
 16 | const CONFIG_CACHE_TTL = 100; // Cache for 100ms to batch updates
 17 | 
 18 | /**
 19 |  * Update cached config values
 20 |  */
 21 | function updateConfigCache() {
 22 |   configCache = {
 23 |     enableAdBlock: configRead('enableAdBlock'),
 24 |     removeShorts: isGuestMode() ? false : configRead('removeShorts'),
 25 |     hideGuestPrompts: configRead('hideGuestSignInPrompts'),
 26 |     lastUpdate: Date.now()
 27 |   };
 28 | }
 29 | 
 30 | /**
 31 |  * Get cached config (with TTL check)
 32 |  */
 33 | function getCachedConfig() {
 34 |   // Refresh cache if too old
 35 |   if (Date.now() - configCache.lastUpdate > CONFIG_CACHE_TTL) {
 36 |     updateConfigCache();
 37 |   }
 38 |   return configCache;
 39 | }
 40 | 
 41 | /**
 42 |  * Main JSON.parse hook implementation
 43 |  */
 44 | function hookedParse(text, reviver) {
 45 |   // 1. Perform actual parsing
 46 |   let data;
 47 |   try {
 48 |     data = origParse.call(this, text, reviver);
 49 |   } catch (e) {
 50 |     // If parsing fails, just return the original parse attempt
 51 |     return origParse.call(this, text, reviver);
 52 |   }
 53 | 
 54 |   // 2. Early exit: Non-object or primitive data
 55 |   if (!data || typeof data !== 'object') {
 56 |     return data;
 57 |   }
 58 | 
 59 |   // 3. Pre-flight check: Only process YouTube API responses
 60 |   const isAPIResponse = !!(
 61 |     data.responseContext ||
 62 |     data.playerResponse ||
 63 |     data.onResponseReceivedActions ||
 64 |     data.sectionListRenderer
 65 |   );
 66 | 
 67 |   if (!isAPIResponse) {
 68 |     return data;
 69 |   }
 70 | 
 71 |   // 4. Get cached config
 72 |   const { enableAdBlock, removeShorts, hideGuestPrompts } = getCachedConfig();
 73 | 
 74 |   // 5. Early exit: No filtering needed
 75 |   if (!enableAdBlock && !removeShorts && !hideGuestPrompts) {
 76 |     return data;
 77 |   }
 78 | 
 79 |   // 6. Apply filters
 80 |   try {
 81 |     applyFilters(data, enableAdBlock, removeShorts, hideGuestPrompts);
 82 |   } catch (e) {
 83 |     console.error('[AdBlock] Error during filtering:', e);
 84 |   }
 85 | 
 86 |   return data;
 87 | }
 88 | 
 89 | /**
 90 |  * Apply all filters to data object
 91 |  */
 92 | function applyFilters(data, enableAdBlock, removeShorts, hideGuestPrompts) {
 93 |   // Filter 1: Video player ads
 94 |   if (enableAdBlock && (data.playerResponse || data.videoDetails)) {
 95 |     removePlayerAds(data);
 96 |   }
 97 | 
 98 |   // Filter 2: Browse/Home screen elements (fast path)
 99 |   const browseContent = data.contents?.tvBrowseRenderer?.content?.tvSurfaceContentRenderer?.content?.sectionListRenderer?.contents;
100 |   if (browseContent) {
101 |     processSectionList(browseContent, enableAdBlock, removeShorts, hideGuestPrompts);
102 |   }
103 | 
104 |   const searchContent = data.contents?.sectionListRenderer?.contents;
105 |   if (searchContent) {
106 |     processSectionList(searchContent, enableAdBlock, removeShorts, hideGuestPrompts);
107 |   }
108 | 
109 |   // Filter 3: Lazy loading continuations
110 |   if (data.onResponseReceivedActions && Array.isArray(data.onResponseReceivedActions)) {
111 |     data.onResponseReceivedActions.forEach((action) => {
112 |       const contItems = action.appendContinuationItemsAction?.continuationItems;
113 |       if (contItems) {
114 |         action.appendContinuationItemsAction.continuationItems = filterItems(
115 |           contItems,
116 |           removeShorts,
117 |           enableAdBlock,
118 |           hideGuestPrompts
119 |         );
120 |       }
121 |     });
122 |   }
123 | 
124 |   // Filter 4: Recursive search for edge cases (only if needed)
125 |   if ((removeShorts || hideGuestPrompts) && !browseContent && !searchContent) {
126 |     applyDeepFilters(data, removeShorts, enableAdBlock, hideGuestPrompts);
127 |   }
128 | }
129 | 
130 | /**
131 |  * Remove player ads from data
132 |  */
133 | function removePlayerAds(data) {
134 |   if (data.adPlacements) data.adPlacements = [];
135 |   if (data.playerAds) data.playerAds = [];
136 |   if (data.adSlots) data.adSlots = [];
137 |   
138 |   if (data.playerResponse) {
139 |     if (data.playerResponse.adPlacements) data.playerResponse.adPlacements = [];
140 |     if (data.playerResponse.playerAds) data.playerResponse.playerAds = [];
141 |   }
142 | }
143 | 
144 | /**
145 |  * Apply deep filters for edge cases
146 |  */
147 | function applyDeepFilters(data, removeShorts, enableAdBlock, hideGuestPrompts) {
148 |   // Find and process grids (Subscriptions tab)
149 |   const gridRenderer = findFirstObject(data, 'gridRenderer');
150 |   if (gridRenderer?.items) {
151 |     gridRenderer.items = filterItems(gridRenderer.items, removeShorts, enableAdBlock, hideGuestPrompts);
152 |   }
153 | 
154 |   // Find and process grid continuations (Scrolling)
155 |   const gridContinuation = findFirstObject(data, 'gridContinuation');
156 |   if (gridContinuation?.items) {
157 |     gridContinuation.items = filterItems(gridContinuation.items, removeShorts, enableAdBlock, hideGuestPrompts);
158 |   }
159 | 
160 |   // Find and process generic section lists (Catch-all)
161 |   const sectionList = findFirstObject(data, 'sectionListRenderer');
162 |   if (sectionList?.contents) {
163 |     processSectionList(sectionList.contents, enableAdBlock, removeShorts, hideGuestPrompts);
164 |   }
165 | }
166 | 
167 | /**
168 |  * Process section list contents (in-place filtering for performance)
169 |  */
170 | function processSectionList(contents, enableAdBlock, removeShorts, hideGuestPrompts) {
171 |   if (!Array.isArray(contents)) return;
172 | 
173 |   let writeIdx = 0;
174 | 
175 |   for (let i = 0; i < contents.length; i++) {
176 |     const item = contents[i];
177 |     let keepItem = true;
178 | 
179 |     // Check if item should be removed
180 |     if (enableAdBlock && (item.tvMastheadRenderer || item.adSlotRenderer)) {
181 |       keepItem = false;
182 |     } else if (hideGuestPrompts && (item.feedNudgeRenderer || item.alertWithActionsRenderer)) {
183 |       keepItem = false;
184 |     } else if (keepItem && item.shelfRenderer) {
185 |       // Process shelf contents
186 |       const shelf = item.shelfRenderer;
187 |       
188 |       if (removeShorts && shelf.tvhtml5ShelfRendererType === 'TVHTML5_SHELF_RENDERER_TYPE_SHORTS') {
189 |         keepItem = false;
190 |       } else if (shelf.content) {
191 |         // Filter horizontal lists
192 |         if (shelf.content.horizontalListRenderer?.items) {
193 |           shelf.content.horizontalListRenderer.items = filterItems(
194 |             shelf.content.horizontalListRenderer.items,
195 |             removeShorts,
196 |             enableAdBlock,
197 |             hideGuestPrompts
198 |           );
199 |         }
200 |         
201 |         // Filter grids
202 |         if (shelf.content.gridRenderer?.items) {
203 |           shelf.content.gridRenderer.items = filterItems(
204 |             shelf.content.gridRenderer.items,
205 |             removeShorts,
206 |             enableAdBlock,
207 |             hideGuestPrompts
208 |           );
209 |         }
210 |       }
211 |     }
212 | 
213 |     // Keep item by moving it to write position
214 |     if (keepItem) {
215 |       contents[writeIdx++] = item;
216 |     }
217 |   }
218 | 
219 |   // Truncate array to actual size
220 |   contents.length = writeIdx;
221 | }
222 | 
223 | /**
224 |  * Filter individual items
225 |  */
226 | function filterItems(items, removeShorts, enableAdBlock, hideGuestPrompts) {
227 |   if (!Array.isArray(items)) return items;
228 | 
229 |   const result = [];
230 | 
231 |   for (let i = 0; i < items.length; i++) {
232 |     const item = items[i];
233 |     let keep = true;
234 | 
235 |     // Check removal conditions
236 |     if (enableAdBlock && item.adSlotRenderer) {
237 |       keep = false;
238 |     } else if (hideGuestPrompts && (item.feedNudgeRenderer || item.alertWithActionsRenderer)) {
239 |       keep = false;
240 |     } else if (removeShorts) {
241 |       // Multiple shorts detection patterns
242 |       if (
243 |         item.tileRenderer?.onSelectCommand?.reelWatchEndpoint ||
244 |         item.reelItemRenderer ||
245 |         item.command?.reelWatchEndpoint?.adClientParams
246 |       ) {
247 |         keep = false;
248 |       }
249 |     }
250 | 
251 |     if (keep) {
252 |       result.push(item);
253 |     }
254 |   }
255 | 
256 |   return result;
257 | }
258 | 
259 | /**
260 |  * Find first occurrence of a key in nested object (with depth limit)
261 |  * @param {Object} haystack - Object to search
262 |  * @param {string} needle - Key to find
263 |  * @param {number} maxDepth - Maximum recursion depth
264 |  * @returns {*} Found value or null
265 |  */
266 | function findFirstObject(haystack, needle, maxDepth = 15) {
267 |   if (!haystack || typeof haystack !== 'object' || maxDepth <= 0) {
268 |     return null;
269 |   }
270 | 
271 |   // Check current level
272 |   if (haystack[needle]) {
273 |     return haystack[needle];
274 |   }
275 | 
276 |   // Search nested objects
277 |   for (const key in haystack) {
278 |     if (haystack.hasOwnProperty(key) && typeof haystack[key] === 'object') {
279 |       const result = findFirstObject(haystack[key], needle, maxDepth - 1);
280 |       if (result) return result;
281 |     }
282 |   }
283 | 
284 |   return null;
285 | }
286 | 
287 | /**
288 |  * Initialize adblock by hooking JSON.parse
289 |  */
290 | export function initAdblock() {
291 |   if (isHooked) {
292 |     console.warn('[AdBlock] Already initialized');
293 |     return;
294 |   }
295 | 
296 |   console.info('[AdBlock] Initializing JSON.parse hook');
297 |   
298 |   // Update config cache
299 |   updateConfigCache();
300 |   
301 |   // Hook JSON.parse
302 |   origParse = JSON.parse;
303 |   JSON.parse = function (text, reviver) {
304 |     return hookedParse.call(this, text, reviver);
305 |   };
306 |   
307 |   isHooked = true;
308 | 
309 |   // Listen for config changes
310 |   configAddChangeListener('enableAdBlock', updateConfigCache);
311 |   configAddChangeListener('removeShorts', updateConfigCache);
312 |   configAddChangeListener('hideGuestSignInPrompts', updateConfigCache);
313 | }
314 | 
315 | /**
316 |  * Restore original JSON.parse (cleanup)
317 |  */
318 | export function destroyAdblock() {
319 |   if (!isHooked) {
320 |     console.warn('[AdBlock] Not initialized');
321 |     return;
322 |   }
323 | 
324 |   console.info('[AdBlock] Restoring JSON.parse');
325 |   
326 |   JSON.parse = origParse;
327 |   isHooked = false;
328 | 
329 |   // Remove config listeners
330 |   configRemoveChangeListener('enableAdBlock', updateConfigCache);
331 |   configRemoveChangeListener('removeShorts', updateConfigCache);
332 |   configRemoveChangeListener('hideGuestSignInPrompts', updateConfigCache);
333 | }
334 | 
335 | // Auto-initialize
336 | initAdblock();


--------------------------------------------------------------------------------
/src/ui.css:
--------------------------------------------------------------------------------
  1 | /* src/ui.css */
  2 | .ytaf-ui-container {
  3 |   position: fixed;
  4 |   top: 5%;
  5 |   left: 30%;
  6 |   transform: translateX(-50%);
  7 |   width: 95vw;
  8 |   max-width: 800px;
  9 |   max-height: 90vh;
 10 |   
 11 |   background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
 12 |   border: 1px solid #3f3f3f;
 13 |   border-radius: 16px;
 14 |   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 
 15 |               0 0 0 1px rgba(255, 255, 255, 0.05);
 16 |   
 17 |   color: #ffffff;
 18 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 19 |   font-size: 48px; /* Original 16px */
 20 |   z-index: 1000;
 21 |   
 22 |   display: flex;
 23 |   flex-direction: column;
 24 | }
 25 | 
 26 | .ytaf-ui-container::before {
 27 |   content: '';
 28 |   position: absolute;
 29 |   top: 0;
 30 |   left: 0;
 31 |   right: 0;
 32 |   bottom: 0;
 33 |   background: linear-gradient(45deg, 
 34 |     rgba(255, 0, 0, 0.05) 0%, 
 35 |     rgba(255, 255, 255, 0.02) 50%, 
 36 |     rgba(255, 0, 0, 0.05) 100%);
 37 |   pointer-events: none;
 38 | }
 39 | 
 40 | .ytaf-ui-container > * {
 41 |   position: relative;
 42 |   z-index: 1;
 43 | }
 44 | 
 45 | .ytaf-ui-container h1 {
 46 |   margin: 0;
 47 |   padding: 24px 32px 16px;
 48 |   text-align: center;
 49 |   font-size: 42px; /* Original 28px */
 50 |   font-weight: 600;
 51 |   background: linear-gradient(135deg, #ff0000, #ff4444);
 52 |   -webkit-background-clip: text;
 53 |   -webkit-text-fill-color: transparent;
 54 |   background-clip: text;
 55 |   border-bottom: 1px solid #3f3f3f;
 56 |   margin-bottom: 0;
 57 | }
 58 | 
 59 | /* Apply scrolling and padding to both pages */
 60 | .ytaf-ui-container > div.ytaf-settings-page {
 61 |   padding: 0 32px 24px;
 62 |   overflow-y: auto;
 63 |   overflow-x: hidden;
 64 |   flex: 1;
 65 |   min-height: 0;
 66 | }
 67 | 
 68 | /* Custom scrollbar */
 69 | .ytaf-ui-container > div::-webkit-scrollbar {
 70 |   width: 8px;
 71 | }
 72 | 
 73 | .ytaf-ui-container > div::-webkit-scrollbar-track {
 74 |   background: rgba(255, 255, 255, 0.05);
 75 |   border-radius: 4px;
 76 | }
 77 | 
 78 | .ytaf-ui-container > div::-webkit-scrollbar-thumb {
 79 |   background: linear-gradient(135deg, #ff0000, #cc0000);
 80 |   border-radius: 4px;
 81 |   transition: background 0.2s ease;
 82 | }
 83 | 
 84 | .ytaf-ui-container > div::-webkit-scrollbar-thumb:hover {
 85 |   background: linear-gradient(135deg, #ff3333, #ff0000);
 86 | }
 87 | 
 88 | .ytaf-ui-container input[type='checkbox'] {
 89 |   width: 20px;
 90 |   height: 20px;
 91 |   margin: 0;
 92 |   margin-right: 12px;
 93 |   appearance: none;
 94 |   -webkit-appearance: none;
 95 |   background: #2a2a2a;
 96 |   border: 2px solid #4a4a4a;
 97 |   border-radius: 4px;
 98 |   position: relative;
 99 |   cursor: pointer;
100 |   transition: all 0.2s ease;
101 |   flex-shrink: 0;
102 | }
103 | 
104 | .ytaf-ui-container input[type='checkbox']:hover {
105 |   border-color: #ff0000;
106 |   background: #333333;
107 |   transform: scale(1.05);
108 | }
109 | 
110 | .ytaf-ui-container input[type='checkbox']:checked {
111 |   background: linear-gradient(135deg, #ff0000, #cc0000);
112 |   border-color: #ff0000;
113 |   box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
114 | }
115 | 
116 | .ytaf-ui-container input[type='checkbox']:checked::after {
117 |   content: '✓';
118 |   position: absolute;
119 |   top: 50%;
120 |   left: 50%;
121 |   transform: translate(-50%, -50%);
122 |   color: white;
123 |   font-size: 14px;
124 |   font-weight: bold;
125 | }
126 | 
127 | .ytaf-ui-container input[type='checkbox']:focus {
128 |   outline: 2px solid #ff0000;
129 |   outline-offset: 2px;
130 | }
131 | 
132 | .ytaf-ui-container label {
133 |   display: flex;
134 |   align-items: center;
135 |   justify-content: space-between;
136 |   font-size: 24px; /* Original 16px */
137 |   font-weight: 400;
138 |   line-height: 0.85; /* Original 1.4 */
139 |   padding: 12px 0;
140 |   cursor: pointer;
141 |   transition: all 0.2s ease;
142 |   border-radius: 8px;
143 |   margin: 0 -8px 4px; 
144 |   padding-left: 8px;
145 |   padding-right: 8px;
146 | }
147 | 
148 | .ytaf-ui-container label .label-content {
149 |   display: flex;
150 |   align-items: center;
151 |   flex: 1;
152 | }
153 | 
154 | .ytaf-ui-container label .color-picker-controls {
155 |   display: flex;
156 |   align-items: center;
157 |   gap: 8px;
158 |   margin-left: auto;
159 |   flex-shrink: 0;
160 | }
161 | 
162 | .ytaf-ui-container label:hover {
163 |   background: rgba(255, 255, 255, 0.05);
164 |   transform: translateX(4px);
165 | }
166 | 
167 | .ytaf-ui-container label:focus-within {
168 |   background: rgba(255, 0, 0, 0.1);
169 |   box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
170 | }
171 | 
172 | .ytaf-ui-container blockquote {
173 |   margin: 16px 0 16px 24px;
174 |   padding-left: 24px;
175 |   border-left: 3px solid #ff0000;
176 |   background: rgba(255, 0, 0, 0.05);
177 |   border-radius: 0 8px 8px 0;
178 | }
179 | 
180 | .ytaf-ui-container blockquote label {
181 |   font-size: 20px; /* Original 15px */
182 |   color: #e0e0e0;
183 |   padding: 8px 0; /* 8px in normal mode */
184 | }
185 | 
186 | .ytaf-ui-container.guest-mode blockquote label {
187 |   padding: 6px 0; /* 6px in guest mode */
188 | }
189 | 
190 | .ytaf-ui-container small {
191 |   display: block;
192 |   text-align: center;
193 |   color: #888888;
194 |   font-size: 16px; /* Original 13px */
195 |   margin-top: 20px;
196 |   padding-top: 16px;
197 |   border-top: 1px solid #3f3f3f;
198 | }
199 | 
200 | /* Focus styles for TV navigation */
201 | .ytaf-ui-container :focus {
202 |   outline: 3px solid #ff0000;
203 |   outline-offset: 2px;
204 | }
205 | 
206 | .ytaf-notification-container {
207 |   position: fixed;
208 |   top: 20px;
209 |   right: 20px;
210 |   font-size: 16px;
211 |   z-index: 1200;
212 |   max-width: 400px;
213 | }
214 | 
215 | .ytaf-notification-container .message {
216 |   background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
217 |   border: 1px solid #3f3f3f;
218 |   color: white;
219 |   padding: 16px 20px;
220 |   margin-bottom: 12px;
221 |   border-radius: 12px;
222 |   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
223 |   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
224 |   opacity: 1;
225 |   transform: translateX(0);
226 |   border-left: 4px solid #ff0000;
227 |   font-weight: 500;
228 |   line-height: 1.4;
229 |   display: block;
230 |   float: none;
231 | }
232 | 
233 | .ytaf-notification-container .message-hidden {
234 |   opacity: 0;
235 |   transform: translateX(100%);
236 |   margin-bottom: 0;
237 |   padding: 0 20px;
238 |   max-height: 0;
239 |   overflow: hidden;
240 | }
241 | 
242 | /* Smooth animations */
243 | @keyframes slideInFromRight {
244 |   from {
245 |     opacity: 0;
246 |     transform: translateX(100%);
247 |   }
248 |   to {
249 |     opacity: 1;
250 |     transform: translateX(0);
251 |   }
252 | }
253 | 
254 | .ytaf-notification-container .message {
255 |   animation: slideInFromRight 0.3s ease-out;
256 | }
257 | 
258 | /* Responsive adjustments */
259 | @media (max-width: 768px) {
260 |   .ytaf-ui-container {
261 |     width: 95vw;
262 |     top: 2.5%;
263 |     max-height: 95vh;
264 |   }
265 |   
266 |   .ytaf-ui-container h1 {
267 |     font-size: 24px;
268 |     padding: 20px 24px 12px;
269 |   }
270 |   
271 |   .ytaf-ui-container > div:not(:first-child) {
272 |     padding: 0 24px 20px;
273 |   }
274 | }
275 | 
276 | /* High contrast mode support */
277 | @media (prefers-contrast: high) {
278 |   .ytaf-ui-container {
279 |     background: #000000;
280 |     border: 2px solid #ffffff;
281 |   }
282 |   
283 |   .ytaf-ui-container input[type='checkbox']:checked {
284 |     background: #ffffff;
285 |     color: #000000;
286 |   }
287 | }
288 | 
289 | /* Styling for Color Pickers */
290 | .ytaf-ui-container label.color-picker-label {
291 |   justify-content: space-between;
292 | }
293 | 
294 | .ytaf-ui-container input[type='color'] {
295 |   -webkit-appearance: none;
296 |   appearance: none;
297 |   width: 40px;
298 |   height: 24px;
299 |   border: 1px solid #4a4a4a;
300 |   border-radius: 4px;
301 |   background-color: transparent;
302 |   cursor: pointer;
303 | }
304 | 
305 | .ytaf-ui-container input[type='color']::-webkit-color-swatch-wrapper {
306 |   padding: 0;
307 | }
308 | 
309 | .ytaf-ui-container input[type='color']::-webkit-color-swatch {
310 |   border: none;
311 |   border-radius: 4px;
312 | }
313 | 
314 | /* OLED-Care Mode */
315 | .ytaf-ui-container.oled-care {
316 |   background: #000000;
317 |   border-color: #383838;
318 |   box-shadow: 0 0 0 1px #383838;
319 | }
320 | 
321 | .ytaf-ui-container.oled-care::before {
322 |   background: none;
323 | }
324 | 
325 | .ytaf-ui-container.oled-care h1 {
326 |  background: none;
327 |  -webkit-text-fill-color: #999999;
328 |  border-bottom-color: #383838;
329 | }
330 | 
331 | .ytaf-ui-container.oled-care > div::-webkit-scrollbar-track {
332 |   background: #080808;
333 | }
334 | 
335 | .ytaf-ui-container.oled-care > div::-webkit-scrollbar-thumb {
336 |   background: #999999;
337 | }
338 | 
339 | .ytaf-ui-container.oled-care input[type='checkbox'] {
340 |   background: #111;
341 |   border-color: #555;
342 | }
343 | 
344 | .ytaf-ui-container.oled-care input[type='checkbox']:hover {
345 |   border-color: #999999;
346 | }
347 | 
348 | .ytaf-ui-container.oled-care input[type='checkbox']:checked {
349 |   background: #999999;
350 |   border-color: #999999;
351 | }
352 | 
353 | .ytaf-ui-container.oled-care label:hover {
354 |   background: #1a1a1a;
355 | }
356 | 
357 | .ytaf-ui-container.oled-care blockquote {
358 |   border-left-color: #999999;
359 |   background: rgba(153, 153, 153, 0.08);
360 | }
361 | 
362 | .ytaf-ui-container.oled-care small {
363 |   border-top-color: #383838;
364 | }
365 | 
366 | .ytaf-notification-container.oled-care .message {
367 |   background: #000000;
368 |   border-color: #383838;
369 |   border-left-color: #999999;
370 | }
371 | 
372 | .color-picker-controls {
373 |   display: flex;
374 |   align-items: center;
375 |   gap: 8px;
376 |   margin-left: auto;
377 | }
378 | 
379 | .reset-color-btn {
380 |   background: #4f4f4f;
381 |   color: #ffffff;
382 |   border: 1px solid #666666;
383 |   border-radius: 4px;
384 |   padding: 2px 8px;
385 |   margin-right: 8px;
386 |   cursor: pointer;
387 |   font-size: 13px;
388 |   transition: background 0.2s ease;
389 |   flex-shrink: 0;
390 | }
391 | 
392 | .reset-color-btn:hover {
393 |   background: #6a6a6a;
394 | }
395 | 
396 | .reset-color-btn:focus {
397 |   outline: 2px solid #ff0000;
398 |   outline-offset: 1px;
399 | }
400 | 
401 | .ytaf-ui-container.oled-care .reset-color-btn {
402 |   background: #222222;
403 |   border-color: #555555;
404 | }
405 | 
406 | .ytaf-ui-container.oled-care .reset-color-btn:hover {
407 |   background: #333333;
408 | }
409 | 
410 | /* Navigation Hints for Pages */
411 | .ytaf-nav-hint {
412 |   display: flex;
413 |   align-items: center;
414 |   padding: 16px 0 8px;
415 |   font-size: 24px;
416 |   color: #aaaaaa;
417 |   cursor: pointer;
418 |   border-top: 1px solid rgba(255, 255, 255, 0.1);
419 |   margin-top: 16px;
420 | }
421 | 
422 | .ytaf-nav-hint.right {
423 |   justify-content: flex-end;
424 |   text-align: right;
425 | }
426 | 
427 | .ytaf-nav-hint.left {
428 |   justify-content: flex-start;
429 |   text-align: left;
430 |   border-top: none;
431 |   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
432 |   margin-top: 0;
433 |   margin-bottom: 16px;
434 |   padding: 8px 0 16px;
435 | }
436 | 
437 | .ytaf-nav-hint span.arrow {
438 |   color: #ff0000;
439 |   font-weight: bold;
440 |   font-size: 28px;
441 |   margin: 0 12px;
442 | }
443 | 
444 | .ytaf-nav-hint:hover {
445 |   color: #ffffff;
446 | }
447 | 
448 | .ytaf-nav-hint:hover span.arrow {
449 |   transform: scale(1.2);
450 | }
451 | 
452 | /* Shortcut Page Styles */
453 | .shortcut-control-row {
454 |   display: flex;
455 |   align-items: center;
456 |   justify-content: space-between;
457 |   padding: 12px 0;
458 |   cursor: pointer;
459 |   transition: all 0.2s ease;
460 |   border-radius: 8px;
461 |   /* Added bottom margin to prevent spatial navigation from skipping items */
462 |   margin: 0 -8px 4px; 
463 |   padding-left: 8px;
464 |   padding-right: 8px;
465 |   font-size: 24px;
466 | }
467 | 
468 | .shortcut-control-row:hover {
469 |   background: rgba(255, 255, 255, 0.05);
470 |   transform: translateX(4px);
471 | }
472 | 
473 | .shortcut-control-row:focus {
474 |   background: rgba(255, 0, 0, 0.1);
475 |   box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
476 |   outline: none;
477 | }
478 | 
479 | .shortcut-label {
480 |   font-weight: 400;
481 |   color: #e0e0e0;
482 | }
483 | 
484 | .shortcut-value-container {
485 |   display: flex;
486 |   align-items: center;
487 |   gap: 12px;
488 |   color: #ffffff;
489 | }
490 | 
491 | .shortcut-value-container .arrow-btn {
492 |   color: #ff0000;
493 |   font-weight: bold;
494 |   font-size: 24px;
495 |   user-select: none;
496 | }
497 | 
498 | .shortcut-value-container .current-value {
499 |   min-width: 150px;
500 |   text-align: center;
501 |   font-weight: 500;
502 | }
503 | 
504 | .ytaf-ui-container.oled-care .shortcut-control-row:hover {
505 |   background: #1a1a1a;
506 | }


--------------------------------------------------------------------------------
/src/return-dislike.js:
--------------------------------------------------------------------------------
  1 | import { configRead, configAddChangeListener } from './config.js';
  2 | 
  3 | // Global cache for API responses (shared across instances)
  4 | const dislikeCache = new Map();
  5 | const CACHE_DURATION = 300000; // 5 minutes
  6 | 
  7 | // Feature detection for compatibility
  8 | const HAS_ABORT_CONTROLLER = typeof AbortController !== 'undefined';
  9 | const HAS_INTERSECTION_OBSERVER = typeof IntersectionObserver !== 'undefined';
 10 | 
 11 | class ReturnYouTubeDislike {
 12 |   constructor(videoID) {
 13 |     this.videoID = videoID;
 14 |     this.active = true;
 15 |     this.dislikesCount = 0;
 16 |     this.initialInjectionDone = false;
 17 |     
 18 |     this.timers = {};
 19 |     this.observers = new Set();
 20 |     this.abortController = null;
 21 |     this.panelElement = null;
 22 | 
 23 |     this.selectors = {
 24 |         panel: 'ytlr-structured-description-content-renderer',
 25 |         mainContainer: 'zylon-provider-3',
 26 |         standardContainer: '.ytLrVideoDescriptionHeaderRendererFactoidContainer',
 27 |         compactContainer: '.rznqCe'
 28 |     };
 29 | 
 30 |     // UI mode configurations
 31 |     this.modeConfigs = {
 32 |         standard: {
 33 |             containerSelector: this.selectors.standardContainer,
 34 |             factoidClass: '.ytLrVideoDescriptionHeaderRendererFactoid',
 35 |             valueSelector: '.ytLrVideoDescriptionHeaderRendererValue',
 36 |             labelSelector: '.ytLrVideoDescriptionHeaderRendererLabel'
 37 |         },
 38 |         compact: {
 39 |             containerSelector: this.selectors.compactContainer,
 40 |             factoidClass: '.nOJlw',
 41 |             valueSelector: '.axf6h',
 42 |             labelSelector: '.Ph2lNb'
 43 |         }
 44 |     };
 45 | 
 46 |     this.handleBodyMutation = this.handleBodyMutation.bind(this);
 47 |     this.handlePanelMutation = this.handlePanelMutation.bind(this);
 48 |   }
 49 | 
 50 |   log(level, message, ...args) {
 51 |     console.log(`[RYD:${this.videoID}] [${level.toUpperCase()}]`, message, ...args);
 52 |   }
 53 | 
 54 |   // --- Timer Management ---
 55 |   setTimeout(callback, delay, name) {
 56 |     clearTimeout(this.timers[name]);
 57 |     if (!this.active) return null;
 58 | 
 59 |     this.timers[name] = setTimeout(() => {
 60 |       delete this.timers[name];
 61 |       if (this.active) callback();
 62 |     }, delay);
 63 |     return this.timers[name];
 64 |   }
 65 |   
 66 |   clearTimeout(name) {
 67 |     if (this.timers[name]) {
 68 |       clearTimeout(this.timers[name]);
 69 |       delete this.timers[name];
 70 |     }
 71 |   }
 72 |   
 73 |   clearAllTimers() {
 74 |     // Use Object.keys for compatibility
 75 |     Object.keys(this.timers).forEach(key => clearTimeout(this.timers[key]));
 76 |     this.timers = {};
 77 |   }
 78 | 
 79 |   // --- Initialization ---
 80 |   async init() {
 81 |     this.log('info', 'Initializing...');
 82 |     
 83 |     // Log feature availability for debugging
 84 |     if (!HAS_ABORT_CONTROLLER) {
 85 |       this.log('info', 'AbortController not available - request cancellation disabled');
 86 |     }
 87 |     if (!HAS_INTERSECTION_OBSERVER) {
 88 |       this.log('info', 'IntersectionObserver not available - visibility detection disabled');
 89 |     }
 90 |     
 91 |     try {
 92 |       await this.fetchVideoData();
 93 | 
 94 |       if (!this.active) return;
 95 | 
 96 | 	  this.injectPersistentStyles();
 97 | 
 98 |       this.observeBodyForPanel();
 99 |     } catch (error) {
100 |       this.log('error', 'Init error:', error);
101 |     }
102 |   }
103 | 
104 |   async fetchVideoData() {
105 |     if (!this.videoID) return;
106 |     
107 |     // Check cache first
108 |     const cached = dislikeCache.get(this.videoID);
109 |     if (cached && (Date.now() - cached.timestamp < CACHE_DURATION)) {
110 |         this.dislikesCount = cached.dislikes;
111 |         this.log('info', 'Dislikes loaded from cache:', this.dislikesCount);
112 |         return;
113 |     }
114 |     
115 |     // Abort any previous request
116 |     if (HAS_ABORT_CONTROLLER) {
117 |         if (this.abortController) {
118 |             this.abortController.abort();
119 |         }
120 |         this.abortController = new AbortController();
121 |     }
122 |     
123 |     try {
124 |       const fetchOptions = {};
125 |       if (HAS_ABORT_CONTROLLER && this.abortController) {
126 |           fetchOptions.signal = this.abortController.signal;
127 |       }
128 |       
129 |       const response = await Promise.race([
130 |         fetch(`https://returnyoutubedislikeapi.com/votes?videoId=${this.videoID}`, fetchOptions),
131 |         new Promise((_, reject) => 
132 |           setTimeout(() => reject(new Error('Timeout')), 8000)
133 |         )
134 |       ]);
135 |       
136 |       if (!response.ok) {
137 |         throw new Error(`HTTP ${response.status}`);
138 |       }
139 |       
140 |       const data = await response.json();
141 |       this.dislikesCount = data?.dislikes || 0;
142 |       
143 |       // Cache the result
144 |       dislikeCache.set(this.videoID, {
145 |         dislikes: this.dislikesCount,
146 |         timestamp: Date.now()
147 |       });
148 |       
149 |       // Limit cache size
150 |       if (dislikeCache.size > 50) {
151 |         const firstKey = dislikeCache.keys().next().value;
152 |         dislikeCache.delete(firstKey);
153 |       }
154 |       
155 |       this.log('info', 'Dislikes loaded:', this.dislikesCount);
156 |     } catch (error) {
157 |       // Only check for AbortError if AbortController is available
158 |       if (HAS_ABORT_CONTROLLER && error.name === 'AbortError') {
159 |         // Silently ignore abort errors
160 |       } else {
161 |         this.log('error', 'Fetch error:', error);
162 |       }
163 |       this.dislikesCount = 0;
164 |     } finally {
165 |       if (HAS_ABORT_CONTROLLER) {
166 |         this.abortController = null;
167 |       }
168 |     }
169 |   }
170 | 
171 |   // --- Observer Logic ---
172 |   observeBodyForPanel() {
173 |     this.cleanupBodyObserver();
174 |     
175 |     const mainContainer = document.querySelector(this.selectors.mainContainer) || document.body;
176 | 	
177 | 	console.log('[RYD] Observing player root:', mainContainer);
178 |     
179 |     this.bodyObserver = new MutationObserver(this.handleBodyMutation);
180 |     this.bodyObserver.observe(mainContainer, { childList: true, subtree: true });
181 |     this.observers.add(this.bodyObserver);
182 |     this.log('info', 'Watching container for panel...');
183 | 
184 |     const existingPanel = document.querySelector(this.selectors.panel);
185 |     if (existingPanel) {
186 |       this.setupPanel(existingPanel);
187 |     }
188 |   }
189 | 
190 |   handleBodyMutation(mutations) {
191 |     if (!this.active) return;
192 | 
193 |     // Optimized check using .some()
194 |     if (!mutations.some(m => m.addedNodes.length > 0)) return;
195 | 
196 |     const panel = document.querySelector(this.selectors.panel);
197 |     if (!panel) return;
198 |     
199 |     this.setupPanel(panel);
200 |   }
201 | 
202 |   setupPanel(panel) {
203 |       if (!this.active) return;
204 |       this.panelElement = panel; // Cache reference
205 |       
206 |       this.checkAndInjectDislike(panel);
207 |       this.attachContentObserver(panel);
208 |       
209 |       // Only setup IntersectionObserver if available
210 |       if (HAS_INTERSECTION_OBSERVER) {
211 |           this.setupIntersectionObserver(panel);
212 |       }
213 |   }
214 | 
215 |   attachContentObserver(panelElement) {
216 |     if (this.panelContentObserver) {
217 |         this.panelContentObserver.disconnect();
218 |         this.observers.delete(this.panelContentObserver);
219 |     }
220 | 
221 |     this.panelContentObserver = new MutationObserver(this.handlePanelMutation);
222 |     this.panelContentObserver.observe(panelElement, { 
223 |         childList: true, 
224 |         subtree: true 
225 |     });
226 |     this.observers.add(this.panelContentObserver);
227 |     this.log('info', 'Attached panel observer.');
228 |   }
229 | 
230 |   setupIntersectionObserver(panelElement) {
231 |     if (!HAS_INTERSECTION_OBSERVER) {
232 |         this.log('info', 'IntersectionObserver not available, skipping visibility detection');
233 |         return;
234 |     }
235 |     
236 |     if (this.intersectionObserver) {
237 |         this.intersectionObserver.disconnect();
238 |         this.observers.delete(this.intersectionObserver);
239 |     }
240 | 
241 |     this.intersectionObserver = new IntersectionObserver((entries) => {
242 |         if (!this.active) return;
243 |         if (entries[0].isIntersecting) {
244 |             this.checkAndInjectDislike(this.panelElement);
245 |         }
246 |     }, { threshold: 0.1 });
247 |     
248 |     this.intersectionObserver.observe(panelElement);
249 |     this.observers.add(this.intersectionObserver);
250 |     this.log('info', 'Intersection observer active');
251 |   }
252 | 
253 |   handlePanelMutation() {
254 |       if (!this.active) return;
255 |       
256 |       this.setTimeout(() => {
257 |           if (!this.active || !this.panelElement) return;
258 |           this.checkAndInjectDislike(this.panelElement);
259 |       }, 200, 'injectDebounce');
260 |   }
261 | 
262 |   // --- Core Logic ---
263 |   checkAndInjectDislike(panelElement) {
264 |     if (!this.active) return;
265 | 
266 |     // Early exit if already exists
267 |     if (document.getElementById('ryd-dislike-factoid')) return;
268 | 
269 |     try {
270 |       // Determine UI mode
271 |       const standardContainer = panelElement.querySelector(this.modeConfigs.standard.containerSelector);
272 |       const compactContainer = panelElement.querySelector(this.modeConfigs.compact.containerSelector);
273 |       
274 |       const mode = standardContainer ? this.modeConfigs.standard :
275 |                    compactContainer ? this.modeConfigs.compact : null;
276 |       
277 |       if (!mode) return;
278 | 
279 |       const container = standardContainer || compactContainer;
280 | 
281 |       // Optimized single query with case-insensitive search
282 |       const likesElement = container.querySelector(
283 |           `div[idomkey="factoid-0"]${mode.factoidClass}, ` +
284 |           `div[aria-label*="like"]${mode.factoidClass}, ` +
285 |           `div[aria-label*="Like"]${mode.factoidClass}`
286 |       );
287 | 
288 |       if (!likesElement) return;
289 | 
290 |       this.log('info', 'Injecting dislike count...');
291 |       
292 |       // Shallow clone and rebuild (more efficient)
293 |       const dislikeElement = likesElement.cloneNode(false);
294 |       dislikeElement.id = 'ryd-dislike-factoid';
295 |       dislikeElement.setAttribute('idomkey', 'factoid-ryd');
296 |       dislikeElement.innerHTML = likesElement.innerHTML;
297 | 
298 |       const valueElement = dislikeElement.querySelector(mode.valueSelector);
299 |       const labelElement = dislikeElement.querySelector(mode.labelSelector);
300 | 
301 |       if (valueElement && labelElement) {
302 |         const dislikeText = this.formatNumber(this.dislikesCount);
303 |         valueElement.textContent = dislikeText;
304 |         labelElement.textContent = 'Dislikes';
305 |         dislikeElement.setAttribute('aria-label', `${dislikeText} Dislikes`);
306 |         dislikeElement.setAttribute('role', 'text');
307 |         dislikeElement.setAttribute('tabindex', '-1'); // TV accessibility
308 |       }
309 | 
310 |       likesElement.insertAdjacentElement('afterend', dislikeElement);
311 | 	  
312 | 	  container.classList.add('ryd-ready');
313 |       
314 |       // Mark initial injection as complete
315 |       this.initialInjectionDone = true;
316 | 
317 |     } catch (error) {
318 |       this.log('error', 'Injection error:', error);
319 |     }
320 |   }
321 | 
322 |   formatNumber(num) {
323 |     if (num >= 1e6) return (num / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
324 |     if (num >= 1e3) return (num / 1e3).toFixed(1).replace(/\.0$/, '') + 'K';
325 |     return num.toString();
326 |   }
327 |   
328 |   injectPersistentStyles() {
329 |     // Only inject once globally (not per instance)
330 |     if (document.getElementById('ryd-persistent-styles')) return;
331 |     
332 |     const styleElement = document.createElement('style');
333 |     styleElement.id = 'ryd-persistent-styles';
334 |     styleElement.textContent = `
335 |       ytlr-structured-description-content-renderer .ytLrVideoDescriptionHeaderRendererFactoidContainer.ryd-ready,
336 |       ytlr-structured-description-content-renderer .rznqCe.ryd-ready {
337 |         display: flex !important;
338 |         flex-wrap: wrap !important;
339 |         justify-content: center !important;
340 |         gap: 1.5rem !important;
341 |         height: auto !important;
342 |         overflow: visible !important;
343 |       }
344 |       
345 |       ytlr-structured-description-content-renderer .ryd-ready div[idomkey="factoid-2"] {
346 |         margin-top: 0 !important;
347 |       }
348 |       ytlr-structured-description-content-renderer .ryd-ready div[idomkey="factoid-2"] .ytLrVideoDescriptionHeaderRendererValue,
349 |       ytlr-structured-description-content-renderer .ryd-ready div[idomkey="factoid-2"] .axf6h {
350 |         display: inline-block !important;
351 |         margin-right: 0.4rem !important;
352 |       }
353 |       ytlr-structured-description-content-renderer .ryd-ready div[idomkey="factoid-2"] .ytLrVideoDescriptionHeaderRendererLabel,
354 |       ytlr-structured-description-content-renderer .ryd-ready div[idomkey="factoid-2"] .Ph2lNb {
355 |         display: inline-block !important;
356 |       }
357 |       
358 |       /* Virtual list natural flow fixes (Keep global as these are structural fixes) */
359 |       ytlr-structured-description-content-renderer yt-virtual-list {
360 |         height: auto !important;
361 |         overflow: visible !important;
362 |         display: block !important;
363 |       }
364 |       ytlr-structured-description-content-renderer .NUDen {
365 |         position: relative !important;
366 |         height: auto !important;
367 |         width: 100% !important;
368 |       }
369 |       ytlr-structured-description-content-renderer .TXB27d,
370 |       ytlr-structured-description-content-renderer .ytVirtualListItem {
371 |         position: relative !important;
372 |         transform: none !important;
373 |         height: auto !important;
374 |         margin-bottom: 1rem !important;
375 |         width: 100% !important;
376 |         pointer-events: auto !important;
377 |       }
378 |       
379 |       /* Description body fixes */
380 |       ytlr-structured-description-content-renderer ytlr-expandable-video-description-body-renderer {
381 |         height: auto !important;
382 |         display: block !important;
383 |       }
384 |       ytlr-structured-description-content-renderer ytlr-expandable-video-description-body-renderer ytlr-sidesheet-item {
385 |         height: auto !important;
386 |         display: block !important;
387 |       }
388 |       
389 |       /* RYD dislike element styling */
390 |       #ryd-dislike-factoid {
391 |         flex: 0 0 auto !important;
392 |       }
393 |     `;
394 |     
395 |     document.head.appendChild(styleElement);
396 |     this.log('info', 'Persistent styles injected');
397 |   }
398 | 
399 |   cleanupBodyObserver() {
400 |     if (this.bodyObserver) {
401 |         this.bodyObserver.disconnect();
402 |         this.observers.delete(this.bodyObserver);
403 |         this.bodyObserver = null;
404 |     }
405 |   }
406 | 
407 |   cleanupObservers() {
408 |     this.observers.forEach(obs => obs.disconnect());
409 |     this.observers.clear();
410 |     
411 |     this.bodyObserver = null;
412 |     this.panelContentObserver = null;
413 |     this.intersectionObserver = null;
414 |   }
415 | 
416 |   destroy() {
417 |     this.log('info', 'Destroying...');
418 |     this.active = false;
419 |     
420 |     // Abort any in-flight requests (if AbortController is available)
421 |     if (HAS_ABORT_CONTROLLER && this.abortController) {
422 |         this.abortController.abort();
423 |         this.abortController = null;
424 |     }
425 |     
426 |     // Clear all timers
427 |     this.clearAllTimers();
428 |     
429 |     // Disconnect all observers
430 |     this.cleanupObservers();
431 |     
432 |     // Remove injected elements
433 |     const el = document.getElementById('ryd-dislike-factoid');
434 |     if (el) el.remove();
435 |     
436 |     // Only remove styles if this is the last/only instance
437 |     if (window.returnYouTubeDislike === this) {
438 |         const styles = document.getElementById('ryd-persistent-styles');
439 |         if (styles) styles.remove();
440 |     }
441 |     
442 |     // Clear references for garbage collection
443 |     this.panelElement = null;
444 |   }
445 | }
446 | 
447 | // --- Global Management ---
448 | if (typeof window !== 'undefined') {
449 |   window.returnYouTubeDislike = null;
450 | 
451 |   const cleanup = () => {
452 |       if (window.returnYouTubeDislike) {
453 |           window.returnYouTubeDislike.destroy();
454 |           window.returnYouTubeDislike = null;
455 |       }
456 |   };
457 | 
458 |   const handleHashChange = () => {
459 |     const urlStr = window.location.hash.startsWith('#') ? window.location.hash.slice(1) : window.location.hash;
460 |     if (!urlStr) { 
461 |         cleanup(); 
462 |         return; 
463 |     }
464 | 
465 |     const url = new URL(urlStr, 'http://dummy.com');
466 |     const isWatch = url.pathname === '/watch';
467 |     const videoID = url.searchParams.get('v');
468 | 
469 |     if (!isWatch || !videoID) {
470 |         cleanup();
471 |         return;
472 |     }
473 | 
474 |     // Only create new instance if video changed
475 |     if (!window.returnYouTubeDislike || window.returnYouTubeDislike.videoID !== videoID) {
476 |         cleanup();
477 |         
478 |         let enabled = true;
479 |         if (typeof configRead === 'function') {
480 |             try { 
481 |                 enabled = configRead('enableReturnYouTubeDislike'); 
482 |             } catch(e) {
483 |                 console.warn('Config read failed:', e);
484 |             }
485 |         }
486 | 
487 |         if (enabled) {
488 |             window.returnYouTubeDislike = new ReturnYouTubeDislike(videoID);
489 |             window.returnYouTubeDislike.init();
490 |         }
491 |     }
492 |   };
493 | 
494 |   // Event listeners
495 |   window.addEventListener('hashchange', handleHashChange, { passive: true });
496 |   
497 |   // Delayed init for SPA load
498 |   if (document.readyState === 'loading') {
499 |       window.addEventListener('DOMContentLoaded', () => setTimeout(handleHashChange, 500));
500 |   } else {
501 |       setTimeout(handleHashChange, 500);
502 |   }
503 | 
504 |   // Config change listener
505 |   if (typeof configAddChangeListener === 'function') {
506 |       configAddChangeListener('enableReturnYouTubeDislike', (evt) => {
507 |           evt.detail.newValue ? handleHashChange() : cleanup();
508 |       });
509 |   }
510 |   
511 |   // Cleanup on unload
512 |   window.addEventListener('beforeunload', cleanup, { passive: true });
513 | }
514 | 
515 | export { ReturnYouTubeDislike };


--------------------------------------------------------------------------------
/src/sponsorblock.js:
--------------------------------------------------------------------------------
  1 | /* src/sponsorblock.js */
  2 | import sha256_import from 'tiny-sha256';
  3 | import { configRead, configAddChangeListener, configRemoveChangeListener, segmentTypes } from './config';
  4 | import { showNotification } from './ui';
  5 | import sponsorBlockUI from './Sponsorblock-UI.js';
  6 | import { WebOSVersion } from './webos-utils.js';
  7 | 
  8 | let sha256 = sha256_import;
  9 | 
 10 | const SPONSORBLOCK_CONFIG = {
 11 |     primaryAPI: 'https://sponsorblock.inf.re/api',
 12 |     fallbackAPI: 'https://sponsor.ajay.app/api',
 13 |     timeout: 5000,
 14 |     retryAttempts: 2
 15 | };
 16 | 
 17 | const CONFIG_MAPPING = {
 18 |     sponsor: 'enableSponsorBlockSponsor',
 19 |     intro: 'enableSponsorBlockIntro',
 20 |     outro: 'enableSponsorBlockOutro',
 21 |     interaction: 'enableSponsorBlockInteraction',
 22 |     selfpromo: 'enableSponsorBlockSelfPromo',
 23 |     musicofftopic: 'enableSponsorBlockMusicOfftopic',
 24 |     preview: 'enableSponsorBlockPreview',
 25 |     filler: 'enableSponsorBlockFiller',
 26 |     hook: 'enableSponsorBlockHook'
 27 | };
 28 | 
 29 | if (typeof sha256 !== 'function') {
 30 |     sha256 = () => null;
 31 | }
 32 | 
 33 | class SponsorBlockHandler {
 34 |     constructor(videoID) {
 35 |         this.videoID = videoID;
 36 |         this.segments = [];
 37 | 		this.highlightSegment = null;
 38 |         this.video = null;
 39 |         this.progressBar = null;
 40 |         this.overlay = null;
 41 |         this.debugMode = false;
 42 |         
 43 |         // Cache enabled categories to avoid configRead in tight loops
 44 |         this.activeCategories = new Set();
 45 |         
 46 |         // State
 47 |         this.isProcessing = false;
 48 |         this.wasMutedBySB = false; // State for muting
 49 |         
 50 |         this.mutedSegmentsEnabled = false;
 51 |         
 52 |         // Observers & Listeners
 53 |         this.observers = new Set();
 54 |         this.listeners = new Map(); 
 55 | 		
 56 | 		this.configListeners = [];
 57 | 		this.rafIds = new Set();
 58 |         
 59 |         this.abortController = null;
 60 |         
 61 |         this.updateConfigCache();
 62 |         this.setupConfigListeners();
 63 |         
 64 |         this.log('info', `Created handler for ${this.videoID}`);
 65 |     }
 66 | 	
 67 | 	requestAF(callback) {
 68 |         const id = requestAnimationFrame(() => {
 69 |             this.rafIds.delete(id);
 70 |             callback();
 71 |         });
 72 |         this.rafIds.add(id);
 73 |         return id;
 74 |     }
 75 | 
 76 |     log(level, message, ...args) {
 77 |         if (level === 'debug' && !this.debugMode) return;
 78 |         if (level === 'info' && !this.debugMode) return;
 79 |         
 80 |         const prefix = `[SB:${this.videoID}]`;
 81 |         console[level === 'warn' ? 'warn' : 'log'](prefix, message, ...args);
 82 |     }
 83 | 
 84 |     updateConfigCache() {
 85 |         this.activeCategories.clear();
 86 |         for (const [cat, configKey] of Object.entries(CONFIG_MAPPING)) {
 87 |             if (configRead(configKey)) {
 88 |                 this.activeCategories.add(cat);
 89 |             }
 90 |         }
 91 |         this.mutedSegmentsEnabled = configRead('enableMutedSegments');
 92 |     }
 93 | 
 94 | 	setupConfigListeners() {
 95 |         this.boundConfigUpdate = this.updateConfigCache.bind(this);
 96 |         Object.values(CONFIG_MAPPING).forEach(key => {
 97 |             configAddChangeListener(key, this.boundConfigUpdate);
 98 |             this.configListeners.push({ key, callback: this.boundConfigUpdate });
 99 |         });
100 |         // Also listen to muted segments config
101 |         configAddChangeListener('enableMutedSegments', this.boundConfigUpdate);
102 |         this.configListeners.push({ key: 'enableMutedSegments', callback: this.boundConfigUpdate });
103 |     }
104 | 
105 |     async init() {
106 |         if (!this.videoID) return;
107 | 		
108 |         const initVideoID = this.videoID;
109 |         sponsorBlockUI.updateSegments([]);
110 |         const hash = sha256(this.videoID);
111 |         if (!hash) return;
112 |         const hashPrefix = hash.substring(0, 4);
113 |         try {
114 |             const data = await this.fetchSegments(hashPrefix);
115 |             
116 |             if (this.videoID !== initVideoID) {
117 |                 this.log('info', 'Video changed during fetch, aborting init');
118 |                 return;
119 |             }
120 |             
121 |             const videoData = Array.isArray(data) ? data.find(x => x.videoID === this.videoID) : data;
122 |             
123 |             if (videoData && videoData.segments && videoData.segments.length) {
124 |                 this.segments = videoData.segments.sort((a, b) => a.segment[0] - b.segment[0]);
125 |                 this.highlightSegment = this.segments.find(s => s.category === 'poi_highlight');
126 |                 this.log('info', `Found ${this.segments.length} segments.`);
127 |                 
128 | 				this.start();
129 | 				
130 |                 // Update UI with new segments
131 |                 sponsorBlockUI.updateSegments(this.segments);
132 |             }
133 |         } catch (e) {
134 | 			showNotification("SB Error: " + e.message);
135 |             this.log('warn', 'Fetch failed', e);
136 |         }
137 |     }
138 | 
139 |     start() {
140 |         this.video = document.querySelector('video');
141 |         if (this.video) {
142 |             this.addEvent(this.video, 'timeupdate', this.handleTimeUpdate.bind(this));
143 |             
144 |             // [Updated] Sanitize segments whenever duration changes (load or resolution switch)
145 |             this.addEvent(this.video, 'durationchange', () => {
146 |                 this.sanitizeSegments();
147 |                 this.drawOverlay();
148 |             });
149 | 
150 |             // [New] If metadata is already loaded (e.g. late injection), sanitize immediately
151 |             if (this.video.duration) {
152 |                 this.sanitizeSegments();
153 |             }
154 |         }
155 | 
156 |         this.injectCSS();
157 |         
158 |         this.observePlayerUI();
159 |         this.checkForProgressBar();
160 |     }
161 | 
162 |     observePlayerUI() {
163 |         const domObserver = new MutationObserver((mutations) => {
164 |             if (this.isProcessing) return;
165 |             
166 |             let shouldCheck = false;
167 |             // Optimize: Iterate backwards and break early if possible,
168 |             // or just check if relevant nodes are involved.
169 |             for (const m of mutations) {
170 |                 // Optimization: Don't check attributes of unrelated elements
171 |                 if (m.type === 'attributes' && m.target !== this.progressBar) continue;
172 | 
173 |                 if (m.type === 'childList') {
174 |                     if (this.overlay && Array.from(m.removedNodes).includes(this.overlay)) {
175 |                         shouldCheck = true;
176 |                         break;
177 |                     }
178 |                     if (this.progressBar && Array.from(m.removedNodes).some(n => n === this.progressBar || n.contains(this.progressBar))) {
179 |                          shouldCheck = true;
180 |                          break;
181 |                     }
182 |                     
183 |                     // Only check added nodes if we don't have a progress bar or it's potentially new UI
184 |                     for (const node of m.addedNodes) {
185 |                         if (node.nodeType === 1 && (
186 |                             node.nodeName.includes('PLAYER-BAR') || 
187 |                             node.classList?.contains('ytLrProgressBarSliderBase') ||
188 |                             node.getAttribute?.('idomkey') === 'slider'
189 |                         )) {
190 |                             shouldCheck = true;
191 |                             break;
192 |                         }
193 |                     }
194 |                 }
195 |                 if (shouldCheck) break;
196 |             }
197 | 
198 |             if (shouldCheck) {
199 |                 this.isProcessing = true;
200 |                 this.requestAF(() => {
201 |                     this.checkForProgressBar();
202 |                     this.isProcessing = false;
203 |                 });
204 |             }
205 |         });
206 | 
207 | 		const playerRoot = document.querySelector('ytlr-app') || 
208 |                            document.getElementById('container') ||
209 |                            document.body;
210 | 						   
211 | 		console.log('[SponsorBlock] Observing player root:', playerRoot);
212 | 
213 |         domObserver.observe(playerRoot, {
214 |             childList: true,
215 |             subtree: true,
216 |             attributes: true,
217 |             attributeFilter: ['class', 'style', 'hidden']
218 |         });
219 |         
220 |         this.observers.add(domObserver);
221 |     }
222 | 
223 |     checkForProgressBar() {
224 |         if (this.overlay && document.body.contains(this.overlay) && this.progressBar && document.body.contains(this.progressBar)) {
225 |              return;
226 |         }
227 | 
228 |         let target = document.querySelector('ytlr-multi-markers-player-bar-renderer [idomkey="segment"]') ||
229 |                      document.querySelector('ytlr-multi-markers-player-bar-renderer [idomkey="progress-bar"]') ||
230 |                      document.querySelector('ytlr-multi-markers-player-bar-renderer') ||
231 |                      document.querySelector('ytlr-progress-bar [idomkey="slider"]') ||
232 |                      document.querySelector('.ytLrProgressBarSliderBase') || 
233 |                      document.querySelector('.afTAdb');
234 | 
235 |         if (target) {
236 |             this.progressBar = target;
237 |             const style = window.getComputedStyle(target);
238 |             if (style.position === 'static') target.style.position = 'relative';
239 |             if (style.overflow !== 'visible') target.style.setProperty('overflow', 'visible', 'important');
240 | 
241 |             this.drawOverlay();
242 |         }
243 |     }
244 | 
245 |     drawOverlay() {
246 |         if (!this.progressBar || !this.segments.length) return;
247 |         
248 |         const duration = this.video ? this.video.duration : 0;
249 |         if (!duration || isNaN(duration)) return;
250 | 
251 |         if (this.overlay) this.overlay.remove();
252 | 
253 |         const fragment = document.createDocumentFragment();
254 |         const highlightEnabled = configRead('enableSponsorBlockHighlight');
255 | 
256 |         this.segments.forEach(segment => {
257 |             const isHighlight = segment.category === 'poi_highlight';
258 |             // Use Cached Config
259 |             if (isHighlight && !highlightEnabled) return;
260 |             if (!isHighlight && !this.activeCategories.has(segment.category)) return;
261 | 
262 |             const [start, end] = segment.segment;
263 |             const div = document.createElement('div');
264 |             
265 |             const colorKey = isHighlight ? 'poi_highlightColor' : `${segment.category}Color`;
266 |             // We still read config for color, but that's one-time per overlay draw, not per frame.
267 |             const color = configRead(colorKey) || segmentTypes[segment.category]?.color || '#00d400';
268 |             
269 |             div.style.backgroundColor = color;
270 |             div.style.position = 'absolute';
271 |             div.style.height = '100%'; 
272 |             div.style.top = '0';
273 |             
274 |             const left = (start / duration) * 100;
275 |             div.className = isHighlight ? 'previewbar highlight' : 'previewbar';
276 |             div.style.left = `${left}%`;
277 |             div.style.zIndex = isHighlight ? '2001' : '2000';
278 |             
279 |             if (!isHighlight) {
280 |                 const width = ((end - start) / duration) * 100;
281 |                 div.style.width = `${width}%`;
282 |                 div.style.opacity = segmentTypes[segment.category]?.opacity || '0.7';
283 |             }
284 |             
285 |             fragment.appendChild(div);
286 |         });
287 | 
288 |         this.overlay = document.createElement('div');
289 |         this.overlay.id = 'previewbar';
290 |         this.overlay.appendChild(fragment); 
291 |         this.progressBar.appendChild(this.overlay);
292 |     }
293 | 
294 |     handleTimeUpdate() {
295 |         if (!this.video || (this.video.isConnected === false) || this.video.paused || this.video.seeking) return;
296 |         
297 |         const currentTime = this.video.currentTime;
298 |         let shouldBeMuted = false;
299 |         
300 |         // Performance: Use simple for loop
301 |         for (let i = 0; i < this.segments.length; i++) {
302 |             const seg = this.segments[i];
303 |             
304 |             // Fast bounding box check
305 |             if (currentTime < seg.segment[0] || currentTime >= seg.segment[1]) continue;
306 |             
307 |             if (seg.category === 'poi_highlight') continue;
308 | 
309 |             // Use cached category check (O(1))
310 |             if (this.activeCategories.has(seg.category)) {
311 |                 // If actionType is skip (default or explicit), skip it
312 |                 if (!seg.actionType || seg.actionType === 'skip') {
313 |                     this.skipSegment(seg);
314 |                     return; 
315 |                 }
316 |                 
317 |                 // If actionType is mute and mute is enabled, mark for mute
318 |                 if (seg.actionType === 'mute' && this.mutedSegmentsEnabled) {
319 |                     shouldBeMuted = true;
320 |                 }
321 |             }
322 |         }
323 | 
324 |         // Handle Muting State
325 |         if (shouldBeMuted) {
326 |             if (!this.wasMutedBySB) {
327 |                 this.wasMutedBySB = true;
328 |                 this.video.muted = true;
329 |                 showNotification('Muting Segment');
330 |             }
331 |         } else {
332 |             if (this.wasMutedBySB) {
333 |                 this.wasMutedBySB = false;
334 |                 this.video.muted = false;
335 |                 showNotification('Unmuting');
336 |             }
337 |         }
338 |     }
339 | 	
340 | 	sanitizeSegments() {
341 |         if (WebOSVersion() !== 5) return;
342 |         if (!this.video || !this.video.duration || isNaN(this.video.duration)) return;
343 | 		
344 |         this.log('debug', 'Sanitizing segments for WebOS 5, duration:', this.video.duration);
345 |         const duration = this.video.duration;
346 | 		
347 |         this.segments.forEach(segment => {
348 |             if (segment.segment[1] >= duration - 0.5) {
349 |                 const oldEnd = segment.segment[1];
350 |                 segment.segment[1] = Math.max(0, duration - 0.30);
351 |                  
352 |                 this.log('info', `Clamped segment end from ${oldEnd} to ${segment.segment[1]}`);
353 |             }
354 |         });
355 |     }
356 | 
357 | 	skipSegment(segment) {
358 | 		let skipTarget = segment.segment[1];
359 |         
360 |         // WebOS 5 Specific Check: Run the sanitize segment check/logic
361 |         if (WebOSVersion() === 5) {
362 |             const duration = this.video.duration;
363 |             if (skipTarget >= duration - 0.5) {
364 |                 const buffer = 0.25; 
365 |                 skipTarget = Math.max(0, duration - buffer);
366 |                 if (buffer > 0.1 && !this.video.muted) {
367 |                  this.video.muted = true;
368 |                  setTimeout(() => { 
369 |                      if (this.video.paused || this.video.currentTime < 5) {
370 |                          this.video.muted = false; 
371 |                      }
372 |                  }, 1000); 
373 |             }
374 |             }
375 |         }
376 | 		
377 | 		this.video.currentTime = skipTarget;
378 | 		
379 | 		// Resume playback if not near end (non-WebOS5 only)
380 | 		if (WebOSVersion() !== 5) {
381 | 			const timeRemaining = this.video.duration - this.video.currentTime;
382 | 			if (timeRemaining > 0.5 && this.video.paused) { 
383 | 				this.video.play();
384 | 			}
385 | 		}
386 | 
387 |         this.requestAF(() => {
388 |             showNotification(`Skipped ${segmentTypes[segment.category]?.name || segment.category}`);
389 |         });
390 |     }
391 | 
392 |     jumpToNextHighlight() {
393 |         if (!this.video || !this.highlightSegment || !configRead('enableSponsorBlockHighlight')) return false;
394 |         this.video.currentTime = this.highlightSegment.segment[0];
395 |         this.requestAF(() => {
396 |             showNotification('Jumped to Highlight');
397 |         });
398 |         return true;
399 |     }
400 | 
401 |     async fetchSegments(hashPrefix) {
402 |         const categories = JSON.stringify([
403 |             'sponsor', 'intro', 'outro', 'interaction', 'selfpromo', 
404 |             'musicofftopic', 'preview', 'chapter', 'poi_highlight', 
405 |             'filler', 'hook'
406 |         ]);
407 |         
408 |         // Request mute and skip actions
409 |         const actionTypes = JSON.stringify(['skip', 'mute']);
410 |         
411 |         if (this.abortController) {
412 |             this.abortController.abort();
413 |         }
414 |         
415 |         const tryFetch = async (url) => {
416 |             try {
417 |                 // FALLBACK: Logic to support WebOS 3.x (No AbortController)
418 |                 const fetchURL = `${url}/skipSegments/${hashPrefix}?categories=${encodeURIComponent(categories)}&actionTypes=${encodeURIComponent(actionTypes)}&videoID=${this.videoID}`;
419 |                 
420 |                 if (typeof AbortController !== 'undefined') {
421 |                     this.abortController = new AbortController();
422 |                     const controller = this.abortController;
423 |                     const id = setTimeout(() => controller.abort(), SPONSORBLOCK_CONFIG.timeout);
424 |                     const res = await fetch(fetchURL, { signal: controller.signal });
425 |                     clearTimeout(id);
426 |                     if (res.ok) return await res.json();
427 |                 } else {
428 |                     // Legacy Fallback for older TVs
429 |                     const res = await Promise.race([
430 |                         fetch(fetchURL),
431 |                         new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), SPONSORBLOCK_CONFIG.timeout))
432 |                     ]);
433 |                     if (res.ok) return await res.json();
434 |                 }
435 |             } catch(e) {
436 |                 this.log('warn', 'Fetch attempt failed:', e.message);
437 |             }
438 |             return null;
439 |         };
440 | 
441 |         let res = await tryFetch(SPONSORBLOCK_CONFIG.primaryAPI);
442 |         if (!res) res = await tryFetch(SPONSORBLOCK_CONFIG.fallbackAPI);
443 |         return res;
444 |     }
445 | 
446 |     injectCSS() {
447 |         if (document.getElementById('sb-css')) return;
448 |         const css = `
449 |             #previewbar { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; z-index: 2000 !important; overflow: visible !important; }
450 |             .previewbar { position: absolute !important; list-style: none !important; height: 100% !important; top: 0 !important; display: block !important; z-index: 2001 !important; }
451 |             .previewbar.highlight { min-width: 5.47px !important; max-width: 5.47px !important; height: 100% !important; top: 0 !important; background-color: #ff0000; }
452 |         `;
453 |         const style = document.createElement('style');
454 |         style.id = 'sb-css';
455 |         style.textContent = css;
456 |         document.head.appendChild(style);
457 |     }
458 | 
459 |     addEvent(elem, type, handler) {
460 |         if (!elem) return;
461 |         elem.addEventListener(type, handler);
462 |         if (!this.listeners.has(elem)) this.listeners.set(elem, new Map());
463 |         this.listeners.get(elem).set(type, handler);
464 |     }
465 | 
466 |     destroy() {
467 |         this.log('info', 'Destroying instance.');
468 | 		
469 | 		// Clear all pending Animation Frames
470 | 		this.rafIds.forEach(id => cancelAnimationFrame(id));
471 |         this.rafIds.clear();
472 |         
473 |         if (this.abortController) {
474 |             this.abortController.abort();
475 |             this.abortController = null;
476 |         }
477 |         
478 |         // 1. Clean up UI
479 |         sponsorBlockUI.togglePopup(false); 
480 |         sponsorBlockUI.updateSegments([]);
481 |         if (this.overlay) {
482 |             this.overlay.remove();
483 |             this.overlay = null;
484 |         }
485 | 
486 |         // 2. Clean up Injected CSS
487 |         const style = document.getElementById('sb-css');
488 |         if (style) {
489 |             style.remove();
490 |         }
491 | 
492 |         // 3. Reset Audio State
493 |         if (this.wasMutedBySB && this.video) {
494 |             this.video.muted = false;
495 |         }
496 |         
497 |         // 4. Remove DOM Event Listeners
498 |         this.listeners.forEach((events, elem) => {
499 |             events.forEach((handler, type) => elem.removeEventListener(type, handler));
500 |         });
501 |         this.listeners.clear();
502 | 
503 |         // 5. Disconnect Observers
504 |         this.observers.forEach(obs => obs.disconnect());
505 |         this.observers.clear();
506 | 
507 |         // 6. Remove Config Listeners
508 |         this.configListeners.forEach(({ key, callback }) => {
509 |             configRemoveChangeListener(key, callback);
510 |         });
511 |         this.configListeners = [];
512 |         
513 |         // 7. Release Memory / DOM References
514 |         this.segments = [];
515 |         this.highlightSegment = null;
516 |         this.video = null;
517 |         this.progressBar = null;
518 |         this.activeCategories = null;
519 |     }
520 | }
521 | 
522 | if (typeof window !== 'undefined') {
523 |     if (window.__ytaf_sb_init) {
524 |         window.removeEventListener('hashchange', window.__ytaf_sb_init);
525 |     }
526 | 
527 |     window.sponsorblock = null;
528 |     
529 |     let initTimeout = null;
530 | 
531 |     const initSB = () => {
532 |         // Clear any pending init
533 |         if (initTimeout) {
534 |             clearTimeout(initTimeout);
535 |         }
536 |         
537 |         // Debounce to handle rapid navigation
538 |         initTimeout = setTimeout(() => {
539 |             if (window.sponsorblock) window.sponsorblock.destroy();
540 |             let videoID = null;
541 |             try {
542 |                 const hash = window.location.hash;
543 |                 if (hash.startsWith('#')) {
544 |                     const parts = hash.split('?');
545 |                     if (parts.length > 1) {
546 |                         // FALLBACK: Check if URLSearchParams is supported
547 |                         if (typeof URLSearchParams !== 'undefined') {
548 |                             const params = new URLSearchParams(parts[1]);
549 |                             videoID = params.get('v');
550 |                         } else {
551 |                             // Legacy Regex Fallback for WebOS 3.x
552 |                             const match = parts[1].match(/(?:[?&]|^)v=([^&]+)/);
553 |                             if (match) {
554 |                                 videoID = match[1];
555 |                             }
556 |                         }
557 |                     }
558 |                 }
559 |             } catch(e) {}
560 | 
561 |             if (videoID && configRead('enableSponsorBlock')) {
562 |                 window.sponsorblock = new SponsorBlockHandler(videoID);
563 |                 window.sponsorblock.init();
564 |             }
565 |             
566 |             initTimeout = null;
567 |         }, 300); // Debounce delay
568 |     };
569 | 
570 |     window.__ytaf_sb_init = initSB;
571 |     window.addEventListener('hashchange', initSB);
572 | 
573 |     if (document.readyState === 'complete') {
574 |         setTimeout(initSB, 500);
575 |     } else {
576 |         window.addEventListener('load', () => setTimeout(initSB, 500), { once: true });
577 |     }
578 | }


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | All notable changes to this project will be documented in this file.
  4 | 
  5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
  6 | 
  7 | ## [0.6.5] - 2025/12/23
  8 | 
  9 | ## Note
 10 | 
 11 | Starting with this build, there are two versions available:
 12 | 
 13 | **webOS 22+ (Optimized)**
 14 | + Runs native ES6+ code with no transpilation (translated code) for maximum performance
 15 | + Removes 130kb+ of polyfills and compatibility layers from the compiled script: ~100kb vs. ~230kb
 16 | + Requires webOS 22 or newer
 17 | 
 18 | **Legacy (All Devices)**
 19 | + ES5-transpiled code with polyfills for compatibility
 20 | + Works on webOS 3.0 and newer
 21 | + Same functionality as all previous releases
 22 | + ~230kb file size to stay under 250kb performance target
 23 | 
 24 | ## Code Optimizations
 25 | 
 26 | ### SponsorBlock
 27 | 
 28 | Performance: Implemented additional AbortController logic to fix race conditions where segments from previous videos could persist during rapid navigation
 29 | Optimization: Added debouncing to initialization and cached muted segment value to reduce CPU usage during playback
 30 | 
 31 | ### Return YouTube Dislike
 32 | 
 33 | Modern code improvements: Abort controller and intersection observer functions available on webOS 22 +
 34 | +  Instead of adding polyfills to support webOS 3, kept it simple and just added fallback functionality to keep the bundle light and efficient
 35 | 
 36 | Switched mutation observer from document.body to zylon-provider-3 to reduce an optimize CPU usage
 37 | 
 38 | Fixed pop in of dislike value when opening description panel
 39 | +  Implemented css builder for building/deploying description panel - more efficient and instantaneous when opening
 40 | 
 41 | Fixed panelContentObserver memory leak
 42 | Fixed race condition on cleanup
 43 | Fixed redundant panel queries
 44 | Fixed style pollution across instances
 45 | 
 46 | ### Force Max Quality
 47 | 
 48 | Switched from html body MutationObserver to polling (60-80% CPU reduction)
 49 | Fixes: memory leaks, race conditions, deduplications
 50 | All resources properly cleaned up
 51 | Code reduction
 52 | 
 53 | ### ui.js
 54 | 
 55 | Removed keypress and keyup eventListeners - fixes duplicate actions and unnecessary listeners
 56 | Optimized notification function - cached container reference, eliminating DOM queries after first call
 57 | Fixed redundant preventDefault calls - Cleaner logic, only prevents when needed
 58 | Fixed highlight jump race condition - Prevents default early, better error handling
 59 | Updated OLED mode - Uses cached notification container
 60 | 
 61 | ## Fixes
 62 | 
 63 | Fix to Subtitles toggle / comments toggle
 64 | +  Fixed webOS 3 missing polyfill for toggle comments
 65 | +  Depending on webOS you might need to toggle the YouTube player UI once for subtitles/comments to work
 66 | 
 67 | Fixed outro segments on webOS 5 and 6 potentially setting video playback to a time longer than the video length, causing the video to loop - https://github.com/NicholasBly/youtube-webos/issues/26
 68 | + For webOS 5, the last segment skip within 0.5s of video duration will temporarily mute the video to not cause an audio blip
 69 | 
 70 | Fixed config UI sometimes losing focus if YouTube is loading something in the background
 71 | 
 72 | Fixed config UI fighting for focus if opened on top of a playing video with the progress bar visible, causing inability to scroll options temporarily
 73 | 
 74 | Fixed notifications duplicating on key presses
 75 | 
 76 | ## Removed
 77 | 
 78 | Removed debug menu for main release
 79 | 
 80 | Removed notifications for shortcut toggling comments in video
 81 | 
 82 | ## [0.6.4] - 2025/12/17
 83 | 
 84 | ## Added
 85 | 
 86 | ### Debug Menu
 87 | - Triggered by pressing the 0 key 5 times in a row while config UI menu is open
 88 | -- Added "qrious" dependency to generate QR codes
 89 | 
 90 | #### Features:
 91 | - Generate QR code of last 50 lines of console logs
 92 | -- Must enable checkbox "Enable console log collection" before console log data can be captured for collection
 93 | 
 94 | - Generate QR code of localStorage saved configuration
 95 | 
 96 | ## Performance Optimizations
 97 | 
 98 | ### AdBlock.js
 99 | 
100 | Note: Should result in noticeably faster load times between page switching and video loading
101 | 
102 | Cached config values for AdBlock, remove shorts, hide guest prompts
103 | -- 40-50% reduction in config read during JSON parsing
104 | 
105 | Early Exit Optimizations
106 | -- reduce CPU usage and skip JSON filtering when unnecessary
107 | 
108 | Cap maximum depth limit to findFirstObject
109 | -- Safety feature to prevent stack overflow
110 | 
111 | Updated var -> const/let for modern syntax
112 | 
113 | Previously implemented destroyAdblock() function is now called whenever AdBlock checkbox is disabled
114 | -- This will also disable "Remove Shorts From Subscriptions" and "Hide Guest Prompts" as these rely on the AdBlock JSON filtering engine (same behavior, but more transparent now)
115 | 
116 | ## Visual Changes
117 | 
118 | Added sections to main config UI page
119 | 
120 | Cosmetic Filtering -> Ad Blocking, Remove Shorts From Subscriptions, Guest Mode: Hide Sign-in Buttons (if applicable)
121 | Video Player -> Force Max Quality, Hide Endcards, Return YouTube Dislike
122 | Interface -> Auto Login, Upgrade Thumbnail Quality, Hide YouTube Logo, OLED-Care Mode, Disable Notifications
123 | 
124 | ## Fixes
125 | 
126 | Fixed Return YouTube Dislike not displaying description panel correctly when language was not English
127 | 
128 | Reverted dependency update to fix performance degradation for some users (from 0.6.4 build 2)
129 | 
130 | ## [0.6.3] - 2025/12/16
131 | 
132 | ## Performance Optimizations
133 | 
134 | ### SponsorBlock
135 | 
136 | Observe ytlr-app instead of the entire document.body for DOM changes, providing a significant performance and efficiency uplift
137 | 
138 | ## Bug Fixes
139 | 
140 | ### AdBlock.js
141 | 
142 | Fix Block Shorts in Subscriptions - small typo from 0.6.2 update
143 | 
144 | ## Updates
145 | 
146 | Bump Dependencies
147 | 
148 | ## [0.6.2] - 2025/12/15
149 | 
150 | ### Note
151 | 
152 | Thank you for supporting my YouTube webOS extension. To those providing bug reports, feature requests, and feedback, I greatly appreciate it!
153 | 
154 | New builds will be more thoroughly tested than before thanks to your feedback. If you'd like to test the latest updated builds before release, check the test branch. I will be uploading new builds there frequently. So far this 0.6.2 build has produced 8 test builds published there. 
155 | 
156 | ## Added
157 | 
158 | Added third page to config UI - "Shortcuts"
159 | - Allows programming custom shortcuts to the 0-9 keys on the LG remote during video playback
160 | 
161 | Options:
162 | -- Play/Pause Toggle
163 | -- Skip Forward 15 seconds
164 | -- Skip Backward 15 seconds
165 | -- Toggle Closed Captions/Subtitles
166 | -- Toggle Comments Menu
167 | -- Skip to start of next chapter
168 | -- Skip to start of previous chapter
169 | 
170 | Added "Disable Notifications"
171 | 
172 | ## Performance Optimizations
173 | 
174 | config.js: Added configRemoveChangeListener API
175 | - Previously there was no way to stop listening to setting changes, causing memory leaks when components were destroyed
176 | 
177 | ### AdBlock
178 | 
179 | Refactored to support safe initialization and destruction
180 | 
181 | Added protection against "double-hooking" JSON.parse (preventing stack overflows on script reloads)
182 | 
183 | Implemented a smarter JSON parsing system:
184 | - Instead of intercepting and processing every single JSON, it will only parse JSON when necessary
185 | 
186 | - Player Ads: Only search for playerAds if playerResponse or videoDetails exists
187 | - Home/Guest Prompts: Only search for tvBrowseRenderer or sectionListRenderer
188 | - Shorts: Only search gridRenderer if we are in a browse response and only when the Subscriptions tab is loaded
189 | 
190 | Removed "Remove Shorts From Subscriptions" toggle if the user is in guest mode. This disables useless JSON parsing to improve performance
191 | 
192 | ### SponsorBlock
193 | 
194 | Fixed multiple memory leaks in the SponsorBlockHandler
195 | - Now correctly tracks and removes configuration change listeners in destroy()
196 | - Cleaned up injected CSS styles (<style id="sb-css">) when the instance is destroyed
197 | - Centralized listener management to ensure no old event handlers remain active after video navigation
198 | 
199 | - Cache highlight timestamp for faster playback
200 | - Prioritize video playback on segment skip for faster segment skipping
201 | - Optimization: sort segment data immediately on video load
202 | - Optimization: observePlayerUI() now only observes the video container instead of the entire html body
203 | - Optimization: Track and auto cleanup all pending animation frame requests and cancel them when destroy() is called.
204 | - Fixed display of segment overlays on videos with chapters (previously did not align properly when segment bar changed sizes)
205 | 
206 | ## General Fixes
207 | 
208 | Fixed Chapter Skip when YouTube player UI was not loaded
209 | -- The YouTube player UI (progress bar) must be opened at least once in order to get data on chapters for the chapter skip feature to work
210 | -- The fix will automatically detect when the chapter bar is present but the chapter data is missing
211 | -- It will then toggle on the player UI quickly to grab that data and skip properly. This only occurs once per video load
212 | 
213 | Fixed config UI spacing on older webOS versions
214 | 
215 | ## [0.6.1] - 2025/12/08
216 | 
217 | ## Added
218 | 
219 | ### SponsorBlock
220 | 
221 | Added a segment list overlay on the right side of the screen when viewing SponsorBlock settings during video playback.
222 | 
223 | <img width="1280" height="720" alt="webOS_TV_23_Simulator_fiQJN1gMbf" src="https://github.com/user-attachments/assets/021722c6-11c7-4d3a-8e5a-d282b0a2a114" />
224 | 
225 | ### Video Playback
226 | 
227 | Added "Chapter Skip" 
228 | 
229 | - Press the 5 key on LG remote during video playback to automatically skip to the start of the next chapter. Only available on videos with chapters.
230 | 
231 | Note: Since the 0-9 keys aren't utilized for anything during video playback, let me know what other features you'd like added as quick shortcuts.
232 | 
233 | ### Guest Mode
234 | 
235 | Hide giant "Make YouTube your own" banner that appears on the home page
236 | 
237 | ## Fixes
238 | 
239 | Search History Fix: Added 500ms wait for YouTube to naturally populate the search history before trying to inject results, fixing UI overlap in some cases
240 | 
241 | ## Changes
242 | 
243 | Code cleanup of unused functions
244 | 
245 | Removed userscript map file to decrease .ipk file size (~100kb from ~420kb)
246 | 
247 | ## [0.6.0] - 2025/12/05
248 | 
249 | ### Added
250 | 
251 | Homebrew channel support (beta)
252 | Add the following URL to the repo list: https://raw.githubusercontent.com/NicholasBly/youtube-webos/main/repo.json
253 | 
254 | ### Fixes
255 | 
256 | - Fixed "Remove Shorts From Subscriptions" https://github.com/NicholasBly/youtube-webos/issues/14
257 | - Fixed SponsorBlock initialization compatibility issue with older webOS versions - https://github.com/NicholasBly/youtube-webos/issues/15
258 | 
259 | ## [0.5.9] - 2025/12/05
260 | 
261 | ### Config UI panel
262 | 
263 | Note: When adding new features the config panel ran out of space. So I decided to make a two page UI to have the main settings first and then the SponsorBlock settings second. Press left/right on your LG remote to switch pages.
264 | 
265 | - Fixed non-music segments not showing a color picker option
266 | - Fixed old janky navigation behavior with left/right arrow buttons
267 | 
268 | ### SponsorBlock
269 | 
270 | - Added Filler Tangents/Jokes segment type (default: disabled)
271 | - Added Hook/Greetings segment type (default: disabled)
272 | - Added mute segment type (default: disabled)
273 | 
274 | Bump (update) dependencies
275 | 
276 | ## [0.5.8] - 2025/12/02
277 | 
278 | ### Performance Enhancements
279 | 
280 | SponsorBlock: Implemented category config caching to eliminate expensive storage reads during video playback (approx. 90% CPU reduction in time-check loop).
281 | 
282 | SponsorBlock: Throttled UI mutation observer to reduce idle CPU usage when player controls are visible.
283 | 
284 | AdBlock: Added fail-safe error handling to JSON.parse hook to prevent application crashes on unexpected data structures.
285 | 
286 | Core: Added safety timeouts to waitForChildAdd utility to prevent memory leaks from zombie observers.
287 | 
288 | YT-Fixes: Optimized sign-in prompt detection to reduce DOM scanning frequency.
289 | 
290 | General: Added AbortController support to network requests to prevent hanging threads on slow connections.
291 | 
292 | ### Changes
293 | 
294 | Removed "Enable" word in green UI panel labels as the checkbox is self explanatory
295 | 
296 | Capitalized checkbox labels for main settings
297 | 
298 | ## [0.5.7] - 2025/11/28
299 | 
300 | ### Added
301 | 
302 | Added "Force Max Quality" option to green button UI
303 | 
304 | ## [0.5.6] - 2025/11/28
305 | 
306 | ### Green Button UI
307 | 
308 | Moved panel offset to the left to better view other page elements
309 | 
310 | ### Added
311 | 
312 | Added a restore recent search history feature to yt-fixes.js
313 | 
314 | -- Sometimes, the recent search history can be blank
315 | 
316 | -- Fix detects when the search history is empty, and looks for the recent search data in local storage and injects it back in
317 | 
318 | -- Fix only runs once on startup the first time you visit the search page, and caches it for the rest of the session
319 | 
320 | -- Might not work if the actual local storage key was deleted / doesn't exist (I don't know why that can happen but it does, another YouTube bug)
321 | 
322 | ### Bug Fixes
323 | 
324 | Fixed SponsorBlock segments not appearing on ytlr-multi-markers-player-bar-renderer on the old UI (was only looking for [idomkey="slider"] (new UI selector) instead of [idomkey="progress-bar"]) (old UI selector)
325 | 
326 | Jump to highlight now works at any point in the video
327 | 
328 | ## Return YouTube Dislike
329 | 
330 | ### Performance & Efficiency
331 | 
332 | Debounced Observers: Switched from checking every single added node to a throttled approach that waits for DOM activity to settle, significantly reducing CPU load.
333 | 
334 | Batch Styling: Replaced individual style property updates with batch CSS application to reduce browser reflows and layout thrashing.
335 | 
336 | Optimized Loops: Replaced slower iterators with standard loops for faster execution on embedded processors.
337 | 
338 | ### Stability & Fixes
339 | 
340 | Race Condition Prevention: Added active state checks to asynchronous callbacks, preventing errors if the user navigates away while data is loading.
341 | 
342 | Robust Navigation: Replaced fragile manual string parsing with the standard URL API to reliably handle hash changes and parameters.
343 | 
344 | Memory Safety: Improved cleanup logic to ensure observers and timers are strictly destroyed to prevent memory leaks.
345 | 
346 | ### Code Quality
347 | 
348 | Centralized Selectors: Moved hardcoded class names into a single configuration object for easier maintenance and updates.
349 | 
350 | Memory Optimization: Implemented method binding in the constructor to reuse function references rather than creating new instances on every execution.
351 | 
352 | ## adblock.js
353 | 
354 | ### Performance & Efficiency
355 | 
356 | Unified JSON Interceptor: Merged shorts.js logic into adblock.js to eliminate double-wrapping of JSON.parse, reducing interception overhead by 50%.
357 | 
358 | Removed Recursive Scanning: Replaced the expensive O(N) recursive search (findFirstObject) with O(1) direct path lookups for Shorts removal.
359 | 
360 | Fail-Fast Logic: Implemented early exit checks to skip processing on non-relevant API responses, significantly reducing CPU usage on the main thread.
361 | 
362 | Memory Efficiency: Switched to in-place array mutation for filtering content, reducing garbage collection pressure and memory spikes.
363 | 
364 | ## [0.5.5] - 2025/11/26
365 | 
366 | ### Removed
367 | 
368 | - Removed webOS version from green button UI header except for webOS 25
369 | -- Since webOS version ≠ YouTube UI, we only need to detect webOS 25 to apply the chromecast fix. Everything else will be detected via queryselectors to determine which YouTube UI is running.
370 | 
371 | ### Added
372 | 
373 | - Updated webOS detection via firmware version
374 | -- If webOS 25 is detected, the chromecast fix is applied to fix the freezing issue
375 | 
376 | ### Fixes
377 | 
378 | - Unchecking/checking a SponsorBlock segment from the green button UI while watching a video will update the skipping status accordingly
379 | 
380 | ### Performance
381 | 
382 | - Cached several more elements:
383 | 
384 | 1. UI layout detection
385 | 2. simulator only: chrome version detection
386 | 3. config mapping for sponsorblock segments
387 | 
388 | ## [0.5.4] - 2025/11/24
389 | 
390 | SponsorBlock Rewrite | SponsorBlock received a much needed overhaul!
391 | 
392 | ### Summary
393 | 1. 99% reduction in CPU usage: setInterval polls 4-10 times a second, MutationObserver only fires when there is an update event.
394 | 2. ~80% more efficient: segments were drawn one by one, forcing a layout recalculation for every single segment. Now, DocumentFragment batches everything into 1 single layout calculation.
395 | 3. Removed layout thrashing: The old code read properties like .offsetWidth or .contains inside loops, forcing the browser to pause and calculate styles synchronously. The new code uses requestAnimationFrame, allowing the browser to check these values only when it is ready to paint the next frame.
396 | 
397 | ### Massive Performance Overhaul
398 | 1. Removed Polling Loops: Replaced setInterval checks with MutationObserver
399 | 2. Frame-Perfect Updates: All DOM checks are now throttled using requestAnimationFrame to prevent dropping frames during UI updates
400 | -- This draws segments the instant the progress bar is visible, eliminating slight delays
401 | 3. Batch Rendering: Segments are now built in memory using DocumentFragment and appended in a single operation, rather than injecting elements one by one
402 | 4. Memory Management: Implemented a better destroy() method that cleanly disconnects all observers and event listeners to prevent memory leaks
403 | 
404 | ### Fixes
405 | 
406 | - Readded css rules for SponsorBlock on older webOS versions that aren't using the new UI yet (should make compatibility the same as 0.5.2 and before)
407 | - Fixed Guest Mode button not being hidden on new UI
408 | 
409 | ### Other Improvements
410 | 
411 | - Cached some new elements from 0.5.0+ for better performance
412 | - New SponsorBlock rewrite reduces file size of userScript.js from 213kb to 194kb
413 | 
414 | ## [0.5.3] - 2025/11/22
415 | 
416 | ### Notes
417 | YouTube has started rolling out a new UI on most webOS versions.
418 | From my testing, all webOS versions from 6 through 25 are all being served the new UI.
419 | If you're still on the old UI and have no bugs, please feel free to stay on 0.5.2 - I cannot test the old UIs anymore
420 | 
421 | ### YouTube's New UI Fixes
422 | - Fixed Return YouTube Dislike UI on description page (YouTube's new UI is broken, so if they fix it, expect it to break again :/)
423 | --No longer rely on specifically webOS version, apply if the new UI is detected
424 | - Implemented new SponsorBlock rules to detect YouTube UI instead of relying on webOS version only
425 | - Fixed SponsorBlock segments not appearing on progress bar if the loaded video lacks a multi-markers-player-bar-renderer
426 | 
427 | ### Added
428 | - Enhanced webOS version detection
429 | 
430 | ### Other Fixes
431 | - Fixed casting from android/iOS
432 | 
433 | ### Other / File Size Reductions
434 | - Added cssnano to remove comments from userScript.js build
435 | - Disable source maps for production
436 | - Bump dependencies
437 | - Implement some older bug fixes from webosbrew
438 | 
439 | ### Known Issues / Fixed in next version
440 | Guest Mode button not being hidden
441 | SponsorBlock segments appear slightly off-center when progress bar is not focused
442 | 
443 | ## [0.5.2] - 2025/11/17
444 | 
445 | ## Features & Improvements
446 | 
447 | Guest Mode: hide sign-in button
448 | -- When in guest mode, a new option appears in the UI panel to hide the "sign in to subscribe" button underneath videos.
449 | -- yt-fixes.js added for applying this tweak
450 | 
451 | UI panel visual enhancements
452 | -- Added webOS version to header
453 | -- Increased font size, reduced spacing
454 | 
455 | Attempt to fix Android casting issue
456 | 
457 | ## [0.5.1] - 2025/11/12
458 | 
459 | ## Features & Improvements
460 | 
461 | ### Return YouTube Dislike
462 | * **Native UI Integration:** Moved the dislike count from button tooltips to the main video description panel. It now appears natively alongside Likes and Views.
463 | * **Dynamic Layout Engine:** Implemented a smart layout shifter that automatically adjusts content spacing to prevent button overlaps, regardless of the video description length.
464 | * **Multi-Version Support:** Added specific CSS selectors and spacing rules to ensure perfect rendering across **webOS 23, 24, and 25**.
465 | * **Visual Tweaks:** Fixed the alignment of the "Date" element to ensure it centers correctly on its own line when the Dislike count is present.
466 | 
467 | ### SponsorBlock
468 | * **webOS 25 Support:** Optimized segment rendering for the newer OS.
469 | * **Dynamic Visibility:** Segments now correctly disappear when the player progress bar is hidden.
470 | * **Focus Scaling:** Segments now correctly resize and fit the progress bar during focus/unfocus states.
471 | 
472 | ### Core / Internal
473 | * **webOS 25 Support:** Added general compatibility for webOS 25.
474 | * **Version Detection:** Added `webos-utils.js` to accurately map User Agent Chrome versions to webOS versions (based on [LGE Specifications](https://webostv.developer.lge.com/develop/specifications/web-api-and-web-engine)). This ensures visuals and features load with the correct version-specific rules.
475 | * **Major Version Improvements:** Sponsorblock and Return YouTube Dislike now have individual rules for each webOS version for better functionality.
476 | 
477 | ## [0.5.0] - 2025/11/11
478 | 
479 | ### Added
480 | 
481 | - Red Button: Toggle OLED black screen
482 | - yt-fixes.css - add transparency to black box underneath video player (60%)
483 | - Bump dependencies
484 | 
485 | ### Removed
486 | 
487 | - Red Button: 2x speed playback (wasn't working for most, might come back)
488 | 
489 | ## [0.4.9] - 2025/11/03
490 | 
491 | ### Added
492 | 
493 | - Return YouTube Dislike + UI Toggle
494 |   - ++ Hover over the Like/Dislike button on a video to see each value
495 | - Added pure black UI containers (pull request from tomikaka22)
496 | 
497 | ### Fixed
498 | 
499 | - Fixed black screen when viewing controls / skipping forward or backward
500 | - Fixed sponsored segments not showing on progress bar
501 | - Fixed sponsored segments attaching to the wrong object initially / flickering
502 | - Setup mutation observer to keep segments perfectly attached without delay
503 | 
504 | ### Removed
505 | 
506 | - Removed auto login button press, mutationobserver, and handling app resume (no longer needed)
507 | 
508 | ## [0.4.8] - 2025/07/24
509 | 
510 | ### Changed
511 | 
512 | - Auto Login: Will now detect when the app is resumed from the background/sleep state and bypass the nag screen.
513 | - Auto Login: Opening this app with Auto Login enabled will modify local storage time values to prevent the nag screen from appearing for 7 days. Will stack every time you open the app. Credit to reisxd for this solution on Tizen OS https://github.com/reisxd/TizenTube/
514 | 
515 | ## [0.4.7] - 2025/07/23
516 | 
517 | ### Fixed
518 | 
519 | - Auto Login: Fixed compatibility issue with webOS 23
520 | 
521 | ### Added
522 | 
523 | - Auto Login: Added MutationObserver to look for body class changes for identifying the nag screen to bypass instead of only looking at the first 15 seconds of YouTube app load
524 | - Auto Login: Added secondary check for nag screen if it was not bypassed by key code 13 as some webOS versions / remotes have a different key code
525 | 
526 | ## [0.4.6] - 2025/07/11
527 | 
528 | ### Changed
529 | 
530 | SponsorBlock Optimizations:
531 | - Network - API fallback added, timeout handling
532 | - Memory - centralized management system to prevent memory leaks
533 | - Performance - caching for DOM elements
534 | - Efficiency - reduced repeated queries
535 | - Error handling/logging improvements
536 | - Resource Cleanup
537 | 
538 | ### Added
539 | 
540 | - Red button on LG remote now changes playback speed between 1x and 2x
541 | 
542 | ## [0.4.5] - 2025/07/09
543 | 
544 | ### Fixed
545 | 
546 | - AdBlock bug causing empty search suggestions (present in webosbrew version)
547 | 
548 | ### Changed
549 | 
550 | - Slight UI change
551 | 
552 | ## [0.4.4] - 2025/07/07
553 | 
554 | ### Added
555 | 
556 | - "Hide end cards" toggle
557 | - Auto login now actively and efficiently looks for the login screen instead of only at startup. Only watches for class attribute changes on the body element.
558 | 
559 | ### Fixed
560 | 
561 | - UI element order
562 | 
563 | ### Changed
564 | 
565 | - Update dependencies
566 | 
567 | ## [0.4.3] - 2025/07/04
568 | 
569 | ### Added
570 | 
571 | - "Auto Login", enabled by default. Whenever YouTube triggers the login screen, Auto Login will automatically log you in to bypass it
572 | - UI optimizations
573 | 
574 | ## [0.4.1] - 2025/06/09
575 | 
576 | ### Added
577 | 
578 | - OLED-care mode (changes UI elements of options panel to black and gray)
579 | - Manual color selection of SponsorBlock segments
580 | 
581 | ### Fixed
582 | 
583 | - Manual segment selection and crashing issue
584 | 
585 | ## [0.4.0] - 2025/06/09
586 | 
587 | ### Added
588 | 
589 | - Redesigned menu UI
590 | - "Show highlight segments"
591 | - Highlight segment is now shown on the progress bar
592 | - "Jump to highlight with blue button"
593 | 
594 | ### Fixed
595 | 
596 | - Colored button mappings for blue and red buttons
597 | 
598 | ## [0.3.9] - 2025/06/09
599 | 
600 | ### Added
601 | 
602 | - Changed App Icon to mimic official YouTube App
603 | 
604 | ### Fixed
605 | 
606 | - Sponsored segments not showing on preview bar
607 | 
608 | ## [0.3.8] - 2025/05/10
609 | 
610 | ### Fixed
611 | 
612 | - [#290](https://github.com/webosbrew/youtube-webos/pull/290): Fix "Remove Shorts from subscriptions" feature for new page format (@JaCzekanski)
613 | 
614 | ## [0.3.7] - 2025/04/05
615 | 
616 | ### Added
617 | 
618 | - [#273](https://github.com/webosbrew/youtube-webos/pull/273): Integrate recap/preview skipping for SponsorBlock (@LeviSnoot)
619 | 
620 | ### Fixed
621 | 
622 | - [#278](https://github.com/webosbrew/youtube-webos/pull/278): Fix default shadow class name (@gartnera)
623 | - [#280](https://github.com/webosbrew/youtube-webos/pull/280): Fix CSS patches for new YT class naming (@fire332)
624 | 
625 | ## [0.3.6] - 2025/01/05
626 | 
627 | ### Fixed
628 | 
629 | - [#235](https://github.com/webosbrew/youtube-webos/pull/235): Fix shorts (@fire332)
630 | 
631 | ## [0.3.5] - 2024/12/27
632 | 
633 | ### Added
634 | 
635 | - [#201](https://github.com/webosbrew/youtube-webos/pull/201): Blocked shorts in subscriptions tab (@JaCzekanski)
636 | - [#236](https://github.com/webosbrew/youtube-webos/pull/236): Add option to upgrade thumbnail quality (@fire332)
637 | 
638 | ### Fixed
639 | 
640 | - [#104](https://github.com/webosbrew/youtube-webos/pull/104): Disabled SponsorBlock on previews (@alyyousuf7)
641 | - [#204](https://github.com/webosbrew/youtube-webos/pull/204): Fixed transparency under UI (@atomjack; thanks to @reisxd)
642 | - [#239](https://github.com/webosbrew/youtube-webos/pull/239): Fix missing math font (@fire332)
643 | - [#240](https://github.com/webosbrew/youtube-webos/pull/240): Fix missing voice search (@fire332)
644 | - [#242](https://github.com/webosbrew/youtube-webos/pull/242): Fix checkbox click in the YTAF config UI (@fire332)
645 | 
646 | ### Changed
647 | 
648 | - [#179](https://github.com/webosbrew/youtube-webos/pull/179), [#183](https://github.com/webosbrew/youtube-webos/pull/183): Updated CLI instructions (@throwaway96, @ShalokShalom)
649 | - [#206](https://github.com/webosbrew/youtube-webos/pull/206): Added old WebKit to targeted browsers (@throwaway96)
650 | - [#208](https://github.com/webosbrew/youtube-webos/pull/208): Changed description of enableSponsorBlockMusicOfftopic setting (@throwaway96)
651 | - [#234](https://github.com/webosbrew/youtube-webos/pull/234): Update dependencies (@fire332)
652 | - [#238](https://github.com/webosbrew/youtube-webos/pull/238): Misc dev changes (@fire332)
653 | 
654 | ## [0.3.4] - 2024/04/23
655 | 
656 | ### Added
657 | 
658 | - [#164](https://github.com/webosbrew/youtube-webos/pull/164): Added an issue template for bugs (@throwaway96)
659 | 
660 | ### Changed
661 | 
662 | - [#146](https://github.com/webosbrew/youtube-webos/pull/146): Updated a bunch of dev stuff (@fire332)
663 | - [#150](https://github.com/webosbrew/youtube-webos/pull/150): Added myself to FUNDING.yml (@throwaway96)
664 | 
665 | ## [0.3.3] - 2024/03/31
666 | 
667 | ### Added
668 | 
669 | - [#142](https://github.com/webosbrew/youtube-webos/pull/141): Blocked some additional ads (@throwaway96)
670 | - [#144](https://github.com/webosbrew/youtube-webos/pull/144): Added support for config change listeners (@throwaway96)
671 | - [#149](https://github.com/webosbrew/youtube-webos/pull/149): Added ability to hide YouTube logo (@throwaway96; thanks to @fire332 and @tomikaka22)
672 | 
673 | ### Fixed
674 | 
675 | - [#103](https://github.com/webosbrew/youtube-webos/pull/103): Fixed SponsorBlock on videos with chapters (@alyyousuf7)
676 | - [#131](https://github.com/webosbrew/youtube-webos/pull/131): Fixed minor README issue (@ANewDawn)
677 | - [#141](https://github.com/webosbrew/youtube-webos/pull/141): Fixed black background behind video menu (@throwaway96; thanks to @reisxd)
678 | - [#143](https://github.com/webosbrew/youtube-webos/pull/143): Fixed duplicate click bug (@throwaway96)
679 | 
680 | ### Changed
681 | 
682 | - [#128](https://github.com/webosbrew/youtube-webos/pull/128): Updated workflows and dependencies (@throwaway96)
683 | - [#133](https://github.com/webosbrew/youtube-webos/pull/133): Changed various dev stuff (@throwaway96)
684 | - [#134](https://github.com/webosbrew/youtube-webos/pull/134): Refactored config/UI code (@throwaway96)
685 | - [#138](https://github.com/webosbrew/youtube-webos/pull/138): Changed webpack to production mode by default (@throwaway96)
686 | - [#145](https://github.com/webosbrew/youtube-webos/pull/145): Made observing attributes optional in waitForChildAdd() (@throwaway96)
687 | 
688 | ## [0.3.2] - 2024/03/07
689 | 
690 | ### Added
691 | 
692 | - [#100](https://github.com/webosbrew/youtube-webos/pull/100): Blocked "Sponsored" tiles (@alyyousuf7)
693 | 
694 | ### Fixed
695 | 
696 | - [#95](https://github.com/webosbrew/youtube-webos/pull/95): Fixed the appearance of YouTube in the app (@0xBADEAFFE)
697 | - [#96](https://github.com/webosbrew/youtube-webos/pull/96): Fixed launch functionality broken by #95 (@fire332)
698 | - [#102](https://github.com/webosbrew/youtube-webos/pull/102): Fixed minor dev-related stuff (@alyyousuf7)
699 | - [#106](https://github.com/webosbrew/youtube-webos/pull/106), [#120](https://github.com/webosbrew/youtube-webos/pull/120): Updated outdated documentation (@throwaway96)
700 | 
701 | ## [0.3.1] - 2022/01/27
702 | 
703 | ### Fixed
704 | 
705 | - [#24](https://github.com/webosbrew/youtube-webos/pull/24): Fixed playback time
706 |   tracking again
707 | 
708 | ## [0.3.0] - 2022/01/15
709 | 
710 | ### Fixed
711 | 
712 | - [#14](https://github.com/webosbrew/youtube-webos/pull/14): Fixed voice search
713 |   on certain TV models
714 | - [#21](https://github.com/webosbrew/youtube-webos/pull/21): Fixed screensaver
715 |   kicking in during non-16:9 videos playback
716 | 
717 | ### Changed
718 | 
719 | - [#19](https://github.com/webosbrew/youtube-webos/pull/19): Updated internal
720 |   dependencies, cleaned up build setup
721 | 
722 | ## [0.2.1] - 2021/12/26
723 | 
724 | ## Fixed
725 | 
726 | - Fixed rendering on 720p TVs
727 | - Disabled update prompt on startup
728 | 
729 | ## [0.2.0] - 2021/12/23
730 | 
731 | ### Added
732 | 
733 | - Added support for autostart (requires manual setup, see
734 |   [README](README.md#autostart))
735 | 
736 | ### Fixed
737 | 
738 | - Fixed deeplinking from voice search results
739 | - Fixed in-app voice search button on webOS 5.x
740 | - Fixed screensaver kicking in on sponsor segment skips
741 | - Fixed playback time tracking
742 | 
743 | ## [0.1.1] - 2021/11/21
744 | 
745 | ### Fixed
746 | 
747 | - Use alternative SponsorBlock API URL to work around untrusted Let's Encrypt
748 |   certificates
749 | - Increase initial notification delay
750 | 
751 | ## [0.1.0] - 2021/11/14
752 | 
753 | ### Added
754 | 
755 | - [#10](https://github.com/FriedChickenButt/youtube-webos/issues/1): Added SponsorBlock integration
756 | - Added configuration UI activated by pressing green button
757 | 
758 | ## [0.0.2]
759 | 
760 | ### Added
761 | 
762 | - [#2](https://github.com/FriedChickenButt/youtube-webos/issues/2): Added DIAL startup support.
763 | - [#3](https://github.com/FriedChickenButt/youtube-webos/issues/3): Added webOS 3.x support.
764 | - Enabled quick start.
765 | - Disabled default splash screen
766 | 
767 | ### Fixed
768 | 
769 | - Disabled back button behaviour to open the Home deck.
770 | 
771 | ## [0.0.1]
772 | 
773 | ### Added
774 | 
775 | - Created basic web app which launches YouTube TV.
776 | 
777 | [Unreleased]: https://github.com/webosbrew/youtube-webos/compare/v0.3.1...HEAD
778 | [0.3.1]: https://github.com/webosbrew/youtube-webos/compare/v0.3.0...v0.3.1
779 | [0.3.0]: https://github.com/webosbrew/youtube-webos/compare/v0.2.1...v0.3.0
780 | [0.2.1]: https://github.com/webosbrew/youtube-webos/compare/v0.2.0...v0.2.1
781 | [0.2.0]: https://github.com/webosbrew/youtube-webos/compare/v0.1.1...v0.2.0
782 | [0.1.1]: https://github.com/webosbrew/youtube-webos/compare/v0.1.0...v0.1.1
783 | [0.1.0]: https://github.com/webosbrew/youtube-webos/compare/0.0.2...v0.1.0
784 | [0.0.2]: https://github.com/webosbrew/youtube-webos/compare/0.0.1...0.0.2
785 | [0.0.1]: https://github.com/webosbrew/youtube-webos/releases/tag/0.0.1
786 | 


--------------------------------------------------------------------------------