@elacity-js/uikit
Version:
React / Material UI Design kit for Elacity project
106 lines (103 loc) • 3.89 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { baseURL } from '@elacity-js/lib';
import { Tooltip } from '@mui/material';
import { Warning } from '@mui/icons-material';
import { styled } from '@mui/material/styles';
// @ts-ignore
const MediaImage = styled('img')(({ theme, mode }) => (Object.assign({ height: '100%', width: '100%', objectFit: 'contain', pointerEvents: 'all', [theme.breakpoints.between(theme.layoutSettings.cardMobileXsWidth, 'sm')]: Object.assign({}, (mode === 'preview' &&
{
// height: 145,
})) }, (mode === 'fullscreen' && {
objectFit: 'none',
[theme.breakpoints.down('md')]: {
objectFit: 'contain',
},
}))));
const Preview = ({ src, type, style, mimeType, mode, onClick }) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const propsMap = {
video: {
view: {
muted: false,
volume: 20,
autoPlay: false,
loop: false,
controls: true,
},
preview: {
muted: true,
autoPlay: true,
loop: true,
preload: 'metadata',
},
fullscreen: {
muted: false,
volume: 50,
autoPlay: true,
loop: true,
controls: true,
},
},
image: {
view: {
style: {
height: 'auto',
},
},
preview: {},
fullscreen: {
style: {
objectFit: 'none',
},
},
},
default: {
view: {},
preview: {},
fullscreen: {},
},
'3d': {
view: {
sx: {
minHeight: 400,
},
},
preview: {
preload: true,
concurrent: true,
sx: {
minHeight: 200,
},
},
fullscreen: {},
},
};
switch (type) {
case 'video':
return (jsxs("video", Object.assign({ width: "100%", height: "100%" }, (propsMap.video[mode] || {}), { onClick: onClick }, { children: [jsx("track", { kind: "captions" }), jsx("source", { src: `${src}${mode === 'preview' ? '#t=0,3' : ''}`, type: "video/mp4" })] })));
case '3d':
// if (Object.keys(loaders).includes(mimeType)) {
// return (
// <div style={{ width: '100%', height: '100%' }}>
// <Model3dViewer
// mimeType={mimeType}
// src={src}
// {...propsMap['3d'][mode] || {}}
// />
// </div>
// );
// }
// when not supported 3d model
return (jsxs("div", Object.assign({ style: { width: '100%', height: '100%' }, onClick: onClick }, { children: [jsx(Tooltip, Object.assign({ title: `We failed to load your 3D model with format ${mimeType}` }, { children: jsx("div", Object.assign({ style: { float: 'left', position: 'absolute', marginLeft: 4, marginTop: 4 } }, { children: jsx(Warning, { sx: { color: 'warning.main', fontSize: '1rem' } }) })) })), jsx("img", { alt: "3d format not supported", src: baseURL('/static/filetype/3d.png'), style: { width: '100%' } })] })));
default:
return (jsx(MediaImage, Object.assign({ src: src, alt: "Media", className: "media-img", onClick: onClick, mode: mode }, Object.assign(Object.assign({}, propsMap.image[mode]), { style }))));
}
};
Preview.defaultProps = {
mode: 'preview',
};
var MediaViewer = {
Preview,
};
export { MediaViewer as default };
//# sourceMappingURL=MediaViewer.js.map