style.css and numbered instructions

src/src/main.rs

@@ -17,30 +17,21 @@ fn main() {
 fn App(cx: Scope) -> Element {
    let file = use_state(cx, || String::new());
    let status = use_state(cx, || String::new());
+   let processing = use_state(cx, || false);
    let analysis = use_state(cx, || Analysis::new());
+   let a_css = String::from_utf8_lossy(include_bytes!("./style.css"));
    cx.render(rsx! {
       header {
-         style { "
+         style { "{a_css}" }
-            body {{
-               max-width: 600pt;
-               margin: auto;
-               zoom: 150%;
-            }}
-            label {{
-               display: block;
-            }}
-            label:has(input[type=checkbox]:checked) {{
-               background-color: lightgreen;
-            }}
-         " }
       }
       main {
          rsx! {
             h1 { "home-video-blue-extractinator" }
+            h3 { "1. Choose your movie" }
             div {
                input {
                   r#type: "file",
-                  disabled: status.get().starts_with("[WORKING]"),
+                  disabled: *processing.get(),
                   onchange: |evt| {
                      to_owned![file];
                      if let Some(file_engine) = &evt.files {
@@ -52,15 +43,18 @@ fn App(cx: Scope) -> Element {
                },
                p { file.get().clone() }
             }
+            h3 { "2. Analyze your movie" }
             div {
-               input { r#type: "button", value: "analyze", disabled: file.get().len() == 0 || status.get().starts_with("[WORKING]"), onclick: move |_| {
+               input { r#type: "button", value: "analyze", disabled: file.get().len() == 0 || *processing.get(), onclick: move |_| {
                   cx.spawn({
                      let file = file.to_owned();
                      let status = status.to_owned();
+                     let processing = processing.to_owned();
                      let analysis = analysis.to_owned();
 
                      async move {
-                        status.set(format!("[WORKING] analyzing {file}... (this may take a while, like 5 minutes, but I promise I'm working on it)"));
+                        processing.set(true);
+                        status.set(format!("analyzing {file}... (this may take a while, like 5 minutes, but I promise I'm working on it)"));
                         let analyzed = analyze(file.get().clone()).await;
                         if analyzed.err.len() > 0 {
                            status.set(analyzed.err.clone());
@@ -72,6 +66,7 @@ fn App(cx: Scope) -> Element {
                            ));
                         }
                         analysis.set(analyzed);
+                        processing.set(false);
                      }
                   });
                }}
@@ -82,7 +77,6 @@ fn App(cx: Scope) -> Element {
                br {}
             }
             div {
-               h3 { "Content Spans" }
                form {
                   onsubmit: |evt| {
                      let content_spans: Vec<_> = evt.values.iter()
@@ -96,16 +90,19 @@ fn App(cx: Scope) -> Element {
                            }
                         })
                         .collect();
-                     status.set(format!("[WORKING] clipifying {:?}...", content_spans));
+                     status.set(format!("clipifying {:?}...", content_spans));
                      let file = file.get().clone();
                      to_owned![status];
+                     to_owned![processing];
                      async move {
+                        processing.set(true);
                         let f = clipify(file, content_spans).await;
                         status.set(f);
+                        processing.set(false);
                      }
                   },
-                  input { r#type: "submit", value: "clipify selected spans", disabled: file.get().len() == 0 || status.get().starts_with("[WORKING]") || analysis.get().result.len() == 0 }
                   hr {}
+                  h3 { "3. Double check the scenes to keep (green) are okay" }
                   analysis.get().result.iter().map(|a| {
                      rsx! {
                         div {
@@ -122,6 +119,9 @@ fn App(cx: Scope) -> Element {
                         }
                      }
                   })
+                  hr {}
+                  h3 { "4. Submit your re-clip" }
+                  input { r#type: "submit", value: "clipify selected spans", disabled: file.get().len() == 0 || *processing.get() || analysis.get().result.len() == 0 }
                }
             }
          }
@@ -227,4 +227,4 @@ async fn clipify(file: String, content_spans: Vec<lib::video::ContentSpan>) -> S
    }
 }
 
-const a_png: &str = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
+const a_png: &str = r"iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";