From 2f911a482fc705914422a4324a979afd3e3eb5aa Mon Sep 17 00:00:00 2001
From: rupansh <rupanshsekar@hotmail.com>
Date: Thu, 18 Jan 2024 09:41:24 +0530
Subject: [PATCH] feat: initial upload page

---
 Cargo.lock                         | 233 ++++++++++++++++++++++++-
 Cargo.toml                         |   9 +-
 src/app.rs                         |   6 +-
 src/component/mod.rs               |   2 +
 src/component/modal.rs             |  33 ++++
 src/component/toggle.rs            |  21 +++
 src/consts.rs                      |   6 +
 src/main.rs                        |  16 ++
 src/page/mod.rs                    |   1 +
 src/page/post_view/video_loader.rs |  10 +-
 src/page/upload/cf_upload.rs       | 163 +++++++++++++++++
 src/page/upload/mod.rs             | 145 ++++++++++++++++
 src/page/upload/validators.rs      |  33 ++++
 src/page/upload/video_upload.rs    | 269 +++++++++++++++++++++++++++++
 src/state/cf/direct_upload.rs      |  61 +++++++
 src/state/cf/enable_mp4.rs         |  31 ++++
 src/state/cf/error.rs              |  28 +++
 src/state/cf/mod.rs                | 151 ++++++++++++++++
 src/state/cf/video_details.rs      |  45 +++++
 src/state/mod.rs                   |   4 +
 src/utils/route.rs                 |   4 +-
 21 files changed, 1264 insertions(+), 7 deletions(-)
 create mode 100644 src/component/modal.rs
 create mode 100644 src/component/toggle.rs
 create mode 100644 src/page/upload/cf_upload.rs
 create mode 100644 src/page/upload/mod.rs
 create mode 100644 src/page/upload/validators.rs
 create mode 100644 src/page/upload/video_upload.rs
 create mode 100644 src/state/cf/direct_upload.rs
 create mode 100644 src/state/cf/enable_mp4.rs
 create mode 100644 src/state/cf/error.rs
 create mode 100644 src/state/cf/mod.rs
 create mode 100644 src/state/cf/video_details.rs

diff --git a/Cargo.lock b/Cargo.lock
index 6cc8edc3..e1e0327e 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -250,6 +250,15 @@ version = "0.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3a8241f3ebb85c056b509d4327ad0358fbbba6ffb340bf388f26350aeda225b1"
 
+[[package]]
+name = "bincode"
+version = "1.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1f45e9417d87227c7a56d22e471c6206462cba514c7590c09aff4cf6d1ddcad"
+dependencies = [
+ "serde",
+]
+
 [[package]]
 name = "binread"
 version = "2.2.0"
@@ -1151,6 +1160,88 @@ version = "0.28.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4271d37baee1b8c7e4b708028c57d816cf9d2434acb33a549475f78c181f6253"
 
+[[package]]
+name = "gloo"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d15282ece24eaf4bd338d73ef580c6714c8615155c4190c781290ee3fa0fd372"
+dependencies = [
+ "gloo-console",
+ "gloo-dialogs",
+ "gloo-events",
+ "gloo-file",
+ "gloo-history",
+ "gloo-net 0.5.0",
+ "gloo-render",
+ "gloo-storage",
+ "gloo-timers",
+ "gloo-utils 0.2.0",
+ "gloo-worker",
+]
+
+[[package]]
+name = "gloo-console"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a17868f56b4a24f677b17c8cb69958385102fa879418052d60b50bc1727e261"
+dependencies = [
+ "gloo-utils 0.2.0",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-dialogs"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bf4748e10122b01435750ff530095b1217cf6546173459448b83913ebe7815df"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-events"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "27c26fb45f7c385ba980f5fa87ac677e363949e065a083722697ef1b2cc91e41"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-file"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97563d71863fb2824b2e974e754a81d19c4a7ec47b09ced8a0e6656b6d54bd1f"
+dependencies = [
+ "futures-channel",
+ "gloo-events",
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-history"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "903f432be5ba34427eac5e16048ef65604a82061fe93789f2212afc73d8617d6"
+dependencies = [
+ "getrandom",
+ "gloo-events",
+ "gloo-utils 0.2.0",
+ "serde",
+ "serde-wasm-bindgen 0.6.3",
+ "serde_urlencoded",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-net"
 version = "0.2.6"
@@ -1171,6 +1262,52 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-net"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "43aaa242d1239a8822c15c645f02166398da4f8b5c4bae795c1f5b44e9eee173"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils 0.2.0",
+ "http",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-render"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56008b6744713a8e8d98ac3dcb7d06543d5662358c9c805b4ce2167ad4649833"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-storage"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fbc8031e8c92758af912f9bc08fbbadd3c6f3cfcbf6b64cdf3d6a81f0139277a"
+dependencies = [
+ "gloo-utils 0.2.0",
+ "js-sys",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-timers"
 version = "0.3.0"
@@ -1209,6 +1346,37 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-worker"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "085f262d7604911c8150162529cefab3782e91adb20202e8658f7275d2aefe5d"
+dependencies = [
+ "bincode",
+ "futures",
+ "gloo-utils 0.2.0",
+ "gloo-worker-macros",
+ "js-sys",
+ "pinned",
+ "serde",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-worker-macros"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "956caa58d4857bc9941749d55e4bd3000032d8212762586fa5705632967140e7"
+dependencies = [
+ "proc-macro-crate",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.46",
+]
+
 [[package]]
 name = "group"
 version = "0.12.1"
@@ -1312,6 +1480,7 @@ dependencies = [
 name = "hot-or-not-web-leptos-ssr"
 version = "0.1.0"
 dependencies = [
+ "async-trait",
  "axum",
  "candid",
  "candid_parser",
@@ -1320,6 +1489,7 @@ dependencies = [
  "console_log",
  "convert_case",
  "futures",
+ "gloo",
  "hex",
  "http",
  "ic-agent",
@@ -1331,6 +1501,7 @@ dependencies = [
  "leptos_meta",
  "leptos_router",
  "log",
+ "once_cell",
  "reqwest",
  "serde",
  "serde-wasm-bindgen 0.6.3",
@@ -1343,6 +1514,7 @@ dependencies = [
  "tower-http",
  "tracing",
  "wasm-bindgen",
+ "web-time",
 ]
 
 [[package]]
@@ -2123,7 +2295,7 @@ checksum = "c1a2ff8b8e8ae8b17efd8be2a407f7f83ed57c5243f70f2d03e6635f9ff61848"
 dependencies = [
  "cached 0.45.1",
  "cfg-if",
- "gloo-net",
+ "gloo-net 0.2.6",
  "itertools 0.11.0",
  "js-sys",
  "lazy_static",
@@ -2610,6 +2782,17 @@ version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
 
+[[package]]
+name = "pinned"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a829027bd95e54cfe13e3e258a1ae7b645960553fb82b75ff852c29688ee595b"
+dependencies = [
+ "futures",
+ "rustversion",
+ "thiserror",
+]
+
 [[package]]
 name = "pkcs8"
 version = "0.10.2"
@@ -2665,6 +2848,16 @@ dependencies = [
  "syn 2.0.46",
 ]
 
+[[package]]
+name = "proc-macro-crate"
+version = "1.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f4c021e1093a56626774e81216a4ce732a735e5bad4868a03f3ed65ca0c3919"
+dependencies = [
+ "once_cell",
+ "toml_edit",
+]
+
 [[package]]
 name = "proc-macro-error"
 version = "1.0.4"
@@ -3305,7 +3498,7 @@ checksum = "cfed18dfcc8d9004579c40482c3419c07f60ffb9c5b250542edca99f508b0ce9"
 dependencies = [
  "ciborium",
  "const_format",
- "gloo-net",
+ "gloo-net 0.2.6",
  "inventory",
  "js-sys",
  "lazy_static",
@@ -3778,6 +3971,23 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "toml_datetime"
+version = "0.6.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3550f4e9685620ac18a50ed434eb3aec30db8ba93b0287467bca5826ea25baf1"
+
+[[package]]
+name = "toml_edit"
+version = "0.19.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b5bb770da30e5cbfde35a2d7b9b8a2c4b8ef89548a7a6aeab5c9a576e3e7421"
+dependencies = [
+ "indexmap",
+ "toml_datetime",
+ "winnow",
+]
+
 [[package]]
 name = "tower"
 version = "0.4.13"
@@ -4113,6 +4323,16 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "web-time"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2ee269d72cc29bf77a2c4bc689cc750fb39f5cbd493d2205bbb3f5c7779cf7b0"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "webpki-roots"
 version = "0.25.3"
@@ -4282,6 +4502,15 @@ version = "0.52.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dff9641d1cd4be8d1a070daf9e3773c5f67e78b4d9d42263020c057706765c04"
 
+[[package]]
+name = "winnow"
+version = "0.5.34"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b7cf47b659b318dccbd69cc4797a39ae128f533dce7902a1096044d1967b9c16"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "winreg"
 version = "0.50.0"
diff --git a/Cargo.toml b/Cargo.toml
index f5102dd4..051e96ed 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -30,11 +30,15 @@ ic-agent = { version = "0.31.0", default-features = false, features = ["pem", "r
 serde-wasm-bindgen = { version = "0.6.3" }
 futures = "0.3.30"
 leptos-use = "0.9.0"
-reqwest = { version = "0.11.23", default-features = false }
+reqwest = { version = "0.11.23", default-features = false, features = ["json"] }
 serde_bytes = "0.11.14"
 hex = "0.4.3"
 leptos_icons = "0.2.1"
 icondata = "0.3.0"
+gloo = { version = "0.11.0", features = ["futures", "net", "net"] }
+once_cell = "1.19.0"
+async-trait = "0.1.77"
+web-time = "1.0.0"
 
 [build-dependencies]
 candid_parser = "0.1.1"
@@ -57,6 +61,9 @@ ssr = [
     "leptos-use/ssr",
     "reqwest/rustls-tls",
 ]
+cloudflare = []
+release-bin = ["ssr", "cloudflare"]
+release-lib = ["hydrate", "cloudflare"]
 
 # Defines a size-optimized profile for the WASM bundle in release mode
 [profile.wasm-release]
diff --git a/src/app.rs b/src/app.rs
index b0121978..8ba08799 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -1,6 +1,9 @@
 use crate::{
     error_template::{AppError, ErrorTemplate},
-    page::{err::ServerErrorPage, post_view::PostView, profile::ProfileView, root::RootPage},
+    page::{
+        err::ServerErrorPage, post_view::PostView, profile::ProfileView, root::RootPage,
+        upload::UploadPostPage,
+    },
     state::canisters::Canisters,
 };
 use leptos::*;
@@ -30,6 +33,7 @@ pub fn App() -> impl IntoView {
                     <Route path="/" view=RootPage/>
                     <Route path="/hot-or-not/:canister_id/:post_id" view=PostView/>
                     <Route path="/profile/:id" view=ProfileView/>
+                    <Route path="/upload" view=UploadPostPage/>
                     <Route path="/error" view=ServerErrorPage/>
                 </Routes>
             </main>
diff --git a/src/component/mod.rs b/src/component/mod.rs
index bac27d7b..fca1591e 100644
--- a/src/component/mod.rs
+++ b/src/component/mod.rs
@@ -1,2 +1,4 @@
 pub mod bullet_loader;
+pub mod modal;
 pub mod spinner;
+pub mod toggle;
diff --git a/src/component/modal.rs b/src/component/modal.rs
new file mode 100644
index 00000000..d7fc4667
--- /dev/null
+++ b/src/component/modal.rs
@@ -0,0 +1,33 @@
+use cfg_if::cfg_if;
+use leptos::*;
+use leptos_icons::*;
+
+#[component]
+pub fn Modal(#[prop(into)] show: RwSignal<bool>, children: Children) -> impl IntoView {
+    view! {
+        <div
+            on:click=move |ev| {
+                cfg_if! {
+                    if #[cfg(feature = "hydrate")] { use web_sys::HtmlElement; let target =
+                    event_target::< HtmlElement > (& ev); if target.class_list()
+                    .contains("modal-bg") { show.set(false); } } else { _ = ev }
+                }
+            }
+
+            class="cursor-pointer modal-bg w-screen h-screen absolute left-0 top-0 bg-black/60 z-50 justify-center items-center"
+            style:display=move || if show() { "flex" } else { "none" }
+        >
+            <div class="w-2/5 h-2/5 cursor-auto flex-col flex justify-around bg-neutral-900 rounded-md divide-y-2 divide-neutral-800">
+                <div class="flex w-full justify-end py-2 px-5">
+                    <button
+                        on:click=move |_| show.set(false)
+                        class="text-white text-center p-1 text-xl bg-orange-600  rounded-full"
+                    >
+                        <Icon icon=icondata::ChCross/>
+                    </button>
+                </div>
+                {children()}
+            </div>
+        </div>
+    }
+}
diff --git a/src/component/toggle.rs b/src/component/toggle.rs
new file mode 100644
index 00000000..584d9bbe
--- /dev/null
+++ b/src/component/toggle.rs
@@ -0,0 +1,21 @@
+use leptos::{html::Input, *};
+
+#[component]
+pub fn Toggle(
+    #[prop(into)] lab: String,
+    #[prop(optional)] node_ref: Option<NodeRef<Input>>,
+) -> impl IntoView {
+    view! {
+        <label class="relative inline-flex items-center cursor-pointer z-0">
+            {move || {
+                if let Some(_ref) = node_ref {
+                    view! { <input _ref=_ref type="checkbox" value="" class="sr-only peer"/> }
+                } else {
+                    view! { <input type="checkbox" value="" class="sr-only peer"/> }
+                }
+            }}
+            <div class="w-11 h-6 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-orange-800 rounded-full peer bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all border-gray-600 peer-checked:bg-orange-600"></div>
+            <span class="ms-3 text-md font-medium text-gray-300">{lab}</span>
+        </label>
+    }
+}
diff --git a/src/consts.rs b/src/consts.rs
index aca9e19f..5a51afef 100644
--- a/src/consts.rs
+++ b/src/consts.rs
@@ -1,2 +1,8 @@
+use once_cell::sync::Lazy;
+use reqwest::Url;
+
 pub const CF_STREAM_BASE: &str = "https://customer-2p3jflss4r4hmpnz.cloudflarestream.com";
 pub const FALLBACK_PROPIC_BASE: &str = "https://api.dicebear.com/7.x/big-smile/svg";
+pub const CF_WATERMARK_UID: &str = "28c721e45583a215d7b2ec1ae16e2679";
+pub static CF_BASE_URL: Lazy<Url> =
+    Lazy::new(|| Url::parse("https://api.cloudflare.com/client/v4/").unwrap());
diff --git a/src/main.rs b/src/main.rs
index 18baf23a..6f6e5fe3 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -23,6 +23,8 @@ mod handlers {
             raw_query,
             move || {
                 provide_context(app_state.canisters.clone());
+                #[cfg(feature = "cloudflare")]
+                provide_context(app_state.cloudflare.clone());
             },
             request,
         )
@@ -38,6 +40,8 @@ mod handlers {
             app_state.routes.clone(),
             move || {
                 provide_context(app_state.canisters.clone());
+                #[cfg(feature = "cloudflare")]
+                provide_context(app_state.cloudflare.clone());
             },
             App,
         );
@@ -45,6 +49,16 @@ mod handlers {
     }
 }
 
+#[cfg(feature = "ssr")]
+#[cfg(feature = "cloudflare")]
+fn init_cf() -> hot_or_not_web_leptos_ssr::state::cf::CfApi<true> {
+    use hot_or_not_web_leptos_ssr::state::cf::{CfApi, CfCredentials};
+    let Some(creds) = CfCredentials::from_env("CF_TOKEN", "CF_ACCOUNT_ID") else {
+        panic!("Cloudlflare credentials are required: CF_TOKEN, CF_ACCOUNT_ID");
+    };
+    CfApi::<true>::new(creds)
+}
+
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
@@ -73,6 +87,8 @@ async fn main() {
         leptos_options,
         canisters: Canisters::default(),
         routes: routes.clone(),
+        #[cfg(feature = "cloudflare")]
+        cloudflare: init_cf(),
     };
 
     // build our application with a route
diff --git a/src/page/mod.rs b/src/page/mod.rs
index de9018e6..e020e9c0 100644
--- a/src/page/mod.rs
+++ b/src/page/mod.rs
@@ -2,3 +2,4 @@ pub mod err;
 pub mod post_view;
 pub mod profile;
 pub mod root;
+pub mod upload;
diff --git a/src/page/post_view/video_loader.rs b/src/page/post_view/video_loader.rs
index d1e27873..3b9b8150 100644
--- a/src/page/post_view/video_loader.rs
+++ b/src/page/post_view/video_loader.rs
@@ -72,7 +72,15 @@ pub fn HlsVideo(video_ref: NodeRef<Video>, allow_show: RwSignal<bool>) -> impl I
         })
     });
 
-    view! { <video _ref=video_ref class="object-contain autoplay h-full" poster=bg_url loop muted></video> }
+    view! {
+        <video
+            _ref=video_ref
+            class="object-contain autoplay h-full"
+            poster=bg_url
+            loop
+            muted
+        ></video>
+    }
 }
 
 #[component]
diff --git a/src/page/upload/cf_upload.rs b/src/page/upload/cf_upload.rs
new file mode 100644
index 00000000..b2a2dfaf
--- /dev/null
+++ b/src/page/upload/cf_upload.rs
@@ -0,0 +1,163 @@
+use candid::Principal;
+use cfg_if::cfg_if;
+use leptos::*;
+use serde::{Deserialize, Serialize};
+
+cfg_if! {
+    if #[cfg(feature = "cloudflare")] {
+        pub use cf_impl::upload_video_stream;
+        #[cfg(feature = "ssr")]
+        use cf_impl::server_func::*;
+    } else {
+        pub use mock_impl::upload_video_stream;
+        #[cfg(feature = "ssr")]
+        use mock_impl::server_func::*;
+    }
+}
+
+#[derive(Serialize, Deserialize)]
+pub struct UploadInfo {
+    pub uid: String,
+    pub upload_url: String,
+}
+
+#[server(GetUploadInfo)]
+pub async fn get_upload_info(
+    creator: Principal,
+    hashtags: Vec<String>,
+    description: String,
+    file_name: String,
+) -> Result<UploadInfo, ServerFnError> {
+    // TODO(SECURITY): authenticate creator
+
+    if description.len() < 10 {
+        return Err(ServerFnError::Args(
+            "Description must be at least 10 characters".into(),
+        ));
+    }
+    if hashtags.len() > 8 {
+        return Err(ServerFnError::Args("Too many hashtags".into()));
+    }
+
+    get_upload_info_impl(creator, hashtags, description, file_name).await
+}
+
+#[server(GetVideoStatus)]
+pub async fn get_video_status(uid: String) -> Result<String, ServerFnError> {
+    get_video_status_impl(uid).await
+}
+
+#[cfg(feature = "cloudflare")]
+mod cf_impl {
+    use cfg_if::cfg_if;
+
+    use super::UploadInfo;
+
+    #[cfg(feature = "ssr")]
+    pub mod server_func {
+        use candid::Principal;
+        use leptos::{expect_context, ServerFnError};
+
+        use super::UploadInfo;
+        use crate::{
+            consts::CF_WATERMARK_UID,
+            state::cf::{
+                direct_upload::DirectUpload, enable_mp4::EnableMp4, video_details::VideoDetails,
+                CfApi, CfReqAuth,
+            },
+        };
+        use std::time::Duration;
+
+        pub async fn get_upload_info_impl(
+            creator: Principal,
+            hashtags: Vec<String>,
+            description: String,
+            file_name: String,
+        ) -> Result<UploadInfo, ServerFnError> {
+            let cf_api: CfApi<true> = expect_context();
+            let res = DirectUpload::default()
+                .creator(creator.to_text())
+                .add_meta("hashtags", hashtags.join(","))
+                .add_meta("description", description)
+                .add_meta("fileName", file_name)
+                .add_meta("uploadType", "challenge")
+                .watermark(CF_WATERMARK_UID)
+                .max_duration(Duration::from_secs(60))
+                .send(&cf_api)
+                .await?;
+
+            Ok(UploadInfo {
+                uid: res.uid,
+                upload_url: res.upload_url,
+            })
+        }
+
+        pub async fn get_video_status_impl(uid: String) -> Result<String, ServerFnError> {
+            let cf_api: CfApi<true> = expect_context();
+            let res = VideoDetails::new(uid.clone()).send(&cf_api).await?;
+            let state = res.status.state.as_str();
+            if state == "ready" {
+                EnableMp4::new(uid).send(&cf_api).await?;
+            }
+
+            Ok(res.status.state)
+        }
+    }
+
+    pub async fn upload_video_stream(
+        _upload_res: &UploadInfo,
+        _file: &gloo::file::File,
+    ) -> Result<(), gloo::net::Error> {
+        cfg_if! {if #[cfg(feature = "hydrate")] {
+            use gloo::net::http::Request;
+            use leptos::web_sys::FormData;
+            let form = FormData::new().unwrap();
+            form.append_with_blob("file", _file.as_ref()).unwrap();
+            let req = Request::post(&_upload_res.upload_url)
+                .body(form)
+                .unwrap();
+            req.send().await?;
+        }}
+        Ok(())
+    }
+}
+
+#[cfg(not(feature = "cloudflare"))]
+mod mock_impl {
+    use super::UploadInfo;
+
+    #[cfg(feature = "ssr")]
+    pub mod server_func {
+        use candid::Principal;
+        use leptos::ServerFnError;
+        use std::time::Duration;
+
+        use super::UploadInfo;
+
+        pub async fn get_upload_info_impl(
+            _creator: Principal,
+            _hashtags: Vec<String>,
+            _description: String,
+            _file_name: String,
+        ) -> Result<UploadInfo, ServerFnError> {
+            Ok(UploadInfo {
+                uid: "mock".into(),
+                upload_url: "http://mock.com".into(),
+            })
+        }
+
+        pub async fn get_video_status_impl(_uid: String) -> Result<String, ServerFnError> {
+            tokio::time::sleep(Duration::from_secs(2)).await;
+            Ok("ready".into())
+        }
+    }
+
+    pub async fn upload_video_stream(
+        _upload_res: &UploadInfo,
+        _file: &gloo::file::File,
+    ) -> Result<(), gloo::net::Error> {
+        use gloo::timers::future::TimeoutFuture;
+        TimeoutFuture::new(1000).await;
+        Ok(())
+    }
+}
diff --git a/src/page/upload/mod.rs b/src/page/upload/mod.rs
new file mode 100644
index 00000000..30e7602c
--- /dev/null
+++ b/src/page/upload/mod.rs
@@ -0,0 +1,145 @@
+mod cf_upload;
+mod validators;
+mod video_upload;
+
+use crate::component::toggle::Toggle;
+
+use leptos::{
+    html::{Input, Textarea},
+    *,
+};
+
+use validators::{description_validator, hashtags_validator};
+use video_upload::{FileWithUrl, PreVideoUpload, VideoUploader};
+
+#[derive(Clone)]
+struct UploadParams {
+    file_blob: FileWithUrl,
+    hashtags: Vec<String>,
+    description: String,
+}
+
+#[component]
+fn PreUploadView(trigger_upload: WriteSignal<Option<UploadParams>>) -> impl IntoView {
+    let description_err = create_rw_signal(String::new());
+    let desc_err_memo = create_memo(move |_| description_err());
+    let hashtags = create_rw_signal(Vec::new());
+    let hashtags_err = create_rw_signal(String::new());
+    let hashtags_err_memo = create_memo(move |_| hashtags_err());
+    let file_blob = create_rw_signal(None::<FileWithUrl>);
+    let invalid_form = create_memo(move |_| {
+        with!(|desc_err_memo, hashtags_err_memo, file_blob| {
+            !desc_err_memo.is_empty() || !hashtags_err_memo.is_empty() || file_blob.is_none()
+        })
+    });
+    let desc = create_node_ref::<Textarea>();
+    let hashtag_inp = create_node_ref::<Input>();
+    let on_submit = move || {
+        let description = desc.get_untracked().unwrap().value();
+        let hashtags = hashtags.get_untracked();
+        let Some(file_blob) = file_blob.get_untracked() else {
+            return;
+        };
+        trigger_upload.set(Some(UploadParams {
+            file_blob,
+            hashtags,
+            description,
+        }));
+    };
+
+    let hashtag_on_input = move |hts| match hashtags_validator(hts) {
+        Ok(hts) => {
+            hashtags.set(hts);
+            hashtags_err.set(String::new());
+        }
+        Err(e) => hashtags_err.set(e),
+    };
+
+    create_effect(move |_| {
+        let Some(hashtag_inp) = hashtag_inp() else {
+            return;
+        };
+
+        let val = hashtag_inp.value();
+        if !val.is_empty() {
+            hashtag_on_input(val);
+        }
+    });
+
+    view! {
+        <PreVideoUpload file_blob=file_blob.write_only()/>
+        <div class="flex flex-col basis-full lg:basis-7/12 gap-4">
+            <div class="flex flex-col gap-y-2">
+                <Show when=move || { with!(| description_err | ! description_err.is_empty()) }>
+                    <span class="text-red-500 text-sm">{desc_err_memo()}</span>
+                </Show>
+                <textarea
+                    _ref=desc
+                    on:input=move |ev| {
+                        let desc = event_target_value(&ev);
+                        description_err.set(description_validator(desc).err().unwrap_or_default());
+                    }
+
+                    class="p-4 bg-neutral-800 rounded-md min-w-full"
+                    rows=3
+                    placeholder="Write your description here.."
+                ></textarea>
+            </div>
+            <div class="flex flex-col gap-y-2">
+                <Show
+                    when=move || { with!(| hashtags_err | ! hashtags_err.is_empty()) }
+                    fallback=|| {
+                        view! { <h3 class="font-semibold text-neutral-600">Add Hashtags</h3> }
+                    }
+                >
+
+                    <h3 class="text-red-500 font-semibold">{hashtags_err_memo()}</h3>
+                </Show>
+                <input
+                    _ref=hashtag_inp
+                    on:input=move |ev| {
+                        let hts = event_target_value(&ev);
+                        hashtag_on_input(hts);
+                    }
+
+                    class="p-4 py-5 bg-neutral-800 rounded-md"
+                    type="text"
+                    placeholder="#hashtag1,#hashtag2,#hashtag3..."
+                />
+            </div>
+            <div class="flex flex-col gap-y-2">
+                <Toggle lab="Participate in Hot or Not"/>
+                <Toggle lab="NSFW"/>
+            </div>
+            <button
+                on:click=move |_| on_submit()
+                disabled=invalid_form
+                class="py-3 w-5/6 md:w-4/6 my-8 self-center disabled:bg-orange-400 disabled:text-white/80 bg-orange-600 rounded-full font-bold text-md md:text-lg lg:text-xl"
+            >
+                Upload Video
+            </button>
+        </div>
+    }
+}
+
+#[component]
+pub fn UploadPostPage() -> impl IntoView {
+    let trigger_upload = create_rw_signal(None::<UploadParams>);
+
+    view! {
+        <div class="flex flex-col h-screen items-center overflow-y-scroll gap-6 md:gap-8 lg:gap-16 w-full py-4 md:py-6 px-3 md:px-6 lg:px-10 bg-black text-white">
+            <h1 class="font-bold text-lg md:text-xl text-center">Upload</h1>
+            <div class="flex flex-row flex-wrap h-full w-full">
+                <Show
+                    when=move || { with!(| trigger_upload | trigger_upload.is_some()) }
+                    fallback=move || {
+                        view! { <PreUploadView trigger_upload=trigger_upload.write_only()/> }
+                    }
+                >
+
+                    <VideoUploader params=trigger_upload.get_untracked().unwrap()/>
+                </Show>
+            </div>
+        </div>
+    }
+}
diff --git a/src/page/upload/validators.rs b/src/page/upload/validators.rs
new file mode 100644
index 00000000..395c4da0
--- /dev/null
+++ b/src/page/upload/validators.rs
@@ -0,0 +1,33 @@
+pub fn description_validator(desc: String) -> Result<(), String> {
+    if desc.is_empty() {
+        return Err("Description is required".into());
+    } else if desc.len() < 10 {
+        return Err("Description must be at least 10 characters".into());
+    }
+
+    Ok(())
+}
+
+pub fn hashtags_validator(hashtags: String) -> Result<Vec<String>, String> {
+    if hashtags.is_empty() {
+        return Err("Hashtags are required".into());
+    }
+
+    let hashtags: Vec<_> = hashtags
+        .split(',')
+        .filter_map(|s| {
+            let ht = s.trim().replace('#', "");
+            if ht.is_empty() {
+                None
+            } else {
+                Some(ht)
+            }
+        })
+        .collect();
+
+    if hashtags.len() > 8 {
+        return Err("Only a maximum of 8 hashtags are allowed".into());
+    }
+
+    Ok(hashtags)
+}
diff --git a/src/page/upload/video_upload.rs b/src/page/upload/video_upload.rs
new file mode 100644
index 00000000..958d6fe9
--- /dev/null
+++ b/src/page/upload/video_upload.rs
@@ -0,0 +1,269 @@
+use super::{
+    cf_upload::{get_upload_info, get_video_status, upload_video_stream},
+    UploadParams,
+};
+use crate::{
+    component::modal::Modal,
+    try_or_redirect,
+    utils::route::{failure_redirect, go_to_root},
+};
+use candid::Principal;
+use cfg_if::cfg_if;
+use futures::StreamExt;
+use gloo::{file::ObjectUrl, timers::future::IntervalStream};
+use leptos::{
+    ev::{change, durationchange},
+    html::{Input, Video},
+    *,
+};
+use leptos_icons::*;
+use leptos_use::use_event_listener;
+use web_time::SystemTime;
+
+#[component]
+pub fn DropBox() -> impl IntoView {
+    view! {
+        <div class="flex flex-col items-center justify-self-center justify-center h-full border-2 border-dashed rounded-lg cursor-pointer border-gray-600 hover:bg-gray-600 aspect-[3/4]">
+            <Icon class="w-10 h-10 mb-4 text-gray-400" icon=icondata::BiCloudUploadRegular/>
+            <p class="mb-2 text-sm text-gray-400">
+                <span class="font-semibold">Click to upload</span>
+                or drag and drop
+            </p>
+            <p class="text-xs text-gray-400">Video File (Max 60s)</p>
+        </div>
+    }
+}
+
+#[derive(Clone)]
+pub struct FileWithUrl {
+    file: gloo::file::File,
+    url: ObjectUrl,
+}
+
+impl FileWithUrl {
+    #[cfg(feature = "hydrate")]
+    fn new(file: gloo::file::File) -> Self {
+        let url = ObjectUrl::from(file.clone());
+        Self { file, url }
+    }
+}
+
+#[component]
+pub fn PreVideoUpload(file_blob: WriteSignal<Option<FileWithUrl>>) -> impl IntoView {
+    let file_ref = create_node_ref::<Input>();
+    let file = create_rw_signal(None::<FileWithUrl>);
+    let video_ref = create_node_ref::<Video>();
+    let modal_show = create_rw_signal(false);
+
+    _ = use_event_listener(file_ref, change, move |_ev| {
+        cfg_if! { if #[cfg(feature = "hydrate")] {
+            use wasm_bindgen::JsCast;
+            use web_sys::HtmlInputElement;
+            _ev.target().and_then(|target| {
+                let input: &HtmlInputElement = target.dyn_ref()?;
+                let inp_file = input.files()?.get(0)?;
+                file.set(Some(FileWithUrl::new(inp_file.into())));
+                Some(())
+            });
+        }}
+    });
+
+    _ = use_event_listener(video_ref, durationchange, move |_| {
+        let duration = video_ref
+            .get_untracked()
+            .map(|v| v.duration())
+            .unwrap_or_default();
+        let Some(vid_file) = file() else {
+            return;
+        };
+        if duration <= 60.0 || duration.is_nan() {
+            modal_show.set(false);
+            file_blob.set(Some(vid_file));
+            return;
+        }
+
+        batch(|| {
+            modal_show.set(true);
+            file.set(None);
+            file_blob.set(None);
+        });
+        if let Some(f) = file_ref.get_untracked() {
+            f.set_value("");
+        }
+    });
+
+    view! {
+        <div class="flex justify-center self-center w-full h-2/5 md:h-1/2 lg:w-auto lg:h-full basis-full lg:basis-5/12">
+            <label
+                for="dropzone-file"
+                class="flex justify-start flex-col h-full cursor-pointer py-2 lg:py-0 lg:px-2"
+            >
+                <Show when=move || { with!(| file | file.is_none()) }>
+                    <DropBox/>
+                </Show>
+                <video
+                    _ref=video_ref
+                    class="object-contain w-full"
+                    muted
+                    autoplay
+                    loop
+                    oncanplay="this.muted=true"
+                    src=move || with!(| file | file.as_ref().map(| f | f.url.to_string()))
+                    style:display=move || {
+                        with!(| file | file.as_ref().map(| _ | "block").unwrap_or("none"))
+                    }
+                >
+                </video>
+                <input
+                    on:click=move |_| modal_show.set(true)
+                    id="dropzone-file"
+                    _ref=file_ref
+                    type="file"
+                    accept="video/*"
+                    class="hidden w-0 h-0"
+                />
+            </label>
+        </div>
+        <Modal show=modal_show>
+            <span class="text-xl text-white h-full text-center flex flex-col justify-center">
+                Please ensure that the video is shorter than 60 seconds
+            </span>
+        </Modal>
+    }
+}
+
+#[component]
+pub fn VideoUploader(params: UploadParams) -> impl IntoView {
+    let file_blob = params.file_blob;
+    let hashtags = params.hashtags;
+    let description = params.description;
+
+    let processed = create_rw_signal(false);
+    let upload_uid = create_rw_signal(None::<String>);
+    let pending = move || with!(|upload_uid| upload_uid.is_none() || !processed());
+    let video_url = file_blob.url;
+    let file_blob = file_blob.file.clone();
+
+    let upload_action = create_resource(
+        || (),
+        move |_| {
+            let hashtags = hashtags.clone();
+            let description = description.clone();
+            let file_blob = file_blob.clone();
+            async move {
+                let time_ms = SystemTime::now()
+                    .duration_since(SystemTime::UNIX_EPOCH)
+                    .unwrap()
+                    .as_millis();
+                let upload_info = try_or_redirect!(
+                    get_upload_info(
+                        Principal::anonymous(),
+                        hashtags,
+                        description,
+                        time_ms.to_string()
+                    )
+                    .await
+                );
+                try_or_redirect!(upload_video_stream(&upload_info, &file_blob).await);
+                upload_uid.set(Some(upload_info.uid));
+            }
+        },
+    );
+
+    let process_action = create_local_resource(upload_uid, move |upload_uid| async move {
+        let upload_uid = upload_uid?;
+        let mut check_status = IntervalStream::new(4000);
+        while (check_status.next().await).is_some() {
+            let status = match get_video_status(upload_uid.clone()).await {
+                Ok(status) => status,
+                Err(e) => {
+                    failure_redirect(e);
+                    return None;
+                }
+            };
+            if status == "ready" {
+                break;
+            }
+        }
+        // TODO: Authenticated canister call
+        processed.set(true);
+        Some(())
+    });
+
+    let processing_spinner = || {
+        view! {
+            <Icon class="w-10 h-10 text-orange-600 animate-spin" icon=icondata::CgSpinnerTwo/>
+            <span class="text-white text-lg font-semibold">Processing</span>
+        }
+    };
+
+    view! {
+        <div class="flex flex-col justify-start self-center w-full h-2/5 md:h-1/2 lg:w-auto lg:h-full basis-full lg:basis-5/12">
+            <video
+                class="object-contain w-full"
+                muted
+                autoplay
+                loop
+                oncanplay="this.muted=true"
+                src=move || video_url.to_string()
+            ></video>
+        </div>
+        <div class="flex flex-col basis-full lg:basis-7/12 gap-4 px-4">
+            <div class="flex flex-row gap-4">
+                <Suspense fallback=|| {
+                    view! {
+                        <Icon
+                            class="w-10 h-10 text-orange-600 animate-spin"
+                            icon=icondata::CgSpinnerTwo
+                        />
+                        <span class="text-white text-lg font-semibold">Uploading</span>
+                    }
+                }>
+                    {move || {
+                        upload_action
+                            .get()
+                            .map(|_| {
+                                view! {
+                                    <Icon
+                                        class="w-10 h-10 text-green-600"
+                                        icon=icondata::BsCheckCircleFill
+                                    />
+                                    <span class="text-white text-lg font-semibold">Uploaded</span>
+                                }
+                            })
+                    }}
+
+                </Suspense>
+            </div>
+            <div class="flex flex-row gap-4">
+                <Suspense fallback=processing_spinner>
+                    <Show when=processed fallback=processing_spinner>
+                        {move || {
+                            process_action
+                                .get()
+                                .map(|_| {
+                                    view! {
+                                        <Icon
+                                            class="w-10 h-10 text-green-600"
+                                            icon=icondata::BsCheckCircleFill
+                                        />
+                                        <span class="text-white text-lg font-semibold">
+                                            Processed
+                                        </span>
+                                    }
+                                })
+                        }}
+
+                    </Show>
+                </Suspense>
+            </div>
+            <button
+                on:click=|_| go_to_root()
+                disabled=pending
+                class="py-3 w-5/6 md:w-4/6 my-8 self-center disabled:bg-orange-400 disabled:text-white/80 bg-green-600 rounded-full font-bold text-md md:text-lg lg:text-xl"
+            >
+                Continue Browsing
+            </button>
+        </div>
+    }
+}
diff --git a/src/state/cf/direct_upload.rs b/src/state/cf/direct_upload.rs
new file mode 100644
index 00000000..7e0e73c6
--- /dev/null
+++ b/src/state/cf/direct_upload.rs
@@ -0,0 +1,61 @@
+use std::{collections::HashMap, time::Duration};
+
+use super::{CfReqAuth, CfReqMeta};
+use http::Method;
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize)]
+struct Watermark {
+    uid: String,
+}
+
+#[derive(Serialize, Default)]
+#[serde(rename_all = "camelCase")]
+pub struct DirectUpload {
+    creator: Option<String>,
+    max_duration_seconds: Option<u64>,
+    meta: HashMap<String, String>,
+    watermark: Option<Watermark>,
+}
+
+#[derive(Serialize, Deserialize)]
+pub struct DirectUploadRes {
+    pub uid: String,
+    #[serde(rename = "uploadURL")]
+    pub upload_url: String,
+}
+
+impl DirectUpload {
+    pub fn creator(mut self, creator: impl Into<String>) -> Self {
+        self.creator = Some(creator.into());
+        self
+    }
+
+    pub fn max_duration(mut self, max_duration: Duration) -> Self {
+        self.max_duration_seconds = Some(max_duration.as_secs());
+        self
+    }
+
+    pub fn add_meta(mut self, key: impl Into<String>, value: impl Into<String>) -> Self {
+        self.meta.insert(key.into(), value.into());
+        self
+    }
+
+    pub fn watermark(mut self, uid: impl Into<String>) -> Self {
+        self.watermark = Some(Watermark { uid: uid.into() });
+        self
+    }
+}
+
+impl CfReqMeta for DirectUpload {
+    const METHOD: Method = Method::POST;
+    type JsonResponse = DirectUploadRes;
+}
+
+impl CfReqAuth for DirectUpload {
+    type Url = String;
+
+    fn path(&self, account_id: &str) -> String {
+        format!("accounts/{account_id}/stream/direct_upload")
+    }
+}
diff --git a/src/state/cf/enable_mp4.rs b/src/state/cf/enable_mp4.rs
new file mode 100644
index 00000000..5f35a135
--- /dev/null
+++ b/src/state/cf/enable_mp4.rs
@@ -0,0 +1,31 @@
+use http::Method;
+use serde::Serialize;
+
+use super::{CfReqAuth, CfReqMeta};
+
+#[derive(Serialize)]
+pub struct EnableMp4 {
+    #[serde(skip)]
+    identifier: String,
+}
+
+impl EnableMp4 {
+    pub fn new(identifier: impl Into<String>) -> Self {
+        Self {
+            identifier: identifier.into(),
+        }
+    }
+}
+
+impl CfReqMeta for EnableMp4 {
+    const METHOD: Method = Method::PUT;
+    type JsonResponse = ();
+}
+
+impl CfReqAuth for EnableMp4 {
+    type Url = String;
+
+    fn path(&self, account_id: &str) -> String {
+        format!("accounts/{account_id}/stream/{}/downloads", self.identifier)
+    }
+}
diff --git a/src/state/cf/error.rs b/src/state/cf/error.rs
new file mode 100644
index 00000000..7e44d4f9
--- /dev/null
+++ b/src/state/cf/error.rs
@@ -0,0 +1,28 @@
+use super::CfApiErr;
+use leptos::ServerFnErrorErr;
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error(transparent)]
+    Reqwest(#[from] reqwest::Error),
+    #[error("errors from cloudflare: {0:?}")]
+    Cloudflare(Vec<CfApiErr>),
+}
+
+impl From<Error> for ServerFnErrorErr {
+    fn from(e: Error) -> Self {
+        ServerFnErrorErr::ServerError(match e {
+            Error::Reqwest(e) => {
+                log::warn!("reqwest error while calling cf: {e}");
+                "Failed to send to cloudflare".into()
+            }
+            Error::Cloudflare(_) => {
+                log::warn!("{e}");
+                "Cloudflare returned an error".into()
+            }
+        })
+    }
+}
+
+pub type Result<T, E = Error> = std::result::Result<T, E>;
diff --git a/src/state/cf/mod.rs b/src/state/cf/mod.rs
new file mode 100644
index 00000000..f24a96e7
--- /dev/null
+++ b/src/state/cf/mod.rs
@@ -0,0 +1,151 @@
+use std::{env, sync::Arc};
+
+use futures::Future;
+use http::Method;
+use reqwest::{IntoUrl, RequestBuilder};
+use serde::{de::DeserializeOwned, Deserialize, Serialize};
+
+use crate::consts::CF_BASE_URL;
+
+pub mod direct_upload;
+pub mod enable_mp4;
+mod error;
+pub mod video_details;
+pub use error::*;
+
+#[derive(Debug)]
+pub struct CfCredentials {
+    token: String,
+    account_id: String,
+}
+
+impl CfCredentials {
+    pub fn from_env(token_env: &str, account_id_env: &str) -> Option<Self> {
+        Some(Self {
+            token: env::var(token_env).ok()?,
+            account_id: env::var(account_id_env).ok()?,
+        })
+    }
+}
+
+#[derive(Clone, Debug)]
+pub struct CfApi<const AUTHENTICATED: bool> {
+    client: reqwest::Client,
+    credentials: Option<Arc<CfCredentials>>,
+}
+
+impl CfApi<true> {
+    pub fn new(creds: CfCredentials) -> Self {
+        Self {
+            client: Default::default(),
+            credentials: Some(Arc::new(creds)),
+        }
+    }
+
+    async fn send_auth<Req: CfReqAuth>(&self, req: Req) -> Result<Req::JsonResponse> {
+        let reqb = self.req_builder(
+            Req::METHOD,
+            CF_BASE_URL
+                .join(
+                    req.path(&self.credentials.as_ref().unwrap().account_id)
+                        .as_ref(),
+                )
+                .unwrap(),
+        );
+        self.send_inner(req, reqb).await
+    }
+}
+
+impl Default for CfApi<false> {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl CfApi<false> {
+    pub fn new() -> Self {
+        Self {
+            client: Default::default(),
+            credentials: None,
+        }
+    }
+}
+
+impl<const AUTH: bool> CfApi<AUTH> {
+    fn req_builder(&self, method: Method, url: impl IntoUrl) -> RequestBuilder {
+        let reqb = self.client.request(method, url);
+        if let Some(creds) = self.credentials.as_ref() {
+            reqb.bearer_auth(&creds.token)
+        } else {
+            reqb
+        }
+    }
+
+    async fn send_inner<Req: CfReqMeta>(
+        &self,
+        req: Req,
+        reqb: RequestBuilder,
+    ) -> Result<Req::JsonResponse> {
+        let reqb = if Req::METHOD == Method::GET {
+            reqb.query(&req)
+        } else {
+            reqb.json(&req)
+        };
+        let resp = reqb.send().await?;
+        let status = resp.status();
+        if status.is_success() {
+            let res: CfSuccessRes<Req::JsonResponse> = resp.json().await?;
+            return Ok(res.result);
+        }
+
+        let err: CfErrRes = resp.json().await?;
+        Err(Error::Cloudflare(err.errors))
+    }
+
+    async fn send<Req: CfReq>(&self, req: Req) -> Result<Req::JsonResponse> {
+        let reqb = self.req_builder(Req::METHOD, CF_BASE_URL.join(Req::PATH).unwrap());
+        self.send_inner(req, reqb).await
+    }
+}
+
+pub trait CfReqMeta: Serialize + Sized + Send {
+    const METHOD: Method;
+    type JsonResponse: DeserializeOwned;
+}
+
+pub trait CfReq: CfReqMeta {
+    const PATH: &'static str;
+
+    fn send<const AUTH: bool>(
+        self,
+        api: &CfApi<AUTH>,
+    ) -> impl Future<Output = Result<Self::JsonResponse>> {
+        api.send(self)
+    }
+}
+
+pub trait CfReqAuth: CfReqMeta {
+    type Url: AsRef<str>;
+
+    fn path(&self, account_id: &str) -> Self::Url;
+
+    fn send(self, api: &CfApi<true>) -> impl Future<Output = Result<Self::JsonResponse>> {
+        api.send_auth(self)
+    }
+}
+
+#[derive(Deserialize, Debug)]
+pub struct CfApiErr {
+    pub code: u16,
+    pub message: String,
+}
+
+#[derive(Deserialize)]
+struct CfSuccessRes<T> {
+    result: T,
+}
+
+#[derive(Deserialize)]
+struct CfErrRes {
+    errors: Vec<CfApiErr>,
+}
diff --git a/src/state/cf/video_details.rs b/src/state/cf/video_details.rs
new file mode 100644
index 00000000..b5001b0e
--- /dev/null
+++ b/src/state/cf/video_details.rs
@@ -0,0 +1,45 @@
+use http::Method;
+use serde::{Deserialize, Serialize};
+
+use super::{CfReqAuth, CfReqMeta};
+
+#[derive(Serialize)]
+pub struct VideoDetails {
+    #[serde(skip)]
+    identifier: String,
+}
+
+#[derive(Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct VideoStatus {
+    pub error_reason_code: Option<String>,
+    pub error_reason_text: Option<String>,
+    pub pct_complete: usize,
+    pub state: String,
+}
+
+#[derive(Serialize, Deserialize)]
+pub struct VideoDetailsRes {
+    pub status: VideoStatus,
+}
+
+impl VideoDetails {
+    pub fn new(identifier: impl Into<String>) -> Self {
+        Self {
+            identifier: identifier.into(),
+        }
+    }
+}
+
+impl CfReqMeta for VideoDetails {
+    const METHOD: Method = Method::GET;
+    type JsonResponse = VideoDetailsRes;
+}
+
+impl CfReqAuth for VideoDetails {
+    type Url = String;
+
+    fn path(&self, account_id: &str) -> String {
+        format!("accounts/{account_id}/stream/{}", self.identifier)
+    }
+}
diff --git a/src/state/mod.rs b/src/state/mod.rs
index 46634027..d8570cdb 100644
--- a/src/state/mod.rs
+++ b/src/state/mod.rs
@@ -1,4 +1,6 @@
 pub mod canisters;
+#[cfg(feature = "cloudflare")]
+pub mod cf;
 
 #[cfg(feature = "ssr")]
 pub mod server {
@@ -11,6 +13,8 @@ pub mod server {
     pub struct AppState {
         pub leptos_options: LeptosOptions,
         pub canisters: Canisters,
+        #[cfg(feature = "cloudflare")]
+        pub cloudflare: super::cf::CfApi<true>,
         pub routes: Vec<RouteListing>,
     }
 }
diff --git a/src/utils/route.rs b/src/utils/route.rs
index eb13a31a..02e56ae8 100644
--- a/src/utils/route.rs
+++ b/src/utils/route.rs
@@ -1,4 +1,4 @@
-use std::error::Error;
+use std::fmt::Display;
 
 use leptos_router::use_navigate;
 
@@ -16,7 +16,7 @@ macro_rules! try_or_redirect {
     };
 }
 
-pub fn failure_redirect<E: Error>(err: E) {
+pub fn failure_redirect<E: Display>(err: E) {
     let nav = use_navigate();
     nav(&format!("/error?err={err}"), Default::default());
 }