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

Dependencies updated to React 19

Browse Source 
Minor bugfixes
This commit is contained in:
Qortal Dev 2024-12-30 09:53:21 -07:00
parent 5fad85baa7
commit f687b3025d
22 changed files with 1859 additions and 4976 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
.eslintrc.cjs
View File

@ -1,15 +1,18 @@
module.exports = {
env: { browser: true, es2020: true },
env: { browser: true, amd: true, node: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react-hooks/recommended",
],
parser: '@typescript-eslint/parser',
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
plugins: ['react-refresh'],
parser: "@typescript-eslint/parser",
parserOptions: { ecmaVersion: "latest", sourceType: "module" },
plugins: ["react-refresh"],
rules: {
'react-refresh/only-export-components': 'warn',
'@typescript-eslint/no-explicit-any': "off",
"react-refresh/only-export-components": "warn",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-unused-vars": "warn",
"@typescript-eslint/no-unused-expressions": "off",
"@typescript-eslint/ban-ts-comment": "off",
},
}
};

6560
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

63
package.json
View File

@ -10,43 +10,44 @@
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@mui/icons-material": "^5.11.11",
"@mui/lab": "^5.0.0-alpha.163",
"@mui/material": "^5.11.13",
"@preact/signals-react": "^2.2.0",
"@reduxjs/toolkit": "^1.9.3",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.3.0",
"@mui/lab": "^6.0.0-beta.21",
"@mui/material": "^6.3.0",
"@preact/signals-react": "^2.3.0",
"@reduxjs/toolkit": "^2.5.0",
"compressorjs": "^1.2.1",
"dompurify": "^3.0.6",
"dompurify": "^3.2.3",
"localforage": "^1.10.0",
"moment": "^2.29.4",
"moment": "^2.30.1",
"quill": "^2.0.2",
"quill-image-resize-module-react": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-dropzone": "^14.3.5",
"react-idle-timer": "^5.7.2",
"react-intersection-observer": "^9.4.3",
"react-quill": "^2.0.0",
"react-redux": "^8.0.5",
"react-rnd": "^10.4.1",
"react-router-dom": "^6.9.0",
"react-toastify": "^9.1.2",
"react-intersection-observer": "^9.14.0",
"react-quill-new": "^3.3.3",
"react-redux": "^9.2.0",
"react-rnd": "^10.4.14",
"react-router-dom": "^7.1.1",
"react-toastify": "^11.0.2",
"redux-persist": "^6.0.0",
"short-unique-id": "^4.4.4",
"ts-key-enum": "^2.0.12"
"short-unique-id": "^5.2.0",
"ts-key-enum": "^2.0.13"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.57.1",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"prettier": "^2.8.6",
"typescript": "^5.0.2",
"vite": "^5.0.5"
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"@typescript-eslint/eslint-plugin": "^8.18.2",
"@typescript-eslint/parser": "^8.18.2",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.17.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.16",
"prettier": "^3.4.2",
"typescript": "^5.7.2",
"vite": "^6.0.6"
}
}

4
src/App.tsx
View File

@ -13,7 +13,7 @@ import { PlaylistContent } from "./pages/ContentPages/PlaylistContent/PlaylistCo
import { VideoContent } from "./pages/ContentPages/VideoContent/VideoContent";
import { Home } from "./pages/Home/Home";
import { setFilteredSubscriptions } from "./state/features/videoSlice.ts";
import { store } from "./state/store";
import { store, persistor } from "./state/store";
import { darkTheme, lightTheme } from "./styles/theme";
import DownloadWrapper from "./wrappers/DownloadWrapper";
import GlobalWrapper from "./wrappers/GlobalWrapper";
@ -21,7 +21,7 @@ import { ScrollWrapper } from "./wrappers/ScrollWrapper.tsx";
function App() {
// const themeColor = window._qdnTheme
const persistor = persistStore(store);
const [theme, setTheme] = useState("dark");
useIframe();

2
src/components/Publish/EditPlaylist/EditPlaylist.tsx
View File

@ -290,7 +290,7 @@ export const EditPlaylist = () => {
code: codeValue,
};
});
const id = uid();
const id = uid.rnd();
let commentsId = editVideoProperties?.id;

80
src/components/Publish/EditVideo/EditVideo.tsx
View File

@ -1,25 +1,6 @@
import React, { useEffect, useState } from "react";
import Compressor from "compressorjs";
import { formatBytes } from "../../../utils/numberFunctions.ts";
import {
AddCoverImageButton,
AddLogoIcon,
CoverImagePreview,
CrowdfundActionButton,
CrowdfundActionButtonRow,
CustomInputField,
CustomSelect,
LogoPreviewRow,
ModalBody,
NewCrowdfundTitle,
StyledButton,
TimesIcon,
} from "./EditVideo-styles.tsx";
import { CircularProgress } from "@mui/material";
import {
Box,
CircularProgress,
FormControl,
InputLabel,
MenuItem,
@ -30,40 +11,47 @@ import {
Typography,
useTheme,
} from "@mui/material";
import ShortUniqueId from "short-unique-id";
import { useDispatch, useSelector } from "react-redux";
import AddBoxIcon from "@mui/icons-material/AddBox";
import { Signal, useSignal } from "@preact/signals-react";
import Compressor from "compressorjs";
import React, { useEffect, useState } from "react";
import { useDropzone } from "react-dropzone";
import { setNotification } from "../../../state/features/notificationsSlice.ts";
import {
objectToBase64,
objectToFile,
uint8ArrayToBase64,
} from "../../../utils/PublishFormatter.ts";
import { RootState } from "../../../state/store.ts";
import {
upsertVideosBeginning,
addToHashMap,
upsertVideos,
setEditVideo,
updateVideo,
updateInHashMap,
} from "../../../state/features/videoSlice.ts";
import ImageUploader from "../../common/ImageUploader.tsx";
import { useDispatch, useSelector } from "react-redux";
import ShortUniqueId from "short-unique-id";
import { categories, subCategories } from "../../../constants/Categories.ts";
import { MultiplePublish } from "../MultiplePublish/MultiplePublishAll.tsx";
import { TextEditor } from "../../common/TextEditor/TextEditor.tsx";
import { extractTextFromHTML } from "../../common/TextEditor/utils.ts";
import { toBase64 } from "../PublishVideo/PublishVideo.tsx";
import { FrameExtractor } from "../../common/FrameExtractor/FrameExtractor.tsx";
import { QTUBE_VIDEO_BASE } from "../../../constants/Identifiers.ts";
import {
maxSize,
titleFormatter,
videoMaxSize,
} from "../../../constants/Misc.ts";
import { Signal, useSignal } from "@preact/signals-react";
import { setNotification } from "../../../state/features/notificationsSlice.ts";
import {
setEditVideo,
updateInHashMap,
updateVideo,
} from "../../../state/features/videoSlice.ts";
import { RootState } from "../../../state/store.ts";
import { objectToBase64 } from "../../../utils/PublishFormatter.ts";
import { FrameExtractor } from "../../common/FrameExtractor/FrameExtractor.tsx";
import ImageUploader from "../../common/ImageUploader.tsx";
import { TextEditor } from "../../common/TextEditor/TextEditor.tsx";
import { extractTextFromHTML } from "../../common/TextEditor/utils.ts";
import { MultiplePublish } from "../MultiplePublish/MultiplePublishAll.tsx";
import { toBase64 } from "../PublishVideo/PublishVideo.tsx";
import {
AddCoverImageButton,
AddLogoIcon,
CoverImagePreview,
CrowdfundActionButton,
CrowdfundActionButtonRow,
CustomInputField,
LogoPreviewRow,
ModalBody,
NewCrowdfundTitle,
TimesIcon,
} from "./EditVideo-styles.tsx";
const uid = new ShortUniqueId();
const shortuid = new ShortUniqueId({ length: 5 });

6
src/components/Publish/PublishVideo/PublishVideo.tsx
View File

@ -269,13 +269,13 @@ export const PublishVideo = ({
.trim()
.toLowerCase();
const id = uid();
const id = uid.rnd();
const identifier = editId
? editId
: `${QTUBE_VIDEO_BASE}${sanitizeTitle.slice(0, 30)}_${id}`;
const code = shortuid();
const code = shortuid.rnd();
const fullDescription = extractTextFromHTML(description);
let fileExtension = "mp4";
@ -365,7 +365,7 @@ export const PublishVideo = ({
.trim()
.toLowerCase();
const id = uid();
const id = uid.rnd();
const identifier = editId
? editId

2
src/components/ResponsiveImage.tsx
View File

@ -54,7 +54,7 @@ const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
<img
onLoad={() => setLoading(false)}
src={!src && !loading ? DeletedVideo : src}
src={!src && !loading ? DeletedVideo : src || null}
style={{
width: "100%",
height: "100%",

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

@ -201,7 +201,7 @@ export const CommentEditor = ({
};
const handleSubmit = async () => {
try {
const id = uid();
const id = uid.rnd();
let identifier = `${COMMENT_BASE}${postId.slice(-12)}_base_${id}`;
let idForNotification = identifier;

2
src/components/common/ContentButtons/SuperLike.tsx
View File

@ -111,7 +111,7 @@ export const SuperLike = ({
20
)};id:${identifier.slice(-30)}**`;
const id = uid();
const id = uid.rnd();
const identifierSuperLike = `${SUPER_LIKE_BASE}${identifier.slice(
0,
39

4
src/components/common/FrameExtractor/FrameExtractor.tsx
View File

@ -15,7 +15,6 @@ export const FrameExtractor = ({
videoDurations,
index,
}: FrameExtractorProps) => {
useSignals();
const videoRef = useRef(null);
const [durations, setDurations] = useState([]);
const canvasRef = useRef(null);
@ -29,8 +28,9 @@ export const FrameExtractor = ({
const newVideoDurations = [...videoDurations.value];
newVideoDurations[index] = duration;
console.log("durations before update: ", videoDurations.value);
videoDurations.value = [...newVideoDurations];
console.log("durations after update: ", videoDurations.value);
const section = duration / 4;
const timestamps = [];

2
src/components/common/ListSuperLikes/ListSuperLikeContainer.tsx
View File

@ -33,7 +33,7 @@ export const ListSuperLikeContainer = () => {
display: "flex",
justifyContent: "center",
alignItems: "center",
marginTop: "60px",
marginTop: "40px",
},
anchorReference: "none",
}}

2
src/components/common/SuperLikesList/CommentEditor.tsx
View File

@ -246,7 +246,7 @@ export const CommentEditor = ({
};
const handleSubmit = async () => {
try {
const id = uid();
const id = uid.rnd();
let identifier = `${COMMENT_BASE}${postId.slice(-12)}_base_${id}`;
let idForNotification = identifier;

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

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

1
src/components/common/TextEditor/TextEditor.css Normal file
View File

@ -0,0 +1 @@
@import "react-quill-new/dist/quill.snow.css";

9
src/components/common/TextEditor/TextEditor.tsx
View File

@ -1,6 +1,11 @@
import React from "react";
import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css";
import ReactQuill, { Quill } from "react-quill-new";
import "./TextEditor.css";
// The quill-image-resize-module-react package does not have ts types defined,
// so the ts error must be ignored
// @ts-ignore
import ImageResize from "quill-image-resize-module-react";
Quill.register("modules/imageResize", ImageResize);

1
src/components/common/VideoPlayer/Components/VideoControls-State.ts
View File

@ -14,7 +14,6 @@ export const useVideoControlsState = (
props: VideoPlayerProps,
videoPlayerState: ReturnType<typeof useVideoPlayerState>
) => {
useSignals();
const {
src,
getSrc,

2
src/components/common/VideoPlayer/VideoPlayer-State.ts
View File

@ -94,7 +94,7 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
}, [downloads, identifier]);
const src = useMemo(() => {
return download?.url || "";
return download?.url || null;
}, [download?.url]);
const resourceStatus = useMemo(() => {

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

@ -91,7 +91,7 @@ export const VideoPlayer = forwardRef<videoRefType, VideoPlayerProps>(
id={identifier}
ref={videoRef}
src={
resourceStatus?.status === "READY" && startPlay.value ? src : ""
resourceStatus?.status === "READY" && startPlay.value ? src : null
}
poster={startPlay.value ? "" : poster}
onTimeUpdate={updateProgress}

35
src/components/common/VideoPlayer/VideoPlayerGlobal.tsx
View File

@ -1,27 +1,32 @@
import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
import ReactDOM from "react-dom";
import { Box, IconButton, Slider, useTheme } from "@mui/material";
import { CircularProgress, Typography } from "@mui/material";
import { Key } from "ts-key-enum";
import {
PlayArrow,
Pause,
VolumeUp,
Fullscreen,
MoreVert as MoreIcon,
Pause,
PictureInPicture,
PlayArrow,
Refresh,
VolumeOff,
VolumeUp,
} from "@mui/icons-material";
import CloseIcon from "@mui/icons-material/Close";
import {
Box,
IconButton,
Menu,
MenuItem,
Slider,
Typography,
useTheme,
} from "@mui/material";
import { styled } from "@mui/system";
import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Key } from "ts-key-enum";
import { setVideoPlaying } from "../../../state/features/globalSlice.ts";
import { RootState } from "../../../state/store.ts";
import { formatTime } from "../../../utils/numberFunctions.ts";
import { MyContext } from "../../../wrappers/DownloadWrapper.tsx";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../../state/store.ts";
import { Refresh } from "@mui/icons-material";
import CloseIcon from "@mui/icons-material/Close";
import { Menu, MenuItem } from "@mui/material";
import { MoreVert as MoreIcon } from "@mui/icons-material";
import { setVideoPlaying } from "../../../state/features/globalSlice.ts";
const VideoContainer = styled(Box)`
position: relative;
display: flex;

3
src/state/store.ts
View File

@ -13,6 +13,7 @@ import {
PERSIST,
PURGE,
REGISTER,
persistStore,
} from "redux-persist";
import storage from "redux-persist/lib/storage";
@ -46,3 +47,5 @@ export type RootState = ReturnType<typeof store.getState>;
// Define the AppDispatch type, which is the type of the Redux store's dispatch function.
// This is useful when you need to dispatch an action in a component or elsewhere.
export type AppDispatch = typeof store.dispatch;
export const persistor = persistStore(store);

1
tsconfig.json
View File

@ -10,7 +10,6 @@
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",