Dependencies updated to React 19

Minor bugfixes

.eslintrc.cjs

@@ -1,15 +1,18 @@
 module.exports = {
-  env: { browser: true, es2020: true },
+  env: { browser: true, amd: true, node: true, es2020: true },
   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: {
-    'react-refresh/only-export-components': 'warn',
+    "react-refresh/only-export-components": "warn",
-    '@typescript-eslint/no-explicit-any': "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-unused-expressions": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
   },
-}
+};

package.json

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

src/App.tsx

@@ -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();
 

src/components/Publish/EditPlaylist/EditPlaylist.tsx

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

src/components/Publish/EditVideo/EditVideo.tsx

@@ -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 { Signal, useSignal } from "@preact/signals-react";
-import { useDispatch, useSelector } from "react-redux";
+import Compressor from "compressorjs";
-import AddBoxIcon from "@mui/icons-material/AddBox";
+import React, { useEffect, useState } from "react";
 import { useDropzone } from "react-dropzone";
-
+import { useDispatch, useSelector } from "react-redux";
-import { setNotification } from "../../../state/features/notificationsSlice.ts";
+import ShortUniqueId from "short-unique-id";
-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 { 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 });

src/components/Publish/PublishVideo/PublishVideo.tsx

@@ -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

src/components/ResponsiveImage.tsx

@@ -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%",

src/components/common/Comments/CommentEditor.tsx

@@ -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;

src/components/common/ContentButtons/SuperLike.tsx

@@ -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

src/components/common/FrameExtractor/FrameExtractor.tsx

@@ -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 = [];
 

src/components/common/ListSuperLikes/ListSuperLikeContainer.tsx

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

src/components/common/SuperLikesList/CommentEditor.tsx

@@ -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;

src/components/common/TextEditor/DisplayHtml.tsx

@@ -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",
+  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 }) => {
   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 convertQortalLinks(sanitize);
-    return anchorQortal;
   }, [html]);
 
   if (!cleanContent) return null;

src/components/common/TextEditor/TextEditor.css

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

src/components/common/TextEditor/TextEditor.tsx

@@ -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);

src/components/common/VideoPlayer/Components/VideoControls-State.ts

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

src/components/common/VideoPlayer/VideoPlayer-State.ts

@@ -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(() => {

src/components/common/VideoPlayer/VideoPlayer.tsx

@@ -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}

src/components/common/VideoPlayer/VideoPlayerGlobal.tsx

@@ -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;

src/state/store.ts

@@ -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);

tsconfig.json

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