Using iframeviewer for Zim result preview.

app/src/components/Common.js

@@ -5,7 +5,8 @@ import {
     Card,
     Confirm,
     Container,
-    Dimmer, DimmerDimmable,
+    Dimmer,
+    DimmerDimmable,
     Icon as SIcon,
     IconGroup,
     Input,
@@ -1693,8 +1694,9 @@ export const monthNames = [
     'December',
 ];
 
-export function IframeViewer({title, src, fallback, timeout = 5000}) {
-    // Bottom of iframe is hidden when height is 100%.  These values display the entire iframe.
+export function IframeViewer({title, src, fallback, style, timeout = 5000}) {
+    // This function checks that an iframe can be fetched before displaying it.  Otherwise, it will display the fallback
+    // element which should help the maintainer to fix the issue.
     const [contentAvailable, setContentAvailable] = useState(false);
     const [loading, setLoading] = useState(true);
 
@@ -1709,11 +1711,8 @@ export function IframeViewer({title, src, fallback, timeout = 5000}) {
 
         fetch(src, {signal: controller.signal})
             .then(response => {
-                if (response.ok) {
-                    setContentAvailable(true);  // If fetch is successful and response is ok, set to load the iframe
-                } else {
-                    setContentAvailable(false);  // If response is not ok, do not load the iframe
-                }
+                // Only display content if it can be fetched.
+                setContentAvailable(response.ok);
             })
             .catch(() => {
                 setContentAvailable(false);  // Handle fetch errors (including aborts)
@@ -1726,32 +1725,26 @@ export function IframeViewer({title, src, fallback, timeout = 5000}) {
         return () => clearTimeout(timeoutId);  // Cleanup timeout on unmount
     }, [src]);
 
+    // Mobile needs less height, otherwise it hides the content below the screen.
+    let mobileStyle = {
+        position: 'fixed',
+        height: '80%',
+        width: '100%',
+        border: 'none',
+        padding: 0,
+        backgroundColor: '#FFFFFF',
+    };
+    // Allow provided `style` to overwrite.
+    mobileStyle = style ? {...mobileStyle, ...style} : mobileStyle;
+    let tabletStyle = {...mobileStyle, height: '93%'};
+    tabletStyle = style ? {...tabletStyle, ...style} : tabletStyle;
+
     const iframeMedia = <>
         <Media at='mobile'>
-            <iframe
-                title={title}
-                src={src}
-                style={{
-                    position: 'fixed',
-                    height: '80%',
-                    width: '100%',
-                    border: 'none',
-                    padding: 0,
-                    backgroundColor: '#FFFFFF',
-                }}/>
+            <iframe title={title} src={src} style={mobileStyle}/>
         </Media>
         <Media greaterThan='mobile'>
-            <iframe
-                title={title}
-                src={src}
-                style={{
-                    position: 'fixed',
-                    height: '93%',
-                    width: '100%',
-                    border: 'none',
-                    padding: 0,
-                    backgroundColor: '#FFFFFF',
-                }}/>
+            <iframe title={title} src={src} style={tabletStyle}/>
         </Media>
     </>;
 

app/src/components/Zim.js

@@ -206,12 +206,11 @@ const ZimSearchEntry = ({zimId, onTag, onUntag, entry}) => {
                onClose={() => setOpen(false)}>
             <ModalContent>
                 <div className='full-height'>
-                    <iframe title='textModal' src={url}
-                            style={{
-                                height: '100%', width: '100%', border: 'none', position: 'absolute', top: 0,
-                                // Use white to avoid iframe displaying with dark-theme.
-                                backgroundColor: '#ffffff',
-                            }}/>
+                    <ZimViewer src={url} style={{
+                        height: '100%', width: '100%', border: 'none', position: 'absolute', top: 0,
+                        // Use white to avoid iframe displaying with dark-theme.
+                        backgroundColor: '#ffffff',
+                    }}/>
                 </div>
             </ModalContent>
             <ModalActions>
@@ -534,10 +533,10 @@ class ManageZim extends React.Component {
     }
 }
 
-function ZimViewer() {
+function ZimViewer({src = ZIM_VIEWER_URI, style=null}) {
     const fallback = <Segment>
         <Header as='h3'>Failed to fetch Zim service.</Header>
-        <p>You may need to give permission to access the page: <a href={ZIM_VIEWER_URI}>{ZIM_VIEWER_URI}</a></p>
+        <p>You may need to give permission to access the page: <a href={src}>{src}</a></p>
 
         <p>If the above does not work, try starting the service:</p>
         <pre>sudo systemctl start wrolpi-kiwix</pre>
@@ -546,7 +545,7 @@ function ZimViewer() {
         <pre>journalctl -u wrolpi-kiwix</pre>
     </Segment>;
 
-    return <IframeViewer title='zim' src={ZIM_VIEWER_URI} fallback={fallback}/>
+    return <IframeViewer title='zim' src={src} fallback={fallback} style={style}/>
 }
 
 export function ZimRoute() {