@quillforms/blocklib-welcome-screen-block
Version:
Welcome screen block for quillforms
154 lines (151 loc) • 5.35 kB
JavaScript
import classnames from 'classnames';
import { css } from 'emotion';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const Attachment = ({
attributes,
isPreview
}) => {
if (!attributes.attachment || Object.keys(attributes.attachment).length === 0) {
// Show placeholder in preview mode
if (isPreview) {
return /*#__PURE__*/_jsx("div", {
className: classnames('renderer-core-block-attachment', css`
${attributes.layout !== 'split-right' && attributes.layout !== 'split-left' && `
max-width: ${attributes?.attachmentMaxWidth};
margin: auto;
text-align: center;
`}
overflow: hidden;
`),
children: /*#__PURE__*/_jsx("div", {
className: "renderer-core-block-attachment__placeholder",
children: /*#__PURE__*/_jsxs("svg", {
className: "renderer-core-block-attachment__placeholder-icon",
focusable: "false",
viewBox: "0 0 24 24",
role: "presentation",
children: [/*#__PURE__*/_jsx("circle", {
cx: "12",
cy: "12",
r: "3.2"
}), /*#__PURE__*/_jsx("path", {
d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5 5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
})]
})
})
});
}
return null;
}
const {
attachment,
layout
} = attributes;
const isVideo = attachment.type === 'video';
const isSplit = layout === 'split-left' || layout === 'split-right';
if (isVideo && attachment.url) {
// Extract YouTube video ID
const match = attachment.url.match(/(?:youtu.be\/|youtube.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([\w-]{11})/);
const videoId = match ? match[1] : null;
if (!videoId) return null;
// Parameters for both layouts
const commonParams = 'rel=0&iv_load_policy=3&modestbranding=1';
// For split layouts: autoplay, mute, no controls, no title
// For other layouts: no autoplay, with controls
const embedUrl = isSplit ? `https://www.youtube.com/embed/${videoId}?autoplay=1&mute=1&controls=0&showinfo=0&${commonParams}` : `https://www.youtube.com/embed/${videoId}?autoplay=0&controls=1&${commonParams}`;
return /*#__PURE__*/_jsx("div", {
className: classnames('renderer-core-block-attachment', css`
${!isSplit && `
max-width: ${attributes?.attachmentMaxWidth || '100%'};
margin: auto;
text-align: center;
`}
${isSplit && `
height: 100%;
width: 100%;
position: relative;
`}
overflow: hidden;
`),
children: /*#__PURE__*/_jsxs("div", {
className: css`
position: relative;
width: 100%;
height: ${isSplit ? "100%" : "315px"};
overflow: hidden;
`,
children: [/*#__PURE__*/_jsx("iframe", {
width: "100%",
height: "100%",
src: embedUrl,
frameBorder: "0",
allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
allowFullScreen: true,
className: css`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
${!isSplit && `border-radius: ${attributes.attachmentBorderRadius || '0'};`}
`
}), isSplit && /*#__PURE__*/_jsx("div", {
className: css`
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: transparent;
pointer-events: auto;
`
})]
})
});
}
// Image handling (existing functionality)
return /*#__PURE__*/_jsx("div", {
className: classnames('renderer-core-block-attachment', css`
${attributes.layout !== 'split-right' && attributes.layout !== 'split-left' && `
max-width: ${attributes?.attachmentMaxWidth};
margin: auto;
text-align: center;
`}
overflow: hidden;
`),
children: attachment && attachment.url ? /*#__PURE__*/_jsx("img", {
alt: attachment.alt || '',
src: attachment.url,
className: classnames('renderer-core-block-attachment__image', css`
${attributes.layout !== 'split-right' && attributes.layout !== 'split-left' && `border-radius: ${attributes.attachmentBorderRadius};
margin: auto;
`}
${isSplit && `
height: 100%;
width: 100%;
object-fit: cover;
`}
`)
}) : /*#__PURE__*/_jsx(_Fragment, {
children: isPreview && /*#__PURE__*/_jsx("div", {
className: "renderer-core-block-attachment__placeholder",
children: /*#__PURE__*/_jsxs("svg", {
className: "renderer-core-block-attachment__placeholder-icon",
focusable: "false",
viewBox: "0 0 24 24",
role: "presentation",
children: [/*#__PURE__*/_jsx("circle", {
cx: "12",
cy: "12",
r: "3.2"
}), /*#__PURE__*/_jsx("path", {
d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5 5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
})]
})
})
})
});
};
export default Attachment;
//# sourceMappingURL=attachment.js.map