Merge pull request #19599 from ramonlsouza/iss-18546

fix: slide snapshot option on iOS

bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx

@@ -12,7 +12,7 @@ import Styled from './styles';
 import BBBMenu from '/imports/ui/components/common/menu/component';
 import TooltipContainer from '/imports/ui/components/common/tooltip/container';
 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';
 
 const intlMessages = defineMessages({
@@ -280,9 +280,9 @@ const PresentationMenu = (props) => {
       );
     }
 
-    const { isSafari } = browserInfo;
+    const { isIos } = deviceInfo;
 
-    if (!isSafari && allowSnapshotOfCurrentSlide) {
+    if (allowSnapshotOfCurrentSlide) {
       menuItems.push(
         {
           key: 'list-item-screenshot',
@@ -322,6 +322,25 @@ const PresentationMenu = (props) => {
                   && shape.y >= 0,
               );
               const svgElem = await tldrawAPI.getSvg(shapes.map((shape) => shape.id));
+
+              // 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 svgString = new XMLSerializer().serializeToString(svgElem);
+                const blob = new Blob([svgString], { type: 'image/svg+xml' });
+
+                const data = URL.createObjectURL(blob);
+                const anchor = document.createElement('a');
+                anchor.href = data;
+                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;
 
@@ -334,6 +353,7 @@ const PresentationMenu = (props) => {
                   `${elementName}_${meetingName}_${new Date().toISOString()}.png`,
                 );
                 anchor.click();
+              }
 
               setState({
                 loading: false,

bigbluebutton-html5/imports/ui/components/presentation/styles.js

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