AOSSIE-Org / AOSSIE-Org/OpenPeerChat-react-native

[FEATURE]: UI/UX Overhaul & Implementation of Walkie-Talkie (PTT) Mode

Offen
#5 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
enhancement
Vorherrschende Sprache
JavaScript
Sterne
7
Forks
5
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### Feature and its Use Cases

### Is your feature request related to a problem? Please describe.
The current interface of **OpenPeerChat** functions well as a proof-of-concept but lacks the visual polish and intuitive UX expected of modern communication apps.
* **Visuals:** The UI is stark and utilitarian (see attached screenshots below), which may deter new users.
* **Functionality:** Communication is currently limited to text. In peer-to-peer scenarios (festivals, emergencies, hiking), typing is often slower than speaking.

### Describe the solution you'd like
I propose a major **UI/UX Redesign** combined with a new **Walkie-Talkie (Push-to-Talk)** feature. The goal is to shift the app's aesthetic to a "Modern Utility" style (Dark Mode with Neon Accents) and make voice communication the primary or secondary mode of interaction.

### 1. UI/UX Redesign (Visuals)
We should overhaul the following screens to improve hierarchy and feedback:

* **Home Screen:** Replace the empty list with a prominent "Scan/Broadcast" status indicator and a modern logo header.
* **Peer List:** Replace generic "Peer IDs" with friendly aliases/avatars. Use clear signal strength bars (Green/Yellow/Red) instead of raw numbers.
* **Connection Request:** Move from a system alert to a friendly "Slide-up" bottom sheet modal with distinct Accept/Decline buttons.

### 2. Walkie-Talkie Feature (Functionality)
Integrate a **Half-Duplex Voice** feature into the chat interface:
* **Push-to-Talk (PTT) Button:** A large, accessible button in the chat footer (replacing or alongside the 'Send' icon).
* **Interaction:** User holds the button to broadcast audio -> Release to listen.
* **Feedback:** Visual waveform or "On Air" indicator when speaking; "Receiving..." indicator when a peer is talking.

### UI References (Baseline)

Image

### Proposed Tech Stack / Libs
* **Voice:** `react-native-audio-recorder-player` or `react-native-webrtc` (for P2P audio streaming).
* **UI:** `react-native-reanimated` (for PTT button animations) and `lottie-react-native` (for voice waveforms).

### Checklist
- [ ] Design new "Dark/Cyberpunk" theme assets.
- [ ] Implement Push-to-Talk logic (Audio capture & stream).
- [ ] Redesign Peer List items with signal indicators.
- [ ] Replace system alerts with custom Modals/Bottom Sheets.

### Additional Context

_No response_

### Code of Conduct

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.