Qortal/q-support
3
0
Fork 1
mirror of https://github.com/Qortal/q-support.git synced 2025-02-11 17:55:50 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #7 from QuickMythril/qshare-20240520

Browse Source 
Q-Support 1.0
This commit is contained in:
Qortal Dev 2024-06-14 14:20:18 -06:00 committed by GitHub
commit 6bbe68a3fa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
99 changed files with 13780 additions and 12429 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
.eslintrc.js
View File

@ -1,16 +1,16 @@
module.exports = { module.exports = {
env: { browser: true, es2020: true }, env: { browser: true, es2020: true },
extends: [ extends: [
'eslint:recommended', 'eslint:recommended',
'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended', 'plugin:react-hooks/recommended',
], ],
parser: '@typescript-eslint/parser', parser: '@typescript-eslint/parser',
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
plugins: ['react-refresh'], plugins: ['react-refresh'],
rules: { rules: {
'react-refresh/only-export-components': 'warn', 'react-refresh/only-export-components': 'warn',
'@typescript-eslint/no-explicit-any': "off" '@typescript-eslint/no-explicit-any': "off"
}, },
} }

49
.gitignore vendored
View File

@ -1,25 +1,26 @@
# Logs # Logs
logs logs
*.log *.log
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
pnpm-debug.log* pnpm-debug.log*
lerna-debug.log* lerna-debug.log*
node_modules node_modules
dist dist
dist-ssr dist-ssr
*.local *.local
# Editor directories and files # Editor directories and files
.vscode/* src/assets/icons/*
!.vscode/extensions.json .vscode/*
.idea !.vscode/extensions.json
.DS_Store .idea
*.suo .DS_Store
*.ntvs* *.suo
*.njsproj *.ntvs*
*.sln *.njsproj
*.sw? *.sln
*.sw?
*.zip *.zip

20
.prettierrc
View File

@ -1,10 +1,10 @@
{ {
"printWidth": 80, "printWidth": 80,
"singleQuote": false, "singleQuote": false,
"trailingComma": "es5", "trailingComma": "es5",
"bracketSpacing": true, "bracketSpacing": true,
"jsxBracketSameLine": false, "jsxBracketSameLine": false,
"arrowParens": "avoid", "arrowParens": "avoid",
"tabWidth": 2, "tabWidth": 2,
"semi": true "semi": true
} }

4
README.md
View File

@ -1,2 +1,2 @@
# q-support # q-support
This Q-App lets users submit issues involving the Qortal Core, UI, and Q-Apps to the Qortal Dev team. This Q-App lets users submit issues involving the Qortal Core, UI, and Q-Apps to the Qortal Dev team.

26
index.html
View File

@ -1,13 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Q-Support</title> <title>Q-Support</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

15060
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

96
package.json
View File

@ -1,48 +1,48 @@
{ {
"name": "qsupport", "name": "qsupport",
"private": true, "private": true,
"version": "1.0.0", "version": "1.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc && vite build", "build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@emotion/react": "^11.10.6", "@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6", "@emotion/styled": "^11.10.6",
"@mui/icons-material": "^5.11.11", "@mui/icons-material": "^5.11.11",
"@mui/material": "^5.11.13", "@mui/material": "^5.11.13",
"@reduxjs/toolkit": "^1.9.3", "@reduxjs/toolkit": "^1.9.3",
"compressorjs": "^1.2.1", "compressorjs": "^1.2.1",
"dompurify": "^3.0.6", "dompurify": "^3.0.6",
"localforage": "^1.10.0", "localforage": "^1.10.0",
"moment": "^2.29.4", "moment": "^2.29.4",
"prettier": "^3.2.4", "prettier": "^3.2.4",
"quill-image-resize-module-react": "^3.0.0", "quill-image-resize-module-react": "^3.0.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-dropzone": "^14.2.3", "react-dropzone": "^14.2.3",
"react-intersection-observer": "^9.4.3", "react-intersection-observer": "^9.4.3",
"react-quill": "^2.0.0", "react-quill": "^2.0.0",
"react-redux": "^8.0.5", "react-redux": "^8.0.5",
"react-rnd": "^10.4.1", "react-rnd": "^10.4.1",
"react-router-dom": "^6.9.0", "react-router-dom": "^6.9.0",
"react-toastify": "^9.1.2", "react-toastify": "^9.1.2",
"short-unique-id": "^4.4.4", "short-unique-id": "^4.4.4",
"ts-key-enum": "^2.0.12" "ts-key-enum": "^2.0.12"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.57.1", "@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.57.1", "@typescript-eslint/parser": "^5.57.1",
"@vitejs/plugin-react": "^4.0.0", "@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.38.0", "eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4", "eslint-plugin-react-refresh": "^0.3.4",
"typescript": "^5.0.2", "typescript": "^5.0.2",
"vite": "6.0.0-alpha.1" "vite": "6.0.0-alpha.1"
} }
} }

86
src/App.css
View File

@ -1,43 +1,43 @@
#root { #root {
max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
} }
.logo { .logo {
height: 6em; height: 6em;
padding: 1.5em; padding: 1.5em;
will-change: filter; will-change: filter;
transition: filter 300ms; transition: filter 300ms;
} }
.logo:hover { .logo:hover {
filter: drop-shadow(0 0 2em #646cffaa); filter: drop-shadow(0 0 2em #646cffaa);
} }
.logo.react:hover { .logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa); filter: drop-shadow(0 0 2em #61dafbaa);
} }
@keyframes logo-spin { @keyframes logo-spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo { a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear; animation: logo-spin infinite 20s linear;
} }
} }
.card { .card {
padding: 2em; padding: 2em;
} }
.read-the-docs { .read-the-docs {
color: #888; color: #888;
} }

8
src/App.tsx
View File

@ -1,4 +1,4 @@
import { useState } from "react"; import { useEffect, useState } from "react";
import { Route, Routes } from "react-router-dom"; import { Route, Routes } from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles"; import { ThemeProvider } from "@mui/material/styles";
import { CssBaseline } from "@mui/material"; import { CssBaseline } from "@mui/material";
@ -11,12 +11,16 @@ import { Home } from "./pages/Home/Home";
import { IssueContent } from "./pages/IssueContent/IssueContent.tsx"; import { IssueContent } from "./pages/IssueContent/IssueContent.tsx";
import DownloadWrapper from "./wrappers/DownloadWrapper"; import DownloadWrapper from "./wrappers/DownloadWrapper";
import { IndividualProfile } from "./pages/IndividualProfile/IndividualProfile"; import { IndividualProfile } from "./pages/IndividualProfile/IndividualProfile";
import { fetchFeesRedux } from "./constants/PublishFees/FeePricePublish/FeePricePublish.ts";
function App() { function App() {
// const themeColor = window._qdnTheme // const themeColor = window._qdnTheme
const [theme, setTheme] = useState("dark"); const [theme, setTheme] = useState("dark");
useEffect(() => {
fetchFeesRedux();
}, []);
return ( return (
<Provider store={store}> <Provider store={store}>
<ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}> <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>

BIN
src/assets/icons/ClosedIcon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/icons/CompleteIcon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 132 KiB

BIN
src/assets/icons/InProgressIcon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.1 KiB

BIN
src/assets/icons/OpenIcon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/img/Q-SupportIcon(AlphaX).webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
src/assets/img/Q-SupportIcon.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB

50
src/assets/svgs/AccountCircleSVG.tsx
View File

@ -1,25 +1,25 @@
interface AccountCircleSVGProps { interface AccountCircleSVGProps {
color: string color: string
height: string height: string
width: string width: string
} }
export const AccountCircleSVG: React.FC<AccountCircleSVGProps> = ({ export const AccountCircleSVG: React.FC<AccountCircleSVGProps> = ({
color, color,
height, height,
width width
}) => { }) => {
return ( return (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
height={height} height={height}
viewBox="0 96 960 960" viewBox="0 96 960 960"
width={width} width={width}
> >
<path <path
fill={color} fill={color}
d="M222 801q63-44 125-67.5T480 710q71 0 133.5 23.5T739 801q44-54 62.5-109T820 576q0-145-97.5-242.5T480 236q-145 0-242.5 97.5T140 576q0 61 19 116t63 109Zm257.814-195Q422 606 382.5 566.314q-39.5-39.686-39.5-97.5t39.686-97.314q39.686-39.5 97.5-39.5t97.314 39.686q39.5 39.686 39.5 97.5T577.314 566.5q-39.686 39.5-97.5 39.5Zm.654 370Q398 976 325 944.5q-73-31.5-127.5-86t-86-127.266Q80 658.468 80 575.734T111.5 420.5q31.5-72.5 86-127t127.266-86q72.766-31.5 155.5-31.5T635.5 207.5q72.5 31.5 127 86t86 127.032q31.5 72.532 31.5 155T848.5 731q-31.5 73-86 127.5t-127.032 86q-72.532 31.5-155 31.5ZM480 916q55 0 107.5-16T691 844q-51-36-104-55t-107-19q-54 0-107 19t-104 55q51 40 103.5 56T480 916Zm0-370q34 0 55.5-21.5T557 469q0-34-21.5-55.5T480 392q-34 0-55.5 21.5T403 469q0 34 21.5 55.5T480 546Zm0-77Zm0 374Z" d="M222 801q63-44 125-67.5T480 710q71 0 133.5 23.5T739 801q44-54 62.5-109T820 576q0-145-97.5-242.5T480 236q-145 0-242.5 97.5T140 576q0 61 19 116t63 109Zm257.814-195Q422 606 382.5 566.314q-39.5-39.686-39.5-97.5t39.686-97.314q39.686-39.5 97.5-39.5t97.314 39.686q39.5 39.686 39.5 97.5T577.314 566.5q-39.686 39.5-97.5 39.5Zm.654 370Q398 976 325 944.5q-73-31.5-127.5-86t-86-127.266Q80 658.468 80 575.734T111.5 420.5q31.5-72.5 86-127t127.266-86q72.766-31.5 155.5-31.5T635.5 207.5q72.5 31.5 127 86t86 127.032q31.5 72.532 31.5 155T848.5 731q-31.5 73-86 127.5t-127.032 86q-72.532 31.5-155 31.5ZM480 916q55 0 107.5-16T691 844q-51-36-104-55t-107-19q-54 0-107 19t-104 55q51 40 103.5 56T480 916Zm0-370q34 0 55.5-21.5T557 469q0-34-21.5-55.5T480 392q-34 0-55.5 21.5T403 469q0 34 21.5 55.5T480 546Zm0-77Zm0 374Z"
/> />
</svg> </svg>
) )
} }

46
src/assets/svgs/CircleSVG.tsx
View File

@ -1,23 +1,23 @@
import { IconTypes } from "./IconTypes"; import { IconTypes } from "./IconTypes";
export const CircleSVG: React.FC<IconTypes> = ({ export const CircleSVG: React.FC<IconTypes> = ({
color, color,
height, height,
width, width,
className, className,
onClickFunc, onClickFunc,
}) => { }) => {
return ( return (
<svg <svg
onClick={onClickFunc} onClick={onClickFunc}
className={className} className={className}
fill={color} fill={color}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
height={height} height={height}
viewBox="0 -960 960 960" viewBox="0 -960 960 960"
width={width} width={width}
> >
<path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /> <path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
</svg> </svg>
); );
}; };

46
src/assets/svgs/DarkModeSVG.tsx
View File

@ -1,23 +1,23 @@
import { IconTypes } from './IconTypes' import { IconTypes } from './IconTypes'
export const DarkModeSVG: React.FC<IconTypes> = ({ export const DarkModeSVG: React.FC<IconTypes> = ({
color, color,
height, height,
width, width,
className, className,
onClickFunc onClickFunc
}) => { }) => {
return ( return (
<svg <svg
className={className} className={className}
onClick={onClickFunc} onClick={onClickFunc}
fill={color} fill={color}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
height={height} height={height}
viewBox="0 96 960 960" viewBox="0 96 960 960"
width={width} width={width}
> >
<path d="M480 936q-150 0-255-105T120 576q0-150 105-255t255-105q8 0 17 .5t23 1.5q-36 32-56 79t-20 99q0 90 63 153t153 63q52 0 99-18.5t79-51.5q1 12 1.5 19.5t.5 14.5q0 150-105 255T480 936Zm0-60q109 0 190-67.5T771 650q-25 11-53.667 16.5Q688.667 672 660 672q-114.689 0-195.345-80.655Q384 510.689 384 396q0-24 5-51.5t18-62.5q-98 27-162.5 109.5T180 576q0 125 87.5 212.5T480 876Zm-4-297Z" /> <path d="M480 936q-150 0-255-105T120 576q0-150 105-255t255-105q8 0 17 .5t23 1.5q-36 32-56 79t-20 99q0 90 63 153t153 63q52 0 99-18.5t79-51.5q1 12 1.5 19.5t.5 14.5q0 150-105 255T480 936Zm0-60q109 0 190-67.5T771 650q-25 11-53.667 16.5Q688.667 672 660 672q-114.689 0-195.345-80.655Q384 510.689 384 396q0-24 5-51.5t18-62.5q-98 27-162.5 109.5T180 576q0 125 87.5 212.5T480 876Zm-4-297Z" />
</svg> </svg>
) )
} }

26
src/assets/svgs/DownloadedLight.tsx
View File

@ -1,13 +1,13 @@
import { IconTypes } from './IconTypes' import { IconTypes } from './IconTypes'
export const DownloadedLight: React.FC<IconTypes> = ({ export const DownloadedLight: React.FC<IconTypes> = ({
color, color,
height, height,
width, width,
className, className,
onClickFunc onClickFunc
}) => { }) => {
return ( return (
<svg className={className} xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 0 24 24" width={width} fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M5 18h14v2H5v-2zm4.6-2.7L5 10.7l2-1.9 2.6 2.6L17 4l2 2-9.4 9.3z"/></svg> <svg className={className} xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 0 24 24" width={width} fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M5 18h14v2H5v-2zm4.6-2.7L5 10.7l2-1.9 2.6 2.6L17 4l2 2-9.4 9.3z"/></svg>
) )
} }

26
src/assets/svgs/DownloadingLight.tsx
View File

@ -1,13 +1,13 @@
import { IconTypes } from './IconTypes' import { IconTypes } from './IconTypes'
export const DownloadingLight: React.FC<IconTypes> = ({ export const DownloadingLight: React.FC<IconTypes> = ({
color, color,
height, height,
width, width,
className, className,
onClickFunc onClickFunc
}) => { }) => {
return ( return (
<svg className={className} xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height={height} viewBox="0 0 24 24" width={width} fill="#FFFFFF"><g><rect fill="none" /></g><g><g><path d="M18.32,4.26C16.84,3.05,15.01,2.25,13,2.05v2.02c1.46,0.18,2.79,0.76,3.9,1.62L18.32,4.26z M19.93,11h2.02 c-0.2-2.01-1-3.84-2.21-5.32L18.31,7.1C19.17,8.21,19.75,9.54,19.93,11z M18.31,16.9l1.43,1.43c1.21-1.48,2.01-3.32,2.21-5.32 h-2.02C19.75,14.46,19.17,15.79,18.31,16.9z M13,19.93v2.02c2.01-0.2,3.84-1,5.32-2.21l-1.43-1.43 C15.79,19.17,14.46,19.75,13,19.93z M13,12V7h-2v5H7l5,5l5-5H13z M11,19.93v2.02c-5.05-0.5-9-4.76-9-9.95s3.95-9.45,9-9.95v2.02 C7.05,4.56,4,7.92,4,12S7.05,19.44,11,19.93z"/></g></g></svg> <svg className={className} xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height={height} viewBox="0 0 24 24" width={width} fill="#FFFFFF"><g><rect fill="none" /></g><g><g><path d="M18.32,4.26C16.84,3.05,15.01,2.25,13,2.05v2.02c1.46,0.18,2.79,0.76,3.9,1.62L18.32,4.26z M19.93,11h2.02 c-0.2-2.01-1-3.84-2.21-5.32L18.31,7.1C19.17,8.21,19.75,9.54,19.93,11z M18.31,16.9l1.43,1.43c1.21-1.48,2.01-3.32,2.21-5.32 h-2.02C19.75,14.46,19.17,15.79,18.31,16.9z M13,19.93v2.02c2.01-0.2,3.84-1,5.32-2.21l-1.43-1.43 C15.79,19.17,14.46,19.75,13,19.93z M13,12V7h-2v5H7l5,5l5-5H13z M11,19.93v2.02c-5.05-0.5-9-4.76-9-9.95s3.95-9.45,9-9.95v2.02 C7.05,4.56,4,7.92,4,12S7.05,19.44,11,19.93z"/></g></g></svg>
) )
} }

46
src/assets/svgs/EmptyCircleSVG.tsx
View File

@ -1,23 +1,23 @@
import { IconTypes } from "./IconTypes"; import { IconTypes } from "./IconTypes";
export const EmptyCircleSVG: React.FC<IconTypes> = ({ export const EmptyCircleSVG: React.FC<IconTypes> = ({
color, color,
height, height,
width, width,
className, className,
onClickFunc, onClickFunc,
}) => { }) => {
return ( return (
<svg onClick={onClickFunc} <svg onClick={onClickFunc}
className={className} className={className}
fill={color} fill={color}
height={height} height={height}
width={width} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg> width={width} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
); );
}; };

44
src/assets/svgs/ExpandMoreSVG.tsx
View File

@ -1,22 +1,22 @@
import { IconTypes } from "./IconTypes"; import { IconTypes } from "./IconTypes";
export const ExpandMoreSVG: React.FC<IconTypes> = ({ export const ExpandMoreSVG: React.FC<IconTypes> = ({
color, color,
height, height,
width, width,
className, className,
onClickFunc onClickFunc
}) => { }) => {
return ( return (
<svg <svg
onClick={onClickFunc} onClick={onClickFunc}
height={height} height={height}
width={width} width={width}
fill={color} fill={color}
className={className} className={className}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960" viewBox="0 -960 960 960"
> >
<path d="M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z" /> <path d="M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z" />
</svg> </svg>
); );
}; };

14
src/assets/svgs/IconTypes.ts
View File

@ -1,7 +1,7 @@
export interface IconTypes { export interface IconTypes {
color?: string; color?: string;
height: string; height: string;
width: string; width: string;
className?: string; className?: string;
onClickFunc?: (e?: any) => void; onClickFunc?: (e?: any) => void;
} }

46
src/assets/svgs/LightModeSVG.tsx
View File

@ -1,23 +1,23 @@
import { IconTypes } from './IconTypes' import { IconTypes } from './IconTypes'
export const LightModeSVG: React.FC<IconTypes> = ({ export const LightModeSVG: React.FC<IconTypes> = ({
color, color,
height, height,
width, width,
className, className,
onClickFunc onClickFunc
}) => { }) => {
return ( return (
<svg <svg
className={className} className={className}
onClick={onClickFunc} onClick={onClickFunc}
fill={color} fill={color}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
height={height} height={height}
viewBox="0 96 960 960" viewBox="0 96 960 960"
width={width} width={width}
> >
<path d="M479.765 716Q538 716 579 675.235q41-40.764 41-99Q620 518 579.235 477q-40.764-41-99-41Q422 436 381 476.765q-41 40.764-41 99Q340 634 380.765 675q40.764 41 99 41Zm.235 60q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM70 606q-12.75 0-21.375-8.675Q40 588.649 40 575.825 40 563 48.625 554.5T70 546h100q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T170 606H70Zm720 0q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T790 546h100q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T890 606H790ZM479.825 296Q467 296 458.5 287.375T450 266V166q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T510 166v100q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625Zm0 720q-12.825 0-21.325-8.62-8.5-8.63-8.5-21.38V886q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T510 886v100q0 12.75-8.675 21.38-8.676 8.62-21.5 8.62ZM240 378l-57-56q-9-9-8.629-21.603.37-12.604 8.526-21.5 8.896-8.897 21.5-8.897Q217 270 226 279l56 57q8 9 8 21t-8 20.5q-8 8.5-20.5 8.5t-21.5-8Zm494 495-56-57q-8-9-8-21.375T678.5 774q8.5-9 20.5-9t21 9l57 56q9 9 8.629 21.603-.37 12.604-8.526 21.5-8.896 8.897-21.5 8.897Q743 882 734 873Zm-56-495q-9-9-9-21t9-21l56-57q9-9 21.603-8.629 12.604.37 21.5 8.526 8.897 8.896 8.897 21.5Q786 313 777 322l-57 56q-8 8-20.364 8-12.363 0-21.636-8ZM182.897 873.103q-8.897-8.896-8.897-21.5Q174 839 183 830l57-56q8.8-9 20.9-9 12.1 0 20.709 9Q291 783 291 795t-9 21l-56 57q-9 9-21.603 8.629-12.604-.37-21.5-8.526ZM480 576Z" /> <path d="M479.765 716Q538 716 579 675.235q41-40.764 41-99Q620 518 579.235 477q-40.764-41-99-41Q422 436 381 476.765q-41 40.764-41 99Q340 634 380.765 675q40.764 41 99 41Zm.235 60q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM70 606q-12.75 0-21.375-8.675Q40 588.649 40 575.825 40 563 48.625 554.5T70 546h100q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T170 606H70Zm720 0q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T790 546h100q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T890 606H790ZM479.825 296Q467 296 458.5 287.375T450 266V166q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T510 166v100q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625Zm0 720q-12.825 0-21.325-8.62-8.5-8.63-8.5-21.38V886q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T510 886v100q0 12.75-8.675 21.38-8.676 8.62-21.5 8.62ZM240 378l-57-56q-9-9-8.629-21.603.37-12.604 8.526-21.5 8.896-8.897 21.5-8.897Q217 270 226 279l56 57q8 9 8 21t-8 20.5q-8 8.5-20.5 8.5t-21.5-8Zm494 495-56-57q-8-9-8-21.375T678.5 774q8.5-9 20.5-9t21 9l57 56q9 9 8.629 21.603-.37 12.604-8.526 21.5-8.896 8.897-21.5 8.897Q743 882 734 873Zm-56-495q-9-9-9-21t9-21l56-57q9-9 21.603-8.629 12.604.37 21.5 8.526 8.897 8.896 8.897 21.5Q786 313 777 322l-57 56q-8 8-20.364 8-12.363 0-21.636-8ZM182.897 873.103q-8.897-8.896-8.897-21.5Q174 839 183 830l57-56q8.8-9 20.9-9 12.1 0 20.709 9Q291 783 291 795t-9 21l-56 57q-9 9-21.603 8.629-12.604-.37-21.5-8.526ZM480 576Z" />
</svg> </svg>
) )
} }

36
src/assets/svgs/PlaylistSVG.tsx
View File

@ -1,18 +1,18 @@
import { IconTypes } from "./IconTypes"; import { IconTypes } from "./IconTypes";
export const PlaylistSVG: React.FC<IconTypes> = ({ export const PlaylistSVG: React.FC<IconTypes> = ({
color, color,
height, height,
width, width,
className, className,
onClickFunc onClickFunc
}) => { }) => {
return ( return (
<svg onClick={onClickFunc} <svg onClick={onClickFunc}
className={className} className={className}
fill={color} fill={color}
height={height} height={height}
width={width} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path d="M120-320v-80h320v80H120Zm0-160v-80h480v80H120Zm0-160v-80h480v80H120Zm520 520v-320l240 160-240 160Z"/></svg> width={width} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path d="M120-320v-80h320v80H120Zm0-160v-80h480v80H120Zm0-160v-80h480v80H120Zm520 520v-320l240 160-240 160Z"/></svg>
); );
}; };

46
src/assets/svgs/TimesSVG.tsx
View File

@ -1,23 +1,23 @@
import { IconTypes } from "./IconTypes"; import { IconTypes } from "./IconTypes";
export const TimesSVG: React.FC<IconTypes> = ({ export const TimesSVG: React.FC<IconTypes> = ({
color, color,
height, height,
width, width,
className, className,
onClickFunc onClickFunc
}) => { }) => {
return ( return (
<svg <svg
onClick={onClickFunc} onClick={onClickFunc}
className={className} className={className}
fill={color} fill={color}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
height={height} height={height}
viewBox="0 -960 960 960" viewBox="0 -960 960 960"
width={width} width={width}
> >
<path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" /> <path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
</svg> </svg>
); );
}; };

178
src/components/EditIssue/EditIssue.tsx
View File

@ -25,8 +25,8 @@ import { QSUPPORT_FILE_BASE } from "../../constants/Identifiers.ts";
import { MultiplePublish } from "../common/MultiplePublish/MultiplePublishAll"; import { MultiplePublish } from "../common/MultiplePublish/MultiplePublishAll";
import { TextEditor } from "../common/TextEditor/TextEditor"; import { TextEditor } from "../common/TextEditor/TextEditor";
import { extractTextFromHTML } from "../common/TextEditor/utils"; import { extractTextFromHTML } from "../common/TextEditor/utils";
import { allCategoryData } from "../../constants/Categories/1stCategories.ts"; import { allCategoryData } from "../../constants/Categories/Categories.ts";
import { titleFormatter } from "../../constants/Misc.ts"; import { log, titleFormatter } from "../../constants/Misc.ts";
import { import {
CategoryList, CategoryList,
CategoryListRef, CategoryListRef,
@ -37,6 +37,13 @@ import {
ImagePublisherRef, ImagePublisherRef,
} from "../common/ImagePublisher/ImagePublisher.tsx"; } from "../common/ImagePublisher/ImagePublisher.tsx";
import { ThemeButtonBright } from "../../pages/Home/Home-styles.tsx"; import { ThemeButtonBright } from "../../pages/Home/Home-styles.tsx";
import {
AutocompleteQappNames,
QappNamesRef,
} from "../common/AutocompleteQappNames.tsx";
import { payPublishFeeQORT } from "../../constants/PublishFees/SendFeeFunctions.ts";
import { feeAmountBase } from "../../constants/PublishFees/FeeData.tsx";
import { verifyPayment } from "../../constants/PublishFees/VerifyPayment.ts";
const uid = new ShortUniqueId(); const uid = new ShortUniqueId();
const shortuid = new ShortUniqueId({ length: 5 }); const shortuid = new ShortUniqueId({ length: 5 });
@ -58,6 +65,7 @@ interface VideoFile {
identifier?: string; identifier?: string;
filename?: string; filename?: string;
} }
export const EditIssue = () => { export const EditIssue = () => {
const theme = useTheme(); const theme = useTheme();
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -65,9 +73,13 @@ export const EditIssue = () => {
const userAddress = useSelector( const userAddress = useSelector(
(state: RootState) => state.auth?.user?.address (state: RootState) => state.auth?.user?.address
); );
const editFileProperties = useSelector( const editIssueProperties = useSelector(
(state: RootState) => state.file.editFileProperties (state: RootState) => state.file.editFileProperties
); );
const QappNames = useSelector(
(state: RootState) => state.file.publishedQappNames
);
const [publishes, setPublishes] = useState<any>(null); const [publishes, setPublishes] = useState<any>(null);
const [isOpenMultiplePublish, setIsOpenMultiplePublish] = useState(false); const [isOpenMultiplePublish, setIsOpenMultiplePublish] = useState(false);
const [videoPropertiesToSetToRedux, setVideoPropertiesToSetToRedux] = const [videoPropertiesToSetToRedux, setVideoPropertiesToSetToRedux] =
@ -78,9 +90,11 @@ export const EditIssue = () => {
const [coverImage, setCoverImage] = useState<string>(""); const [coverImage, setCoverImage] = useState<string>("");
const [file, setFile] = useState(null); const [file, setFile] = useState(null);
const [files, setFiles] = useState<VideoFile[]>([]); const [files, setFiles] = useState<VideoFile[]>([]);
const [editCategories, setEditCategories] = useState<string[]>([]); const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
const [isIssuePaid, setIsIssuePaid] = useState<boolean>(true);
const categoryListRef = useRef<CategoryListRef>(null); const categoryListRef = useRef<CategoryListRef>(null);
const imagePublisherRef = useRef<ImagePublisherRef>(null); const imagePublisherRef = useRef<ImagePublisherRef>(null);
const autocompleteRef = useRef<QappNamesRef>(null);
const { getRootProps, getInputProps } = useDropzone({ const { getRootProps, getInputProps } = useDropzone({
maxFiles: 10, maxFiles: 10,
@ -118,21 +132,25 @@ export const EditIssue = () => {
}); });
useEffect(() => { useEffect(() => {
if (editFileProperties) { if (editIssueProperties) {
setTitle(editFileProperties?.title || ""); setTitle(editIssueProperties?.title || "");
setFiles(editFileProperties?.files || []); setFiles(editIssueProperties?.files || []);
if (editFileProperties?.htmlDescription) { if (editIssueProperties?.htmlDescription) {
setDescription(editFileProperties?.htmlDescription); setDescription(editIssueProperties?.htmlDescription);
} else if (editFileProperties?.fullDescription) { } else if (editIssueProperties?.fullDescription) {
const paragraph = `<p>${editFileProperties?.fullDescription}</p>`; const paragraph = `<p>${editIssueProperties?.fullDescription}</p>`;
setDescription(paragraph); setDescription(paragraph);
} }
verifyPayment(editIssueProperties).then(isIssuePaid => {
setIsIssuePaid(isIssuePaid);
});
const categoriesFromEditFile = const categoriesFromEditFile =
getCategoriesFromObject(editFileProperties); getCategoriesFromObject(editIssueProperties);
setEditCategories(categoriesFromEditFile); setSelectedCategories(categoriesFromEditFile);
} }
}, [editFileProperties]); }, [editIssueProperties]);
const onClose = () => { const onClose = () => {
dispatch(setEditFile(null)); dispatch(setEditFile(null));
setVideoPropertiesToSetToRedux(null); setVideoPropertiesToSetToRedux(null);
@ -142,14 +160,22 @@ export const EditIssue = () => {
setCoverImage(""); setCoverImage("");
}; };
async function publishQDNResource() { async function publishQDNResource(payFee: boolean) {
try { try {
const categoryList = categoryListRef.current?.getSelectedCategories(); if (!categoryListRef.current) throw new Error("No CategoryListRef found");
if (!description) throw new Error("Please enter a description");
if (!categoryList[0]) throw new Error("Please select a category");
if (!editFileProperties) return;
if (!userAddress) throw new Error("Unable to locate user address"); if (!userAddress) throw new Error("Unable to locate user address");
if (!description) throw new Error("Please enter a description");
const allCategoriesSelected = !selectedCategories.includes("");
if (!allCategoriesSelected)
throw new Error("All Categories must be selected");
console.log("categories", selectedCategories);
const QappsCategoryID = "3";
if (
selectedCategories[0] === QappsCategoryID &&
!autocompleteRef?.current?.getSelectedValue()
)
throw new Error("Select a published Q-App");
let errorMsg = ""; let errorMsg = "";
let name = ""; let name = "";
if (username) { if (username) {
@ -160,7 +186,7 @@ export const EditIssue = () => {
"Cannot publish without access to your name. Please authenticate."; "Cannot publish without access to your name. Please authenticate.";
} }
if (editFileProperties?.user !== username) { if (editIssueProperties?.user !== username) {
errorMsg = "Cannot publish another user's resource"; errorMsg = "Cannot publish another user's resource";
} }
@ -223,9 +249,8 @@ export const EditIssue = () => {
filename = alphanumericString; filename = alphanumericString;
} }
let metadescription = const categoryString = `**${categoryListRef.current?.getSelectedCategories()}**`;
`**${categoryListRef.current?.getCategoriesFetchString()}**` + let metadescription = categoryString + fullDescription.slice(0, 150);
fullDescription.slice(0, 150);
const requestBodyVideo: any = { const requestBodyVideo: any = {
action: "PUBLISH_QDN_RESOURCE", action: "PUBLISH_QDN_RESOURCE",
@ -248,23 +273,50 @@ export const EditIssue = () => {
size: file.size, size: file.size,
}); });
} }
const selectedQappName = autocompleteRef?.current?.getSelectedValue();
const fileObject: any = { const issueObject: any = {
title, title,
version: editFileProperties.version, version: editIssueProperties.version,
fullDescription, fullDescription,
htmlDescription: description, htmlDescription: description,
commentsId: editFileProperties.commentsId, commentsId: editIssueProperties.commentsId,
...categoryListRef.current?.categoriesToObject(), ...categoryListRef.current?.categoriesToObject(),
files: fileReferences, files: fileReferences,
images: imagePublisherRef?.current?.getImageArray(), images: imagePublisherRef?.current?.getImageArray(),
QappName: selectedQappName,
feeData: editIssueProperties?.feeData,
}; };
if (payFee) {
const publishFeeResponse = await payPublishFeeQORT(feeAmountBase);
if (!publishFeeResponse) {
dispatch(
setNotification({
msg: "Fee publish rejected by user.",
alertType: "error",
})
);
return;
}
if (log) console.log("feeResponse: ", publishFeeResponse);
let metadescription = issueObject.feeData = { signature: publishFeeResponse };
`**${categoryListRef.current?.getCategoriesFetchString()}**` + dispatch(updateInHashMap(issueObject)); // shows issue as paid right away?
fullDescription.slice(0, 150); }
const fileObjectToBase64 = await objectToBase64(fileObject); const QappNameString = autocompleteRef?.current?.getQappNameFetchString();
const categoryString =
categoryListRef.current?.getCategoriesFetchString(selectedCategories);
const metaDataString = `**${categoryString + QappNameString}**`;
let metadescription = metaDataString + fullDescription.slice(0, 150);
if (log) console.log("description is: ", metadescription);
if (log) console.log("description length is: ", metadescription.length);
if (log) console.log("characters left:", 240 - metadescription.length);
if (log)
console.log("% of characters used:", metadescription.length / 240);
const fileObjectToBase64 = await objectToBase64(issueObject);
// Description is obtained from raw data // Description is obtained from raw data
const requestBodyJson: any = { const requestBodyJson: any = {
@ -274,7 +326,7 @@ export const EditIssue = () => {
data64: fileObjectToBase64, data64: fileObjectToBase64,
title: title.slice(0, 50), title: title.slice(0, 50),
description: metadescription, description: metadescription,
identifier: editFileProperties.id, identifier: editIssueProperties.id,
tag1: QSUPPORT_FILE_BASE, tag1: QSUPPORT_FILE_BASE,
filename: `video_metadata.json`, filename: `video_metadata.json`,
}; };
@ -287,10 +339,13 @@ export const EditIssue = () => {
setPublishes(multiplePublish); setPublishes(multiplePublish);
setIsOpenMultiplePublish(true); setIsOpenMultiplePublish(true);
setVideoPropertiesToSetToRedux({ setVideoPropertiesToSetToRedux({
...editFileProperties, ...editIssueProperties,
...fileObject, ...issueObject,
}); });
} catch (error: any) { } catch (error: any) {
console.log("error is: ", error);
if (error === "User declined request") return;
let notificationObj: any = null; let notificationObj: any = null;
if (typeof error === "string") { if (typeof error === "string") {
notificationObj = { notificationObj = {
@ -315,26 +370,15 @@ export const EditIssue = () => {
} }
} }
const handleOnchange = (index: number, type: string, value: string) => { const isShowQappNameTextField = () => {
// setFiles((prev) => { const QappID = "3";
// let formattedValue = value return selectedCategories[0] === QappID;
// console.log({type})
// if(type === 'title'){
// formattedValue = value.replace(/[^a-zA-Z0-9\s]/g, "")
// }
// const copyFiles = [...prev];
// copyFiles[index] = {
// ...copyFiles[index],
// [type]: formattedValue,
// };
// return copyFiles;
// });
}; };
return ( return (
<> <>
<Modal <Modal
open={!!editFileProperties} open={!!editIssueProperties}
aria-labelledby="modal-title" aria-labelledby="modal-title"
aria-describedby="modal-description" aria-describedby="modal-description"
> >
@ -410,15 +454,26 @@ export const EditIssue = () => {
> >
<CategoryList <CategoryList
categoryData={allCategoryData} categoryData={allCategoryData}
initialCategories={editCategories} initialCategories={selectedCategories}
columns={3} columns={3}
ref={categoryListRef} ref={categoryListRef}
showEmptyItem={false}
afterChange={newSelectedCategories => {
setSelectedCategories(newSelectedCategories);
}}
/> />
</Box> </Box>
</Box> </Box>
{isShowQappNameTextField() && (
<AutocompleteQappNames
ref={autocompleteRef}
namesList={QappNames}
initialSelection={editIssueProperties?.QappName}
/>
)}
<ImagePublisher <ImagePublisher
ref={imagePublisherRef} ref={imagePublisherRef}
initialImages={editFileProperties?.images} initialImages={editIssueProperties?.images}
/> />
<CustomInputField <CustomInputField
name="title" name="title"
@ -466,10 +521,27 @@ export const EditIssue = () => {
alignItems: "center", alignItems: "center",
}} }}
> >
{isIssuePaid === false && (
<ThemeButtonBright
variant="contained"
onClick={() => {
publishQDNResource(true);
}}
sx={{
fontFamily: "Montserrat",
fontSize: "16px",
fontWeight: 400,
letterSpacing: "0.2px",
}}
>
Publish Edit with Fee
</ThemeButtonBright>
)}
<ThemeButtonBright <ThemeButtonBright
variant="contained" variant="contained"
onClick={() => { onClick={() => {
publishQDNResource(); publishQDNResource(false);
}} }}
sx={{ sx={{
fontFamily: "Montserrat", fontFamily: "Montserrat",
@ -478,7 +550,7 @@ export const EditIssue = () => {
letterSpacing: "0.2px", letterSpacing: "0.2px",
}} }}
> >
Publish Publish Edit
</ThemeButtonBright> </ThemeButtonBright>
</Box> </Box>
</CrowdfundActionButtonRow> </CrowdfundActionButtonRow>
@ -506,7 +578,7 @@ export const EditIssue = () => {
dispatch(updateInHashMap(clonedCopy)); dispatch(updateInHashMap(clonedCopy));
dispatch( dispatch(
setNotification({ setNotification({
msg: "File updated", msg: "Issue updated",
alertType: "success", alertType: "success",
}) })
); );

22
src/components/EditPlaylist/EditPlaylist.tsx
View File

@ -43,9 +43,9 @@ import { PlaylistListEdit } from "../PlaylistListEdit/PlaylistListEdit";
import { TextEditor } from "../common/TextEditor/TextEditor"; import { TextEditor } from "../common/TextEditor/TextEditor";
import { extractTextFromHTML } from "../common/TextEditor/utils"; import { extractTextFromHTML } from "../common/TextEditor/utils";
import { import {
firstCategories, issueLocation,
secondCategories, thirdCategories,
} from "../../constants/Categories/1stCategories.ts"; } from "../../constants/Categories/Categories.ts";
const uid = new ShortUniqueId(); const uid = new ShortUniqueId();
const shortuid = new ShortUniqueId({ length: 5 }); const shortuid = new ShortUniqueId({ length: 5 });
@ -183,7 +183,7 @@ export const EditPlaylist = () => {
setVideos(editVideoProperties?.videos || []); setVideos(editVideoProperties?.videos || []);
if (editVideoProperties?.category) { if (editVideoProperties?.category) {
const selectedOption = firstCategories.find( const selectedOption = issueLocation.find(
option => option.id === +editVideoProperties.category option => option.id === +editVideoProperties.category
); );
setSelectedCategoryVideos(selectedOption || null); setSelectedCategoryVideos(selectedOption || null);
@ -192,9 +192,9 @@ export const EditPlaylist = () => {
if ( if (
editVideoProperties?.category && editVideoProperties?.category &&
editVideoProperties?.subcategory && editVideoProperties?.subcategory &&
secondCategories[+editVideoProperties?.category] thirdCategories[+editVideoProperties?.category]
) { ) {
const selectedOption = secondCategories[ const selectedOption = thirdCategories[
+editVideoProperties?.category +editVideoProperties?.category
]?.find(option => option.id === +editVideoProperties.subcategory); ]?.find(option => option.id === +editVideoProperties.subcategory);
setSelectedSubCategoryVideos(selectedOption || null); setSelectedSubCategoryVideos(selectedOption || null);
@ -405,7 +405,7 @@ export const EditPlaylist = () => {
event: SelectChangeEvent<string> event: SelectChangeEvent<string>
) => { ) => {
const optionId = event.target.value; const optionId = event.target.value;
const selectedOption = firstCategories.find( const selectedOption = issueLocation.find(
option => option.id === +optionId option => option.id === +optionId
); );
setSelectedCategoryVideos(selectedOption || null); setSelectedCategoryVideos(selectedOption || null);
@ -479,7 +479,7 @@ export const EditPlaylist = () => {
value={selectedCategoryVideos?.id || ""} value={selectedCategoryVideos?.id || ""}
onChange={handleOptionCategoryChangeVideos} onChange={handleOptionCategoryChangeVideos}
> >
{firstCategories.map(option => ( {issueLocation.map(option => (
<MenuItem key={option.id} value={option.id}> <MenuItem key={option.id} value={option.id}>
{option.name} {option.name}
</MenuItem> </MenuItem>
@ -487,7 +487,7 @@ export const EditPlaylist = () => {
</Select> </Select>
</FormControl> </FormControl>
{selectedCategoryVideos && {selectedCategoryVideos &&
secondCategories[selectedCategoryVideos?.id] && ( thirdCategories[selectedCategoryVideos?.id] && (
<FormControl fullWidth sx={{ marginBottom: 2 }}> <FormControl fullWidth sx={{ marginBottom: 2 }}>
<InputLabel id="Category">Select a Sub-Category</InputLabel> <InputLabel id="Category">Select a Sub-Category</InputLabel>
<Select <Select
@ -497,11 +497,11 @@ export const EditPlaylist = () => {
onChange={e => onChange={e =>
handleOptionSubCategoryChangeVideos( handleOptionSubCategoryChangeVideos(
e, e,
secondCategories[selectedCategoryVideos?.id] thirdCategories[selectedCategoryVideos?.id]
) )
} }
> >
{secondCategories[selectedCategoryVideos.id].map( {thirdCategories[selectedCategoryVideos.id].map(
option => ( option => (
<MenuItem key={option.id} value={option.id}> <MenuItem key={option.id} value={option.id}>
{option.name} {option.name}

1172
src/components/EditPlaylist/Upload-styles.tsx
View File

File diff suppressed because it is too large Load Diff

100
src/components/PublishIssue/PublishIssue-styles.tsx
View File

@ -3,6 +3,7 @@ import {
Accordion, Accordion,
AccordionDetails, AccordionDetails,
AccordionSummary, AccordionSummary,
Autocomplete,
Box, Box,
Button, Button,
Grid, Grid,
@ -11,8 +12,10 @@ import {
TextField, TextField,
Typography, Typography,
} from "@mui/material"; } from "@mui/material";
import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate"; import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate";
import { TimesSVG } from "../../assets/svgs/TimesSVG"; import { TimesSVG } from "../../assets/svgs/TimesSVG";
import { fontSizeMedium } from "../../constants/Misc.ts";
export const DoubleLine = styled(Typography)` export const DoubleLine = styled(Typography)`
display: -webkit-box; display: -webkit-box;
@ -59,7 +62,7 @@ export const ModalBody = styled(Box)(({ theme }) => ({
left: "50%", left: "50%",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
width: "75%", width: "75%",
maxWidth: "900px", maxWidth: "1000px",
padding: "15px 35px", padding: "15px 35px",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
@ -113,50 +116,59 @@ export const NewCrowdfundTimeDescription = styled(Typography)(({ theme }) => ({
textDecoration: "underline", textDecoration: "underline",
})); }));
const getInputFieldStyles = (theme: any) => {
return {
fontFamily: "Mulish",
letterSpacing: "0px",
fontWeight: 400,
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default,
borderColor: theme.palette.background.paper,
"& label": {
color: theme.palette.mode === "light" ? "#808183" : "#edeef0",
fontFamily: "Mulish",
fontSize: fontSizeMedium,
letterSpacing: "0px",
fontWeight: 400,
},
"& label.Mui-focused": {
color: theme.palette.mode === "light" ? "#A0AAB4" : "#d7d8da",
},
"& .MuiInput-underline:after": {
borderBottomColor: theme.palette.mode === "light" ? "#B2BAC2" : "#c9cccf",
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#E0E3E7",
},
"&:hover fieldset": {
borderColor: "#B2BAC2",
},
"&.Mui-focused fieldset": {
borderColor: "#6F7E8C",
},
},
"& .MuiInputBase-root": {
fontFamily: "Mulish",
fontSize: "25px",
letterSpacing: "0px",
fontWeight: 400,
},
"& [class$='-MuiFilledInput-root']": {
padding: "30px 12px 8px",
},
"& .MuiFilledInput-root:after": {
borderBottomColor: theme.palette.secondary.main,
},
};
};
export const CustomInputField = styled(TextField)(({ theme }) => ({ export const CustomInputField = styled(TextField)(({ theme }) => ({
fontFamily: "Mulish", ...getInputFieldStyles(theme),
fontSize: "19px", }));
letterSpacing: "0px",
fontWeight: 400, export const CustomAutoCompleteField = styled(Autocomplete)(({ theme }) => ({
color: theme.palette.text.primary, ...getInputFieldStyles(theme),
backgroundColor: theme.palette.background.default,
borderColor: theme.palette.background.paper,
"& label": {
color: theme.palette.mode === "light" ? "#808183" : "#edeef0",
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
fontWeight: 400,
},
"& label.Mui-focused": {
color: theme.palette.mode === "light" ? "#A0AAB4" : "#d7d8da",
},
"& .MuiInput-underline:after": {
borderBottomColor: theme.palette.mode === "light" ? "#B2BAC2" : "#c9cccf",
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#E0E3E7",
},
"&:hover fieldset": {
borderColor: "#B2BAC2",
},
"&.Mui-focused fieldset": {
borderColor: "#6F7E8C",
},
},
"& .MuiInputBase-root": {
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
fontWeight: 400,
},
"& [class$='-MuiFilledInput-root']": {
padding: "30px 12px 8px",
},
"& .MuiFilledInput-root:after": {
borderBottomColor: theme.palette.secondary.main,
},
})); }));
export const CrowdfundTitle = styled(Typography)(({ theme }) => ({ export const CrowdfundTitle = styled(Typography)(({ theme }) => ({

136
src/components/PublishIssue/PublishIssue.tsx
View File

@ -21,19 +21,34 @@ import { QSUPPORT_FILE_BASE } from "../../constants/Identifiers.ts";
import { MultiplePublish } from "../common/MultiplePublish/MultiplePublishAll"; import { MultiplePublish } from "../common/MultiplePublish/MultiplePublishAll";
import { TextEditor } from "../common/TextEditor/TextEditor"; import { TextEditor } from "../common/TextEditor/TextEditor";
import { extractTextFromHTML } from "../common/TextEditor/utils"; import { extractTextFromHTML } from "../common/TextEditor/utils";
import { allCategoryData } from "../../constants/Categories/1stCategories.ts"; import { allCategoryData } from "../../constants/Categories/Categories.ts";
import { titleFormatter } from "../../constants/Misc.ts"; import {
fontSizeLarge,
fontSizeSmall,
log,
titleFormatter,
} from "../../constants/Misc.ts";
import { import {
appendCategoryToList,
CategoryList, CategoryList,
CategoryListRef, CategoryListRef,
} from "../common/CategoryList/CategoryList.tsx"; } from "../common/CategoryList/CategoryList.tsx";
import { SupportState } from "../../constants/Categories/2ndCategories.ts";
import { import {
ImagePublisher, ImagePublisher,
ImagePublisherRef, ImagePublisherRef,
} from "../common/ImagePublisher/ImagePublisher.tsx"; } from "../common/ImagePublisher/ImagePublisher.tsx";
import { ThemeButtonBright } from "../../pages/Home/Home-styles.tsx"; import { ThemeButtonBright } from "../../pages/Home/Home-styles.tsx";
import {
AutocompleteQappNames,
QappNamesRef,
} from "../common/AutocompleteQappNames.tsx";
import {
feeAmountBase,
feeDisclaimer,
} from "../../constants/PublishFees/FeeData.tsx";
import {
payPublishFeeQORT,
PublishFeeData,
} from "../../constants/PublishFees/SendFeeFunctions.ts";
const uid = new ShortUniqueId(); const uid = new ShortUniqueId();
const shortuid = new ShortUniqueId({ length: 5 }); const shortuid = new ShortUniqueId({ length: 5 });
@ -53,14 +68,21 @@ interface VideoFile {
description: string; description: string;
coverImage?: string; coverImage?: string;
} }
export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => { export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
const theme = useTheme(); const theme = useTheme();
const dispatch = useDispatch(); const dispatch = useDispatch();
const [isOpenMultiplePublish, setIsOpenMultiplePublish] = useState(false); const [isOpenMultiplePublish, setIsOpenMultiplePublish] = useState(false);
const [QappName, setQappName] = useState<string>("");
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
const username = useSelector((state: RootState) => state.auth?.user?.name); const username = useSelector((state: RootState) => state.auth?.user?.name);
const userAddress = useSelector( const userAddress = useSelector(
(state: RootState) => state.auth?.user?.address (state: RootState) => state.auth?.user?.address
); );
const QappNames = useSelector(
(state: RootState) => state.file.publishedQappNames
);
const [files, setFiles] = useState<VideoFile[]>([]); const [files, setFiles] = useState<VideoFile[]>([]);
const [isOpen, setIsOpen] = useState<boolean>(false); const [isOpen, setIsOpen] = useState<boolean>(false);
@ -77,8 +99,11 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
const [playlistSetting, setPlaylistSetting] = useState<null | string>(null); const [playlistSetting, setPlaylistSetting] = useState<null | string>(null);
const [publishes, setPublishes] = useState<any>(null); const [publishes, setPublishes] = useState<any>(null);
const categoryListRef = useRef<CategoryListRef>(null); const categoryListRef = useRef<CategoryListRef>(null);
const imagePublisherRef = useRef<ImagePublisherRef>(null); const imagePublisherRef = useRef<ImagePublisherRef>(null);
const autocompleteRef = useRef<QappNamesRef>(null);
const { getRootProps, getInputProps } = useDropzone({ const { getRootProps, getInputProps } = useDropzone({
maxFiles: 10, maxFiles: 10,
maxSize: 419430400, // 400 MB in bytes maxSize: 419430400, // 400 MB in bytes
@ -128,8 +153,18 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
if (!categoryListRef.current) throw new Error("No CategoryListRef found"); if (!categoryListRef.current) throw new Error("No CategoryListRef found");
if (!userAddress) throw new Error("Unable to locate user address"); if (!userAddress) throw new Error("Unable to locate user address");
if (!description) throw new Error("Please enter a description"); if (!description) throw new Error("Please enter a description");
if (!categoryListRef.current?.getSelectedCategories()[0])
throw new Error("Please select a category"); const allCategoriesSelected =
selectedCategories && selectedCategories[0] && selectedCategories[1];
if (!allCategoriesSelected)
throw new Error("All Categories must be selected");
const QappsCategoryID = "3";
if (
selectedCategories[0] === QappsCategoryID &&
!autocompleteRef?.current?.getSelectedValue()
)
throw new Error("Select a published Q-App");
let errorMsg = ""; let errorMsg = "";
let name = ""; let name = "";
if (username) { if (username) {
@ -200,14 +235,10 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
filename = alphanumericString; filename = alphanumericString;
} }
const categoryList = appendCategoryToList( const categoryString = `**${categoryListRef.current?.getSelectedCategories()}**`;
categoryListRef.current?.getSelectedCategories(),
"101"
);
const categoryString = `**${categoryListRef.current?.getCategoriesFetchString(categoryList)}**`;
let metadescription = categoryString + fullDescription.slice(0, 150); let metadescription = categoryString + fullDescription.slice(0, 150);
const requestBodyVideo: any = { const requestBodyFile: any = {
action: "PUBLISH_QDN_RESOURCE", action: "PUBLISH_QDN_RESOURCE",
name: name, name: name,
service: "FILE", service: "FILE",
@ -218,7 +249,7 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
filename, filename,
tag1: QSUPPORT_FILE_BASE, tag1: QSUPPORT_FILE_BASE,
}; };
listOfPublishes.push(requestBodyVideo); listOfPublishes.push(requestBodyFile);
fileReferences.push({ fileReferences.push({
filename: file.name, filename: file.name,
identifier, identifier,
@ -232,12 +263,19 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
const idMeta = uid(); const idMeta = uid();
const identifier = `${QSUPPORT_FILE_BASE}${sanitizeTitle.slice(0, 30)}_${idMeta}`; const identifier = `${QSUPPORT_FILE_BASE}${sanitizeTitle.slice(0, 30)}_${idMeta}`;
const categoryList = appendCategoryToList( const categoryList = categoryListRef.current?.getSelectedCategories();
categoryListRef.current?.getSelectedCategories(),
"101"
);
const fileObject: any = { const selectedQappName = autocompleteRef?.current?.getSelectedValue();
const publishFeeResponse = await payPublishFeeQORT(feeAmountBase);
if (log) console.log("feeResponse: ", publishFeeResponse);
const feeData: PublishFeeData = {
signature: publishFeeResponse,
senderName: "",
};
const issueObject: any = {
title, title,
version: 1, version: 1,
fullDescription, fullDescription,
@ -246,12 +284,24 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
...categoryListRef.current?.categoriesToObject(categoryList), ...categoryListRef.current?.categoriesToObject(categoryList),
files: fileReferences, files: fileReferences,
images: imagePublisherRef?.current?.getImageArray(), images: imagePublisherRef?.current?.getImageArray(),
QappName: selectedQappName,
feeData,
}; };
const categoryString = `**${categoryListRef.current?.getCategoriesFetchString(categoryList)}**`; const QappNameString = autocompleteRef?.current?.getQappNameFetchString();
let metadescription = categoryString + fullDescription.slice(0, 150); const categoryString =
categoryListRef.current?.getCategoriesFetchString(categoryList);
const metaDataString = `**${categoryString + QappNameString}**`;
const fileObjectToBase64 = await objectToBase64(fileObject); let metadescription = metaDataString + fullDescription.slice(0, 150);
if (log) console.log("description is: ", metadescription);
if (log) console.log("description length is: ", metadescription.length);
if (log) console.log("characters left:", 240 - metadescription.length);
if (log)
console.log("% of characters used:", metadescription.length / 240);
const fileObjectToBase64 = await objectToBase64(issueObject);
// Description is obtained from raw data // Description is obtained from raw data
const requestBodyJson: any = { const requestBodyJson: any = {
action: "PUBLISH_QDN_RESOURCE", action: "PUBLISH_QDN_RESOURCE",
@ -295,6 +345,11 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
} }
} }
const isShowQappNameTextField = () => {
const QappID = "3";
return selectedCategories[0] === QappID;
};
return ( return (
<> <>
{username && ( {username && (
@ -386,13 +441,29 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
categoryData={allCategoryData} categoryData={allCategoryData}
ref={categoryListRef} ref={categoryListRef}
columns={3} columns={3}
excludeCategories={SupportState} afterChange={newSelectedCategories => {
if (
newSelectedCategories[0] &&
newSelectedCategories[1] &&
!newSelectedCategories[2]
) {
newSelectedCategories[2] = "101";
}
setSelectedCategories(newSelectedCategories);
}}
showEmptyItem={false}
/> />
</Box> </Box>
{isShowQappNameTextField() && (
<AutocompleteQappNames
ref={autocompleteRef}
namesList={QappNames}
/>
)}
<ImagePublisher ref={imagePublisherRef} /> <ImagePublisher ref={imagePublisherRef} />
<CustomInputField <CustomInputField
name="title" name="title"
label="Title of Issue" label="Title"
variant="filled" variant="filled"
value={title} value={title}
onChange={e => { onChange={e => {
@ -400,15 +471,15 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
const formattedValue = value.replace(titleFormatter, ""); const formattedValue = value.replace(titleFormatter, "");
setTitle(formattedValue); setTitle(formattedValue);
}} }}
inputProps={{ maxLength: 180 }} inputProps={{ maxLength: 60 }}
required required
/> />
<Typography <Typography
sx={{ sx={{
fontSize: "18px", fontSize: fontSizeLarge,
}} }}
> >
Description of Issue Description
</Typography> </Typography>
<TextEditor <TextEditor
inlineContent={description} inlineContent={description}
@ -426,7 +497,10 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
}} }}
variant="contained" variant="contained"
color="error" color="error"
sx={{ color: theme.palette.text.primary }} sx={{
color: theme.palette.text.primary,
fontSize: fontSizeSmall,
}}
> >
Cancel Cancel
</ActionButton> </ActionButton>
@ -439,13 +513,10 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
> >
<ThemeButtonBright <ThemeButtonBright
variant="contained" variant="contained"
onClick={() => { onClick={publishQDNResource}
publishQDNResource();
}}
sx={{ sx={{
fontFamily: "Montserrat", fontFamily: "Montserrat",
fontSize: "16px", fontWeight: "400",
fontWeight: 400,
letterSpacing: "0.2px", letterSpacing: "0.2px",
}} }}
> >
@ -453,6 +524,7 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
</ThemeButtonBright> </ThemeButtonBright>
</Box> </Box>
</ActionButtonRow> </ActionButtonRow>
{feeDisclaimer}
</ModalBody> </ModalBody>
</Modal> </Modal>

218
src/components/ResponsiveImage.tsx
View File

@ -1,109 +1,109 @@
import React, { useState, useEffect, CSSProperties } from 'react' import React, { useState, useEffect, CSSProperties } from 'react'
import Skeleton from '@mui/material/Skeleton' import Skeleton from '@mui/material/Skeleton'
import { Box } from '@mui/material' import { Box } from '@mui/material'
interface ResponsiveImageProps { interface ResponsiveImageProps {
src: string src: string
width: number width: number
height: number height: number
alt?: string alt?: string
className?: string className?: string
style?: CSSProperties style?: CSSProperties
} }
const ResponsiveImage: React.FC<ResponsiveImageProps> = ({ const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
src, src,
width, width,
height, height,
alt, alt,
className, className,
style style
}) => { }) => {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const aspectRatio = (height / width) * 100 const aspectRatio = (height / width) * 100
const imageStyle: CSSProperties = { const imageStyle: CSSProperties = {
width: '100%', width: '100%',
height: '100%', height: '100%',
objectFit: 'cover' objectFit: 'cover'
} }
const wrapperStyle: CSSProperties = { const wrapperStyle: CSSProperties = {
position: 'relative', position: 'relative',
paddingBottom: `${aspectRatio}%`, paddingBottom: `${aspectRatio}%`,
overflow: 'hidden', overflow: 'hidden',
...style ...style
} }
return ( return (
<Box <Box
sx={{ sx={{
padding: '2px', padding: '2px',
maxHeight: '50%' maxHeight: '50%'
}} }}
> >
{loading && ( {loading && (
<Skeleton <Skeleton
variant="rectangular" variant="rectangular"
style={{ style={{
width: '100%', width: '100%',
height: 0, height: 0,
paddingBottom: `${(height / width) * 100}%`, paddingBottom: `${(height / width) * 100}%`,
objectFit: 'contain', objectFit: 'contain',
visibility: loading ? 'visible' : 'hidden', visibility: loading ? 'visible' : 'hidden',
borderRadius: '8px' borderRadius: '8px'
}} }}
/> />
)} )}
<img <img
onLoad={() => setLoading(false)} onLoad={() => setLoading(false)}
src={src} src={src}
style={{ style={{
width: '100%', width: '100%',
height: '100%', height: '100%',
borderRadius: '8px', borderRadius: '8px',
visibility: loading ? 'hidden' : 'visible', visibility: loading ? 'hidden' : 'visible',
position: loading ? 'absolute' : 'unset', position: loading ? 'absolute' : 'unset',
objectFit: 'contain' objectFit: 'contain'
}} }}
/> />
</Box> </Box>
) )
return ( return (
<div style={wrapperStyle} className={className}> <div style={wrapperStyle} className={className}>
{loading ? ( {loading ? (
<Skeleton <Skeleton
variant="rectangular" variant="rectangular"
sx={{ sx={{
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: 0, left: 0,
right: 0, right: 0,
bottom: 0 bottom: 0
}} }}
/> />
) : ( ) : (
<img <img
src={src} src={src}
alt={alt} alt={alt}
style={{ style={{
...imageStyle, ...imageStyle,
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: 0 left: 0
}} }}
/> />
)} )}
</div> </div>
) )
} }
export default ResponsiveImage export default ResponsiveImage

18
src/components/StatsData.tsx
View File

@ -15,14 +15,14 @@ export const StatsData = () => {
})); }));
const { const {
getFiles, getIssues,
checkAndUpdateFile, checkAndUpdateIssue,
getFile, getIssue,
hashMapFiles, hashMapFiles,
getNewFiles, getNewIssues,
checkNewFiles, checkNewIssues,
getFilesFiltered, getIssuesFiltered,
getFilesCount, getIssuesCount,
} = useFetchIssues(); } = useFetchIssues();
const totalIssuesPublished = useSelector( const totalIssuesPublished = useSelector(
@ -36,8 +36,8 @@ export const StatsData = () => {
); );
useEffect(() => { useEffect(() => {
getFilesCount(); getIssuesCount();
}, [getFilesCount]); }, [getIssuesCount]);
return ( return (
totalIssuesPublished > 0 && ( totalIssuesPublished > 0 && (

135
src/components/common/AutocompleteQappNames.tsx Normal file
View File

@ -0,0 +1,135 @@
import React, { useEffect, useImperativeHandle, useState } from "react";
import { Autocomplete, SxProps, Theme } from "@mui/material";
import { CustomInputField } from "../PublishIssue/PublishIssue-styles.tsx";
import { log } from "../../constants/Misc.ts";
interface AutoCompleteQappNamesProps {
namesList?: string[];
afterChange?: (selectedName: string) => void;
sx?: SxProps<Theme>;
required?: boolean;
initialSelection?: string;
}
export type QappNamesRef = {
getSelectedValue: () => string;
setSelectedValue: (selectedValue: string) => void;
getQappNameFetchString: () => string;
};
export const AutocompleteQappNames = React.forwardRef<
QappNamesRef,
AutoCompleteQappNamesProps
>(
(
{
namesList,
afterChange,
sx,
required = true,
initialSelection = null,
}: AutoCompleteQappNamesProps,
ref
) => {
const [QappNamesList, setQappNamesList] = useState<string[]>([]);
const [selectedQappName, setSelectedQappName] = useState<string>(
initialSelection || null
);
if (log) console.log("initial selection: ", initialSelection);
useEffect(() => {
if (namesList) {
if (log) console.log("prop namesList: ", namesList);
setQappNamesList(namesList);
return;
}
getPublishedQappNames().then((names: string[]) => {
setQappNamesList(names);
if (log) console.log("QappNames set manually");
});
}, []);
useEffect(() => {
setSelectedQappName(initialSelection || null);
}, [initialSelection]);
useImperativeHandle(ref, () => ({
getSelectedValue: () => {
return selectedQappName;
},
setSelectedValue: (selectedValue: string) => {
setSelectedQappName(selectedValue);
},
getQappNameFetchString: () => {
return getQappNameFetchString(selectedQappName);
},
}));
return (
<Autocomplete
options={QappNamesList}
value={selectedQappName}
onChange={(e, newValue) => {
setSelectedQappName(newValue);
if (afterChange) afterChange(newValue || null);
}}
sx={{ height: "100px", ...sx }}
renderInput={params => (
<CustomInputField
{...params}
label={"Q-App/Website Name"}
value={selectedQappName}
variant={"filled"}
required={required}
/>
)}
/>
);
}
);
export interface MetaData {
title: string;
description: string;
tags: string[];
mimeType: string;
}
export interface SearchResourcesResponse {
name: string;
service: string;
identifier: string;
metadata?: MetaData;
size: number;
created: number;
updated: number;
}
const searchService = (service: string) => {
return qortalRequest({
action: "SEARCH_QDN_RESOURCES",
service: service,
limit: 0,
});
};
export const getPublishedQappNames = async () => {
const QappList: Promise<SearchResourcesResponse[]> = searchService("APP");
const siteList: Promise<SearchResourcesResponse[]> = searchService("WEBSITE");
const responses = await Promise.all([QappList, siteList]);
const processedQappList = responses[0].map(value => value.name);
const processedWebsiteList = responses[1].map(value => value.name);
const removedDuplicates = Array.from(
new Set<string>([...processedQappList, ...processedWebsiteList])
);
return removedDuplicates.sort((a, b) => {
return a.localeCompare(b);
});
};
export const getQappNameFetchString = (selectedQappName: string) => {
return selectedQappName ? `Qapp:${selectedQappName};` : "";
};

121
src/components/common/CategoryList/CategoryList.tsx
View File

@ -12,13 +12,15 @@ import {
import React, { useEffect, useImperativeHandle, useState } from "react"; import React, { useEffect, useImperativeHandle, useState } from "react";
import { CategoryContainer } from "./CategoryList-styles.tsx"; import { CategoryContainer } from "./CategoryList-styles.tsx";
import { allCategoryData } from "../../../constants/Categories/1stCategories.ts"; import { allCategoryData } from "../../../constants/Categories/Categories.ts";
import { log } from "../../../constants/Misc.ts"; import { log } from "../../../constants/Misc.ts";
import { findCategoryData } from "../../../constants/Categories/CategoryFunctions.ts";
export interface Category { export interface Category {
id: number; id: number;
name: string; name: string;
icon?: string; icon?: string;
label?: string;
} }
export interface Categories { export interface Categories {
@ -29,8 +31,6 @@ export interface CategoryData {
subCategories: Categories[]; subCategories: Categories[];
} }
type ListDirection = "column" | "row";
interface CategoryListProps { interface CategoryListProps {
sx?: SxProps<Theme>; sx?: SxProps<Theme>;
categoryData: CategoryData; categoryData: CategoryData;
@ -38,6 +38,7 @@ interface CategoryListProps {
columns?: number; columns?: number;
afterChange?: (categories: string[]) => void; afterChange?: (categories: string[]) => void;
excludeCategories?: Category[]; excludeCategories?: Category[];
showEmptyItem?: boolean;
} }
export type CategoryListRef = { export type CategoryListRef = {
@ -60,6 +61,7 @@ export const CategoryList = React.forwardRef<
columns = 1, columns = 1,
afterChange, afterChange,
excludeCategories, excludeCategories,
showEmptyItem = true,
}: CategoryListProps, }: CategoryListProps,
ref ref
) => { ) => {
@ -127,7 +129,8 @@ export const CategoryList = React.forwardRef<
const newSelectedCategories: string[] = selectedCategories.map( const newSelectedCategories: string[] = selectedCategories.map(
(category, categoryIndex) => { (category, categoryIndex) => {
if (index > categoryIndex) return category; if (index > categoryIndex) return category;
else if (index === categoryIndex) return selectedOption.id.toString(); else if (index === categoryIndex)
return selectedOption?.id?.toString();
else return ""; else return "";
} }
); );
@ -140,23 +143,31 @@ export const CategoryList = React.forwardRef<
}; };
const categorySelectSX = { const categorySelectSX = {
// Target the input field // // Target the input field
".MuiSelect-select": { // ".MuiSelect-select": {
fontSize: "16px", // Change font size for the selected value // padding: "10px 5px 15px 15px;",
padding: "10px 5px 15px 15px;", // },
}, // // Target the dropdown icon
// Target the dropdown icon // ".MuiSelect-icon": {
".MuiSelect-icon": { // fontSize: "20px", // Adjust if needed
fontSize: "20px", // Adjust if needed // },
}, // // Target the dropdown menu
// Target the dropdown menu // "& .MuiMenu-paper": {
"& .MuiMenu-paper": { // ".MuiMenuItem-root": {
".MuiMenuItem-root": { // fontSize: "14px", // Change font size for the menu items
fontSize: "14px", // Change font size for the menu items // },
}, // },
},
}; };
const emptyMenuItem = (
<MenuItem
key={""}
value={""}
sx={{
"@media (min-width: 600px)": { minHeight: "46.5px" },
}}
/>
);
const fillMenu = (category: Categories, index: number) => { const fillMenu = (category: Categories, index: number) => {
const subCategoryIndex = selectedCategories[index]; const subCategoryIndex = selectedCategories[index];
if (log) console.log("selected categories: ", selectedCategories); if (log) console.log("selected categories: ", selectedCategories);
@ -171,12 +182,23 @@ export const CategoryList = React.forwardRef<
if (log) console.log("categoryData: ", categoryData); if (log) console.log("categoryData: ", categoryData);
const menuToFill = category[subCategoryIndex]; const menuToFill = category[subCategoryIndex];
if (menuToFill) if (menuToFill) {
return menuToFill.map(option => ( const menuItems = [];
<MenuItem key={option.id} value={option.id}>
{option.name} if (showEmptyItem) menuItems.push(emptyMenuItem);
</MenuItem>
)); menuToFill.map(option =>
menuItems.push(
<MenuItem key={option.id} value={option.id}>
{option.name}
</MenuItem>
)
);
if (log) console.log(" returning menuItems: ", menuItems);
return menuItems;
}
if (log) console.log("not returning menuItems");
}; };
const hasSubCategory = (category: Categories, index: number) => { const hasSubCategory = (category: Categories, index: number) => {
@ -202,11 +224,11 @@ export const CategoryList = React.forwardRef<
<FormControl fullWidth sx={{ marginBottom: 1 }}> <FormControl fullWidth sx={{ marginBottom: 1 }}>
<InputLabel <InputLabel
sx={{ sx={{
fontSize: "16px", fontSize: "24px",
}} }}
id="Category-1" id="Category-1"
> >
Category {categoryData.category[0]?.label || "Category"}
</InputLabel> </InputLabel>
<Select <Select
labelId="Category 1" labelId="Category 1"
@ -217,6 +239,7 @@ export const CategoryList = React.forwardRef<
}} }}
sx={categorySelectSX} sx={categorySelectSX}
> >
{showEmptyItem && emptyMenuItem}
{categoryData.category.map(option => ( {categoryData.category.map(option => (
<MenuItem key={option.id} value={option.id}> <MenuItem key={option.id} value={option.id}>
{option.name} {option.name}
@ -237,11 +260,14 @@ export const CategoryList = React.forwardRef<
> >
<InputLabel <InputLabel
sx={{ sx={{
fontSize: "16px", fontSize: "24px",
}} }}
id={`Category-${index + 2}`} id={`Category-${index + 2}`}
> >
{`Category-${index + 2}`} {findCategoryData(+selectedCategories[index + 1])
?.label ||
category[selectedCategories[index]][0]?.label ||
`Category-${index + 2}`}
</InputLabel> </InputLabel>
<Select <Select
labelId={`Category ${index + 2}`} labelId={`Category ${index + 2}`}
@ -250,24 +276,6 @@ export const CategoryList = React.forwardRef<
onChange={e => { onChange={e => {
selectCategoryEvent(e, index + 1); selectCategoryEvent(e, index + 1);
}} }}
sx={{
width: "100%",
// Target the input field
".MuiSelect-select": {
fontSize: "16px", // Change font size for the selected value
padding: "10px 5px 15px 15px;",
},
// Target the dropdown icon
".MuiSelect-icon": {
fontSize: "20px", // Adjust if needed
},
// Target the dropdown menu
"& .MuiMenu-paper": {
".MuiMenuItem-root": {
fontSize: "14px", // Change font size for the menu items
},
},
}}
> >
{fillMenu(category, index)} {fillMenu(category, index)}
</Select> </Select>
@ -285,9 +293,9 @@ export const getCategoriesFetchString = (categories: string[]) => {
let fetchString = ""; let fetchString = "";
categories.map((category, index) => { categories.map((category, index) => {
if (category) { if (category) {
if (index === 0) fetchString += `cat:${category}`; if (index === 0 && category) fetchString += `cat:${category};`;
else if (index === 1) fetchString += `;sub:${category}`; else if (index === 1 && category) fetchString += `sub:${category};`;
else fetchString += `;sub${index}:${category}`; else if (category) fetchString += `sub${index}:${category};`;
} }
}); });
if (log) console.log("categoriesAsDescription: ", fetchString); if (log) console.log("categoriesAsDescription: ", fetchString);
@ -318,3 +326,16 @@ export const getCategoriesFromObject = (editFileProperties: any) => {
} }
return categoryList; return categoryList;
}; };
export const getCategoriesLength = categoryList => {
return categoryList.filter(category => category !== "").length;
};
export const hasCategories = (categories: string[]) => {
return categories.findIndex(category => category !== "") >= 0;
};
export const appendCategory = (categoryList: string[], category: string) => {
const nextIndex = categoryList.findIndex(category => category === "");
categoryList[nextIndex] = category;
};

178
src/components/common/CategoryList/CategorySelect.tsx
View File

@ -0,0 +1,178 @@
import {
FormControl,
InputLabel,
MenuItem,
OutlinedInput,
Select,
SxProps,
Theme,
} from "@mui/material";
import React, { useEffect, useImperativeHandle, useState } from "react";
import { CategoryContainer } from "./CategoryList-styles.tsx";
import { log } from "../../../constants/Misc.ts";
export interface Category {
id: number;
name: string;
icon?: string;
label?: string;
}
export interface Categories {
[key: number]: Category[];
}
export interface CategoryData {
category: Category[];
subCategories: Categories[];
}
interface CategoryListProps {
sx?: SxProps<Theme>;
categoryData: Category[];
initialCategory?: string;
afterChange?: (category: string) => void;
showEmptyItem?: boolean;
}
export type CategorySelectRef = {
getSelectedCategory: () => string;
setSelectedCategory: (arr: string) => void;
clearCategory: () => void;
getCategoryFetchString: (categories?: string) => string;
};
export const CategorySelect = React.forwardRef<
CategorySelectRef,
CategoryListProps
>(
(
{
sx,
categoryData,
initialCategory,
afterChange,
showEmptyItem = true,
}: CategoryListProps,
ref
) => {
const [selectedCategory, setSelectedCategory] = useState<string>(
initialCategory || ""
);
useEffect(() => {
if (initialCategory) setSelectedCategory(initialCategory);
}, [initialCategory]);
const updateCategory = (category: string) => {
if (log) console.log("updateCategory ID: ", category);
setSelectedCategory(category);
if (afterChange) afterChange(category);
};
const categoryToObject = (category: string) => {
let categoryObject = {};
categoryObject["category"] = category;
if (log) console.log("categoryObject is: ", categoryObject);
return categoryObject;
};
const clearCategory = () => {
updateCategory("");
};
useImperativeHandle(ref, () => ({
getSelectedCategory: () => {
return selectedCategory;
},
setSelectedCategory: category => {
if (log) console.log("setSelectedCategory: ", category);
updateCategory(category);
},
clearCategory,
getCategoryFetchString: (category?: string) =>
getCategoryFetchString(category || selectedCategory),
categoriesToObject: (category?: string) =>
categoryToObject(category || selectedCategory),
}));
const categorySelectSX = {
// // Target the input field
// ".MuiSelect-select": {
// fontSize: "16px", // Change font size for the selected value
// padding: "10px 5px 15px 15px;",
// },
// // Target the dropdown icon
// ".MuiSelect-icon": {
// fontSize: "20px", // Adjust if needed
// },
// // Target the dropdown menu
// "& .MuiMenu-paper": {
// ".MuiMenuItem-root": {
// fontSize: "14px", // Change font size for the menu items
// },
// },
};
const emptyMenuItem = (
<MenuItem
key={""}
value={""}
// sx={{
// "& .MuiButtonBase-root-MuiMenuItem-root": {
// minHeight: "50px",
// },
sx={{
"@media (min-width: 600px)": { minHeight: "46.5px" },
}}
/>
);
const fillMenu = () => {
const menuItems = [];
if (showEmptyItem) menuItems.push(emptyMenuItem);
categoryData.map(option =>
menuItems.push(
<MenuItem key={option.id} value={option.id}>
{option.name}
</MenuItem>
)
);
return menuItems;
};
return (
<CategoryContainer sx={{ width: "100%", ...sx }}>
<FormControl fullWidth sx={{ marginBottom: 1 }}>
<InputLabel
sx={{
fontSize: "24px",
}}
id="Category-1"
>
{categoryData[0]?.label || "Category"}
</InputLabel>
<Select
labelId="Category 1"
input={<OutlinedInput label="Category 1" />}
value={selectedCategory || ""}
onChange={e => {
updateCategory(e.target.value);
}}
>
{fillMenu()}
</Select>
</FormControl>
</CategoryContainer>
);
}
);
export const getCategoryFetchString = (category: string) => {
return `cat:${category}`;
};
export const getCategoryFromObject = (editFileProperties: any) => {
const categoryList: string[] = [];
if (editFileProperties.category)
categoryList.push(editFileProperties.category);
return categoryList;
};

47
src/components/common/Comments/Comment.tsx
View File

@ -1,7 +1,6 @@
import { import {
Avatar, Avatar,
Box, Box,
Button,
Dialog, Dialog,
DialogActions, DialogActions,
DialogContent, DialogContent,
@ -9,26 +8,26 @@ import {
Typography, Typography,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import React, { useCallback, useState, useEffect } from "react"; import React, { useCallback, useEffect, useState } from "react";
import { CommentEditor } from "./CommentEditor"; import { CommentEditor } from "./CommentEditor";
import { import {
AuthorTextComment,
CardContentContainerComment, CardContentContainerComment,
CommentActionButtonRow, CommentActionButtonRow,
CommentDateText, CommentDateText,
EditReplyButton, EditReplyButton,
StyledCardComment,
} from "./Comments-styles";
import { StyledCardHeaderComment } from "./Comments-styles";
import { StyledCardColComment } from "./Comments-styles";
import { AuthorTextComment } from "./Comments-styles";
import {
StyledCardContentComment,
LoadMoreCommentsButton as CommentActionButton, LoadMoreCommentsButton as CommentActionButton,
StyledCardColComment,
StyledCardComment,
StyledCardContentComment,
StyledCardHeaderComment,
} from "./Comments-styles"; } from "./Comments-styles";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { RootState } from "../../../state/store"; import { RootState } from "../../../state/store";
import Portal from "../Portal"; import Portal from "../Portal";
import { formatDate } from "../../../utils/time"; import { formatDate } from "../../../utils/time";
import { ThemeButton } from "../../../pages/Home/Home-styles.tsx";
interface CommentProps { interface CommentProps {
comment: any; comment: any;
postId: string; postId: string;
@ -69,12 +68,15 @@ export const Comment = ({
onClose={() => setCurrentEdit(null)} onClose={() => setCurrentEdit(null)}
aria-labelledby="alert-dialog-title" aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description" aria-describedby="alert-dialog-description"
maxWidth={false}
> >
<DialogTitle id="alert-dialog-title"></DialogTitle> <DialogTitle id="alert-dialog-title" sx={{ fontSize: "30px" }}>
Edit Comment
</DialogTitle>
<DialogContent> <DialogContent>
<Box <Box
sx={{ sx={{
width: "300px", width: "1000px",
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
}} }}
@ -90,9 +92,12 @@ export const Comment = ({
</Box> </Box>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button variant="contained" onClick={() => setCurrentEdit(null)}> <ThemeButton
variant="contained"
onClick={() => setCurrentEdit(null)}
>
Close Close
</Button> </ThemeButton>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</Portal> </Portal>
@ -125,13 +130,15 @@ export const Comment = ({
</Typography> </Typography>
)} )}
<CommentActionButtonRow> <CommentActionButtonRow>
<CommentActionButton {user?.name !== comment?.name && (
size="small" <CommentActionButton
variant="contained" size="small"
onClick={() => setIsReplying(true)} variant="contained"
> onClick={() => setIsReplying(true)}
reply >
</CommentActionButton> reply
</CommentActionButton>
)}
{user?.name === comment?.name && ( {user?.name === comment?.name && (
<CommentActionButton <CommentActionButton
size="small" size="small"

29
src/components/common/Comments/CommentEditor.tsx
View File

@ -1,10 +1,8 @@
import { Box, Button, TextField } from "@mui/material";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../../state/store"; import { RootState } from "../../../state/store";
import ShortUniqueId from "short-unique-id"; import ShortUniqueId from "short-unique-id";
import { setNotification } from "../../../state/features/notificationsSlice"; import { setNotification } from "../../../state/features/notificationsSlice";
import { toBase64 } from "../../../utils/toBase64";
import localforage from "localforage"; import localforage from "localforage";
import { import {
CommentInput, CommentInput,
@ -12,6 +10,9 @@ import {
SubmitCommentButton, SubmitCommentButton,
} from "./Comments-styles"; } from "./Comments-styles";
import { QSUPPORT_COMMENT_BASE } from "../../../constants/Identifiers.ts"; import { QSUPPORT_COMMENT_BASE } from "../../../constants/Identifiers.ts";
import { sendQchatDM } from "../../../utils/qortalRequests.ts";
import { maxCommentLength } from "../../../constants/Misc.ts";
const uid = new ShortUniqueId(); const uid = new ShortUniqueId();
const notification = localforage.createInstance({ const notification = localforage.createInstance({
@ -123,7 +124,6 @@ export const CommentEditor = ({
let address; let address;
let name; let name;
let errorMsg = ""; let errorMsg = "";
address = user?.address; address = user?.address;
name = user?.name || ""; name = user?.name || "";
@ -134,8 +134,8 @@ export const CommentEditor = ({
errorMsg = "Cannot post without a name"; errorMsg = "Cannot post without a name";
} }
if (value.length > 200) { if (value.length > maxCommentLength) {
errorMsg = "Comment needs to be under 200 characters"; errorMsg = `Comment needs to be under ${maxCommentLength} characters`;
} }
if (errorMsg) { if (errorMsg) {
@ -157,6 +157,7 @@ export const CommentEditor = ({
data64: base64, data64: base64,
identifier: identifier, identifier: identifier,
}); });
dispatch( dispatch(
setNotification({ setNotification({
msg: "Comment successfully published", msg: "Comment successfully published",
@ -171,7 +172,19 @@ export const CommentEditor = ({
postName: postName, postName: postName,
}); });
} }
if (!isReply && !isEdit) {
// const notificationMessage = `This is an automated Q-Support notification indicating that someone has commented on your issue here:
// qortal://APP/Q-Support/issue/${postName}/${postId}
//
// Here are the first ${maxNotificationLength} characters of the comment:
//
// ${value.substring(0, maxNotificationLength)}`;
const notificationMessage = `This is an automated Q-Support notification indicating that someone has commented on your issue here:
qortal://APP/Q-Support/issue/${postName}/${postId}`;
await sendQchatDM(postName, notificationMessage);
}
return resourceResponse; return resourceResponse;
} catch (error: any) { } catch (error: any) {
let notificationObj: any = null; let notificationObj: any = null;
@ -236,11 +249,11 @@ export const CommentEditor = ({
id="standard-multiline-flexible" id="standard-multiline-flexible"
label="Your comment" label="Your comment"
multiline multiline
maxRows={4} maxRows={10}
variant="filled" variant="filled"
value={value} value={value}
inputProps={{ inputProps={{
maxLength: 200, maxLength: maxCommentLength,
}} }}
InputLabelProps={{ style: { fontSize: "18px" } }} InputLabelProps={{ style: { fontSize: "18px" } }}
onChange={e => setValue(e.target.value)} onChange={e => setValue(e.target.value)}
@ -252,3 +265,5 @@ export const CommentEditor = ({
</CommentInputContainer> </CommentInputContainer>
); );
}; };
const sendDMwithComment = () => {};

18
src/components/common/Comments/Comments-styles.tsx
View File

@ -1,5 +1,6 @@
import { styled } from "@mui/system"; import { styled } from "@mui/system";
import { Card, Box, Typography, Button, TextField } from "@mui/material"; import { Box, Button, Card, TextField, Typography } from "@mui/material";
import { ThemeButton } from "../../../pages/Home/Home-styles.tsx";
export const StyledCard = styled(Card)(({ theme }) => ({ export const StyledCard = styled(Card)(({ theme }) => ({
backgroundColor: backgroundColor:
@ -93,7 +94,7 @@ export const StyledCardComment = styled(Typography)(({ theme }) => ({
fontWeight: 400, fontWeight: 400,
color: theme.palette.text.primary, color: theme.palette.text.primary,
fontSize: "19px", fontSize: "19px",
wordBreak: "break-word" wordBreak: "break-word",
})); }));
export const TitleText = styled(Typography)({ export const TitleText = styled(Typography)({
@ -200,13 +201,10 @@ export const EditReplyButton = styled(Button)(({ theme }) => ({
color: "#ffffff", color: "#ffffff",
})); }));
export const LoadMoreCommentsButton = styled(Button)(({ theme }) => ({ export const LoadMoreCommentsButton = styled(ThemeButton)(({ theme }) => ({
fontFamily: "Montserrat", fontFamily: "Montserrat",
fontWeight: 400, fontWeight: 400,
letterSpacing: "0.2px", letterSpacing: "0.2px",
fontSize: "15px",
backgroundColor: theme.palette.primary.main,
color: "#ffffff",
})); }));
export const CommentActionButtonRow = styled(Box)({ export const CommentActionButtonRow = styled(Box)({
@ -234,8 +232,7 @@ export const CommentInputContainer = styled(Box)({
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
marginTop: "15px", marginTop: "15px",
width: "90%", width: "100%",
maxWidth: "1000px",
borderRadius: "8px", borderRadius: "8px",
gap: "10px", gap: "10px",
alignItems: "center", alignItems: "center",
@ -270,12 +267,9 @@ export const CommentInput = styled(TextField)(({ theme }) => ({
}, },
})); }));
export const SubmitCommentButton = styled(Button)(({ theme }) => ({ export const SubmitCommentButton = styled(ThemeButton)(({ theme }) => ({
fontFamily: "Montserrat", fontFamily: "Montserrat",
fontWeight: 400, fontWeight: 400,
letterSpacing: "0.2px", letterSpacing: "0.2px",
fontSize: "15px",
backgroundColor: theme.palette.primary.main,
color: "#ffffff",
width: "75%", width: "75%",
})); }));

892
src/components/common/FileElement.tsx
View File

@ -1,446 +1,446 @@
import * as React from "react"; import * as React from "react";
import { styled, useTheme } from "@mui/material/styles"; import { styled, useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { CircularProgress } from "@mui/material"; import { CircularProgress } from "@mui/material";
import AttachFileIcon from "@mui/icons-material/AttachFile"; import AttachFileIcon from "@mui/icons-material/AttachFile";
import { MyContext } from "../../wrappers/DownloadWrapper"; import { MyContext } from "../../wrappers/DownloadWrapper";
import { RootState } from "../../state/store"; import { RootState } from "../../state/store";
import { setNotification } from "../../state/features/notificationsSlice"; import { setNotification } from "../../state/features/notificationsSlice";
const Widget = styled("div")(({ theme }) => ({ const Widget = styled("div")(({ theme }) => ({
padding: 8, padding: 8,
borderRadius: 10, borderRadius: 10,
maxWidth: 350, maxWidth: 350,
position: "relative", position: "relative",
zIndex: 1, zIndex: 1,
backdropFilter: "blur(40px)", backdropFilter: "blur(40px)",
background: "skyblue", background: "skyblue",
transition: "0.2s all", transition: "0.2s all",
"&:hover": { "&:hover": {
opacity: 0.75, opacity: 0.75,
}, },
})); }));
const CoverImage = styled("div")({ const CoverImage = styled("div")({
width: 40, width: 40,
height: 40, height: 40,
objectFit: "cover", objectFit: "cover",
overflow: "hidden", overflow: "hidden",
flexShrink: 0, flexShrink: 0,
borderRadius: 8, borderRadius: 8,
backgroundColor: "rgba(0,0,0,0.08)", backgroundColor: "rgba(0,0,0,0.08)",
"& > img": { "& > img": {
width: "100%", width: "100%",
}, },
}); });
interface IAudioElement { interface IAudioElement {
title: string; title: string;
description?: string; description?: string;
author?: string; author?: string;
fileInfo?: any; fileInfo?: any;
postId?: string; postId?: string;
user?: string; user?: string;
children?: React.ReactNode; children?: React.ReactNode;
mimeType?: string; mimeType?: string;
disable?: boolean; disable?: boolean;
mode?: string; mode?: string;
otherUser?: string; otherUser?: string;
customStyles?: any; customStyles?: any;
jsonId:string; jsonId:string;
} }
interface CustomWindow extends Window { interface CustomWindow extends Window {
showSaveFilePicker: any; // Replace 'any' with the appropriate type if you know it showSaveFilePicker: any; // Replace 'any' with the appropriate type if you know it
} }
const customWindow = window as unknown as CustomWindow; const customWindow = window as unknown as CustomWindow;
export default function FileElement({ export default function FileElement({
title, title,
description, description,
author, author,
fileInfo, fileInfo,
children, children,
mimeType, mimeType,
disable, disable,
customStyles, customStyles,
jsonId jsonId
}: IAudioElement) { }: IAudioElement) {
const { downloadVideo } = React.useContext(MyContext); const { downloadVideo } = React.useContext(MyContext);
const [startedDownload, setStartedDownload] = React.useState<boolean>(false) const [startedDownload, setStartedDownload] = React.useState<boolean>(false)
const [isLoading, setIsLoading] = React.useState<boolean>(false); const [isLoading, setIsLoading] = React.useState<boolean>(false);
const [fileProperties, setFileProperties] = React.useState<any>(null); const [fileProperties, setFileProperties] = React.useState<any>(null);
const [downloadLoader, setDownloadLoader] = React.useState<any>(false); const [downloadLoader, setDownloadLoader] = React.useState<any>(false);
const downloads = useSelector((state: RootState) => state.global?.downloads); const downloads = useSelector((state: RootState) => state.global?.downloads);
const status = React.useRef<null | string>(null) const status = React.useRef<null | string>(null)
const hasCommencedDownload = React.useRef(false); const hasCommencedDownload = React.useRef(false);
const dispatch = useDispatch(); const dispatch = useDispatch();
const reDownload = React.useRef<boolean>(false) const reDownload = React.useRef<boolean>(false)
const isFetchingProperties = React.useRef<boolean>(false) const isFetchingProperties = React.useRef<boolean>(false)
const download = React.useMemo(() => { const download = React.useMemo(() => {
if (!downloads || !fileInfo?.identifier) return {}; if (!downloads || !fileInfo?.identifier) return {};
const findDownload = downloads[fileInfo?.identifier]; const findDownload = downloads[fileInfo?.identifier];
if (!findDownload) return {}; if (!findDownload) return {};
return findDownload; return findDownload;
}, [downloads, fileInfo]); }, [downloads, fileInfo]);
const resourceStatus = React.useMemo(() => { const resourceStatus = React.useMemo(() => {
return download?.status || {}; return download?.status || {};
}, [download]); }, [download]);
const retryDownload = React.useRef(0); const retryDownload = React.useRef(0);
const handlePlay = async () => { const handlePlay = async () => {
if (disable) return; if (disable) return;
hasCommencedDownload.current = true; hasCommencedDownload.current = true;
setStartedDownload(true) setStartedDownload(true)
if ( if (
resourceStatus?.status === "READY" resourceStatus?.status === "READY"
) { ) {
if (downloadLoader) return; if (downloadLoader) return;
setDownloadLoader(true); setDownloadLoader(true);
let filename = download?.properties?.filename let filename = download?.properties?.filename
let mimeType = download?.properties?.type let mimeType = download?.properties?.type
try { try {
const { name, service, identifier } = fileInfo; const { name, service, identifier } = fileInfo;
const res = await qortalRequest({ const res = await qortalRequest({
action: "GET_QDN_RESOURCE_PROPERTIES", action: "GET_QDN_RESOURCE_PROPERTIES",
name: name, name: name,
service: service, service: service,
identifier: identifier, identifier: identifier,
}); });
filename = res?.filename || filename; filename = res?.filename || filename;
mimeType = res?.mimeType || mimeType; mimeType = res?.mimeType || mimeType;
} catch (error) { } catch (error) {
} }
try { try {
const { name, service, identifier } = fileInfo; const { name, service, identifier } = fileInfo;
const url = `/arbitrary/${service}/${name}/${identifier}`; const url = `/arbitrary/${service}/${name}/${identifier}`;
fetch(url) fetch(url)
.then(response => response.blob()) .then(response => response.blob())
.then(async blob => { .then(async blob => {
await qortalRequest({ await qortalRequest({
action: "SAVE_FILE", action: "SAVE_FILE",
blob, blob,
filename: filename, filename: filename,
mimeType, mimeType,
}); });
}) })
.catch(error => { .catch(error => {
console.error("Error fetching the video:", error); console.error("Error fetching the video:", error);
}); });
} catch (error: any) { } catch (error: any) {
let notificationObj: any = null; let notificationObj: any = null;
if (typeof error === "string") { if (typeof error === "string") {
notificationObj = { notificationObj = {
msg: error || "Failed to send message", msg: error || "Failed to send message",
alertType: "error", alertType: "error",
}; };
} else if (typeof error?.error === "string") { } else if (typeof error?.error === "string") {
notificationObj = { notificationObj = {
msg: error?.error || "Failed to send message", msg: error?.error || "Failed to send message",
alertType: "error", alertType: "error",
}; };
} else { } else {
notificationObj = { notificationObj = {
msg: error?.message || "Failed to send message", msg: error?.message || "Failed to send message",
alertType: "error", alertType: "error",
}; };
} }
if (!notificationObj) return; if (!notificationObj) return;
dispatch(setNotification(notificationObj)); dispatch(setNotification(notificationObj));
} finally { } finally {
setDownloadLoader(false); setDownloadLoader(false);
} }
return; return;
} }
const { name, service, identifier } = fileInfo; const { name, service, identifier } = fileInfo;
setIsLoading(true); setIsLoading(true);
downloadVideo({ downloadVideo({
name, name,
service, service,
identifier, identifier,
properties: { properties: {
...fileInfo, ...fileInfo,
jsonId jsonId
}, },
}); });
}; };
const refetch = React.useCallback(async () => { const refetch = React.useCallback(async () => {
if (!fileInfo) return if (!fileInfo) return
try { try {
const { name, service, identifier } = fileInfo; const { name, service, identifier } = fileInfo;
isFetchingProperties.current = true isFetchingProperties.current = true
await qortalRequest({ await qortalRequest({
action: 'GET_QDN_RESOURCE_PROPERTIES', action: 'GET_QDN_RESOURCE_PROPERTIES',
name, name,
service, service,
identifier identifier
}) })
} catch (error) { } catch (error) {
} finally { } finally {
isFetchingProperties.current = false isFetchingProperties.current = false
} }
}, [fileInfo]) }, [fileInfo])
const refetchInInterval = ()=> { const refetchInInterval = ()=> {
try { try {
const interval = setInterval(()=> { const interval = setInterval(()=> {
if(status?.current === 'DOWNLOADED'){ if(status?.current === 'DOWNLOADED'){
refetch() refetch()
} }
if(status?.current === 'READY'){ if(status?.current === 'READY'){
clearInterval(interval); clearInterval(interval);
} }
}, 7500) }, 7500)
} catch (error) { } catch (error) {
} }
} }
React.useEffect(() => { React.useEffect(() => {
if(resourceStatus?.status){ if(resourceStatus?.status){
status.current = resourceStatus?.status status.current = resourceStatus?.status
} }
if ( if (
resourceStatus?.status === 'DOWNLOADED' && resourceStatus?.status === 'DOWNLOADED' &&
reDownload?.current === false reDownload?.current === false
) { ) {
refetchInInterval() refetchInInterval()
reDownload.current = true reDownload.current = true
} }
}, [resourceStatus]) }, [resourceStatus])
React.useEffect(() => { React.useEffect(() => {
if ( if (
resourceStatus?.status === "READY" && resourceStatus?.status === "READY" &&
download?.url && download?.url &&
download?.properties?.filename && download?.properties?.filename &&
hasCommencedDownload.current hasCommencedDownload.current
) { ) {
setIsLoading(false); setIsLoading(false);
dispatch( dispatch(
setNotification({ setNotification({
msg: "Download completed. Click to save file", msg: "Download completed. Click to save file",
alertType: "info", alertType: "info",
}) })
); );
} }
}, [resourceStatus, download]); }, [resourceStatus, download]);
return ( return (
<Box <Box
onClick={handlePlay} onClick={handlePlay}
sx={{ sx={{
width: "100%", width: "100%",
overflow: "hidden", overflow: "hidden",
position: "relative", position: "relative",
cursor: "pointer", cursor: "pointer",
...(customStyles || {}), ...(customStyles || {}),
}} }}
> >
{children && ( {children && (
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
position: "relative", position: "relative",
gap: "7px", gap: "7px",
}} }}
> >
{children}{" "} {children}{" "}
{((resourceStatus.status && resourceStatus?.status !== "READY") || {((resourceStatus.status && resourceStatus?.status !== "READY") ||
isLoading) && startedDownload ? ( isLoading) && startedDownload ? (
<> <>
<CircularProgress color="secondary" size={14} /> <CircularProgress color="secondary" size={14} />
<Typography variant="body2">{`${Math.round( <Typography variant="body2">{`${Math.round(
resourceStatus?.percentLoaded || 0 resourceStatus?.percentLoaded || 0
).toFixed(0)}% loaded`}</Typography> ).toFixed(0)}% loaded`}</Typography>
</> </>
) : resourceStatus?.status === "READY" ? ( ) : resourceStatus?.status === "READY" ? (
<> <>
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: "14px",
}} }}
> >
Ready to save: click here Ready to save: click here
</Typography> </Typography>
{downloadLoader && ( {downloadLoader && (
<CircularProgress color="secondary" size={14} /> <CircularProgress color="secondary" size={14} />
)} )}
</> </>
) : null} ) : null}
</Box> </Box>
)} )}
{!children && ( {!children && (
<Widget> <Widget>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<CoverImage> <CoverImage>
<AttachFileIcon <AttachFileIcon
sx={{ sx={{
width: "90%", width: "90%",
height: "auto", height: "auto",
}} }}
/> />
</CoverImage> </CoverImage>
<Box sx={{ ml: 1.5, minWidth: 0 }}> <Box sx={{ ml: 1.5, minWidth: 0 }}>
<Typography <Typography
variant="caption" variant="caption"
color="text.secondary" color="text.secondary"
fontWeight={500} fontWeight={500}
> >
{author} {author}
</Typography> </Typography>
<Typography <Typography
noWrap noWrap
sx={{ sx={{
fontSize: "16px", fontSize: "16px",
}} }}
> >
<b>{title}</b> <b>{title}</b>
</Typography> </Typography>
<Typography <Typography
noWrap noWrap
letterSpacing={-0.25} letterSpacing={-0.25}
sx={{ sx={{
fontSize: "14px", fontSize: "14px",
}} }}
> >
{description} {description}
</Typography> </Typography>
{mimeType && ( {mimeType && (
<Typography <Typography
noWrap noWrap
letterSpacing={-0.25} letterSpacing={-0.25}
sx={{ sx={{
fontSize: "12px", fontSize: "12px",
}} }}
> >
{mimeType} {mimeType}
</Typography> </Typography>
)} )}
</Box> </Box>
</Box> </Box>
{((resourceStatus.status && resourceStatus?.status !== "READY") || {((resourceStatus.status && resourceStatus?.status !== "READY") ||
isLoading) && startedDownload && ( isLoading) && startedDownload && (
<Box <Box
position="absolute" position="absolute"
top={0} top={0}
left={0} left={0}
right={0} right={0}
bottom={0} bottom={0}
display="flex" display="flex"
justifyContent="center" justifyContent="center"
alignItems="center" alignItems="center"
zIndex={4999} zIndex={4999}
bgcolor="rgba(0, 0, 0, 0.6)" bgcolor="rgba(0, 0, 0, 0.6)"
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: "10px", gap: "10px",
padding: "8px", padding: "8px",
borderRadius: "10px", borderRadius: "10px",
}} }}
> >
<CircularProgress color="secondary" /> <CircularProgress color="secondary" />
{resourceStatus && ( {resourceStatus && (
<Typography <Typography
variant="subtitle2" variant="subtitle2"
component="div" component="div"
sx={{ sx={{
color: "white", color: "white",
fontSize: "14px", fontSize: "14px",
}} }}
> >
{resourceStatus?.status === "REFETCHING" ? ( {resourceStatus?.status === "REFETCHING" ? (
<> <>
<> <>
{( {(
(resourceStatus?.localChunkCount / (resourceStatus?.localChunkCount /
resourceStatus?.totalChunkCount) * resourceStatus?.totalChunkCount) *
100 100
)?.toFixed(0)} )?.toFixed(0)}
% %
</> </>
<> Refetching in 2 minutes</> <> Refetching in 2 minutes</>
</> </>
) : resourceStatus?.status === "DOWNLOADED" ? ( ) : resourceStatus?.status === "DOWNLOADED" ? (
<>Download Completed: building file...</> <>Download Completed: building file...</>
) : resourceStatus?.status !== "READY" ? ( ) : resourceStatus?.status !== "READY" ? (
<> <>
{( {(
(resourceStatus?.localChunkCount / (resourceStatus?.localChunkCount /
resourceStatus?.totalChunkCount) * resourceStatus?.totalChunkCount) *
100 100
)?.toFixed(0)} )?.toFixed(0)}
% %
</> </>
) : ( ) : (
<>Download Completed: fetching file...</> <>Download Completed: fetching file...</>
)} )}
</Typography> </Typography>
)} )}
</Box> </Box>
)} )}
{resourceStatus?.status === "READY" && {resourceStatus?.status === "READY" &&
download?.url && download?.url &&
download?.properties?.filename && ( download?.properties?.filename && (
<Box <Box
position="absolute" position="absolute"
top={0} top={0}
left={0} left={0}
right={0} right={0}
bottom={0} bottom={0}
display="flex" display="flex"
justifyContent="center" justifyContent="center"
alignItems="center" alignItems="center"
zIndex={4999} zIndex={4999}
bgcolor="rgba(0, 0, 0, 0.6)" bgcolor="rgba(0, 0, 0, 0.6)"
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
gap: "10px", gap: "10px",
padding: "8px", padding: "8px",
borderRadius: "10px", borderRadius: "10px",
}} }}
> >
<Typography <Typography
variant="subtitle2" variant="subtitle2"
component="div" component="div"
sx={{ sx={{
color: "white", color: "white",
fontSize: "14px", fontSize: "14px",
}} }}
> >
Ready to save: click here Ready to save: click here
</Typography> </Typography>
{downloadLoader && ( {downloadLoader && (
<CircularProgress color="secondary" size={14} /> <CircularProgress color="secondary" size={14} />
)} )}
</Box> </Box>
)} )}
</Widget> </Widget>
)} )}
</Box> </Box>
); );
} }

1
src/components/common/ImagePublisher/ImagePublisher-styles.tsx
View File

@ -11,6 +11,7 @@ export const AddCoverImageButton = styled(Button)(({ theme }) => ({
fontWeight: 400, fontWeight: 400,
letterSpacing: "0.2px", letterSpacing: "0.2px",
color: theme.palette.text.primary, color: theme.palette.text.primary,
width: "170px",
backgroundColor: "#44c4ff", backgroundColor: "#44c4ff",
"&:hover": { backgroundColor: "#01a9e9" }, "&:hover": { backgroundColor: "#01a9e9" },
gap: "5px", gap: "5px",

1
src/components/common/ImagePublisher/ImageUploader.tsx
View File

@ -98,6 +98,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
{...getRootProps()} {...getRootProps()}
sx={{ sx={{
display: "flex", display: "flex",
width: "170px",
}} }}
> >
<input {...getInputProps()} /> <input {...getInputProps()} />

61
src/components/common/IssueIcon.tsx Normal file
View File

@ -0,0 +1,61 @@
import AttachFileIcon from "@mui/icons-material/AttachFile";
import React, { CSSProperties } from "react";
interface IssueIconProps {
iconSrc: string;
showBackupIcon?: boolean;
style?: CSSProperties;
}
export const IssueIcon = ({
iconSrc,
showBackupIcon = true,
style,
}: IssueIconProps) => {
const displayFileIcon = !iconSrc && showBackupIcon;
return (
<>
{iconSrc && (
<img
src={iconSrc}
width="50px"
height="50px"
style={{
borderRadius: "5px",
...style,
}}
/>
)}
{displayFileIcon && (
<AttachFileIcon
sx={{
...style,
width: "40px",
height: "40px",
}}
/>
)}
</>
);
};
interface IssueIconsProps {
iconSources: string[];
showBackupIcon?: boolean;
style?: CSSProperties;
}
export const IssueIcons = ({
iconSources,
showBackupIcon = true,
style,
}: IssueIconsProps) => {
return iconSources.map((icon, index) => (
<IssueIcon
key={icon + index}
iconSrc={icon}
style={{ ...style }}
showBackupIcon={showBackupIcon}
/>
));
};

96
src/components/common/LazyLoad.tsx
View File

@ -1,48 +1,48 @@
import React, { useState, useEffect, useRef } from 'react' import React, { useState, useEffect, useRef } from 'react'
import { useInView } from 'react-intersection-observer' import { useInView } from 'react-intersection-observer'
import CircularProgress from '@mui/material/CircularProgress' import CircularProgress from '@mui/material/CircularProgress'
interface Props { interface Props {
onLoadMore: () => Promise<void> onLoadMore: () => Promise<void>
isLoading?: boolean isLoading?: boolean
} }
const LazyLoad: React.FC<Props> = ({ onLoadMore, isLoading }) => { const LazyLoad: React.FC<Props> = ({ onLoadMore, isLoading }) => {
const [isFetching, setIsFetching] = useState<boolean>(false) const [isFetching, setIsFetching] = useState<boolean>(false)
const firstLoad = useRef(false) const firstLoad = useRef(false)
const [ref, inView] = useInView({ const [ref, inView] = useInView({
threshold: 0.7 threshold: 0.7
}) })
useEffect(() => { useEffect(() => {
if (inView) { if (inView) {
setIsFetching(true) setIsFetching(true)
onLoadMore().finally(() => { onLoadMore().finally(() => {
setIsFetching(false) setIsFetching(false)
firstLoad.current = true firstLoad.current = true
}) })
} }
}, [inView]) }, [inView])
return ( return (
<div <div
ref={ref} ref={ref}
style={{ style={{
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
minHeight: '25px' minHeight: '25px'
}} }}
> >
<div <div
style={{ style={{
visibility: (isFetching || isLoading) ? 'visible' : 'hidden' visibility: (isFetching || isLoading) ? 'visible' : 'hidden'
}} }}
> >
<CircularProgress /> <CircularProgress />
</div> </div>
</div> </div>
) )
} }
export default LazyLoad export default LazyLoad

172
src/components/common/Notification/Notification.tsx
View File

@ -1,86 +1,86 @@
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import { toast, ToastContainer, Zoom, Slide } from 'react-toastify' import { toast, ToastContainer, Zoom, Slide } from 'react-toastify'
import { removeNotification } from '../../../state/features/notificationsSlice' import { removeNotification } from '../../../state/features/notificationsSlice'
import 'react-toastify/dist/ReactToastify.css' import 'react-toastify/dist/ReactToastify.css'
import { RootState } from '../../../state/store' import { RootState } from '../../../state/store'
const Notification = () => { const Notification = () => {
const dispatch = useDispatch() const dispatch = useDispatch()
const { alertTypes } = useSelector((state: RootState) => state.notifications) const { alertTypes } = useSelector((state: RootState) => state.notifications)
if (alertTypes.alertError) { if (alertTypes.alertError) {
toast.error(`❌ ${alertTypes?.alertError}`, { toast.error(`❌ ${alertTypes?.alertError}`, {
position: 'bottom-right', position: 'bottom-right',
autoClose: 4000, autoClose: 4000,
hideProgressBar: false, hideProgressBar: false,
closeOnClick: true, closeOnClick: true,
pauseOnHover: true, pauseOnHover: true,
draggable: true, draggable: true,
progress: undefined, progress: undefined,
icon: false icon: false
}) })
dispatch(removeNotification()) dispatch(removeNotification())
} }
if (alertTypes.alertSuccess) { if (alertTypes.alertSuccess) {
toast.success(`✔️ ${alertTypes?.alertSuccess}`, { toast.success(`✔️ ${alertTypes?.alertSuccess}`, {
position: 'bottom-right', position: 'bottom-right',
autoClose: 4000, autoClose: 4000,
hideProgressBar: false, hideProgressBar: false,
closeOnClick: true, closeOnClick: true,
pauseOnHover: true, pauseOnHover: true,
draggable: true, draggable: true,
progress: undefined, progress: undefined,
icon: false icon: false
}) })
dispatch(removeNotification()) dispatch(removeNotification())
} }
if (alertTypes.alertInfo) { if (alertTypes.alertInfo) {
toast.info(`${alertTypes?.alertInfo}`, { toast.info(`${alertTypes?.alertInfo}`, {
position: 'top-right', position: 'top-right',
autoClose: 1300, autoClose: 1300,
hideProgressBar: false, hideProgressBar: false,
closeOnClick: true, closeOnClick: true,
pauseOnHover: true, pauseOnHover: true,
draggable: true, draggable: true,
progress: undefined, progress: undefined,
theme: 'light' theme: 'light'
}) })
dispatch(removeNotification()) dispatch(removeNotification())
} }
if (alertTypes.alertInfo) { if (alertTypes.alertInfo) {
return ( return (
<ToastContainer <ToastContainer
position="top-right" position="top-right"
autoClose={2000} autoClose={2000}
hideProgressBar={false} hideProgressBar={false}
newestOnTop={false} newestOnTop={false}
closeOnClick closeOnClick
rtl={false} rtl={false}
pauseOnFocusLoss pauseOnFocusLoss
draggable draggable
pauseOnHover pauseOnHover
theme="light" theme="light"
toastStyle={{ fontSize: '16px' }} toastStyle={{ fontSize: '16px' }}
transition={Slide} transition={Slide}
/> />
) )
} }
return ( return (
<ToastContainer <ToastContainer
transition={Zoom} transition={Zoom}
position="bottom-right" position="bottom-right"
autoClose={false} autoClose={false}
hideProgressBar={false} hideProgressBar={false}
newestOnTop={false} newestOnTop={false}
closeOnClick closeOnClick
rtl={false} rtl={false}
draggable draggable
pauseOnHover pauseOnHover
/> />
) )
} }
export default Notification export default Notification

86
src/components/common/PageLoader.tsx
View File

@ -1,43 +1,43 @@
import React from 'react'; import React from 'react';
import CircularProgress from '@mui/material/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/system/Box'; import Box from '@mui/system/Box';
import { useTheme } from '@mui/material' import { useTheme } from '@mui/material'
interface PageLoaderProps { interface PageLoaderProps {
size?: number size?: number
thickness?: number thickness?: number
} }
const PageLoader: React.FC<PageLoaderProps> = ({ const PageLoader: React.FC<PageLoaderProps> = ({
size = 40, size = 40,
thickness = 5 thickness = 5
}) => { }) => {
const theme = useTheme() const theme = useTheme()
return ( return (
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
height: '100vh', height: '100vh',
width: '100%', width: '100%',
position: 'fixed', position: 'fixed',
top: 0, top: 0,
left: 0, left: 0,
backgroundColor: 'rgba(255, 255, 255, 0.25)', backgroundColor: 'rgba(255, 255, 255, 0.25)',
zIndex: 1000 zIndex: 1000
}} }}
> >
<CircularProgress <CircularProgress
size={size} size={size}
thickness={thickness} thickness={thickness}
sx={{ sx={{
color: theme.palette.secondary.main color: theme.palette.secondary.main
}} }}
/> />
</Box> </Box>
) )
} }
export default PageLoader; export default PageLoader;

50
src/components/common/Portal.tsx
View File

@ -1,25 +1,25 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { createPortal } from 'react-dom' import { createPortal } from 'react-dom'
interface PortalProps { interface PortalProps {
children: React.ReactNode children: React.ReactNode
} }
const Portal: React.FC<PortalProps> = ({ children }) => { const Portal: React.FC<PortalProps> = ({ children }) => {
const [mounted, setMounted] = useState(false) const [mounted, setMounted] = useState(false)
useEffect(() => { useEffect(() => {
setMounted(true) setMounted(true)
return () => setMounted(false) return () => setMounted(false)
}, []) }, [])
return mounted return mounted
? createPortal( ? createPortal(
children, children,
document.querySelector('#modal-root') as HTMLElement document.querySelector('#modal-root') as HTMLElement
) )
: null : null
} }
export default Portal export default Portal

80
src/components/common/TextEditor/DisplayHtml.tsx
View File

@ -1,40 +1,40 @@
import { useMemo } from "react"; import { useMemo } from "react";
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
import "react-quill/dist/quill.snow.css"; import "react-quill/dist/quill.snow.css";
import "react-quill/dist/quill.core.css"; import "react-quill/dist/quill.core.css";
import "react-quill/dist/quill.bubble.css"; import "react-quill/dist/quill.bubble.css";
import { convertQortalLinks } from "./utils"; import { convertQortalLinks } from "./utils";
import { Box, styled } from "@mui/material"; import { Box, styled } from "@mui/material";
const CrowdfundInlineContent = styled(Box)(({ theme }) => ({ const CrowdfundInlineContent = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
fontFamily: "Mulish", fontFamily: "Mulish",
fontSize: "19px", fontSize: "19px",
fontWeight: 400, fontWeight: 400,
letterSpacing: 0, letterSpacing: 0,
color: theme.palette.text.primary, color: theme.palette.text.primary,
width: '100%' width: '100%'
})); }));
export const DisplayHtml = ({ html }) => { export const DisplayHtml = ({ html }) => {
const cleanContent = useMemo(() => { const cleanContent = useMemo(() => {
if (!html) return null; if (!html) return null;
const sanitize: string = DOMPurify.sanitize(html, { const sanitize: string = DOMPurify.sanitize(html, {
USE_PROFILES: { html: true }, USE_PROFILES: { html: true },
}); });
const anchorQortal = convertQortalLinks(sanitize); const anchorQortal = convertQortalLinks(sanitize);
return anchorQortal; return anchorQortal;
}, [html]); }, [html]);
if (!cleanContent) return null; if (!cleanContent) return null;
return ( return (
<CrowdfundInlineContent> <CrowdfundInlineContent>
<div <div
className="ql-editor" className="ql-editor"
dangerouslySetInnerHTML={{ __html: cleanContent }} dangerouslySetInnerHTML={{ __html: cleanContent }}
/> />
</CrowdfundInlineContent> </CrowdfundInlineContent>
); );
}; };

50
src/components/common/TextEditor/utils.ts
View File

@ -1,26 +1,26 @@
export function convertQortalLinks(inputHtml) { export function convertQortalLinks(inputHtml) {
// Regular expression to match 'qortal://...' URLs. // Regular expression to match 'qortal://...' URLs.
// This will stop at the first whitespace, comma, or HTML tag // This will stop at the first whitespace, comma, or HTML tag
var regex = /(qortal:\/\/[^\s,<]+)/g; var regex = /(qortal:\/\/[^\s,<]+)/g;
// Replace matches in inputHtml with formatted anchor tag // Replace matches in inputHtml with formatted anchor tag
var outputHtml = inputHtml.replace(regex, function (match) { var outputHtml = inputHtml.replace(regex, function (match) {
return `<a href="${match}" className="qortal-link">${match}</a>`; return `<a href="${match}" className="qortal-link">${match}</a>`;
}); });
return outputHtml; return outputHtml;
} }
export function extractTextFromHTML(htmlString: any, length = 150) { export function extractTextFromHTML(htmlString: any, length = 150) {
// Create a temporary DOM element // Create a temporary DOM element
const tempDiv = document.createElement("div"); const tempDiv = document.createElement("div");
// Replace br tags and block-level tags with a space before setting the HTML content // Replace br tags and block-level tags with a space before setting the HTML content
const htmlWithSpaces = htmlString.replace(/<\/?(br|p|div|h[1-6]|ul|ol|li|blockquote)[^>]*>/gi, ' '); const htmlWithSpaces = htmlString.replace(/<\/?(br|p|div|h[1-6]|ul|ol|li|blockquote)[^>]*>/gi, ' ');
tempDiv.innerHTML = htmlWithSpaces; tempDiv.innerHTML = htmlWithSpaces;
// Extract the text content // Extract the text content
let text = tempDiv.textContent || tempDiv.innerText || ""; let text = tempDiv.textContent || tempDiv.innerText || "";
// Replace multiple spaces with a single space and trim // Replace multiple spaces with a single space and trim
text = text.replace(/\s+/g, ' ').trim(); text = text.replace(/\s+/g, ' ').trim();
// Slice the text to the desired length // Slice the text to the desired length
return text.slice(0, length); return text.slice(0, length);
} }

1714
src/components/common/VideoPlayer.tsx
View File

File diff suppressed because it is too large Load Diff

1296
src/components/common/VideoPlayerGlobal.tsx
View File

File diff suppressed because it is too large Load Diff

6
src/components/layout/Navbar/Navbar.tsx
View File

@ -22,7 +22,7 @@ import { useNavigate } from "react-router-dom";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import { DownloadTaskManager } from "../../common/DownloadTaskManager"; import { DownloadTaskManager } from "../../common/DownloadTaskManager";
import QSupportLogo from "../../../assets/img/Q-SupportIcon.webp"; import QSupportIcon from "../../../assets/img/Q-SupportIcon(AlphaX).webp";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { import {
addFilteredFiles, addFilteredFiles,
@ -32,6 +32,7 @@ import {
import { RootState } from "../../../state/store"; import { RootState } from "../../../state/store";
import { useWindowSize } from "../../../hooks/useWindowSize"; import { useWindowSize } from "../../../hooks/useWindowSize";
import { PublishIssue } from "../../PublishIssue/PublishIssue.tsx"; import { PublishIssue } from "../../PublishIssue/PublishIssue.tsx";
import { FeeHistoryModal } from "../../../constants/PublishFees/FeePricePublish/FeeHistoryModal.tsx";
interface Props { interface Props {
isAuthenticated: boolean; isAuthenticated: boolean;
@ -114,7 +115,7 @@ const NavBar: React.FC<Props> = ({
}} }}
> >
<img <img
src={QSupportLogo} src={QSupportIcon}
style={{ style={{
width: "auto", width: "auto",
height: "100px", height: "100px",
@ -238,6 +239,7 @@ const NavBar: React.FC<Props> = ({
</Popover> </Popover>
<DownloadTaskManager /> <DownloadTaskManager />
<FeeHistoryModal />
{theme.palette.mode === "dark" ? ( {theme.palette.mode === "dark" ? (
<LightModeIcon <LightModeIcon
onClickFunc={() => setTheme("light")} onClickFunc={() => setTheme("light")}

48
src/constants/Categories/1stCategories.ts
View File

@ -1,48 +0,0 @@
import audioIcon from "../../assets/icons/audio.webp";
import bookIcon from "../../assets/icons/book.webp";
import documentIcon from "../../assets/icons/document.webp";
import gamingIcon from "../../assets/icons/gaming.webp";
import imageIcon from "../../assets/icons/image.webp";
import softwareIcon from "../../assets/icons/software.webp";
import unknownIcon from "../../assets/icons/unknown.webp";
import videoIcon from "../../assets/icons/video.webp";
import {
Categories,
Category,
CategoryData,
} from "../../components/common/CategoryList/CategoryList.tsx";
import {
getAllCategoriesWithIcons,
sortCategory,
} from "./CategoryFunctions.ts";
import { QappCategories, SupportState } from "./2ndCategories.ts";
export const firstCategories: Category[] = [
{ id: 1, name: "Core" },
{ id: 2, name: "UI" },
{ id: 3, name: "Q-Apps" },
{ id: 4, name: "Website" },
{ id: 5, name: "Marketing" },
{ id: 99, name: "Other" },
];
export const secondCategories: Categories = {
1: SupportState,
2: SupportState,
3: QappCategories,
4: SupportState,
5: SupportState,
99: SupportState,
};
export let thirdCategories: Categories = {};
QappCategories.map(
supportStateCategory =>
(thirdCategories[supportStateCategory.id] = SupportState)
);
export const allCategoryData: CategoryData = {
category: firstCategories,
subCategories: [secondCategories, thirdCategories],
};
export const iconCategories = getAllCategoriesWithIcons();

23
src/constants/Categories/2ndCategories.ts
View File

@ -1,23 +0,0 @@
import OpenIcon from "../../assets/icons/OpenIcon.png";
import ClosedIcon from "../../assets/icons/ClosedIcon.png";
import InProgressIcon from "../../assets/icons/InProgressIcon.png";
import CompleteIcon from "../../assets/icons/CompleteIcon.png";
export const SupportState = [
{ id: 101, name: "Open", icon: OpenIcon },
{ id: 102, name: "Closed", icon: ClosedIcon },
{ id: 103, name: "In Progress", icon: InProgressIcon },
{ id: 104, name: "Complete", icon: CompleteIcon },
];
export const QappCategories = [
{ id: 301, name: "Q-Blog" },
{ id: 302, name: "Q-Mail" },
{ id: 303, name: "Q-Shop" },
{ id: 304, name: "Q-Fund" },
{ id: 305, name: "Ear-Bump" },
{ id: 306, name: "Q-Tube" },
{ id: 307, name: "Q-Share" },
{ id: 308, name: "Q-Support" },
{ id: 399, name: "Other" },
];

0
src/constants/Categories/3rdCategories.ts
View File

67
src/constants/Categories/Categories.ts Normal file
View File

@ -0,0 +1,67 @@
import {
Categories,
Category,
CategoryData,
} from "../../components/common/CategoryList/CategoryList.tsx";
import { getAllCategoriesWithIcons } from "./CategoryFunctions.ts";
import CoreIcon from "../../assets/icons/Qortal-Core-Icon.webp";
import UIicon from "../../assets/icons/Qortal-UI-Icon.webp";
import QappIcon from "../../assets/icons/Q-App-Icon.webp";
import UnknownIcon from "../../assets/icons/unknown.webp";
import BugReportIcon from "../../assets/icons/Bug-Report-Icon.webp";
import FeatureRequestIcon from "../../assets/icons/Feature-Request-Icon.webp";
import TechSupportIcon from "../../assets/icons/Tech-Support-Icon.webp";
import OpenIcon from "../../assets/icons/Open-Icon.webp";
import ClosedIcon from "../../assets/icons/Closed-Icon.webp";
import InProgressIcon from "../../assets/icons/In-Progress-Icon.webp";
import CompleteIcon from "../../assets/icons/Complete-Icon.webp";
const issueLocationLabel = "Issue Location";
export const issueLocation: Category[] = [
{ id: 1, name: "Core", icon: CoreIcon, label: issueLocationLabel },
{ id: 2, name: "UI", icon: UIicon, label: issueLocationLabel },
{ id: 3, name: "Q-Apps/Websites", icon: QappIcon, label: issueLocationLabel },
{ id: 99, name: "Other", icon: UnknownIcon, label: issueLocationLabel },
];
const issueTypeLabel = "Issue Type";
export const issueType = [
{ id: 11, name: "Bug Report", icon: BugReportIcon, label: issueTypeLabel },
{
id: 12,
name: "Feature Request",
icon: FeatureRequestIcon,
label: issueTypeLabel,
},
{
id: 13,
name: "Tech Support",
icon: TechSupportIcon,
label: issueTypeLabel,
},
{ id: 19, name: "Other", icon: UnknownIcon, label: issueTypeLabel },
];
export const secondCategories: Categories = {};
issueLocation.map(c => (secondCategories[c.id] = issueType));
const issueLabel = "Issue State";
export const IssueState = [
{ id: 101, name: "Open", icon: OpenIcon, label: issueLabel },
{ id: 102, name: "Closed", icon: ClosedIcon, label: issueLabel },
{ id: 103, name: "In Progress", icon: InProgressIcon, label: issueLabel },
{ id: 104, name: "Complete", icon: CompleteIcon, label: issueLabel },
];
export const thirdCategories: Categories = {};
issueType.map(issueType => (thirdCategories[issueType.id] = IssueState));
export const allCategoryData: CategoryData = {
category: issueLocation,
subCategories: [secondCategories, thirdCategories],
};
export const iconCategories = getAllCategoriesWithIcons();

12
src/constants/Categories/CategoryFunctions.ts
View File

@ -2,7 +2,7 @@ import {
Category, Category,
getCategoriesFromObject, getCategoriesFromObject,
} from "../../components/common/CategoryList/CategoryList.tsx"; } from "../../components/common/CategoryList/CategoryList.tsx";
import { allCategoryData, iconCategories } from "./1stCategories.ts"; import { allCategoryData, iconCategories } from "./Categories.ts";
export const sortCategory = (a: Category, b: Category) => { export const sortCategory = (a: Category, b: Category) => {
if (a.name === "Other") return 1; if (a.name === "Other") return 1;
@ -81,11 +81,9 @@ export const getAllCategoriesWithIcons = () => {
export const getIconsFromObject = (fileObj: any) => { export const getIconsFromObject = (fileObj: any) => {
const categories = getCategoriesFromObject(fileObj); const categories = getCategoriesFromObject(fileObj);
const icons = categories const icons = categories.map(categoryID => {
.map(categoryID => { return iconCategories.find(category => category.id === +categoryID)?.icon;
return iconCategories.find(category => category.id === +categoryID)?.icon; });
})
.reverse();
return icons.find(icon => icon !== undefined); return icons.filter(icon => icon !== undefined);
}; };

2
src/constants/Identifiers.ts
View File

@ -1,4 +1,4 @@
const useTestIdentifiers = true; export const useTestIdentifiers = false;
export const QSUPPORT_FILE_BASE = useTestIdentifiers export const QSUPPORT_FILE_BASE = useTestIdentifiers
? "MYTEST_support_issue_" ? "MYTEST_support_issue_"

7
src/constants/Misc.ts
View File

@ -3,3 +3,10 @@ export const titleFormatter = /[^a-zA-Z0-9\s-_!?()&'",.;:|—~@#$%^*+=<>]/g;
export const titleFormatterOnSave = /[^a-zA-Z0-9\s-_!()&',.;—~@#$%^+=]/g; export const titleFormatterOnSave = /[^a-zA-Z0-9\s-_!()&',.;—~@#$%^+=]/g;
export const log = false; export const log = false;
export const fontSizeSmall = "80%";
export const fontSizeMedium = "100%";
export const fontSizeLarge = "120%";
export const fontSizeExLarge = "150%";
export const maxCommentLength = 10_000;
export const maxNotificationLength = 2000;

29
src/constants/PublishFees/FeeData.tsx Normal file
View File

@ -0,0 +1,29 @@
import { Box } from "@mui/material";
import React from "react";
import { useTestIdentifiers } from "../Identifiers.ts";
export const appName = "Q-Support";
export const feeDestinationName = "Q-Support";
export const feeAmountBase = useTestIdentifiers ? 0.000001 : 0.25;
export const FEE_BASE = useTestIdentifiers
? "MYTEST_support_fees"
: "q_support_fees";
export const maxFeePublishTimeDiff = 10; // time in minutes before/after publish when fee is considered valid
export type FeeType = "default" | "comment" | "like" | "dislike" | "superlike";
export const feeDisclaimerString = `When Publishing (but not editing) Issues ${feeAmountBase} \n
QORT is requested to fund continued development of Q-Support.`;
export const feeDisclaimer = (
<Box
sx={{
fontSize: "28px",
color: "#f44336",
fontWeight: 600,
}}
>
{feeDisclaimerString}
</Box>
);

60
src/constants/PublishFees/FeePricePublish/DataTable.tsx Normal file
View File

@ -0,0 +1,60 @@
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
} from "@mui/material";
import React from "react";
import { SxProps } from "@mui/material/styles";
export interface DataTableProps {
columnNames: string[];
data: string[][];
sx?: SxProps;
}
export const DataTable = ({ columnNames, data, sx }: DataTableProps) => {
return (
<TableContainer sx={{ ...sx }}>
<Table align="center" stickyHeader>
<TableHead>
<TableRow>
{columnNames.map((columnName, index) => (
<TableCell
sx={{
fontSize: "30px",
textAlign: "center",
fontWeight: "bold",
}}
key={columnName + index}
>
{columnName}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{data.map((tableRow, index) => {
return (
<TableRow key={tableRow.toString() + index}>
{tableRow.map((tableCell, index) => (
<TableCell
sx={{
fontSize: index === 0 ? "30px" : "25px",
fontWeight: index === 0 ? "bold" : "normal",
textAlign: "center",
}}
key={tableCell + index}
>
{tableCell}
</TableCell>
))}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
);
};

48
src/constants/PublishFees/FeePricePublish/FeeHistoryModal.tsx Normal file
View File

@ -0,0 +1,48 @@
import { Button, Modal, useTheme } from "@mui/material";
import { ThemeButton } from "../../../pages/Home/Home-styles.tsx";
import { appName } from "../FeeData.tsx";
import { ModalBody } from "./FeePricePublish-styles.tsx";
import { useEffect, useState } from "react";
import { userHasName } from "../VerifyPayment-Functions.ts";
import { FeeHistoryTable } from "./FeeHistoryTable.tsx";
export const FeeHistoryModal = () => {
const [open, setOpen] = useState<boolean>(false);
const [userOwnsApp, setUserOwnsApp] = useState<boolean>(false);
const theme = useTheme();
useEffect(() => {
userHasName(appName).then(userHasName => setUserOwnsApp(userHasName));
}, []);
const buttonSX = {
fontSize: "20px",
color: theme.palette.secondary.main,
fontWeight: "bold",
};
if (theme.palette.mode === "light")
buttonSX["&:hover"] = { backgroundColor: theme.palette.primary.dark };
return (
<>
<ThemeButton
sx={{ height: "40px", marginRight: "5px" }}
onClick={() => setOpen(true)}
>
{appName} Fees
</ThemeButton>
<Modal
open={open}
aria-labelledby="modal-title"
aria-describedby="modal-description"
onClose={() => setOpen(false)}
>
<ModalBody sx={{ width: "75vw", maxWidth: "75vw" }}>
<FeeHistoryTable />
<Button sx={buttonSX} onClick={() => setOpen(false)}>
Close
</Button>
</ModalBody>
</Modal>
</>
);
};

49
src/constants/PublishFees/FeePricePublish/FeeHistoryTable.tsx Normal file
View File

@ -0,0 +1,49 @@
import { DataTable } from "./DataTable.tsx";
import { FeePrice, fetchFees } from "./FeePricePublish.ts";
import React, { useEffect, useState } from "react";
export interface FeeHistoryProps {
showFeeType?: boolean;
showCoinType?: boolean;
filterData?: () => string[][];
}
export const FeeHistoryTable = ({
showFeeType = true,
showCoinType = true,
filterData,
}: FeeHistoryProps) => {
const [feeData, setFeeData] = useState<FeePrice[]>([]);
const fetchFeesOnStartup = () => {
fetchFees().then(feeResponse => {
setFeeData(filterData ? feeData.filter(filterData) : feeResponse);
});
};
useEffect(fetchFeesOnStartup, []);
const columnNames = ["ID", "Date", "Fee Amount"];
if (showFeeType) columnNames.push("Fee Type");
if (showCoinType) columnNames.push("Coin Type");
const data: string[][] = [];
const getRowData = (row: FeePrice, index: number) => {
const rowData: string[] = [];
rowData.push(
index.toString(),
new Date(row.time).toDateString(),
row.feeAmount.toString()
);
if (showFeeType) rowData.push(row.feeType);
if (showCoinType) rowData.push(row.coinType);
return rowData;
};
feeData.map((row, index) => {
data.push(getRowData(row, index + 1));
});
return <DataTable columnNames={columnNames} data={data} />;
};

43
src/constants/PublishFees/FeePricePublish/FeePricePublish-styles.tsx Normal file
View File

@ -0,0 +1,43 @@
import { Box } from "@mui/material";
import { styled } from "@mui/system";
export const ModalBody = styled(Box)(({ theme }) => ({
position: "absolute",
backgroundColor: theme.palette.background.default,
borderRadius: "4px",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "75%",
maxWidth: "900px",
padding: "15px 35px",
display: "flex",
flexDirection: "column",
gap: "17px",
overflowY: "auto",
maxHeight: "95vh",
boxShadow:
theme.palette.mode === "dark"
? "0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)"
: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
"&::-webkit-scrollbar-track": {
backgroundColor: theme.palette.background.paper,
},
"&::-webkit-scrollbar-track:hover": {
backgroundColor: theme.palette.background.paper,
},
"&::-webkit-scrollbar": {
width: "16px",
height: "10px",
backgroundColor: theme.palette.mode === "light" ? "#f6f8fa" : "#292d3e",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: theme.palette.mode === "light" ? "#d3d9e1" : "#575757",
borderRadius: "8px",
backgroundClip: "content-box",
border: "4px solid transparent",
},
"&::-webkit-scrollbar-thumb:hover": {
backgroundColor: theme.palette.mode === "light" ? "#b7bcc4" : "#474646",
},
}));

90
src/constants/PublishFees/FeePricePublish/FeePricePublish.ts Normal file
View File

@ -0,0 +1,90 @@
import { appName, FEE_BASE, feeAmountBase, FeeType } from "../FeeData.tsx";
import { objectToBase64 } from "../../../utils/toBase64.ts";
import { store } from "../../../state/store.ts";
import { setFeeData } from "../../../state/features/globalSlice.ts";
import { useTestIdentifiers } from "../../Identifiers.ts";
export type CoinType = "QORT" | "BTC" | "LTC" | "DOGE" | "DGB" | "RVN" | "ARRR";
export interface FeePrice {
time: number;
feeAmount: number;
feeType: FeeType; // used to differentiate different types of fees such as comments, likes, data, etc.
coinType: CoinType;
}
const feesPublishService = "DOCUMENT";
export const fetchFees = async () => {
const feeData = store.getState().global.feeData;
if (feeData.length > 0) {
return feeData;
}
try {
const response = await qortalRequest({
action: "FETCH_QDN_RESOURCE",
identifier: FEE_BASE,
name: "Q-Support",
service: feesPublishService,
});
return (await response) as FeePrice[];
} catch (e) {
console.log("fetch current fees error: ", e);
return [] as FeePrice[];
}
};
export const fetchFeesRedux = () => {
const feeData = store.getState().global.feeData;
if (feeData.length > 0) {
return feeData;
}
fetchFees().then(feeData => store.dispatch(setFeeData(feeData)));
};
export const addFeePrice = async (
feeAmount = feeAmountBase,
feeType: FeeType = "default",
coinType: CoinType = "QORT"
) => {
let fees = await fetchFees();
fees.push({
time: Date.now(),
feeAmount,
feeType,
coinType,
});
const feesBase64 = await objectToBase64(fees);
console.log("fees are: ", fees);
await qortalRequest({
action: "PUBLISH_QDN_RESOURCE",
name: appName,
identifier: FEE_BASE,
service: feesPublishService,
data64: feesBase64,
});
};
const feeFilter = (fee: FeePrice, feeToVerify: FeePrice) => {
const nameCheck = fee.feeType === feeToVerify.feeType;
const coinTypeCheck = fee.coinType === feeToVerify.coinType;
const timeCheck = feeToVerify.time <= feeToVerify.time;
return nameCheck && coinTypeCheck && timeCheck;
};
export const verifyFeeAmount = async (feeToVerify: FeePrice) => {
if (useTestIdentifiers) return true;
const fees = await fetchFees();
const filteredFees = fees.filter(fee => feeFilter(fee, feeToVerify));
if (filteredFees.length === 0) return false;
const feeToCheck = filteredFees[filteredFees.length - 1]; // gets fee that applies at the time of feeToVerify
return feeToVerify.feeAmount >= feeToCheck.feeAmount;
};

79
src/constants/PublishFees/SendFeeFunctions.ts Normal file
View File

@ -0,0 +1,79 @@
import { feeDestinationName, FeeType } from "./FeeData.tsx";
import { CoinType } from "./FeePricePublish/FeePricePublish.ts";
export interface NameData {
name: string;
reducedName: string;
owner: string;
data: string;
registered: number;
isForSale: boolean;
}
export const getNameData = async (name: string) => {
return qortalRequest({
action: "GET_NAME_DATA",
name: name,
}) as Promise<NameData>;
};
export interface SendCoinResponse {
amount: number;
approvalStatus: string;
fee: string;
recipient: string;
reference: string;
senderPublicKey: string;
signature: string;
timestamp: number;
txGroupId: number;
type: string;
}
export const sendCoin = async (
address: string,
amount: number,
coin: CoinType
) => {
try {
return (await qortalRequest({
action: "SEND_COIN",
coin,
destinationAddress: address,
amount,
})) as SendCoinResponse;
} catch (e) {
console.log("sendCoin refused", e);
}
};
export const sendQORT = async (address: string, amount: number) => {
return await sendCoin(address, amount, "QORT");
};
export const sendQORTtoName = async (name: string, amount: number) => {
const address = await getNameData(name);
if (address) return await sendQORT(address.owner, amount);
else throw Error("Name Not Found");
};
export interface PublishFeeData {
signature: string;
senderName: string;
createdTimestamp?: number; //timestamp of the metadata publish, NOT the send feeAmount publish, added after publish is fetched
updatedTimestamp?: number;
feeType?: FeeType;
coinType?: CoinType;
isPaid?: boolean;
}
export type CommentType = "reply" | "edit" | "comment";
export interface CommentObject {
text: string;
feeData: PublishFeeData;
}
export const payPublishFeeQORT = async (feeAmount: number) => {
const publish = await sendQORTtoName(feeDestinationName, feeAmount);
return publish?.signature;
};

85
src/constants/PublishFees/VerifyPayment-Functions.ts Normal file
View File

@ -0,0 +1,85 @@
import { Issue } from "../../state/features/fileSlice.ts";
import { PublishFeeData } from "./SendFeeFunctions.ts";
export type AccountName = { name: string; owner: string };
export interface GetRequestData {
limit?: number;
offset?: number;
reverse?: boolean;
}
export interface getTransactionBySignatureResponse {
type: "string";
timestamp: number;
reference: string;
fee: number;
signature: string;
txGroupId: number;
recipient: string;
blockHeight: number;
approvalStatus: string;
creatorAddress: string;
senderPublicKey: string;
amount: string;
}
export const stringIsEmpty = (value: string) => {
return value === "";
};
export const getAccountNames = async (
address: string,
params?: GetRequestData
) => {
const names = (await qortalRequest({
action: "GET_ACCOUNT_NAMES",
address: address,
...params,
})) as AccountName[];
const namelessAddress = { name: "", owner: address };
const emptyNamesFilled = names.map(({ name, owner }) => {
return stringIsEmpty(name) ? namelessAddress : { name, owner };
});
const returnValue =
emptyNamesFilled.length > 0 ? emptyNamesFilled : [namelessAddress];
return returnValue as AccountName[];
};
export const getUserAccountNames = async () => {
const account = await getUserAccount();
return await getAccountNames(account.address);
};
export const userHasName = async (name: string) => {
const userAccountNames = await getUserAccountNames();
const userNames = userAccountNames.map(userName => userName.name);
return userNames.includes(name);
};
export const objectToPublishFeeData = (object: Issue) => {
const createdTimestamp = +object?.created || 0;
const updatedTimestamp = +object?.updated || 0;
return {
signature: object?.feeData?.signature,
createdTimestamp,
updatedTimestamp,
feeType: object?.feeData?.feeType || "default",
coinType: object?.feeData?.coinType || "QORT",
senderName: object?.user,
isPaid: object?.feeData?.isPaid || false,
} as PublishFeeData;
};
export const objectHasNullValues = (object: object) => {
const objectAsArray = Object.values(object);
return objectAsArray.some(value => value == null);
};
export type AccountInfo = { address: string; publicKey: string };
export const getUserAccount = async () => {
return (await qortalRequest({
action: "GET_USER_ACCOUNT",
})) as AccountInfo;
};

120
src/constants/PublishFees/VerifyPayment.ts Normal file
View File

@ -0,0 +1,120 @@
import { feeDestinationName, maxFeePublishTimeDiff } from "./FeeData.tsx";
import {
getAccountNames,
getTransactionBySignatureResponse,
objectHasNullValues,
objectToPublishFeeData,
} from "./VerifyPayment-Functions.ts";
import { verifyFeeAmount } from "./FeePricePublish/FeePricePublish.ts";
import { getNameData, PublishFeeData } from "./SendFeeFunctions.ts";
import { Issue } from "../../state/features/fileSlice.ts";
const getSignature = async (signature: string) => {
const url = "/transactions/signature/" + signature;
const response = await fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
return (await response.json()) as getTransactionBySignatureResponse;
};
const verifySignature = async (feeData: PublishFeeData) => {
const {
signature,
createdTimestamp,
updatedTimestamp,
feeType,
coinType,
senderName,
} = feeData;
const [signatureData, accountData] = await Promise.all([
getSignature(signature),
getNameData(senderName),
]);
const namesofFeeRecipient = await getAccountNames(signatureData.recipient);
const doesFeeAmountMatch = await verifyFeeAmount({
time: signatureData.timestamp,
feeAmount: +signatureData.amount,
feeType,
coinType,
});
const signatureTime = signatureData.timestamp;
let doesTimeMatch: boolean = false;
if (!updatedTimestamp) {
const timeDiff = createdTimestamp - signatureTime;
const timeDiffMinutes = Math.abs(timeDiff) / 1000 / 60;
doesTimeMatch = timeDiffMinutes <= maxFeePublishTimeDiff;
} else {
const minutesPublishDiff = 1000 * 60 * maxFeePublishTimeDiff;
const startTime = createdTimestamp - minutesPublishDiff;
const endTime = updatedTimestamp;
const sigTimeAfterStartTime = signatureTime > startTime;
const sigTimeBeforeEndTime = signatureTime < endTime;
doesTimeMatch = sigTimeAfterStartTime && sigTimeBeforeEndTime;
}
const doesSignatureMatch = signature === signatureData?.signature;
const doesSenderMatch = signatureData.creatorAddress === accountData.owner;
const doesFeeRecipientNameMatch =
namesofFeeRecipient.findIndex(
nameData => nameData?.name === feeDestinationName
) >= 0;
if (!doesTimeMatch) console.log("Time does not match");
if (!doesSignatureMatch) console.log("Signature does not match");
if (!doesSenderMatch) console.log("Sender does not match");
if (!doesFeeRecipientNameMatch) console.log("Recipient does not match");
if (!doesFeeAmountMatch) console.log("FeeAmount does not match");
return (
doesTimeMatch &&
doesSignatureMatch &&
doesSenderMatch &&
doesFeeRecipientNameMatch &&
doesFeeAmountMatch
);
};
export const verifyPayment = async (publishToVerify: Issue) => {
if (!publishToVerify) return false;
const publishFeeData = objectToPublishFeeData(publishToVerify);
if (objectHasNullValues(publishFeeData)) return false;
const verifyFunctionsList: Promise<boolean>[] = [];
verifyFunctionsList.push(verifySignature(publishFeeData));
const paymentChecks = await Promise.all(verifyFunctionsList);
return paymentChecks.every(check => check === true);
};
export const appendIsPaidToFeeData = (issue: Issue, isPaid: boolean): Issue => {
return {
...issue,
feeData: {
...(issue?.feeData || { signature: undefined, senderName: "" }),
isPaid,
},
};
};
export const verifyAllPayments = async (issues: Issue[]) => {
const verifiedPayments = await Promise.all(
issues.map(issue => verifyPayment(issue))
);
return issues.map((issue, index) => {
return appendIsPaidToFeeData(issue, verifiedPayments[index]);
});
};

87
src/global.d.ts vendored
View File

@ -1,55 +1,56 @@
// src/global.d.ts // src/global.d.ts
interface QortalRequestOptions { interface QortalRequestOptions {
action: string action: string;
name?: string name?: string;
service?: string service?: string;
data64?: string data64?: string;
title?: string title?: string;
description?: string description?: string;
category?: string category?: string;
tags?: string[] tags?: string[];
identifier?: string identifier?: string;
address?: string address?: string;
metaData?: string metaData?: string;
encoding?: string encoding?: string;
includeMetadata?: boolean includeMetadata?: boolean;
limit?: numebr limit?: numebr;
offset?: number offset?: number;
reverse?: boolean reverse?: boolean;
resources?: any[] resources?: any[];
filename?: string filename?: string;
list_name?: string list_name?: string;
item?: string item?: string;
items?: strings[] items?: strings[];
tag1?: string tag1?: string;
tag2?: string tag2?: string;
tag3?: string tag3?: string;
tag4?: string tag4?: string;
tag5?: string tag5?: string;
coin?: string coin?: string;
destinationAddress?: string destinationAddress?: string;
amount?: number amount?: number;
blob?: Blob blob?: Blob;
mimeType?: string mimeType?: string;
file?: File file?: File;
encryptedData?: string encryptedData?: string;
name?: string name?: string;
mode?: string mode?: string;
query?: string query?: string;
excludeBlocked?: boolean excludeBlocked?: boolean;
exactMatchNames?: boolean exactMatchNames?: boolean;
message?: string;
} }
declare function qortalRequest(options: QortalRequestOptions): Promise<any> declare function qortalRequest(options: QortalRequestOptions): Promise<any>;
declare function qortalRequestWithTimeout( declare function qortalRequestWithTimeout(
options: QortalRequestOptions, options: QortalRequestOptions,
time: number time: number
): Promise<any> ): Promise<any>;
declare global { declare global {
interface Window { interface Window {
_qdnBase: any // Replace 'any' with the appropriate type if you know it _qdnBase: any; // Replace 'any' with the appropriate type if you know it
_qdnTheme: string _qdnTheme: string;
} }
} }
@ -57,6 +58,6 @@ declare global {
interface Window { interface Window {
showSaveFilePicker: ( showSaveFilePicker: (
options?: SaveFilePickerOptions options?: SaveFilePickerOptions
) => Promise<FileSystemFileHandle> ) => Promise<FileSystemFileHandle>;
} }
} }

118
src/hooks/useFetchIssues.tsx
View File

@ -3,12 +3,12 @@ import { useDispatch, useSelector } from "react-redux";
import { import {
addFiles, addFiles,
addToHashMap, addToHashMap,
Issue,
removeFromHashMap, removeFromHashMap,
setCountNewFiles, setCountNewFiles,
upsertFiles, upsertFiles,
upsertFilesBeginning, upsertFilesBeginning,
upsertFilteredFiles, upsertFilteredFiles,
Video,
} from "../state/features/fileSlice.ts"; } from "../state/features/fileSlice.ts";
import { import {
setFilesPerNamePublished, setFilesPerNamePublished,
@ -24,7 +24,8 @@ import {
QSUPPORT_PLAYLIST_BASE, QSUPPORT_PLAYLIST_BASE,
} from "../constants/Identifiers.ts"; } from "../constants/Identifiers.ts";
import { queue } from "../wrappers/GlobalWrapper"; import { queue } from "../wrappers/GlobalWrapper";
import { getCategoriesFetchString } from "../components/common/CategoryList/CategoryList.tsx"; import { log } from "../constants/Misc.ts";
import { verifyAllPayments } from "../constants/PublishFees/VerifyPayment.ts";
export const useFetchIssues = () => { export const useFetchIssues = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -50,7 +51,7 @@ export const useFetchIssues = () => {
); );
const checkAndUpdateIssue = React.useCallback( const checkAndUpdateIssue = React.useCallback(
(video: Video) => { (video: Issue) => {
const existingVideo = hashMapFiles[video.id]; const existingVideo = hashMapFiles[video.id];
if (!existingVideo) { if (!existingVideo) {
return true; return true;
@ -97,10 +98,10 @@ export const useFetchIssues = () => {
videoId: issueID, videoId: issueID,
content, content,
}); });
console.log("response is: ", res);
res?.isValid res?.isValid
? dispatch(addToHashMap(res)) ? dispatch(addToHashMap(res))
: dispatch(removeFromHashMap(issueID)); : dispatch(removeFromHashMap(issueID));
return res;
} catch (error) { } catch (error) {
retries = retries + 1; retries = retries + 1;
if (retries < 2) { if (retries < 2) {
@ -112,7 +113,7 @@ export const useFetchIssues = () => {
} }
}; };
const getNewFiles = React.useCallback(async () => { const getNewIssues = React.useCallback(async () => {
try { try {
dispatch(setIsLoadingGlobal(true)); dispatch(setIsLoadingGlobal(true));
@ -149,7 +150,7 @@ export const useFetchIssues = () => {
fetchAll = responseData.slice(0, findVideo); fetchAll = responseData.slice(0, findVideo);
} }
const structureData = fetchAll.map((video: any): Video => { const structureData = fetchAll.map((video: any): Issue => {
return { return {
title: video?.metadata?.title, title: video?.metadata?.title,
category: video?.metadata?.category, category: video?.metadata?.category,
@ -186,20 +187,21 @@ export const useFetchIssues = () => {
} }
}, [videos, hashMapFiles]); }, [videos, hashMapFiles]);
const getFiles = React.useCallback( const getIssues = React.useCallback(
async ( async (
filters = {}, filters = {},
reset?: boolean, reset?: boolean,
resetFilers?: boolean, resetFilters?: boolean,
limit?: number limit?: number
) => { ) => {
try { try {
const { const {
name = "", name = "",
categories = [], categories = "",
QappName = "",
keywords = "", keywords = "",
type = "", type = "",
}: any = resetFilers ? {} : filters; }: any = resetFilters ? {} : filters;
let offset = videos.length; let offset = videos.length;
if (reset) { if (reset) {
offset = 0; offset = 0;
@ -211,10 +213,17 @@ export const useFetchIssues = () => {
defaultUrl += `&name=${name}`; defaultUrl += `&name=${name}`;
} }
if (categories.length > 0) { if (categories) {
defaultUrl += "&description=" + getCategoriesFetchString(categories); defaultUrl += "&description=";
} if (log) console.log("categories: ", categories);
if (categories) defaultUrl += categories;
if (log) console.log("description: ", defaultUrl);
}
if (QappName) {
defaultUrl += `&query=${QappName}`;
}
if (log) console.log("defaultURL: ", defaultUrl);
if (keywords) { if (keywords) {
defaultUrl = defaultUrl + `&query=${keywords}`; defaultUrl = defaultUrl + `&query=${keywords}`;
} }
@ -236,47 +245,48 @@ export const useFetchIssues = () => {
}); });
const responseData = await response.json(); const responseData = await response.json();
// const responseData = await qortalRequest({ let structureData = responseData.map((issue: any): Issue => {
// action: "SEARCH_QDN_RESOURCES",
// mode: "ALL",
// service: "DOCUMENT",
// query: "${QTUBE_VIDEO_BASE}",
// limit: 20,
// includeMetadata: true,
// offset: offset,
// reverse: true,
// excludeBlocked: true,
// exactMatchNames: true,
// name: names
// })
const structureData = responseData.map((video: any): Video => {
return { return {
title: video?.metadata?.title, title: issue?.metadata?.title,
service: video?.service, service: issue?.service,
category: video?.metadata?.category, category: issue?.metadata?.category,
categoryName: video?.metadata?.categoryName, categoryName: issue?.metadata?.categoryName,
tags: video?.metadata?.tags || [], tags: issue?.metadata?.tags || [],
description: video?.metadata?.description, description: issue?.metadata?.description,
created: video?.created, created: issue?.created,
updated: video?.updated, updated: issue?.updated,
user: video.name, user: issue.name,
videoImage: "", videoImage: "",
id: video.identifier, id: issue.identifier,
}; };
}); });
if (reset) { const verifiedIssuePromises: Promise<Issue>[] = [];
dispatch(addFiles(structureData));
} else {
dispatch(upsertFiles(structureData));
}
for (const content of structureData) { for (const content of structureData) {
if (content.user && content.id) { if (content.user && content.id) {
const res = checkAndUpdateIssue(content); const res = checkAndUpdateIssue(content);
const issue: Promise<Issue> = getIssue(
content.user,
content.id,
content
);
verifiedIssuePromises.push(issue);
if (res) { if (res) {
queue.push(() => getIssue(content.user, content.id, content)); queue.push(() => issue);
} }
} }
} }
const issues = await Promise.all(verifiedIssuePromises);
const verifiedIssues = await verifyAllPayments(issues);
structureData = structureData.map((issue, index) => {
return {
...issue,
feeData: verifiedIssues[index]?.feeData,
};
});
if (reset) dispatch(addFiles(structureData));
else dispatch(upsertFiles(structureData));
} catch (error) { } catch (error) {
console.log({ error }); console.log({ error });
} finally { } finally {
@ -285,7 +295,7 @@ export const useFetchIssues = () => {
[videos, hashMapFiles] [videos, hashMapFiles]
); );
const getFilesFiltered = React.useCallback( const getIssuesFiltered = React.useCallback(
async (filterValue: string) => { async (filterValue: string) => {
try { try {
const offset = filteredVideos.length; const offset = filteredVideos.length;
@ -314,7 +324,7 @@ export const useFetchIssues = () => {
// exactMatchNames: true, // exactMatchNames: true,
// name: names // name: names
// }) // })
const structureData = responseData.map((video: any): Video => { const structureData = responseData.map((video: any): Issue => {
return { return {
title: video?.metadata?.title, title: video?.metadata?.title,
category: video?.metadata?.category, category: video?.metadata?.category,
@ -345,7 +355,7 @@ export const useFetchIssues = () => {
[filteredVideos, hashMapFiles] [filteredVideos, hashMapFiles]
); );
const checkNewFiles = React.useCallback(async () => { const checkNewIssues = React.useCallback(async () => {
try { try {
const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QSUPPORT_FILE_BASE}&limit=20&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true`; const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QSUPPORT_FILE_BASE}&limit=20&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true`;
const response = await fetch(url, { const response = await fetch(url, {
@ -382,7 +392,7 @@ export const useFetchIssues = () => {
} catch (error) {} } catch (error) {}
}, [videos]); }, [videos]);
const getFilesCount = React.useCallback(async () => { const getIssuesCount = React.useCallback(async () => {
try { try {
let url = `/arbitrary/resources/search?mode=ALL&includemetadata=false&limit=0&service=DOCUMENT&identifier=${QSUPPORT_FILE_BASE}`; let url = `/arbitrary/resources/search?mode=ALL&includemetadata=false&limit=0&service=DOCUMENT&identifier=${QSUPPORT_FILE_BASE}`;
@ -411,13 +421,13 @@ export const useFetchIssues = () => {
}, []); }, []);
return { return {
getFiles, getIssues,
checkAndUpdateFile: checkAndUpdateIssue, checkAndUpdateIssue,
getFile: getIssue, getIssue,
hashMapFiles, hashMapFiles,
getNewFiles, getNewIssues,
checkNewFiles, checkNewIssues,
getFilesFiltered, getIssuesFiltered,
getFilesCount, getIssuesCount,
}; };
}; };

50
src/hooks/useWindowSize.tsx
View File

@ -1,25 +1,25 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
export function useWindowSize() { export function useWindowSize() {
const [windowSize, setWindowSize] = useState<any>({ const [windowSize, setWindowSize] = useState<any>({
width: undefined, width: undefined,
}); });
useEffect(() => { useEffect(() => {
function handleResize() { function handleResize() {
setWindowSize({ setWindowSize({
width: window.innerWidth, width: window.innerWidth,
}); });
} }
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);
// Call handler right away so state gets updated with initial window size // Call handler right away so state gets updated with initial window size
handleResize(); handleResize();
// Remove event listener on cleanup // Remove event listener on cleanup
return () => window.removeEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize);
}, []); // Empty array means that effect doesn't depend on any values from props or state, so it runs once when the component mounts, and never re-runs. }, []); // Empty array means that effect doesn't depend on any values from props or state, so it runs once when the component mounts, and never re-runs.
return windowSize; return windowSize;
} }

456
src/index.css
View File

@ -1,229 +1,229 @@
@font-face { @font-face {
font-family: 'Cambon Light'; font-family: 'Cambon Light';
src: url("./styles/fonts/Cambon-Light.ttf") format("truetype"); src: url("./styles/fonts/Cambon-Light.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: 'Merriweather Sans'; font-family: 'Merriweather Sans';
src: url("./styles/fonts/Merriweather Sans.ttf") format("truetype"); src: url("./styles/fonts/Merriweather Sans.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: 'Karla'; font-family: 'Karla';
src: url("./styles/fonts/Karla.ttf") format("truetype"); src: url("./styles/fonts/Karla.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: 'Proxima Nova'; font-family: 'Proxima Nova';
src: url("./styles/fonts/ProximaNova.otf") format("opentype"); src: url("./styles/fonts/ProximaNova.otf") format("opentype");
} }
@font-face { @font-face {
font-family: 'Raleway'; font-family: 'Raleway';
src: url("./styles/fonts/Raleway.ttf") format("truetype"); src: url("./styles/fonts/Raleway.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: 'Catamaran'; font-family: 'Catamaran';
src: url("./styles/fonts/Catamaran.ttf") format("truetype"); src: url("./styles/fonts/Catamaran.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: 'Oxygen'; font-family: 'Oxygen';
src: url("./styles/fonts/Oxygen.ttf") format("truetype"); src: url("./styles/fonts/Oxygen.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: 'Cairo'; font-family: 'Cairo';
src: url("./styles/fonts/Cairo.ttf") format("truetype"); src: url("./styles/fonts/Cairo.ttf") format("truetype");
} }
:root { :root {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
box-sizing: border-box; box-sizing: border-box;
} }
.line-clamp { .line-clamp {
height: 100px; height: 100px;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 5; /* number of lines to show */ -webkit-line-clamp: 5; /* number of lines to show */
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.edit-btn:hover { .edit-btn:hover {
opacity: .75; opacity: .75;
transition: .2s all; transition: .2s all;
} }
.post-image { .post-image {
max-width: 100%; max-width: 100%;
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.test-grid { .test-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
min-height: 25px; min-height: 25px;
} }
.test-grid-item { .test-grid-item {
border: 1px solid powderblue; border: 1px solid powderblue;
} }
body::-webkit-scrollbar-track { body::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
body::-webkit-scrollbar-track:hover { body::-webkit-scrollbar-track:hover {
background-color: transparent; background-color: transparent;
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {
width: 16px; width: 16px;
height: 10px; height: 10px;
background-color: white; background-color: white;
} }
body::-webkit-scrollbar-thumb { body::-webkit-scrollbar-thumb {
background-color: #838eee; background-color: #838eee;
border-radius: 8px; border-radius: 8px;
background-clip: content-box; background-clip: content-box;
border: 4px solid transparent; border: 4px solid transparent;
} }
body::-webkit-scrollbar-thumb:hover { body::-webkit-scrollbar-thumb:hover {
background-color: #6270f0; background-color: #6270f0;
} }
.MuiList-root::-webkit-scrollbar-track { .MuiList-root::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
.MuiList-root::-webkit-scrollbar-track:hover { .MuiList-root::-webkit-scrollbar-track:hover {
background-color: transparent; background-color: transparent;
} }
.MuiList-root::-webkit-scrollbar { .MuiList-root::-webkit-scrollbar {
width: 14px; width: 14px;
height: 10px; height: 10px;
background-color: white; background-color: white;
} }
.MuiList-root::-webkit-scrollbar-thumb { .MuiList-root::-webkit-scrollbar-thumb {
background-color: lightgray; background-color: lightgray;
border-radius: 8px; border-radius: 8px;
background-clip: content-box; background-clip: content-box;
border: 4px solid transparent; border: 4px solid transparent;
} }
.MuiList-root::-webkit-scrollbar-thumb:hover { .MuiList-root::-webkit-scrollbar-thumb:hover {
background-color: lightslategray; background-color: lightslategray;
} }
.my-masonry-grid { .my-masonry-grid {
display: -webkit-box; /* Not needed if autoprefixing */ display: -webkit-box; /* Not needed if autoprefixing */
display: -ms-flexbox; /* Not needed if autoprefixing */ display: -ms-flexbox; /* Not needed if autoprefixing */
display: flex; display: flex;
margin-left: -20px; /* gutter size offset */ margin-left: -20px; /* gutter size offset */
width: auto; width: auto;
padding: 15px 20px; padding: 15px 20px;
} }
.my-masonry-grid_column { .my-masonry-grid_column {
padding-left: 20px; /* gutter size */ padding-left: 20px; /* gutter size */
background-clip: padding-box; background-clip: padding-box;
} }
/* Style your items */ /* Style your items */
.my-masonry-grid_column > li { /* change div to reference your elements you put in <Masonry> */ .my-masonry-grid_column > li { /* change div to reference your elements you put in <Masonry> */
margin-bottom: 30px; margin-bottom: 30px;
} }
.my-svg path { .my-svg path {
fill: red fill: red
} }
.qortal-link { .qortal-link {
text-decoration: none; /* Removes the underline */ text-decoration: none; /* Removes the underline */
color: inherit; /* Inherits the color of the parent element */ color: inherit; /* Inherits the color of the parent element */
} }
.qortal-link:hover, a:focus { .qortal-link:hover, a:focus {
text-decoration: underline; /* Adds underline on hover and focus for accessibility */ text-decoration: underline; /* Adds underline on hover and focus for accessibility */
} }
.download-icon { .download-icon {
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
animation: downloadIconAnimation 2s infinite; animation: downloadIconAnimation 2s infinite;
} }
@keyframes downloadIconAnimation { @keyframes downloadIconAnimation {
0% { transform: scale(1); fill: #fff; } 0% { transform: scale(1); fill: #fff; }
50% { transform: scale(1.2); fill: #3498db; } 50% { transform: scale(1.2); fill: #3498db; }
100% { transform: scale(1); fill: #fff; } 100% { transform: scale(1); fill: #fff; }
} }
.closePlayer { .closePlayer {
position: absolute; position: absolute;
top: 0px; top: 0px;
width: 100%; width: 100%;
transition: all 0.3s; transition: all 0.3s;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
z-index: 8000; z-index: 8000;
} }
/* When the screen is 600px or less, display .myClassUnder600 and hide .myClassOver600 */ /* When the screen is 600px or less, display .myClassUnder600 and hide .myClassOver600 */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.myClassUnder600 { .myClassUnder600 {
display: none !important; display: none !important;
} }
} }
@media screen and (min-width: 601px) { @media screen and (min-width: 601px) {
.myClassOver600 { .myClassOver600 {
display: none !important; display: none !important;
} }
} }
.ql-editor { .ql-editor {
min-height: 100px; min-height: 100px;
width: 100% width: 100%
} }
.ql-editor img { .ql-editor img {
cursor: default; cursor: default;
} }
.ql-container { .ql-container {
font-size: 16px font-size: 16px
} }
.hover-click { .hover-click {
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.hover-click:hover { .hover-click:hover {
opacity: 0.7; opacity: 0.7;
} }

34
src/main.tsx
View File

@ -1,17 +1,17 @@
import ReactDOM from 'react-dom/client' import ReactDOM from 'react-dom/client'
import App from './App' import App from './App'
import './index.css' import './index.css'
import { BrowserRouter } from 'react-router-dom' import { BrowserRouter } from 'react-router-dom'
interface CustomWindow extends Window { interface CustomWindow extends Window {
_qdnBase: string _qdnBase: string
} }
const customWindow = window as unknown as CustomWindow const customWindow = window as unknown as CustomWindow
const baseUrl = customWindow?._qdnBase || '' const baseUrl = customWindow?._qdnBase || ''
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<BrowserRouter basename={baseUrl}> <BrowserRouter basename={baseUrl}>
<App /> <App />
<div id="modal-root" /> <div id="modal-root" />
</BrowserRouter> </BrowserRouter>
) )

6
src/pages/Home/Channels.tsx
View File

@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { RootState } from "../../state/store"; import { RootState } from "../../state/store";
import { Box, useTheme } from "@mui/material"; import { Box, useTheme } from "@mui/material";
import { FileContainer } from "./IssueList-styles.tsx"; import { IssueContainer } from "./IssueList-styles.tsx";
import ResponsiveImage from "../../components/ResponsiveImage"; import ResponsiveImage from "../../components/ResponsiveImage";
import { ChannelCard, ChannelTitle } from "./Home-styles"; import { ChannelCard, ChannelTitle } from "./Home-styles";
@ -30,7 +30,7 @@ export const Channels = ({ mode }: VideoListProps) => {
minHeight: "50vh", minHeight: "50vh",
}} }}
> >
<FileContainer> <IssueContainer>
{publishNames && {publishNames &&
publishNames?.slice(0, 10).map(name => { publishNames?.slice(0, 10).map(name => {
let avatarUrl = ""; let avatarUrl = "";
@ -62,7 +62,7 @@ export const Channels = ({ mode }: VideoListProps) => {
</Box> </Box>
); );
})} })}
</FileContainer> </IssueContainer>
</Box> </Box>
); );
}; };

5
src/pages/Home/Home-styles.tsx
View File

@ -1,5 +1,6 @@
import { styled } from "@mui/system"; import { styled } from "@mui/system";
import { Box, Button, Grid, Typography } from "@mui/material"; import { Box, Button, Grid, Typography } from "@mui/material";
import { fontSizeSmall } from "../../constants/Misc.ts";
export const SubtitleContainer = styled(Box)(({ theme }) => ({ export const SubtitleContainer = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
@ -88,12 +89,12 @@ export const ThemeButton = styled(Button)(({ theme }) => ({
color: theme.palette.text.primary, color: theme.palette.text.primary,
backgroundColor: "#01a9e9", backgroundColor: "#01a9e9",
fontSize: "18px", fontSize: "18px",
"&:hover": { backgroundColor: "#3e74c1" }, "&:hover": { backgroundColor: "#008fcd" },
})); }));
export const ThemeButtonBright = styled(Button)(({ theme }) => ({ export const ThemeButtonBright = styled(Button)(({ theme }) => ({
color: theme.palette.text.primary, color: theme.palette.text.primary,
backgroundColor: "#44c4ff", backgroundColor: "#44c4ff",
fontSize: "18px", fontSize: fontSizeSmall,
"&:hover": { backgroundColor: "#01a9e9" }, "&:hover": { backgroundColor: "#01a9e9" },
})); }));

153
src/pages/Home/Home.tsx
View File

@ -12,40 +12,48 @@ import {
changefilterName, changefilterName,
changefilterSearch, changefilterSearch,
changeFilterType, changeFilterType,
setQappNames,
} from "../../state/features/fileSlice.ts"; } from "../../state/features/fileSlice.ts";
import { allCategoryData } from "../../constants/Categories/1stCategories.ts"; import {
allCategoryData,
IssueState,
} from "../../constants/Categories/Categories.ts";
import { import {
CategoryList, CategoryList,
CategoryListRef, CategoryListRef,
getCategoriesFetchString,
} from "../../components/common/CategoryList/CategoryList.tsx"; } from "../../components/common/CategoryList/CategoryList.tsx";
import { StatsData } from "../../components/StatsData.tsx"; import { StatsData } from "../../components/StatsData.tsx";
import {
CategorySelect,
CategorySelectRef,
} from "../../components/common/CategoryList/CategorySelect.tsx";
import {
AutocompleteQappNames,
getPublishedQappNames,
QappNamesRef,
} from "../../components/common/AutocompleteQappNames.tsx";
interface HomeProps { interface HomeProps {
mode?: string; mode?: string;
} }
export const Home = ({ mode }: HomeProps) => { export const Home = ({ mode }: HomeProps) => {
const theme = useTheme(); const theme = useTheme();
const prevVal = useRef("");
const categoryListRef = useRef<CategoryListRef>(null);
const isFiltering = useSelector((state: RootState) => state.file.isFiltering); const isFiltering = useSelector((state: RootState) => state.file.isFiltering);
const filterValue = useSelector((state: RootState) => state.file.filterValue); const filterValue = useSelector((state: RootState) => state.file.filterValue);
const [isLoading, setIsLoading] = useState<boolean>(false); const [isLoading, setIsLoading] = useState<boolean>(false);
const filterType = useSelector((state: RootState) => state.file.filterType); const filterType = useSelector((state: RootState) => state.file.filterType);
const totalFilesPublished = useSelector(
(state: RootState) => state.global.totalFilesPublished
);
const totalNamesPublished = useSelector(
(state: RootState) => state.global.totalNamesPublished
);
const filesPerNamePublished = useSelector(
(state: RootState) => state.global.filesPerNamePublished
);
const setFilterType = payload => { const setFilterType = payload => {
dispatch(changeFilterType(payload)); dispatch(changeFilterType(payload));
}; };
const filterSearch = useSelector( const filterSearch = useSelector(
(state: RootState) => state.file.filterSearch (state: RootState) => state.file.filterSearch
); );
const QappNames = useSelector(
(state: RootState) => state.file.publishedQappNames
);
const autocompleteRef = useRef<QappNamesRef>(null);
const setFilterSearch = payload => { const setFilterSearch = payload => {
dispatch(changefilterSearch(payload)); dispatch(changefilterSearch(payload));
@ -59,60 +67,66 @@ export const Home = ({ mode }: HomeProps) => {
const isFilterMode = useRef(false); const isFilterMode = useRef(false);
const firstFetch = useRef(false); const firstFetch = useRef(false);
const afterFetch = useRef(false); const afterFetch = useRef(false);
const isFetchingFiltered = useRef(false);
const isFetching = useRef(false); const isFetching = useRef(false);
const prevVal = useRef("");
const categoryListRef = useRef<CategoryListRef>(null);
const categorySelectRef = useRef<CategorySelectRef>(null);
const countNewFiles = useSelector( const [showCategoryList, setShowCategoryList] = useState<boolean>(true);
(state: RootState) => state.file.countNewFiles const [showCategorySelect, setShowCategorySelect] = useState<boolean>(true);
);
const userAvatarHash = useSelector(
(state: RootState) => state.global.userAvatarHash
);
const { files: globalVideos } = useSelector((state: RootState) => state.file); const { files: globalVideos } = useSelector((state: RootState) => state.file);
const setSelectedCategoryFiles = payload => {};
const dispatch = useDispatch(); const dispatch = useDispatch();
const filteredFiles = useSelector( const filteredFiles = useSelector(
(state: RootState) => state.file.filteredFiles (state: RootState) => state.file.filteredFiles
); );
const [QappNamesParam, setQappNamesParam] = useState<string[]>([]);
useEffect(() => {
getPublishedQappNames().then(QappNamesResult => {
dispatch(setQappNames(QappNamesResult));
setQappNamesParam(QappNamesResult);
});
}, []);
const { const {
getFiles, getIssues,
checkAndUpdateFile, checkAndUpdateIssue,
getFile, getIssue,
hashMapFiles, hashMapFiles,
getNewFiles, getNewIssues,
checkNewFiles, checkNewIssues,
getFilesFiltered, getIssuesFiltered,
getFilesCount, getIssuesCount,
} = useFetchIssues(); } = useFetchIssues();
const getFilesHandler = React.useCallback( const getIssuesHandler = React.useCallback(
async (reset?: boolean, resetFilers?: boolean) => { async (reset?: boolean, resetFilters?: boolean) => {
if (!firstFetch.current || !afterFetch.current) return; if (!firstFetch.current || !afterFetch.current) return;
if (isFetching.current) return; if (isFetching.current) return;
isFetching.current = true; isFetching.current = true;
const selectedCategories = const selectedCategories =
categoryListRef.current.getSelectedCategories() || []; categoryListRef.current?.getSelectedCategories() || [];
const issueType = categorySelectRef?.current?.getSelectedCategory();
await getFiles( if (issueType) selectedCategories[2] = issueType;
await getIssues(
{ {
name: filterName, name: filterName,
categories: selectedCategories, categories: getCategoriesFetchString(selectedCategories),
QappName: autocompleteRef?.current?.getQappNameFetchString(),
keywords: filterSearch, keywords: filterSearch,
type: filterType, type: filterType,
}, },
reset, reset,
resetFilers resetFilters
); );
isFetching.current = false; isFetching.current = false;
}, },
[ [
getFiles, getIssues,
filterValue, filterValue,
getFilesFiltered, getIssuesFiltered,
isFiltering, isFiltering,
filterName, filterName,
filterSearch, filterSearch,
@ -122,33 +136,33 @@ export const Home = ({ mode }: HomeProps) => {
const searchOnEnter = e => { const searchOnEnter = e => {
if (e.keyCode == 13) { if (e.keyCode == 13) {
getFilesHandler(true); getIssuesHandler(true);
} }
}; };
useEffect(() => { useEffect(() => {
if (isFiltering && filterValue !== prevVal?.current) { if (isFiltering && filterValue !== prevVal?.current) {
prevVal.current = filterValue; prevVal.current = filterValue;
getFilesHandler(); getIssuesHandler();
} }
}, [filterValue, isFiltering, filteredFiles, getFilesCount]); }, [filterValue, isFiltering, filteredFiles, getIssuesCount]);
const getFilesHandlerMount = React.useCallback(async () => { const getFilesHandlerMount = React.useCallback(async () => {
if (firstFetch.current) return; if (firstFetch.current) return;
firstFetch.current = true; firstFetch.current = true;
setIsLoading(true); setIsLoading(true);
await getFiles(); await getIssues();
afterFetch.current = true; afterFetch.current = true;
isFetching.current = false; isFetching.current = false;
setIsLoading(false); setIsLoading(false);
}, [getFiles]); }, [getIssues]);
let videos = globalVideos; let issues = globalVideos;
if (isFiltering) { if (isFiltering) {
videos = filteredFiles; issues = filteredFiles;
isFilterMode.current = true; isFilterMode.current = true;
} else { } else {
isFilterMode.current = false; isFilterMode.current = false;
@ -199,9 +213,10 @@ export const Home = ({ mode }: HomeProps) => {
setFilterSearch(""); setFilterSearch("");
setFilterName(""); setFilterName("");
categoryListRef.current?.clearCategories(); categoryListRef.current?.clearCategories();
categorySelectRef.current?.clearCategory();
autocompleteRef.current?.setSelectedValue(null);
ReactDOM.flushSync(() => { ReactDOM.flushSync(() => {
getFilesHandler(true, true); getIssuesHandler(true, true);
}); });
}; };
@ -268,7 +283,43 @@ export const Home = ({ mode }: HomeProps) => {
fontSize: "20px", fontSize: "20px",
}} }}
/> />
<CategoryList categoryData={allCategoryData} ref={categoryListRef} /> {showCategoryList && (
<CategoryList
categoryData={allCategoryData}
ref={categoryListRef}
afterChange={value => {
setShowCategorySelect(!value[0]);
}}
/>
)}
{showCategorySelect && (
<CategorySelect
categoryData={IssueState}
ref={categorySelectRef}
sx={{ marginTop: "20px" }}
afterChange={value => {
setShowCategoryList(!value);
}}
/>
)}
{QappNamesParam.length > 0 && (
<AutocompleteQappNames
ref={autocompleteRef}
namesList={QappNamesParam}
sx={{ marginTop: "20px" }}
required={false}
afterChange={() => {
const currentSelectedCategories =
categoryListRef?.current?.getSelectedCategories();
categoryListRef?.current?.setSelectedCategories([
"3",
currentSelectedCategories[1],
currentSelectedCategories[2],
]);
}}
/>
)}
<ThemeButton <ThemeButton
onClick={() => { onClick={() => {
@ -284,7 +335,7 @@ export const Home = ({ mode }: HomeProps) => {
</ThemeButton> </ThemeButton>
<ThemeButton <ThemeButton
onClick={() => { onClick={() => {
getFilesHandler(true); getIssuesHandler(true);
}} }}
sx={{ sx={{
marginTop: "20px", marginTop: "20px",
@ -314,9 +365,9 @@ export const Home = ({ mode }: HomeProps) => {
maxWidth: "1400px", maxWidth: "1400px",
}} }}
></SubtitleContainer> ></SubtitleContainer>
<IssueList issues={videos} /> <IssueList issues={issues} />
<LazyLoad <LazyLoad
onLoadMore={getFilesHandler} onLoadMore={getIssuesHandler}
isLoading={isLoading} isLoading={isLoading}
></LazyLoad> ></LazyLoad>
</Box> </Box>

25
src/pages/Home/IssueList-styles.tsx
View File

@ -8,8 +8,9 @@ import {
TextField, TextField,
Typography, Typography,
} from "@mui/material"; } from "@mui/material";
import { fontSizeMedium, fontSizeSmall } from "../../constants/Misc.ts";
export const FileContainer = styled(Box)(({ theme }) => ({ export const IssueContainer = styled(Box)(({ theme }) => ({
position: "relative", position: "relative",
display: "flex", display: "flex",
padding: "15px", padding: "15px",
@ -33,7 +34,7 @@ export const StoresRow = styled(Grid)(({ theme }) => ({
}, },
})); }));
export const VideoCard = styled(Grid)(({ theme }) => ({ export const IssueCard = styled(Grid)(({ theme }) => ({
position: "relative", position: "relative",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
@ -89,14 +90,14 @@ const DoubleLine = styled(Typography)`
export const VideoCardTitle = styled(DoubleLine)(({ theme }) => ({ export const VideoCardTitle = styled(DoubleLine)(({ theme }) => ({
fontFamily: "Cairo", fontFamily: "Cairo",
fontSize: "16px", fontSize: fontSizeMedium,
letterSpacing: "0.4px", letterSpacing: "0.4px",
color: theme.palette.text.primary, color: theme.palette.text.primary,
userSelect: "none", userSelect: "none",
})); }));
export const VideoCardName = styled(Typography)(({ theme }) => ({ export const VideoCardName = styled(Typography)(({ theme }) => ({
fontFamily: "Cairo", fontFamily: "Cairo",
fontSize: "14px", fontSize: fontSizeSmall,
letterSpacing: "0.4px", letterSpacing: "0.4px",
color: theme.palette.text.primary, color: theme.palette.text.primary,
userSelect: "none", userSelect: "none",
@ -107,14 +108,16 @@ export const VideoCardName = styled(Typography)(({ theme }) => ({
})); }));
export const VideoUploadDate = styled(Typography)(({ theme }) => ({ export const VideoUploadDate = styled(Typography)(({ theme }) => ({
fontFamily: "Cairo", fontFamily: "Cairo",
fontSize: "12px", display: "span",
fontSize: fontSizeSmall,
letterSpacing: "0.4px", letterSpacing: "0.4px",
color: theme.palette.text.primary, color: theme.palette.text.primary,
userSelect: "none", userSelect: "none",
})); }));
export const BottomParent = styled(Box)(({ theme }) => ({ export const BottomParent = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
alignItems: "flex-start", justifyItems: "flex-end",
alignItems: "flex-end",
flexDirection: "column", flexDirection: "column",
})); }));
export const VideoCardDescription = styled(Typography)(({ theme }) => ({ export const VideoCardDescription = styled(Typography)(({ theme }) => ({
@ -155,11 +158,11 @@ export const MyStoresRow = styled(Grid)(({ theme }) => ({
width: "100%", width: "100%",
})); }));
export const NameContainer = styled(Box)(({ theme }) => ({ export const NameAndDateContainer = styled(Box)(({ theme }) => ({
display: "flex", display: "grid",
flexDirection: "row", gridTemplateRows: "1fr 1fr",
justifyContent: "flex-start", justifyContent: "end",
alignItems: "center", alignContent: "center",
gap: "10px", gap: "10px",
marginBottom: "10px", marginBottom: "10px",
})); }));

140
src/pages/Home/IssueList.tsx
View File

@ -1,11 +1,10 @@
import { Avatar, Box, Skeleton } from "@mui/material"; import { Avatar, Box, Skeleton } from "@mui/material";
import { import {
BlockIconContainer, BlockIconContainer,
BottomParent,
FileContainer,
IconsBox, IconsBox,
NameContainer, IssueCard,
VideoCard, IssueContainer,
NameAndDateContainer,
VideoCardName, VideoCardName,
VideoCardTitle, VideoCardTitle,
VideoUploadDate, VideoUploadDate,
@ -13,11 +12,10 @@ import {
import EditIcon from "@mui/icons-material/Edit"; import EditIcon from "@mui/icons-material/Edit";
import { import {
blockUser, blockUser,
Issue,
setEditFile, setEditFile,
Video,
} from "../../state/features/fileSlice.ts"; } from "../../state/features/fileSlice.ts";
import BlockIcon from "@mui/icons-material/Block"; import BlockIcon from "@mui/icons-material/Block";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import { formatBytes } from "../IssueContent/IssueContent.tsx"; import { formatBytes } from "../IssueContent/IssueContent.tsx";
import { formatDate } from "../../utils/time.ts"; import { formatDate } from "../../utils/time.ts";
import React, { useMemo, useState } from "react"; import React, { useMemo, useState } from "react";
@ -26,8 +24,12 @@ import { RootState } from "../../state/store.ts";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts"; import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts";
import { IssueIcon, IssueIcons } from "../../components/common/IssueIcon.tsx";
import QORTicon from "../../assets/icons/qort.png";
import { fontSizeMedium } from "../../constants/Misc.ts";
interface FileListProps { interface FileListProps {
issues: Video[]; issues: Issue[];
} }
export const IssueList = ({ issues }: FileListProps) => { export const IssueList = ({ issues }: FileListProps) => {
const hashMapIssues = useSelector( const hashMapIssues = useSelector(
@ -60,16 +62,21 @@ export const IssueList = ({ issues }: FileListProps) => {
}, [issues, hashMapIssues]); }, [issues, hashMapIssues]);
return ( return (
<FileContainer> <IssueContainer>
{filteredIssues.map((file: any, index: number) => { {filteredIssues.map((issue: any, index: number) => {
const existingFile = hashMapIssues[file?.id]; const existingFile = hashMapIssues[issue?.id];
let hasHash = false; let hasHash = false;
let fileObj = file; let issueObj = issue;
if (existingFile) { if (existingFile) {
fileObj = existingFile; issueObj = existingFile;
hasHash = true; hasHash = true;
} }
const icon = getIconsFromObject(fileObj);
const issueIcons = getIconsFromObject(issueObj);
const fileBytes = issueObj?.files.reduce(
(acc, cur) => acc + (cur?.size || 0),
0
);
return ( return (
<Box <Box
sx={{ sx={{
@ -79,22 +86,22 @@ export const IssueList = ({ issues }: FileListProps) => {
height: "75px", height: "75px",
position: "relative", position: "relative",
}} }}
key={fileObj.id} key={issueObj.id}
onMouseEnter={() => setShowIcons(fileObj.id)} onMouseEnter={() => setShowIcons(issueObj.id)}
onMouseLeave={() => setShowIcons(null)} onMouseLeave={() => setShowIcons(null)}
> >
{hasHash ? ( {hasHash ? (
<> <>
<IconsBox <IconsBox
sx={{ sx={{
opacity: showIcons === fileObj.id ? 1 : 0, opacity: showIcons === issueObj.id ? 1 : 0,
zIndex: 2, zIndex: 2,
}} }}
> >
{fileObj?.user === username && ( {issueObj?.user === username && (
<BlockIconContainer <BlockIconContainer
onClick={() => { onClick={() => {
dispatch(setEditFile(fileObj)); dispatch(setEditFile(issueObj));
}} }}
> >
<EditIcon /> <EditIcon />
@ -102,10 +109,10 @@ export const IssueList = ({ issues }: FileListProps) => {
</BlockIconContainer> </BlockIconContainer>
)} )}
{fileObj?.user !== username && ( {issueObj?.user !== username && (
<BlockIconContainer <BlockIconContainer
onClick={() => { onClick={() => {
blockUserFunc(fileObj?.user); blockUserFunc(issueObj?.user);
}} }}
> >
<BlockIcon /> <BlockIcon />
@ -113,15 +120,14 @@ export const IssueList = ({ issues }: FileListProps) => {
</BlockIconContainer> </BlockIconContainer>
)} )}
</IconsBox> </IconsBox>
<VideoCard <IssueCard
onClick={() => { onClick={() => {
navigate(`/issue/${fileObj?.user}/${fileObj?.id}`); navigate(`/issue/${issueObj?.user}/${issueObj?.id}`);
}} }}
sx={{ sx={{
height: "100%", height: "100%",
width: "100%", width: "100%",
display: "flex", display: "flex",
gap: "25px",
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
}} }}
@ -129,47 +135,59 @@ export const IssueList = ({ issues }: FileListProps) => {
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
gap: "25px",
alignItems: "center", alignItems: "center",
}} }}
> >
{icon ? ( <div
<img style={{
src={icon} display: "flex",
width="50px" alignItems: "center",
style={{ width: "200px",
borderRadius: "5px",
}}
/>
) : (
<AttachFileIcon />
)}
<VideoCardTitle
sx={{
width: "100px",
}} }}
> >
{formatBytes( <IssueIcons
fileObj?.files.reduce( iconSources={issueIcons}
(acc, cur) => acc + (cur?.size || 0), style={{ marginRight: "20px" }}
0 showBackupIcon={true}
) />
)} </div>
<VideoCardTitle
sx={{
width: "150px",
fontSize: fontSizeMedium,
}}
>
{fileBytes > 0 && formatBytes(fileBytes)}
</VideoCardTitle>
<VideoCardTitle sx={{ fontWeight: "bold", width: "500px" }}>
{issueObj.title}
</VideoCardTitle> </VideoCardTitle>
<VideoCardTitle>{fileObj.title}</VideoCardTitle>
</Box> </Box>
<BottomParent>
<NameContainer {issue?.feeData?.isPaid && (
onClick={e => { <IssueIcon
e.stopPropagation(); iconSrc={QORTicon}
navigate(`/channel/${fileObj?.user}`); style={{ marginRight: "20px" }}
/>
)}
<NameAndDateContainer
sx={{ width: "200px", height: "100%" }}
onClick={e => {
e.stopPropagation();
navigate(`/channel/${issueObj?.user}`);
}}
>
<div
style={{
display: "flex",
width: "200px",
}} }}
> >
<Avatar <Avatar
sx={{ height: 24, width: 24 }} sx={{ height: 24, width: 24, marginRight: "10px" }}
src={`/arbitrary/THUMBNAIL/${fileObj?.user}/qortal_avatar`} src={`/arbitrary/THUMBNAIL/${issueObj?.user}/qortal_avatar`}
alt={`${fileObj?.user}'s avatar`} alt={`${issueObj?.user}'s avatar`}
/> />
<VideoCardName <VideoCardName
sx={{ sx={{
@ -178,17 +196,17 @@ export const IssueList = ({ issues }: FileListProps) => {
}, },
}} }}
> >
{fileObj?.user} {issueObj?.user}
</VideoCardName> </VideoCardName>
</NameContainer> </div>
{fileObj?.created && ( {issueObj?.created && (
<VideoUploadDate> <VideoUploadDate>
{formatDate(fileObj.created)} {formatDate(issueObj.created)}
</VideoUploadDate> </VideoUploadDate>
)} )}
</BottomParent> </NameAndDateContainer>
</VideoCard> </IssueCard>
</> </>
) : ( ) : (
<Skeleton <Skeleton
@ -206,6 +224,6 @@ export const IssueList = ({ issues }: FileListProps) => {
</Box> </Box>
); );
})} })}
</FileContainer> </IssueContainer>
); );
}; };

177
src/pages/Home/FileListComponentLevel.tsx → src/pages/Home/IssueListComponentLevel.tsx
View File

@ -2,31 +2,33 @@ import React, { useEffect, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { RootState } from "../../state/store"; import { RootState } from "../../state/store";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import { Avatar, Box, Skeleton, useTheme } from "@mui/material"; import { Avatar, Box, Skeleton, useTheme } from "@mui/material";
import { useFetchIssues } from "../../hooks/useFetchIssues.tsx"; import { useFetchIssues } from "../../hooks/useFetchIssues.tsx";
import LazyLoad from "../../components/common/LazyLoad"; import LazyLoad from "../../components/common/LazyLoad";
import { import {
BottomParent, BottomParent,
FileContainer, IssueCard,
NameContainer, IssueContainer,
VideoCard, NameAndDateContainer,
VideoCardName, VideoCardName,
VideoCardTitle, VideoCardTitle,
VideoUploadDate, VideoUploadDate,
} from "./IssueList-styles.tsx"; } from "./IssueList-styles.tsx";
import { formatDate } from "../../utils/time"; import { formatDate } from "../../utils/time";
import { Video } from "../../state/features/fileSlice.ts"; import { Issue } from "../../state/features/fileSlice.ts";
import { queue } from "../../wrappers/GlobalWrapper"; import { queue } from "../../wrappers/GlobalWrapper";
import { QSUPPORT_FILE_BASE } from "../../constants/Identifiers.ts"; import { QSUPPORT_FILE_BASE } from "../../constants/Identifiers.ts";
import { formatBytes } from "../IssueContent/IssueContent.tsx"; import { formatBytes } from "../IssueContent/IssueContent.tsx";
import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts"; import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts";
import { IssueIcon, IssueIcons } from "../../components/common/IssueIcon.tsx";
import QORTicon from "../../assets/icons/qort.png";
import { verifyAllPayments } from "../../constants/PublishFees/VerifyPayment.ts";
interface VideoListProps { interface VideoListProps {
mode?: string; mode?: string;
} }
export const FileListComponentLevel = ({ mode }: VideoListProps) => { export const IssueListComponentLevel = ({ mode }: VideoListProps) => {
const { name: paramName } = useParams(); const { name: paramName } = useParams();
const theme = useTheme(); const theme = useTheme();
const [isLoading, setIsLoading] = useState<boolean>(true); const [isLoading, setIsLoading] = useState<boolean>(true);
@ -37,16 +39,17 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
(state: RootState) => state.file.hashMapFiles (state: RootState) => state.file.hashMapFiles
); );
const [videos, setVideos] = React.useState<Video[]>([]); const [issues, setIssues] = React.useState<Issue[]>([]);
const navigate = useNavigate(); const navigate = useNavigate();
const { getFile, getNewFiles, checkNewFiles, checkAndUpdateFile } = const { getIssue, getNewIssues, checkNewIssues, checkAndUpdateIssue } =
useFetchIssues(); useFetchIssues();
const getVideos = React.useCallback(async () => { const getIssues = React.useCallback(async () => {
try { try {
const offset = videos.length; const offset = issues.length;
const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QSUPPORT_FILE_BASE}_&limit=50&includemetadata=false&reverse=true&excludeblocked=true&name=${paramName}&exactmatchnames=true&offset=${offset}`; // `/arbitrary/resources/search?mode=ALL&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true&offset=${offset}&limit=${videoLimit}`;
const url = `/arbitrary/resources/search?mode=ALL&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true&offset=${offset}&limit=50&service=DOCUMENT&query=${QSUPPORT_FILE_BASE}_&name=${paramName}`;
const response = await fetch(url, { const response = await fetch(url, {
method: "GET", method: "GET",
headers: { headers: {
@ -55,63 +58,69 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
}); });
const responseData = await response.json(); const responseData = await response.json();
const structureData = responseData.map((video: any): Video => { const structureData = responseData.map((issue: any): Issue => {
return { return {
title: video?.metadata?.title, title: issue?.metadata?.title,
category: video?.metadata?.category, category: issue?.metadata?.category,
categoryName: video?.metadata?.categoryName, categoryName: issue?.metadata?.categoryName,
tags: video?.metadata?.tags || [], tags: issue?.metadata?.tags || [],
description: video?.metadata?.description, description: issue?.metadata?.description,
created: video?.created, created: issue?.created,
updated: video?.updated, updated: issue?.updated,
user: video.name, user: issue.name,
videoImage: "", videoImage: "",
id: video.identifier, id: issue.identifier,
}; };
}); });
const copiedVideos: Video[] = [...videos]; const copiedIssues: Issue[] = [...issues];
structureData.forEach((video: Video) => { structureData.forEach((issue: Issue) => {
const index = videos.findIndex(p => p.id === video.id); const index = issues.findIndex(p => p.id === issue.id);
if (index !== -1) { if (index !== -1) {
copiedVideos[index] = video; copiedIssues[index] = issue;
} else { } else {
copiedVideos.push(video); copiedIssues.push(issue);
} }
}); });
setVideos(copiedVideos);
for (const content of structureData) { const verifiedIssuePromises: Promise<Issue>[] = [];
for (const content of copiedIssues) {
if (content.user && content.id) { if (content.user && content.id) {
const res = checkAndUpdateFile(content); const res = checkAndUpdateIssue(content);
if (res) { const getIssueData = getIssue(content.user, content.id, content);
queue.push(() => getFile(content.user, content.id, content)); if (res) queue.push(() => getIssueData);
}
verifiedIssuePromises.push(getIssueData);
} }
} }
const issueData = await Promise.all(verifiedIssuePromises);
const verifiedIssues = await verifyAllPayments(issueData);
setIssues(verifiedIssues);
} catch (error) { } catch (error) {
} finally { } finally {
} }
}, [videos, hashMapVideos]); }, [issues, hashMapVideos]);
const getVideosHandler = React.useCallback(async () => { const getIssuesHandler = React.useCallback(async () => {
if (!firstFetch.current || !afterFetch.current) return; if (!firstFetch.current || !afterFetch.current) return;
await getVideos(); await getIssues();
}, [getVideos]); }, [getIssues]);
const getVideosHandlerMount = React.useCallback(async () => { const getIssuesHandlerMount = React.useCallback(async () => {
if (firstFetch.current) return; if (firstFetch.current) return;
firstFetch.current = true; firstFetch.current = true;
await getVideos(); await getIssues();
afterFetch.current = true; afterFetch.current = true;
setIsLoading(false); setIsLoading(false);
}, [getVideos]); }, [getIssues]);
useEffect(() => { useEffect(() => {
if (!firstFetch.current) { if (!firstFetch.current) {
getVideosHandlerMount(); getIssuesHandlerMount();
} }
}, [getVideosHandlerMount]); }, [getIssuesHandlerMount]);
return ( return (
<Box <Box
@ -122,18 +131,21 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
alignItems: "center", alignItems: "center",
}} }}
> >
<FileContainer> <IssueContainer>
{videos.map((file: any, index: number) => { {issues.map((issue: any, index: number) => {
const existingFile = hashMapVideos[file?.id]; const existingFile = hashMapVideos[issue?.id];
let hasHash = false; let hasHash = false;
let fileObj = file; let issueObj = issue;
if (existingFile) { if (existingFile) {
fileObj = existingFile; issueObj = existingFile;
hasHash = true; hasHash = true;
} }
const icon = getIconsFromObject(fileObj); const issueIcons = getIconsFromObject(issueObj);
const fileBytes = issueObj?.files.reduce(
(acc, cur) => acc + (cur?.size || 0),
0
);
return ( return (
<Box <Box
sx={{ sx={{
@ -143,13 +155,13 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
height: "75px", height: "75px",
position: "relative", position: "relative",
}} }}
key={fileObj.id} key={issueObj.id}
> >
{hasHash ? ( {hasHash ? (
<> <>
<VideoCard <IssueCard
onClick={() => { onClick={() => {
navigate(`/issue/${fileObj?.user}/${fileObj?.id}`); navigate(`/issue/${issueObj?.user}/${issueObj?.id}`);
}} }}
sx={{ sx={{
height: "100%", height: "100%",
@ -167,42 +179,49 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
alignItems: "center", alignItems: "center",
}} }}
> >
{icon ? ( <div
<img style={{
src={icon} display: "flex",
width="50px" alignItems: "center",
style={{ width: "200px",
borderRadius: "5px", }}
}} >
<IssueIcons
iconSources={issueIcons}
style={{ marginRight: "20px" }}
showBackupIcon={true}
/> />
) : ( </div>
<AttachFileIcon />
)}
<VideoCardTitle <VideoCardTitle
sx={{ sx={{
width: "100px", width: "100px",
}} }}
> >
{formatBytes( {fileBytes > 0 && formatBytes(fileBytes)}
fileObj?.files.reduce( </VideoCardTitle>
(acc, cur) => acc + (cur?.size || 0), <VideoCardTitle
0 sx={{ fontWeight: "bold", width: "500px" }}
) >
)} {issueObj.title}
</VideoCardTitle> </VideoCardTitle>
<VideoCardTitle>{fileObj.title}</VideoCardTitle>
</Box> </Box>
{issue?.feeData?.isPaid && (
<IssueIcon
iconSrc={QORTicon}
style={{ marginRight: "20px" }}
/>
)}
<BottomParent> <BottomParent>
<NameContainer <NameAndDateContainer
onClick={e => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
navigate(`/channel/${fileObj?.user}`); navigate(`/channel/${issueObj?.user}`);
}} }}
> >
<Avatar <Avatar
sx={{ height: 24, width: 24 }} sx={{ height: 24, width: 24 }}
src={`/arbitrary/THUMBNAIL/${fileObj?.user}/qortal_avatar`} src={`/arbitrary/THUMBNAIL/${issueObj?.user}/qortal_avatar`}
alt={`${fileObj?.user}'s avatar`} alt={`${issueObj?.user}'s avatar`}
/> />
<VideoCardName <VideoCardName
sx={{ sx={{
@ -211,17 +230,17 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
}, },
}} }}
> >
{fileObj?.user} {issueObj?.user}
</VideoCardName> </VideoCardName>
</NameContainer> </NameAndDateContainer>
{fileObj?.created && ( {issueObj?.created && (
<VideoUploadDate> <VideoUploadDate>
{formatDate(fileObj.created)} {formatDate(issueObj.created)}
</VideoUploadDate> </VideoUploadDate>
)} )}
</BottomParent> </BottomParent>
</VideoCard> </IssueCard>
</> </>
) : ( ) : (
<Skeleton <Skeleton
@ -239,8 +258,8 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
</Box> </Box>
); );
})} })}
</FileContainer> </IssueContainer>
<LazyLoad onLoadMore={getVideosHandler} isLoading={isLoading}></LazyLoad> <LazyLoad onLoadMore={getIssuesHandler} isLoading={isLoading}></LazyLoad>
</Box> </Box>
); );
}; };

4
src/pages/IndividualProfile/IndividualProfile.tsx
View File

@ -1,5 +1,5 @@
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import { FileListComponentLevel } from "../Home/FileListComponentLevel.tsx"; import { IssueListComponentLevel } from "../Home/IssueListComponentLevel.tsx";
import { HeaderContainer, ProfileContainer } from "./Profile-styles"; import { HeaderContainer, ProfileContainer } from "./Profile-styles";
import { import {
AuthorTextComment, AuthorTextComment,
@ -62,7 +62,7 @@ export const IndividualProfile = () => {
</StyledCardHeaderComment> </StyledCardHeaderComment>
</Box> </Box>
</HeaderContainer> </HeaderContainer>
<FileListComponentLevel /> <IssueListComponentLevel />
</ProfileContainer> </ProfileContainer>
); );
}; };

32
src/pages/IndividualProfile/Profile-styles.tsx
View File

@ -1,16 +1,16 @@
import { styled } from "@mui/system"; import { styled } from "@mui/system";
import { Box, Grid, Typography, Checkbox } from "@mui/material"; import { Box, Grid, Typography, Checkbox } from "@mui/material";
export const ProfileContainer = styled(Box)(({ theme }) => ({ export const ProfileContainer = styled(Box)(({ theme }) => ({
position: "relative", position: "relative",
display: "flex", display: "flex",
width: "100%", width: "100%",
flexDirection: "column" flexDirection: "column"
})); }));
export const HeaderContainer = styled(Box)(({ theme }) => ({ export const HeaderContainer = styled(Box)(({ theme }) => ({
position: "relative", position: "relative",
display: "flex", display: "flex",
width: "100%", width: "100%",
justifyContent: "center" justifyContent: "center"
})); }));

119
src/pages/IssueContent/IssueContent.tsx
View File

@ -5,7 +5,6 @@ import { setIsLoadingGlobal } from "../../state/features/globalSlice";
import { Avatar, Box, Typography, useTheme } from "@mui/material"; import { Avatar, Box, Typography, useTheme } from "@mui/material";
import { RootState } from "../../state/store"; import { RootState } from "../../state/store";
import { addToHashMap } from "../../state/features/fileSlice.ts"; import { addToHashMap } from "../../state/features/fileSlice.ts";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import DownloadIcon from "@mui/icons-material/Download"; import DownloadIcon from "@mui/icons-material/Download";
import { import {
AuthorTextComment, AuthorTextComment,
@ -24,14 +23,20 @@ import { CommentSection } from "../../components/common/Comments/CommentSection"
import { QSUPPORT_FILE_BASE } from "../../constants/Identifiers.ts"; import { QSUPPORT_FILE_BASE } from "../../constants/Identifiers.ts";
import { DisplayHtml } from "../../components/common/TextEditor/DisplayHtml"; import { DisplayHtml } from "../../components/common/TextEditor/DisplayHtml";
import FileElement from "../../components/common/FileElement"; import FileElement from "../../components/common/FileElement";
import { allCategoryData } from "../../constants/Categories/1stCategories.ts"; import { allCategoryData } from "../../constants/Categories/Categories.ts";
import { import {
Category, Category,
getCategoriesFromObject, getCategoriesFromObject,
} from "../../components/common/CategoryList/CategoryList.tsx"; } from "../../components/common/CategoryList/CategoryList.tsx";
import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts"; import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts";
import { IssueIcon, IssueIcons } from "../../components/common/IssueIcon.tsx";
import QORTicon from "../../assets/icons/qort.png";
import {
appendIsPaidToFeeData,
verifyPayment,
} from "../../constants/PublishFees/VerifyPayment.ts";
export function formatBytes(bytes, decimals = 2) { export function formatBytes(bytes: number, decimals = 2) {
if (bytes === 0) return "0 Bytes"; if (bytes === 0) return "0 Bytes";
const k = 1024; const k = 1024;
@ -50,7 +55,7 @@ export const IssueContent = () => {
const [descriptionHeight, setDescriptionHeight] = useState<null | number>( const [descriptionHeight, setDescriptionHeight] = useState<null | number>(
null null
); );
const [icon, setIcon] = useState<string>(""); const [issueIcons, setIssueIcons] = useState<string[]>([]);
const userAvatarHash = useSelector( const userAvatarHash = useSelector(
(state: RootState) => state.global.userAvatarHash (state: RootState) => state.global.userAvatarHash
); );
@ -67,15 +72,15 @@ export const IssueContent = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const theme = useTheme(); const theme = useTheme();
const [fileData, setFileData] = useState<any>(null); const [issueData, setIssueData] = useState<any>(null);
const [playlistData, setPlaylistData] = useState<any>(null); const [playlistData, setPlaylistData] = useState<any>(null);
const hashMapVideos = useSelector( const hashMapVideos = useSelector(
(state: RootState) => state.file.hashMapFiles (state: RootState) => state.file.hashMapFiles
); );
const videoReference = useMemo(() => { const videoReference = useMemo(() => {
if (!fileData) return null; if (!issueData) return null;
const { videoReference } = fileData; const { videoReference } = issueData;
if ( if (
videoReference?.identifier && videoReference?.identifier &&
videoReference?.name && videoReference?.name &&
@ -85,13 +90,13 @@ export const IssueContent = () => {
} else { } else {
return null; return null;
} }
}, [fileData]); }, [issueData]);
const videoCover = useMemo(() => { const videoCover = useMemo(() => {
if (!fileData) return null; if (!issueData) return null;
const { videoImage } = fileData; const { videoImage } = issueData;
return videoImage || null; return videoImage || null;
}, [fileData]); }, [issueData]);
const dispatch = useDispatch(); const dispatch = useDispatch();
const getVideoData = React.useCallback(async (name: string, id: string) => { const getVideoData = React.useCallback(async (name: string, id: string) => {
@ -135,9 +140,16 @@ export const IssueContent = () => {
...resourceData, ...resourceData,
...responseData, ...responseData,
}; };
setFileData(combinedData);
dispatch(addToHashMap(combinedData)); verifyPayment(combinedData).then(feeData => {
checkforPlaylist(name, id, combinedData?.code); console.log(
"async data: ",
appendIsPaidToFeeData(combinedData, feeData)
);
setIssueData(appendIsPaidToFeeData(combinedData, feeData));
dispatch(addToHashMap(combinedData));
checkforPlaylist(name, id, combinedData?.code);
});
} }
} }
} catch (error) { } catch (error) {
@ -217,8 +229,10 @@ export const IssueContent = () => {
const existingVideo = hashMapVideos[id]; const existingVideo = hashMapVideos[id];
if (existingVideo) { if (existingVideo) {
setFileData(existingVideo); verifyPayment(existingVideo).then(feeData => {
checkforPlaylist(name, id, existingVideo?.code); setIssueData(appendIsPaidToFeeData(existingVideo, feeData));
checkforPlaylist(name, id, existingVideo?.code);
});
} else { } else {
getVideoData(name, id); getVideoData(name, id);
} }
@ -259,21 +273,21 @@ export const IssueContent = () => {
useEffect(() => { useEffect(() => {
if (contentRef.current) { if (contentRef.current) {
const height = contentRef.current.offsetHeight; const height = contentRef.current.offsetHeight;
if (height > 100) { const maxDescriptionHeight = 200;
if (height > maxDescriptionHeight) {
// Assuming 100px is your threshold // Assuming 100px is your threshold
setDescriptionHeight(100); setDescriptionHeight(maxDescriptionHeight);
} }
} }
if (fileData) { if (issueData) {
const icon = getIconsFromObject(fileData); const icons = getIconsFromObject(issueData);
setIcon(icon); setIssueIcons(icons);
} }
}, [fileData]); }, [issueData]);
const categoriesDisplay = useMemo(() => { const categoriesDisplay = useMemo(() => {
if (fileData) { if (issueData) {
const categoryList = getCategoriesFromObject(fileData); const categoryList = getCategoriesFromObject(issueData);
const categoryNames = categoryList.map((categoryID, index) => { const categoryNames = categoryList.map((categoryID, index) => {
let categoryName: Category; let categoryName: Category;
if (index === 0) { if (index === 0) {
@ -294,14 +308,21 @@ export const IssueContent = () => {
const filteredCategoryNames = categoryNames.filter(name => name); const filteredCategoryNames = categoryNames.filter(name => name);
let categoryDisplay = ""; let categoryDisplay = "";
const separator = " > "; const separator = " > ";
const QappName = issueData?.QappName || "";
filteredCategoryNames.map((name, index) => { filteredCategoryNames.map((name, index) => {
categoryDisplay += if (QappName && index === 1) {
index !== filteredCategoryNames.length - 1 ? name + separator : name; categoryDisplay += QappName + separator;
}
categoryDisplay += name;
if (index !== filteredCategoryNames.length - 1)
categoryDisplay += separator;
}); });
return categoryDisplay; return categoryDisplay;
} }
return "no videodata"; return "no videodata";
}, [fileData]); }, [issueData]);
return ( return (
<Box <Box
@ -325,18 +346,12 @@ export const IssueContent = () => {
alignItems: "center", alignItems: "center",
}} }}
> >
{icon ? ( <div style={{ display: "flex", alignItems: "center" }}>
<img <IssueIcons
src={icon} iconSources={issueIcons}
width="50px" style={{ marginRight: "20px" }}
style={{
borderRadius: "5px",
marginRight: "10px",
}}
/> />
) : ( </div>
<AttachFileIcon />
)}
<FileTitle <FileTitle
variant="h1" variant="h1"
color="textPrimary" color="textPrimary"
@ -344,10 +359,13 @@ export const IssueContent = () => {
textAlign: "center", textAlign: "center",
}} }}
> >
{fileData?.title} {issueData?.title}
</FileTitle> </FileTitle>
{issueData?.feeData?.isPaid && (
<IssueIcon iconSrc={QORTicon} style={{ marginLeft: "10px" }} />
)}
</div> </div>
{fileData?.created && ( {issueData?.created && (
<Typography <Typography
variant="h6" variant="h6"
sx={{ sx={{
@ -355,7 +373,7 @@ export const IssueContent = () => {
}} }}
color={theme.palette.text.primary} color={theme.palette.text.primary}
> >
{formatDate(fileData.created)} {formatDate(issueData.created)}
</Typography> </Typography>
)} )}
@ -407,12 +425,13 @@ export const IssueContent = () => {
</Typography> </Typography>
</Box> </Box>
<ImageContainer> <ImageContainer>
{fileData?.images && {issueData?.images &&
fileData.images.map(image => { issueData.images.map(image => {
return ( return (
<img <img
key={image}
src={image} src={image}
width={`${1080 / fileData.images.length}px`} width={`${1080 / issueData.images.length}px`}
style={{ style={{
marginRight: "10px", marginRight: "10px",
marginBottom: "10px", marginBottom: "10px",
@ -464,12 +483,12 @@ export const IssueContent = () => {
? "auto" ? "auto"
: isExpandedDescription : isExpandedDescription
? "auto" ? "auto"
: "100px", : "30vh",
overflow: "hidden", overflow: "hidden",
}} }}
> >
{fileData?.htmlDescription ? ( {issueData?.htmlDescription ? (
<DisplayHtml html={fileData?.htmlDescription} /> <DisplayHtml html={issueData?.htmlDescription} />
) : ( ) : (
<FileDescription <FileDescription
variant="body1" variant="body1"
@ -478,7 +497,7 @@ export const IssueContent = () => {
cursor: "default", cursor: "default",
}} }}
> >
{fileData?.fullDescription} {issueData?.fullDescription}
</FileDescription> </FileDescription>
)} )}
</Box> </Box>
@ -509,7 +528,7 @@ export const IssueContent = () => {
marginTop: "25px", marginTop: "25px",
}} }}
> >
{fileData?.files?.map((file, index) => { {issueData?.files?.map((file, index) => {
return ( return (
<FileAttachmentContainer <FileAttachmentContainer
sx={{ sx={{

52
src/state/features/authSlice.ts
View File

@ -1,27 +1,27 @@
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
interface AuthState { interface AuthState {
user: { user: {
address: string; address: string;
publicKey: string; publicKey: string;
name?: string; name?: string;
} | null; } | null;
} }
const initialState: AuthState = { const initialState: AuthState = {
user: null user: null
}; };
export const authSlice = createSlice({ export const authSlice = createSlice({
name: 'auth', name: 'auth',
initialState, initialState,
reducers: { reducers: {
addUser: (state, action) => { addUser: (state, action) => {
state.user = action.payload; state.user = action.payload;
}, },
}, },
}); });
export const { addUser } = authSlice.actions; export const { addUser } = authSlice.actions;
export default authSlice.reducer; export default authSlice.reducer;

26
src/state/features/fileSlice.ts
View File

@ -1,10 +1,10 @@
import { createSlice } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
import { RootState } from "../store"; import { PublishFeeData } from "../../constants/PublishFees/SendFeeFunctions.ts";
interface GlobalState { interface GlobalState {
files: Video[]; files: Issue[];
filteredFiles: Video[]; filteredFiles: Issue[];
hashMapFiles: Record<string, Video>; hashMapFiles: Record<string, Issue>;
countNewFiles: number; countNewFiles: number;
isFiltering: boolean; isFiltering: boolean;
filterValue: string; filterValue: string;
@ -14,6 +14,7 @@ interface GlobalState {
selectedCategoryFiles: any[]; selectedCategoryFiles: any[];
editFileProperties: any; editFileProperties: any;
editPlaylistProperties: any; editPlaylistProperties: any;
publishedQappNames: string[];
} }
const initialState: GlobalState = { const initialState: GlobalState = {
files: [], files: [],
@ -28,9 +29,10 @@ const initialState: GlobalState = {
selectedCategoryFiles: [null, null, null, null], selectedCategoryFiles: [null, null, null, null],
editFileProperties: null, editFileProperties: null,
editPlaylistProperties: null, editPlaylistProperties: null,
publishedQappNames: [],
}; };
export interface Video { export interface Issue {
title: string; title: string;
description: string; description: string;
created: number | string; created: number | string;
@ -44,6 +46,8 @@ export interface Video {
updated?: number | string; updated?: number | string;
isValid?: boolean; isValid?: boolean;
code?: string; code?: string;
feeData?: PublishFeeData;
paymentVerified?: boolean;
} }
export const fileSlice = createSlice({ export const fileSlice = createSlice({
@ -113,12 +117,12 @@ export const fileSlice = createSlice({
}, },
addArrayToHashMap: (state, action) => { addArrayToHashMap: (state, action) => {
const videos = action.payload; const videos = action.payload;
videos.forEach((video: Video) => { videos.forEach((video: Issue) => {
state.hashMapFiles[video.id] = video; state.hashMapFiles[video.id] = video;
}); });
}, },
upsertFiles: (state, action) => { upsertFiles: (state, action) => {
action.payload.forEach((video: Video) => { action.payload.forEach((video: Issue) => {
const index = state.files.findIndex(p => p.id === video.id); const index = state.files.findIndex(p => p.id === video.id);
if (index !== -1) { if (index !== -1) {
state.files[index] = video; state.files[index] = video;
@ -128,7 +132,7 @@ export const fileSlice = createSlice({
}); });
}, },
upsertFilteredFiles: (state, action) => { upsertFilteredFiles: (state, action) => {
action.payload.forEach((video: Video) => { action.payload.forEach((video: Issue) => {
const index = state.filteredFiles.findIndex(p => p.id === video.id); const index = state.filteredFiles.findIndex(p => p.id === video.id);
if (index !== -1) { if (index !== -1) {
state.filteredFiles[index] = video; state.filteredFiles[index] = video;
@ -138,7 +142,7 @@ export const fileSlice = createSlice({
}); });
}, },
upsertFilesBeginning: (state, action) => { upsertFilesBeginning: (state, action) => {
action.payload.reverse().forEach((video: Video) => { action.payload.reverse().forEach((video: Issue) => {
const index = state.files.findIndex(p => p.id === video.id); const index = state.files.findIndex(p => p.id === video.id);
if (index !== -1) { if (index !== -1) {
state.files[index] = video; state.files[index] = video;
@ -157,6 +161,9 @@ export const fileSlice = createSlice({
const username = action.payload; const username = action.payload;
state.files = state.files.filter(item => item.user !== username); state.files = state.files.filter(item => item.user !== username);
}, },
setQappNames: (state, action) => {
state.publishedQappNames = action.payload;
},
}, },
}); });
@ -183,6 +190,7 @@ export const {
blockUser, blockUser,
setEditFile, setEditFile,
setEditPlaylist, setEditPlaylist,
setQappNames,
} = fileSlice.actions; } = fileSlice.actions;
export default fileSlice.reducer; export default fileSlice.reducer;

7
src/state/features/globalSlice.ts
View File

@ -1,4 +1,5 @@
import { createSlice } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
import { FeePrice } from "../../constants/PublishFees/FeePricePublish/FeePricePublish.ts";
interface GlobalState { interface GlobalState {
isLoadingGlobal: boolean; isLoadingGlobal: boolean;
@ -9,6 +10,7 @@ interface GlobalState {
totalFilesPublished: number; totalFilesPublished: number;
totalNamesPublished: number; totalNamesPublished: number;
filesPerNamePublished: number; filesPerNamePublished: number;
feeData: FeePrice[];
} }
const initialState: GlobalState = { const initialState: GlobalState = {
isLoadingGlobal: false, isLoadingGlobal: false,
@ -19,6 +21,7 @@ const initialState: GlobalState = {
totalFilesPublished: null, totalFilesPublished: null,
totalNamesPublished: null, totalNamesPublished: null,
filesPerNamePublished: null, filesPerNamePublished: null,
feeData: [],
}; };
export const globalSlice = createSlice({ export const globalSlice = createSlice({
@ -61,6 +64,9 @@ export const globalSlice = createSlice({
setFilesPerNamePublished: (state, action) => { setFilesPerNamePublished: (state, action) => {
state.filesPerNamePublished = action.payload; state.filesPerNamePublished = action.payload;
}, },
setFeeData: (state, action) => {
state.feeData = action.payload;
},
}, },
}); });
@ -74,6 +80,7 @@ export const {
setTotalFilesPublished, setTotalFilesPublished,
setTotalNamesPublished, setTotalNamesPublished,
setFilesPerNamePublished, setFilesPerNamePublished,
setFeeData,
} = globalSlice.actions; } = globalSlice.actions;
export default globalSlice.reducer; export default globalSlice.reducer;

146
src/state/features/notificationsSlice.ts
View File

@ -1,73 +1,73 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { createSlice, PayloadAction } from "@reduxjs/toolkit";
interface AlertTypes { interface AlertTypes {
alertSuccess: string alertSuccess: string
alertError: string alertError: string
alertInfo: string alertInfo: string
} }
interface InitialState { interface InitialState {
alertTypes: AlertTypes alertTypes: AlertTypes
} }
const initialState: InitialState = { const initialState: InitialState = {
alertTypes: { alertTypes: {
alertSuccess: '', alertSuccess: '',
alertError: '', alertError: '',
alertInfo: '' alertInfo: ''
} }
} }
export const notificationsSlice = createSlice({ export const notificationsSlice = createSlice({
name: "notifications", name: "notifications",
initialState, initialState,
reducers: { reducers: {
setNotification: ( setNotification: (
state: InitialState, state: InitialState,
action: PayloadAction<{ alertType: string; msg: string }> action: PayloadAction<{ alertType: string; msg: string }>
) => { ) => {
if (action.payload.alertType === "success") { if (action.payload.alertType === "success") {
return { return {
...state, ...state,
alertTypes: { alertTypes: {
...state.alertTypes, ...state.alertTypes,
alertSuccess: action.payload.msg, alertSuccess: action.payload.msg,
}, },
}; };
} else if (action.payload.alertType === "error") { } else if (action.payload.alertType === "error") {
return { return {
...state, ...state,
alertTypes: { alertTypes: {
...state.alertTypes, ...state.alertTypes,
alertError: action.payload.msg, alertError: action.payload.msg,
}, },
}; };
} else if (action.payload.alertType === "info") { } else if (action.payload.alertType === "info") {
return { return {
...state, ...state,
alertTypes: { alertTypes: {
...state.alertTypes, ...state.alertTypes,
alertInfo: action.payload.msg, alertInfo: action.payload.msg,
}, },
}; };
} }
return state; return state;
}, },
removeNotification: (state: InitialState) => { removeNotification: (state: InitialState) => {
return { return {
...state, ...state,
alertTypes: { alertTypes: {
...state.alertTypes, ...state.alertTypes,
alertSuccess: '', alertSuccess: '',
alertError: '', alertError: '',
alertInfo: '' alertInfo: ''
} }
} }
}, },
}, },
}); });
export const { setNotification, removeNotification } = export const { setNotification, removeNotification } =
notificationsSlice.actions; notificationsSlice.actions;
export default notificationsSlice.reducer; export default notificationsSlice.reducer;

12
src/styles/theme.tsx
View File

@ -91,7 +91,7 @@ const lightTheme = createTheme({
mode: "light", mode: "light",
primary: { primary: {
main: "#FCFCFC", main: "#FCFCFC",
dark: "#F5F5F5", dark: "#E0E0E0",
light: "#FFFFFF", light: "#FFFFFF",
}, },
secondary: { secondary: {
@ -138,14 +138,14 @@ const darkTheme = createTheme({
palette: { palette: {
mode: "dark", mode: "dark",
primary: { primary: {
main: "#01a9e9", // main: "#01a9e9", // Qortal Blue
dark: "#008fcd", // dark: "#008fcd",
light: "#44c4ff", // light: "#44c4ff",
}, },
secondary: { secondary: {
main: "#007FFF", // Electric blue main: "#007FFF", // Electric blue
dark: "#0059B2", // Darker shade of electric blue dark: "#0059B2",
light: "#3399FF", // Lighter shade of electric blue light: "#3399FF",
}, },
background: { background: {
default: "#1C1C1C", // Deep space black default: "#1C1C1C", // Deep space black

14
src/utils/checkStructure.ts
View File

@ -1,7 +1,7 @@
export const checkStructure = (content: any) => { export const checkStructure = (content: any) => {
let isValid = true let isValid = true
return isValid return isValid
} }

26
src/utils/extractTextFromSlate.ts
View File

@ -1,14 +1,14 @@
export function extractTextFromSlate(nodes: any) { export function extractTextFromSlate(nodes: any) {
if(!Array.isArray(nodes)) return "" if(!Array.isArray(nodes)) return ""
let text = ""; let text = "";
for (const node of nodes) { for (const node of nodes) {
if (node.text) { if (node.text) {
text += node.text; text += node.text;
} else if (node.children) { } else if (node.children) {
text += extractTextFromSlate(node.children); text += extractTextFromSlate(node.children);
} }
} }
return text; return text;
} }

1
src/utils/fetchVideos.ts
View File

@ -17,6 +17,7 @@ export const fetchAndEvaluateIssues = async (data: any) => {
service: content?.service || "DOCUMENT", service: content?.service || "DOCUMENT",
identifier: videoId, identifier: videoId,
}); });
if (checkStructure(responseData)) { if (checkStructure(responseData)) {
obj = { obj = {
...content, ...content,

33
src/utils/qortalRequests.ts Normal file
View File

@ -0,0 +1,33 @@
import { NameData } from "../constants/PublishFees/SendFeeFunctions.ts";
import { getUserAccountNames } from "../constants/PublishFees/VerifyPayment-Functions.ts";
export const getNameData = async (name: string) => {
return (await qortalRequest({
action: "GET_NAME_DATA",
name: name,
})) as NameData;
};
export const sendQchatDM = async (
recipientName: string,
message: string,
allowSelfAsRecipient = false
) => {
if (!allowSelfAsRecipient) {
const userAccountNames = await getUserAccountNames();
const userNames = userAccountNames.map(name => name.name);
if (userNames.includes(recipientName)) return;
}
const address = await getNameData(recipientName);
try {
return await qortalRequest({
action: "SEND_CHAT_MESSAGE",
destinationAddress: address.owner,
message,
});
} catch (e) {
console.log(e);
return false;
}
};

86
src/utils/queue.ts
View File

@ -1,43 +1,43 @@
type QueueItem = { type QueueItem = {
request: () => Promise<any>; request: () => Promise<any>;
resolve: (value: any | PromiseLike<any>) => void; resolve: (value: any | PromiseLike<any>) => void;
reject: (reason?: any) => void; reject: (reason?: any) => void;
}; };
export class RequestQueue { export class RequestQueue {
private queue: QueueItem[]; private queue: QueueItem[];
private maxConcurrent: number; private maxConcurrent: number;
private currentConcurrent: number; private currentConcurrent: number;
constructor(maxConcurrent = 5) { constructor(maxConcurrent = 5) {
this.queue = []; this.queue = [];
this.maxConcurrent = maxConcurrent; this.maxConcurrent = maxConcurrent;
this.currentConcurrent = 0; this.currentConcurrent = 0;
} }
async push(request: () => Promise<any>): Promise<any> { async push(request: () => Promise<any>): Promise<any> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.queue.push({ this.queue.push({
request, request,
resolve, resolve,
reject, reject,
}); });
this.checkQueue(); this.checkQueue();
}); });
} }
private checkQueue(): void { private checkQueue(): void {
if (this.queue.length === 0 || this.currentConcurrent >= this.maxConcurrent) return; if (this.queue.length === 0 || this.currentConcurrent >= this.maxConcurrent) return;
const { request, resolve, reject } = this.queue.shift() as QueueItem; const { request, resolve, reject } = this.queue.shift() as QueueItem;
this.currentConcurrent++; this.currentConcurrent++;
request() request()
.then(resolve) .then(resolve)
.catch(reject) .catch(reject)
.finally(() => { .finally(() => {
this.currentConcurrent--; this.currentConcurrent--;
this.checkQueue(); this.checkQueue();
}); });
} }
} }

90
src/utils/time.ts
View File

@ -1,46 +1,46 @@
import moment from 'moment' import moment from 'moment'
export function formatTimestamp(timestamp: number): string { export function formatTimestamp(timestamp: number): string {
const now = moment() const now = moment()
const timestampMoment = moment(timestamp) const timestampMoment = moment(timestamp)
const elapsedTime = now.diff(timestampMoment, 'minutes') const elapsedTime = now.diff(timestampMoment, 'minutes')
if (elapsedTime < 1) { if (elapsedTime < 1) {
return 'Just now' return 'Just now'
} else if (elapsedTime < 60) { } else if (elapsedTime < 60) {
return `${elapsedTime}m` return `${elapsedTime}m`
} else if (elapsedTime < 1440) { } else if (elapsedTime < 1440) {
return `${Math.floor(elapsedTime / 60)}h` return `${Math.floor(elapsedTime / 60)}h`
} else { } else {
return timestampMoment.format('MMM D') return timestampMoment.format('MMM D')
} }
} }
export function formatTimestampSeconds(timestamp: number): string { export function formatTimestampSeconds(timestamp: number): string {
const now = moment() const now = moment()
const timestampMoment = moment.unix(timestamp) const timestampMoment = moment.unix(timestamp)
const elapsedTime = now.diff(timestampMoment, 'minutes') const elapsedTime = now.diff(timestampMoment, 'minutes')
if (elapsedTime < 1) { if (elapsedTime < 1) {
return 'Just now' return 'Just now'
} else if (elapsedTime < 60) { } else if (elapsedTime < 60) {
return `${elapsedTime}m` return `${elapsedTime}m`
} else if (elapsedTime < 1440) { } else if (elapsedTime < 1440) {
return `${Math.floor(elapsedTime / 60)}h` return `${Math.floor(elapsedTime / 60)}h`
} else { } else {
return timestampMoment.format('MMM D') return timestampMoment.format('MMM D')
} }
} }
export const formatDate = (unixTimestamp: number): string => { export const formatDate = (unixTimestamp: number): string => {
const date = moment(unixTimestamp, 'x').fromNow() const date = moment(unixTimestamp, 'x').fromNow()
return date return date
} }
export const formatDateSeconds = (unixTimestamp: number): string => { export const formatDateSeconds = (unixTimestamp: number): string => {
const date = moment.unix(unixTimestamp).fromNow(); const date = moment.unix(unixTimestamp).fromNow();
return date return date
} }

348
src/utils/toBase64.ts
View File

@ -1,174 +1,174 @@
export const toBase64 = (file: File): Promise<string | ArrayBuffer | null> => export const toBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
const reader = new FileReader() const reader = new FileReader()
reader.readAsDataURL(file) reader.readAsDataURL(file)
reader.onload = () => { reader.onload = () => {
const result = reader.result const result = reader.result
reader.onload = null // remove onload handler reader.onload = null // remove onload handler
reader.onerror = null // remove onerror handler reader.onerror = null // remove onerror handler
resolve(result) resolve(result)
} }
reader.onerror = (error) => { reader.onerror = (error) => {
reader.onload = null // remove onload handler reader.onload = null // remove onload handler
reader.onerror = null // remove onerror handler reader.onerror = null // remove onerror handler
reject(error) reject(error)
} }
}) })
export function objectToBase64(obj: any) { export function objectToBase64(obj: any) {
// Step 1: Convert the object to a JSON string // Step 1: Convert the object to a JSON string
const jsonString = JSON.stringify(obj) const jsonString = JSON.stringify(obj)
// Step 2: Create a Blob from the JSON string // Step 2: Create a Blob from the JSON string
const blob = new Blob([jsonString], { type: 'application/json' }) const blob = new Blob([jsonString], { type: 'application/json' })
// Step 3: Create a FileReader to read the Blob as a base64-encoded string // Step 3: Create a FileReader to read the Blob as a base64-encoded string
return new Promise<string>((resolve, reject) => { return new Promise<string>((resolve, reject) => {
const reader = new FileReader() const reader = new FileReader()
reader.onloadend = () => { reader.onloadend = () => {
if (typeof reader.result === 'string') { if (typeof reader.result === 'string') {
// Remove 'data:application/json;base64,' prefix // Remove 'data:application/json;base64,' prefix
const base64 = reader.result.replace( const base64 = reader.result.replace(
'data:application/json;base64,', 'data:application/json;base64,',
'' ''
) )
resolve(base64) resolve(base64)
} else { } else {
reject(new Error('Failed to read the Blob as a base64-encoded string')) reject(new Error('Failed to read the Blob as a base64-encoded string'))
} }
} }
reader.onerror = () => { reader.onerror = () => {
reject(reader.error) reject(reader.error)
} }
reader.readAsDataURL(blob) reader.readAsDataURL(blob)
}) })
} }
export function objectToUint8Array(obj: any) { export function objectToUint8Array(obj: any) {
// Convert the object to a JSON string // Convert the object to a JSON string
const jsonString = JSON.stringify(obj) const jsonString = JSON.stringify(obj)
// Encode the JSON string as a byte array using TextEncoder // Encode the JSON string as a byte array using TextEncoder
const encoder = new TextEncoder() const encoder = new TextEncoder()
const byteArray = encoder.encode(jsonString) const byteArray = encoder.encode(jsonString)
// Create a new Uint8Array and set its content to the encoded byte array // Create a new Uint8Array and set its content to the encoded byte array
const uint8Array = new Uint8Array(byteArray) const uint8Array = new Uint8Array(byteArray)
return uint8Array return uint8Array
} }
export function uint8ArrayToBase64(uint8Array: Uint8Array): string { export function uint8ArrayToBase64(uint8Array: Uint8Array): string {
const length = uint8Array.length const length = uint8Array.length
let binaryString = '' let binaryString = ''
const chunkSize = 1024 * 1024 // Process 1MB at a time const chunkSize = 1024 * 1024 // Process 1MB at a time
for (let i = 0; i < length; i += chunkSize) { for (let i = 0; i < length; i += chunkSize) {
const chunkEnd = Math.min(i + chunkSize, length) const chunkEnd = Math.min(i + chunkSize, length)
const chunk = uint8Array.subarray(i, chunkEnd) const chunk = uint8Array.subarray(i, chunkEnd)
binaryString += Array.from(chunk, (byte) => String.fromCharCode(byte)).join( binaryString += Array.from(chunk, (byte) => String.fromCharCode(byte)).join(
'' ''
) )
} }
return btoa(binaryString) return btoa(binaryString)
} }
export function objectToUint8ArrayFromResponse(obj: any) { export function objectToUint8ArrayFromResponse(obj: any) {
const len = Object.keys(obj).length const len = Object.keys(obj).length
const result = new Uint8Array(len) const result = new Uint8Array(len)
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
result[i] = obj[i] result[i] = obj[i]
} }
return result return result
} }
// export function uint8ArrayToBase64(arrayBuffer: Uint8Array): string { // export function uint8ArrayToBase64(arrayBuffer: Uint8Array): string {
// let binary = '' // let binary = ''
// const bytes = new Uint8Array(arrayBuffer) // const bytes = new Uint8Array(arrayBuffer)
// const len = bytes.length // const len = bytes.length
// for (let i = 0; i < len; i++) { // for (let i = 0; i < len; i++) {
// binary += String.fromCharCode(bytes[i]) // binary += String.fromCharCode(bytes[i])
// } // }
// return btoa(binary) // return btoa(binary)
// } // }
export function base64ToUint8Array(base64: string) { export function base64ToUint8Array(base64: string) {
const binaryString = atob(base64) const binaryString = atob(base64)
const len = binaryString.length const len = binaryString.length
const bytes = new Uint8Array(len) const bytes = new Uint8Array(len)
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i) bytes[i] = binaryString.charCodeAt(i)
} }
return bytes return bytes
} }
export function uint8ArrayToObject(uint8Array: Uint8Array) { export function uint8ArrayToObject(uint8Array: Uint8Array) {
// Decode the byte array using TextDecoder // Decode the byte array using TextDecoder
const decoder = new TextDecoder() const decoder = new TextDecoder()
const jsonString = decoder.decode(uint8Array) const jsonString = decoder.decode(uint8Array)
// Convert the JSON string back into an object // Convert the JSON string back into an object
const obj = JSON.parse(jsonString) const obj = JSON.parse(jsonString)
return obj return obj
} }
export function processFileInChunks(file: File): Promise<Uint8Array> { export function processFileInChunks(file: File): Promise<Uint8Array> {
return new Promise( return new Promise(
(resolve: (value: Uint8Array) => void, reject: (reason?: any) => void) => { (resolve: (value: Uint8Array) => void, reject: (reason?: any) => void) => {
const reader = new FileReader() const reader = new FileReader()
reader.onload = function (event: ProgressEvent<FileReader>) { reader.onload = function (event: ProgressEvent<FileReader>) {
const arrayBuffer = event.target?.result as ArrayBuffer const arrayBuffer = event.target?.result as ArrayBuffer
const uint8Array = new Uint8Array(arrayBuffer) const uint8Array = new Uint8Array(arrayBuffer)
resolve(uint8Array) resolve(uint8Array)
} }
reader.onerror = function (error: ProgressEvent<FileReader>) { reader.onerror = function (error: ProgressEvent<FileReader>) {
reject(error) reject(error)
} }
reader.readAsArrayBuffer(file) reader.readAsArrayBuffer(file)
} }
) )
} }
// export async function processFileInChunks(file: File, chunkSize = 1024 * 1024): Promise<Uint8Array> { // export async function processFileInChunks(file: File, chunkSize = 1024 * 1024): Promise<Uint8Array> {
// const fileStream = file.stream(); // const fileStream = file.stream();
// const reader = fileStream.getReader(); // const reader = fileStream.getReader();
// const totalLength = file.size; // const totalLength = file.size;
// if (totalLength <= 0 || isNaN(totalLength)) { // if (totalLength <= 0 || isNaN(totalLength)) {
// throw new Error('Invalid file size'); // throw new Error('Invalid file size');
// } // }
// const combinedArray = new Uint8Array(totalLength); // const combinedArray = new Uint8Array(totalLength);
// let offset = 0; // let offset = 0;
// while (offset < totalLength) { // while (offset < totalLength) {
// const { value, done } = await reader.read(); // const { value, done } = await reader.read();
// if (done) { // if (done) {
// break; // break;
// } // }
// const chunk = new Uint8Array(value.buffer, value.byteOffset, value.byteLength); // const chunk = new Uint8Array(value.buffer, value.byteOffset, value.byteLength);
// // Set elements one by one instead of using combinedArray.set(chunk, offset) // // Set elements one by one instead of using combinedArray.set(chunk, offset)
// for (let i = 0; i < chunk.length; i++) { // for (let i = 0; i < chunk.length; i++) {
// combinedArray[offset + i] = chunk[i]; // combinedArray[offset + i] = chunk[i];
// } // }
// offset += chunk.length; // offset += chunk.length;
// } // }
// return combinedArray; // return combinedArray;
// } // }

2
src/vite-env.d.ts vendored
View File

@ -1 +1 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />

426
src/wrappers/DownloadWrapper.tsx
View File

@ -1,213 +1,213 @@
import React from 'react' import React from 'react'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import { import {
setAddToDownloads, setAddToDownloads,
updateDownloads updateDownloads
} from '../state/features/globalSlice' } from '../state/features/globalSlice'
import { DownloadTaskManager } from '../components/common/DownloadTaskManager' import { DownloadTaskManager } from '../components/common/DownloadTaskManager'
import { RootState } from '../state/store' import { RootState } from '../state/store'
interface Props { interface Props {
children: React.ReactNode children: React.ReactNode
} }
const defaultValues: MyContextInterface = { const defaultValues: MyContextInterface = {
downloadVideo: () => {} downloadVideo: () => {}
} }
interface IDownloadVideoParams { interface IDownloadVideoParams {
name: string name: string
service: string service: string
identifier: string identifier: string
properties: any properties: any
} }
interface MyContextInterface { interface MyContextInterface {
downloadVideo: ({ downloadVideo: ({
name, name,
service, service,
identifier, identifier,
properties properties
}: IDownloadVideoParams) => void }: IDownloadVideoParams) => void
} }
export const MyContext = React.createContext<MyContextInterface>(defaultValues) export const MyContext = React.createContext<MyContextInterface>(defaultValues)
const DownloadWrapper: React.FC<Props> = ({ children }) => { const DownloadWrapper: React.FC<Props> = ({ children }) => {
const dispatch = useDispatch() const dispatch = useDispatch()
const downloads = useSelector((state: RootState) => state.global?.downloads); const downloads = useSelector((state: RootState) => state.global?.downloads);
const fetchResource = async ({ name, service, identifier }: any) => { const fetchResource = async ({ name, service, identifier }: any) => {
try { try {
await qortalRequest({ await qortalRequest({
action: 'GET_QDN_RESOURCE_PROPERTIES', action: 'GET_QDN_RESOURCE_PROPERTIES',
name, name,
service, service,
identifier identifier
}) })
} catch (error) {} } catch (error) {}
} }
const fetchVideoUrl = async ({ name, service, identifier }: any) => { const fetchVideoUrl = async ({ name, service, identifier }: any) => {
try { try {
fetchResource({ name, service, identifier }) fetchResource({ name, service, identifier })
let url = await qortalRequest({ let url = await qortalRequest({
action: 'GET_QDN_RESOURCE_URL', action: 'GET_QDN_RESOURCE_URL',
service: service, service: service,
name: name, name: name,
identifier: identifier identifier: identifier
}) })
if (url) { if (url) {
dispatch( dispatch(
updateDownloads({ updateDownloads({
name, name,
service, service,
identifier, identifier,
url url
}) })
) )
} }
} catch (error) {} } catch (error) {}
} }
const performDownload = ({ const performDownload = ({
name, name,
service, service,
identifier, identifier,
properties properties
}: IDownloadVideoParams) => { }: IDownloadVideoParams) => {
if(downloads[identifier]) return if(downloads[identifier]) return
dispatch( dispatch(
setAddToDownloads({ setAddToDownloads({
name, name,
service, service,
identifier, identifier,
properties properties
}) })
) )
let isCalling = false let isCalling = false
let percentLoaded = 0 let percentLoaded = 0
let timer = 24 let timer = 24
const intervalId = setInterval(async () => { const intervalId = setInterval(async () => {
if (isCalling) return if (isCalling) return
isCalling = true isCalling = true
const res = await qortalRequest({ const res = await qortalRequest({
action: 'GET_QDN_RESOURCE_STATUS', action: 'GET_QDN_RESOURCE_STATUS',
name: name, name: name,
service: service, service: service,
identifier: identifier identifier: identifier
}) })
if(res?.status === 'NOT_PUBLISHED'){ if(res?.status === 'NOT_PUBLISHED'){
dispatch( dispatch(
updateDownloads({ updateDownloads({
name, name,
service, service,
identifier, identifier,
status: res status: res
}) })
) )
clearInterval(intervalId) clearInterval(intervalId)
} }
isCalling = false isCalling = false
if (res.localChunkCount) { if (res.localChunkCount) {
if (res.percentLoaded) { if (res.percentLoaded) {
if ( if (
res.percentLoaded === percentLoaded && res.percentLoaded === percentLoaded &&
res.percentLoaded !== 100 res.percentLoaded !== 100
) { ) {
timer = timer - 5 timer = timer - 5
} else { } else {
timer = 24 timer = 24
} }
if (timer < 0) { if (timer < 0) {
timer = 24 timer = 24
isCalling = true isCalling = true
dispatch( dispatch(
updateDownloads({ updateDownloads({
name, name,
service, service,
identifier, identifier,
status: { status: {
...res, ...res,
status: 'REFETCHING' status: 'REFETCHING'
} }
}) })
) )
setTimeout(() => { setTimeout(() => {
isCalling = false isCalling = false
fetchResource({ fetchResource({
name, name,
service, service,
identifier identifier
}) })
}, 25000) }, 25000)
return return
} }
percentLoaded = res.percentLoaded percentLoaded = res.percentLoaded
} }
dispatch( dispatch(
updateDownloads({ updateDownloads({
name, name,
service, service,
identifier, identifier,
status: res status: res
}) })
) )
} }
// check if progress is 100% and clear interval if true // check if progress is 100% and clear interval if true
if (res?.status === 'READY') { if (res?.status === 'READY') {
clearInterval(intervalId) clearInterval(intervalId)
dispatch( dispatch(
updateDownloads({ updateDownloads({
name, name,
service, service,
identifier, identifier,
status: res status: res
}) })
) )
} }
}, 5000) // 1 second interval }, 5000) // 1 second interval
fetchVideoUrl({ fetchVideoUrl({
name, name,
service, service,
identifier identifier
}) })
} }
const downloadVideo = async ({ const downloadVideo = async ({
name, name,
service, service,
identifier, identifier,
properties properties
}: IDownloadVideoParams) => { }: IDownloadVideoParams) => {
try { try {
performDownload({ performDownload({
name, name,
service, service,
identifier, identifier,
properties properties
}) })
return 'addedToList' return 'addedToList'
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
} }
return ( return (
<> <>
<MyContext.Provider value={{ downloadVideo }}> <MyContext.Provider value={{ downloadVideo }}>
{/* <DownloadTaskManager /> */} {/* <DownloadTaskManager /> */}
{children} {children}
</MyContext.Provider> </MyContext.Provider>
</> </>
) )
} }
export default DownloadWrapper export default DownloadWrapper

52
tsconfig.json
View File

@ -1,26 +1,26 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ESNext", "target": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"], "lib": ["DOM", "DOM.Iterable", "ESNext"],
"module": "ESNext", "module": "ESNext",
"skipLibCheck": true, "skipLibCheck": true,
"noImplicitAny": false, "noImplicitAny": false,
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "allowImportingTsExtensions": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"noEmit": true, "noEmit": true,
"jsx": "react-jsx", "jsx": "react-jsx",
/* Linting */ /* Linting */
"strict": false, "strict": false,
"noUnusedLocals": false, "noUnusedLocals": false,
"noUnusedParameters": false, "noUnusedParameters": false,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"strictNullChecks": false, "strictNullChecks": false,
}, },
"include": ["src"], "include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }] "references": [{ "path": "./tsconfig.node.json" }]
} }

20
tsconfig.node.json
View File

@ -1,10 +1,10 @@
{ {
"compilerOptions": { "compilerOptions": {
"composite": true, "composite": true,
"skipLibCheck": true, "skipLibCheck": true,
"module": "ESNext", "module": "ESNext",
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowSyntheticDefaultImports": true "allowSyntheticDefaultImports": true
}, },
"include": ["vite.config.ts"] "include": ["vite.config.ts"]
} }

16
vite.config.ts
View File

@ -1,8 +1,8 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()],
base: "" base: ""
}) })