{getPageTitle('View assets')}

import React, { ReactElement, useEffect } from 'react'; import Head from 'next/head'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import dayjs from 'dayjs'; import { useAppDispatch, useAppSelector } from '../../stores/hooks'; import { useRouter } from 'next/router'; import { fetch } from '../../stores/assets/assetsSlice'; import { saveFile } from '../../helpers/fileSaver'; import dataFormatter from '../../helpers/dataFormatter'; import ImageField from '../../components/ImageField'; import LayoutAuthenticated from '../../layouts/Authenticated'; import { getPageTitle } from '../../config'; import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'; import SectionMain from '../../components/SectionMain'; import CardBox from '../../components/CardBox'; import BaseButton from '../../components/BaseButton'; import BaseDivider from '../../components/BaseDivider'; import { mdiChartTimelineVariant } from '@mdi/js'; import { SwitchField } from '../../components/SwitchField'; import FormField from '../../components/FormField'; import type { Asset, AssetVariant } from '../../types/entities'; // Extended type to handle asset variants from API (includes size_mb not in base type) interface AssetVariantWithSize extends AssetVariant { size_mb?: number; } // Extended type to handle asset variants relation from API interface AssetWithVariants extends Asset { asset_variants_asset?: AssetVariantWithSize[]; } const AssetsView = () => { const router = useRouter(); const dispatch = useAppDispatch(); const assetsState = useAppSelector((state) => state.assets); const assets = assetsState.data as AssetWithVariants[]; const asset = assets[0]; const { id } = router.query; const idStr = Array.isArray(id) ? id[0] : id; function removeLastCharacter(str: string) { return str.slice(0, -1); } useEffect(() => { if (idStr) { dispatch(fetch({ id: idStr })); } }, [dispatch, idStr]); return ( <> {getPageTitle('View assets')}

Project

{typeof asset?.project === 'object' && asset?.project ? asset.project.name : 'No data'}

Name

{asset?.name}

Asset format

{asset?.asset_type ?? 'No data'}

Type

{asset?.type ?? 'No data'}

CDNURL

{asset?.cdn_url}

Storagekey

{asset?.storage_key}

MIMEtype

{asset?.mime_type}

Size(MB)

{asset?.size_mb || 'No data'}

Width(px)

{asset?.width_px || 'No data'}

Height(px)

{asset?.height_px || 'No data'}

Duration(sec)

{asset?.duration_sec || 'No data'}

Checksum

{asset?.checksum}

null }} disabled /> null }} disabled /> {asset?.deleted_at_time ? ( ) : (

No Deletedat

)} <>

Asset_variants Asset

{asset?.asset_variants_asset && Array.isArray(asset.asset_variants_asset) && asset.asset_variants_asset.map((item) => ( router.push( `/asset_variants/asset_variants-view/?id=${item.id}`, ) } > ))}

Varianttype	CDNURL	Width(px)	Height(px)	Size(MB)
{item.variant_type}	{item.cdn_url}	{item.width_px}	{item.height_px}	{item.size_mb}

{!asset?.asset_variants_asset?.length && (

No data

)} router.push('/assets/assets-list')} /> ); }; AssetsView.getLayout = function getLayout(page: ReactElement) { return ( {page} ); }; export default AssetsView;