iframe experiment

Cargo.toml

@@ -18,12 +18,6 @@ elliptic-curve = { version = "0.13.5", features = ["pkcs8"] }
 webpki-roots = "0.25.2"
 wasm-logger = "0.2.0"
 web-time = "0.2"
-yew_icons = { version = "0.8.0", features = [
-    # https://finnbear.github.io/yew_icons/
-    "FontAwesomeSolidUpload",
-    "BootstrapCloudUploadFill",
-] }
-
 
 # tlsn-core = { git = "https://github.com/tlsnotary/tlsn", branch = "dev" }
 [dependencies.tlsn-core]

src/components/content_iframe.rs

@@ -0,0 +1,45 @@
+use std::fmt;
+
+use gloo::console::log;
+use yew::prelude::*;
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct Props {
+    pub bytes: String,
+}
+
+fn render(content: String) -> Html {
+    html! {
+        <iframe class="w-full h-64" srcdoc={content} src="demo_iframe_srcdoc.htm">
+            <p>{">Your browser does not support iframes."}</p>
+        </iframe>
+    }
+}
+
+#[function_component]
+pub fn ContentIFrame(props: &Props) -> Html {
+    let content = format!("{}", &props.bytes);
+
+    // Content-Type: text/html
+    let start_html = content.find("<html");
+    let end_html = content.find("/html>");
+
+    let frame = if start_html.is_some() && end_html.is_some() {
+        let html_content = content[start_html.unwrap()..end_html.unwrap() + 5].to_string();
+        log!("html: {}", html_content.clone());
+        render(html_content)
+    } else {
+        // Content-Type: application/json
+
+        let start_html = content.find("<html");
+        let end_html = content.find("/html>");
+
+        render(content)
+    };
+
+    html! {
+        <details class="p-4 w-5/6" open={true}>
+            {frame}
+        </details>
+    }
+}

src/components/mod.rs

@@ -1,3 +1,4 @@
+pub mod content_iframe;
 pub mod pem_input;
 pub mod redacted_bytes_component;
 pub mod view_file;

src/components/view_file.rs

@@ -6,6 +6,7 @@ use yew::{function_component, html, Html, Properties};
 
 use tlsn_core::proof::{SessionProof, TlsProof};
 
+use crate::components::content_iframe::ContentIFrame;
 use crate::components::redacted_bytes_component::Direction;
 use crate::components::redacted_bytes_component::RedactedBytesComponent;
 
@@ -107,6 +108,8 @@ pub fn ViewFile(props: &Props) -> Html {
 
                         <RedactedBytesComponent direction={Direction::Send} bytes={bytes_send} />
 
+                        <ContentIFrame bytes={bytes_received.clone()} />
+
                         <RedactedBytesComponent direction={Direction::Received} bytes={bytes_received} />
                     </div>
                 }