function CardAsset()

in src/components/Cards/CardAsset.js [73:201]
117 lines of code
14 McCabe index (conditional complexity)

function CardAsset(props) {
    const classes = useStyles();
    const { title, details, selected, selectedHandler } = props;
    const [expanded, setExpanded] = useState(false);
    const [open, setOpen] = useState(false);
    const [videoUrl, setVideoUrl] = useState('');
    const [thumbnailUrl, setThumbnailUrl] = useState(
        sessionStorage.getItem(`${title}_jpg`) || react_logo
    );

    const handleClose = () => {
        setOpen(false);
    };

    const handleExpandClick = () => {
        setExpanded(!expanded);
    };

    const handleMediaClick = (event) => {
        if (details.hasOwnProperty('proxyLoc')) {
            if (details.proxyLoc !== null) {
                const { bucket, key } = getBucketKey(details.proxyLoc);
                GetObjectInfo(bucket, key)
                .then((response) => {
                    setOpen(true);
                    setVideoUrl(response.data.body.objUrl);
                })
                .catch((err) => {
                    console.log(err);
                });
            }
        } else {
            console.log('No proxy file yet');
        }
    };

    const handleCardSelect = (event) => {
        selectedHandler(details);
    }

    useEffect(() => {
        sessionStorage.setItem(`${title}_jpg`, thumbnailUrl);
    }, [thumbnailUrl]);

    // On-Load Functions //
    useEffect(() => {
        const tempImgLoc = sessionStorage.getItem(`${title}_jpg`);
        const params = new URLSearchParams(tempImgLoc);
        let expireDate = new Date();
        let expired = false;
        if (params.has('X-Amz-Date') && params.has("X-Amz-Expires")) {
            const reqDate = moment(params.get('X-Amz-Date')).format('YYYYMMDDTHHmmssZ');
            expireDate = moment(reqDate).add(params.get('X-Amz-Expires'), 's');
            const currDate = new Date();
            expired = moment(expireDate).diff(currDate, 'seconds') <= 0;
        }

        if (tempImgLoc === react_logo || expired) {
            if (details.hasOwnProperty('thumbnailLoc')) {
                if (details.thumbnailLoc !== null) {
                    const { bucket, key } = getBucketKey(details.thumbnailLoc);
                    GetObjectInfo(bucket, key)
                    .then((response) => {
                        setThumbnailUrl(response.data.body.objUrl);
                    })
                    .catch((err) => {
                        console.log(err);
                    });
                }
            }
        }
    }, []);

    return (
        <>
        <Card className={classes.root}>
        <CardHeader
          title={title}
          titleTypographyProps={{variant: 'subtitle1', style:{ textOverflow: 'ellipsis', overflow: 'hidden', maxWidth: '150px'}}}
        />
        <CardActionArea onClick={handleMediaClick}>
            <CardMedia
            className={classes.media}
            image={thumbnailUrl}
            title={title}
            />
        </CardActionArea>
        <CardActions disableSpacing>
            <CustomCheckbox checked={selected} onChange={handleCardSelect}/>
            {details.numAudioTracks > 0 ?
                <Tooltip title={`${details.numAudioTracks} Audio Track(s)`}>
                    <AudiotrackIcon />
                </Tooltip>
                :
                <></>
            }
            <IconButton
                className={clsx(classes.expand, {
                [classes.expandOpen]: expanded,
                })}
                onClick={handleExpandClick}
                aria-expanded={expanded}
                aria-label="show more"
            >
            <ExpandMoreIcon />
          </IconButton>
        </CardActions>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <CardContent>
            <Grid container spacing={1}>
                <Grid item xs={6}>{"Duration:"}</Grid>
                <Grid item xs={6}>{formattedDuration(details.fileLength)}</Grid>

                <Grid item xs={6}>{"File Format:"}</Grid>
                <Grid item xs={6}>{details.fileFormat === undefined ? 'N/A' : details.fileFormat}</Grid>

                <Grid item xs={6}>{"Video Codec:"}</Grid>
                <Grid item xs={6}>{details.videoCodec === undefined ? 'N/A' : details.videoCodec}</Grid>

                <Grid item xs={6}>{"Audio Codec:"}</Grid>
                <Grid item xs={6}>{details.audioCodec === undefined ? 'N/A' : details.audioCodec}</Grid>
            </Grid>
          </CardContent>
        </Collapse>
      </Card>
      <CustomPlayer title={title} details={details} videoUrl={videoUrl} closeHandler={handleClose} open={open} />
    </>
    );
};