diff --git a/package-lock.json b/package-lock.json index c468423..c455c81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,6 @@ "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", @@ -1208,20 +1207,18 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "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", + "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==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/icons-material": { - "version": "6.4.7", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.4.7.tgz", - "integrity": "sha512-Rk8cs9ufQoLBw582Rdqq7fnSXXZTqhYRbpe1Y5SAz9lJKZP3CIdrj0PfG8HJLGw1hrsHFN/rkkm70IDzhJsG1g==", - "license": "MIT", + "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==", "dependencies": { "@babel/runtime": "^7.26.0" }, @@ -1233,7 +1230,7 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^6.4.7", + "@mui/material": "^6.3.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -1288,16 +1285,15 @@ } }, "node_modules/@mui/material": { - "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", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.3.0.tgz", + "integrity": "sha512-qhlTFyRMxfoVPxUtA5e8IvqxP0dWo2Ij7cvot7Orag+etUlZH+3UwD8gZGt+3irOoy7Ms3UNBflYjwEikUXtAQ==", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/core-downloads-tracker": "^6.4.7", - "@mui/system": "^6.4.7", - "@mui/types": "^7.2.21", - "@mui/utils": "^6.4.6", + "@mui/core-downloads-tracker": "^6.3.0", + "@mui/system": "^6.3.0", + "@mui/types": "^7.2.20", + "@mui/utils": "^6.3.0", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", @@ -1316,7 +1312,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.4.7", + "@mui/material-pigment-css": "^6.3.0", "@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" @@ -1337,13 +1333,12 @@ } }, "node_modules/@mui/private-theming": { - "version": "6.4.6", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.4.6.tgz", - "integrity": "sha512-T5FxdPzCELuOrhpA2g4Pi6241HAxRwZudzAuL9vBvniuB5YU82HCmrARw32AuCiyTfWzbrYGGpZ4zyeqqp9RvQ==", - "license": "MIT", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.3.0.tgz", + "integrity": "sha512-tdS8jvqMokltNTXg6ioRCCbVdDmZUJZa/T9VtTnX2Lwww3FTgCakst9tWLZSxm1fEE9Xp0m7onZJmgeUmWQYVw==", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/utils": "^6.4.6", + "@mui/utils": "^6.3.0", "prop-types": "^15.8.1" }, "engines": { @@ -1364,10 +1359,9 @@ } }, "node_modules/@mui/styled-engine": { - "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", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.3.0.tgz", + "integrity": "sha512-iWA6eyiPkO07AlHxRUvI7dwVRSc+84zV54kLmjUms67GJeOWVuXlu8ZO+UhCnwJxHacghxnabsMEqet5PYQmHg==", "dependencies": { "@babel/runtime": "^7.26.0", "@emotion/cache": "^11.13.5", @@ -1398,16 +1392,15 @@ } }, "node_modules/@mui/system": { - "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", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.3.0.tgz", + "integrity": "sha512-L+8hUHMNlfReKSqcnVslFrVhoNfz/jw7Fe9NfDE85R3KarvZ4O3MU9daF/lZeqEAvnYxEilkkTfDwQ7qCgJdFg==", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/private-theming": "^6.4.6", - "@mui/styled-engine": "^6.4.6", - "@mui/types": "^7.2.21", - "@mui/utils": "^6.4.6", + "@mui/private-theming": "^6.3.0", + "@mui/styled-engine": "^6.3.0", + "@mui/types": "^7.2.20", + "@mui/utils": "^6.3.0", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -1438,10 +1431,9 @@ } }, "node_modules/@mui/types": { - "version": "7.2.21", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.21.tgz", - "integrity": "sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==", - "license": "MIT", + "version": "7.2.20", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.20.tgz", + "integrity": "sha512-straFHD7L8v05l/N5vcWk+y7eL9JF0C2mtph/y4BPm3gn2Eh61dDwDB65pa8DLss3WJfDXYC7Kx5yjP0EmXpgw==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -1452,13 +1444,12 @@ } }, "node_modules/@mui/utils": { - "version": "6.4.6", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.4.6.tgz", - "integrity": "sha512-43nZeE1pJF2anGafNydUcYFPtHwAqiBiauRtaMvurdrZI3YrUjHkAu43RBsxef7OFtJMXGiHFvq43kb7lig0sA==", - "license": "MIT", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.3.0.tgz", + "integrity": "sha512-MkDBF08OPVwXhAjedyMykRojgvmf0y/jxkBWjystpfI/pasyTYrfdv4jic6s7j3y2+a+SJzS9qrD6X8ZYj/8AQ==", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/types": "^7.2.21", + "@mui/types": "^7.2.20", "@types/prop-types": "^15.7.14", "clsx": "^2.1.1", "prop-types": "^15.8.1", @@ -1820,33 +1811,6 @@ "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", @@ -1916,10 +1880,9 @@ "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==" }, "node_modules/@types/react": { - "version": "19.0.11", - "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.11.tgz", - "integrity": "sha512-vrdxRZfo9ALXth6yPfV16PYTLZwsUWhVjjC+DkfE5t1suNSbBrWC9YqSuuxJZ8Ps6z1o2ycRpIqzZJIgklq4Tw==", - "license": "MIT", + "version": "19.0.2", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.2.tgz", + "integrity": "sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==", "dependencies": { "csstype": "^3.0.2" } @@ -2241,26 +2204,6 @@ "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", @@ -2319,30 +2262,6 @@ "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", @@ -3265,26 +3184,6 @@ "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", @@ -3935,25 +3834,6 @@ "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", @@ -4133,10 +4013,9 @@ } }, "node_modules/react-intersection-observer": { - "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", + "version": "9.14.0", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.14.0.tgz", + "integrity": "sha512-AYqlmDZn85VUmlODwYym9y5OlqY2cFyIu41dkN0GJWvhdbd19Mh16mz5IH6fO1gp5V4FfQOO4m0zGc04Tj13rQ==", "peerDependencies": { "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -4804,34 +4683,6 @@ "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 714d035..bdb8dc9 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "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 9946f54..6d34ca0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,7 +7,6 @@ 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"; @@ -19,7 +18,6 @@ import { darkTheme, lightTheme } from "./styles/theme"; import DownloadWrapper from "./wrappers/DownloadWrapper"; import GlobalWrapper from "./wrappers/GlobalWrapper"; import { ScrollWrapper } from "./wrappers/ScrollWrapper.tsx"; -import { GlobalProvider } from "qapp-core"; function App() { // const themeColor = window._qdnTheme @@ -36,35 +34,28 @@ function App() { return ( - - - - setTheme(val)}> - - - - } /> - } /> - } - /> - } - /> - - - - - - + + + + setTheme(val)}> + + + + } /> + } /> + } + /> + } + /> + + + + + ); diff --git a/src/components/Publish/EditVideo/EditVideo.tsx b/src/components/Publish/EditVideo/EditVideo.tsx index 7c63b92..a3092bf 100644 --- a/src/components/Publish/EditVideo/EditVideo.tsx +++ b/src/components/Publish/EditVideo/EditVideo.tsx @@ -53,7 +53,6 @@ import { NewCrowdfundTitle, TimesIcon, } from "./EditVideo-styles.tsx"; -import { useGlobal } from "qapp-core"; const uid = new ShortUniqueId(); const shortuid = new ShortUniqueId({ length: 5 }); @@ -61,7 +60,6 @@ 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 e1a3b1d..31d1d69 100644 --- a/src/constants/Misc.ts +++ b/src/constants/Misc.ts @@ -1,6 +1,5 @@ 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 649ac03..ca1c43d 100644 --- a/src/pages/Home/Components/VideoList-styles.tsx +++ b/src/pages/Home/Components/VideoList-styles.tsx @@ -23,19 +23,18 @@ export const VideoContainer = styled(Grid)(({ theme }) => ({ })); export const VideoCardContainer = styled("div")(({ theme }) => ({ - // display: "grid", - // gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", - // gap: theme.spacing(2), - // padding: "10px", - // width: "100%", - padding: "20px", + display: "grid", + gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", + gap: theme.spacing(2), + padding: "10px", width: "100%", })); export const VideoCardCol = styled("div")({ position: "relative", - width: "100%", // Minimum width of each item - maxWidth: "300px", // Maximum width, allowing the item to fill the column + minWidth: "200px", // Minimum width of each item + maxWidth: "1fr", // 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 9a0aa70..131d530 100644 --- a/src/pages/Home/Components/VideoList.tsx +++ b/src/pages/Home/Components/VideoList.tsx @@ -1,15 +1,7 @@ import BlockIcon from "@mui/icons-material/Block"; import EditIcon from "@mui/icons-material/Edit"; -import DeleteIcon from "@mui/icons-material/Delete"; -import { - Avatar, - Box, - Skeleton, - Tooltip, - Typography, - useTheme, -} from "@mui/material"; -import React, { useCallback, useState } from "react"; +import { Avatar, Box, Tooltip, Typography, useTheme } from "@mui/material"; +import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { PlaylistSVG } from "../../../assets/svgs/PlaylistSVG.tsx"; @@ -37,18 +29,19 @@ import { VideoCardTitle, VideoUploadDate, } from "./VideoList-styles.tsx"; -import { ResourceListDisplay, useGlobal } from "qapp-core"; interface VideoListProps { - listName: string; - searchParameters: any; + videos: Video[]; } -export const VideoList = ({ listName, searchParameters }: VideoListProps) => { +export const VideoList = ({ videos }: 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(); @@ -71,198 +64,237 @@ export const VideoList = ({ listName, searchParameters }: 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 ( - { + {videos.map((video: any) => { + const fullId = video ? `${video.id}-${video.user}` : undefined; + const existingVideo = hashMapVideos[fullId]; + let hasHash = false; + let videoObj = video; + if (existingVideo) { + videoObj = existingVideo; + hasHash = true; + } + // nb. this prevents showing metadata for a video which + // belongs to a different user + if ( + videoObj?.user && + videoObj?.videoReference?.name && + videoObj.user != videoObj.videoReference.name + ) { + return null; + } + + if (hasHash && !videoObj?.videoImage && !videoObj?.image) { + return null; + } + const isPlaylist = videoObj?.service === "PLAYLIST"; + + if (isPlaylist) { return ( - //
{status === "LOADING" ? skeletonVideoCard : "has error"}
- skeletonVideoCard + setShowIcons(videoObj.id)} + onMouseLeave={() => setShowIcons(null)} + key={videoObj.id} + > + + {videoObj?.user === username && ( + + + { + dispatch(setEditPlaylist(videoObj)); + }} + /> + + + )} + + {videoObj?.user !== username && ( + + + { + blockUserFunc(videoObj?.user); + }} + /> + + + )} + + + { + if (!hasHash) return; + navigate(`/playlist/${videoObj?.user}/${videoObj?.id}`); + }} + > + + {videoObj?.title} + + { + e.stopPropagation(); + navigate(`/channel/${videoObj?.user}`); + }} + > + + + {videoObj?.user} + + + {videoObj?.created && ( + + {formatDate(videoObj.created)} + + )} + + + + + + + ); - }} - listItem={listItem} - /> + } + + return ( + setShowIcons(videoObj.id)} + onMouseLeave={() => setShowIcons(null)} + > + + {videoObj?.user === username && ( + + + { + dispatch(setEditVideo(videoObj)); + }} + /> + + + )} + + {videoObj?.user !== username && ( + + + { + blockUserFunc(videoObj?.user); + }} + /> + + + )} + + { + navigate(`/video/${videoObj?.user}/${videoObj?.id}`); + }} + > + {videoObj?.duration > minDuration && ( + + + {formatTime(videoObj.duration)} + + + )} + + + {videoObj.title} + + + { + e.stopPropagation(); + navigate(`/channel/${videoObj?.user}`); + }} + > + + + {videoObj?.user} + + + {videoObj?.created && ( + + + {formatDate(videoObj.created)} + + + )} + + + + ); + })}
); }; diff --git a/src/pages/Home/Components/VideoListComponentLevel.tsx b/src/pages/Home/Components/VideoListComponentLevel.tsx index 8de3614..4989101 100644 --- a/src/pages/Home/Components/VideoListComponentLevel.tsx +++ b/src/pages/Home/Components/VideoListComponentLevel.tsx @@ -106,17 +106,7 @@ export const VideoListComponentLevel = ({ mode }: VideoListProps) => { alignItems: "center", }} > - + diff --git a/src/pages/Home/Home-State.ts b/src/pages/Home/Home-State.ts index 282f9f7..77da107 100644 --- a/src/pages/Home/Home-State.ts +++ b/src/pages/Home/Home-State.ts @@ -135,13 +135,7 @@ export const useHomeState = (mode: string) => { changeTab, videos, isLoading, - getVideosHandler, - filterName, - filterSearch, - filterValue, - filterType, - selectedCategoryVideos, - selectedSubCategoryVideos, filteredSubscriptionList, + getVideosHandler, }; }; diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 43fd0c3..696664f 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,20 +1,13 @@ import { TabContext, TabList, TabPanel } from "@mui/lab"; import { Box, Tab, useMediaQuery } from "@mui/material"; -import React, { useState } from "react"; +import React 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; @@ -25,12 +18,6 @@ export const Home = ({ mode }: HomeProps) => { changeTab, videos, isLoading, - filterName, - filterSearch, - filterValue, - filterType, - selectedCategoryVideos, - selectedSubCategoryVideos, filteredSubscriptionList, getVideosHandler, } = useHomeState(mode); @@ -59,45 +46,10 @@ 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 && (