feat: sync and update with all changes from solar-punk-ltd fork (#730)

* fix: swap error caused by invalid id and batchcount
* fix: enhance creation messages for admin drive and user drives
* fix: identity and wallet creation
* fix: asset preview types
* fix: fm search unicode text
* fix: feed identity and stamp usage
* fix: ui display changes
* fix: stamp buy and dilute
* fix: vite polyfill warning for stream
* fix: standard mode postage stamp purchase reserves incorrect size and duration
* fix: add syncing message for Bee node and update page state handling
* refactor: stamp depth and amount validation

---------

Co-authored-by: Balint Ujvari <balint.ujvari@solarpunk.buzz>
Co-authored-by: Bálint Ujvári <58116288+bosi95@users.noreply.github.com>
Co-authored-by: rolandlor <33499567+rolandlor@users.noreply.github.com>

src/pages/files/AssetPreview.tsx

@@ -8,7 +8,7 @@ import { FitAudio } from '../../components/FitAudio'
 import { FitImage } from '../../components/FitImage'
 import { FitVideo } from '../../components/FitVideo'
 import { shortenText } from '../../utils'
-import { getHumanReadableFileSize } from '../../utils/file'
+import { getHumanReadableFileSize, guessMime } from '../../utils/file'
 import { shortenHash } from '../../utils/hash'
 
 import { AssetIcon } from './AssetIcon'
@@ -18,16 +18,20 @@ interface Props {
   metadata?: Metadata
 }
 
-const getPreviewElement = (previewUri?: string, metadata?: Metadata) => {
-  if (metadata?.isVideo) {
+const getPreviewElement = (previewUri?: string, metadata?: Metadata, type?: string) => {
+  const isVideoType = Boolean(type && /.*\.(mp4|webm|ogv)$/i.test(type))
+  const isAudioType = Boolean(type && /.*\.(mp3|ogg|oga|wav|webm|m4a|aac|flac)$/i.test(type))
+  const isImageType = Boolean(type && /.*\.(jpg|jpeg|png|gif|webp|svg|ico)$/i.test(type))
+
+  if (metadata?.isVideo || isVideoType) {
     return <FitVideo src={previewUri} maxWidth="250px" maxHeight="175px" />
   }
 
-  if (metadata?.isAudio) {
+  if (metadata?.isAudio || isAudioType) {
     return <FitAudio src={previewUri} maxWidth="250px" />
   }
 
-  if (metadata?.isImage) {
+  if (metadata?.isImage || isImageType) {
     return <FitImage maxWidth="250px" maxHeight="175px" alt="Upload Preview" src={previewUri} />
   }
 
@@ -42,18 +46,26 @@ const getPreviewElement = (previewUri?: string, metadata?: Metadata) => {
   return <AssetIcon icon={<File />} />
 }
 
-const getType = (metadata?: Metadata) => {
+export const getType = (metadata?: Metadata): string => {
   if (metadata?.isWebsite) return 'Website'
 
   if (metadata?.type === 'folder') return 'Folder'
 
-  return metadata?.type
+  let metadataType = metadata?.type || 'unknown'
+  let typeFromExtension: string | undefined
+
+  if (metadataType === 'unknown' && metadata?.name) {
+    const { mime } = guessMime(metadata.name)
+    typeFromExtension = mime === 'application/octet-stream' ? 'file' : mime
+  }
+
+  return typeFromExtension || metadataType
 }
 
 // TODO: add optional prop for indexDocument when it is already known (e.g. downloading a manifest)
 export function AssetPreview({ metadata, previewUri }: Props): ReactElement | null {
-  const previewElement = useMemo(() => getPreviewElement(previewUri, metadata), [metadata, previewUri])
   const type = useMemo(() => getType(metadata), [metadata])
+  const previewElement = useMemo(() => getPreviewElement(previewUri, metadata, type), [metadata, type, previewUri])
 
   return (
     <Box mb={4}>