From 18c88c38b6a0c53387b5d062891be1877dd42753 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Thu, 27 Apr 2023 15:44:28 -0700 Subject: [PATCH] fixing error loading file data --- net/web/package.json | 1 - .../conversation/addTopic/useAddTopic.hook.js | 12 ++++++-- .../addTopic/videoFile/VideoFile.jsx | 16 +++++----- net/web/yarn.lock | 30 ++----------------- 4 files changed, 19 insertions(+), 40 deletions(-) diff --git a/net/web/package.json b/net/web/package.json index 34beeaae..226c2581 100644 --- a/net/web/package.json +++ b/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", diff --git a/net/web/src/session/conversation/addTopic/useAddTopic.hook.js b/net/web/src/session/conversation/addTopic/useAddTopic.hook.js index 7d72e797..aefe21cd 100644 --- a/net/web/src/session/conversation/addTopic/useAddTopic.hook.js +++ b/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 }; } diff --git a/net/web/src/session/conversation/addTopic/videoFile/VideoFile.jsx b/net/web/src/session/conversation/addTopic/videoFile/VideoFile.jsx index d3e37c69..05ec82ef 100644 --- a/net/web/src/session/conversation/addTopic/videoFile/VideoFile.jsx +++ b/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 onPause()} onPlay={() => onPause()} /> + return