Compare commits
12
Commits
0.1.0
..
87f5cbc75c
| Author | SHA1 | Date | |
|---|---|---|---|
 Hare
|
87f5cbc75c | ||
|
Hare
|
4c19c6491c | ||
|
Hare
|
4fbf98897c | ||
|
Hare
|
b38b39dab3 | ||
|
Hare
|
177a98d312 | ||
|
Hare
|
1289f1a374 | ||
|
Hare
|
4f401356cd | ||
|
Hare
|
668574341e | ||
|
Hare
|
9c4ea9dd4d | ||
|
Hare
|
38dbd504d6 | ||
|
Hare
|
b23de0741a | ||
|
Hare
|
65e2f28f8e |
@@ -30,8 +30,16 @@ async function build(browser) {
|
||||
outfile: `${outdir}/injected/page-script.js`,
|
||||
format: "iife",
|
||||
}),
|
||||
esbuild.build({
|
||||
...common,
|
||||
entryPoints: ["src/options/options.ts"],
|
||||
outfile: `${outdir}/options/options.js`,
|
||||
format: "iife",
|
||||
}),
|
||||
]);
|
||||
|
||||
cpSync("src/options/options.html", `${outdir}/options/options.html`);
|
||||
|
||||
cpSync(`manifest.${browser}.json`, `${outdir}/manifest.json`);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "YT Playlist Features",
|
||||
"version": "0.1.0",
|
||||
"version": "0.2.0",
|
||||
"description": "Extract and work with YouTube playlist data",
|
||||
"permissions": [],
|
||||
"permissions": ["storage"],
|
||||
"background": {
|
||||
"service_worker": "background/service-worker.js"
|
||||
},
|
||||
@@ -14,6 +14,13 @@
|
||||
"run_at": "document_idle"
|
||||
}
|
||||
],
|
||||
"action": {
|
||||
"default_popup": "options/options.html"
|
||||
},
|
||||
"options_ui": {
|
||||
"page": "options/options.html",
|
||||
"open_in_tab": false
|
||||
},
|
||||
"web_accessible_resources": [
|
||||
{
|
||||
"resources": ["injected/page-script.js"],
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "YT Playlist Features",
|
||||
"version": "0.1.0",
|
||||
"version": "0.2.0",
|
||||
"description": "Extract and work with YouTube playlist data",
|
||||
"permissions": [],
|
||||
"permissions": ["storage"],
|
||||
"background": {
|
||||
"scripts": ["background/service-worker.js"]
|
||||
},
|
||||
@@ -14,6 +14,13 @@
|
||||
"run_at": "document_idle"
|
||||
}
|
||||
],
|
||||
"action": {
|
||||
"default_popup": "options/options.html"
|
||||
},
|
||||
"options_ui": {
|
||||
"page": "options/options.html",
|
||||
"open_in_tab": false
|
||||
},
|
||||
"web_accessible_resources": [
|
||||
{
|
||||
"resources": ["injected/page-script.js"],
|
||||
|
||||
Generated
+115
-115
@@ -1,25 +1,25 @@
|
||||
{
|
||||
"name": "yt-playlist-features",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "yt-playlist-features",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.1",
|
||||
"dependencies": {
|
||||
"webextension-polyfill": "^0.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webextension-polyfill": "^0.12.1",
|
||||
"esbuild": "^0.25.0",
|
||||
"typescript": "^5.7.0"
|
||||
"@types/webextension-polyfill": "^0.12.5",
|
||||
"esbuild": "^0.28.0",
|
||||
"typescript": "^6.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
|
||||
"integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
|
||||
"integrity": "sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
@@ -34,9 +34,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-arm": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
|
||||
"integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.0.tgz",
|
||||
"integrity": "sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@@ -51,9 +51,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.0.tgz",
|
||||
"integrity": "sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -68,9 +68,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.0.tgz",
|
||||
"integrity": "sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -85,9 +85,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.0.tgz",
|
||||
"integrity": "sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -102,9 +102,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.0.tgz",
|
||||
"integrity": "sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -119,9 +119,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/freebsd-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.0.tgz",
|
||||
"integrity": "sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -136,9 +136,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/freebsd-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.0.tgz",
|
||||
"integrity": "sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -153,9 +153,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-arm": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
|
||||
"integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.0.tgz",
|
||||
"integrity": "sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@@ -170,9 +170,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.0.tgz",
|
||||
"integrity": "sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -187,9 +187,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-ia32": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
|
||||
"integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.0.tgz",
|
||||
"integrity": "sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
@@ -204,9 +204,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-loong64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
|
||||
"integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.0.tgz",
|
||||
"integrity": "sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
@@ -221,9 +221,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-mips64el": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
|
||||
"integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.0.tgz",
|
||||
"integrity": "sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==",
|
||||
"cpu": [
|
||||
"mips64el"
|
||||
],
|
||||
@@ -238,9 +238,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-ppc64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
|
||||
"integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.0.tgz",
|
||||
"integrity": "sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
@@ -255,9 +255,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-riscv64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
|
||||
"integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.0.tgz",
|
||||
"integrity": "sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
@@ -272,9 +272,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-s390x": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
|
||||
"integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.0.tgz",
|
||||
"integrity": "sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
@@ -289,9 +289,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.0.tgz",
|
||||
"integrity": "sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -306,9 +306,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/netbsd-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.0.tgz",
|
||||
"integrity": "sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -323,9 +323,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/netbsd-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.0.tgz",
|
||||
"integrity": "sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -340,9 +340,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openbsd-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.0.tgz",
|
||||
"integrity": "sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -357,9 +357,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openbsd-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.0.tgz",
|
||||
"integrity": "sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -374,9 +374,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openharmony-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.0.tgz",
|
||||
"integrity": "sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -391,9 +391,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/sunos-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.0.tgz",
|
||||
"integrity": "sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -408,9 +408,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-arm64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
|
||||
"integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.0.tgz",
|
||||
"integrity": "sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -425,9 +425,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-ia32": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
|
||||
"integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.0.tgz",
|
||||
"integrity": "sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
@@ -442,9 +442,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-x64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
|
||||
"integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.0.tgz",
|
||||
"integrity": "sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -466,9 +466,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
|
||||
"integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.0.tgz",
|
||||
"integrity": "sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
@@ -479,38 +479,38 @@
|
||||
"node": ">=18"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@esbuild/aix-ppc64": "0.25.12",
|
||||
"@esbuild/android-arm": "0.25.12",
|
||||
"@esbuild/android-arm64": "0.25.12",
|
||||
"@esbuild/android-x64": "0.25.12",
|
||||
"@esbuild/darwin-arm64": "0.25.12",
|
||||
"@esbuild/darwin-x64": "0.25.12",
|
||||
"@esbuild/freebsd-arm64": "0.25.12",
|
||||
"@esbuild/freebsd-x64": "0.25.12",
|
||||
"@esbuild/linux-arm": "0.25.12",
|
||||
"@esbuild/linux-arm64": "0.25.12",
|
||||
"@esbuild/linux-ia32": "0.25.12",
|
||||
"@esbuild/linux-loong64": "0.25.12",
|
||||
"@esbuild/linux-mips64el": "0.25.12",
|
||||
"@esbuild/linux-ppc64": "0.25.12",
|
||||
"@esbuild/linux-riscv64": "0.25.12",
|
||||
"@esbuild/linux-s390x": "0.25.12",
|
||||
"@esbuild/linux-x64": "0.25.12",
|
||||
"@esbuild/netbsd-arm64": "0.25.12",
|
||||
"@esbuild/netbsd-x64": "0.25.12",
|
||||
"@esbuild/openbsd-arm64": "0.25.12",
|
||||
"@esbuild/openbsd-x64": "0.25.12",
|
||||
"@esbuild/openharmony-arm64": "0.25.12",
|
||||
"@esbuild/sunos-x64": "0.25.12",
|
||||
"@esbuild/win32-arm64": "0.25.12",
|
||||
"@esbuild/win32-ia32": "0.25.12",
|
||||
"@esbuild/win32-x64": "0.25.12"
|
||||
"@esbuild/aix-ppc64": "0.28.0",
|
||||
"@esbuild/android-arm": "0.28.0",
|
||||
"@esbuild/android-arm64": "0.28.0",
|
||||
"@esbuild/android-x64": "0.28.0",
|
||||
"@esbuild/darwin-arm64": "0.28.0",
|
||||
"@esbuild/darwin-x64": "0.28.0",
|
||||
"@esbuild/freebsd-arm64": "0.28.0",
|
||||
"@esbuild/freebsd-x64": "0.28.0",
|
||||
"@esbuild/linux-arm": "0.28.0",
|
||||
"@esbuild/linux-arm64": "0.28.0",
|
||||
"@esbuild/linux-ia32": "0.28.0",
|
||||
"@esbuild/linux-loong64": "0.28.0",
|
||||
"@esbuild/linux-mips64el": "0.28.0",
|
||||
"@esbuild/linux-ppc64": "0.28.0",
|
||||
"@esbuild/linux-riscv64": "0.28.0",
|
||||
"@esbuild/linux-s390x": "0.28.0",
|
||||
"@esbuild/linux-x64": "0.28.0",
|
||||
"@esbuild/netbsd-arm64": "0.28.0",
|
||||
"@esbuild/netbsd-x64": "0.28.0",
|
||||
"@esbuild/openbsd-arm64": "0.28.0",
|
||||
"@esbuild/openbsd-x64": "0.28.0",
|
||||
"@esbuild/openharmony-arm64": "0.28.0",
|
||||
"@esbuild/sunos-x64": "0.28.0",
|
||||
"@esbuild/win32-arm64": "0.28.0",
|
||||
"@esbuild/win32-ia32": "0.28.0",
|
||||
"@esbuild/win32-x64": "0.28.0"
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.9.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.2.tgz",
|
||||
"integrity": "sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
|
||||
+4
-4
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "yt-playlist-features",
|
||||
"version": "0.1.0",
|
||||
"version": "0.2.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@@ -9,9 +9,9 @@
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webextension-polyfill": "^0.12.1",
|
||||
"esbuild": "^0.25.0",
|
||||
"typescript": "^5.7.0"
|
||||
"@types/webextension-polyfill": "^0.12.5",
|
||||
"esbuild": "^0.28.0",
|
||||
"typescript": "^6.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"webextension-polyfill": "^0.12.0"
|
||||
|
||||
@@ -1,19 +1,118 @@
|
||||
import browser from "webextension-polyfill";
|
||||
import type { Message } from "../shared/messages";
|
||||
import type { DetailUpdate } from "../types/playlist";
|
||||
import { CATEGORY_MAP } from "../shared/category-map";
|
||||
|
||||
const LOG_PREFIX = "[yt-playlist-features:bg]";
|
||||
const LOG = "[yt-playlist-features:bg]";
|
||||
const DEFAULT_API_KEY = "AIzaSyDPyWG3ABnVV3en_KBhIxUH6O2_A0oP4Wk";
|
||||
const BATCH_SIZE = 50;
|
||||
|
||||
async function getApiKey(): Promise<string> {
|
||||
const result = await browser.storage.sync.get("apiKey");
|
||||
return (result.apiKey as string) || DEFAULT_API_KEY;
|
||||
}
|
||||
|
||||
const BATCH_DELAY = 500; // ms between batches
|
||||
const RETRY_DELAY = 5000; // ms before retrying after rate limit
|
||||
const MAX_RETRIES = 3;
|
||||
|
||||
async function fetchVideoDetails(
|
||||
videoIds: string[],
|
||||
tabId: number,
|
||||
): Promise<void> {
|
||||
const apiKey = await getApiKey();
|
||||
if (!apiKey) {
|
||||
browser.tabs.sendMessage(tabId, {
|
||||
type: "VIDEO_DETAILS_ERROR",
|
||||
error: "no-api-key",
|
||||
} satisfies Message);
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < videoIds.length; i += BATCH_SIZE) {
|
||||
if (i > 0) await new Promise((r) => setTimeout(r, BATCH_DELAY));
|
||||
|
||||
const batch = videoIds.slice(i, i + BATCH_SIZE);
|
||||
const ids = batch.join(",");
|
||||
const url = `https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics&id=${ids}&key=${apiKey}`;
|
||||
|
||||
let success = false;
|
||||
for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
|
||||
try {
|
||||
if (attempt > 0) {
|
||||
console.log(LOG, `Retry ${attempt} after rate limit, waiting ${RETRY_DELAY}ms...`);
|
||||
await new Promise((r) => setTimeout(r, RETRY_DELAY));
|
||||
}
|
||||
|
||||
const res = await fetch(url);
|
||||
if (res.status === 403) {
|
||||
console.warn(LOG, `Rate limited (attempt ${attempt + 1}/${MAX_RETRIES})`);
|
||||
continue;
|
||||
}
|
||||
if (!res.ok) {
|
||||
const body = await res.text();
|
||||
console.error(LOG, `API error ${res.status}:`, body);
|
||||
browser.tabs.sendMessage(tabId, {
|
||||
type: "VIDEO_DETAILS_ERROR",
|
||||
error: `api-error-${res.status}`,
|
||||
} satisfies Message);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
const updates: DetailUpdate[] = (data.items ?? []).map((item: any) => ({
|
||||
videoId: item.id,
|
||||
viewCountText: item.statistics?.viewCount
|
||||
? parseInt(item.statistics.viewCount, 10).toLocaleString()
|
||||
: null,
|
||||
publishedAt: item.snippet?.publishedAt?.slice(0, 10) ?? null,
|
||||
category: CATEGORY_MAP[item.snippet?.categoryId] ?? null,
|
||||
}));
|
||||
|
||||
browser.tabs.sendMessage(tabId, {
|
||||
type: "VIDEO_DETAILS_UPDATE",
|
||||
updates,
|
||||
} satisfies Message);
|
||||
success = true;
|
||||
break;
|
||||
} catch (e) {
|
||||
console.error(LOG, "Fetch failed:", e);
|
||||
browser.tabs.sendMessage(tabId, {
|
||||
type: "VIDEO_DETAILS_ERROR",
|
||||
error: "network-error",
|
||||
} satisfies Message);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!success) {
|
||||
console.error(LOG, "Max retries exceeded for batch");
|
||||
browser.tabs.sendMessage(tabId, {
|
||||
type: "VIDEO_DETAILS_ERROR",
|
||||
error: "rate-limit-exceeded",
|
||||
} satisfies Message);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
browser.runtime.onMessage.addListener(
|
||||
async (message: unknown, _sender: browser.Runtime.MessageSender) => {
|
||||
async (message: unknown, sender: browser.Runtime.MessageSender) => {
|
||||
const msg = message as Message;
|
||||
|
||||
if (msg.type === "PLAYLIST_EXTRACTED") {
|
||||
console.log(
|
||||
LOG_PREFIX,
|
||||
LOG,
|
||||
`Playlist: "${msg.data.metadata.title}" (${msg.data.extractedCount} videos)`,
|
||||
);
|
||||
}
|
||||
|
||||
if (msg.type === "FETCH_VIDEO_DETAILS") {
|
||||
const tabId = sender.tab?.id;
|
||||
if (!tabId) return;
|
||||
fetchVideoDetails(msg.videoIds, tabId);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
console.log(LOG_PREFIX, "Service worker started.");
|
||||
console.log(LOG, "Service worker started.");
|
||||
|
||||
@@ -175,6 +175,11 @@ function parseVideo(renderer: any): PlaylistVideo | null {
|
||||
(b: any) =>
|
||||
b.metadataBadgeRenderer?.style === "BADGE_STYLE_TYPE_LIVE_NOW",
|
||||
) ?? false,
|
||||
viewCountText: null,
|
||||
publishedAt: null,
|
||||
category: null,
|
||||
addedBy: null,
|
||||
voteCount: null,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
+68
-29
@@ -3,13 +3,43 @@ import { onPlaylistPageReady, getPlaylistId } from "./navigation";
|
||||
import { parseInitialData, buildPlaylistData } from "./extractor";
|
||||
import type { PlaylistVideo } from "../types/playlist";
|
||||
import type { Message } from "../shared/messages";
|
||||
import { mountTable } from "./ui/lifecycle";
|
||||
import { mountTable, appendToTable, setTableComplete, updateTableDetails } from "./ui/lifecycle";
|
||||
|
||||
const LOG = "[yt-playlist-features]";
|
||||
|
||||
let lastExtractedId: string | null = null;
|
||||
let pageScriptInjected = false;
|
||||
|
||||
function mapRawVideo(v: any): PlaylistVideo {
|
||||
const bylineRun = v.shortBylineText?.runs?.[0];
|
||||
const bylineEndpoint = bylineRun?.navigationEndpoint?.browseEndpoint;
|
||||
return {
|
||||
videoId: v.videoId,
|
||||
title: v.title,
|
||||
index: v.index,
|
||||
durationSeconds: v.lengthSeconds,
|
||||
durationText: v.lengthText || null,
|
||||
thumbnails: v.thumbnails,
|
||||
channel: {
|
||||
name: bylineRun?.text ?? "",
|
||||
channelId: bylineEndpoint?.browseId ?? "",
|
||||
url: bylineRun?.navigationEndpoint?.commandMetadata
|
||||
?.webCommandMetadata?.url ?? "",
|
||||
},
|
||||
isPlayable: v.isPlayable,
|
||||
isLive:
|
||||
v.badges?.some(
|
||||
(b: any) =>
|
||||
b.metadataBadgeRenderer?.style === "BADGE_STYLE_TYPE_LIVE_NOW",
|
||||
) ?? false,
|
||||
viewCountText: v.viewCountText ?? null,
|
||||
publishedAt: v.publishedAt ?? null,
|
||||
category: v.category ?? null,
|
||||
addedBy: v.addedBy ?? null,
|
||||
voteCount: v.voteCount ?? null,
|
||||
} satisfies PlaylistVideo;
|
||||
}
|
||||
|
||||
function ensurePageScript(): void {
|
||||
if (pageScriptInjected) return;
|
||||
const script = document.createElement("script");
|
||||
@@ -31,6 +61,9 @@ function handlePlaylistData(event: Event): void {
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip append messages — handled separately
|
||||
if (payload.type === "append") return;
|
||||
|
||||
if (payload.error) {
|
||||
console.warn(LOG, "Page script error:", payload.error);
|
||||
return;
|
||||
@@ -47,35 +80,9 @@ function handlePlaylistData(event: Event): void {
|
||||
}
|
||||
|
||||
// Convert DOM-extracted videos to PlaylistVideo[]
|
||||
const videos: PlaylistVideo[] = domVideos.map((v: any) => {
|
||||
const bylineRun = v.shortBylineText?.runs?.[0];
|
||||
const bylineEndpoint = bylineRun?.navigationEndpoint?.browseEndpoint;
|
||||
const videos: PlaylistVideo[] = domVideos.map(mapRawVideo);
|
||||
|
||||
return {
|
||||
videoId: v.videoId,
|
||||
title: v.title,
|
||||
index: v.index,
|
||||
durationSeconds: v.lengthSeconds,
|
||||
durationText: v.lengthText || null,
|
||||
thumbnails: v.thumbnails,
|
||||
channel: {
|
||||
name: bylineRun?.text ?? "",
|
||||
channelId: bylineEndpoint?.browseId ?? "",
|
||||
url: bylineRun?.navigationEndpoint?.commandMetadata
|
||||
?.webCommandMetadata?.url ?? "",
|
||||
},
|
||||
isPlayable: v.isPlayable,
|
||||
isLive:
|
||||
v.badges?.some(
|
||||
(b: any) =>
|
||||
b.metadataBadgeRenderer?.style === "BADGE_STYLE_TYPE_LIVE_NOW",
|
||||
) ?? false,
|
||||
addedBy: v.addedBy ?? null,
|
||||
voteCount: v.voteCount ?? null,
|
||||
} satisfies PlaylistVideo;
|
||||
});
|
||||
|
||||
const playlistData = buildPlaylistData(metadata, videos, true);
|
||||
const playlistData = buildPlaylistData(metadata, videos, payload.isComplete !== false);
|
||||
|
||||
console.log(
|
||||
LOG,
|
||||
@@ -90,8 +97,40 @@ function handlePlaylistData(event: Event): void {
|
||||
});
|
||||
}
|
||||
|
||||
function handlePlaylistAppend(event: Event): void {
|
||||
const detail = (event as CustomEvent).detail;
|
||||
if (!detail) return;
|
||||
|
||||
let payload: any;
|
||||
try {
|
||||
payload = JSON.parse(detail);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
if (payload.type === "append") {
|
||||
const newVideos: PlaylistVideo[] = payload.videos.map(mapRawVideo);
|
||||
appendToTable(newVideos);
|
||||
if (payload.isComplete) {
|
||||
setTableComplete(payload.totalCount);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for data from the injected page script
|
||||
document.addEventListener("__yt_playlist_ext_data", handlePlaylistData);
|
||||
document.addEventListener("__yt_playlist_ext_data", handlePlaylistAppend);
|
||||
|
||||
// Listen for detail updates from background service worker
|
||||
browser.runtime.onMessage.addListener((message: unknown) => {
|
||||
const msg = message as Message;
|
||||
if (msg.type === "VIDEO_DETAILS_UPDATE") {
|
||||
updateTableDetails(msg.updates);
|
||||
}
|
||||
if (msg.type === "VIDEO_DETAILS_ERROR") {
|
||||
console.error(LOG, "Detail fetch error:", msg.error);
|
||||
}
|
||||
});
|
||||
|
||||
// Detect playlist page navigation and trigger extraction
|
||||
onPlaylistPageReady(() => {
|
||||
|
||||
+43
-1
@@ -3,13 +3,27 @@ type MessageKey =
|
||||
| "colTitle"
|
||||
| "colChannel"
|
||||
| "colDuration"
|
||||
| "colViews"
|
||||
| "colPublished"
|
||||
| "colCategory"
|
||||
| "colAddedBy"
|
||||
| "colVotes"
|
||||
| "filterTitle"
|
||||
| "filterChannel"
|
||||
| "filterAddedBy"
|
||||
| "filterCategory"
|
||||
| "badgeLive"
|
||||
| "headerVideos";
|
||||
| "headerVideos"
|
||||
| "headerLoading"
|
||||
| "fetchViews"
|
||||
| "fetchViewsProgress"
|
||||
| "fetchViewsDone"
|
||||
| "colSettings"
|
||||
| "colSettingsReset"
|
||||
| "statsDuration"
|
||||
| "statsChannels"
|
||||
| "statsPlayable"
|
||||
| "statsTotalViews";
|
||||
|
||||
const messages: Record<string, Record<MessageKey, string>> = {
|
||||
ja: {
|
||||
@@ -17,26 +31,54 @@ const messages: Record<string, Record<MessageKey, string>> = {
|
||||
colTitle: "タイトル",
|
||||
colChannel: "チャンネル",
|
||||
colDuration: "長さ",
|
||||
colViews: "再生数",
|
||||
colPublished: "公開日",
|
||||
colCategory: "カテゴリ",
|
||||
colAddedBy: "追加者",
|
||||
colVotes: "投票",
|
||||
filterTitle: "タイトル検索...",
|
||||
filterChannel: "チャンネル...",
|
||||
filterAddedBy: "追加者...",
|
||||
filterCategory: "カテゴリ...",
|
||||
badgeLive: "ライブ",
|
||||
headerVideos: "本の動画",
|
||||
headerLoading: "読み込み中…",
|
||||
fetchViews: "再生数を取得",
|
||||
fetchViewsProgress: "取得中…",
|
||||
fetchViewsDone: "取得完了",
|
||||
colSettings: "表示",
|
||||
colSettingsReset: "リセット",
|
||||
statsDuration: "合計時間",
|
||||
statsChannels: "チャンネル",
|
||||
statsPlayable: "再生可能",
|
||||
statsTotalViews: "総再生数",
|
||||
},
|
||||
en: {
|
||||
colIndex: "#",
|
||||
colTitle: "Title",
|
||||
colChannel: "Channel",
|
||||
colDuration: "Duration",
|
||||
colViews: "Views",
|
||||
colPublished: "Published",
|
||||
colCategory: "Category",
|
||||
colAddedBy: "Added by",
|
||||
colVotes: "Votes",
|
||||
filterTitle: "Search title...",
|
||||
filterChannel: "Channel...",
|
||||
filterAddedBy: "Added by...",
|
||||
filterCategory: "Category...",
|
||||
badgeLive: "LIVE",
|
||||
headerVideos: "videos",
|
||||
headerLoading: "loading…",
|
||||
fetchViews: "Fetch views",
|
||||
fetchViewsProgress: "Fetching…",
|
||||
fetchViewsDone: "Done",
|
||||
colSettings: "View",
|
||||
colSettingsReset: "Reset",
|
||||
statsDuration: "Total",
|
||||
statsChannels: "Channels",
|
||||
statsPlayable: "Playable",
|
||||
statsTotalViews: "Total views",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
+63
-17
@@ -1,21 +1,19 @@
|
||||
import type { PlaylistData } from "../../types/playlist";
|
||||
import type { PlaylistData, PlaylistVideo } from "../../types/playlist";
|
||||
import { injectStyles } from "./styles";
|
||||
import { renderPlaylistTable } from "./table-renderer";
|
||||
import type { DetailUpdate } from "../../types/playlist";
|
||||
import { renderPlaylistTable, loadColumnPrefs, type PlaylistTableHandle } from "./table-renderer";
|
||||
|
||||
const CONTAINER_ID = "ytpf-playlist-table";
|
||||
|
||||
export function mountTable(data: PlaylistData): void {
|
||||
unmountTable();
|
||||
injectStyles();
|
||||
let currentHandle: PlaylistTableHandle | null = null;
|
||||
|
||||
const el = renderPlaylistTable(data);
|
||||
el.id = CONTAINER_ID;
|
||||
|
||||
// Primary: before ytd-playlist-video-list-renderer (sibling)
|
||||
const videoList = document.querySelector("ytd-playlist-video-list-renderer");
|
||||
if (videoList?.parentElement) {
|
||||
videoList.parentElement.insertBefore(el, videoList);
|
||||
return;
|
||||
function findAnchor(): { parent: Element; before: Element | null } | null {
|
||||
// Primary: top of ytd-item-section-renderer (before any header/content)
|
||||
const itemSection = document.querySelector(
|
||||
"ytd-section-list-renderer ytd-item-section-renderer",
|
||||
);
|
||||
if (itemSection) {
|
||||
return { parent: itemSection, before: itemSection.firstElementChild };
|
||||
}
|
||||
|
||||
// Fallback: end of ytd-section-list-renderer > #contents
|
||||
@@ -23,8 +21,7 @@ export function mountTable(data: PlaylistData): void {
|
||||
"ytd-section-list-renderer > #contents",
|
||||
);
|
||||
if (sectionContents) {
|
||||
sectionContents.appendChild(el);
|
||||
return;
|
||||
return { parent: sectionContents, before: null };
|
||||
}
|
||||
|
||||
// Last resort: #primary
|
||||
@@ -32,14 +29,63 @@ export function mountTable(data: PlaylistData): void {
|
||||
"ytd-two-column-browse-results-renderer > #primary",
|
||||
);
|
||||
if (primary) {
|
||||
primary.appendChild(el);
|
||||
return { parent: primary, before: null };
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function insertAt(el: HTMLElement, anchor: { parent: Element; before: Element | null }): void {
|
||||
anchor.parent.insertBefore(el, anchor.before);
|
||||
}
|
||||
|
||||
let pendingObserver: MutationObserver | null = null;
|
||||
|
||||
export async function mountTable(data: PlaylistData): Promise<void> {
|
||||
unmountTable();
|
||||
injectStyles();
|
||||
|
||||
const prefs = await loadColumnPrefs();
|
||||
currentHandle = renderPlaylistTable(data, prefs);
|
||||
const el = currentHandle.element;
|
||||
el.id = CONTAINER_ID;
|
||||
|
||||
const anchor = findAnchor();
|
||||
if (anchor) {
|
||||
insertAt(el, anchor);
|
||||
return;
|
||||
}
|
||||
|
||||
console.warn("[yt-playlist-features] Could not find anchor to mount table");
|
||||
// DOM not ready yet — wait for the anchor element to appear
|
||||
pendingObserver = new MutationObserver(() => {
|
||||
const a = findAnchor();
|
||||
if (a) {
|
||||
pendingObserver!.disconnect();
|
||||
pendingObserver = null;
|
||||
insertAt(el, a);
|
||||
}
|
||||
});
|
||||
pendingObserver.observe(document.body, { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
export function appendToTable(newVideos: PlaylistVideo[]): void {
|
||||
currentHandle?.appendVideos(newVideos);
|
||||
}
|
||||
|
||||
export function setTableComplete(extractedCount: number): void {
|
||||
currentHandle?.setComplete(extractedCount);
|
||||
}
|
||||
|
||||
export function updateTableDetails(updates: DetailUpdate[]): void {
|
||||
currentHandle?.updateDetails(updates);
|
||||
}
|
||||
|
||||
export function unmountTable(): void {
|
||||
if (pendingObserver) {
|
||||
pendingObserver.disconnect();
|
||||
pendingObserver = null;
|
||||
}
|
||||
currentHandle = null;
|
||||
document.getElementById(CONTAINER_ID)?.remove();
|
||||
}
|
||||
|
||||
|
||||
@@ -49,6 +49,46 @@ html[dark] .ytpf-toggle {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.ytpf-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 6px 16px;
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid var(--yt-spec-10-percent-layer, rgba(0,0,0,0.06));
|
||||
}
|
||||
|
||||
html[dark] .ytpf-stats {
|
||||
border-bottom-color: rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.ytpf-stats--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ytpf-stat {
|
||||
font-size: 12px;
|
||||
color: var(--yt-spec-text-secondary, #606060);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
html[dark] .ytpf-stat {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.ytpf-stat-value {
|
||||
font-family: "Roboto Mono", monospace;
|
||||
color: var(--yt-spec-text-primary, #0f0f0f);
|
||||
}
|
||||
|
||||
html[dark] .ytpf-stat-value {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
.ytpf-stats-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ytpf-filters {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -242,6 +282,7 @@ html[dark] .ytpf-filter-count {
|
||||
}
|
||||
|
||||
.ytpf-th {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
font-weight: 500;
|
||||
@@ -307,8 +348,185 @@ html[dark] .ytpf-tr:hover {
|
||||
.ytpf-col-title { width: auto; }
|
||||
.ytpf-col-channel { width: 180px; }
|
||||
.ytpf-col-duration { width: 80px; font-family: "Roboto Mono", monospace; }
|
||||
.ytpf-col-views { width: 120px; text-align: right; font-family: "Roboto Mono", monospace; }
|
||||
.ytpf-col-published { width: 110px; font-family: "Roboto Mono", monospace; }
|
||||
.ytpf-col-category { width: 120px; }
|
||||
.ytpf-col-addedby { width: 140px; }
|
||||
.ytpf-col-votes { width: 60px; text-align: center; font-family: "Roboto Mono", monospace; }
|
||||
|
||||
.ytpf-fetch-views-btn {
|
||||
padding: 4px 12px;
|
||||
border: 1px solid var(--yt-spec-10-percent-layer, rgba(0,0,0,0.2));
|
||||
border-radius: 16px;
|
||||
background: transparent;
|
||||
color: var(--yt-spec-text-secondary, #606060);
|
||||
font-size: 12px;
|
||||
font-family: "Roboto", "Arial", sans-serif;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
html[dark] .ytpf-fetch-views-btn {
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.ytpf-fetch-views-btn:hover:not(:disabled) {
|
||||
background: var(--yt-spec-badge-chip-background, #f2f2f2);
|
||||
}
|
||||
|
||||
html[dark] .ytpf-fetch-views-btn:hover:not(:disabled) {
|
||||
background: #3e3e3e;
|
||||
}
|
||||
|
||||
.ytpf-fetch-views-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ytpf-menu-anchor {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ytpf-menu-btn {
|
||||
padding: 4px 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--yt-spec-text-secondary, #606060);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ytpf-menu-btn:hover {
|
||||
background: var(--yt-spec-badge-chip-background, #f2f2f2);
|
||||
}
|
||||
|
||||
html[dark] .ytpf-menu-btn {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
html[dark] .ytpf-menu-btn:hover {
|
||||
background: #3e3e3e;
|
||||
}
|
||||
|
||||
.ytpf-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 4px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
border-radius: 8px;
|
||||
padding: 4px 0;
|
||||
min-width: 160px;
|
||||
z-index: 2001;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
html[dark] .ytpf-menu {
|
||||
background: #282828;
|
||||
border-color: rgba(255,255,255,0.1);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.ytpf-menu-heading {
|
||||
padding: 6px 12px 2px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--yt-spec-text-secondary, #606060);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
html[dark] .ytpf-menu-heading {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.ytpf-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 12px;
|
||||
font-size: 13px;
|
||||
color: var(--yt-spec-text-primary, #0f0f0f);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html[dark] .ytpf-menu-item {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
.ytpf-menu-item:hover {
|
||||
background: var(--yt-spec-badge-chip-background, #f2f2f2);
|
||||
}
|
||||
|
||||
html[dark] .ytpf-menu-item:hover {
|
||||
background: #3e3e3e;
|
||||
}
|
||||
|
||||
.ytpf-menu-item input[type="checkbox"] {
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ytpf-menu-sep {
|
||||
height: 1px;
|
||||
margin: 4px 0;
|
||||
background: var(--yt-spec-10-percent-layer, rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
html[dark] .ytpf-menu-sep {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.ytpf-menu-action {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 5px 12px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--yt-spec-text-secondary, #606060);
|
||||
font-size: 12px;
|
||||
font-family: "Roboto", "Arial", sans-serif;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
html[dark] .ytpf-menu-action {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.ytpf-menu-action:hover {
|
||||
background: var(--yt-spec-badge-chip-background, #f2f2f2);
|
||||
}
|
||||
|
||||
html[dark] .ytpf-menu-action:hover {
|
||||
background: #3e3e3e;
|
||||
}
|
||||
|
||||
.ytpf-resize-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -2px;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
cursor: col-resize;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ytpf-resize-handle:hover,
|
||||
.ytpf-resize-handle--active {
|
||||
background: var(--yt-spec-call-to-action, #065fd4);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
html[dark] .ytpf-resize-handle:hover,
|
||||
html[dark] .ytpf-resize-handle--active {
|
||||
background: #3ea6ff;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.ytpf-tr--unplayable {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
@@ -1,37 +1,86 @@
|
||||
import type { PlaylistData, PlaylistVideo } from "../../types/playlist";
|
||||
import browser from "webextension-polyfill";
|
||||
import type { PlaylistData, PlaylistVideo, DetailUpdate } from "../../types/playlist";
|
||||
import type { Message } from "../../shared/messages";
|
||||
import { t } from "./i18n";
|
||||
|
||||
type SortKey = "index" | "title" | "channel" | "duration" | "addedBy" | "votes";
|
||||
type SortKey = "index" | "title" | "channel" | "duration" | "views" | "published" | "category" | "addedBy" | "votes";
|
||||
type SortDir = "asc" | "desc";
|
||||
|
||||
interface Column {
|
||||
label: string;
|
||||
cls: string;
|
||||
key: SortKey;
|
||||
collab?: boolean; // only shown for collaborative playlists
|
||||
collab?: boolean;
|
||||
detail?: boolean;
|
||||
defaultWidth: number; // default width in %
|
||||
}
|
||||
|
||||
function getAllColumns(): Column[] {
|
||||
function getAllColumns(hasDetails: boolean): Column[] {
|
||||
return [
|
||||
{ label: t("colIndex"), cls: "ytpf-col-index", key: "index" },
|
||||
{ label: t("colTitle"), cls: "ytpf-col-title", key: "title" },
|
||||
{ label: t("colChannel"), cls: "ytpf-col-channel", key: "channel" },
|
||||
{ label: t("colDuration"), cls: "ytpf-col-duration", key: "duration" },
|
||||
{ label: t("colAddedBy"), cls: "ytpf-col-addedby", key: "addedBy", collab: true },
|
||||
{ label: t("colVotes"), cls: "ytpf-col-votes", key: "votes", collab: true },
|
||||
{ label: t("colIndex"), cls: "ytpf-col-index", key: "index", defaultWidth: 5 },
|
||||
{ label: t("colTitle"), cls: "ytpf-col-title", key: "title", defaultWidth: 40 },
|
||||
{ label: t("colChannel"), cls: "ytpf-col-channel", key: "channel", defaultWidth: 20 },
|
||||
{ label: t("colDuration"), cls: "ytpf-col-duration", key: "duration", defaultWidth: 8 },
|
||||
{ label: t("colViews"), cls: "ytpf-col-views", key: "views", defaultWidth: 12 },
|
||||
{ label: t("colPublished"), cls: "ytpf-col-published", key: "published", detail: true, defaultWidth: 10 },
|
||||
{ label: t("colCategory"), cls: "ytpf-col-category", key: "category", detail: true, defaultWidth: 10 },
|
||||
{ label: t("colAddedBy"), cls: "ytpf-col-addedby", key: "addedBy", collab: true, defaultWidth: 14 },
|
||||
{ label: t("colVotes"), cls: "ytpf-col-votes", key: "votes", collab: true, defaultWidth: 6 },
|
||||
];
|
||||
}
|
||||
|
||||
// --- Column preferences persistence ---
|
||||
|
||||
interface ColumnPref {
|
||||
visible: boolean;
|
||||
width: number;
|
||||
}
|
||||
|
||||
export type ColumnPrefs = Record<string, ColumnPref>;
|
||||
|
||||
export async function loadColumnPrefs(): Promise<ColumnPrefs> {
|
||||
const result = await browser.storage.local.get("ytpf-column-prefs");
|
||||
return (result["ytpf-column-prefs"] as ColumnPrefs) ?? {};
|
||||
}
|
||||
|
||||
async function saveColumnPrefs(prefs: ColumnPrefs): Promise<void> {
|
||||
await browser.storage.local.set({ "ytpf-column-prefs": prefs });
|
||||
}
|
||||
|
||||
function getColumnVisible(col: Column, prefs: ColumnPrefs): boolean {
|
||||
return prefs[col.key]?.visible ?? true;
|
||||
}
|
||||
|
||||
function getColumnWidth(col: Column, prefs: ColumnPrefs): number {
|
||||
return prefs[col.key]?.width ?? col.defaultWidth;
|
||||
}
|
||||
|
||||
function getVisibleColumns(available: Column[], prefs: ColumnPrefs): Column[] {
|
||||
return available.filter((c) => getColumnVisible(c, prefs));
|
||||
}
|
||||
|
||||
function applyColumnWidths(thElements: HTMLTableCellElement[], visibleColumns: Column[], prefs: ColumnPrefs): void {
|
||||
const widths = visibleColumns.map((c) => getColumnWidth(c, prefs));
|
||||
const total = widths.reduce((a, b) => a + b, 0);
|
||||
for (let i = 0; i < thElements.length; i++) {
|
||||
thElements[i].style.width = `${(widths[i] / total) * 100}%`;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Tag input ---
|
||||
|
||||
interface TagInput {
|
||||
container: HTMLElement;
|
||||
getTags(): string[];
|
||||
addCandidates(names: string[]): void;
|
||||
}
|
||||
|
||||
function createTagInput(
|
||||
placeholder: string,
|
||||
candidates: string[],
|
||||
initialCandidates: string[],
|
||||
onChange: () => void,
|
||||
): TagInput {
|
||||
const candidates = [...initialCandidates];
|
||||
const tags: string[] = [];
|
||||
|
||||
const container = document.createElement("div");
|
||||
@@ -185,9 +234,30 @@ function createTagInput(
|
||||
container.addEventListener("click", () => input.focus());
|
||||
|
||||
container.append(input, dropdown);
|
||||
return { container, getTags: () => [...tags] };
|
||||
return {
|
||||
container,
|
||||
getTags: () => [...tags],
|
||||
addCandidates(names: string[]) {
|
||||
for (const name of names) {
|
||||
if (!candidates.includes(name)) candidates.push(name);
|
||||
}
|
||||
candidates.sort();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function parseViewCount(text: string | null): number {
|
||||
if (!text) return -1;
|
||||
const cleaned = text.replace(/,/g, "");
|
||||
const m = cleaned.match(/([\d.]+)\s*(万|億)?/);
|
||||
if (!m) return -1;
|
||||
let num = parseFloat(m[1]);
|
||||
if (m[2] === "万") num *= 10000;
|
||||
else if (m[2] === "億") num *= 100000000;
|
||||
return Math.round(num);
|
||||
}
|
||||
|
||||
|
||||
function compareFn(key: SortKey, dir: SortDir) {
|
||||
const m = dir === "asc" ? 1 : -1;
|
||||
return (a: PlaylistVideo, b: PlaylistVideo): number => {
|
||||
@@ -200,6 +270,12 @@ function compareFn(key: SortKey, dir: SortDir) {
|
||||
return a.channel.name.localeCompare(b.channel.name) * m;
|
||||
case "duration":
|
||||
return ((a.durationSeconds ?? -1) - (b.durationSeconds ?? -1)) * m;
|
||||
case "views":
|
||||
return (parseViewCount(a.viewCountText) - parseViewCount(b.viewCountText)) * m;
|
||||
case "published":
|
||||
return (a.publishedAt ?? "").localeCompare(b.publishedAt ?? "") * m;
|
||||
case "category":
|
||||
return (a.category ?? "").localeCompare(b.category ?? "") * m;
|
||||
case "addedBy":
|
||||
return (a.addedBy ?? "").localeCompare(b.addedBy ?? "") * m;
|
||||
case "votes":
|
||||
@@ -208,81 +284,95 @@ function compareFn(key: SortKey, dir: SortDir) {
|
||||
};
|
||||
}
|
||||
|
||||
function buildCell(video: PlaylistVideo, col: Column, playlistId: string): HTMLTableCellElement {
|
||||
const td = document.createElement("td");
|
||||
td.className = `ytpf-td ${col.cls}`;
|
||||
|
||||
switch (col.key) {
|
||||
case "index":
|
||||
td.textContent = String(video.index + 1);
|
||||
break;
|
||||
case "title": {
|
||||
const link = document.createElement("a");
|
||||
link.className = "ytpf-link";
|
||||
link.href = `/watch?v=${video.videoId}&list=${playlistId}`;
|
||||
link.textContent = video.title;
|
||||
link.title = video.title;
|
||||
td.appendChild(link);
|
||||
break;
|
||||
}
|
||||
case "channel":
|
||||
if (video.channel.url) {
|
||||
const link = document.createElement("a");
|
||||
link.className = "ytpf-link";
|
||||
link.href = video.channel.url;
|
||||
link.textContent = video.channel.name;
|
||||
td.appendChild(link);
|
||||
} else {
|
||||
td.textContent = video.channel.name;
|
||||
}
|
||||
break;
|
||||
case "duration":
|
||||
if (video.isLive) {
|
||||
const badge = document.createElement("span");
|
||||
badge.className = "ytpf-live";
|
||||
badge.textContent = t("badgeLive");
|
||||
td.appendChild(badge);
|
||||
} else {
|
||||
td.textContent = video.durationText ?? "--";
|
||||
}
|
||||
break;
|
||||
case "views":
|
||||
td.textContent = video.viewCountText ?? "--";
|
||||
break;
|
||||
case "published":
|
||||
td.textContent = video.publishedAt ?? "--";
|
||||
break;
|
||||
case "category":
|
||||
td.textContent = video.category ?? "--";
|
||||
break;
|
||||
case "addedBy":
|
||||
td.textContent = video.addedBy ?? "--";
|
||||
break;
|
||||
case "votes":
|
||||
td.textContent = video.voteCount != null ? String(video.voteCount) : "--";
|
||||
break;
|
||||
}
|
||||
|
||||
return td;
|
||||
}
|
||||
|
||||
function buildRow(
|
||||
video: PlaylistVideo,
|
||||
playlistId: string,
|
||||
isCollab: boolean,
|
||||
visibleColumns: Column[],
|
||||
): HTMLTableRowElement {
|
||||
const tr = document.createElement("tr");
|
||||
tr.className = "ytpf-tr";
|
||||
if (!video.isPlayable) tr.classList.add("ytpf-tr--unplayable");
|
||||
|
||||
// Index
|
||||
const tdIndex = document.createElement("td");
|
||||
tdIndex.className = "ytpf-td ytpf-col-index";
|
||||
tdIndex.textContent = String(video.index + 1);
|
||||
tr.appendChild(tdIndex);
|
||||
|
||||
// Title
|
||||
const tdTitle = document.createElement("td");
|
||||
tdTitle.className = "ytpf-td ytpf-col-title";
|
||||
const titleLink = document.createElement("a");
|
||||
titleLink.className = "ytpf-link";
|
||||
titleLink.href = `/watch?v=${video.videoId}&list=${playlistId}`;
|
||||
titleLink.textContent = video.title;
|
||||
titleLink.title = video.title;
|
||||
tdTitle.appendChild(titleLink);
|
||||
tr.appendChild(tdTitle);
|
||||
|
||||
// Channel
|
||||
const tdChannel = document.createElement("td");
|
||||
tdChannel.className = "ytpf-td ytpf-col-channel";
|
||||
if (video.channel.url) {
|
||||
const chLink = document.createElement("a");
|
||||
chLink.className = "ytpf-link";
|
||||
chLink.href = video.channel.url;
|
||||
chLink.textContent = video.channel.name;
|
||||
tdChannel.appendChild(chLink);
|
||||
} else {
|
||||
tdChannel.textContent = video.channel.name;
|
||||
}
|
||||
tr.appendChild(tdChannel);
|
||||
|
||||
// Duration
|
||||
const tdDuration = document.createElement("td");
|
||||
tdDuration.className = "ytpf-td ytpf-col-duration";
|
||||
if (video.isLive) {
|
||||
const badge = document.createElement("span");
|
||||
badge.className = "ytpf-live";
|
||||
badge.textContent = t("badgeLive");
|
||||
tdDuration.appendChild(badge);
|
||||
} else {
|
||||
tdDuration.textContent = video.durationText ?? "--";
|
||||
}
|
||||
tr.appendChild(tdDuration);
|
||||
|
||||
if (isCollab) {
|
||||
// Added by
|
||||
const tdAddedBy = document.createElement("td");
|
||||
tdAddedBy.className = "ytpf-td ytpf-col-addedby";
|
||||
tdAddedBy.textContent = video.addedBy ?? "--";
|
||||
tr.appendChild(tdAddedBy);
|
||||
|
||||
// Votes
|
||||
const tdVotes = document.createElement("td");
|
||||
tdVotes.className = "ytpf-td ytpf-col-votes";
|
||||
tdVotes.textContent = video.voteCount != null ? String(video.voteCount) : "--";
|
||||
tr.appendChild(tdVotes);
|
||||
for (const col of visibleColumns) {
|
||||
tr.appendChild(buildCell(video, col, playlistId));
|
||||
}
|
||||
|
||||
return tr;
|
||||
}
|
||||
|
||||
export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
||||
export interface PlaylistTableHandle {
|
||||
element: HTMLElement;
|
||||
appendVideos(newVideos: PlaylistVideo[]): void;
|
||||
setComplete(extractedCount: number): void;
|
||||
updateDetails(updates: DetailUpdate[]): void;
|
||||
}
|
||||
|
||||
export function renderPlaylistTable(data: PlaylistData, columnPrefs: ColumnPrefs): PlaylistTableHandle {
|
||||
const isCollab = data.videos.some(
|
||||
(v) => v.addedBy != null || v.voteCount != null,
|
||||
);
|
||||
const columns = getAllColumns().filter((c) => !c.collab || isCollab);
|
||||
let hasDetails = data.videos.some((v) => v.publishedAt != null || v.category != null);
|
||||
|
||||
let availableColumns = getAllColumns(hasDetails).filter((c) => (!c.collab || isCollab) && (!c.detail || hasDetails));
|
||||
let visibleColumns = getVisibleColumns(availableColumns, columnPrefs);
|
||||
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.className = "ytpf-wrapper";
|
||||
@@ -291,23 +381,189 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
||||
const header = document.createElement("div");
|
||||
header.className = "ytpf-header";
|
||||
|
||||
let extractedCount = data.extractedCount;
|
||||
let complete = data.isComplete;
|
||||
|
||||
const titleSpan = document.createElement("span");
|
||||
titleSpan.className = "ytpf-header-title";
|
||||
titleSpan.textContent = `${data.metadata.title} — ${data.extractedCount} ${t("headerVideos")}`;
|
||||
|
||||
const metaSpan = document.createElement("span");
|
||||
metaSpan.className = "ytpf-header-meta";
|
||||
if (data.metadata.totalDurationText) {
|
||||
metaSpan.textContent = data.metadata.totalDurationText;
|
||||
function updateHeader() {
|
||||
const status = complete ? "" : ` (${t("headerLoading")})`;
|
||||
titleSpan.textContent = `${data.metadata.title} — ${extractedCount} ${t("headerVideos")}${status}`;
|
||||
}
|
||||
updateHeader();
|
||||
|
||||
const toggle = document.createElement("span");
|
||||
toggle.className = "ytpf-toggle";
|
||||
toggle.textContent = "\u25BC";
|
||||
|
||||
header.append(titleSpan, metaSpan, toggle);
|
||||
// ⋮ kebab menu
|
||||
const menuAnchor = document.createElement("div");
|
||||
menuAnchor.className = "ytpf-menu-anchor";
|
||||
|
||||
const menuBtn = document.createElement("button");
|
||||
menuBtn.className = "ytpf-menu-btn";
|
||||
menuBtn.textContent = "\u22EE"; // ⋮
|
||||
menuAnchor.appendChild(menuBtn);
|
||||
|
||||
let menuPanel: HTMLElement | null = null;
|
||||
|
||||
function buildMenu(): HTMLElement {
|
||||
const panel = document.createElement("div");
|
||||
panel.className = "ytpf-menu";
|
||||
|
||||
const heading = document.createElement("div");
|
||||
heading.className = "ytpf-menu-heading";
|
||||
heading.textContent = t("colSettings");
|
||||
panel.appendChild(heading);
|
||||
|
||||
for (const col of availableColumns) {
|
||||
const item = document.createElement("label");
|
||||
item.className = "ytpf-menu-item";
|
||||
|
||||
const checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.checked = getColumnVisible(col, columnPrefs);
|
||||
|
||||
const span = document.createElement("span");
|
||||
span.textContent = col.label;
|
||||
|
||||
checkbox.addEventListener("change", () => {
|
||||
if (!columnPrefs[col.key]) columnPrefs[col.key] = { visible: true, width: col.defaultWidth };
|
||||
columnPrefs[col.key].visible = checkbox.checked;
|
||||
onColumnsChanged();
|
||||
});
|
||||
|
||||
item.append(checkbox, span);
|
||||
panel.appendChild(item);
|
||||
}
|
||||
|
||||
// Separator + reset
|
||||
const sep = document.createElement("div");
|
||||
sep.className = "ytpf-menu-sep";
|
||||
panel.appendChild(sep);
|
||||
|
||||
const resetBtn = document.createElement("button");
|
||||
resetBtn.className = "ytpf-menu-action";
|
||||
resetBtn.textContent = t("colSettingsReset");
|
||||
resetBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
for (const key of Object.keys(columnPrefs)) delete columnPrefs[key];
|
||||
onColumnsChanged();
|
||||
// Sync checkboxes
|
||||
panel.querySelectorAll<HTMLInputElement>('.ytpf-menu-item input[type="checkbox"]').forEach((cb) => {
|
||||
cb.checked = true;
|
||||
});
|
||||
});
|
||||
panel.appendChild(resetBtn);
|
||||
|
||||
return panel;
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
if (menuPanel) {
|
||||
menuPanel.remove();
|
||||
menuPanel = null;
|
||||
}
|
||||
}
|
||||
|
||||
menuBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
if (menuPanel) {
|
||||
closeMenu();
|
||||
} else {
|
||||
menuPanel = buildMenu();
|
||||
menuAnchor.appendChild(menuPanel);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
if (menuPanel && !menuAnchor.contains(e.target as Node)) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
header.append(titleSpan, toggle);
|
||||
wrapper.appendChild(header);
|
||||
|
||||
// Stats bar (between header and filters)
|
||||
const statsBar = document.createElement("div");
|
||||
statsBar.className = "ytpf-stats";
|
||||
|
||||
function makeStat(label: string, value: string): HTMLElement {
|
||||
const span = document.createElement("span");
|
||||
span.className = "ytpf-stat";
|
||||
span.textContent = `${label}: `;
|
||||
const val = document.createElement("span");
|
||||
val.className = "ytpf-stat-value";
|
||||
val.textContent = value;
|
||||
span.appendChild(val);
|
||||
return span;
|
||||
}
|
||||
|
||||
function formatNumber(n: number): string {
|
||||
return n.toLocaleString();
|
||||
}
|
||||
|
||||
function formatDuration(totalSec: number): string {
|
||||
const h = Math.floor(totalSec / 3600);
|
||||
const m = Math.floor((totalSec % 3600) / 60);
|
||||
const s = totalSec % 60;
|
||||
if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
|
||||
return `${m}:${String(s).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
const statDuration = makeStat(t("statsDuration"), data.metadata.totalDurationText ?? "--");
|
||||
const statChannels = makeStat(t("statsChannels"), "0");
|
||||
const statPlayable = makeStat(t("statsPlayable"), "0");
|
||||
const statTotalViews = makeStat(t("statsTotalViews"), "--");
|
||||
statTotalViews.style.display = "none";
|
||||
|
||||
function updateStats() {
|
||||
const channelSet = new Set(videos.map((v) => v.channel.name));
|
||||
statChannels.querySelector(".ytpf-stat-value")!.textContent = String(channelSet.size);
|
||||
const playable = videos.filter((v) => v.isPlayable).length;
|
||||
statPlayable.querySelector(".ytpf-stat-value")!.textContent =
|
||||
playable === videos.length ? String(playable) : `${playable}/${videos.length}`;
|
||||
// Duration from individual videos (more accurate than metadata when appending)
|
||||
const totalSec = videos.reduce((sum, v) => sum + (v.durationSeconds ?? 0), 0);
|
||||
if (totalSec > 0) {
|
||||
statDuration.querySelector(".ytpf-stat-value")!.textContent = formatDuration(totalSec);
|
||||
}
|
||||
// Total views (only when some videos have viewCountText)
|
||||
const viewCounts = videos.map((v) => parseViewCount(v.viewCountText)).filter((n) => n >= 0);
|
||||
if (viewCounts.length > 0) {
|
||||
const total = viewCounts.reduce((a, b) => a + b, 0);
|
||||
statTotalViews.querySelector(".ytpf-stat-value")!.textContent = formatNumber(total);
|
||||
statTotalViews.style.display = "";
|
||||
}
|
||||
}
|
||||
|
||||
const statsSpacer = document.createElement("span");
|
||||
statsSpacer.className = "ytpf-stats-spacer";
|
||||
|
||||
// Fetch details button
|
||||
const fetchBtn = document.createElement("button");
|
||||
fetchBtn.className = "ytpf-fetch-views-btn";
|
||||
fetchBtn.textContent = t("fetchViews");
|
||||
let detailsFetched = false;
|
||||
fetchBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
if (detailsFetched) return;
|
||||
const targetIds = videos.filter((v) => v.isPlayable).map((v) => v.videoId);
|
||||
if (targetIds.length === 0) return;
|
||||
detailsFetched = true;
|
||||
fetchBtn.disabled = true;
|
||||
fetchBtn.textContent = `${t("fetchViewsProgress")} 0/${targetIds.length}`;
|
||||
browser.runtime.sendMessage({
|
||||
type: "FETCH_VIDEO_DETAILS",
|
||||
videoIds: targetIds,
|
||||
} satisfies Message);
|
||||
});
|
||||
|
||||
statsBar.append(statDuration, statChannels, statPlayable, statTotalViews, statsSpacer, fetchBtn);
|
||||
wrapper.appendChild(statsBar);
|
||||
|
||||
// Filter bar
|
||||
const filters = document.createElement("div");
|
||||
filters.className = "ytpf-filters";
|
||||
@@ -319,12 +575,26 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
||||
titleInput.placeholder = t("filterTitle");
|
||||
filters.appendChild(titleInput);
|
||||
|
||||
// Channel tag input
|
||||
const channelNames = [...new Set(data.videos.map((v) => v.channel.name))].sort();
|
||||
const channelTagInput = createTagInput(t("filterChannel"), channelNames, () => applyFilters());
|
||||
filters.appendChild(channelTagInput.container);
|
||||
|
||||
// Added-by tag input (collab only)
|
||||
let categoryTagInput: TagInput | null = null;
|
||||
const categoryFilterContainer = document.createElement("div");
|
||||
categoryFilterContainer.style.display = "none";
|
||||
filters.appendChild(categoryFilterContainer);
|
||||
|
||||
function ensureCategoryFilter() {
|
||||
if (categoryTagInput) return;
|
||||
const categoryNames = [...new Set(
|
||||
videos.map((v) => v.category).filter((c): c is string => c != null),
|
||||
)].sort();
|
||||
if (categoryNames.length === 0) return;
|
||||
categoryTagInput = createTagInput(t("filterCategory"), categoryNames, () => applyFilters());
|
||||
categoryFilterContainer.appendChild(categoryTagInput.container);
|
||||
categoryFilterContainer.style.display = "";
|
||||
}
|
||||
|
||||
let addedByTagInput: TagInput | null = null;
|
||||
if (isCollab) {
|
||||
const addedByNames = [...new Set(
|
||||
@@ -338,6 +608,8 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
||||
filterCount.className = "ytpf-filter-count";
|
||||
filters.appendChild(filterCount);
|
||||
|
||||
filters.appendChild(menuAnchor);
|
||||
|
||||
wrapper.appendChild(filters);
|
||||
|
||||
// Body (table container)
|
||||
@@ -347,19 +619,80 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
||||
const table = document.createElement("table");
|
||||
table.className = "ytpf-table";
|
||||
|
||||
// Sort state (declared early for buildThead → updateSortIndicators)
|
||||
let sortKey: SortKey | null = null;
|
||||
let sortDir: SortDir = "asc";
|
||||
|
||||
// Thead
|
||||
const thead = document.createElement("thead");
|
||||
const headRow = document.createElement("tr");
|
||||
const thElements: HTMLTableCellElement[] = [];
|
||||
let thElements: HTMLTableCellElement[] = [];
|
||||
|
||||
for (const col of columns) {
|
||||
const th = document.createElement("th");
|
||||
th.className = `ytpf-th ytpf-th--sortable ${col.cls}`;
|
||||
th.dataset.sortKey = col.key;
|
||||
th.textContent = col.label;
|
||||
thElements.push(th);
|
||||
headRow.appendChild(th);
|
||||
function attachResizeHandles() {
|
||||
for (let i = 0; i < thElements.length - 1; i++) {
|
||||
const handle = document.createElement("div");
|
||||
handle.className = "ytpf-resize-handle";
|
||||
thElements[i].appendChild(handle);
|
||||
|
||||
const idx = i;
|
||||
handle.addEventListener("mousedown", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handle.classList.add("ytpf-resize-handle--active");
|
||||
|
||||
const startX = e.clientX;
|
||||
const tableWidth = table.getBoundingClientRect().width;
|
||||
const startLeftPx = thElements[idx].getBoundingClientRect().width;
|
||||
const startRightPx = thElements[idx + 1].getBoundingClientRect().width;
|
||||
const minPx = 30;
|
||||
|
||||
function onMouseMove(ev: MouseEvent) {
|
||||
const delta = ev.clientX - startX;
|
||||
const newLeftPx = Math.max(minPx, startLeftPx + delta);
|
||||
const newRightPx = Math.max(minPx, startRightPx - delta);
|
||||
thElements[idx].style.width = `${(newLeftPx / tableWidth) * 100}%`;
|
||||
thElements[idx + 1].style.width = `${(newRightPx / tableWidth) * 100}%`;
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
handle.classList.remove("ytpf-resize-handle--active");
|
||||
document.removeEventListener("mousemove", onMouseMove);
|
||||
document.removeEventListener("mouseup", onMouseUp);
|
||||
|
||||
// Persist all visible column widths
|
||||
const tw = table.getBoundingClientRect().width;
|
||||
for (let j = 0; j < visibleColumns.length; j++) {
|
||||
const col = visibleColumns[j];
|
||||
const pct = (thElements[j].getBoundingClientRect().width / tw) * 100;
|
||||
if (!columnPrefs[col.key]) columnPrefs[col.key] = { visible: true, width: col.defaultWidth };
|
||||
columnPrefs[col.key].width = Math.round(pct * 10) / 10;
|
||||
}
|
||||
saveColumnPrefs(columnPrefs);
|
||||
}
|
||||
|
||||
document.addEventListener("mousemove", onMouseMove);
|
||||
document.addEventListener("mouseup", onMouseUp);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function buildThead() {
|
||||
headRow.textContent = "";
|
||||
thElements = [];
|
||||
for (const col of visibleColumns) {
|
||||
const th = document.createElement("th");
|
||||
th.className = `ytpf-th ytpf-th--sortable ${col.cls}`;
|
||||
th.dataset.sortKey = col.key;
|
||||
th.textContent = col.label;
|
||||
thElements.push(th);
|
||||
headRow.appendChild(th);
|
||||
}
|
||||
applyColumnWidths(thElements, visibleColumns, columnPrefs);
|
||||
attachResizeHandles();
|
||||
updateSortIndicators();
|
||||
}
|
||||
|
||||
buildThead();
|
||||
thead.appendChild(headRow);
|
||||
table.appendChild(thead);
|
||||
|
||||
@@ -371,11 +704,13 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
||||
function getFilteredVideos(): PlaylistVideo[] {
|
||||
const titleQuery = titleInput.value.toLowerCase();
|
||||
const channelTags = channelTagInput.getTags();
|
||||
const categoryTags = categoryTagInput?.getTags() ?? [];
|
||||
const addedByTags = addedByTagInput?.getTags() ?? [];
|
||||
|
||||
return videos.filter((v) => {
|
||||
if (titleQuery && !v.title.toLowerCase().includes(titleQuery)) return false;
|
||||
if (channelTags.length > 0 && !channelTags.includes(v.channel.name)) return false;
|
||||
if (categoryTags.length > 0 && (!v.category || !categoryTags.includes(v.category))) return false;
|
||||
if (addedByTags.length > 0 && (!v.addedBy || !addedByTags.includes(v.addedBy))) return false;
|
||||
return true;
|
||||
});
|
||||
@@ -385,7 +720,7 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
||||
const filtered = getFilteredVideos();
|
||||
tbody.textContent = "";
|
||||
for (const video of filtered) {
|
||||
tbody.appendChild(buildRow(video, playlistId, isCollab));
|
||||
tbody.appendChild(buildRow(video, playlistId, visibleColumns));
|
||||
}
|
||||
filterCount.textContent = filtered.length < videos.length
|
||||
? `${filtered.length} / ${videos.length}`
|
||||
@@ -399,10 +734,7 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
||||
titleInput.addEventListener("input", applyFilters);
|
||||
|
||||
renderRows();
|
||||
|
||||
// Sort state
|
||||
let sortKey: SortKey | null = null;
|
||||
let sortDir: SortDir = "asc";
|
||||
updateStats();
|
||||
|
||||
function updateSortIndicators() {
|
||||
for (const th of thElements) {
|
||||
@@ -434,6 +766,14 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
||||
renderRows();
|
||||
});
|
||||
|
||||
// Column visibility/width change handler
|
||||
function onColumnsChanged() {
|
||||
visibleColumns = getVisibleColumns(availableColumns, columnPrefs);
|
||||
buildThead();
|
||||
renderRows();
|
||||
saveColumnPrefs(columnPrefs);
|
||||
}
|
||||
|
||||
table.appendChild(tbody);
|
||||
body.appendChild(table);
|
||||
wrapper.appendChild(body);
|
||||
@@ -441,9 +781,88 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
||||
// Toggle collapse
|
||||
header.addEventListener("click", () => {
|
||||
body.classList.toggle("ytpf-body--hidden");
|
||||
statsBar.classList.toggle("ytpf-stats--hidden");
|
||||
filters.classList.toggle("ytpf-filters--hidden");
|
||||
toggle.classList.toggle("ytpf-toggle--collapsed");
|
||||
});
|
||||
|
||||
return wrapper;
|
||||
function appendVideos(newVideos: PlaylistVideo[]) {
|
||||
videos.push(...newVideos);
|
||||
extractedCount += newVideos.length;
|
||||
|
||||
channelTagInput.addCandidates(newVideos.map((v) => v.channel.name));
|
||||
if (addedByTagInput) {
|
||||
addedByTagInput.addCandidates(
|
||||
newVideos.map((v) => v.addedBy).filter((n): n is string => n != null),
|
||||
);
|
||||
}
|
||||
|
||||
if (sortKey) {
|
||||
videos.sort(compareFn(sortKey, sortDir));
|
||||
}
|
||||
renderRows();
|
||||
updateHeader();
|
||||
updateStats();
|
||||
}
|
||||
|
||||
function setComplete(count: number) {
|
||||
extractedCount = count;
|
||||
complete = true;
|
||||
updateHeader();
|
||||
}
|
||||
|
||||
let detailsReceived = 0;
|
||||
let detailsTotal = 0;
|
||||
|
||||
function updateDetails(updates: DetailUpdate[]) {
|
||||
const map = new Map(updates.map((u) => [u.videoId, u]));
|
||||
for (const v of videos) {
|
||||
const u = map.get(v.videoId);
|
||||
if (u) {
|
||||
v.viewCountText = u.viewCountText ?? v.viewCountText;
|
||||
v.publishedAt = u.publishedAt;
|
||||
v.category = u.category;
|
||||
}
|
||||
}
|
||||
|
||||
detailsReceived += updates.length;
|
||||
if (detailsTotal === 0) {
|
||||
detailsTotal = videos.filter((v) => v.isPlayable).length;
|
||||
}
|
||||
|
||||
if (!hasDetails) {
|
||||
hasDetails = true;
|
||||
availableColumns = getAllColumns(true).filter((c) => (!c.collab || isCollab) && (!c.detail || hasDetails));
|
||||
visibleColumns = getVisibleColumns(availableColumns, columnPrefs);
|
||||
buildThead();
|
||||
// Rebuild menu if open
|
||||
if (menuPanel) {
|
||||
closeMenu();
|
||||
menuPanel = buildMenu();
|
||||
menuAnchor.appendChild(menuPanel);
|
||||
}
|
||||
}
|
||||
|
||||
ensureCategoryFilter();
|
||||
if (categoryTagInput) {
|
||||
categoryTagInput.addCandidates(
|
||||
updates.map((u) => u.category).filter((c): c is string => c != null),
|
||||
);
|
||||
}
|
||||
|
||||
if (detailsReceived < detailsTotal) {
|
||||
fetchBtn.textContent = `${t("fetchViewsProgress")} ${detailsReceived}/${detailsTotal}`;
|
||||
} else {
|
||||
fetchBtn.textContent = t("fetchViewsDone");
|
||||
setTimeout(() => { fetchBtn.style.display = "none"; }, 1500);
|
||||
}
|
||||
|
||||
if (sortKey) {
|
||||
videos.sort(compareFn(sortKey, sortDir));
|
||||
}
|
||||
renderRows();
|
||||
updateStats();
|
||||
}
|
||||
|
||||
return { element: wrapper, appendVideos, setComplete, updateDetails };
|
||||
}
|
||||
|
||||
+75
-34
@@ -16,6 +16,7 @@
|
||||
w.__yt_playlist_ext_injected = true;
|
||||
|
||||
let extractingUrl: string | null = null;
|
||||
let isInitialLoad = true;
|
||||
let collabCache: Map<string, string> = new Map();
|
||||
let collabCachePlaylistId: string | null = null;
|
||||
|
||||
@@ -64,12 +65,13 @@
|
||||
const { cfg, apiKey, baseContext } = getConfig();
|
||||
const authHeaders = buildAuthHeaders(cfg, baseContext);
|
||||
|
||||
// Try ytInitialData first (works on initial page load)
|
||||
let initialData = w.ytInitialData;
|
||||
// Try ytInitialData only on initial page load.
|
||||
// On SPA navigation ytInitialData is stale (still holds the previous page's data),
|
||||
// so we must always fetch fresh data via the browse API.
|
||||
let initialData = isInitialLoad ? w.ytInitialData : null;
|
||||
let videoList = initialData ? findVideoListContents(initialData) : null;
|
||||
isInitialLoad = false;
|
||||
|
||||
// If ytInitialData doesn't have the video list (SPA navigation),
|
||||
// fetch the playlist data ourselves via the browse API
|
||||
if (!videoList) {
|
||||
const playlistId = getPlaylistId();
|
||||
if (!playlistId) {
|
||||
@@ -94,13 +96,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
const allRenderers: any[] = [];
|
||||
const firstPageRenderers: any[] = [];
|
||||
let continuation: string | null = null;
|
||||
let continuationClickTracking: string | null = null;
|
||||
|
||||
for (const item of videoList) {
|
||||
if (item.playlistVideoRenderer) {
|
||||
allRenderers.push(item.playlistVideoRenderer);
|
||||
firstPageRenderers.push(item.playlistVideoRenderer);
|
||||
}
|
||||
if (item.continuationItemRenderer) {
|
||||
const extracted = extractContinuationInfo(item.continuationItemRenderer);
|
||||
@@ -109,7 +111,57 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch remaining pages
|
||||
// Fetch collaborator names for collaborative playlists
|
||||
const avatarToName = await fetchCollaboratorMap(initialData, cfg, baseContext, authHeaders);
|
||||
|
||||
function parseVideoInfo(videoInfo: any): { viewCountText: string | null } {
|
||||
if (!videoInfo) return { viewCountText: null };
|
||||
if (!videoInfo.runs) {
|
||||
const text = textOf(videoInfo);
|
||||
return { viewCountText: text || null };
|
||||
}
|
||||
const runs: string[] = videoInfo.runs.map((r: any) => r.text);
|
||||
// Runs format: ["126万 回視聴", " · ", "6年前"]
|
||||
return { viewCountText: runs[0]?.trim() || null };
|
||||
}
|
||||
|
||||
function mapRenderers(renderers: any[], startIndex: number) {
|
||||
return renderers.map((d, i) => {
|
||||
const { viewCountText } = parseVideoInfo(d.videoInfo);
|
||||
return {
|
||||
videoId: d.videoId,
|
||||
title: textOf(d.title),
|
||||
index: startIndex + i,
|
||||
lengthSeconds: d.lengthSeconds ? parseInt(d.lengthSeconds, 10) : null,
|
||||
lengthText: textOf(d.lengthText),
|
||||
thumbnails: d.thumbnail?.thumbnails ?? [],
|
||||
shortBylineText: d.shortBylineText,
|
||||
isPlayable: d.isPlayable !== false,
|
||||
badges: d.badges ?? [],
|
||||
viewCountText,
|
||||
publishedAt: null as string | null,
|
||||
category: null as string | null,
|
||||
voteCount: typeof d.voteCount === "number" ? d.voteCount : null,
|
||||
addedBy: resolveAddedBy(d, avatarToName),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// Send first page immediately
|
||||
const hasContinuation = !!continuation;
|
||||
const firstPageVideos = mapRenderers(firstPageRenderers, 0);
|
||||
console.log(LOG, `First page: ${firstPageVideos.length} videos (has more: ${hasContinuation})`);
|
||||
|
||||
sendResult({
|
||||
videos: firstPageVideos,
|
||||
initialData,
|
||||
innertubeApiKey: apiKey,
|
||||
innertubeContext: baseContext,
|
||||
isComplete: !hasContinuation,
|
||||
});
|
||||
|
||||
// Fetch remaining pages lazily and send incremental updates
|
||||
let totalCount = firstPageVideos.length;
|
||||
let page = 1;
|
||||
while (continuation && page < 50) {
|
||||
try {
|
||||
@@ -132,12 +184,13 @@
|
||||
continuation = null;
|
||||
continuationClickTracking = null;
|
||||
|
||||
const pageRenderers: any[] = [];
|
||||
for (const action of data.onResponseReceivedActions ?? []) {
|
||||
const items = action?.appendContinuationItemsAction?.continuationItems;
|
||||
if (!items) continue;
|
||||
for (const item of items) {
|
||||
if (item.playlistVideoRenderer) {
|
||||
allRenderers.push(item.playlistVideoRenderer);
|
||||
pageRenderers.push(item.playlistVideoRenderer);
|
||||
}
|
||||
if (item.continuationItemRenderer) {
|
||||
const extracted = extractContinuationInfo(item.continuationItemRenderer);
|
||||
@@ -146,38 +199,26 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const pageVideos = mapRenderers(pageRenderers, totalCount);
|
||||
totalCount += pageVideos.length;
|
||||
|
||||
console.log(LOG, `Continuation page ${page}: +${pageVideos.length} videos (total: ${totalCount})`);
|
||||
sendResult({
|
||||
type: "append",
|
||||
videos: pageVideos,
|
||||
isComplete: !continuation,
|
||||
totalCount,
|
||||
});
|
||||
|
||||
page++;
|
||||
} catch (e) {
|
||||
console.error(LOG, `Continuation page ${page} failed:`, e);
|
||||
// Send completion even on error so the loading indicator goes away
|
||||
sendResult({ type: "append", videos: [], isComplete: true, totalCount });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch collaborator names for collaborative playlists
|
||||
const avatarToName = await fetchCollaboratorMap(initialData, cfg, baseContext, authHeaders);
|
||||
|
||||
const videos = allRenderers.map((d, i) => ({
|
||||
videoId: d.videoId,
|
||||
title: textOf(d.title),
|
||||
index: i,
|
||||
lengthSeconds: d.lengthSeconds ? parseInt(d.lengthSeconds, 10) : null,
|
||||
lengthText: textOf(d.lengthText),
|
||||
thumbnails: d.thumbnail?.thumbnails ?? [],
|
||||
shortBylineText: d.shortBylineText,
|
||||
isPlayable: d.isPlayable !== false,
|
||||
badges: d.badges ?? [],
|
||||
voteCount: typeof d.voteCount === "number" ? d.voteCount : null,
|
||||
addedBy: resolveAddedBy(d, avatarToName),
|
||||
}));
|
||||
|
||||
console.log(LOG, `Extraction: ${videos.length} videos (${page - 1} continuation pages)`);
|
||||
|
||||
sendResult({
|
||||
videos,
|
||||
initialData,
|
||||
innertubeApiKey: apiKey,
|
||||
innertubeContext: baseContext,
|
||||
});
|
||||
}
|
||||
|
||||
// --- helpers ---
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<style>
|
||||
body {
|
||||
font-family: "Roboto", "Arial", sans-serif;
|
||||
font-size: 14px;
|
||||
padding: 16px;
|
||||
min-width: 360px;
|
||||
color: #333;
|
||||
}
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #606060;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
}
|
||||
.hint {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.actions {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
button {
|
||||
padding: 6px 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
button.primary {
|
||||
background: #065fd4;
|
||||
color: #fff;
|
||||
border-color: #065fd4;
|
||||
}
|
||||
button.primary:hover {
|
||||
background: #0554b8;
|
||||
}
|
||||
.status {
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
color: #1a8a1a;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>YT Playlist Features</h2>
|
||||
<label for="apiKey">YouTube Data API Key</label>
|
||||
<input type="text" id="apiKey" placeholder="..." />
|
||||
<div class="hint">
|
||||
Leave blank to use the default key.
|
||||
<a
|
||||
href="https://console.cloud.google.com/apis/credentials"
|
||||
target="_blank"
|
||||
>Get your own key</a
|
||||
>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="primary" id="save">Save</button>
|
||||
<button id="clear">Clear</button>
|
||||
</div>
|
||||
<div class="status" id="status"></div>
|
||||
<script src="options.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,32 @@
|
||||
import browser from "webextension-polyfill";
|
||||
|
||||
const input = document.getElementById("apiKey") as HTMLInputElement;
|
||||
const saveBtn = document.getElementById("save") as HTMLButtonElement;
|
||||
const clearBtn = document.getElementById("clear") as HTMLButtonElement;
|
||||
const status = document.getElementById("status") as HTMLDivElement;
|
||||
|
||||
function flash(text: string) {
|
||||
status.textContent = text;
|
||||
setTimeout(() => { status.textContent = ""; }, 2000);
|
||||
}
|
||||
|
||||
// Load
|
||||
browser.storage.sync.get("apiKey").then((result) => {
|
||||
input.value = (result.apiKey as string) || "";
|
||||
});
|
||||
|
||||
// Save
|
||||
saveBtn.addEventListener("click", () => {
|
||||
const key = input.value.trim();
|
||||
if (key) {
|
||||
browser.storage.sync.set({ apiKey: key }).then(() => flash("Saved"));
|
||||
} else {
|
||||
browser.storage.sync.remove("apiKey").then(() => flash("Using default key"));
|
||||
}
|
||||
});
|
||||
|
||||
// Clear
|
||||
clearBtn.addEventListener("click", () => {
|
||||
input.value = "";
|
||||
browser.storage.sync.remove("apiKey").then(() => flash("Cleared"));
|
||||
});
|
||||
@@ -0,0 +1,18 @@
|
||||
/** YouTube video category ID to name mapping */
|
||||
export const CATEGORY_MAP: Record<string, string> = {
|
||||
"1": "Film & Animation",
|
||||
"2": "Autos & Vehicles",
|
||||
"10": "Music",
|
||||
"15": "Pets & Animals",
|
||||
"17": "Sports",
|
||||
"19": "Travel & Events",
|
||||
"20": "Gaming",
|
||||
"22": "People & Blogs",
|
||||
"23": "Comedy",
|
||||
"24": "Entertainment",
|
||||
"25": "News & Politics",
|
||||
"26": "Howto & Style",
|
||||
"27": "Education",
|
||||
"28": "Science & Technology",
|
||||
"29": "Nonprofits & Activism",
|
||||
};
|
||||
@@ -1,3 +1,7 @@
|
||||
import type { PlaylistData } from "../types/playlist";
|
||||
import type { PlaylistData, DetailUpdate } from "../types/playlist";
|
||||
|
||||
export type Message = { type: "PLAYLIST_EXTRACTED"; data: PlaylistData };
|
||||
export type Message =
|
||||
| { type: "PLAYLIST_EXTRACTED"; data: PlaylistData }
|
||||
| { type: "FETCH_VIDEO_DETAILS"; videoIds: string[] }
|
||||
| { type: "VIDEO_DETAILS_UPDATE"; updates: DetailUpdate[] }
|
||||
| { type: "VIDEO_DETAILS_ERROR"; error: string };
|
||||
|
||||
@@ -21,6 +21,12 @@ export interface PlaylistVideo {
|
||||
};
|
||||
isPlayable: boolean;
|
||||
isLive: boolean;
|
||||
/** Human-readable view count text */
|
||||
viewCountText: string | null;
|
||||
/** Publication date, e.g. "2019-01-15" */
|
||||
publishedAt: string | null;
|
||||
/** Video category, e.g. "Music", "Gaming" */
|
||||
category: string | null;
|
||||
/** Name of the collaborator who added this video (collaborative playlists only) */
|
||||
addedBy: string | null;
|
||||
/** Vote count / approvals (collaborative playlists only) */
|
||||
@@ -44,6 +50,13 @@ export interface PlaylistMetadata {
|
||||
privacy: "public" | "unlisted" | "private" | "unknown";
|
||||
}
|
||||
|
||||
export interface DetailUpdate {
|
||||
videoId: string;
|
||||
viewCountText: string | null;
|
||||
publishedAt: string | null;
|
||||
category: string | null;
|
||||
}
|
||||
|
||||
export interface PlaylistData {
|
||||
metadata: PlaylistMetadata;
|
||||
videos: PlaylistVideo[];
|
||||
|
||||
Reference in New Issue
Block a user