+size formatter, +video, image view

src/App.css

@@ -192,3 +192,17 @@ section.drop {
     border-radius: 10px;
 }
 
+img.rowView {
+    max-width: 80%;
+    max-height: 80%;
+}
+
+video.rowView {
+    max-width: 80%;
+    max-height: 80%;
+}
+
+a.Media {
+    display: block;
+}
+

src/App.js

@@ -361,8 +361,18 @@ const defaultAdminOptions =
             },
             fields:{
                 createdAt: ({children}) => <>{new Date(+children).toISOString()}</> ,
-                url: ({children}) => <a href={children}>{children}</a>,
-                color:(props) => <span style={{backgroundColor: props.value}}>{props.value}</span>
+                url: ({children,record}, type, url) =>  <>
+                                                {(url = localStorage.url + record.url), null}
+                                                {(type = (record.mimeType && record.mimeType.split('/')[0]) || 'image') === 'image' ?
+                                                <img className="rowView" src={url}/> : 
+                                                <video className="rowView" autoplay controls>
+                                                    <source src={url}/>
+                                                </video>}
+                                        <a href={children} className='Media'>
+                                            {children}
+                                        </a></>,
+                color: (props)   => <span style={{backgroundColor: props.value}}>{props.value}</span>,
+                size:   ({children}) => <>{(['B', 'K','M','G','T'].reduce((result, letter, i, value) => result ? result : (value = (children/1024**i)) < 1024 ? `${value.toFixed(2)} ${letter}`:  '', ''))}</>
             },
             relations: {
                 Image: ({children}) => <span className="ImageRelation"><img src={localStorage.url + children.url}/>{children.originalFileName}</span>,