Publishing is done with base64 instead of file

fixed bug that could sometimes prevent video from playing after it is paused

src/components/Publish/EditPlaylist/EditPlaylist.tsx

@@ -338,7 +338,7 @@ export const EditPlaylist = () => {
         action: "PUBLISH_QDN_RESOURCE",
         name: username,
         service: "PLAYLIST",
-        file: objectToFile(playlistObject),
+        data64: await objectToBase64(playlistObject),
         title: title.slice(0, 50),
         description: metadescription,
         identifier: identifier,

src/components/Publish/EditVideo/EditVideo.tsx

@@ -304,7 +304,7 @@ export const EditVideo = () => {
         action: "PUBLISH_QDN_RESOURCE",
         name: username,
         service: "DOCUMENT",
-        file: objectToFile(videoObject),
+        data64: await objectToBase64(videoObject),
         title: title.slice(0, 50),
         description: metadescription,
         identifier: editVideoProperties.id,

src/components/Publish/PublishVideo/PublishVideo.tsx

@@ -38,7 +38,11 @@ import { useDropzone } from "react-dropzone";
 import AddIcon from "@mui/icons-material/Add";
 
 import { setNotification } from "../../../state/features/notificationsSlice.ts";
-import { objectToBase64, objectToFile, uint8ArrayToBase64 } from "../../../utils/PublishFormatter.ts";
+import {
+  objectToBase64,
+  objectToFile,
+  uint8ArrayToBase64,
+} from "../../../utils/PublishFormatter.ts";
 import { RootState } from "../../../state/store.ts";
 import {
   upsertVideosBeginning,
@@ -65,7 +69,11 @@ import {
   QTUBE_PLAYLIST_BASE,
   QTUBE_VIDEO_BASE,
 } from "../../../constants/Identifiers.ts";
-import { maxSize, titleFormatter, videoMaxSize } from "../../../constants/Misc.ts";
+import {
+  maxSize,
+  titleFormatter,
+  videoMaxSize,
+} from "../../../constants/Misc.ts";
 import { getFileName } from "../../../utils/stringFunctions.ts";
 
 export const toBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
@@ -138,7 +146,6 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
     useState(false);
   const [imageExtracts, setImageExtracts] = useState<any>({});
 
-
   const { getRootProps, getInputProps } = useDropzone({
     accept: {
       "video/*": [],
@@ -316,7 +323,7 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
           action: "PUBLISH_QDN_RESOURCE",
           name: name,
           service: "DOCUMENT",
-          file: objectToFile(videoObject),
+          data64: await objectToBase64(videoObject),
           title: title.slice(0, 50),
           description: metadescription,
           identifier: identifier + "_metadata",
@@ -396,13 +403,12 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
           `**category:${category};subcategory:${subcategory};${codes}**` +
           stringDescription.slice(0, 120);
 
-
         // Description is obtained from raw data
         const requestBodyJson: any = {
           action: "PUBLISH_QDN_RESOURCE",
           name: name,
           service: "PLAYLIST",
-          file: objectToFile(playlistObject),
+          data64: await objectToBase64(playlistObject),
           title: title.slice(0, 50),
           description: metadescription,
           identifier: identifier + "_metadata",
@@ -451,13 +457,12 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
             `**category:${playlistObject.category};subcategory:${playlistObject.subcategory};${codes}**` +
             playlistObject.description.slice(0, 120);
 
-
           // Description is obtained from raw data
           const requestBodyJson: any = {
             action: "PUBLISH_QDN_RESOURCE",
             name: name,
             service: "PLAYLIST",
-            file: objectToFile( playlistObject),
+            data64: await objectToBase64(playlistObject),
             title: playlistObject.title.slice(0, 50),
             description: metadescription,
             identifier: selectExistingPlaylist.identifier,
@@ -596,7 +601,9 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
                 compressedFile = file;
                 resolve();
               },
-              error(error) {console.log(error)},
+              error(error) {
+                console.log(error);
+              },
             });
           });
           if (!compressedFile) continue;
@@ -613,7 +620,9 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
           [index]: imagesExtracts,
         };
       });
-    } catch (error) {console.log(error)}
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   return (

src/components/ResponsiveImage.tsx

@@ -28,7 +28,7 @@ const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
     }, endTimeMilliSeconds);
   };
 
-  useEffect(() => endLoading(5), []);
+  useEffect(() => endLoading(30), [endLoading]);
 
   return (
     <Box

src/components/common/Comments/CommentEditor.tsx

@@ -156,7 +156,7 @@ export const CommentEditor = ({
         action: "PUBLISH_QDN_RESOURCE",
         name: name,
         service: "BLOG_COMMENT",
-        file: stringToFile(value),
+        data64: utf8ToBase64(value),
         identifier: identifier,
       });
       dispatch(

src/components/common/ContentButtons/LikeAndDislike.tsx

@@ -85,7 +85,7 @@ export const LikeAndDislike = ({ name, identifier }: LikeAndDislikeProps) => {
         break;
     }
   };
-  function publishLike(chosenLikeType: LikeType) {
+  const publishLike = async (chosenLikeType: LikeType) => {
     if (isLoading) {
       dispatch(
         setNotification({
@@ -118,21 +118,17 @@ export const LikeAndDislike = ({ name, identifier }: LikeAndDislikeProps) => {
           throw new Error("Could not retrieve content creator's address");
       });
 
-      objectToBase64({
-        likeType: chosenLikeType,
-      }).then(likeToBase64 => {
-        qortalRequest({
-          action: "PUBLISH_QDN_RESOURCE",
-          name: username,
-          service: "CHAIN_COMMENT",
-          data64: likeToBase64,
-          title: "",
-          identifier: likeIdentifier,
-          filename: `like_metadata.json`,
-        }).then(() => {
-          updateLikeDataState(chosenLikeType);
-        });
+      await qortalRequest({
+        action: "PUBLISH_QDN_RESOURCE",
+        name: username,
+        service: "CHAIN_COMMENT",
+        data64: await objectToBase64({ likeType: chosenLikeType }),
+        title: "",
+        identifier: likeIdentifier,
+        filename: `like_metadata.json`,
       });
+
+      updateLikeDataState(chosenLikeType);
     } catch (error: any) {
       dispatch(
         setNotification({
@@ -146,7 +142,7 @@ export const LikeAndDislike = ({ name, identifier }: LikeAndDislikeProps) => {
       );
       throw new Error("Failed to publish Super Like");
     }
-  }
+  };
 
   return (
     <>

src/components/common/ContentButtons/SuperLike.tsx

@@ -129,7 +129,7 @@ export const SuperLike = ({
         39
       )}_${id}`;
 
-      const superLikeToFile = objectToFile({
+      const superLikeToBase64 = await objectToBase64({
         comment,
         transactionReference: res.signature,
         notificationInformation: {
@@ -147,7 +147,7 @@ export const SuperLike = ({
         action: "PUBLISH_QDN_RESOURCE",
         name: username,
         service: "BLOG_COMMENT",
-        file: superLikeToFile,
+        data64: superLikeToBase64,
         title: "",
         description: metadescription,
         identifier: identifierSuperLike,

src/components/common/SuperLikesList/CommentEditor.tsx

@@ -1,23 +1,22 @@
-import { Box, Button, TextField } from "@mui/material";
+import localforage from "localforage";
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { RootState } from "../../../state/store";
 import ShortUniqueId from "short-unique-id";
+import { COMMENT_BASE } from "../../../constants/Identifiers.ts";
 import { setNotification } from "../../../state/features/notificationsSlice";
+import { addtoHashMapSuperlikes } from "../../../state/features/videoSlice";
+import { RootState } from "../../../state/store";
 import {
   objectToBase64,
   objectToFile,
-  publishFormatter,
   stringToFile,
 } from "../../../utils/PublishFormatter.ts";
-import localforage from "localforage";
 import {
   CommentInput,
   CommentInputContainer,
   SubmitCommentButton,
 } from "./Comments-styles";
-import { addtoHashMapSuperlikes } from "../../../state/features/videoSlice";
-import { COMMENT_BASE } from "../../../constants/Identifiers.ts";
+
 const uid = new ShortUniqueId();
 
 const notification = localforage.createInstance({
@@ -160,7 +159,7 @@ export const CommentEditor = ({
     }
 
     try {
-      let dataFile = null;
+      let dataFile: string = null;
       let description = "";
       let tag1 = "";
       let superObj = {};
@@ -181,8 +180,7 @@ export const CommentEditor = ({
           notificationInformation: comment.notificationInformation,
           about: comment.about,
         };
-        const superLikeToFile = objectToFile(superObj);
-        dataFile = superLikeToFile;
+        dataFile = await objectToBase64(superObj);
       }
       if (isSuperLike && !dataFile)
         throw new Error("unable to edit Super like");
@@ -191,7 +189,7 @@ export const CommentEditor = ({
         action: "PUBLISH_QDN_RESOURCE",
         name: name,
         service: "BLOG_COMMENT",
-        file: isSuperLike ? dataFile : stringToFile(value),
+        data64: isSuperLike ? dataFile : utf8ToBase64(value),
         identifier: identifier,
         description,
         tag1,

src/components/common/VideoPlayer/VideoPlayer.tsx

@@ -147,7 +147,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
 
     const increaseSpeed = (wrapOverflow = true) => {
       const changedSpeed = playbackRate + speedChange;
-      let newSpeed = wrapOverflow
+      const newSpeed = wrapOverflow
         ? changedSpeed
         : Math.min(changedSpeed, maxSpeed);
 
@@ -194,6 +194,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
           identifier,
         });
       } catch (error) {
+        console.log(error);
       } finally {
         isFetchingProperties.current = false;
       }
@@ -201,8 +202,10 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
 
     const toggleRef = useRef<any>(null);
     const { downloadVideo } = useContext(MyContext);
-    const togglePlay = async (event?: any, isPlay?: boolean) => {
+
+    const togglePlay = (event?: any, isPlay?: boolean) => {
       if (!videoRef.current) return;
+
       setStartPlay(true);
       if (!src || resourceStatus?.status !== "READY") {
         const el = document.getElementById("videoWrapper");
@@ -429,7 +432,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
 
     function formatTime(seconds: number): string {
       seconds = Math.floor(seconds);
-      let minutes: number | string = Math.floor(seconds / 60);
+      const minutes: number | string = Math.floor(seconds / 60);
       let hours: number | string = Math.floor(minutes / 60);
 
       let remainingSeconds: number | string = seconds % 60;
@@ -473,7 +476,9 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
             clearInterval(interval);
           }
         }, 7500);
-      } catch (error) {}
+      } catch (error) {
+        console.log(error);
+      }
     };
 
     useEffect(() => {