Add Fusion embed component

src/components/FusionEmbed/index.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import styles from './styles.module.css';
+
+export interface FusionEmbedProps {
+    url: string;
+    embedTitle: string;
+    loading?: 'lazy' | 'eager';
+    img?: string;
+    alt?: string;
+    img_width?: number;
+    img_height?: number;
+  }
+
+export default function FusionEmbed( props: FusionEmbedProps ) {
+
+    const url = props.url;
+    const loading = props.loading || 'lazy';
+    const img = props.img || '/img/misc/cube.webp';
+    const alt = props.alt || 'placeholder for 3D model';
+    const img_width = props.img_width || 1920;
+    const img_height = props.img_height || 1080;
+    const title = props.embedTitle || "3D CAD model";
+    const [buttonClicked, setButtonClicked] = useState(false);
+    const [imageHide, setImageHide] = useState(false);
+    const [iframeLoaded, setiframeLoaded] = useState(false);
+
+    if( props.img ) {
+        if( !props.img_width )
+            throw 'No image width specified!'
+        if( !props.img_height )
+            throw 'No image height specified!'
+    }
+
+
+    const handleButtonClick = () => {
+        setButtonClicked(true);
+        setImageHide(false);
+      };
+
+    const handleIframeLoad = () => {
+        setTimeout(() => {
+            setiframeLoaded(true);
+        }, 1000);
+        setTimeout(() => {
+            setImageHide(true);
+        }, 2000);
+    }
+
+    return (
+        <div className={styles.embedContainer}>
+            <div className={styles.embed}>
+            {buttonClicked && (
+                <iframe
+                    className={`${styles.iframe} ${iframeLoaded ? styles.iframeVisible : ''}`}
+                    src={url + '?mode=embed'}
+                    title={title}
+                    allowFullScreen={true}
+                    onLoad={handleIframeLoad}
+                />
+            )}
+            {!imageHide && (
+                <a
+                    className={styles.a}
+                    onClick={handleButtonClick}
+                >
+                    <img
+                        loading={loading}
+                        className={`${styles.image} ${iframeLoaded ? styles.imageHidden : ''}`}
+                        src={img}
+                        alt={alt}
+                        width={img_width}
+                        height={img_height}
+                    />
+                    <span className={`${styles.text} ${iframeLoaded ? styles.imageHidden : ''}`}>
+                        Click to load 3D model
+                    </span>
+                </a>
+            )}
+            </div>
+        </div>
+    );
+}

src/components/FusionEmbed/styles.module.css

@@ -0,0 +1,78 @@
+:root {
+  --imgFadetime: 1s;
+}
+
+.embedContainer {
+  max-width: 100%;
+  width: 800px;
+  aspect-ratio: 16/10;
+  margin: auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.embed {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+html[data-theme='light'] .image {
+  background-color: white;
+}
+
+.image {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--ifm-global-radius);
+  cursor: pointer;
+  border: 2px solid var(--ifm-color-emphasis-200);
+  transition:
+    border var(--ifm-transition-fast) ease,
+    opacity var(--imgFadetime) ease;
+  background-color: var(--ifm-background-color);
+}
+
+.iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-radius: var(--ifm-global-radius);
+  box-sizing: content-box;
+  opacity: 0;
+  transition: opacity var(--imgFadetime) ease;
+}
+
+.text {
+  position: absolute;
+  top: 95%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 10px;
+  cursor: pointer;
+  font-size: large;
+  font-weight: bold;
+  transition:
+    top var(--ifm-transition-fast) ease,
+    opacity var(--imgFadetime) ease;
+}
+
+.a:hover .text {
+  top: 94%;
+}
+
+.a:hover .image {
+  border-color: var(--ifm-color-primary);
+}
+
+.imageHidden {
+  opacity: 0;
+  position: absolute;
+}
+
+.iframeVisible {
+  opacity: 1;
+}