Skip to content

feat: add URL param to sync animation to ringtone #64

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

Open
WofWca wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: add URL param to sync animation to ringtone #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
da12876
feat: add URL param to sync animation to ringtone
WofWca Oct 11, 2025
329928d
fix: "Answer" button animation on old browsers
WofWca Jan 29, 2026
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
16 changes: 15 additions & 1 deletion src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ body {
height: 100%;
font-family: system-ui;
}
:root {
--ring-animation-period: 0.8;
/* Default value, can be overridden in JS. */
--ringtone-bpm: calc(60 / var(--ring-animation-period));
}
Comment on lines +10 to +14
Copy link
Member

@adbenitez adbenitez Oct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure variables are supported in default webview in Android 5 🤔 this needs to be tested in old devices

Copy link
Member Author

@WofWca WofWca Oct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Has the app been tested on old devices at all? Because RTCPeerConnection has been introduced only in 2017 without a webkit wendor prefix. For CSS variables, it's 2016.

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection

https://developer.mozilla.org/en-US/docs/Web/CSS/--*

Copy link
Member Author

@WofWca WofWca Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have pushed a fallback in case the browser doesn't support animations, taking the approach from this question: https://stackoverflow.com/questions/66770777/does-css-var-fallback-work-in-unsupported-browsers


@keyframes pulse-green {
0% {
Expand Down Expand Up @@ -58,10 +63,19 @@ body {
}
}
.acceptCallButton {
/* Fallback in case the browser doesn't support CSS variables. */
animation: infinite 1.6s pulse-green;

--base-animation-period: calc(60s / var(--ringtone-bpm));
animation: infinite calc(2 * var(--base-animation-period)) pulse-green;
}
.acceptCallButton > * {
/* Fallback in case the browser doesn't support CSS variables. */
animation: infinite linear 0.8s ringing;

/* Apply this one to the another element,
so that the `transform`s from the two animations don't override each other. */
animation: infinite linear 0.8s ringing;
/* Let's not make this depend on `--ringtone-bpm` because it looks ugly
when it's too fast or too slow. */
animation: infinite linear calc(var(--ring-animation-period) * 1s) ringing;
}
6 changes: 6 additions & 0 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ import MaterialSymbolsMicOff from "~icons/material-symbols/mic-off";

import "./App.css";

const search = new URLSearchParams(location.search);
const ringtoneBpm = search.get("ringtoneBpm");
if (ringtoneBpm) {
document.documentElement.style.setProperty("--ringtone-bpm", ringtoneBpm);
}

export default function App() {
const [state, setState] = useState<CallState>(CallsManager.initialState);
const outVidRef = useRef<HTMLVideoElement | null>(null);
Expand Down