martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-23 18:15:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding labels to audio and binary

Browse Source
This commit is contained in:
balzack 2024-12-14 19:51:20 -08:00
parent 777524976a
commit 92f3b41127
8 changed files with 60 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/web/src/conversation/Conversation.tsx
View File

@ -128,7 +128,7 @@ export function Conversation() {
} else if (asset.type === 'video') {
return <VideoFile key={index} source={asset.file} thumbPosition={(position: number) => actions.setThumbPosition(index, position)} disabled={sending} />
} else if (asset.type === 'audio') {
return <AudioFile key={index} source={asset.file} />
return <AudioFile key={index} source={asset.file} updateLabel={(label: string) => actions.setLabel(index, label)} disabled={sending} />
} else {
return <BinaryFile key={index} source={asset.file} />
}

12
app/client/web/src/conversation/audioFile/AudioFile.module.css
View File

@ -1,9 +1,21 @@
.asset {
padding-top: 16px;
position: relative;
.thumb {
width: auto;
height: 92px;
}
.label {
padding-top: 16px;
padding-left: 2px;
padding-right: 2px;
position: absolute;
font-size: 8px;
top: 0;
left: 0;
height: 67%;
}
}

10
app/client/web/src/conversation/audioFile/AudioFile.tsx
View File

@ -1,15 +1,21 @@
import React from 'react';
import { Image } from '@mantine/core'
import { Image, Textarea } from '@mantine/core'
import { useAudioFile } from './useAudioFile.hook';
import classes from './AudioFile.module.css'
import audio from '../../images/audio.png'
export function AudioFile({ source }: {source: File}) {
export function AudioFile({ source, updateLabel, disabled }: {source: File, updateLabel: (label: string)=>void, disabled: boolean}) {
const { state, actions } = useAudioFile(source);
const setLabel = (label: string) => {
updateLabel(label);
actions.setLabel(label);
}
return (
<div className={classes.asset}>
<Image radius="sm" className={classes.thumb} src={audio} />
<Textarea className={classes.label} size="xs" value={state.label} onChange={(event) => setLabel(event.currentTarget.value)} disabled={disabled} />
</div>
);
}

10
app/client/web/src/conversation/audioFile/useAudioFile.hook.ts
View File

@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
export function useAudioFile(source: File) {
const [state, setState] = useState({
thumbUrl: null,
label: '',
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -11,12 +11,14 @@ export function useAudioFile(source: File) {
}
useEffect(() => {
const thumbUrl = URL.createObjectURL(source);
updateState({ thumbUrl });
return () => { URL.revokeObjectURL(thumbUrl) };
const label = source.name.split('.').shift();
updateState({ label });
}, [source]);
const actions = {
setLabel: (label: string) => {
updateState({ label });
}
}
return { state, actions }

21
app/client/web/src/conversation/binaryFile/BinaryFile.module.css
View File

@ -1,9 +1,28 @@
.asset {
padding-top: 16px;
margin-top: 16px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.thumb {
width: auto;
height: 92px;
}
.name {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
.extension {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
}

4
app/client/web/src/conversation/binaryFile/BinaryFile.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Image } from '@mantine/core'
import { Text, Image } from '@mantine/core'
import { useBinaryFile } from './useBinaryFile.hook';
import classes from './BinaryFile.module.css'
import binary from '../../images/binary.png'
@ -10,6 +10,8 @@ export function BinaryFile({ source }: {source: File}) {
return (
<div className={classes.asset}>
<Image radius="sm" className={classes.thumb} src={binary} />
<Text className={classes.name}>{ state.name }</Text>
<Text className={classes.extension}>{ state.extension }</Text>
</div>
);
}

5
app/client/web/src/conversation/binaryFile/useBinaryFile.hook.ts
View File

@ -2,6 +2,8 @@ import { useState, useEffect } from 'react'
export function useBinaryFile(source: File) {
const [state, setState] = useState({
name: '',
extension: '',
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -10,6 +12,9 @@ export function useBinaryFile(source: File) {
}
useEffect(() => {
const name = source.name.split('.').shift();
const extension = source.name.split('.').pop();
updateState({ name, extension });
}, [source]);
const actions = {

8
app/client/web/src/conversation/useConversation.hook.ts
View File

@ -191,6 +191,9 @@ export function useConversation() {
setThumbPosition: (index: number, position: number) => {
updateAsset(index, { position });
},
setLabel: (index: number, label: string) => {
updateAsset(index, { label });
},
more: async () => {
const focus = app.state.focus;
if (focus) {
@ -209,7 +212,6 @@ export function useConversation() {
if (focus) {
const sources = [] as AssetSource[];
const uploadAssets = state.assets.map(asset => {
const name = asset.file.name.split('.').shift();
const extension = asset.file.name.split('.').pop();
if (asset.type === 'image') {
if (sealed) {
@ -245,12 +247,12 @@ export function useConversation() {
sources.push({ type: AssetType.Audio, source: asset.file, transforms: [
{ type: TransformType.Copy, appId: `ac${sources.length}` }
]});
return { encrypted: { type: 'audio', label: name, parts: `ac${sources.length-1}` } };
return { encrypted: { type: 'audio', label: asset.label, parts: `ac${sources.length-1}` } };
} else {
sources.push({ type: AssetType.Video, source: asset.file, transforms: [
{ type: TransformType.Copy, appId: `ac${sources.length}` }
]});
return { audio: { label: name, full: `ac${sources.length-1}` } };
return { audio: { label: asset.label, full: `ac${sources.length-1}` } };
}
} else {
if (sealed) {