React with Native

Bringing together React and React Native

GitHub

README

Asset view

asset-view (

OperationClassification

TODO: Ensure embedding this will embed the actual docs in my markdown renderer. I guess it might already do so!

TODO: It would be great to learn more about this topic and see if I can make more cross-environment packages. A great use case would be to create a wrapper around the current fs-orm to enable using it at the frontend too.

OperationClassification ui-cjs)

📁 AssetView

AssetView shows an asset. Every file-format has a different way to be rendered.

Api reference
getSrc()
Input
assetAsset
Output{ src?: string,
downloadUrl?: string,
}
itemGetBackendAssetUrl()

Get remote url for a

BackendAsset

Part of the asset that should be sent to the backend. The rest should frontend-only

Some values are stored, some are not

BackendAsset in an AugmentedAnyModelType database model item.

If you provide an array it'll take the first asset.

Input
config{ item: AugmentedAnyModelType,
backendAsset?: { },
isDownload?: boolean,
}
Outputstring
<ModelItemAssetView />
Input
-
OutputJSX.Element
📄 getSrc (exported const)
📄 itemGetBackendAssetUrl (exported const)

Get remote url for a

BackendAsset

Part of the asset that should be sent to the backend. The rest should frontend-only

Some values are stored, some are not

BackendAsset in an AugmentedAnyModelType database model item.

If you provide an array it'll take the first asset.

📄 ModelItemAssetView (exported const)
<AssetView />
Input
props{ asset: Asset,
className?: string,
projectRelativeReferencingFilePath?: string,
hideDownloadLink?: boolean,
}
OutputJSX.Element
<InteractiveAsset />

shows an

Asset

Asset you can upload

This is not a database model, it can exist in properties of any db model or type interface.

Only alt and relativePath are stored, the other parameters are optionally required for uploading and user interfaces, and are not always there

NB: don't use this in your model, use StoredAsset instead.

Asset with interactivity

  • Any file shows the name of the file, the size, and a link to open it in a new tab in the browser
  • Images show thumbnail
  • Audio show duration and amplitude
  • Video/screen show thumbnail and duration
Input
-
OutputJSX.Element
useAsset()
Input
asset (optional)Asset
Output{ rawText?: { },
type?: video / audio / image / text / other,
downloadUrl?: string,
src?: string,
extension?: string,
}
📄 AssetView (exported const)
📄 InteractiveAsset (exported const)

shows an

Asset

Asset you can upload

This is not a database model, it can exist in properties of any db model or type interface.

Only alt and relativePath are stored, the other parameters are optionally required for uploading and user interfaces, and are not always there

NB: don't use this in your model, use StoredAsset instead.

Asset with interactivity

  • Any file shows the name of the file, the size, and a link to open it in a new tab in the browser
  • Images show thumbnail
  • Audio show duration and amplitude
  • Video/screen show thumbnail and duration
📄 useAsset (exported const)
Internal
Show internal (3)
useAssetInfo()
Input
url (optional)string
Output{ rawText?: { },
type: video / audio / image / text / other,
}
📄 defaultClassName (exported const)
📄 useAssetInfo (exported const)