Merge pull request #19599 from ramonlsouza/iss-18546

fix: slide snapshot option on iOS
This commit is contained in:
Ramón Souza 2024-02-16 12:25:32 -03:00 committed by GitHub
commit 0974f17f5c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 33 additions and 14 deletions

View File

@ -12,7 +12,7 @@ import Styled from './styles';
import BBBMenu from '/imports/ui/components/common/menu/component'; import BBBMenu from '/imports/ui/components/common/menu/component';
import TooltipContainer from '/imports/ui/components/common/tooltip/container'; import TooltipContainer from '/imports/ui/components/common/tooltip/container';
import { ACTIONS } from '/imports/ui/components/layout/enums'; import { ACTIONS } from '/imports/ui/components/layout/enums';
import browserInfo from '/imports/utils/browserInfo'; import deviceInfo from '/imports/utils/deviceInfo';
import AppService from '/imports/ui/components/app/service'; import AppService from '/imports/ui/components/app/service';
const intlMessages = defineMessages({ const intlMessages = defineMessages({
@ -280,9 +280,9 @@ const PresentationMenu = (props) => {
); );
} }
const { isSafari } = browserInfo; const { isIos } = deviceInfo;
if (!isSafari && allowSnapshotOfCurrentSlide) { if (allowSnapshotOfCurrentSlide) {
menuItems.push( menuItems.push(
{ {
key: 'list-item-screenshot', key: 'list-item-screenshot',
@ -322,18 +322,38 @@ const PresentationMenu = (props) => {
&& shape.y >= 0, && shape.y >= 0,
); );
const svgElem = await tldrawAPI.getSvg(shapes.map((shape) => shape.id)); const svgElem = await tldrawAPI.getSvg(shapes.map((shape) => shape.id));
const width = svgElem?.width?.baseVal?.value ?? window.screen.width;
const height = svgElem?.height?.baseVal?.value ?? window.screen.height;
const data = await toPng(svgElem, { width, height, backgroundColor: '#FFF' }); // workaround for ios
if (isIos) {
svgElem.setAttribute('width', backgroundShape.props.w);
svgElem.setAttribute('height', backgroundShape.props.h);
svgElem.setAttribute('viewBox', `1 1 ${backgroundShape.props.w} ${backgroundShape.props.h}`);
const anchor = document.createElement('a'); const svgString = new XMLSerializer().serializeToString(svgElem);
anchor.href = data; const blob = new Blob([svgString], { type: 'image/svg+xml' });
anchor.setAttribute(
'download', const data = URL.createObjectURL(blob);
`${elementName}_${meetingName}_${new Date().toISOString()}.png`, const anchor = document.createElement('a');
); anchor.href = data;
anchor.click(); anchor.setAttribute(
'download',
`${elementName}_${meetingName}_${new Date().toISOString()}.svg`,
);
anchor.click();
} else {
const width = svgElem?.width?.baseVal?.value ?? window.screen.width;
const height = svgElem?.height?.baseVal?.value ?? window.screen.height;
const data = await toPng(svgElem, { width, height, backgroundColor: '#FFF' });
const anchor = document.createElement('a');
anchor.href = data;
anchor.setAttribute(
'download',
`${elementName}_${meetingName}_${new Date().toISOString()}.png`,
);
anchor.click();
}
setState({ setState({
loading: false, loading: false,

View File

@ -125,7 +125,6 @@ const PresentationContainer = styled.div`
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 1;
`; `;
const Presentation = styled.div` const Presentation = styled.div`