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 all commits
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
4 changes: 2 additions & 2 deletions .github/workflows/cargo-test.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ jobs:

# Cache Docker layers
- name: Cache Docker layers
uses: actions/cache@v2
uses: actions/cache@v3
with:
path: /tmp/.docker
key: ${{ runner.os }}-docker-${{ github.sha }}
Expand All @@ -28,7 +28,7 @@ jobs:

# Cache Rust build artifacts
- name: Cache Cargo Registry
uses: actions/cache@v2
uses: actions/cache@v3
with:
path: |
~/.cargo/registry
Expand Down
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
30 changes: 30 additions & 0 deletions leptos-website/src/components/sections/Solutions.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,36 @@ pub fn SolutionsSection() -> impl IntoView {
<div class="px-6 max-w-4xl mx-auto relative z-10">
<h2 class="text-8xl !text-8xl font-black tracking-tight mb-16 text-left gradient-text" style="font-size: 3.84rem;">{"Solutions"}</h2>
<div class="grid md:grid-cols-3 gap-8 md:gap-8 lg:gap-12">
<div class="group sharp-card accent-glow p-8 md:p-10 lg:p-12 rounded-xl backdrop-blur-sm" style="margin-bottom: 1em;">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-primary/20"></div>
<h3 class="text-2xl font-semibold mb-6 text-foreground">{"Why WebTransport?"}</h3>
<p class="text-foreground-muted mb-10 text-lg leading-relaxed">{"A modern, simpler alternative to WebRTC that's designed for scalability and performance."}</p>
<ul class="space-y-6 mb-10">
<li class="flex items-center text-foreground-muted">
<span class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-primary/10 mr-3">
<span class="text-primary text-sm">{"✓"}</span>
</span>
{"No STUN/TURN complexity"}
</li>
<li class="flex items-center text-foreground-muted">
<span class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-primary/10 mr-3">
<span class="text-primary text-sm">{"✓"}</span>
</span>
{"HTTP/3 based scaling"}
</li>
<li class="flex items-center text-foreground-muted">
<span class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-primary/10 mr-3">
<span class="text-primary text-sm">{"✓"}</span>
</span>
{"Simpler server infrastructure"}
</li>
</ul>
<SecondaryButton
title="Learn More"
href=Some("https://github.com/security-union/videocall-rs".to_string())
class="mt-4"
/>
</div>
<div class="group sharp-card accent-glow p-8 md:p-10 lg:p-12 rounded-xl backdrop-blur-sm" style="margin-bottom: 1em;">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-secondary to-secondary/20"></div>
<h3 class="text-2xl font-semibold mb-6 text-foreground">{"Developers"}</h3>
Expand Down
1 change: 0 additions & 1 deletion leptos-website/src/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* Global styles for the website, inspired by LiveKit */

/* Base styles */
html {
Expand Down
8 changes: 6 additions & 2 deletions 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>
<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>
143 changes: 122 additions & 21 deletions yew-ui/src/components/attendants.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ impl Component for AttendantsComponent {
);

html! {
<div id="main-container">
<div id="main-container" class="meeting-page">
<div id="grid-container" style={if self.peer_list_open {"width: 80%;"} else {"width: 100%;"}}>
{ self.error.as_ref().map(|error| html! { <p>{ error }</p> }) }
{ rows }
Expand All @@ -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
Loading