Allow a fallback mount option, to allow keeping a video/etc alive even when no OutputPortal is mounted

Author: tr00st

src/index.tsx

@@ -7,6 +7,7 @@ const ELEMENT_TYPE_SVG  = 'svg';
 
 type BaseOptions = {
     attributes?: { [key: string]: string };
+    fallbackMountNode?: React.MutableRefObject<Node>;
 };
 
 type HtmlOptions = BaseOptions & {
@@ -144,6 +145,16 @@ const createPortalNode = <C extends Component<any>>(
                 parent = undefined;
                 lastPlaceholder = undefined;
             }
+
+            if (parent === undefined && options?.fallbackMountNode?.current) {
+                const newParent = options?.fallbackMountNode.current;
+
+                newParent.appendChild(
+                    portalNode.element
+                );
+
+                parent = newParent;
+            }
         }
     } as AnyPortalNode<C>;
 
@@ -153,6 +164,7 @@ const createPortalNode = <C extends Component<any>>(
 interface InPortalProps {
     node: AnyPortalNode;
     children: React.ReactNode;
+    keepMounted: boolean;
 }
 
 class InPortal extends React.PureComponent<InPortalProps, { nodeProps: {} }> {

stories/html.stories.js

@@ -408,4 +408,117 @@ storiesOf('Portals', module)
         }
 
         return <MyComponent componentToShow='component-a' />
+    })
+    .add('default to fallback element when not in use', () => {
+        const StoryComponent = () => {
+            const fallbackRef = React.useRef(undefined);
+            const portalNode = React.useMemo(() => createHtmlPortalNode({ fallbackMountNode: fallbackRef }), []);
+            const [showPortal, setShowPortal] = React.useState(true);
+
+            return <div>
+                <div>
+                    <InPortal node={portalNode} keepMounted>
+                        <video src="https://media.giphy.com/media/l0HlKghz8IvrQ8TYY/giphy.mp4" controls loop autoPlay />
+                    </InPortal>
+
+                    <p>
+                        The video below should continue playing in the background toggled.
+                    </p>
+
+                    <button onClick={() => setShowPortal(!showPortal)}>
+                        Click to toggle the OutPortal
+                    </button>
+
+                    <hr/>
+
+                    <h2>Regular OutPortal</h2>
+                    <Container>
+                        { showPortal === true && <OutPortal node={portalNode} /> }
+                    </Container>
+                    
+                    <h2>Fallback:</h2>
+                    <Container>
+                        <div ref={fallbackRef}></div>
+                    </Container>
+                </div>
+            </div>;
+        };
+
+        return <StoryComponent />;
+    })
+    .add('persist playback whilst dispalyed in a hidden element', () => {
+        const StoryComponent = () => {
+            const fallbackRef = React.useRef(undefined);
+            const portalNode = React.useMemo(() => createHtmlPortalNode({ fallbackMountNode: fallbackRef }), []);
+            const [showPortal, setShowPortal] = React.useState(true);
+
+            return <div>
+                <div ref={fallbackRef} style={{display: 'none'}}></div>
+                <div>
+                    <InPortal node={portalNode} keepMounted>
+                        <video src="https://media.giphy.com/media/l0HlKghz8IvrQ8TYY/giphy.mp4" controls loop autoPlay />
+                    </InPortal>
+
+                    <p>
+                        The video below should continue playing in the background toggled.
+                    </p>
+
+                    <button onClick={() => setShowPortal(!showPortal)}>
+                        Click to toggle the OutPortal
+                    </button>
+
+                    <hr/>
+
+                    <div>
+                        { showPortal === true && <OutPortal node={portalNode} /> }
+                    </div>
+                </div>
+            </div>;
+        };
+
+        return <StoryComponent />;
+    })
+    .add('combine fallback container and switching between two places', () => {
+        const StoryComponent = () => {
+            const fallbackRef = React.useRef(undefined);
+            const portalNode = React.useMemo(() => createHtmlPortalNode({ fallbackMountNode: fallbackRef }), []);
+            const [showPortal, setShowPortal] = React.useState(true);
+            const [secondPortalSelected, setSecondPortalSelected] = React.useState(true);
+
+            return <div>
+                <div ref={fallbackRef} style={{display: 'none'}}></div>
+                <div>
+                    <InPortal node={portalNode} keepMounted>
+                        <video src="https://media.giphy.com/media/l0HlKghz8IvrQ8TYY/giphy.mp4" controls loop autoPlay />
+                    </InPortal>
+
+                    <p>
+                        The video below should continue playing in the background toggled.
+                    </p>
+
+                    <button onClick={() => setSecondPortalSelected(!secondPortalSelected)}>
+                        Click to switch the OutPortal
+                    </button>
+
+                    <button onClick={() => setShowPortal(!showPortal)}>
+                        Click to toggle the OutPortals
+                    </button>
+
+                    <hr/>
+
+                    { showPortal === true && <div>
+                        <Container>
+                            <h2>Portal 1:</h2>
+                            { !secondPortalSelected && <OutPortal node={portalNode} /> }
+                        </Container>
+                        <Container>
+                            <h2>Portal 2:</h2>
+                            { secondPortalSelected && <OutPortal node={portalNode} /> }
+                        </Container>
+                    </div> }
+                </div>
+            </div>;
+        };
+
+        return <StoryComponent />;
     });