martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding loading indicator for sealed assets

Browse Source
This commit is contained in:
Roland Osborne 2023-05-05 16:08:56 -07:00
parent da8b7e6bab
commit a30f1f3e4e
10 changed files with 34 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
View File

@ -1,9 +1,10 @@
import React, { useEffect, useState, useRef } from 'react';
import { Modal, Spin } from 'antd';
import { Progress, Modal, Spin } from 'antd';
import ReactResizeDetector from 'react-resize-detector';
import { PlayCircleOutlined, MinusCircleOutlined, SoundOutlined } from '@ant-design/icons';
import { AudioAssetWrapper, AudioModalWrapper } from './AudioAsset.styled';
import { useAudioAsset } from './useAudioAsset.hook';
import Colors from 'constants/Colors';
import background from 'images/audio.png';
@ -56,6 +57,9 @@ export function AudioAsset({ asset }) {
{ state.loading && !state.error && (
<div class="loading">
<Spin size="large" delay={250} />
{ state.total != 0 && (
<Progress percent={Math.floor(100 * state.block / state.total)} size="small" showInfo={false} trailColor={Colors.white} strokeColor={Colors.background} />
)}
</div>
)}
{ !state.ready && !state.loading && (

2
net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
View File

@ -80,6 +80,8 @@ export const AudioModalWrapper = styled.div`
position: absolute;
color: white;
border-radius: 8px;
display: flex;
flex-direction: column;
.ant-spin-dot-item {
background-color: ${Colors.white};

4
net/web/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js
View File

@ -11,6 +11,8 @@ export function useAudioAsset(asset) {
error: false,
ready: false,
url: null,
block: 0,
total: 0,
});
const updateState = (value) => {
@ -23,7 +25,7 @@ export function useAudioAsset(asset) {
try {
const view = index.current;
updateState({ active: true, ready: false, error: false, loading: true, url: null });
const blob = await asset.getDecryptedBlob(() => view != index.current);
const blob = await asset.getDecryptedBlob(() => view != index.current, (block, total) => updateState({ block, total }));
const url = URL.createObjectURL(blob);
revoke.current = url;
updateState({ loading: false, url });

6
net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
View File

@ -1,8 +1,9 @@
import React, { useState } from 'react';
import { Modal, Spin } from 'antd';
import { Progress, Modal, Spin } from 'antd';
import ReactResizeDetector from 'react-resize-detector';
import { ImageAssetWrapper, ImageModalWrapper } from './ImageAsset.styled';
import { useImageAsset } from './useImageAsset.hook';
import Colors from 'constants/Colors';
export function ImageAsset({ asset }) {
@ -42,6 +43,9 @@ export function ImageAsset({ asset }) {
{ !state.error && (
<div class="loading">
<Spin size="large" delay={250} />
{ state.total != 0 && (
<Progress percent={Math.floor(100 * state.block / state.total)} size="small" showInfo={false} trailColor={Colors.white} strokeColor={Colors.background} />
)}
</div>
)}
{ state.error && (

2
net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
View File

@ -76,6 +76,8 @@ export const ImageModalWrapper = styled.div`
position: absolute;
color: white;
border-radius: 8px;
display: flex;
flex-direction: column;
.ant-spin-dot-item {
background-color: ${Colors.white};

4
net/web/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
View File

@ -12,6 +12,8 @@ export function useImageAsset(asset) {
loading: false,
error: false,
url: null,
block: 0,
total: 0,
});
const updateState = (value) => {
@ -24,7 +26,7 @@ export function useImageAsset(asset) {
try {
const view = index.current;
updateState({ popout: true, width, height, error: false, loading: true, url: null });
const blob = await asset.getDecryptedBlob(() => view != index.current);
const blob = await asset.getDecryptedBlob(() => view != index.current, (block, total) => updateState({ block, total }));
const url = URL.createObjectURL(blob);
updateState({ loading: false, url });
revoke.current = url;

4
net/web/src/session/conversation/topicItem/useTopicItem.hook.js
View File

@ -30,7 +30,7 @@ export function useTopicItem(topic, contentKey) {
if (asset.encrypted) {
const encrypted = true;
const { type, thumb, label, parts } = asset.encrypted;
const getDecryptedBlob = async (abort) => {
const getDecryptedBlob = async (abort, progress) => {
let pos = 0;
let len = 0;
@ -39,6 +39,7 @@ export function useTopicItem(topic, contentKey) {
if (abort()) {
throw new Error("asset unseal aborted");
}
progress(i, parts.length);
const part = parts[i];
const url = topic.assetUrl(part.partId, topic.id);
const response = await fetchWithTimeout(url, { method: 'GET' });
@ -48,6 +49,7 @@ export function useTopicItem(topic, contentKey) {
slices.push(slice);
len += slice.byteLength;
};
progress(parts.length, parts.length);
const data = new Uint8Array(len)
for (let i = 0; i < slices.length; i++) {

6
net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
View File

@ -1,8 +1,9 @@
import { Modal, Spin } from 'antd';
import { Modal, Spin, Progress } from 'antd';
import ReactResizeDetector from 'react-resize-detector';
import { VideoCameraOutlined } from '@ant-design/icons';
import { VideoAssetWrapper, VideoModalWrapper } from './VideoAsset.styled';
import { useVideoAsset } from './useVideoAsset.hook';
import Colors from 'constants/Colors';
export function VideoAsset({ asset }) {
@ -51,6 +52,9 @@ export function VideoAsset({ asset }) {
{ !state.error && (
<div class="loading">
<Spin size="large" delay={250} />
{ state.total != 0 && (
<Progress percent={Math.floor(100 * state.block / state.total)} size="small" showInfo={false} trailColor={Colors.white} strokeColor={Colors.background} />
)}
</div>
)}
</div>

2
net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
View File

@ -48,6 +48,8 @@ export const VideoModalWrapper = styled.div`
position: absolute;
color: white;
border-radius: 8px;
display: flex;
flex-direction: column;
.ant-spin-dot-item {
background-color: ${Colors.white};

4
net/web/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
View File

@ -14,6 +14,8 @@ export function useVideoAsset(asset) {
error: false,
url: null,
loaded: false,
block: 0,
total: 0,
});
const updateState = (value) => {
@ -26,7 +28,7 @@ export function useVideoAsset(asset) {
try {
const view = index.current;
updateState({ active: true, width, height, error: false, loaded: false, loading: true, url: null });
const blob = await asset.getDecryptedBlob(() => view != index.current);
const blob = await asset.getDecryptedBlob(() => view != index.current, (block, total) => updateState({ block, total }));
const url = URL.createObjectURL(blob);
revoke.current = url;
updateState({ url, loading: false });