Merge pull request #2994 from ONLYOFFICE/feature/fix-bugs

[PE mobile] Added full screen mode for preview
ONLYOFFICE · Jun 4, 2024 · 85fe595 · 85fe595
2 parents 2673afb + df035c0
commit 85fe595
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 12 deletions.
diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx
@@ -108,6 +108,11 @@ class SearchView extends Component {
                     },
                     searchbarEnable: (sb) => {
                         this.refSearchbarInput.focus();
+
+                        if(this.state.searchQuery.length > 0) {
+                            const searchInput = document.querySelector('.searchbar-input');
+                            searchInput.classList.add('input-with-value');
+                        }
                     }
                 }
             });
@@ -285,7 +290,7 @@ class SearchView extends Component {
                     </div>
                     <div className="searchbar-inner__center">
                         <div className="searchbar-input-wrap">
-                            <input className="searchbar-input" value={searchQuery} placeholder={_t.textSearch} type="search" maxLength="255"
+                            <input className={`searchbar-input ${searchQuery.length > 0 ? 'input-with-value' : ''}`} value={searchQuery} placeholder={_t.textSearch} type="search" maxLength="255"
                                 onKeyDown={e => this.onSearchKeyDown(e)}
                                 onInput={e => this.onSearchInput(e)}
                                 onChange={e => {this.changeSearchQuery(e.target.value)}} ref={el => this.refSearchbarInput = el} />

diff --git a/apps/documenteditor/mobile/src/view/settings/Download.jsx b/apps/documenteditor/mobile/src/view/settings/Download.jsx
@@ -22,11 +22,6 @@ const Download = props => {
                 <ListItem title="DOCX" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.DOCX)}>
                     <Icon slot="media" icon="icon-format-docx"></Icon>
                 </ListItem>
-                {canFeatureForms && isAvailableExt ? [
-                    <ListItem title="DOCXF" key="DOCXF" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.DOCXF)}>
-                        <Icon slot="media" icon="icon-format-docxf"></Icon>
-                    </ListItem>,
-                ] : null}
                 <ListItem title="PDF" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.PDF)}>
                     <Icon slot="media" icon="icon-format-pdf"></Icon>
                 </ListItem>

diff --git a/apps/presentationeditor/mobile/src/controller/Preview.jsx b/apps/presentationeditor/mobile/src/controller/Preview.jsx
@@ -1,14 +1,11 @@
-import React, { useEffect, useState } from 'react';
-import { inject } from 'mobx-react';
-import { f7 } from 'framework7-react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import Preview from "../view/Preview";
 import ContextMenu from './ContextMenu';
 
 const PreviewController = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true})
-
     let _view, _touches, _touchStart, _touchEnd;
 
     useEffect(() => {
@@ -20,14 +17,15 @@ const PreviewController = props => {
         };
 
         ContextMenu.closeContextMenu();
-        show();
-        onDocumentReady();
 
         _view = $$('#pe-preview');
         _view.on('touchstart', onTouchStart);
         _view.on('touchmove', onTouchMove);
         _view.on('touchend', onTouchEnd);
 
+        show();
+        onDocumentReady();
+
         return () => {
             const api = Common.EditorApi.get();
 
@@ -39,9 +37,41 @@ const PreviewController = props => {
         };
     }, []);
 
+    const enterFullScreen = element => {
+        if(element) {
+            if(element.requestFullscreen) {
+                element.requestFullscreen();
+            } else if(element.webkitRequestFullscreen) {
+                element.webkitRequestFullscreen();
+            } else if(element.mozRequestFullScreen) {
+                element.mozRequestFullScreen();
+            } else if(element.msRequestFullscreen) {
+                element.msRequestFullscreen();
+            } else {
+                console.error('Full screen API is not supported in this browser.');
+            }
+        }
+    }
+
+    const exitFullScreen = () => {
+        if(document.cancelFullScreen) {
+            document.cancelFullScreen();
+        } else if(document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen();
+        } else if(document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if(document.msExitFullscreen) {
+            document.msExitFullscreen();
+        } else {
+            console.error('Full screen exit API is not supported in this browser.');
+        }
+    };
+
     const show = () => {
         const api = Common.EditorApi.get();
+
         api.StartDemonstration('presentation-preview', api.getCurrentPage());
+        enterFullScreen(_view[0]);
     };
 
     const onTouchStart = e => {
@@ -87,6 +117,7 @@ const PreviewController = props => {
 
     const onEndDemonstration = () => {
         props.closeOptions('preview');
+        exitFullScreen();
     };
 
     return (