Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign yew-ui #196

Merged
merged 11 commits into from
Mar 4, 2025
Merged

Redesign yew-ui #196

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
013a939
added new buttons :)
darioalessandro Mar 4, 2025
55a090c
good progress
darioalessandro Mar 4, 2025
18ca1ad
save
darioalessandro Mar 4, 2025
904694a
save
darioalessandro Mar 4, 2025
b7d45f2
save
darioalessandro Mar 4, 2025
3751957
save
darioalessandro Mar 4, 2025
8a39486
save
darioalessandro Mar 4, 2025
8abb802
save
darioalessandro Mar 4, 2025
8c7a955
save
darioalessandro Mar 4, 2025
d6b263a
update actions
darioalessandro Mar 4, 2025
9a63b75
fmt
darioalessandro Mar 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
added new buttons :)
  • Loading branch information
@darioalessandro
darioalessandro committed Mar 4, 2025
commit 013a9394b43aee3508e174fa54b3c2642e6fcaae
8 changes: 6 additions & 2 deletions docker/Dockerfile.tailwind
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
FROM node:18-alpine as tailwind
FROM node:18-alpine

RUN npm install -g tailwindcss

ENTRYPOINT [ "tailwindcss" ]
# Create a wrapper script
RUN echo '#!/bin/sh\ntailwindcss "$@"' > /usr/local/bin/tailwind-run.sh && \
chmod +x /usr/local/bin/tailwind-run.sh

ENTRYPOINT ["/usr/local/bin/tailwind-run.sh"]
2 changes: 1 addition & 1 deletion docker/Dockerfile.website.dev
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
FROM rust:1.80-slim-bookworm as builder
FROM rust:1.80-slim-bookworm

RUN rustup default nightly-2024-08-21
RUN rustup target add wasm32-unknown-unknown
Expand Down
17 changes: 16 additions & 1 deletion docker/docker-compose.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,21 @@ services:
- CARGO_NET_OFFLINE=false
ports:
- "${TRUNK_SERVE_PORT:-80}:${TRUNK_SERVE_PORT:-80}"
depends_on:
- tailwind-yew

tailwind-yew:
build:
dockerfile: ../docker/Dockerfile.tailwind
context: ../docker
volumes:
- type: bind
source: ../
target: /app
working_dir: /app/yew-ui
entrypoint: ["/bin/sh", "-c"]
command: "tailwindcss -i ./static/leptos-style.css -o ./static/tailwind.css --watch --minify"

website:
volumes:
- type: bind
Expand All @@ -43,7 +57,7 @@ services:
dockerfile: ../docker/Dockerfile.website.dev
context: ../docker
working_dir: /app/leptos-website
command: bash -c "trunk serve --address 0.0.0.0 --port ${TRUNK_SERVE_PORT:-80}"
command: bash -c "cargo leptos watch"
environment:
- LEPTOS_SITE_ADDR="0.0.0.0:91"
- CARGO_TARGET_DIR=/app/leptos-website/target
Expand Down Expand Up @@ -130,6 +144,7 @@ services:
ports:
- 5432


volumes:
rustlemania-actix-web-cargo-registry-cache:
rustlemania-actix-web-cargo-git-cache:
Expand Down
6 changes: 5 additions & 1 deletion yew-ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<!DOCTYPE html>
<html>
<html class="dark">
<head>
<meta charset="utf-8" />
<title>VideoCall.rs</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link data-trunk rel="copy-dir" href="./assets" />
<link data-trunk rel="css" href="./static/leptos-style.css" />
<link data-trunk rel="css" href="./static/tailwind.css" />
<link data-trunk rel="css" href="./static/style.css" />
<link data-trunk rel="css" href="./static/global.css">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
Expand All @@ -24,4 +26,6 @@
</script>
<!-- End Matomo Code -->
</head>
<body class="bg-background text-foreground">
</body>
</html>
142 changes: 122 additions & 20 deletions yew-ui/src/components/attendants.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,26 +244,127 @@ impl Component for AttendantsComponent {
html! {
<nav class="host">
<div class="controls">
<button
class="bg-yew-blue p-2 rounded-md text-white"
onclick={ctx.link().callback(|_| MeetingAction::ToggleScreenShare)}>
{ if self.share_screen { "Stop Screen Share"} else { "Share Screen"} }
</button>
<button
class="bg-yew-blue p-2 rounded-md text-white"
onclick={ctx.link().callback(|_| MeetingAction::ToggleVideoOnOff)}>
{ if !self.video_enabled { "Start Video"} else { "Stop Video"} }
</button>
<button
class="bg-yew-blue p-2 rounded-md text-white"
onclick={ctx.link().callback(|_| MeetingAction::ToggleMicMute)}>
{ if !self.mic_enabled { "Unmute"} else { "Mute"} }
</button>
<button
class="bg-yew-blue p-2 rounded-md text-white"
onclick={toggle_peer_list.clone()}>
{ if !self.peer_list_open { "Open Peers"} else { "Close Peers"} }
</button>
<nav class="video-controls-container">
<button
class={classes!("video-control-button", self.mic_enabled.then_some("active"))}
onclick={ctx.link().callback(|_| MeetingAction::ToggleMicMute)}>
{
if self.mic_enabled {
html! {
<>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path>
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
<line x1="12" y1="19" x2="12" y2="22"></line>
</svg>
<span class="tooltip">{ "Mute" }</span>
</>
}
} else {
html! {
<>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="1" y1="1" x2="23" y2="23"></line>
<path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V5a3 3 0 0 0-5.94-.6"></path>
<path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
<line x1="12" y1="19" x2="12" y2="22"></line>
</svg>
<span class="tooltip">{ "Unmute" }</span>
</>
}
}
}
</button>
<button
class={classes!("video-control-button", self.video_enabled.then_some("active"))}
onclick={ctx.link().callback(|_| MeetingAction::ToggleVideoOnOff)}>
{
if self.video_enabled {
html! {
<>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="23 7 16 12 23 17 23 7"></polygon>
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
</svg>
<span class="tooltip">{ "Stop Video" }</span>
</>
}
} else {
html! {
<>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10"></path>
<line x1="1" y1="1" x2="23" y2="23"></line>
</svg>
<span class="tooltip">{ "Start Video" }</span>
</>
}
}
}
</button>
<button
class={classes!("video-control-button", self.share_screen.then_some("active"))}
onclick={ctx.link().callback(|_| MeetingAction::ToggleScreenShare)}>
{
if self.share_screen {
html! {
<>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
<span class="tooltip">{ "Stop Screen Share" }</span>
</>
}
} else {
html! {
<>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3"></path>
<polyline points="8 21 12 17 16 21"></polyline>
<polyline points="16 7 20 7 20 3"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
</svg>
<span class="tooltip">{ "Share Screen" }</span>
</>
}
}
}
</button>
<button
class={classes!("video-control-button", self.peer_list_open.then_some("active"))}
onclick={toggle_peer_list.clone()}>
{
if self.peer_list_open {
html! {
<>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
<line x1="1" y1="1" x2="23" y2="23"></line>
</svg>
<span class="tooltip">{ "Close Peers" }</span>
</>
}
} else {
html! {
<>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
<span class="tooltip">{ "Open Peers" }</span>
</>
}
}
}
</button>
</nav>
</div>
{
if media_access_granted {
Expand Down Expand Up @@ -301,3 +402,4 @@ impl Component for AttendantsComponent {
}
}
}

Loading