fixing error loading file data

net/web/package.json

@@ -30,7 +30,6 @@
     "react-easy-crop": "^4.1.4",
     "react-icons": "^4.8.0",
     "react-image-file-resizer": "^0.4.8",
-    "react-player": "^2.10.0",
     "react-resize-detector": "^7.0.0",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",

net/web/src/session/conversation/addTopic/useAddTopic.hook.js

@@ -64,17 +64,25 @@ export function useAddTopic(contentKey) {
     updateState({ enableImage, enableAudio, enableVideo });
   }, [conversation.state.channel?.data?.channelDetail]);
 
+  const loadFile = (file) => {
+    return new Promise((resolve) => {
+      const reader = new FileReader()
+      reader.onloadend = () => resolve(reader.result)
+      reader.readAsArrayBuffer(file)
+    })
+  };
+
   const setUrl = async (file) => {
     const url = URL.createObjectURL(file);
     objects.current.push(url);
     if (contentKey) {
-      const buffer = await url.arrayBuffer();
+      const buffer = await loadFile(file)
       const getEncryptedBlock = (pos, len) => {
         if (pos + len > buffer.byteLen) {
           return null;
         }
         const block = btoa(String.fromCharCode.apply(null, buffer.slice(pos, len)));
-        return getEncryptedBlock(block, contentKey);
+        return encryptBlock(block, contentKey);
       }
       return { url, encrypted: true, size: buffer.byteLength, getEncryptedBlock };
     }

net/web/src/session/conversation/addTopic/videoFile/VideoFile.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useRef } from 'react';
-import ReactPlayer from 'react-player'
 import ReactResizeDetector from 'react-resize-detector';
 import { RightOutlined, LeftOutlined } from '@ant-design/icons';
 import { VideoFileWrapper } from './VideoFile.styled';
@@ -17,22 +16,22 @@ export function VideoFile({ url, onPosition }) {
 
   const onSeek = (offset) => {
     if (player.current) {
-      let len = player.current.getDuration();
-      if (len > 128) {
-        offset *= Math.floor(len / 128);
+      const len = player.current.duration;
+      if (len > 16) {
+        offset *= Math.floor(len / 16);
       } 
       seek.current += offset;
       if (seek.current < 0 || seek.current >= len) {
         seek.current = 0;
       }
       onPosition(seek.current);
-      player.current.seekTo(seek.current, 'seconds');
-      setPlaying(true);
+      player.current.currentTime = seek.current;
+      player.current.play();
     }
   }
 
   const onPause = () => {
-    setPlaying(false);
+    player.current.pause();
   }
 
   return (
@@ -42,8 +41,7 @@ export function VideoFile({ url, onPosition }) {
           if (width !== state.width || height !== state.height) {
             updateState({ width, height });
           }
-          return <ReactPlayer ref={player} playing={playing} playbackRate={0} controls={false} height="100%" width="auto" url={url} 
-              onStart={() => onPause()} onPlay={() => onPause()} />
+          return <video ref={player} muted onPlay={onPause} src={url} width={'auto'} height={'100%'} playsinline="true" />
         }}
       </ReactResizeDetector>
       <div class="overlay" style={{ width: state.width, height: state.height }}>

net/web/yarn.lock

@@ -4171,7 +4171,7 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^4.0.0, deepmerge@^4.2.2:
+deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
@@ -7162,11 +7162,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-load-script@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz"
-  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
-
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz"
@@ -7421,11 +7416,6 @@ memfs@^3.1.2, memfs@^3.4.3:
   dependencies:
     fs-monkey "^1.0.3"
 
-memoize-one@^5.1.1:
-  version "5.2.1"
-  resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
-
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz"
@@ -8600,7 +8590,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.10, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9129,11 +9119,6 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-fast-compare@^3.0.1:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
-  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
-
 react-icons@^4.8.0:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.8.0.tgz#621e900caa23b912f737e41be57f27f6b2bff445"
@@ -9159,17 +9144,6 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-player@^2.10.0:
-  version "2.11.0"
-  resolved "https://registry.npmjs.org/react-player/-/react-player-2.11.0.tgz"
-  integrity sha512-fIrwpuXOBXdEg1FiyV9isKevZOaaIsAAtZy5fcjkQK9Nhmk1I2NXzY/hkPos8V0zb/ZX416LFy8gv7l/1k3a5w==
-  dependencies:
-    deepmerge "^4.0.0"
-    load-script "^1.0.0"
-    memoize-one "^5.1.1"
-    prop-types "^15.7.2"
-    react-fast-compare "^3.0.1"
-
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"