416 lines
17 KiB
HTML
416 lines
17 KiB
HTML
<main class="chat-shell py-4">
|
||
<div class="container-lg">
|
||
<section class="chat-page panel p-3 p-lg-4">
|
||
<app-peer-video-modal
|
||
[visible]="remoteVideoModalVisible()"
|
||
[stream]="remoteVideoStream()"
|
||
[title]="(peer()?.displayName ?? 'Peer') + ' webcam'"
|
||
(closeRequested)="closeRemoteVideoModal()"
|
||
></app-peer-video-modal>
|
||
<audio #callAudioElement hidden autoplay playsinline></audio>
|
||
|
||
@if (incomingVoiceCallPeer(); as callingPeer) {
|
||
<div class="call-modal-backdrop">
|
||
<section class="panel p-4" style="width:min(100%,24rem)" (click)="$event.stopPropagation()">
|
||
<div class="mb-3">
|
||
<div>
|
||
<h2 class="h5 mb-1">Incoming voice call</h2>
|
||
<p class="small mb-0">{{ callingPeer.displayName }} is calling you.</p>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex flex-wrap gap-2 justify-content-end">
|
||
<button
|
||
class="btn btn-success"
|
||
type="button"
|
||
(click)="acceptIncomingVoiceCall(callingPeer.id)"
|
||
>
|
||
Accept
|
||
</button>
|
||
<button
|
||
class="btn btn-outline-secondary"
|
||
type="button"
|
||
(click)="rejectIncomingVoiceCall(callingPeer.id)"
|
||
>
|
||
Reject
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
}
|
||
|
||
<div class="chat-header d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center gap-3 mb-4">
|
||
<div>
|
||
<a class="back-link" routerLink="/">← Back to dashboard</a>
|
||
@if (currentUser(); as connectedUser) {
|
||
<h1 class="h3 mb-1 mt-2">{{ connectedUser.displayName }}</h1>
|
||
<div class="status-indicators mt-2">
|
||
<div class="status-indicator">
|
||
<span class="status-led" [class.status-led-ok]="indicatorTone(session.signalingState()) === 'ok'" [class.status-led-connecting]="indicatorTone(session.signalingState()) === 'connecting'" [class.status-led-offline]="indicatorTone(session.signalingState()) === 'offline'"></span>
|
||
<span>Signaling</span>
|
||
</div>
|
||
<button
|
||
class="status-indicator status-indicator-action"
|
||
type="button"
|
||
[disabled]="!canReconnectWebRtc()"
|
||
[attr.aria-label]="canReconnectWebRtc() ? 'Open WebRTC channel' : 'WebRTC channel status'"
|
||
[title]="canReconnectWebRtc() ? 'Open WebRTC channel' : 'WebRTC channel status'"
|
||
(click)="ensureConnection()"
|
||
>
|
||
<span class="status-led" [class.status-led-ok]="indicatorTone(webRtcState()) === 'ok'" [class.status-led-connecting]="indicatorTone(webRtcState()) === 'connecting'" [class.status-led-offline]="indicatorTone(webRtcState()) === 'offline'"></span>
|
||
<span>WebRTC</span>
|
||
</button>
|
||
</div>
|
||
} @else {
|
||
<h1 class="h3 mb-1 mt-2">Not signed in</h1>
|
||
<p class="small text-secondary mb-0">Return to the dashboard and sign in again.</p>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chat-layout">
|
||
<aside class="peer-sidebar">
|
||
|
||
|
||
<div class="peer-list">
|
||
@if (session.peers().length === 0) {
|
||
<div class="empty-chat empty-peers">
|
||
No peers are currently connected.
|
||
</div>
|
||
}
|
||
|
||
@for (connectedPeer of session.peers(); track connectedPeer.id) {
|
||
<article
|
||
class="peer-tile"
|
||
[class.peer-tile-active]="connectedPeer.id === peerId()"
|
||
[class.peer-tile-unread]="isPeerUnread(connectedPeer.id)"
|
||
>
|
||
<button
|
||
class="peer-tile-main text-start"
|
||
type="button"
|
||
(click)="switchPeer(connectedPeer.id)"
|
||
>
|
||
<div class="peer-tile-row">
|
||
<span class="peer-tile-title">
|
||
<span class="fw-semibold">{{ connectedPeer.displayName }}</span>
|
||
@if (isPeerTyping(connectedPeer.id)) {
|
||
<span class="peer-typing-dots" aria-label="Typing">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</span>
|
||
}
|
||
</span>
|
||
<span
|
||
class="status-led peer-tile-status"
|
||
[class.status-led-ok]="connectedPeer.channelState === 'open' || connectedPeer.connectionState === 'connected'"
|
||
[class.status-led-offline]="connectedPeer.channelState !== 'open' && connectedPeer.connectionState !== 'connected'"
|
||
[attr.aria-label]="
|
||
connectedPeer.channelState === 'open' || connectedPeer.connectionState === 'connected'
|
||
? 'Connected'
|
||
: 'Disconnected'
|
||
"
|
||
></span>
|
||
</div>
|
||
</button>
|
||
<button
|
||
class="peer-tile-delete"
|
||
type="button"
|
||
title="Delete conversation"
|
||
aria-label="Delete conversation"
|
||
(click)="deleteConversation(connectedPeer.id, $event)"
|
||
>
|
||
🗑️
|
||
</button>
|
||
</article>
|
||
}
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="chat-main">
|
||
<div class="conversation">
|
||
@if (conversation().length === 0) {
|
||
<div class="empty-chat">
|
||
No text messages yet. The chat page is ready as soon as the peer channel opens.
|
||
</div>
|
||
}
|
||
|
||
@for (entry of conversation(); track entry.id) {
|
||
<article
|
||
class="bubble"
|
||
[class.bubble-incoming]="entry.direction === 'incoming'"
|
||
[class.bubble-outgoing]="entry.direction === 'outgoing'"
|
||
[class.bubble-system]="entry.direction === 'system'"
|
||
>
|
||
@if (entry.direction !== 'system') {
|
||
<div class="bubble-actions">
|
||
<button
|
||
class="bubble-action"
|
||
type="button"
|
||
(click)="toggleForwardMenu(entry, $event)"
|
||
title="Forward message"
|
||
aria-label="Forward message"
|
||
>
|
||
⏩
|
||
</button>
|
||
<button
|
||
class="bubble-action bubble-delete"
|
||
type="button"
|
||
(click)="deleteMessage(entry)"
|
||
title="Delete message"
|
||
aria-label="Delete message"
|
||
>
|
||
×
|
||
</button>
|
||
@if (isForwardMenuOpen(entry.id)) {
|
||
<div class="bubble-forward-menu">
|
||
<select #forwardSelect class="bubble-forward-select" (change)="forwardEntry(entry, forwardSelect.value, forwardSelect)">
|
||
<option value="">Forward to…</option>
|
||
@for (targetPeer of forwardTargets(entry); track targetPeer.id) {
|
||
<option [value]="targetPeer.id">{{ targetPeer.displayName }}</option>
|
||
}
|
||
</select>
|
||
</div>
|
||
}
|
||
</div>
|
||
}
|
||
<div class="bubble-meta">
|
||
<span class="bubble-author">{{ entry.authorLabel }}</span>
|
||
<time class="bubble-time">{{ entry.createdAt | date: 'shortTime' }}</time>
|
||
</div>
|
||
|
||
@switch (entry.kind) {
|
||
@case ('text') {
|
||
<p class="mb-0">{{ entry.text }}</p>
|
||
}
|
||
@case ('json') {
|
||
<pre class="bubble-json mb-0">{{ entry.payload | json }}</pre>
|
||
}
|
||
@case ('file') {
|
||
<div class="d-grid gap-3">
|
||
@if (isImageEntry(entry)) {
|
||
<img
|
||
class="bubble-image"
|
||
[src]="entry.downloadUrl"
|
||
[alt]="entry.fileName || 'Shared image'"
|
||
/>
|
||
}
|
||
|
||
@if (isVideoEntry(entry)) {
|
||
<video
|
||
class="bubble-video"
|
||
[src]="entry.downloadUrl"
|
||
controls
|
||
autoplay
|
||
muted
|
||
playsinline
|
||
preload="metadata"
|
||
></video>
|
||
}
|
||
|
||
@if (isIncomingJsonFileEntry(entry)) {
|
||
<app-json-file-viewer [entry]="entry"></app-json-file-viewer>
|
||
}
|
||
|
||
<div>
|
||
<div class="fw-semibold">{{ entry.fileName }}</div>
|
||
@if (entry.fileSize) {
|
||
<div class="small text-secondary-emphasis">{{ entry.fileSize | number }} bytes</div>
|
||
}
|
||
</div>
|
||
|
||
@if (entry.downloadUrl) {
|
||
<a class="bubble-download" [href]="entry.downloadUrl" [download]="entry.fileName">Download</a>
|
||
}
|
||
</div>
|
||
}
|
||
@case ('voice') {
|
||
<div class="voice-bubble">
|
||
<div class="voice-bubble-label">Voice message</div>
|
||
@if (entry.downloadUrl) {
|
||
<audio
|
||
class="voice-player"
|
||
[src]="entry.downloadUrl"
|
||
controls
|
||
preload="metadata"
|
||
></audio>
|
||
}
|
||
</div>
|
||
}
|
||
@default {
|
||
@if (entry.showSpinner) {
|
||
<div class="bubble-system-status">
|
||
<span class="bubble-spinner" aria-hidden="true"></span>
|
||
<p class="mb-0">{{ entry.text }}</p>
|
||
</div>
|
||
} @else {
|
||
<p class="mb-0">{{ entry.text }}</p>
|
||
}
|
||
}
|
||
}
|
||
</article>
|
||
}
|
||
</div>
|
||
|
||
<div class="composer">
|
||
<textarea
|
||
#composerTextarea
|
||
class="form-control composer-textarea"
|
||
rows="3"
|
||
[(ngModel)]="messageText"
|
||
(ngModelChange)="handleMessageTextChange($event)"
|
||
(keydown.enter)="handleComposerEnter($event)"
|
||
(click)="trackComposerSelection(composerTextarea)"
|
||
(keyup)="trackComposerSelection(composerTextarea)"
|
||
(select)="trackComposerSelection(composerTextarea)"
|
||
[disabled]="!session.isSelectedPeerReady()"
|
||
placeholder="Write a text message to your peer"
|
||
></textarea>
|
||
|
||
<div class="composer-toolbar">
|
||
@if (peer(); as selectedPeer) {
|
||
<button
|
||
class="composer-call"
|
||
type="button"
|
||
[disabled]="!canStartSelectedVoiceCall()"
|
||
(click)="startVoiceCall(selectedPeer.id)"
|
||
title="Start voice call"
|
||
aria-label="Start voice call"
|
||
>
|
||
📞
|
||
</button>
|
||
|
||
@if (canEndSelectedVoiceCall()) {
|
||
<button
|
||
class="composer-hangup"
|
||
type="button"
|
||
(click)="endVoiceCall(selectedPeer.id)"
|
||
title="End voice call"
|
||
aria-label="End voice call"
|
||
>
|
||
🛑
|
||
</button>
|
||
}
|
||
|
||
<button
|
||
class="composer-camera"
|
||
type="button"
|
||
[disabled]="selectedPeer.channelState !== 'open' && !isStreamingCameraToSelectedPeer()"
|
||
(click)="toggleCameraStream(selectedPeer.id)"
|
||
[title]="isStreamingCameraToSelectedPeer() ? 'Stop webcam' : 'Start webcam'"
|
||
[attr.aria-label]="isStreamingCameraToSelectedPeer() ? 'Stop webcam' : 'Start webcam'"
|
||
>
|
||
{{ isStreamingCameraToSelectedPeer() ? '🛑' : '📹' }}
|
||
</button>
|
||
|
||
<button
|
||
class="composer-voice"
|
||
type="button"
|
||
[disabled]="selectedPeer.channelState !== 'open' && !isRecordingVoice()"
|
||
(click)="toggleVoiceRecording()"
|
||
[title]="isRecordingVoice() ? 'Stop and send voice message' : 'Record voice message'"
|
||
[attr.aria-label]="isRecordingVoice() ? 'Stop and send voice message' : 'Record voice message'"
|
||
[class.composer-voice-recording]="isRecordingVoice()"
|
||
>
|
||
{{ isRecordingVoice() ? '⏹️' : '🎙️' }}
|
||
</button>
|
||
|
||
<button
|
||
class="composer-dictation"
|
||
type="button"
|
||
[disabled]="!session.isSelectedPeerReady() || session.signalingState() !== 'connected' || isTranscribingDictation()"
|
||
(click)="toggleDictation(composerTextarea)"
|
||
[title]="
|
||
isDictating()
|
||
? 'Stop dictation and transcribe'
|
||
: isTranscribingDictation()
|
||
? 'Transcribing dictated audio'
|
||
: 'Start dictation'
|
||
"
|
||
[attr.aria-label]="
|
||
isDictating()
|
||
? 'Stop dictation and transcribe'
|
||
: isTranscribingDictation()
|
||
? 'Transcribing dictated audio'
|
||
: 'Start dictation'
|
||
"
|
||
[class.composer-dictation-active]="isDictating() || isTranscribingDictation()"
|
||
>
|
||
{{ isDictating() ? '🛑' : isTranscribingDictation() ? '⏳' : '🗣️' }}
|
||
</button>
|
||
|
||
<input
|
||
#fileInput
|
||
class="composer-file-input"
|
||
type="file"
|
||
[disabled]="selectedPeer.channelState !== 'open'"
|
||
(change)="sendFile(selectedPeer.id, fileInput)"
|
||
/>
|
||
<button
|
||
class="composer-plus"
|
||
type="button"
|
||
[disabled]="selectedPeer.channelState !== 'open'"
|
||
(click)="fileInput.click()"
|
||
title="Send file"
|
||
aria-label="Send file"
|
||
>
|
||
+
|
||
</button>
|
||
}
|
||
|
||
<button
|
||
class="composer-image-generate"
|
||
type="button"
|
||
[disabled]="!peer() || session.signalingState() !== 'connected' || !messageText.trim()"
|
||
(click)="requestGeneratedImage()"
|
||
title="Generate image from prompt"
|
||
aria-label="Generate image from prompt"
|
||
>
|
||
🖼️
|
||
</button>
|
||
|
||
<div class="composer-emoji-picker-shell">
|
||
@if (emojiPickerOpen()) {
|
||
<div class="composer-emoji-picker">
|
||
@for (emoji of emojiOptions; track emoji) {
|
||
<button
|
||
class="composer-emoji-option"
|
||
type="button"
|
||
(click)="insertEmoji(emoji, composerTextarea)"
|
||
[attr.aria-label]="'Insert ' + emoji"
|
||
[title]="'Insert ' + emoji"
|
||
>
|
||
{{ emoji }}
|
||
</button>
|
||
}
|
||
</div>
|
||
}
|
||
<button
|
||
class="composer-emoji-trigger"
|
||
type="button"
|
||
[disabled]="!session.isSelectedPeerReady()"
|
||
(click)="toggleEmojiPicker($event)"
|
||
title="Insert emoji"
|
||
aria-label="Insert emoji"
|
||
>
|
||
😀
|
||
</button>
|
||
</div>
|
||
|
||
<button
|
||
class="send-emoji"
|
||
type="button"
|
||
[disabled]="!session.isSelectedPeerReady()"
|
||
(click)="sendMessage()"
|
||
title="Send message"
|
||
aria-label="Send message"
|
||
>
|
||
✅
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|