ImageMetadataView.tsx

import {Fragment} from "react";
import {ImageMetadata, ratioToDistance, ratioToTime} from "../metadata/ImageMetadata";
import {ratioToFloat} from "../metadata/Ratio";
import {ExposureMode} from "../metadata/ExposureMode";
import {ExposureProgram} from "../metadata/ExposureProgram";
import {LightSource} from "../metadata/LightSource";
import {MeteringMode} from "../metadata/MeteringMode";
import {WhiteBalance} from "../metadata/WhiteBalance";
import {SceneMode} from "../metadata/SceneMode";
import {ContrastProcessing} from "../metadata/ContrastProcessing";
import {SharpnessProcessing} from "../metadata/SharpnessProcessing";
import {SubjectDistanceRange} from "../metadata/SubjectDistanceRange";
import {BrightnessMedium, Camera, Copyright, Event, Exposure, PhotoCamera, ZoomIn} from "@material-ui/icons";
import {AngleAcute, ArrowExpandHorizontal, Blur, CameraTimer, Flash, WhiteBalanceIncandescent} from "mdi-material-ui";
import {FlashMode} from "../metadata/FlashMode";
import {ListItem, ListItemIcon, ListItemText} from "@material-ui/core";

export interface ImageMetadataViewProps {
    metadata: ImageMetadata
}

export function ImageMetadataView({metadata}: ImageMetadataViewProps) {
    return (
        <Fragment>
            {metadata.make !== undefined && (
                <ListItem dense>
                    <ListItemIcon><PhotoCamera/></ListItemIcon>
                    <ListItemText primary="Make" secondary={metadata.make}/>
                </ListItem>
            )}
            {metadata.model !== undefined && (
                <ListItem dense>
                    <ListItemText inset primary="Model" secondary={metadata.model}/>
                </ListItem>
            )}
            {metadata.software !== undefined && (
                <ListItem dense>
                    <ListItemText inset primary="Software" secondary={metadata.software}/>
                </ListItem>
            )}
            {metadata.copyright !== undefined && (
                <ListItem dense>
                    <ListItemIcon><Copyright/></ListItemIcon>
                    <ListItemText primary="Copyright" secondary={metadata.copyright}/>
                </ListItem>
            )}
            {metadata.dateTimeCreated !== undefined && (
                <ListItem dense>
                    <ListItemIcon><Event/></ListItemIcon>
                    <ListItemText primary="Created At" secondary={metadata.dateTimeCreated.toISOString()}/>
                </ListItem>
            )}
            {metadata.dateTimeDigitized !== undefined && (
                <ListItem dense>
                    <ListItemText inset primary="Digitized At"
                                  secondary={metadata.dateTimeDigitized.toISOString()}/>
                </ListItem>
            )}
            {metadata.dateTimeOriginal !== undefined && (
                <ListItem dense>
                    <ListItemText inset primary="Shot At" secondary={metadata.dateTimeOriginal.toISOString()}/>
                </ListItem>
            )}
            {metadata.digitalZoomRatio !== undefined && (
                <ListItem dense>
                    <ListItemIcon><ZoomIn/></ListItemIcon>
                    <ListItemText primary="Zoom" secondary={`${ratioToFloat(metadata.digitalZoomRatio)}x`}/>
                </ListItem>
            )}
            {metadata.focalLength !== undefined && (
                <ListItem dense>
                    <ListItemIcon><AngleAcute/></ListItemIcon>
                    <ListItemText primary="Focal Length" secondary={`${ratioToFloat(metadata.focalLength)}mm`}/>
                </ListItem>
            )}
            {metadata.focalLength35mm !== undefined && (
                <ListItem dense>
                    <ListItemText inset primary="35mm equivalent"
                                  secondary={`${ratioToFloat(metadata.focalLength35mm)}mm`}/>
                </ListItem>
            )}
            {metadata.shutterSpeed !== undefined && (
                <ListItem dense>
                    <ListItemIcon><CameraTimer/></ListItemIcon>
                    <ListItemText primary="Shutter Speed" secondary={ratioToTime(metadata.shutterSpeed)}/>
                </ListItem>
            )}
            {metadata.aperture !== undefined && (
                <ListItem dense>
                    <ListItemIcon><Camera/></ListItemIcon>
                    <ListItemText primary="Aperture" secondary={ratioToFloat(metadata.aperture)}/>
                </ListItem>
            )}
            {metadata.isoSpeedRating !== undefined && (
                <ListItem dense>
                    <ListItemIcon>ISO</ListItemIcon>
                    <ListItemText primary="ISO" secondary={metadata.isoSpeedRating}/>
                </ListItem>
            )}
            {metadata.exposure !== undefined && (
                <ListItem dense>
                    <ListItemIcon><Exposure/></ListItemIcon>
                    <ListItemText primary="Exposure" secondary={ratioToFloat(metadata.exposure)}/>
                </ListItem>
            )}
            {metadata.exposureMode !== undefined && (
                <ListItem dense>
                    <ListItemText inset primary="Mode" secondary={ExposureMode[metadata.exposureMode]}/>
                </ListItem>
            )}
            {metadata.exposureProgram !== undefined && (
                <ListItem dense>
                    <ListItemText inset primary="Program" secondary={ExposureProgram[metadata.exposureProgram]}/>
                </ListItem>
            )}
            {metadata.meteringMode !== undefined && (
                <ListItem dense>
                    <ListItemText inset primary="Metering mode" secondary={MeteringMode[metadata.meteringMode]}/>
                </ListItem>
            )}
            {metadata.flash !== undefined && (
                <Fragment>
                    <ListItem dense>
                        <ListItemIcon><Flash/></ListItemIcon>
                        <ListItemText primary="Flash"
                                      secondary={metadata.flash.available ? "Available" : "Unavailable"}/>
                    </ListItem>
                    <ListItem dense>
                        <ListItemText inset primary="Fired" secondary={metadata.flash.fired ? "Yes" : "No"}/>
                    </ListItem>
                    <ListItem dense>
                        <ListItemText inset primary="Red Eye Reduction"
                                      secondary={metadata.flash.redEyeReduction ? "Yes" : "No"}/>
                    </ListItem>
                    {metadata.flash.mode !== undefined && (
                        <ListItem dense>
                            <ListItemText inset primary="Mode" secondary={FlashMode[metadata.flash.mode]}/>
                        </ListItem>
                    )}
                    {metadata.flash.strength !== undefined && (
                        <ListItem dense>
                            <ListItemText inset primary="Strength" secondary={`${metadata.flash.strength} BCPS`}/>
                        </ListItem>
                    )}
                    <ListItem dense>
                        <ListItemText inset primary="Strobe Detection"
                                      secondary={!metadata.flash.strobeDetection.available ? "Unvailable" :
                                          metadata.flash.strobeDetection.detected ? "Strobe detected" :
                                              "No strobe detected"}
                        />
                    </ListItem>
                </Fragment>
            )}
            {metadata.lightSource !== undefined && (
                <ListItem dense>
                    <ListItemIcon><WhiteBalanceIncandescent/></ListItemIcon>
                    <ListItemText primary="Light Source" secondary={LightSource[metadata.lightSource]}/>
                </ListItem>
            )}
            {metadata.whiteBalance !== undefined && (
                <ListItem dense>
                    <ListItemIcon><WhiteBalanceIncandescent/></ListItemIcon>
                    <ListItemText primary="White balance" secondary={WhiteBalance[metadata.whiteBalance]}/>
                </ListItem>
            )}
            {metadata.subjectDistance !== undefined && (
                <ListItem dense>
                    <ListItemIcon><ArrowExpandHorizontal/></ListItemIcon>
                    <ListItemText primary="Subject Distance" secondary={ratioToDistance(metadata.subjectDistance)}/>
                </ListItem>
            )}
            {metadata.subjectDistanceRange !== undefined && (
                <ListItem dense>
                    <ListItemIcon><ArrowExpandHorizontal/></ListItemIcon>
                    <ListItemText primary="Subject Distance Range"
                                  secondary={SubjectDistanceRange[metadata.subjectDistanceRange]}/>
                </ListItem>
            )}
            {metadata.sceneMode !== undefined && (
                <p><b>Scene Mode</b>: {SceneMode[metadata.sceneMode]}</p>
            )}
            {metadata.contrast !== undefined && (
                <ListItem dense>
                    <ListItemIcon><BrightnessMedium/></ListItemIcon>
                    <ListItemText primary="Contrast Processing" secondary={ContrastProcessing[metadata.contrast]}/>
                </ListItem>
            )}
            {metadata.sharpness !== undefined && (
                <ListItem dense>
                    <ListItemIcon><Blur/></ListItemIcon>
                    <ListItemText primary="Sharpness Processing" secondary={SharpnessProcessing[metadata.sharpness]}/>
                </ListItem>
            )}
        </Fragment>
    );
}