Compare commits
14
Commits
0.1.0
...
980bc54f33
| Author | SHA1 | Date | |
|---|---|---|---|
 Hare
|
980bc54f33 | ||
|
Hare
|
80d14f7a9d | ||
|
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`,
|
outfile: `${outdir}/injected/page-script.js`,
|
||||||
format: "iife",
|
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`);
|
cpSync(`manifest.${browser}.json`, `${outdir}/manifest.json`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
{
|
{
|
||||||
"manifest_version": 3,
|
"manifest_version": 3,
|
||||||
"name": "YT Playlist Features",
|
"name": "YT Playlist Features",
|
||||||
"version": "0.1.0",
|
"version": "0.2.0",
|
||||||
"description": "Extract and work with YouTube playlist data",
|
"description": "Extract and work with YouTube playlist data",
|
||||||
"permissions": [],
|
"permissions": ["storage"],
|
||||||
"background": {
|
"background": {
|
||||||
"service_worker": "background/service-worker.js"
|
"service_worker": "background/service-worker.js"
|
||||||
},
|
},
|
||||||
@@ -14,6 +14,13 @@
|
|||||||
"run_at": "document_idle"
|
"run_at": "document_idle"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"action": {
|
||||||
|
"default_popup": "options/options.html"
|
||||||
|
},
|
||||||
|
"options_ui": {
|
||||||
|
"page": "options/options.html",
|
||||||
|
"open_in_tab": false
|
||||||
|
},
|
||||||
"web_accessible_resources": [
|
"web_accessible_resources": [
|
||||||
{
|
{
|
||||||
"resources": ["injected/page-script.js"],
|
"resources": ["injected/page-script.js"],
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
{
|
{
|
||||||
"manifest_version": 3,
|
"manifest_version": 3,
|
||||||
"name": "YT Playlist Features",
|
"name": "YT Playlist Features",
|
||||||
"version": "0.1.0",
|
"version": "0.2.0",
|
||||||
"description": "Extract and work with YouTube playlist data",
|
"description": "Extract and work with YouTube playlist data",
|
||||||
"permissions": [],
|
"permissions": ["storage"],
|
||||||
"background": {
|
"background": {
|
||||||
"scripts": ["background/service-worker.js"]
|
"scripts": ["background/service-worker.js"]
|
||||||
},
|
},
|
||||||
@@ -14,6 +14,13 @@
|
|||||||
"run_at": "document_idle"
|
"run_at": "document_idle"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"action": {
|
||||||
|
"default_popup": "options/options.html"
|
||||||
|
},
|
||||||
|
"options_ui": {
|
||||||
|
"page": "options/options.html",
|
||||||
|
"open_in_tab": false
|
||||||
|
},
|
||||||
"web_accessible_resources": [
|
"web_accessible_resources": [
|
||||||
{
|
{
|
||||||
"resources": ["injected/page-script.js"],
|
"resources": ["injected/page-script.js"],
|
||||||
|
|||||||
Generated
+115
-115
@@ -1,25 +1,25 @@
|
|||||||
{
|
{
|
||||||
"name": "yt-playlist-features",
|
"name": "yt-playlist-features",
|
||||||
"version": "0.1.0",
|
"version": "0.1.1",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "yt-playlist-features",
|
"name": "yt-playlist-features",
|
||||||
"version": "0.1.0",
|
"version": "0.1.1",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"webextension-polyfill": "^0.12.0"
|
"webextension-polyfill": "^0.12.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/webextension-polyfill": "^0.12.1",
|
"@types/webextension-polyfill": "^0.12.5",
|
||||||
"esbuild": "^0.25.0",
|
"esbuild": "^0.28.0",
|
||||||
"typescript": "^5.7.0"
|
"typescript": "^6.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/aix-ppc64": {
|
"node_modules/@esbuild/aix-ppc64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
|
||||||
"integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
|
"integrity": "sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"ppc64"
|
"ppc64"
|
||||||
],
|
],
|
||||||
@@ -34,9 +34,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/android-arm": {
|
"node_modules/@esbuild/android-arm": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.0.tgz",
|
||||||
"integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
|
"integrity": "sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm"
|
"arm"
|
||||||
],
|
],
|
||||||
@@ -51,9 +51,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/android-arm64": {
|
"node_modules/@esbuild/android-arm64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.0.tgz",
|
||||||
"integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
|
"integrity": "sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -68,9 +68,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/android-x64": {
|
"node_modules/@esbuild/android-x64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.0.tgz",
|
||||||
"integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
|
"integrity": "sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -85,9 +85,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/darwin-arm64": {
|
"node_modules/@esbuild/darwin-arm64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.0.tgz",
|
||||||
"integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
|
"integrity": "sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -102,9 +102,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/darwin-x64": {
|
"node_modules/@esbuild/darwin-x64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.0.tgz",
|
||||||
"integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
|
"integrity": "sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -119,9 +119,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/freebsd-arm64": {
|
"node_modules/@esbuild/freebsd-arm64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.0.tgz",
|
||||||
"integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
|
"integrity": "sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -136,9 +136,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/freebsd-x64": {
|
"node_modules/@esbuild/freebsd-x64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.0.tgz",
|
||||||
"integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
|
"integrity": "sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -153,9 +153,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/linux-arm": {
|
"node_modules/@esbuild/linux-arm": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.0.tgz",
|
||||||
"integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
|
"integrity": "sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm"
|
"arm"
|
||||||
],
|
],
|
||||||
@@ -170,9 +170,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/linux-arm64": {
|
"node_modules/@esbuild/linux-arm64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.0.tgz",
|
||||||
"integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
|
"integrity": "sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -187,9 +187,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/linux-ia32": {
|
"node_modules/@esbuild/linux-ia32": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.0.tgz",
|
||||||
"integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
|
"integrity": "sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"ia32"
|
"ia32"
|
||||||
],
|
],
|
||||||
@@ -204,9 +204,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/linux-loong64": {
|
"node_modules/@esbuild/linux-loong64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.0.tgz",
|
||||||
"integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
|
"integrity": "sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"loong64"
|
"loong64"
|
||||||
],
|
],
|
||||||
@@ -221,9 +221,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/linux-mips64el": {
|
"node_modules/@esbuild/linux-mips64el": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.0.tgz",
|
||||||
"integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
|
"integrity": "sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"mips64el"
|
"mips64el"
|
||||||
],
|
],
|
||||||
@@ -238,9 +238,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/linux-ppc64": {
|
"node_modules/@esbuild/linux-ppc64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.0.tgz",
|
||||||
"integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
|
"integrity": "sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"ppc64"
|
"ppc64"
|
||||||
],
|
],
|
||||||
@@ -255,9 +255,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/linux-riscv64": {
|
"node_modules/@esbuild/linux-riscv64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.0.tgz",
|
||||||
"integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
|
"integrity": "sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"riscv64"
|
"riscv64"
|
||||||
],
|
],
|
||||||
@@ -272,9 +272,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/linux-s390x": {
|
"node_modules/@esbuild/linux-s390x": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.0.tgz",
|
||||||
"integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
|
"integrity": "sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"s390x"
|
"s390x"
|
||||||
],
|
],
|
||||||
@@ -289,9 +289,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/linux-x64": {
|
"node_modules/@esbuild/linux-x64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.0.tgz",
|
||||||
"integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
|
"integrity": "sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -306,9 +306,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/netbsd-arm64": {
|
"node_modules/@esbuild/netbsd-arm64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.0.tgz",
|
||||||
"integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
|
"integrity": "sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -323,9 +323,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/netbsd-x64": {
|
"node_modules/@esbuild/netbsd-x64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.0.tgz",
|
||||||
"integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
|
"integrity": "sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -340,9 +340,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/openbsd-arm64": {
|
"node_modules/@esbuild/openbsd-arm64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.0.tgz",
|
||||||
"integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
|
"integrity": "sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -357,9 +357,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/openbsd-x64": {
|
"node_modules/@esbuild/openbsd-x64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.0.tgz",
|
||||||
"integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
|
"integrity": "sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -374,9 +374,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/openharmony-arm64": {
|
"node_modules/@esbuild/openharmony-arm64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.0.tgz",
|
||||||
"integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
|
"integrity": "sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -391,9 +391,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/sunos-x64": {
|
"node_modules/@esbuild/sunos-x64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.0.tgz",
|
||||||
"integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
|
"integrity": "sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -408,9 +408,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/win32-arm64": {
|
"node_modules/@esbuild/win32-arm64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.0.tgz",
|
||||||
"integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
|
"integrity": "sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -425,9 +425,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/win32-ia32": {
|
"node_modules/@esbuild/win32-ia32": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.0.tgz",
|
||||||
"integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
|
"integrity": "sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"ia32"
|
"ia32"
|
||||||
],
|
],
|
||||||
@@ -442,9 +442,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/win32-x64": {
|
"node_modules/@esbuild/win32-x64": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.0.tgz",
|
||||||
"integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
|
"integrity": "sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -466,9 +466,9 @@
|
|||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/esbuild": {
|
"node_modules/esbuild": {
|
||||||
"version": "0.25.12",
|
"version": "0.28.0",
|
||||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
|
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.0.tgz",
|
||||||
"integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
|
"integrity": "sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
@@ -479,38 +479,38 @@
|
|||||||
"node": ">=18"
|
"node": ">=18"
|
||||||
},
|
},
|
||||||
"optionalDependencies": {
|
"optionalDependencies": {
|
||||||
"@esbuild/aix-ppc64": "0.25.12",
|
"@esbuild/aix-ppc64": "0.28.0",
|
||||||
"@esbuild/android-arm": "0.25.12",
|
"@esbuild/android-arm": "0.28.0",
|
||||||
"@esbuild/android-arm64": "0.25.12",
|
"@esbuild/android-arm64": "0.28.0",
|
||||||
"@esbuild/android-x64": "0.25.12",
|
"@esbuild/android-x64": "0.28.0",
|
||||||
"@esbuild/darwin-arm64": "0.25.12",
|
"@esbuild/darwin-arm64": "0.28.0",
|
||||||
"@esbuild/darwin-x64": "0.25.12",
|
"@esbuild/darwin-x64": "0.28.0",
|
||||||
"@esbuild/freebsd-arm64": "0.25.12",
|
"@esbuild/freebsd-arm64": "0.28.0",
|
||||||
"@esbuild/freebsd-x64": "0.25.12",
|
"@esbuild/freebsd-x64": "0.28.0",
|
||||||
"@esbuild/linux-arm": "0.25.12",
|
"@esbuild/linux-arm": "0.28.0",
|
||||||
"@esbuild/linux-arm64": "0.25.12",
|
"@esbuild/linux-arm64": "0.28.0",
|
||||||
"@esbuild/linux-ia32": "0.25.12",
|
"@esbuild/linux-ia32": "0.28.0",
|
||||||
"@esbuild/linux-loong64": "0.25.12",
|
"@esbuild/linux-loong64": "0.28.0",
|
||||||
"@esbuild/linux-mips64el": "0.25.12",
|
"@esbuild/linux-mips64el": "0.28.0",
|
||||||
"@esbuild/linux-ppc64": "0.25.12",
|
"@esbuild/linux-ppc64": "0.28.0",
|
||||||
"@esbuild/linux-riscv64": "0.25.12",
|
"@esbuild/linux-riscv64": "0.28.0",
|
||||||
"@esbuild/linux-s390x": "0.25.12",
|
"@esbuild/linux-s390x": "0.28.0",
|
||||||
"@esbuild/linux-x64": "0.25.12",
|
"@esbuild/linux-x64": "0.28.0",
|
||||||
"@esbuild/netbsd-arm64": "0.25.12",
|
"@esbuild/netbsd-arm64": "0.28.0",
|
||||||
"@esbuild/netbsd-x64": "0.25.12",
|
"@esbuild/netbsd-x64": "0.28.0",
|
||||||
"@esbuild/openbsd-arm64": "0.25.12",
|
"@esbuild/openbsd-arm64": "0.28.0",
|
||||||
"@esbuild/openbsd-x64": "0.25.12",
|
"@esbuild/openbsd-x64": "0.28.0",
|
||||||
"@esbuild/openharmony-arm64": "0.25.12",
|
"@esbuild/openharmony-arm64": "0.28.0",
|
||||||
"@esbuild/sunos-x64": "0.25.12",
|
"@esbuild/sunos-x64": "0.28.0",
|
||||||
"@esbuild/win32-arm64": "0.25.12",
|
"@esbuild/win32-arm64": "0.28.0",
|
||||||
"@esbuild/win32-ia32": "0.25.12",
|
"@esbuild/win32-ia32": "0.28.0",
|
||||||
"@esbuild/win32-x64": "0.25.12"
|
"@esbuild/win32-x64": "0.28.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/typescript": {
|
"node_modules/typescript": {
|
||||||
"version": "5.9.3",
|
"version": "6.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
|
"resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.2.tgz",
|
||||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
"integrity": "sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"bin": {
|
"bin": {
|
||||||
|
|||||||
+4
-4
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "yt-playlist-features",
|
"name": "yt-playlist-features",
|
||||||
"version": "0.1.0",
|
"version": "0.2.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -9,9 +9,9 @@
|
|||||||
"typecheck": "tsc --noEmit"
|
"typecheck": "tsc --noEmit"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/webextension-polyfill": "^0.12.1",
|
"@types/webextension-polyfill": "^0.12.5",
|
||||||
"esbuild": "^0.25.0",
|
"esbuild": "^0.28.0",
|
||||||
"typescript": "^5.7.0"
|
"typescript": "^6.0.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"webextension-polyfill": "^0.12.0"
|
"webextension-polyfill": "^0.12.0"
|
||||||
|
|||||||
@@ -1,19 +1,121 @@
|
|||||||
import browser from "webextension-polyfill";
|
import browser from "webextension-polyfill";
|
||||||
import type { Message } from "../shared/messages";
|
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,
|
||||||
|
likeCount: item.statistics?.likeCount
|
||||||
|
? parseInt(item.statistics.likeCount, 10)
|
||||||
|
: 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(
|
browser.runtime.onMessage.addListener(
|
||||||
async (message: unknown, _sender: browser.Runtime.MessageSender) => {
|
async (message: unknown, sender: browser.Runtime.MessageSender) => {
|
||||||
const msg = message as Message;
|
const msg = message as Message;
|
||||||
|
|
||||||
if (msg.type === "PLAYLIST_EXTRACTED") {
|
if (msg.type === "PLAYLIST_EXTRACTED") {
|
||||||
console.log(
|
console.log(
|
||||||
LOG_PREFIX,
|
LOG,
|
||||||
`Playlist: "${msg.data.metadata.title}" (${msg.data.extractedCount} videos)`,
|
`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,12 @@ function parseVideo(renderer: any): PlaylistVideo | null {
|
|||||||
(b: any) =>
|
(b: any) =>
|
||||||
b.metadataBadgeRenderer?.style === "BADGE_STYLE_TYPE_LIVE_NOW",
|
b.metadataBadgeRenderer?.style === "BADGE_STYLE_TYPE_LIVE_NOW",
|
||||||
) ?? false,
|
) ?? false,
|
||||||
|
viewCountText: null,
|
||||||
|
publishedAt: null,
|
||||||
|
category: null,
|
||||||
|
addedBy: null,
|
||||||
|
voteCount: null,
|
||||||
|
likeCount: null,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+69
-29
@@ -3,13 +3,44 @@ import { onPlaylistPageReady, getPlaylistId } from "./navigation";
|
|||||||
import { parseInitialData, buildPlaylistData } from "./extractor";
|
import { parseInitialData, buildPlaylistData } from "./extractor";
|
||||||
import type { PlaylistVideo } from "../types/playlist";
|
import type { PlaylistVideo } from "../types/playlist";
|
||||||
import type { Message } from "../shared/messages";
|
import type { Message } from "../shared/messages";
|
||||||
import { mountTable } from "./ui/lifecycle";
|
import { mountTable, appendToTable, setTableComplete, updateTableDetails } from "./ui/lifecycle";
|
||||||
|
|
||||||
const LOG = "[yt-playlist-features]";
|
const LOG = "[yt-playlist-features]";
|
||||||
|
|
||||||
let lastExtractedId: string | null = null;
|
let lastExtractedId: string | null = null;
|
||||||
let pageScriptInjected = false;
|
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,
|
||||||
|
likeCount: v.likeCount ?? null,
|
||||||
|
} satisfies PlaylistVideo;
|
||||||
|
}
|
||||||
|
|
||||||
function ensurePageScript(): void {
|
function ensurePageScript(): void {
|
||||||
if (pageScriptInjected) return;
|
if (pageScriptInjected) return;
|
||||||
const script = document.createElement("script");
|
const script = document.createElement("script");
|
||||||
@@ -31,6 +62,9 @@ function handlePlaylistData(event: Event): void {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Skip append messages — handled separately
|
||||||
|
if (payload.type === "append") return;
|
||||||
|
|
||||||
if (payload.error) {
|
if (payload.error) {
|
||||||
console.warn(LOG, "Page script error:", payload.error);
|
console.warn(LOG, "Page script error:", payload.error);
|
||||||
return;
|
return;
|
||||||
@@ -47,35 +81,9 @@ function handlePlaylistData(event: Event): void {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Convert DOM-extracted videos to PlaylistVideo[]
|
// Convert DOM-extracted videos to PlaylistVideo[]
|
||||||
const videos: PlaylistVideo[] = domVideos.map((v: any) => {
|
const videos: PlaylistVideo[] = domVideos.map(mapRawVideo);
|
||||||
const bylineRun = v.shortBylineText?.runs?.[0];
|
|
||||||
const bylineEndpoint = bylineRun?.navigationEndpoint?.browseEndpoint;
|
|
||||||
|
|
||||||
return {
|
const playlistData = buildPlaylistData(metadata, videos, payload.isComplete !== false);
|
||||||
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);
|
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
LOG,
|
LOG,
|
||||||
@@ -90,8 +98,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
|
// Listen for data from the injected page script
|
||||||
document.addEventListener("__yt_playlist_ext_data", handlePlaylistData);
|
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
|
// Detect playlist page navigation and trigger extraction
|
||||||
onPlaylistPageReady(() => {
|
onPlaylistPageReady(() => {
|
||||||
|
|||||||
+67
-1
@@ -3,13 +3,35 @@ type MessageKey =
|
|||||||
| "colTitle"
|
| "colTitle"
|
||||||
| "colChannel"
|
| "colChannel"
|
||||||
| "colDuration"
|
| "colDuration"
|
||||||
|
| "colViews"
|
||||||
|
| "colPublished"
|
||||||
|
| "colCategory"
|
||||||
|
| "colLikes"
|
||||||
| "colAddedBy"
|
| "colAddedBy"
|
||||||
| "colVotes"
|
| "colVotes"
|
||||||
| "filterTitle"
|
| "filterTitle"
|
||||||
| "filterChannel"
|
| "filterChannel"
|
||||||
| "filterAddedBy"
|
| "filterAddedBy"
|
||||||
|
| "filterCategory"
|
||||||
| "badgeLive"
|
| "badgeLive"
|
||||||
| "headerVideos";
|
| "headerVideos"
|
||||||
|
| "headerLoading"
|
||||||
|
| "fetchViews"
|
||||||
|
| "fetchViewsProgress"
|
||||||
|
| "fetchViewsDone"
|
||||||
|
| "colSettings"
|
||||||
|
| "colSettingsReset"
|
||||||
|
| "statsDuration"
|
||||||
|
| "statsChannels"
|
||||||
|
| "statsPlayable"
|
||||||
|
| "statsTotalViews"
|
||||||
|
| "statsDetail"
|
||||||
|
| "statsDetailChannelRank"
|
||||||
|
| "statsDetailAddedByRank"
|
||||||
|
| "statsDetailCategoryBreak"
|
||||||
|
| "statsDetailDurationAvg"
|
||||||
|
| "statsDetailDurationMedian"
|
||||||
|
| "statsDetailVideos";
|
||||||
|
|
||||||
const messages: Record<string, Record<MessageKey, string>> = {
|
const messages: Record<string, Record<MessageKey, string>> = {
|
||||||
ja: {
|
ja: {
|
||||||
@@ -17,26 +39,70 @@ const messages: Record<string, Record<MessageKey, string>> = {
|
|||||||
colTitle: "タイトル",
|
colTitle: "タイトル",
|
||||||
colChannel: "チャンネル",
|
colChannel: "チャンネル",
|
||||||
colDuration: "長さ",
|
colDuration: "長さ",
|
||||||
|
colViews: "再生数",
|
||||||
|
colPublished: "公開日",
|
||||||
|
colCategory: "カテゴリ",
|
||||||
|
colLikes: "高評価",
|
||||||
colAddedBy: "追加者",
|
colAddedBy: "追加者",
|
||||||
colVotes: "投票",
|
colVotes: "投票",
|
||||||
filterTitle: "タイトル検索...",
|
filterTitle: "タイトル検索...",
|
||||||
filterChannel: "チャンネル...",
|
filterChannel: "チャンネル...",
|
||||||
filterAddedBy: "追加者...",
|
filterAddedBy: "追加者...",
|
||||||
|
filterCategory: "カテゴリ...",
|
||||||
badgeLive: "ライブ",
|
badgeLive: "ライブ",
|
||||||
headerVideos: "本の動画",
|
headerVideos: "本の動画",
|
||||||
|
headerLoading: "読み込み中…",
|
||||||
|
fetchViews: "全件詳細を取得",
|
||||||
|
fetchViewsProgress: "取得中…",
|
||||||
|
fetchViewsDone: "取得完了",
|
||||||
|
colSettings: "表示",
|
||||||
|
colSettingsReset: "リセット",
|
||||||
|
statsDuration: "合計時間",
|
||||||
|
statsChannels: "チャンネル",
|
||||||
|
statsPlayable: "再生可能",
|
||||||
|
statsTotalViews: "総再生数",
|
||||||
|
statsDetail: "詳細",
|
||||||
|
statsDetailChannelRank: "チャンネル別",
|
||||||
|
statsDetailAddedByRank: "追加者別",
|
||||||
|
statsDetailCategoryBreak: "カテゴリ別",
|
||||||
|
statsDetailDurationAvg: "平均再生時間",
|
||||||
|
statsDetailDurationMedian: "中央値",
|
||||||
|
statsDetailVideos: "本",
|
||||||
},
|
},
|
||||||
en: {
|
en: {
|
||||||
colIndex: "#",
|
colIndex: "#",
|
||||||
colTitle: "Title",
|
colTitle: "Title",
|
||||||
colChannel: "Channel",
|
colChannel: "Channel",
|
||||||
colDuration: "Duration",
|
colDuration: "Duration",
|
||||||
|
colViews: "Views",
|
||||||
|
colPublished: "Published",
|
||||||
|
colCategory: "Category",
|
||||||
|
colLikes: "Likes",
|
||||||
colAddedBy: "Added by",
|
colAddedBy: "Added by",
|
||||||
colVotes: "Votes",
|
colVotes: "Votes",
|
||||||
filterTitle: "Search title...",
|
filterTitle: "Search title...",
|
||||||
filterChannel: "Channel...",
|
filterChannel: "Channel...",
|
||||||
filterAddedBy: "Added by...",
|
filterAddedBy: "Added by...",
|
||||||
|
filterCategory: "Category...",
|
||||||
badgeLive: "LIVE",
|
badgeLive: "LIVE",
|
||||||
headerVideos: "videos",
|
headerVideos: "videos",
|
||||||
|
headerLoading: "loading…",
|
||||||
|
fetchViews: "Fetch all details",
|
||||||
|
fetchViewsProgress: "Fetching…",
|
||||||
|
fetchViewsDone: "Done",
|
||||||
|
colSettings: "View",
|
||||||
|
colSettingsReset: "Reset",
|
||||||
|
statsDuration: "Total",
|
||||||
|
statsChannels: "Channels",
|
||||||
|
statsPlayable: "Playable",
|
||||||
|
statsTotalViews: "Total views",
|
||||||
|
statsDetail: "Details",
|
||||||
|
statsDetailChannelRank: "By channel",
|
||||||
|
statsDetailAddedByRank: "By contributor",
|
||||||
|
statsDetailCategoryBreak: "By category",
|
||||||
|
statsDetailDurationAvg: "Avg. duration",
|
||||||
|
statsDetailDurationMedian: "Median",
|
||||||
|
statsDetailVideos: "videos",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
+63
-17
@@ -1,21 +1,19 @@
|
|||||||
import type { PlaylistData } from "../../types/playlist";
|
import type { PlaylistData, PlaylistVideo } from "../../types/playlist";
|
||||||
import { injectStyles } from "./styles";
|
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";
|
const CONTAINER_ID = "ytpf-playlist-table";
|
||||||
|
|
||||||
export function mountTable(data: PlaylistData): void {
|
let currentHandle: PlaylistTableHandle | null = null;
|
||||||
unmountTable();
|
|
||||||
injectStyles();
|
|
||||||
|
|
||||||
const el = renderPlaylistTable(data);
|
function findAnchor(): { parent: Element; before: Element | null } | null {
|
||||||
el.id = CONTAINER_ID;
|
// Primary: top of ytd-item-section-renderer (before any header/content)
|
||||||
|
const itemSection = document.querySelector(
|
||||||
// Primary: before ytd-playlist-video-list-renderer (sibling)
|
"ytd-section-list-renderer ytd-item-section-renderer",
|
||||||
const videoList = document.querySelector("ytd-playlist-video-list-renderer");
|
);
|
||||||
if (videoList?.parentElement) {
|
if (itemSection) {
|
||||||
videoList.parentElement.insertBefore(el, videoList);
|
return { parent: itemSection, before: itemSection.firstElementChild };
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fallback: end of ytd-section-list-renderer > #contents
|
// Fallback: end of ytd-section-list-renderer > #contents
|
||||||
@@ -23,8 +21,7 @@ export function mountTable(data: PlaylistData): void {
|
|||||||
"ytd-section-list-renderer > #contents",
|
"ytd-section-list-renderer > #contents",
|
||||||
);
|
);
|
||||||
if (sectionContents) {
|
if (sectionContents) {
|
||||||
sectionContents.appendChild(el);
|
return { parent: sectionContents, before: null };
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Last resort: #primary
|
// Last resort: #primary
|
||||||
@@ -32,14 +29,63 @@ export function mountTable(data: PlaylistData): void {
|
|||||||
"ytd-two-column-browse-results-renderer > #primary",
|
"ytd-two-column-browse-results-renderer > #primary",
|
||||||
);
|
);
|
||||||
if (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;
|
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 {
|
export function unmountTable(): void {
|
||||||
|
if (pendingObserver) {
|
||||||
|
pendingObserver.disconnect();
|
||||||
|
pendingObserver = null;
|
||||||
|
}
|
||||||
|
currentHandle = null;
|
||||||
document.getElementById(CONTAINER_ID)?.remove();
|
document.getElementById(CONTAINER_ID)?.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -49,6 +49,208 @@ html[dark] .ytpf-toggle {
|
|||||||
transform: rotate(-90deg);
|
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-detail-btn {
|
||||||
|
padding: 2px 8px;
|
||||||
|
border: 1px solid var(--yt-spec-10-percent-layer, rgba(0,0,0,0.2));
|
||||||
|
border-radius: 12px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--yt-spec-text-secondary, #606060);
|
||||||
|
font-size: 11px;
|
||||||
|
font-family: "Roboto", "Arial", sans-serif;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dark] .ytpf-stats-detail-btn {
|
||||||
|
border-color: rgba(255,255,255,0.2);
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-stats-detail-btn:hover {
|
||||||
|
background: var(--yt-spec-badge-chip-background, #f2f2f2);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dark] .ytpf-stats-detail-btn:hover {
|
||||||
|
background: #3e3e3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-stats-spacer {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-popup {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(0,0,0,0.1);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px 24px;
|
||||||
|
min-width: 360px;
|
||||||
|
max-width: 560px;
|
||||||
|
max-height: 70vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
z-index: 3000;
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
||||||
|
font-family: "Roboto", "Arial", sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--yt-spec-text-primary, #0f0f0f);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dark] .ytpf-detail-popup {
|
||||||
|
background: #212121;
|
||||||
|
border-color: rgba(255,255,255,0.1);
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
||||||
|
color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-popup-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0,0,0,0.4);
|
||||||
|
z-index: 2999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-popup h3 {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-section {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-section:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-section-title {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--yt-spec-text-secondary, #606060);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dark] .ytpf-detail-section-title {
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-bar-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-bar-label {
|
||||||
|
width: 140px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-bar-track {
|
||||||
|
flex: 1;
|
||||||
|
height: 14px;
|
||||||
|
background: var(--yt-spec-10-percent-layer, rgba(0,0,0,0.06));
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dark] .ytpf-detail-bar-track {
|
||||||
|
background: rgba(255,255,255,0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--yt-spec-call-to-action, #065fd4);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dark] .ytpf-detail-bar-fill {
|
||||||
|
background: #3ea6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-bar-count {
|
||||||
|
width: 48px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
text-align: right;
|
||||||
|
font-family: "Roboto Mono", monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--yt-spec-text-secondary, #606060);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dark] .ytpf-detail-bar-count {
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-kv {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-kv-item {
|
||||||
|
color: var(--yt-spec-text-secondary, #606060);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dark] .ytpf-detail-kv-item {
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ytpf-detail-kv-value {
|
||||||
|
font-family: "Roboto Mono", monospace;
|
||||||
|
color: var(--yt-spec-text-primary, #0f0f0f);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dark] .ytpf-detail-kv-value {
|
||||||
|
color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
.ytpf-filters {
|
.ytpf-filters {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@@ -242,6 +444,7 @@ html[dark] .ytpf-filter-count {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ytpf-th {
|
.ytpf-th {
|
||||||
|
position: relative;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -307,8 +510,186 @@ html[dark] .ytpf-tr:hover {
|
|||||||
.ytpf-col-title { width: auto; }
|
.ytpf-col-title { width: auto; }
|
||||||
.ytpf-col-channel { width: 180px; }
|
.ytpf-col-channel { width: 180px; }
|
||||||
.ytpf-col-duration { width: 80px; font-family: "Roboto Mono", monospace; }
|
.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-likes { width: 90px; text-align: right; font-family: "Roboto Mono", monospace; }
|
||||||
.ytpf-col-addedby { width: 140px; }
|
.ytpf-col-addedby { width: 140px; }
|
||||||
.ytpf-col-votes { width: 60px; text-align: center; font-family: "Roboto Mono", monospace; }
|
.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 {
|
.ytpf-tr--unplayable {
|
||||||
opacity: 0.45;
|
opacity: 0.45;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,37 +1,87 @@
|
|||||||
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";
|
import { t } from "./i18n";
|
||||||
|
|
||||||
type SortKey = "index" | "title" | "channel" | "duration" | "addedBy" | "votes";
|
type SortKey = "index" | "title" | "channel" | "duration" | "views" | "likes" | "published" | "category" | "addedBy" | "votes";
|
||||||
type SortDir = "asc" | "desc";
|
type SortDir = "asc" | "desc";
|
||||||
|
|
||||||
interface Column {
|
interface Column {
|
||||||
label: string;
|
label: string;
|
||||||
cls: string;
|
cls: string;
|
||||||
key: SortKey;
|
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 [
|
return [
|
||||||
{ label: t("colIndex"), cls: "ytpf-col-index", key: "index" },
|
{ label: t("colIndex"), cls: "ytpf-col-index", key: "index", defaultWidth: 5 },
|
||||||
{ label: t("colTitle"), cls: "ytpf-col-title", key: "title" },
|
{ label: t("colTitle"), cls: "ytpf-col-title", key: "title", defaultWidth: 40 },
|
||||||
{ label: t("colChannel"), cls: "ytpf-col-channel", key: "channel" },
|
{ label: t("colChannel"), cls: "ytpf-col-channel", key: "channel", defaultWidth: 20 },
|
||||||
{ label: t("colDuration"), cls: "ytpf-col-duration", key: "duration" },
|
{ label: t("colDuration"), cls: "ytpf-col-duration", key: "duration", defaultWidth: 8 },
|
||||||
{ label: t("colAddedBy"), cls: "ytpf-col-addedby", key: "addedBy", collab: true },
|
{ label: t("colViews"), cls: "ytpf-col-views", key: "views", defaultWidth: 12 },
|
||||||
{ label: t("colVotes"), cls: "ytpf-col-votes", key: "votes", collab: true },
|
{ label: t("colLikes"), cls: "ytpf-col-likes", key: "likes", detail: true, defaultWidth: 9 },
|
||||||
|
{ 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 {
|
interface TagInput {
|
||||||
container: HTMLElement;
|
container: HTMLElement;
|
||||||
getTags(): string[];
|
getTags(): string[];
|
||||||
|
addCandidates(names: string[]): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
function createTagInput(
|
function createTagInput(
|
||||||
placeholder: string,
|
placeholder: string,
|
||||||
candidates: string[],
|
initialCandidates: string[],
|
||||||
onChange: () => void,
|
onChange: () => void,
|
||||||
): TagInput {
|
): TagInput {
|
||||||
|
const candidates = [...initialCandidates];
|
||||||
const tags: string[] = [];
|
const tags: string[] = [];
|
||||||
|
|
||||||
const container = document.createElement("div");
|
const container = document.createElement("div");
|
||||||
@@ -185,9 +235,30 @@ function createTagInput(
|
|||||||
container.addEventListener("click", () => input.focus());
|
container.addEventListener("click", () => input.focus());
|
||||||
|
|
||||||
container.append(input, dropdown);
|
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) {
|
function compareFn(key: SortKey, dir: SortDir) {
|
||||||
const m = dir === "asc" ? 1 : -1;
|
const m = dir === "asc" ? 1 : -1;
|
||||||
return (a: PlaylistVideo, b: PlaylistVideo): number => {
|
return (a: PlaylistVideo, b: PlaylistVideo): number => {
|
||||||
@@ -200,6 +271,14 @@ function compareFn(key: SortKey, dir: SortDir) {
|
|||||||
return a.channel.name.localeCompare(b.channel.name) * m;
|
return a.channel.name.localeCompare(b.channel.name) * m;
|
||||||
case "duration":
|
case "duration":
|
||||||
return ((a.durationSeconds ?? -1) - (b.durationSeconds ?? -1)) * m;
|
return ((a.durationSeconds ?? -1) - (b.durationSeconds ?? -1)) * m;
|
||||||
|
case "views":
|
||||||
|
return (parseViewCount(a.viewCountText) - parseViewCount(b.viewCountText)) * m;
|
||||||
|
case "likes":
|
||||||
|
return ((a.likeCount ?? -1) - (b.likeCount ?? -1)) * m;
|
||||||
|
case "published":
|
||||||
|
return (a.publishedAt ?? "").localeCompare(b.publishedAt ?? "") * m;
|
||||||
|
case "category":
|
||||||
|
return (a.category ?? "").localeCompare(b.category ?? "") * m;
|
||||||
case "addedBy":
|
case "addedBy":
|
||||||
return (a.addedBy ?? "").localeCompare(b.addedBy ?? "") * m;
|
return (a.addedBy ?? "").localeCompare(b.addedBy ?? "") * m;
|
||||||
case "votes":
|
case "votes":
|
||||||
@@ -208,81 +287,98 @@ 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 "likes":
|
||||||
|
td.textContent = video.likeCount != null ? video.likeCount.toLocaleString() : "--";
|
||||||
|
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(
|
function buildRow(
|
||||||
video: PlaylistVideo,
|
video: PlaylistVideo,
|
||||||
playlistId: string,
|
playlistId: string,
|
||||||
isCollab: boolean,
|
visibleColumns: Column[],
|
||||||
): HTMLTableRowElement {
|
): HTMLTableRowElement {
|
||||||
const tr = document.createElement("tr");
|
const tr = document.createElement("tr");
|
||||||
tr.className = "ytpf-tr";
|
tr.className = "ytpf-tr";
|
||||||
if (!video.isPlayable) tr.classList.add("ytpf-tr--unplayable");
|
if (!video.isPlayable) tr.classList.add("ytpf-tr--unplayable");
|
||||||
|
|
||||||
// Index
|
for (const col of visibleColumns) {
|
||||||
const tdIndex = document.createElement("td");
|
tr.appendChild(buildCell(video, col, playlistId));
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return tr;
|
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(
|
const isCollab = data.videos.some(
|
||||||
(v) => v.addedBy != null || v.voteCount != null,
|
(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");
|
const wrapper = document.createElement("div");
|
||||||
wrapper.className = "ytpf-wrapper";
|
wrapper.className = "ytpf-wrapper";
|
||||||
@@ -291,23 +387,337 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||||||
const header = document.createElement("div");
|
const header = document.createElement("div");
|
||||||
header.className = "ytpf-header";
|
header.className = "ytpf-header";
|
||||||
|
|
||||||
|
let extractedCount = data.extractedCount;
|
||||||
|
let complete = data.isComplete;
|
||||||
|
|
||||||
const titleSpan = document.createElement("span");
|
const titleSpan = document.createElement("span");
|
||||||
titleSpan.className = "ytpf-header-title";
|
titleSpan.className = "ytpf-header-title";
|
||||||
titleSpan.textContent = `${data.metadata.title} — ${data.extractedCount} ${t("headerVideos")}`;
|
|
||||||
|
|
||||||
const metaSpan = document.createElement("span");
|
function updateHeader() {
|
||||||
metaSpan.className = "ytpf-header-meta";
|
const status = complete ? "" : ` (${t("headerLoading")})`;
|
||||||
if (data.metadata.totalDurationText) {
|
titleSpan.textContent = `${data.metadata.title} — ${extractedCount} ${t("headerVideos")}${status}`;
|
||||||
metaSpan.textContent = data.metadata.totalDurationText;
|
|
||||||
}
|
}
|
||||||
|
updateHeader();
|
||||||
|
|
||||||
const toggle = document.createElement("span");
|
const toggle = document.createElement("span");
|
||||||
toggle.className = "ytpf-toggle";
|
toggle.className = "ytpf-toggle";
|
||||||
toggle.textContent = "\u25BC";
|
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);
|
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 = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stats detail button + popup
|
||||||
|
const detailBtn = document.createElement("button");
|
||||||
|
detailBtn.className = "ytpf-stats-detail-btn";
|
||||||
|
detailBtn.textContent = t("statsDetail");
|
||||||
|
|
||||||
|
function countBy<T>(arr: T[], keyFn: (item: T) => string | null): [string, number][] {
|
||||||
|
const map = new Map<string, number>();
|
||||||
|
for (const item of arr) {
|
||||||
|
const key = keyFn(item);
|
||||||
|
if (key != null) map.set(key, (map.get(key) ?? 0) + 1);
|
||||||
|
}
|
||||||
|
return [...map.entries()].sort((a, b) => b[1] - a[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildDetailPopup(): { backdrop: HTMLElement; popup: HTMLElement } {
|
||||||
|
const backdrop = document.createElement("div");
|
||||||
|
backdrop.className = "ytpf-detail-popup-backdrop";
|
||||||
|
|
||||||
|
const popup = document.createElement("div");
|
||||||
|
popup.className = "ytpf-detail-popup";
|
||||||
|
|
||||||
|
const title = document.createElement("h3");
|
||||||
|
title.textContent = `${data.metadata.title} — ${t("statsDetail")}`;
|
||||||
|
popup.appendChild(title);
|
||||||
|
|
||||||
|
// Duration stats
|
||||||
|
const durations = videos
|
||||||
|
.map((v) => v.durationSeconds)
|
||||||
|
.filter((d): d is number => d != null && d > 0)
|
||||||
|
.sort((a, b) => a - b);
|
||||||
|
|
||||||
|
if (durations.length > 0) {
|
||||||
|
const avg = Math.round(durations.reduce((a, b) => a + b, 0) / durations.length);
|
||||||
|
const median = durations[Math.floor(durations.length / 2)];
|
||||||
|
|
||||||
|
const section = document.createElement("div");
|
||||||
|
section.className = "ytpf-detail-section";
|
||||||
|
const kv = document.createElement("div");
|
||||||
|
kv.className = "ytpf-detail-kv";
|
||||||
|
|
||||||
|
function addKV(label: string, value: string) {
|
||||||
|
const item = document.createElement("span");
|
||||||
|
item.className = "ytpf-detail-kv-item";
|
||||||
|
item.textContent = `${label}: `;
|
||||||
|
const val = document.createElement("span");
|
||||||
|
val.className = "ytpf-detail-kv-value";
|
||||||
|
val.textContent = value;
|
||||||
|
item.appendChild(val);
|
||||||
|
kv.appendChild(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
addKV(t("statsDetailDurationAvg"), formatDuration(avg));
|
||||||
|
addKV(t("statsDetailDurationMedian"), formatDuration(median));
|
||||||
|
section.appendChild(kv);
|
||||||
|
popup.appendChild(section);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Channel ranking
|
||||||
|
const channelCounts = countBy(videos, (v) => v.channel.name);
|
||||||
|
if (channelCounts.length > 0) {
|
||||||
|
popup.appendChild(buildBarSection(
|
||||||
|
t("statsDetailChannelRank"),
|
||||||
|
channelCounts.slice(0, 20),
|
||||||
|
channelCounts[0][1],
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Added-by ranking (collab)
|
||||||
|
if (isCollab) {
|
||||||
|
const addedByCounts = countBy(videos, (v) => v.addedBy);
|
||||||
|
if (addedByCounts.length > 0) {
|
||||||
|
popup.appendChild(buildBarSection(
|
||||||
|
t("statsDetailAddedByRank"),
|
||||||
|
addedByCounts,
|
||||||
|
addedByCounts[0][1],
|
||||||
|
));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Category breakdown (after detail fetch)
|
||||||
|
const categoryCounts = countBy(videos, (v) => v.category);
|
||||||
|
if (categoryCounts.length > 0) {
|
||||||
|
popup.appendChild(buildBarSection(
|
||||||
|
t("statsDetailCategoryBreak"),
|
||||||
|
categoryCounts,
|
||||||
|
categoryCounts[0][1],
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
return { backdrop, popup };
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildBarSection(title: string, entries: [string, number][], maxCount: number): HTMLElement {
|
||||||
|
const section = document.createElement("div");
|
||||||
|
section.className = "ytpf-detail-section";
|
||||||
|
|
||||||
|
const heading = document.createElement("div");
|
||||||
|
heading.className = "ytpf-detail-section-title";
|
||||||
|
heading.textContent = title;
|
||||||
|
section.appendChild(heading);
|
||||||
|
|
||||||
|
for (const [name, count] of entries) {
|
||||||
|
const row = document.createElement("div");
|
||||||
|
row.className = "ytpf-detail-bar-row";
|
||||||
|
|
||||||
|
const label = document.createElement("span");
|
||||||
|
label.className = "ytpf-detail-bar-label";
|
||||||
|
label.textContent = name;
|
||||||
|
label.title = name;
|
||||||
|
|
||||||
|
const track = document.createElement("div");
|
||||||
|
track.className = "ytpf-detail-bar-track";
|
||||||
|
const fill = document.createElement("div");
|
||||||
|
fill.className = "ytpf-detail-bar-fill";
|
||||||
|
fill.style.width = `${(count / maxCount) * 100}%`;
|
||||||
|
track.appendChild(fill);
|
||||||
|
|
||||||
|
const countSpan = document.createElement("span");
|
||||||
|
countSpan.className = "ytpf-detail-bar-count";
|
||||||
|
countSpan.textContent = String(count);
|
||||||
|
|
||||||
|
row.append(label, track, countSpan);
|
||||||
|
section.appendChild(row);
|
||||||
|
}
|
||||||
|
|
||||||
|
return section;
|
||||||
|
}
|
||||||
|
|
||||||
|
let detailPopupOpen = false;
|
||||||
|
|
||||||
|
detailBtn.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (detailPopupOpen) return;
|
||||||
|
detailPopupOpen = true;
|
||||||
|
|
||||||
|
const { backdrop, popup } = buildDetailPopup();
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
backdrop.remove();
|
||||||
|
popup.remove();
|
||||||
|
detailPopupOpen = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
backdrop.addEventListener("click", close);
|
||||||
|
document.body.appendChild(backdrop);
|
||||||
|
document.body.appendChild(popup);
|
||||||
|
});
|
||||||
|
|
||||||
|
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, detailBtn, statsSpacer, fetchBtn);
|
||||||
|
wrapper.appendChild(statsBar);
|
||||||
|
|
||||||
// Filter bar
|
// Filter bar
|
||||||
const filters = document.createElement("div");
|
const filters = document.createElement("div");
|
||||||
filters.className = "ytpf-filters";
|
filters.className = "ytpf-filters";
|
||||||
@@ -319,12 +729,26 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||||||
titleInput.placeholder = t("filterTitle");
|
titleInput.placeholder = t("filterTitle");
|
||||||
filters.appendChild(titleInput);
|
filters.appendChild(titleInput);
|
||||||
|
|
||||||
// Channel tag input
|
|
||||||
const channelNames = [...new Set(data.videos.map((v) => v.channel.name))].sort();
|
const channelNames = [...new Set(data.videos.map((v) => v.channel.name))].sort();
|
||||||
const channelTagInput = createTagInput(t("filterChannel"), channelNames, () => applyFilters());
|
const channelTagInput = createTagInput(t("filterChannel"), channelNames, () => applyFilters());
|
||||||
filters.appendChild(channelTagInput.container);
|
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;
|
let addedByTagInput: TagInput | null = null;
|
||||||
if (isCollab) {
|
if (isCollab) {
|
||||||
const addedByNames = [...new Set(
|
const addedByNames = [...new Set(
|
||||||
@@ -338,6 +762,8 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||||||
filterCount.className = "ytpf-filter-count";
|
filterCount.className = "ytpf-filter-count";
|
||||||
filters.appendChild(filterCount);
|
filters.appendChild(filterCount);
|
||||||
|
|
||||||
|
filters.appendChild(menuAnchor);
|
||||||
|
|
||||||
wrapper.appendChild(filters);
|
wrapper.appendChild(filters);
|
||||||
|
|
||||||
// Body (table container)
|
// Body (table container)
|
||||||
@@ -347,12 +773,67 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||||||
const table = document.createElement("table");
|
const table = document.createElement("table");
|
||||||
table.className = "ytpf-table";
|
table.className = "ytpf-table";
|
||||||
|
|
||||||
|
// Sort state (declared early for buildThead → updateSortIndicators)
|
||||||
|
let sortKey: SortKey | null = null;
|
||||||
|
let sortDir: SortDir = "asc";
|
||||||
|
|
||||||
// Thead
|
// Thead
|
||||||
const thead = document.createElement("thead");
|
const thead = document.createElement("thead");
|
||||||
const headRow = document.createElement("tr");
|
const headRow = document.createElement("tr");
|
||||||
const thElements: HTMLTableCellElement[] = [];
|
let thElements: HTMLTableCellElement[] = [];
|
||||||
|
|
||||||
for (const col of columns) {
|
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");
|
const th = document.createElement("th");
|
||||||
th.className = `ytpf-th ytpf-th--sortable ${col.cls}`;
|
th.className = `ytpf-th ytpf-th--sortable ${col.cls}`;
|
||||||
th.dataset.sortKey = col.key;
|
th.dataset.sortKey = col.key;
|
||||||
@@ -360,6 +841,12 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||||||
thElements.push(th);
|
thElements.push(th);
|
||||||
headRow.appendChild(th);
|
headRow.appendChild(th);
|
||||||
}
|
}
|
||||||
|
applyColumnWidths(thElements, visibleColumns, columnPrefs);
|
||||||
|
attachResizeHandles();
|
||||||
|
updateSortIndicators();
|
||||||
|
}
|
||||||
|
|
||||||
|
buildThead();
|
||||||
thead.appendChild(headRow);
|
thead.appendChild(headRow);
|
||||||
table.appendChild(thead);
|
table.appendChild(thead);
|
||||||
|
|
||||||
@@ -371,11 +858,13 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||||||
function getFilteredVideos(): PlaylistVideo[] {
|
function getFilteredVideos(): PlaylistVideo[] {
|
||||||
const titleQuery = titleInput.value.toLowerCase();
|
const titleQuery = titleInput.value.toLowerCase();
|
||||||
const channelTags = channelTagInput.getTags();
|
const channelTags = channelTagInput.getTags();
|
||||||
|
const categoryTags = categoryTagInput?.getTags() ?? [];
|
||||||
const addedByTags = addedByTagInput?.getTags() ?? [];
|
const addedByTags = addedByTagInput?.getTags() ?? [];
|
||||||
|
|
||||||
return videos.filter((v) => {
|
return videos.filter((v) => {
|
||||||
if (titleQuery && !v.title.toLowerCase().includes(titleQuery)) return false;
|
if (titleQuery && !v.title.toLowerCase().includes(titleQuery)) return false;
|
||||||
if (channelTags.length > 0 && !channelTags.includes(v.channel.name)) 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;
|
if (addedByTags.length > 0 && (!v.addedBy || !addedByTags.includes(v.addedBy))) return false;
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
@@ -385,7 +874,7 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||||||
const filtered = getFilteredVideos();
|
const filtered = getFilteredVideos();
|
||||||
tbody.textContent = "";
|
tbody.textContent = "";
|
||||||
for (const video of filtered) {
|
for (const video of filtered) {
|
||||||
tbody.appendChild(buildRow(video, playlistId, isCollab));
|
tbody.appendChild(buildRow(video, playlistId, visibleColumns));
|
||||||
}
|
}
|
||||||
filterCount.textContent = filtered.length < videos.length
|
filterCount.textContent = filtered.length < videos.length
|
||||||
? `${filtered.length} / ${videos.length}`
|
? `${filtered.length} / ${videos.length}`
|
||||||
@@ -399,10 +888,7 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||||||
titleInput.addEventListener("input", applyFilters);
|
titleInput.addEventListener("input", applyFilters);
|
||||||
|
|
||||||
renderRows();
|
renderRows();
|
||||||
|
updateStats();
|
||||||
// Sort state
|
|
||||||
let sortKey: SortKey | null = null;
|
|
||||||
let sortDir: SortDir = "asc";
|
|
||||||
|
|
||||||
function updateSortIndicators() {
|
function updateSortIndicators() {
|
||||||
for (const th of thElements) {
|
for (const th of thElements) {
|
||||||
@@ -434,6 +920,14 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||||||
renderRows();
|
renderRows();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Column visibility/width change handler
|
||||||
|
function onColumnsChanged() {
|
||||||
|
visibleColumns = getVisibleColumns(availableColumns, columnPrefs);
|
||||||
|
buildThead();
|
||||||
|
renderRows();
|
||||||
|
saveColumnPrefs(columnPrefs);
|
||||||
|
}
|
||||||
|
|
||||||
table.appendChild(tbody);
|
table.appendChild(tbody);
|
||||||
body.appendChild(table);
|
body.appendChild(table);
|
||||||
wrapper.appendChild(body);
|
wrapper.appendChild(body);
|
||||||
@@ -441,9 +935,89 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||||||
// Toggle collapse
|
// Toggle collapse
|
||||||
header.addEventListener("click", () => {
|
header.addEventListener("click", () => {
|
||||||
body.classList.toggle("ytpf-body--hidden");
|
body.classList.toggle("ytpf-body--hidden");
|
||||||
|
statsBar.classList.toggle("ytpf-stats--hidden");
|
||||||
filters.classList.toggle("ytpf-filters--hidden");
|
filters.classList.toggle("ytpf-filters--hidden");
|
||||||
toggle.classList.toggle("ytpf-toggle--collapsed");
|
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;
|
||||||
|
v.likeCount = u.likeCount ?? v.likeCount;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
w.__yt_playlist_ext_injected = true;
|
||||||
|
|
||||||
let extractingUrl: string | null = null;
|
let extractingUrl: string | null = null;
|
||||||
|
let isInitialLoad = true;
|
||||||
let collabCache: Map<string, string> = new Map();
|
let collabCache: Map<string, string> = new Map();
|
||||||
let collabCachePlaylistId: string | null = null;
|
let collabCachePlaylistId: string | null = null;
|
||||||
|
|
||||||
@@ -64,12 +65,13 @@
|
|||||||
const { cfg, apiKey, baseContext } = getConfig();
|
const { cfg, apiKey, baseContext } = getConfig();
|
||||||
const authHeaders = buildAuthHeaders(cfg, baseContext);
|
const authHeaders = buildAuthHeaders(cfg, baseContext);
|
||||||
|
|
||||||
// Try ytInitialData first (works on initial page load)
|
// Try ytInitialData only on initial page load.
|
||||||
let initialData = w.ytInitialData;
|
// 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;
|
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) {
|
if (!videoList) {
|
||||||
const playlistId = getPlaylistId();
|
const playlistId = getPlaylistId();
|
||||||
if (!playlistId) {
|
if (!playlistId) {
|
||||||
@@ -94,13 +96,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const allRenderers: any[] = [];
|
const firstPageRenderers: any[] = [];
|
||||||
let continuation: string | null = null;
|
let continuation: string | null = null;
|
||||||
let continuationClickTracking: string | null = null;
|
let continuationClickTracking: string | null = null;
|
||||||
|
|
||||||
for (const item of videoList) {
|
for (const item of videoList) {
|
||||||
if (item.playlistVideoRenderer) {
|
if (item.playlistVideoRenderer) {
|
||||||
allRenderers.push(item.playlistVideoRenderer);
|
firstPageRenderers.push(item.playlistVideoRenderer);
|
||||||
}
|
}
|
||||||
if (item.continuationItemRenderer) {
|
if (item.continuationItemRenderer) {
|
||||||
const extracted = extractContinuationInfo(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;
|
let page = 1;
|
||||||
while (continuation && page < 50) {
|
while (continuation && page < 50) {
|
||||||
try {
|
try {
|
||||||
@@ -132,12 +184,13 @@
|
|||||||
continuation = null;
|
continuation = null;
|
||||||
continuationClickTracking = null;
|
continuationClickTracking = null;
|
||||||
|
|
||||||
|
const pageRenderers: any[] = [];
|
||||||
for (const action of data.onResponseReceivedActions ?? []) {
|
for (const action of data.onResponseReceivedActions ?? []) {
|
||||||
const items = action?.appendContinuationItemsAction?.continuationItems;
|
const items = action?.appendContinuationItemsAction?.continuationItems;
|
||||||
if (!items) continue;
|
if (!items) continue;
|
||||||
for (const item of items) {
|
for (const item of items) {
|
||||||
if (item.playlistVideoRenderer) {
|
if (item.playlistVideoRenderer) {
|
||||||
allRenderers.push(item.playlistVideoRenderer);
|
pageRenderers.push(item.playlistVideoRenderer);
|
||||||
}
|
}
|
||||||
if (item.continuationItemRenderer) {
|
if (item.continuationItemRenderer) {
|
||||||
const extracted = extractContinuationInfo(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++;
|
page++;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(LOG, `Continuation page ${page} failed:`, 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;
|
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 ---
|
// --- 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,10 +21,18 @@ export interface PlaylistVideo {
|
|||||||
};
|
};
|
||||||
isPlayable: boolean;
|
isPlayable: boolean;
|
||||||
isLive: 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) */
|
/** Name of the collaborator who added this video (collaborative playlists only) */
|
||||||
addedBy: string | null;
|
addedBy: string | null;
|
||||||
/** Vote count / approvals (collaborative playlists only) */
|
/** Vote count / approvals (collaborative playlists only) */
|
||||||
voteCount: number | null;
|
voteCount: number | null;
|
||||||
|
/** Like count from Data API */
|
||||||
|
likeCount: number | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface PlaylistMetadata {
|
export interface PlaylistMetadata {
|
||||||
@@ -44,6 +52,14 @@ export interface PlaylistMetadata {
|
|||||||
privacy: "public" | "unlisted" | "private" | "unknown";
|
privacy: "public" | "unlisted" | "private" | "unknown";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface DetailUpdate {
|
||||||
|
videoId: string;
|
||||||
|
viewCountText: string | null;
|
||||||
|
publishedAt: string | null;
|
||||||
|
category: string | null;
|
||||||
|
likeCount: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
export interface PlaylistData {
|
export interface PlaylistData {
|
||||||
metadata: PlaylistMetadata;
|
metadata: PlaylistMetadata;
|
||||||
videos: PlaylistVideo[];
|
videos: PlaylistVideo[];
|
||||||
|
|||||||
Reference in New Issue
Block a user