From c90ce83fd47d0599ddf50ecca0300ed13060ea85 Mon Sep 17 00:00:00 2001 From: IrohDW Date: Wed, 19 Mar 2025 14:26:44 -0600 Subject: [PATCH] Added search params to Home --- package-lock.json | 233 ++++++++++--- package.json | 1 + src/App.tsx | 8 +- .../Publish/EditVideo/EditVideo.tsx | 2 + src/constants/Misc.ts | 1 + .../Home/Components/VideoList-styles.tsx | 3 +- src/pages/Home/Components/VideoList.tsx | 316 +++++++++++------- .../Components/VideoListComponentLevel.tsx | 12 +- src/pages/Home/Home-State.ts | 8 +- src/pages/Home/Home.tsx | 78 ++++- 10 files changed, 479 insertions(+), 183 deletions(-) diff --git a/package-lock.json b/package-lock.json index c455c81..c468423 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "dompurify": "^3.2.3", "localforage": "^1.10.0", "moment": "^2.30.1", + "qapp-core": "^1.0.8", "quill": "^2.0.2", "quill-image-resize-module-react": "^3.0.0", "react": "^19.0.0", @@ -1207,18 +1208,20 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.3.0.tgz", - "integrity": "sha512-/d8NwSuC3rMwCjswmGB3oXC4sdDuhIUJ8inVQAxGrADJhf0eq/kmy+foFKvpYhHl2siOZR+MLdFttw6/Bzqtqg==", + "version": "6.4.7", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.7.tgz", + "integrity": "sha512-XjJrKFNt9zAKvcnoIIBquXyFyhfrHYuttqMsoDS7lM7VwufYG4fAPw4kINjBFg++fqXM2BNAuWR9J7XVIuKIKg==", + "license": "MIT", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/icons-material": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.3.0.tgz", - "integrity": "sha512-3uWws6DveDn5KxCS34p+sUNMxehuclQY6OmoJeJJ+Sfg9L7LGBpksY/nX5ywKAqickTZnn+sQyVcp963ep9jvw==", + "version": "6.4.7", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.4.7.tgz", + "integrity": "sha512-Rk8cs9ufQoLBw582Rdqq7fnSXXZTqhYRbpe1Y5SAz9lJKZP3CIdrj0PfG8HJLGw1hrsHFN/rkkm70IDzhJsG1g==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0" }, @@ -1230,7 +1233,7 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^6.3.0", + "@mui/material": "^6.4.7", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -1285,15 +1288,16 @@ } }, "node_modules/@mui/material": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.3.0.tgz", - "integrity": "sha512-qhlTFyRMxfoVPxUtA5e8IvqxP0dWo2Ij7cvot7Orag+etUlZH+3UwD8gZGt+3irOoy7Ms3UNBflYjwEikUXtAQ==", + "version": "6.4.7", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.7.tgz", + "integrity": "sha512-K65StXUeGAtFJ4ikvHKtmDCO5Ab7g0FZUu2J5VpoKD+O6Y3CjLYzRi+TMlI3kaL4CL158+FccMoOd/eaddmeRQ==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/core-downloads-tracker": "^6.3.0", - "@mui/system": "^6.3.0", - "@mui/types": "^7.2.20", - "@mui/utils": "^6.3.0", + "@mui/core-downloads-tracker": "^6.4.7", + "@mui/system": "^6.4.7", + "@mui/types": "^7.2.21", + "@mui/utils": "^6.4.6", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", @@ -1312,7 +1316,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.3.0", + "@mui/material-pigment-css": "^6.4.7", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -1333,12 +1337,13 @@ } }, "node_modules/@mui/private-theming": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.3.0.tgz", - "integrity": "sha512-tdS8jvqMokltNTXg6ioRCCbVdDmZUJZa/T9VtTnX2Lwww3FTgCakst9tWLZSxm1fEE9Xp0m7onZJmgeUmWQYVw==", + "version": "6.4.6", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.4.6.tgz", + "integrity": "sha512-T5FxdPzCELuOrhpA2g4Pi6241HAxRwZudzAuL9vBvniuB5YU82HCmrARw32AuCiyTfWzbrYGGpZ4zyeqqp9RvQ==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/utils": "^6.3.0", + "@mui/utils": "^6.4.6", "prop-types": "^15.8.1" }, "engines": { @@ -1359,9 +1364,10 @@ } }, "node_modules/@mui/styled-engine": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.3.0.tgz", - "integrity": "sha512-iWA6eyiPkO07AlHxRUvI7dwVRSc+84zV54kLmjUms67GJeOWVuXlu8ZO+UhCnwJxHacghxnabsMEqet5PYQmHg==", + "version": "6.4.6", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.4.6.tgz", + "integrity": "sha512-vSWYc9ZLX46be5gP+FCzWVn5rvDr4cXC5JBZwSIkYk9xbC7GeV+0kCvB8Q6XLFQJy+a62bbqtmdwS4Ghi9NBlQ==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", "@emotion/cache": "^11.13.5", @@ -1392,15 +1398,16 @@ } }, "node_modules/@mui/system": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.3.0.tgz", - "integrity": "sha512-L+8hUHMNlfReKSqcnVslFrVhoNfz/jw7Fe9NfDE85R3KarvZ4O3MU9daF/lZeqEAvnYxEilkkTfDwQ7qCgJdFg==", + "version": "6.4.7", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.4.7.tgz", + "integrity": "sha512-7wwc4++Ak6tGIooEVA9AY7FhH2p9fvBMORT4vNLMAysH3Yus/9B9RYMbrn3ANgsOyvT3Z7nE+SP8/+3FimQmcg==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/private-theming": "^6.3.0", - "@mui/styled-engine": "^6.3.0", - "@mui/types": "^7.2.20", - "@mui/utils": "^6.3.0", + "@mui/private-theming": "^6.4.6", + "@mui/styled-engine": "^6.4.6", + "@mui/types": "^7.2.21", + "@mui/utils": "^6.4.6", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -1431,9 +1438,10 @@ } }, "node_modules/@mui/types": { - "version": "7.2.20", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.20.tgz", - "integrity": "sha512-straFHD7L8v05l/N5vcWk+y7eL9JF0C2mtph/y4BPm3gn2Eh61dDwDB65pa8DLss3WJfDXYC7Kx5yjP0EmXpgw==", + "version": "7.2.21", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.21.tgz", + "integrity": "sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==", + "license": "MIT", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -1444,12 +1452,13 @@ } }, "node_modules/@mui/utils": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.3.0.tgz", - "integrity": "sha512-MkDBF08OPVwXhAjedyMykRojgvmf0y/jxkBWjystpfI/pasyTYrfdv4jic6s7j3y2+a+SJzS9qrD6X8ZYj/8AQ==", + "version": "6.4.6", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.4.6.tgz", + "integrity": "sha512-43nZeE1pJF2anGafNydUcYFPtHwAqiBiauRtaMvurdrZI3YrUjHkAu43RBsxef7OFtJMXGiHFvq43kb7lig0sA==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/types": "^7.2.20", + "@mui/types": "^7.2.21", "@types/prop-types": "^15.7.14", "clsx": "^2.1.1", "prop-types": "^15.8.1", @@ -1811,6 +1820,33 @@ "win32" ] }, + "node_modules/@tanstack/react-virtual": { + "version": "3.13.3", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.3.tgz", + "integrity": "sha512-khJmiDJCkklsDTvXxTZHfEa7H161e94eDKxKyXqg9/3LstIbRg4JWBxPD2/e3LKtklC5dxkoYzNllCMVR904FA==", + "license": "MIT", + "dependencies": { + "@tanstack/virtual-core": "3.13.3" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "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" + } + }, + "node_modules/@tanstack/virtual-core": { + "version": "3.13.3", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.3.tgz", + "integrity": "sha512-9kfCeSG6zUx1I1iF4RKZrquNog3Eho1T6+LyJEDYpHjNNdDlRhXyqzTod5u6LCEBSeG0f2txkNjAq0tFbCJ4bA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1880,9 +1916,10 @@ "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==" }, "node_modules/@types/react": { - "version": "19.0.2", - "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.2.tgz", - "integrity": "sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==", + "version": "19.0.11", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.11.tgz", + "integrity": "sha512-vrdxRZfo9ALXth6yPfV16PYTLZwsUWhVjjC+DkfE5t1suNSbBrWC9YqSuuxJZ8Ps6z1o2ycRpIqzZJIgklq4Tw==", + "license": "MIT", "dependencies": { "csstype": "^3.0.2" } @@ -2204,6 +2241,26 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, "node_modules/blueimp-canvas-to-blob": { "version": "3.29.0", "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz", @@ -2262,6 +2319,30 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, "node_modules/call-bind": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz", @@ -3184,6 +3265,26 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "BSD-3-Clause" + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -3834,6 +3935,25 @@ "node": ">=6" } }, + "node_modules/qapp-core": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/qapp-core/-/qapp-core-1.0.8.tgz", + "integrity": "sha512-b9DlZ7bg+aTpFPVaTopViIS6YgEr8P8w8psXYlSsYojrU/rShfOo+QlrUwrY2dIWmEhNIsjGl8q4GHzUltRZ6w==", + "license": "MIT", + "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^6.4.7", + "@mui/material": "^6.4.7", + "@tanstack/react-virtual": "^3.13.2", + "@types/react": "^19.0.10", + "buffer": "^6.0.3", + "react": "^19.0.0", + "react-intersection-observer": "^9.16.0", + "short-unique-id": "^5.2.0", + "zustand": "^4.3.2" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -4013,9 +4133,10 @@ } }, "node_modules/react-intersection-observer": { - "version": "9.14.0", - "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.14.0.tgz", - "integrity": "sha512-AYqlmDZn85VUmlODwYym9y5OlqY2cFyIu41dkN0GJWvhdbd19Mh16mz5IH6fO1gp5V4FfQOO4m0zGc04Tj13rQ==", + "version": "9.16.0", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz", + "integrity": "sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==", + "license": "MIT", "peerDependencies": { "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -4683,6 +4804,34 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "4.5.6", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.6.tgz", + "integrity": "sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ==", + "license": "MIT", + "dependencies": { + "use-sync-external-store": "^1.2.2" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@types/react": ">=16.8", + "immer": ">=9.0.6", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } } } } diff --git a/package.json b/package.json index bdb8dc9..714d035 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "dompurify": "^3.2.3", "localforage": "^1.10.0", "moment": "^2.30.1", + "qapp-core": "^1.0.8", "quill": "^2.0.2", "quill-image-resize-module-react": "^3.0.0", "react": "^19.0.0", diff --git a/src/App.tsx b/src/App.tsx index d3aec43..9946f54 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,7 @@ import { persistStore } from "redux-persist"; import { PersistGate } from "redux-persist/integration/react"; import { subscriptionListFilter } from "./App-Functions.ts"; import Notification from "./components/common/Notification/Notification"; +import { appName } from "./constants/Misc.ts"; import { useIframe } from "./hooks/useIframe.tsx"; import { IndividualProfile } from "./pages/ContentPages/IndividualProfile/IndividualProfile"; import { PlaylistContent } from "./pages/ContentPages/PlaylistContent/PlaylistContent"; @@ -35,7 +36,12 @@ function App() { return ( - + diff --git a/src/components/Publish/EditVideo/EditVideo.tsx b/src/components/Publish/EditVideo/EditVideo.tsx index a3092bf..7c63b92 100644 --- a/src/components/Publish/EditVideo/EditVideo.tsx +++ b/src/components/Publish/EditVideo/EditVideo.tsx @@ -53,6 +53,7 @@ import { NewCrowdfundTitle, TimesIcon, } from "./EditVideo-styles.tsx"; +import { useGlobal } from "qapp-core"; const uid = new ShortUniqueId(); const shortuid = new ShortUniqueId({ length: 5 }); @@ -60,6 +61,7 @@ const shortuid = new ShortUniqueId({ length: 5 }); export const EditVideo = () => { const theme = useTheme(); const dispatch = useDispatch(); + const resource = useGlobal(); const username = useSelector((state: RootState) => state.auth?.user?.name); const userAddress = useSelector( (state: RootState) => state.auth?.user?.address diff --git a/src/constants/Misc.ts b/src/constants/Misc.ts index 31d1d69..e1a3b1d 100644 --- a/src/constants/Misc.ts +++ b/src/constants/Misc.ts @@ -1,5 +1,6 @@ import { useTestIdentifiers } from "./Identifiers.ts"; +export const appName = "Q-Tube"; export const minPriceSuperLike = 1; export const minPriceSuperDislike = 1; diff --git a/src/pages/Home/Components/VideoList-styles.tsx b/src/pages/Home/Components/VideoList-styles.tsx index ddd7432..649ac03 100644 --- a/src/pages/Home/Components/VideoList-styles.tsx +++ b/src/pages/Home/Components/VideoList-styles.tsx @@ -34,9 +34,8 @@ export const VideoCardContainer = styled("div")(({ theme }) => ({ export const VideoCardCol = styled("div")({ position: "relative", - minWidth: "200px", // Minimum width of each item + width: "100%", // Minimum width of each item maxWidth: "300px", // Maximum width, allowing the item to fill the column - // ... other styles }); export const VideoCard = styled(Grid)(({ theme }) => ({ diff --git a/src/pages/Home/Components/VideoList.tsx b/src/pages/Home/Components/VideoList.tsx index 830b6e7..9a0aa70 100644 --- a/src/pages/Home/Components/VideoList.tsx +++ b/src/pages/Home/Components/VideoList.tsx @@ -1,7 +1,15 @@ import BlockIcon from "@mui/icons-material/Block"; import EditIcon from "@mui/icons-material/Edit"; -import { Avatar, Box, Tooltip, Typography, useTheme } from "@mui/material"; -import React, { useState } from "react"; +import DeleteIcon from "@mui/icons-material/Delete"; +import { + Avatar, + Box, + Skeleton, + Tooltip, + Typography, + useTheme, +} from "@mui/material"; +import React, { useCallback, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { PlaylistSVG } from "../../../assets/svgs/PlaylistSVG.tsx"; @@ -29,20 +37,18 @@ import { VideoCardTitle, VideoUploadDate, } from "./VideoList-styles.tsx"; -import { ResourceListDisplay } from "qapp-core"; +import { ResourceListDisplay, useGlobal } from "qapp-core"; interface VideoListProps { listName: string; + searchParameters: any; } -export const VideoList = ({ listName }: VideoListProps) => { +export const VideoList = ({ listName, searchParameters }: VideoListProps) => { const [showIcons, setShowIcons] = useState(null); - const hashMapVideos = useSelector( - (state: RootState) => state.video.hashMapVideos - ); - const username = useSelector((state: RootState) => state.auth?.user?.name); + const { resources } = useGlobal(); const navigate = useNavigate(); const dispatch = useDispatch(); const theme = useTheme(); @@ -65,135 +71,197 @@ export const VideoList = ({ listName }: VideoListProps) => { } }; + const listItem = useCallback( + (item, index) => { + const { qortalMetadata, data: video } = item; + return ( + setShowIcons(qortalMetadata?.identifier)} + onMouseLeave={() => setShowIcons(null)} + > + + {qortalMetadata?.name === username && ( + + + { + dispatch(setEditVideo(item)); + }} + /> + + + )} + + {qortalMetadata?.name !== username && ( + + + { + blockUserFunc(qortalMetadata?.name); + }} + /> + + + )} + {qortalMetadata?.name === username && ( + + + { + resources.deleteProduct([ + qortalMetadata, + video.videoReference, + ]); + }} + /> + + + )} + + { + navigate( + `/video/${qortalMetadata?.name}/${qortalMetadata?.identifier}` + ); + }} + > + {video?.duration > minDuration && ( + + + {formatTime(video.duration)} + + + )} + + + {video.title} + + + { + e.stopPropagation(); + navigate(`/channel/${qortalMetadata?.name}`); + }} + > + + + {qortalMetadata?.name} + + + {qortalMetadata?.created && ( + + + {formatDate(qortalMetadata.created)} + + + )} + + + + ); + }, + [username, showIcons] + ); + + const skeletonVideoCard = ( + + + + + + + + + + + + ); return ( { - return
{status === "LOADING" ? "is Loading" : "has error"}
; - }} - listItem={(item, index) => { - const { qortalMetadata, data: video } = item; - - const fullId = video - ? `${qortalMetadata.identifier}-${qortalMetadata.name}` - : undefined; - return ( - setShowIcons(qortalMetadata?.identifier)} - onMouseLeave={() => setShowIcons(null)} - > - - {qortalMetadata?.name === username && ( - - - { - dispatch(setEditVideo(item)); - }} - /> - - - )} - - {qortalMetadata?.name !== username && ( - - - { - blockUserFunc(qortalMetadata?.name); - }} - /> - - - )} - - { - navigate( - `/video/${qortalMetadata?.name}/${qortalMetadata?.identifier}` - ); - }} - > - {video?.duration > minDuration && ( - - - {formatTime(video.duration)} - - - )} - - - {video.title} - - - { - e.stopPropagation(); - navigate(`/channel/${qortalMetadata?.name}`); - }} - > - - - {qortalMetadata?.name} - - - {qortalMetadata?.created && ( - - - {formatDate(qortalMetadata.created)} - - - )} - - - + //
{status === "LOADING" ? skeletonVideoCard : "has error"}
+ skeletonVideoCard ); }} + listItem={listItem} /> ); diff --git a/src/pages/Home/Components/VideoListComponentLevel.tsx b/src/pages/Home/Components/VideoListComponentLevel.tsx index 4989101..8de3614 100644 --- a/src/pages/Home/Components/VideoListComponentLevel.tsx +++ b/src/pages/Home/Components/VideoListComponentLevel.tsx @@ -106,7 +106,17 @@ export const VideoListComponentLevel = ({ mode }: VideoListProps) => { alignItems: "center", }} > - + diff --git a/src/pages/Home/Home-State.ts b/src/pages/Home/Home-State.ts index 77da107..282f9f7 100644 --- a/src/pages/Home/Home-State.ts +++ b/src/pages/Home/Home-State.ts @@ -135,7 +135,13 @@ export const useHomeState = (mode: string) => { changeTab, videos, isLoading, - filteredSubscriptionList, getVideosHandler, + filterName, + filterSearch, + filterValue, + filterType, + selectedCategoryVideos, + selectedSubCategoryVideos, + filteredSubscriptionList, }; }; diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 31c4c20..43fd0c3 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,13 +1,20 @@ import { TabContext, TabList, TabPanel } from "@mui/lab"; import { Box, Tab, useMediaQuery } from "@mui/material"; -import React from "react"; +import React, { useState } from "react"; import LazyLoad from "../../components/common/LazyLoad"; import { ListSuperLikeContainer } from "../../components/common/ListSuperLikes/ListSuperLikeContainer.tsx"; +import { + QTUBE_PLAYLIST_BASE, + QTUBE_VIDEO_BASE, + useTestIdentifiers, +} from "../../constants/Identifiers.ts"; import { fontSizeLarge, fontSizeSmall } from "../../constants/Misc.ts"; +import { RootState } from "../../state/store.ts"; import { SearchSidebar } from "./Components/SearchSidebar.tsx"; import VideoList from "./Components/VideoList.tsx"; import { useHomeState } from "./Home-State.ts"; +import { useSelector } from "react-redux"; interface HomeProps { mode?: string; @@ -18,6 +25,12 @@ export const Home = ({ mode }: HomeProps) => { changeTab, videos, isLoading, + filterName, + filterSearch, + filterValue, + filterType, + selectedCategoryVideos, + selectedSubCategoryVideos, filteredSubscriptionList, getVideosHandler, } = useHomeState(mode); @@ -46,10 +59,45 @@ export const Home = ({ mode }: HomeProps) => { else if (!isScreenSmall) homeColumns = mediumGridSX; else homeColumns = smallGridSX; + let description: string = undefined; + if (selectedCategoryVideos) { + description = `category:${selectedCategoryVideos}`; + + if (selectedSubCategoryVideos) + description += `;subcategory:${selectedSubCategoryVideos}`; + } + const initialSearchParams = { + identifier: + filterType === "playlists" ? QTUBE_PLAYLIST_BASE : QTUBE_VIDEO_BASE, + service: filterType === "playlists" ? "PLAYLIST" : "DOCUMENT", + offset: 0, + reverse: true, + limit: 20, + excludeBlocked: true, + }; + const [searchParametersBase, setSearchParametersBase] = + useState(initialSearchParams); + return ( <> - + + setSearchParametersBase({ + ...initialSearchParams, + identifier: + filterType === "playlists" + ? QTUBE_PLAYLIST_BASE + : QTUBE_VIDEO_BASE, + service: filterType === "playlists" ? "PLAYLIST" : "DOCUMENT", + description, + query: filterSearch, + offset: 0, + reverse: true, + limit: 20, + }) + } + /> { - - {/**/} + {filteredSubscriptionList.length > 0 ? ( <> - - {/**/} + s.subscriberName), + }} + /> ) : ( !isLoading && (