adam/leptos-use
1
0
Fork 0
mirror of https://github.com/adoyle0/leptos-use.git synced 2025-03-13 09:09:48 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

add use_display_media

Browse source
This commit is contained in:
Sean Aye 2023-11-24 15:06:35 -05:00
parent ded2663564
commit cd0be5ac62
11 changed files with 98 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.idea/leptos-use.iml generated
View file

@ -12,6 +12,7 @@
<sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" /> <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_throttle_fn/src" isTestSource="false" /> <sourceFolder url="file://$MODULE_DIR$/examples/use_throttle_fn/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_debounce_fn/src" isTestSource="false" /> <sourceFolder url="file://$MODULE_DIR$/examples/use_debounce_fn/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_display_media/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_scroll/src" isTestSource="false" /> <sourceFolder url="file://$MODULE_DIR$/examples/use_scroll/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_resize_observer/src" isTestSource="false" /> <sourceFolder url="file://$MODULE_DIR$/examples/use_resize_observer/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_mouse/src" isTestSource="false" /> <sourceFolder url="file://$MODULE_DIR$/examples/use_mouse/src" isTestSource="false" />
@ -67,7 +68,9 @@
<excludeFolder url="file://$MODULE_DIR$/examples/use_throttle_fn/dist" /> <excludeFolder url="file://$MODULE_DIR$/examples/use_throttle_fn/dist" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_throttle_fn/target" /> <excludeFolder url="file://$MODULE_DIR$/examples/use_throttle_fn/target" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_debounce_fn/dist" /> <excludeFolder url="file://$MODULE_DIR$/examples/use_debounce_fn/dist" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_display_media/dist" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_debounce_fn/target" /> <excludeFolder url="file://$MODULE_DIR$/examples/use_debounce_fn/target" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_display_media/target" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_scroll/target" /> <excludeFolder url="file://$MODULE_DIR$/examples/use_scroll/target" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_resize_observer/target" /> <excludeFolder url="file://$MODULE_DIR$/examples/use_resize_observer/target" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_mouse/target" /> <excludeFolder url="file://$MODULE_DIR$/examples/use_mouse/target" />

4
Cargo.toml
View file

@ -18,6 +18,7 @@ cfg-if = "1"
default-struct-builder = "0.5" default-struct-builder = "0.5"
futures-util = "0.3" futures-util = "0.3"
gloo-timers = { version = "0.3.0", features = ["futures"] } gloo-timers = { version = "0.3.0", features = ["futures"] }
gloo-utils = { version = "0.2.0"}
js-sys = "0.3" js-sys = "0.3"
lazy_static = "1" lazy_static = "1"
leptos = "0.5" leptos = "0.5"
@ -40,6 +41,7 @@ features = [
"CssStyleDeclaration", "CssStyleDeclaration",
"CustomEvent", "CustomEvent",
"CustomEventInit", "CustomEventInit",
"DisplayMediaStreamConstraints",
"DomRect", "DomRect",
"DomRectReadOnly", "DomRectReadOnly",
"DataTransfer", "DataTransfer",
@ -57,7 +59,9 @@ features = [
"IntersectionObserver", "IntersectionObserver",
"IntersectionObserverInit", "IntersectionObserverInit",
"IntersectionObserverEntry", "IntersectionObserverEntry",
"MediaDevices",
"MediaQueryList", "MediaQueryList",
"MediaStream",
"MouseEvent", "MouseEvent",
"MutationObserver", "MutationObserver",
"MutationObserverInit", "MutationObserverInit",

3
docs/book/src/browser/use_display_media.md Normal file
View file

@ -0,0 +1,3 @@
# use_display_media
<!-- cmdrun python3 ../extract_doc_comment.py use_display_media -->

1
examples/Cargo.toml
View file

@ -13,6 +13,7 @@ members = [
"use_css_var", "use_css_var",
"use_cycle_list", "use_cycle_list",
"use_debounce_fn", "use_debounce_fn",
"use_display_media",
"use_document_visibility", "use_document_visibility",
"use_draggable", "use_draggable",
"use_drop_zone", "use_drop_zone",

16
examples/use_display_media/Cargo.toml Normal file
View file

@ -0,0 +1,16 @@
[package]
name = "use_display_media"
version = "0.1.0"
edition = "2021"
[dependencies]
leptos = { version = "0.5", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
leptos-use = { path = "../..", features = ["docs"] }
web-sys = "0.3"
[dev-dependencies]
wasm-bindgen = "0.2"
wasm-bindgen-test = "0.3.0"

2
examples/use_display_media/Trunk.toml Normal file
View file

@ -0,0 +1,2 @@
[build]
public_url = "/demo/"

5
examples/use_display_media/index.html Normal file
View file

@ -0,0 +1,5 @@
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

2
examples/use_display_media/rust-toolchain.toml Normal file
View file

@ -0,0 +1,2 @@
[toolchain]
channel = "nightly"

30
examples/use_display_media/src/main.rs Normal file
View file

@ -0,0 +1,30 @@
use leptos::*;
use leptos_use::docs::{demo_or_body, Note};
use leptos_use::use_display_media;
#[component]
fn Demo() -> impl IntoView {
let stream = use_display_media(None);
let video_ref = create_node_ref::<leptos::html::Video>();
create_effect(move |_| match stream.get() {
Some(Ok(s)) => {
video_ref.get().expect("video element ref not created").set_src_object(Some(&s));
video_ref.get().map(|v| v.play());
}
Some(Err(e)) => log::error!("Failed to get media stream: {:?}", e),
None => log::debug!("No stream yet"),
});
view! { <video _ref=video_ref controls=true autoplay=true muted=true></video> }
}
fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), || {
view! { <Demo/> }
})
}

2
src/lib.rs
View file

@ -22,6 +22,7 @@ mod use_color_mode;
mod use_css_var; mod use_css_var;
mod use_cycle_list; mod use_cycle_list;
mod use_debounce_fn; mod use_debounce_fn;
mod use_display_media;
mod use_document; mod use_document;
mod use_document_visibility; mod use_document_visibility;
mod use_draggable; mod use_draggable;
@ -76,6 +77,7 @@ pub use use_color_mode::*;
pub use use_css_var::*; pub use use_css_var::*;
pub use use_cycle_list::*; pub use use_cycle_list::*;
pub use use_debounce_fn::*; pub use use_debounce_fn::*;
pub use use_display_media::*;
pub use use_document::*; pub use use_document::*;
pub use use_document_visibility::*; pub use use_document_visibility::*;
pub use use_draggable::*; pub use use_draggable::*;

29
src/use_display_media.rs Normal file
View file

@ -0,0 +1,29 @@
use leptos::*;
use wasm_bindgen::{JsValue, JsCast};
use web_sys::{DisplayMediaStreamConstraints, MediaStream};
use crate::use_window::use_window;
async fn create_media(opts: Option<DisplayMediaStreamConstraints>) -> Result<MediaStream, JsValue> {
let media = use_window()
.navigator()
.ok_or_else(|| JsValue::from_str("Failed to access window.navigator"))
.and_then(|n| n.media_devices())?;
let promise = match opts {
Some(o) => media.get_display_media_with_constraints(&o),
None => media.get_display_media(),
}?;
let res = wasm_bindgen_futures::JsFuture::from(promise).await?;
Ok::<_, JsValue>(MediaStream::unchecked_from_js(res))
}
type UseDisplayReturn = Resource<Option<DisplayMediaStreamConstraints>, Result<MediaStream, JsValue>>;
pub fn use_display_media<S>(options: S) -> UseDisplayReturn
where
S: Into<MaybeSignal<Option<DisplayMediaStreamConstraints>>>,
{
let opts: MaybeSignal<Option<DisplayMediaStreamConstraints>> = options.into();
create_local_resource(move || opts.with(|o| o.as_ref().cloned()), create_media)
}