edc_web_components/components/
landing_page.rs

1use patternfly_yew::prelude::*;
2use yew::prelude::*;
3use yew::suspense::use_future_with;
4
5#[derive(Clone, Debug, PartialEq, Properties)]
6pub struct LandingPageProps {
7  pub landing_page: String,
8}
9
10#[component]
11pub fn LandingPage(props: &LandingPageProps) -> Html {
12  let backdropper = use_backdrop();
13
14  let onclick = use_callback(
15    (backdropper.clone(), props.landing_page.clone()),
16    |_, (backdropper, landing_page)| {
17      if let Some(backdropper) = backdropper {
18        let landing_page = landing_page.clone();
19
20        backdropper.open(Backdrop::new(html!(
21          <Bullseye>
22            <Modal title="Dataset preview" variant={ModalVariant::Large}>
23              <Suspense fallback={html!(<Bullseye><Spinner /></Bullseye>)}>
24                <LandingPageInner {landing_page} />
25              </Suspense>
26            </Modal>
27          </Bullseye>
28        )))
29      }
30    },
31  );
32
33  html!(<Button variant={ButtonVariant::Link} {onclick}>{ "Preview" }</Button>)
34}
35
36#[derive(Clone, Debug, PartialEq, Properties)]
37struct LandingPageInnerProps {
38  landing_page: String,
39}
40
41#[component]
42fn LandingPageInner(props: &LandingPageInnerProps) -> HtmlResult {
43  let content = use_future_with(props.landing_page.clone(), async move |parameters| {
44    let landing_page = (*parameters).clone();
45
46    if let Ok(response) = reqwest::get(&landing_page).await {
47      match response
48        .headers()
49        .get("content-type")
50        .map(|header| header.to_str().unwrap().to_string())
51        .unwrap_or_default()
52        .as_str()
53      {
54        "text/html" => {
55          html!(
56            <iframe
57              title="Dataset Preview"
58              src={landing_page}
59              id="viewer"
60              width="100%"
61              height="100%"
62              style="height: 80vh"
63              frameborder="0"
64              allow="fullscreen"
65            />
66          )
67        }
68        header if header.starts_with("video/") => {
69          let header = header.to_string();
70
71          html!(
72            <video controls=true width="100%">
73              <source src="/shared-assets/videos/flower.webm" type={header} />
74            </video>
75          )
76        }
77        _ => html!(
78          <iframe
79            class="viewer"
80            data-src="{landing_page}"
81            height="100%"
82            width="100%"
83            allow="fullscreen"
84          />
85        ),
86      }
87    } else {
88      html!(
89        <iframe
90          title="Dataset Preview"
91          src={landing_page}
92          id="viewer"
93          width="100%"
94          height="100%"
95          style="height: 80vh"
96          frameborder="0"
97          allow="fullscreen"
98        />
99      )
100    }
101  })?;
102
103  let content = (*content).clone();
104
105  Ok(content)
106}
edc_web_components/components/landing_page.rs

edc_web_components/components/
landing_page.rs
