Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 36x 17x 6x 36x 3x 36x 5x 5x 3x 5x 5x 36x 5x 36x 3x | <ng-container *mobxAutorun>
@if (!store.video.enabled) {
<div class="submit-button" (click)="call()" tabindex="0">
<span i18n-title title="Start a Call" i18n>📞️</span> <label i18n>call</label>
</div>
} @else {
<div class="submit-button" (click)="hangup()" tabindex="0">
<span i18n-title title="End a Call" i18n>👋️</span> <label i18n>hangup</label>
</div>
<div class="call-layout" [class.two-person]="isTwoPersonCall">
<!-- Featured video (callee for 2-person, active speaker for group) -->
@if (featuredStream) {
<div class="featured-section">
<div class="stream-label glass">
@if (authorExt$(featuredStream.tag) | async; as x) {
<a class="user tag"
[routerLink]="['/tag', x.tag + x.origin]"
[appTitle]="x">{{ x.name }}</a>
}
</div>
@for (s of featuredStream.streams; track s.stream.id) {
<video [srcObject]="s.stream"
[class.loading]="!s.playing"
(playing)="store.video.playing(featuredStream.tag, s.stream.id)"
class="featured-video" autoplay playsinline></video>
} @empty {
<div class="loading video-placeholder featured-video"></div>
}
</div>
}
<div class="video-grid">
@for (u of gridStreams; track u.tag) {
<div class="grid-tile">
<div class="stream-label glass">
@if (authorExt$(u.tag) | async; as x) {
<a class="user tag"
[routerLink]="['/tag', x.tag + x.origin]"
[appTitle]="x">{{ x.name }}</a>
}
</div>
@for (s of u.streams; track s.stream.id) {
<video
[srcObject]="s.stream"
[class.loading]="!s.playing"
(playing)="store.video.playing(u.tag, s.stream.id)"
autoplay
playsinline
tabindex="0"
(click)="speaker = u.tag"
(keydown.enter)="speaker = u.tag"
(keydown.space)="speaker = u.tag"></video>
} @empty {
<div class="loading video-placeholder"></div>
}
</div>
}
@if (store.video.stream) {
<div class="grid-tile">
<div class="stream-label glass">
<a class="user tag"
[routerLink]="['/tag', store.account.tag]"
[appTitle]="store.account.ext" i18n>⭕️ Me</a>
</div>
<video [srcObject]="store.video.stream" class="mirror-video" autoplay playsinline [muted]="true"></video>
</div>
}
@for (tag of hungup; track tag) {
<div class="grid-tile">
<div class="stream-label glass">
@if (authorExt$(tag) | async; as x) {
<a class="user tag"
[routerLink]="['/tag', x.tag + x.origin]"
[appTitle]="x">{{ x.name }}</a>
}
</div>
<div class="hungup video-placeholder" i18n-title title="Hung up" i18n>👋️</div>
</div>
}
</div>
</div>
}
</ng-container>
|