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.

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
Show file tree
Hide file tree
Changes from all commits
Commits
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
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
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
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
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
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
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
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
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