72 lines
2.4 KiB
HTML
72 lines
2.4 KiB
HTML
<ion-app>
|
|
|
|
<ion-header>
|
|
<ion-toolbar color="dark">
|
|
<img class="demo-logo" src="assets/images/openvidu_vert_white_bg_trans_cropped.png" />
|
|
<ion-buttons slot="primary">
|
|
<ion-button color="light" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-ionic">
|
|
<ion-icon slot="icon-only" name="logo-github"></ion-icon>
|
|
</ion-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content class="ion-padding" *ngIf="!session">
|
|
|
|
<div id="img-div"><img src="assets/images/openvidu_grey_bg_transp_cropped.png" /></div>
|
|
<h1 align="center" id="title">Join a video session</h1>
|
|
<ion-item>
|
|
<ion-label position="floating">Participant</ion-label>
|
|
<ion-input [(ngModel)]="myUserName"></ion-input>
|
|
</ion-item>
|
|
<ion-item>
|
|
<ion-label position="floating">Session</ion-label>
|
|
<ion-input [(ngModel)]="mySessionId"></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-button id="join-button" [disabled]="!mySessionId && !myUserName" (click)="joinSession()" expand="block" shape="round"
|
|
color="primary">
|
|
<ion-icon slot="start" name="videocam"></ion-icon>
|
|
Join
|
|
</ion-button>
|
|
|
|
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
|
|
<ion-fab-button id="settings-button" [disabled]="!mySessionId && !myUserName" (click)="presentSettingsAlert()"
|
|
size="small" color="dark">
|
|
<ion-icon name="settings"></ion-icon>
|
|
</ion-fab-button>
|
|
</ion-fab>
|
|
|
|
</ion-content>
|
|
|
|
<ion-content [scrollEvents]="true" (ionScroll)="refreshVideos()" *ngIf="session">
|
|
<div id="session-header">
|
|
<h1 id="session-title">{{mySessionId}}</h1>
|
|
</div>
|
|
|
|
<ion-grid>
|
|
<!--Subscribers and Publishers-->
|
|
<ion-row>
|
|
<ion-col size="6">
|
|
<div *ngIf="publisher" class="stream-container">
|
|
<user-video [streamManager]="publisher"></user-video>
|
|
</div>
|
|
</ion-col>
|
|
|
|
<ion-col size="6" *ngFor="let sub of subscribers">
|
|
<div class="stream-container">
|
|
<user-video [streamManager]="sub"></user-video>
|
|
</div>
|
|
</ion-col>
|
|
|
|
</ion-row>
|
|
</ion-grid>
|
|
|
|
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
|
|
<ion-fab-button size="small" color="danger" (click)="leaveSession()">
|
|
<ion-icon name="power"></ion-icon>
|
|
</ion-fab-button>
|
|
</ion-fab>
|
|
</ion-content>
|
|
|
|
</ion-app> |