mirror of
https://github.com/FranP-code/classify_saved_videos_yt.git
synced 2025-10-13 00:32:25 +00:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
1a6938cebc |
Binary file not shown.
|
Before Width: | Height: | Size: 456 KiB After Width: | Height: | Size: 376 KiB |
@@ -10,7 +10,5 @@ export default defineConfig({
|
|||||||
plugins: [tailwindcss()]
|
plugins: [tailwindcss()]
|
||||||
},
|
},
|
||||||
|
|
||||||
integrations: [react({
|
integrations: [react()]
|
||||||
experimentalDisableStreaming: true,
|
|
||||||
})]
|
|
||||||
});
|
});
|
||||||
@@ -11,10 +11,8 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/mdx": "^4.3.0",
|
"@astrojs/mdx": "^4.3.0",
|
||||||
"@astrojs/react": "^4.3.0",
|
"@astrojs/react": "^4.3.0",
|
||||||
"@base-ui-components/react": "1.0.0-beta.1",
|
|
||||||
"@radix-ui/react-slot": "^1.2.3",
|
"@radix-ui/react-slot": "^1.2.3",
|
||||||
"@tailwindcss/vite": "^4.1.3",
|
"@tailwindcss/vite": "^4.1.3",
|
||||||
"@tanstack/react-virtual": "^3.13.12",
|
|
||||||
"@types/canvas-confetti": "^1.9.0",
|
"@types/canvas-confetti": "^1.9.0",
|
||||||
"@types/react": "^19.1.8",
|
"@types/react": "^19.1.8",
|
||||||
"@types/react-dom": "^19.1.6",
|
"@types/react-dom": "^19.1.6",
|
||||||
@@ -22,10 +20,7 @@
|
|||||||
"canvas-confetti": "^1.9.3",
|
"canvas-confetti": "^1.9.3",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"date-fns": "^4.1.0",
|
|
||||||
"lucide-react": "^0.525.0",
|
"lucide-react": "^0.525.0",
|
||||||
"next-themes": "^0.4.6",
|
|
||||||
"papaparse": "^5.5.3",
|
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-dom": "^19.1.0",
|
"react-dom": "^19.1.0",
|
||||||
"tailwind-merge": "^3.3.1",
|
"tailwind-merge": "^3.3.1",
|
||||||
|
|||||||
134
web/pnpm-lock.yaml
generated
134
web/pnpm-lock.yaml
generated
@@ -14,18 +14,12 @@ importers:
|
|||||||
'@astrojs/react':
|
'@astrojs/react':
|
||||||
specifier: ^4.3.0
|
specifier: ^4.3.0
|
||||||
version: 4.3.0(@types/node@24.0.13)(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(jiti@2.4.2)(lightningcss@1.30.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
version: 4.3.0(@types/node@24.0.13)(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(jiti@2.4.2)(lightningcss@1.30.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||||
'@base-ui-components/react':
|
|
||||||
specifier: 1.0.0-beta.1
|
|
||||||
version: 1.0.0-beta.1(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
|
||||||
'@radix-ui/react-slot':
|
'@radix-ui/react-slot':
|
||||||
specifier: ^1.2.3
|
specifier: ^1.2.3
|
||||||
version: 1.2.3(@types/react@19.1.8)(react@19.1.0)
|
version: 1.2.3(@types/react@19.1.8)(react@19.1.0)
|
||||||
'@tailwindcss/vite':
|
'@tailwindcss/vite':
|
||||||
specifier: ^4.1.3
|
specifier: ^4.1.3
|
||||||
version: 4.1.11(vite@6.3.5(@types/node@24.0.13)(jiti@2.4.2)(lightningcss@1.30.1))
|
version: 4.1.11(vite@6.3.5(@types/node@24.0.13)(jiti@2.4.2)(lightningcss@1.30.1))
|
||||||
'@tanstack/react-virtual':
|
|
||||||
specifier: ^3.13.12
|
|
||||||
version: 3.13.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
|
||||||
'@types/canvas-confetti':
|
'@types/canvas-confetti':
|
||||||
specifier: ^1.9.0
|
specifier: ^1.9.0
|
||||||
version: 1.9.0
|
version: 1.9.0
|
||||||
@@ -47,18 +41,9 @@ importers:
|
|||||||
clsx:
|
clsx:
|
||||||
specifier: ^2.1.1
|
specifier: ^2.1.1
|
||||||
version: 2.1.1
|
version: 2.1.1
|
||||||
date-fns:
|
|
||||||
specifier: ^4.1.0
|
|
||||||
version: 4.1.0
|
|
||||||
lucide-react:
|
lucide-react:
|
||||||
specifier: ^0.525.0
|
specifier: ^0.525.0
|
||||||
version: 0.525.0(react@19.1.0)
|
version: 0.525.0(react@19.1.0)
|
||||||
next-themes:
|
|
||||||
specifier: ^0.4.6
|
|
||||||
version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
|
||||||
papaparse:
|
|
||||||
specifier: ^5.5.3
|
|
||||||
version: 5.5.3
|
|
||||||
react:
|
react:
|
||||||
specifier: ^19.1.0
|
specifier: ^19.1.0
|
||||||
version: 19.1.0
|
version: 19.1.0
|
||||||
@@ -185,10 +170,6 @@ packages:
|
|||||||
peerDependencies:
|
peerDependencies:
|
||||||
'@babel/core': ^7.0.0-0
|
'@babel/core': ^7.0.0-0
|
||||||
|
|
||||||
'@babel/runtime@7.27.6':
|
|
||||||
resolution: {integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==}
|
|
||||||
engines: {node: '>=6.9.0'}
|
|
||||||
|
|
||||||
'@babel/template@7.27.2':
|
'@babel/template@7.27.2':
|
||||||
resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
|
resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
|
||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
@@ -201,17 +182,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-jYnje+JyZG5YThjHiF28oT4SIZLnYOcSBb6+SDaFIyzDVSkXQmQQYclJ2R+YxcdmK0AX6x1E5OQNtuh3jHDrUg==}
|
resolution: {integrity: sha512-jYnje+JyZG5YThjHiF28oT4SIZLnYOcSBb6+SDaFIyzDVSkXQmQQYclJ2R+YxcdmK0AX6x1E5OQNtuh3jHDrUg==}
|
||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
|
|
||||||
'@base-ui-components/react@1.0.0-beta.1':
|
|
||||||
resolution: {integrity: sha512-7zmGiz4/+HKnv99lWftItoSMqnj2PdSvt2krh0/GP+Rj0xK0NMnFI/gIVvP7CB2G+k0JPUrRWXjXa3y08oiakg==}
|
|
||||||
engines: {node: '>=14.0.0'}
|
|
||||||
peerDependencies:
|
|
||||||
'@types/react': ^17 || ^18 || ^19
|
|
||||||
react: ^17 || ^18 || ^19
|
|
||||||
react-dom: ^17 || ^18 || ^19
|
|
||||||
peerDependenciesMeta:
|
|
||||||
'@types/react':
|
|
||||||
optional: true
|
|
||||||
|
|
||||||
'@capsizecss/unpack@2.4.0':
|
'@capsizecss/unpack@2.4.0':
|
||||||
resolution: {integrity: sha512-GrSU71meACqcmIUxPYOJvGKF0yryjN/L1aCuE9DViCTJI7bfkjgYDPD1zbNDcINJwSSP6UaBZY9GAbYDO7re0Q==}
|
resolution: {integrity: sha512-GrSU71meACqcmIUxPYOJvGKF0yryjN/L1aCuE9DViCTJI7bfkjgYDPD1zbNDcINJwSSP6UaBZY9GAbYDO7re0Q==}
|
||||||
|
|
||||||
@@ -374,21 +344,6 @@ packages:
|
|||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [win32]
|
os: [win32]
|
||||||
|
|
||||||
'@floating-ui/core@1.7.2':
|
|
||||||
resolution: {integrity: sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==}
|
|
||||||
|
|
||||||
'@floating-ui/dom@1.7.2':
|
|
||||||
resolution: {integrity: sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==}
|
|
||||||
|
|
||||||
'@floating-ui/react-dom@2.1.4':
|
|
||||||
resolution: {integrity: sha512-JbbpPhp38UmXDDAu60RJmbeme37Jbgsm7NrHGgzYYFKmblzRUh6Pa641dII6LsjwF4XlScDrde2UAzDo/b9KPw==}
|
|
||||||
peerDependencies:
|
|
||||||
react: '>=16.8.0'
|
|
||||||
react-dom: '>=16.8.0'
|
|
||||||
|
|
||||||
'@floating-ui/utils@0.2.10':
|
|
||||||
resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
|
|
||||||
|
|
||||||
'@img/sharp-darwin-arm64@0.33.5':
|
'@img/sharp-darwin-arm64@0.33.5':
|
||||||
resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
|
resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
|
||||||
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
|
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
|
||||||
@@ -761,15 +716,6 @@ packages:
|
|||||||
peerDependencies:
|
peerDependencies:
|
||||||
vite: ^5.2.0 || ^6 || ^7
|
vite: ^5.2.0 || ^6 || ^7
|
||||||
|
|
||||||
'@tanstack/react-virtual@3.13.12':
|
|
||||||
resolution: {integrity: sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==}
|
|
||||||
peerDependencies:
|
|
||||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
|
||||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
|
||||||
|
|
||||||
'@tanstack/virtual-core@3.13.12':
|
|
||||||
resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
|
|
||||||
|
|
||||||
'@types/babel__core@7.20.5':
|
'@types/babel__core@7.20.5':
|
||||||
resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
|
resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
|
||||||
|
|
||||||
@@ -1021,9 +967,6 @@ packages:
|
|||||||
csstype@3.1.3:
|
csstype@3.1.3:
|
||||||
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
|
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
|
||||||
|
|
||||||
date-fns@4.1.0:
|
|
||||||
resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
|
|
||||||
|
|
||||||
debug@4.4.1:
|
debug@4.4.1:
|
||||||
resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
|
resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
|
||||||
engines: {node: '>=6.0'}
|
engines: {node: '>=6.0'}
|
||||||
@@ -1585,12 +1528,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==}
|
resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
|
|
||||||
next-themes@0.4.6:
|
|
||||||
resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
|
|
||||||
peerDependencies:
|
|
||||||
react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
|
|
||||||
react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
|
|
||||||
|
|
||||||
nlcst-to-string@4.0.0:
|
nlcst-to-string@4.0.0:
|
||||||
resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==}
|
resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==}
|
||||||
|
|
||||||
@@ -1646,9 +1583,6 @@ packages:
|
|||||||
pako@0.2.9:
|
pako@0.2.9:
|
||||||
resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
|
resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
|
||||||
|
|
||||||
papaparse@5.5.3:
|
|
||||||
resolution: {integrity: sha512-5QvjGxYVjxO59MGU2lHVYpRWBBtKHnlIAcSe1uNFCkkptUh63NFRj0FJQm7nR67puEruUci/ZkjmEFrjCAyP4A==}
|
|
||||||
|
|
||||||
parse-entities@4.0.2:
|
parse-entities@4.0.2:
|
||||||
resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
|
resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
|
||||||
|
|
||||||
@@ -1762,9 +1696,6 @@ packages:
|
|||||||
remark-stringify@11.0.0:
|
remark-stringify@11.0.0:
|
||||||
resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
|
resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
|
||||||
|
|
||||||
reselect@5.1.1:
|
|
||||||
resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
|
|
||||||
|
|
||||||
restructure@3.0.2:
|
restructure@3.0.2:
|
||||||
resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==}
|
resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==}
|
||||||
|
|
||||||
@@ -1850,9 +1781,6 @@ packages:
|
|||||||
style-to-object@1.0.9:
|
style-to-object@1.0.9:
|
||||||
resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==}
|
resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==}
|
||||||
|
|
||||||
tabbable@6.2.0:
|
|
||||||
resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
|
|
||||||
|
|
||||||
tailwind-merge@3.3.1:
|
tailwind-merge@3.3.1:
|
||||||
resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
|
resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
|
||||||
|
|
||||||
@@ -2030,11 +1958,6 @@ packages:
|
|||||||
peerDependencies:
|
peerDependencies:
|
||||||
browserslist: '>= 4.21.0'
|
browserslist: '>= 4.21.0'
|
||||||
|
|
||||||
use-sync-external-store@1.5.0:
|
|
||||||
resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
|
|
||||||
peerDependencies:
|
|
||||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
|
||||||
|
|
||||||
vfile-location@5.0.3:
|
vfile-location@5.0.3:
|
||||||
resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
|
resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
|
||||||
|
|
||||||
@@ -2340,8 +2263,6 @@ snapshots:
|
|||||||
'@babel/core': 7.28.0
|
'@babel/core': 7.28.0
|
||||||
'@babel/helper-plugin-utils': 7.27.1
|
'@babel/helper-plugin-utils': 7.27.1
|
||||||
|
|
||||||
'@babel/runtime@7.27.6': {}
|
|
||||||
|
|
||||||
'@babel/template@7.27.2':
|
'@babel/template@7.27.2':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/code-frame': 7.27.1
|
'@babel/code-frame': 7.27.1
|
||||||
@@ -2365,19 +2286,6 @@ snapshots:
|
|||||||
'@babel/helper-string-parser': 7.27.1
|
'@babel/helper-string-parser': 7.27.1
|
||||||
'@babel/helper-validator-identifier': 7.27.1
|
'@babel/helper-validator-identifier': 7.27.1
|
||||||
|
|
||||||
'@base-ui-components/react@1.0.0-beta.1(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
|
||||||
dependencies:
|
|
||||||
'@babel/runtime': 7.27.6
|
|
||||||
'@floating-ui/react-dom': 2.1.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
|
||||||
'@floating-ui/utils': 0.2.10
|
|
||||||
react: 19.1.0
|
|
||||||
react-dom: 19.1.0(react@19.1.0)
|
|
||||||
reselect: 5.1.1
|
|
||||||
tabbable: 6.2.0
|
|
||||||
use-sync-external-store: 1.5.0(react@19.1.0)
|
|
||||||
optionalDependencies:
|
|
||||||
'@types/react': 19.1.8
|
|
||||||
|
|
||||||
'@capsizecss/unpack@2.4.0':
|
'@capsizecss/unpack@2.4.0':
|
||||||
dependencies:
|
dependencies:
|
||||||
blob-to-buffer: 1.2.9
|
blob-to-buffer: 1.2.9
|
||||||
@@ -2469,23 +2377,6 @@ snapshots:
|
|||||||
'@esbuild/win32-x64@0.25.6':
|
'@esbuild/win32-x64@0.25.6':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@floating-ui/core@1.7.2':
|
|
||||||
dependencies:
|
|
||||||
'@floating-ui/utils': 0.2.10
|
|
||||||
|
|
||||||
'@floating-ui/dom@1.7.2':
|
|
||||||
dependencies:
|
|
||||||
'@floating-ui/core': 1.7.2
|
|
||||||
'@floating-ui/utils': 0.2.10
|
|
||||||
|
|
||||||
'@floating-ui/react-dom@2.1.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
|
||||||
dependencies:
|
|
||||||
'@floating-ui/dom': 1.7.2
|
|
||||||
react: 19.1.0
|
|
||||||
react-dom: 19.1.0(react@19.1.0)
|
|
||||||
|
|
||||||
'@floating-ui/utils@0.2.10': {}
|
|
||||||
|
|
||||||
'@img/sharp-darwin-arm64@0.33.5':
|
'@img/sharp-darwin-arm64@0.33.5':
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
'@img/sharp-libvips-darwin-arm64': 1.0.4
|
'@img/sharp-libvips-darwin-arm64': 1.0.4
|
||||||
@@ -2802,14 +2693,6 @@ snapshots:
|
|||||||
tailwindcss: 4.1.11
|
tailwindcss: 4.1.11
|
||||||
vite: 6.3.5(@types/node@24.0.13)(jiti@2.4.2)(lightningcss@1.30.1)
|
vite: 6.3.5(@types/node@24.0.13)(jiti@2.4.2)(lightningcss@1.30.1)
|
||||||
|
|
||||||
'@tanstack/react-virtual@3.13.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
|
||||||
dependencies:
|
|
||||||
'@tanstack/virtual-core': 3.13.12
|
|
||||||
react: 19.1.0
|
|
||||||
react-dom: 19.1.0(react@19.1.0)
|
|
||||||
|
|
||||||
'@tanstack/virtual-core@3.13.12': {}
|
|
||||||
|
|
||||||
'@types/babel__core@7.20.5':
|
'@types/babel__core@7.20.5':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/parser': 7.28.0
|
'@babel/parser': 7.28.0
|
||||||
@@ -3141,8 +3024,6 @@ snapshots:
|
|||||||
|
|
||||||
csstype@3.1.3: {}
|
csstype@3.1.3: {}
|
||||||
|
|
||||||
date-fns@4.1.0: {}
|
|
||||||
|
|
||||||
debug@4.4.1:
|
debug@4.4.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
ms: 2.1.3
|
ms: 2.1.3
|
||||||
@@ -4032,11 +3913,6 @@ snapshots:
|
|||||||
|
|
||||||
neotraverse@0.6.18: {}
|
neotraverse@0.6.18: {}
|
||||||
|
|
||||||
next-themes@0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
|
|
||||||
dependencies:
|
|
||||||
react: 19.1.0
|
|
||||||
react-dom: 19.1.0(react@19.1.0)
|
|
||||||
|
|
||||||
nlcst-to-string@4.0.0:
|
nlcst-to-string@4.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/nlcst': 2.0.3
|
'@types/nlcst': 2.0.3
|
||||||
@@ -4084,8 +3960,6 @@ snapshots:
|
|||||||
|
|
||||||
pako@0.2.9: {}
|
pako@0.2.9: {}
|
||||||
|
|
||||||
papaparse@5.5.3: {}
|
|
||||||
|
|
||||||
parse-entities@4.0.2:
|
parse-entities@4.0.2:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/unist': 2.0.11
|
'@types/unist': 2.0.11
|
||||||
@@ -4266,8 +4140,6 @@ snapshots:
|
|||||||
mdast-util-to-markdown: 2.1.2
|
mdast-util-to-markdown: 2.1.2
|
||||||
unified: 11.0.5
|
unified: 11.0.5
|
||||||
|
|
||||||
reselect@5.1.1: {}
|
|
||||||
|
|
||||||
restructure@3.0.2: {}
|
restructure@3.0.2: {}
|
||||||
|
|
||||||
retext-latin@4.0.0:
|
retext-latin@4.0.0:
|
||||||
@@ -4413,8 +4285,6 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
inline-style-parser: 0.2.4
|
inline-style-parser: 0.2.4
|
||||||
|
|
||||||
tabbable@6.2.0: {}
|
|
||||||
|
|
||||||
tailwind-merge@3.3.1: {}
|
tailwind-merge@3.3.1: {}
|
||||||
|
|
||||||
tailwindcss@4.1.11: {}
|
tailwindcss@4.1.11: {}
|
||||||
@@ -4554,10 +4424,6 @@ snapshots:
|
|||||||
escalade: 3.2.0
|
escalade: 3.2.0
|
||||||
picocolors: 1.1.1
|
picocolors: 1.1.1
|
||||||
|
|
||||||
use-sync-external-store@1.5.0(react@19.1.0):
|
|
||||||
dependencies:
|
|
||||||
react: 19.1.0
|
|
||||||
|
|
||||||
vfile-location@5.0.3:
|
vfile-location@5.0.3:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/unist': 3.0.3
|
'@types/unist': 3.0.3
|
||||||
|
|||||||
@@ -1,9 +1 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128"><path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z"/><style>path{fill:#000}@media (prefers-color-scheme:dark){path{fill:#fff}}</style></svg>
|
||||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
|
||||||
<style>
|
|
||||||
path { fill: #000; }
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
path { fill: #FFF; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 749 B After Width: | Height: | Size: 679 B |
@@ -1,129 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Input } from './ui/input';
|
|
||||||
import { Select } from './ui/select';
|
|
||||||
import { Button } from './ui/button';
|
|
||||||
import { Badge } from './ui/badge';
|
|
||||||
import type { VideoData } from '../types/video';
|
|
||||||
import { getUniqueValues } from '../utils/search';
|
|
||||||
|
|
||||||
interface SearchAndFilterProps {
|
|
||||||
data: VideoData[];
|
|
||||||
searchTerm: string;
|
|
||||||
onSearchChange: (term: string) => void;
|
|
||||||
filters: {
|
|
||||||
classification: string;
|
|
||||||
language: string;
|
|
||||||
playlist_name: string;
|
|
||||||
};
|
|
||||||
onFilterChange: (filters: any) => void;
|
|
||||||
totalResults: number;
|
|
||||||
filteredResults: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function SearchAndFilter({
|
|
||||||
data,
|
|
||||||
searchTerm,
|
|
||||||
onSearchChange,
|
|
||||||
filters,
|
|
||||||
onFilterChange,
|
|
||||||
totalResults,
|
|
||||||
filteredResults
|
|
||||||
}: SearchAndFilterProps) {
|
|
||||||
const classifications = getUniqueValues(data, 'classification');
|
|
||||||
const languages = getUniqueValues(data, 'language');
|
|
||||||
const playlists = getUniqueValues(data, 'playlist_name');
|
|
||||||
|
|
||||||
const clearFilters = () => {
|
|
||||||
onSearchChange('');
|
|
||||||
onFilterChange({
|
|
||||||
classification: 'all',
|
|
||||||
language: 'all',
|
|
||||||
playlist_name: 'all'
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const activeFiltersCount = Object.values(filters).filter(value => value !== 'all').length + (searchTerm ? 1 : 0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4 p-6 bg-card border rounded-lg">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<h2 className="text-lg font-semibold">Search & Filter</h2>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
{filteredResults} of {totalResults} videos
|
|
||||||
{activeFiltersCount > 0 && (
|
|
||||||
<Badge variant="secondary" className="ml-2">
|
|
||||||
{activeFiltersCount} filter{activeFiltersCount !== 1 ? 's' : ''} active
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{activeFiltersCount > 0 && (
|
|
||||||
<Button variant="outline" size="sm" onClick={clearFilters}>
|
|
||||||
Clear All
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
{/* Search */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium">Search</label>
|
|
||||||
<Input
|
|
||||||
placeholder="Search videos, channels, tags..."
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => onSearchChange(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Classification Filter */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium">Classification</label>
|
|
||||||
<Select
|
|
||||||
value={filters.classification}
|
|
||||||
onChange={(e) => onFilterChange({ ...filters, classification: e.target.value })}
|
|
||||||
>
|
|
||||||
<option value="all">All Classifications</option>
|
|
||||||
{classifications.map((classification) => (
|
|
||||||
<option key={classification} value={classification}>
|
|
||||||
{classification}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Language Filter */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium">Language</label>
|
|
||||||
<Select
|
|
||||||
value={filters.language}
|
|
||||||
onChange={(e) => onFilterChange({ ...filters, language: e.target.value })}
|
|
||||||
>
|
|
||||||
<option value="all">All Languages</option>
|
|
||||||
{languages.map((language) => (
|
|
||||||
<option key={language} value={language}>
|
|
||||||
{language}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Playlist Filter */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium">Playlist</label>
|
|
||||||
<Select
|
|
||||||
value={filters.playlist_name}
|
|
||||||
onChange={(e) => onFilterChange({ ...filters, playlist_name: e.target.value })}
|
|
||||||
>
|
|
||||||
<option value="all">All Playlists</option>
|
|
||||||
{playlists.map((playlist) => (
|
|
||||||
<option key={playlist} value={playlist}>
|
|
||||||
{playlist}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Badge } from './ui/badge';
|
|
||||||
import type { VideoData } from '../types/video';
|
|
||||||
import { getUniqueValues } from '../utils/search';
|
|
||||||
|
|
||||||
interface StatsOverviewProps {
|
|
||||||
data: VideoData[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function StatsOverview({ data }: StatsOverviewProps) {
|
|
||||||
const totalVideos = data.length;
|
|
||||||
const totalDuration = data.reduce((sum, video) => sum + video.video_length_seconds, 0);
|
|
||||||
const uniqueChannels = getUniqueValues(data, 'channel_name').length;
|
|
||||||
const uniqueClassifications = getUniqueValues(data, 'classification').length;
|
|
||||||
const uniqueLanguages = getUniqueValues(data, 'language').length;
|
|
||||||
|
|
||||||
const formatTotalDuration = (seconds: number) => {
|
|
||||||
const hours = Math.floor(seconds / 3600);
|
|
||||||
const minutes = Math.floor((seconds % 3600) / 60);
|
|
||||||
return `${hours}h ${minutes}m`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const stats = [
|
|
||||||
{ label: 'Total Videos', value: totalVideos.toLocaleString() },
|
|
||||||
{ label: 'Total Duration', value: formatTotalDuration(totalDuration) },
|
|
||||||
{ label: 'Channels', value: uniqueChannels },
|
|
||||||
{ label: 'Categories', value: uniqueClassifications },
|
|
||||||
{ label: 'Languages', value: uniqueLanguages },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
||||||
{stats.map((stat) => (
|
|
||||||
<div key={stat.label} className="text-center p-4 bg-card border rounded-lg">
|
|
||||||
<div className="text-2xl font-bold text-primary">{stat.value}</div>
|
|
||||||
<div className="text-sm text-muted-foreground">{stat.label}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
import React, { createContext, useContext, useEffect, useState } from 'react'
|
|
||||||
|
|
||||||
type Theme = 'dark' | 'light' | 'system'
|
|
||||||
|
|
||||||
type ThemeProviderProps = {
|
|
||||||
children: React.ReactNode
|
|
||||||
defaultTheme?: Theme
|
|
||||||
storageKey?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
type ThemeProviderState = {
|
|
||||||
theme: Theme
|
|
||||||
setTheme: (theme: Theme) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const initialState: ThemeProviderState = {
|
|
||||||
theme: 'system',
|
|
||||||
setTheme: () => null,
|
|
||||||
}
|
|
||||||
|
|
||||||
const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
|
|
||||||
|
|
||||||
export function ThemeProvider({
|
|
||||||
children,
|
|
||||||
defaultTheme = 'system',
|
|
||||||
storageKey = 'vite-ui-theme',
|
|
||||||
...props
|
|
||||||
}: ThemeProviderProps) {
|
|
||||||
const [theme, setTheme] = useState<Theme>(
|
|
||||||
() => (localStorage ? localStorage.getItem(storageKey) as Theme : undefined) || defaultTheme
|
|
||||||
)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const root = window.document.documentElement
|
|
||||||
|
|
||||||
root.classList.remove('light', 'dark')
|
|
||||||
|
|
||||||
if (theme === 'system') {
|
|
||||||
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
|
|
||||||
.matches
|
|
||||||
? 'dark'
|
|
||||||
: 'light'
|
|
||||||
|
|
||||||
root.classList.add(systemTheme)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
root.classList.add(theme)
|
|
||||||
}, [theme])
|
|
||||||
|
|
||||||
const value = {
|
|
||||||
theme,
|
|
||||||
setTheme: (theme: Theme) => {
|
|
||||||
if (localStorage) {
|
|
||||||
localStorage.setItem(storageKey, theme)
|
|
||||||
}
|
|
||||||
setTheme(theme)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ThemeProviderContext.Provider {...props} value={value}>
|
|
||||||
{children}
|
|
||||||
</ThemeProviderContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useTheme = () => {
|
|
||||||
const context = useContext(ThemeProviderContext)
|
|
||||||
|
|
||||||
if (context === undefined)
|
|
||||||
throw new Error('useTheme must be used within a ThemeProvider')
|
|
||||||
|
|
||||||
return context
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { Moon, Sun } from 'lucide-react'
|
|
||||||
import { Button } from './ui/button'
|
|
||||||
import { useTheme } from './ThemeProvider'
|
|
||||||
|
|
||||||
export function ThemeToggle() {
|
|
||||||
const { theme, setTheme } = useTheme()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
|
|
||||||
className="relative"
|
|
||||||
>
|
|
||||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
||||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
||||||
<span className="sr-only">Toggle theme</span>
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,136 +0,0 @@
|
|||||||
import React, { useState, useEffect, useMemo } from 'react';
|
|
||||||
import { VirtualTable } from './VirtualTable';
|
|
||||||
import { SearchAndFilter } from './SearchAndFilter';
|
|
||||||
import { StatsOverview } from './StatsOverview';
|
|
||||||
import { Button } from './ui/button';
|
|
||||||
import { ThemeProvider } from './ThemeProvider';
|
|
||||||
import { ThemeToggle } from './ThemeToggle';
|
|
||||||
import type { VideoData } from '../types/video';
|
|
||||||
import { searchVideos, filterVideos } from '../utils/search';
|
|
||||||
|
|
||||||
interface ApiResponse {
|
|
||||||
videos?: VideoData[];
|
|
||||||
error?: string;
|
|
||||||
message?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function VideoClassifierApp({ videos }: { videos: VideoData[] }) {
|
|
||||||
const [searchTerm, setSearchTerm] = useState('');
|
|
||||||
const [filters, setFilters] = useState({
|
|
||||||
classification: 'all',
|
|
||||||
language: 'all',
|
|
||||||
playlist_name: 'all'
|
|
||||||
});
|
|
||||||
|
|
||||||
// Filter and search data
|
|
||||||
const filteredData = useMemo(() => {
|
|
||||||
let result = videos;
|
|
||||||
|
|
||||||
// Apply filters
|
|
||||||
result = filterVideos(result, filters);
|
|
||||||
|
|
||||||
// Apply search
|
|
||||||
result = searchVideos(result, searchTerm);
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}, [videos, searchTerm, filters]);
|
|
||||||
|
|
||||||
if (!videos) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center p-6">
|
|
||||||
<div className="max-w-md text-center space-y-4">
|
|
||||||
<div className="text-6xl">📁</div>
|
|
||||||
<h1 className="text-2xl font-bold text-destructive">CSV File Not Found</h1>
|
|
||||||
<p className="text-muted-foreground">
|
|
||||||
It seems the <code className="bg-background px-1 rounded">video_classifications.csv</code> file is missing or not properly configured.
|
|
||||||
</p>
|
|
||||||
<div className="bg-muted p-4 rounded-lg text-sm text-left">
|
|
||||||
<p className="font-medium mb-2">To fix this:</p>
|
|
||||||
<ol className="list-decimal list-inside space-y-1 text-muted-foreground">
|
|
||||||
<li>Make sure <code className="bg-background px-1 rounded">video_classifications.csv</code> exists in your project root</li>
|
|
||||||
<li>Run your YouTube classifier script to generate the CSV</li>
|
|
||||||
<li>Refresh this page</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ThemeProvider defaultTheme="system" storageKey="video-classifier-theme">
|
|
||||||
<div className="min-h-screen bg-background">
|
|
||||||
<div className="container mx-auto px-6 py-8 space-y-8">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="text-center space-y-4">
|
|
||||||
<div className="flex items-center justify-center gap-4">
|
|
||||||
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
|
|
||||||
YouTube Video Classifier
|
|
||||||
</h1>
|
|
||||||
<ThemeToggle />
|
|
||||||
</div>
|
|
||||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
|
||||||
AI-powered video classification and management platform. Search, filter, and organize your YouTube video collection with intelligent categorization.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats Overview */}
|
|
||||||
{videos.length > 0 && (
|
|
||||||
<StatsOverview data={videos} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Search and Filter */}
|
|
||||||
{videos.length > 0 && (
|
|
||||||
<SearchAndFilter
|
|
||||||
data={videos}
|
|
||||||
searchTerm={searchTerm}
|
|
||||||
onSearchChange={setSearchTerm}
|
|
||||||
filters={filters}
|
|
||||||
onFilterChange={setFilters}
|
|
||||||
totalResults={videos.length}
|
|
||||||
filteredResults={filteredData.length}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Results */}
|
|
||||||
{videos.length > 0 ? (
|
|
||||||
filteredData.length > 0 ? (
|
|
||||||
<VirtualTable data={filteredData} />
|
|
||||||
) : (
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<div className="text-6xl mb-4">🔍</div>
|
|
||||||
<h3 className="text-lg font-medium mb-2">No results found</h3>
|
|
||||||
<p className="text-muted-foreground">
|
|
||||||
Try adjusting your search terms or filters
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<div className="text-6xl mb-4">📹</div>
|
|
||||||
<h3 className="text-lg font-medium mb-2">No videos found</h3>
|
|
||||||
<p className="text-muted-foreground">
|
|
||||||
Your CSV file appears to be empty
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="text-center text-sm text-muted-foreground border-t pt-8">
|
|
||||||
<p>
|
|
||||||
{videos.length} videos indexed
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => window.location.reload}
|
|
||||||
className="mt-2"
|
|
||||||
>
|
|
||||||
Refresh Data
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,172 +0,0 @@
|
|||||||
import React, { useRef } from 'react';
|
|
||||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
||||||
import type { VideoData } from '../types/video';
|
|
||||||
import { formatDuration, formatDate } from '../utils/csvParser';
|
|
||||||
import { Badge } from './ui/badge';
|
|
||||||
import { Button } from './ui/button';
|
|
||||||
import { Tooltip,TooltipContent, TooltipTrigger } from './ui/tooltip';
|
|
||||||
|
|
||||||
interface VirtualTableProps {
|
|
||||||
data: VideoData[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function VirtualTable({ data }: VirtualTableProps) {
|
|
||||||
const parentRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
console.log(data);
|
|
||||||
const rowVirtualizer = useVirtualizer({
|
|
||||||
count: data.length,
|
|
||||||
getScrollElement: () => parentRef.current,
|
|
||||||
estimateSize: () => 120,
|
|
||||||
overscan: 5,
|
|
||||||
});
|
|
||||||
|
|
||||||
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="border rounded-lg overflow-hidden">
|
|
||||||
{/* Table Header */}
|
|
||||||
<div className="bg-muted/50 border-b">
|
|
||||||
<div className="grid grid-cols-12 gap-3 px-4 py-3 text-sm font-medium text-muted-foreground">
|
|
||||||
<div className="col-span-3 flex items-center">Video</div>
|
|
||||||
<div className="col-span-2 flex items-center">Channel</div>
|
|
||||||
<div className="col-span-2 flex items-center">Classification</div>
|
|
||||||
<div className="col-span-1 flex items-center">Language</div>
|
|
||||||
<div className="col-span-1 flex items-center">Duration</div>
|
|
||||||
<div className="col-span-2 flex items-center">Date</div>
|
|
||||||
<div className="col-span-1 flex items-center">Actions</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Virtual Container */}
|
|
||||||
<div
|
|
||||||
ref={parentRef}
|
|
||||||
className="h-[600px] overflow-auto"
|
|
||||||
style={{
|
|
||||||
contain: 'strict',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: `${rowVirtualizer.getTotalSize()}px`,
|
|
||||||
width: '100%',
|
|
||||||
position: 'relative',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{virtualItems.map((virtualItem) => {
|
|
||||||
const video = data[virtualItem.index];
|
|
||||||
console.log(data, virtualItem, video);
|
|
||||||
if (!video) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={virtualItem.key}
|
|
||||||
data-index={virtualItem.index}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
width: '100%',
|
|
||||||
transform: `translateY(${virtualItem.start}px)`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="border-b hover:bg-muted/50 transition-colors">
|
|
||||||
<div className="grid grid-cols-12 gap-3 px-4 py-3 items-center min-h-[80px]">
|
|
||||||
{/* Video Info */}
|
|
||||||
<div className="col-span-3 space-y-2 min-w-0">
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipContent>
|
|
||||||
{video.video_title}
|
|
||||||
</TooltipContent>
|
|
||||||
<TooltipTrigger>
|
|
||||||
<h3 className="text-start font-medium text-sm leading-tight truncate sm:w-[150px] lg:w-[200px] xl:w-[250px] 2xl:w-[300px]">
|
|
||||||
{video.video_title}
|
|
||||||
</h3>
|
|
||||||
</TooltipTrigger>
|
|
||||||
</Tooltip>
|
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{video.detailed_subtags.split(',').slice(0, 2).map((tag, i) => (
|
|
||||||
<Badge variant="secondary" className="text-xs max-w-20 truncate">
|
|
||||||
{tag.trim()}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
{video.detailed_subtags.split(',').length > 2 && (
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipContent>
|
|
||||||
{video.detailed_subtags.split(',').slice(2).join(', ')}
|
|
||||||
</TooltipContent>
|
|
||||||
<TooltipTrigger>
|
|
||||||
<Badge variant="outline" className="text-xs">
|
|
||||||
+{video.detailed_subtags.split(',').length - 2}
|
|
||||||
</Badge>
|
|
||||||
</TooltipTrigger>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Channel */}
|
|
||||||
<div className="col-span-2 min-w-0">
|
|
||||||
<Tooltip content={video.channel_name}>
|
|
||||||
<div className="text-sm font-medium truncate">{video.channel_name}</div>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip content={video.playlist_name}>
|
|
||||||
<div className="text-xs text-muted-foreground truncate">{video.playlist_name}</div>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Classification */}
|
|
||||||
<div className="col-span-2 min-w-0">
|
|
||||||
<Badge variant="default" className="text-xs truncate max-w-full">
|
|
||||||
{video.classification}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Language */}
|
|
||||||
<div className="col-span-1 min-w-0">
|
|
||||||
<Badge variant="outline" className="text-xs truncate max-w-full">
|
|
||||||
{video.language}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Duration */}
|
|
||||||
<div className="col-span-1 text-sm font-mono">
|
|
||||||
{formatDuration(video.video_length_seconds)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Date */}
|
|
||||||
<div className="col-span-2 space-y-1 min-w-0">
|
|
||||||
<div className="text-sm">{formatDate(video.video_date)}</div>
|
|
||||||
<div className="text-xs text-muted-foreground truncate">
|
|
||||||
Added: {formatDate(video.timestamp)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Actions */}
|
|
||||||
<div className="col-span-1">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => window.open(video.video_url, '_blank')}
|
|
||||||
className="text-xs"
|
|
||||||
>
|
|
||||||
Watch
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="bg-muted/50 border-t px-4 py-3">
|
|
||||||
<div className="text-sm text-muted-foreground text-center">
|
|
||||||
Showing {data.length} videos
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { cva, type VariantProps } from "class-variance-authority"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
const badgeVariants = cva(
|
|
||||||
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default:
|
|
||||||
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
|
|
||||||
secondary:
|
|
||||||
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
||||||
destructive:
|
|
||||||
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
|
||||||
outline: "text-foreground",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: "default",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export interface BadgeProps
|
|
||||||
extends React.HTMLAttributes<HTMLDivElement>,
|
|
||||||
VariantProps<typeof badgeVariants> {}
|
|
||||||
|
|
||||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
|
||||||
return (
|
|
||||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Badge, badgeVariants }
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
export interface InputProps
|
|
||||||
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
|
||||||
|
|
||||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
||||||
({ className, type, ...props }, ref) => {
|
|
||||||
return (
|
|
||||||
<input
|
|
||||||
type={type}
|
|
||||||
className={cn(
|
|
||||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
ref={ref}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
Input.displayName = "Input"
|
|
||||||
|
|
||||||
export { Input }
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
const Select = React.forwardRef<
|
|
||||||
HTMLSelectElement,
|
|
||||||
React.SelectHTMLAttributes<HTMLSelectElement>
|
|
||||||
>(({ className, children, ...props }, ref) => {
|
|
||||||
return (
|
|
||||||
<select
|
|
||||||
className={cn(
|
|
||||||
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
ref={ref}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</select>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
Select.displayName = "Select"
|
|
||||||
|
|
||||||
export { Select }
|
|
||||||
@@ -1,103 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function TooltipProvider({
|
|
||||||
delay = 0,
|
|
||||||
closeDelay = 0,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof BaseTooltip.Provider>) {
|
|
||||||
return (
|
|
||||||
<BaseTooltip.Provider
|
|
||||||
data-slot="tooltip-provider"
|
|
||||||
delay={delay}
|
|
||||||
closeDelay={closeDelay}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Tooltip({ ...props }: React.ComponentProps<typeof BaseTooltip.Root>) {
|
|
||||||
return (
|
|
||||||
<TooltipProvider>
|
|
||||||
<BaseTooltip.Root data-slot="tooltip" {...props} />
|
|
||||||
</TooltipProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function TooltipTrigger({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof BaseTooltip.Trigger>) {
|
|
||||||
return <BaseTooltip.Trigger data-slot="tooltip-trigger" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function TooltipPortal({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof BaseTooltip.Portal>) {
|
|
||||||
return <BaseTooltip.Portal data-slot="tooltip-portal" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function TooltipPositioner({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof BaseTooltip.Positioner>) {
|
|
||||||
return <BaseTooltip.Positioner data-slot="tooltip-positioner" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function TooltipArrow({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof BaseTooltip.Arrow>) {
|
|
||||||
return <BaseTooltip.Arrow data-slot="tooltip-arrow" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function TooltipContent({
|
|
||||||
className,
|
|
||||||
align = "center",
|
|
||||||
sideOffset = 8,
|
|
||||||
side = "top",
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof BaseTooltip.Popup> & {
|
|
||||||
align?: BaseTooltip.Positioner.Props["align"]
|
|
||||||
side?: BaseTooltip.Positioner.Props["side"]
|
|
||||||
sideOffset?: BaseTooltip.Positioner.Props["sideOffset"]
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<TooltipPortal>
|
|
||||||
<TooltipPositioner sideOffset={sideOffset} align={align} side={side}>
|
|
||||||
<BaseTooltip.Popup
|
|
||||||
data-slot="tooltip-content"
|
|
||||||
className={cn(
|
|
||||||
"bg-popover text-popover-foreground outline-border z-50 w-fit origin-[var(--transform-origin)] rounded-md px-3 py-1.5 text-xs text-balance shadow-sm outline -outline-offset-1 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<TooltipArrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
|
|
||||||
<svg width="20" height="10" viewBox="0 0 20 10" fill="none">
|
|
||||||
<path
|
|
||||||
d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V9H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
|
|
||||||
className="fill-popover"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
|
|
||||||
className="fill-border"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</TooltipArrow>
|
|
||||||
</BaseTooltip.Popup>
|
|
||||||
</TooltipPositioner>
|
|
||||||
</TooltipPortal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
Tooltip,
|
|
||||||
TooltipTrigger,
|
|
||||||
TooltipContent,
|
|
||||||
TooltipPortal,
|
|
||||||
TooltipPositioner,
|
|
||||||
TooltipArrow,
|
|
||||||
TooltipProvider,
|
|
||||||
}
|
|
||||||
2
web/src/env.d.ts
vendored
2
web/src/env.d.ts
vendored
@@ -1,2 +0,0 @@
|
|||||||
/// <reference path="../.astro/types.d.ts" />
|
|
||||||
/// <reference types="astro/client" />
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
import type { APIRoute } from 'astro';
|
|
||||||
import { readFileSync, existsSync } from 'fs';
|
|
||||||
import { join } from 'path';
|
|
||||||
import { parseCSV } from '../../utils/csvParser';
|
|
||||||
|
|
||||||
export const GET: APIRoute = async () => {
|
|
||||||
try {
|
|
||||||
// Look for CSV file in the project root (outside web folder)
|
|
||||||
const csvPath = join(process.cwd(), '..', 'video_classifications.csv');
|
|
||||||
|
|
||||||
if (!existsSync(csvPath)) {
|
|
||||||
return new Response(
|
|
||||||
JSON.stringify({
|
|
||||||
error: 'CSV file not found',
|
|
||||||
message: 'video_classifications.csv not found in project root',
|
|
||||||
path: csvPath
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
status: 404,
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const csvContent = readFileSync(csvPath, 'utf-8');
|
|
||||||
const videos = parseCSV(csvContent);
|
|
||||||
|
|
||||||
return new Response(JSON.stringify({ videos }), {
|
|
||||||
status: 200,
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error reading CSV file:', error);
|
|
||||||
return new Response(
|
|
||||||
JSON.stringify({
|
|
||||||
error: 'Failed to read CSV file',
|
|
||||||
message: error instanceof Error ? error.message : 'Unknown error'
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
status: 500,
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,27 +1,27 @@
|
|||||||
---
|
---
|
||||||
import VideoClassifierApp from '@/components/VideoClassifierApp';
|
|
||||||
import '../styles/global.css';
|
import '../styles/global.css';
|
||||||
import { join } from 'path';
|
// Component Imports
|
||||||
import { readFileSync } from 'fs';
|
import Button from '../components/Button.astro';
|
||||||
import { parseCSV } from '@/utils/csvParser';
|
import {Button as ShadcnButton} from '../components/ui/button.tsx';
|
||||||
|
|
||||||
const csvPath = join(process.cwd(), '..', 'video_classifications.csv')
|
|
||||||
const csvContent = readFileSync(csvPath, 'utf-8');
|
|
||||||
const videos = parseCSV(csvContent);
|
|
||||||
|
|
||||||
|
// Full Astro Component Syntax:
|
||||||
|
// https://docs.astro.build/basics/astro-components/
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>YouTube Video Classifier</title>
|
<title>Astro + TailwindCSS</title>
|
||||||
<meta name="description" content="AI-powered YouTube video classification and management platform" />
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="min-h-screen bg-background">
|
<body>
|
||||||
<VideoClassifierApp client:only videos={videos} />
|
<div class="grid place-items-center h-screen content-center">
|
||||||
|
<Button>Tailwind Button in Astro!</Button>
|
||||||
|
<a href="/markdown-page" class="p-4 underline">Markdown is also supported...</a>
|
||||||
|
<ShadcnButton>Shadcn Button</ShadcnButton>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -39,33 +39,6 @@
|
|||||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
--color-sidebar-border: var(--sidebar-border);
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
--color-sidebar-ring: var(--sidebar-ring);
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
--font-sans: Poppins, sans-serif;
|
|
||||||
--font-mono: Fira Code, monospace;
|
|
||||||
--font-serif: Lora, serif;
|
|
||||||
--radius: 0.4rem;
|
|
||||||
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
|
|
||||||
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
|
|
||||||
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
|
|
||||||
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
|
|
||||||
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
|
|
||||||
--tracking-normal: var(--tracking-normal);
|
|
||||||
--shadow-2xl: var(--shadow-2xl);
|
|
||||||
--shadow-xl: var(--shadow-xl);
|
|
||||||
--shadow-lg: var(--shadow-lg);
|
|
||||||
--shadow-md: var(--shadow-md);
|
|
||||||
--shadow: var(--shadow);
|
|
||||||
--shadow-sm: var(--shadow-sm);
|
|
||||||
--shadow-xs: var(--shadow-xs);
|
|
||||||
--shadow-2xs: var(--shadow-2xs);
|
|
||||||
--spacing: var(--spacing);
|
|
||||||
--letter-spacing: var(--letter-spacing);
|
|
||||||
--shadow-offset-y: var(--shadow-offset-y);
|
|
||||||
--shadow-offset-x: var(--shadow-offset-x);
|
|
||||||
--shadow-spread: var(--shadow-spread);
|
|
||||||
--shadow-blur: var(--shadow-blur);
|
|
||||||
--shadow-opacity: var(--shadow-opacity);
|
|
||||||
--color-shadow-color: var(--shadow-color);
|
|
||||||
--color-destructive-foreground: var(--destructive-foreground);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@@ -101,27 +74,6 @@
|
|||||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||||
--sidebar-border: oklch(0.922 0 0);
|
--sidebar-border: oklch(0.922 0 0);
|
||||||
--sidebar-ring: oklch(0.708 0 0);
|
--sidebar-ring: oklch(0.708 0 0);
|
||||||
--destructive-foreground: oklch(1.0000 0 0);
|
|
||||||
--font-sans: Poppins, sans-serif;
|
|
||||||
--font-serif: Lora, serif;
|
|
||||||
--font-mono: Fira Code, monospace;
|
|
||||||
--shadow-color: hsl(325.78 58.18% 56.86% / 0.5);
|
|
||||||
--shadow-opacity: 1.0;
|
|
||||||
--shadow-blur: 0px;
|
|
||||||
--shadow-spread: 0px;
|
|
||||||
--shadow-offset-x: 3px;
|
|
||||||
--shadow-offset-y: 3px;
|
|
||||||
--letter-spacing: 0em;
|
|
||||||
--spacing: 0.25rem;
|
|
||||||
--shadow-2xs: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50);
|
|
||||||
--shadow-xs: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50);
|
|
||||||
--shadow-sm: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
|
|
||||||
--shadow: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
|
|
||||||
--shadow-md: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 2px 4px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
|
|
||||||
--shadow-lg: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 4px 6px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
|
|
||||||
--shadow-xl: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 8px 10px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
|
|
||||||
--shadow-2xl: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 2.50);
|
|
||||||
--tracking-normal: 0em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
@@ -156,27 +108,6 @@
|
|||||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
--sidebar-border: oklch(1 0 0 / 10%);
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
--sidebar-ring: oklch(0.556 0 0);
|
--sidebar-ring: oklch(0.556 0 0);
|
||||||
--destructive-foreground: oklch(0.2497 0.0305 234.1628);
|
|
||||||
--radius: 0.4rem;
|
|
||||||
--font-sans: Poppins, sans-serif;
|
|
||||||
--font-serif: Lora, serif;
|
|
||||||
--font-mono: Fira Code, monospace;
|
|
||||||
--shadow-color: #324859;
|
|
||||||
--shadow-opacity: 1.0;
|
|
||||||
--shadow-blur: 0px;
|
|
||||||
--shadow-spread: 0px;
|
|
||||||
--shadow-offset-x: 3px;
|
|
||||||
--shadow-offset-y: 3px;
|
|
||||||
--letter-spacing: 0em;
|
|
||||||
--spacing: 0.25rem;
|
|
||||||
--shadow-2xs: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50);
|
|
||||||
--shadow-xs: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50);
|
|
||||||
--shadow-sm: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
|
|
||||||
--shadow: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
|
|
||||||
--shadow-md: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 2px 4px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
|
|
||||||
--shadow-lg: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 4px 6px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
|
|
||||||
--shadow-xl: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 8px 10px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
|
|
||||||
--shadow-2xl: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 2.50);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
@@ -185,7 +116,6 @@
|
|||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
letter-spacing: var(--tracking-normal);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,22 +0,0 @@
|
|||||||
export interface VideoData {
|
|
||||||
video_title: string;
|
|
||||||
video_url: string;
|
|
||||||
thumbnail_url: string;
|
|
||||||
classification: string;
|
|
||||||
language: string;
|
|
||||||
channel_name: string;
|
|
||||||
channel_link: string;
|
|
||||||
video_length_seconds: number;
|
|
||||||
video_date: string;
|
|
||||||
detailed_subtags: string;
|
|
||||||
playlist_name: string;
|
|
||||||
playlist_link: string;
|
|
||||||
image_data: string;
|
|
||||||
timestamp: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FilterOptions {
|
|
||||||
classification: string[];
|
|
||||||
language: string[];
|
|
||||||
playlist_name: string[];
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import Papa from 'papaparse';
|
|
||||||
import type { VideoData } from '../types/video';
|
|
||||||
|
|
||||||
export function parseCSV(csvText: string): VideoData[] {
|
|
||||||
const result = Papa.parse<VideoData>(csvText, {
|
|
||||||
header: true,
|
|
||||||
skipEmptyLines: true,
|
|
||||||
transform: (value, field) => {
|
|
||||||
// Convert numeric fields
|
|
||||||
if (field === 'video_length_seconds') {
|
|
||||||
return parseInt(value) || 0;
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (result.errors.length > 0) {
|
|
||||||
console.warn('CSV parsing errors:', result.errors);
|
|
||||||
}
|
|
||||||
|
|
||||||
return result.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatDuration(seconds: number): string {
|
|
||||||
const minutes = Math.floor(seconds / 60);
|
|
||||||
const remainingSeconds = seconds % 60;
|
|
||||||
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatDate(dateString: string): string {
|
|
||||||
try {
|
|
||||||
const date = new Date(dateString);
|
|
||||||
return date.toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric'
|
|
||||||
});
|
|
||||||
} catch {
|
|
||||||
return dateString;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
import type { VideoData } from '../types/video';
|
|
||||||
|
|
||||||
export function searchVideos(videos: VideoData[], searchTerm: string): VideoData[] {
|
|
||||||
if (!searchTerm.trim()) return videos;
|
|
||||||
|
|
||||||
const term = searchTerm.toLowerCase();
|
|
||||||
|
|
||||||
return videos.filter(video => {
|
|
||||||
const searchableFields = [
|
|
||||||
video.video_title,
|
|
||||||
video.channel_name,
|
|
||||||
video.detailed_subtags,
|
|
||||||
video.classification,
|
|
||||||
video.language,
|
|
||||||
video.playlist_name,
|
|
||||||
video.video_length_seconds.toString(),
|
|
||||||
formatDateForSearch(video.video_date),
|
|
||||||
formatDateForSearch(video.timestamp)
|
|
||||||
];
|
|
||||||
|
|
||||||
return searchableFields.some(field =>
|
|
||||||
field && field.toLowerCase().includes(term)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatDateForSearch(dateString: string): string {
|
|
||||||
try {
|
|
||||||
const date = new Date(dateString);
|
|
||||||
return date.toLocaleDateString('en-US');
|
|
||||||
} catch {
|
|
||||||
return dateString;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function filterVideos(
|
|
||||||
videos: VideoData[],
|
|
||||||
filters: { classification?: string; language?: string; playlist_name?: string }
|
|
||||||
): VideoData[] {
|
|
||||||
return videos.filter(video => {
|
|
||||||
if (filters.classification && filters.classification !== 'all' && video.classification !== filters.classification) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (filters.language && filters.language !== 'all' && video.language !== filters.language) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (filters.playlist_name && filters.playlist_name !== 'all' && video.playlist_name !== filters.playlist_name) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getUniqueValues(videos: VideoData[], field: keyof VideoData): string[] {
|
|
||||||
const values = videos.map(video => video[field] as string).filter(Boolean);
|
|
||||||
return [...new Set(values)].sort();
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user