Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 9x 9x 9x 9x 9x 9x 9x 9x 2x 2x | /**** Libraries ****/
import React, { useCallback, useEffect } from 'react';
import Icon from '@zohodesk/icons/lib/Icon';
import Button from '@zohodesk/components/es/Button/Button';
import Typography from '@zohodesk/components/es/Typography/Typography';
import { mergeStyle } from '@zohodesk/utils';
import FreezeLayer from '../FreezeLayer/FreezeLayer';
/**propTypes**/
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
/**** Styles ****/
import defaultStyle from './css/VideoLookup.module.css';
export default function VideoLookup(props) {
const { isOpened, link, onClose,closeText ,isEmbeddedLink ,customStyle,testId,customId, videoFormat} = props;
const style = mergeStyle(defaultStyle, customStyle);
const handleKeyPress = useCallback(
(e) => {
if (e.keyCode == '27') {
onClose(e);
} else {
e.stopPropagation();
e.preventDefault();
}
},
[onClose]
);
useEffect(() => {
document.addEventListener('keyup', handleKeyPress);
return () => {
document.removeEventListener('keyup', handleKeyPress);
};
}, [handleKeyPress]);
return (
<FreezeLayer
align='both'
animationName='fade'
isActive={isOpened}
palette='dark'
>
<Button customClass={ {customButton:style.close}} dataId={`${customId}_close_icon`} palette="plainSecondary" size="medium" rounded onClick={onClose}>
<Icon name='ZD-close2' size='9'/>
<Typography $ui_size='14' $flag_dotted >{closeText}</Typography>
</Button>
<div className={style.videoContainer} data-id={`${customId}_container`} data-test-id={`${testId}_container`} >
{isEmbeddedLink ? (
<iframe
src={link}
allowFullScreen
allow='autoplay'
className={style.videoIframe}
></iframe>
) : (
<video autoPlay controls className={style.videoPlayer}>
<source src={link} type={`video/${videoFormat}`}/>
</video>
)}
</div>
</FreezeLayer>
);
}
VideoLookup.propTypes = propTypes;
VideoLookup.defaultProps = defaultProps;
|