mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Deleted samples
csantosm
parent
b4080fedea
commit
d96edcfec6
|
|
@ -3,19 +3,6 @@ import { Routes, RouterModule } from '@angular/router';
|
||||||
import { DashboardComponent } from './dashboard/dashboard.component';
|
import { DashboardComponent } from './dashboard/dashboard.component';
|
||||||
import { CallComponent } from './openvidu-call/call.component';
|
import { CallComponent } from './openvidu-call/call.component';
|
||||||
import { TestingComponent } from './testing-app/testing.component';
|
import { TestingComponent } from './testing-app/testing.component';
|
||||||
import { ExamplesDashboardComponent } from './examples/examples-dashboard/examples-dashboard.component';
|
|
||||||
import { ToolbarDirectiveComponent } from './examples/toolbar-directive/toolbar-directive.component';
|
|
||||||
import { ToolbarAdditionalButtonsDirectiveComponent } from './examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component';
|
|
||||||
import { LayoutDirectiveComponent } from './examples/layout-directive/layout-directive.component';
|
|
||||||
import { StreamDirectiveComponent } from './examples/stream-directive/stream-directive.component';
|
|
||||||
import { PanelDirectiveComponent } from './examples/panel-directive/panel-directive.component';
|
|
||||||
import { ParticipantsPanelDirectiveComponent } from './examples/participantsPanel-directive/participantsPanel-directive.component';
|
|
||||||
import { ChatPanelDirectiveComponent } from './examples/chatPanel-directive/chatPanel-directive.component';
|
|
||||||
|
|
||||||
import { ParticipantPanelItemElementsDirectiveComponent } from './examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component';
|
|
||||||
import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component';
|
|
||||||
import { ToolbarAdditionalPanelButtonsDirectiveComponent } from './examples/toolbarAdditionalPanelButtons-directive/toolbarAdditionalPanelButtons-directive.component';
|
|
||||||
import { AdditionalPanelsDirectiveComponent } from './examples/additionalPanels-directive/additionalPanels-directive.component';
|
|
||||||
import { AdminDashboardComponent } from './admin/admin-dashboard/admin-dashboard.component';
|
import { AdminDashboardComponent } from './admin/admin-dashboard/admin-dashboard.component';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
|
|
@ -23,21 +10,6 @@ const routes: Routes = [
|
||||||
{ path: 'call', component: CallComponent },
|
{ path: 'call', component: CallComponent },
|
||||||
{ path: 'testing', component: TestingComponent },
|
{ path: 'testing', component: TestingComponent },
|
||||||
{ path: 'admin', component: AdminDashboardComponent },
|
{ path: 'admin', component: AdminDashboardComponent },
|
||||||
|
|
||||||
{ path: 'examples', component: ExamplesDashboardComponent},
|
|
||||||
{ path: 'examples/toolbarDirective', component: ToolbarDirectiveComponent },
|
|
||||||
{ path: 'examples/toolbarAdditionalButtonsDirective', component: ToolbarAdditionalButtonsDirectiveComponent },
|
|
||||||
{ path: 'examples/toolbarAdditionalPanelButtonsDirective', component: ToolbarAdditionalPanelButtonsDirectiveComponent },
|
|
||||||
|
|
||||||
{ path: 'examples/layoutDirective', component: LayoutDirectiveComponent },
|
|
||||||
{ path: 'examples/streamDirective', component: StreamDirectiveComponent },
|
|
||||||
|
|
||||||
{ path: 'examples/panelDirective', component: PanelDirectiveComponent },
|
|
||||||
{ path: 'examples/additionalPanelsDirective', component: AdditionalPanelsDirectiveComponent },
|
|
||||||
{ path: 'examples/participantsPanelDirective', component: ParticipantsPanelDirectiveComponent },
|
|
||||||
{ path: 'examples/chatPanelDirective', component: ChatPanelDirectiveComponent },
|
|
||||||
{ path: 'examples/participantPanelItemDirective', component: ParticipantPanelItemDirectiveComponent },
|
|
||||||
{ path: 'examples/participantPanelItemElementsDirective', component: ParticipantPanelItemElementsDirectiveComponent },
|
|
||||||
];
|
];
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [RouterModule.forRoot(routes, { useHash: true })],
|
imports: [RouterModule.forRoot(routes, { useHash: true })],
|
||||||
|
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
import { PanelService, TokenModel, PanelType } from 'openvidu-angular';
|
|
||||||
import { RestService } from 'src/app/services/rest.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-chatPanel-directive',
|
|
||||||
template: `
|
|
||||||
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
|
|
||||||
<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
|
|
||||||
<button (click)="toggleMyPanel('my-panel')">MY PANEL</button>
|
|
||||||
<button (click)="toggleMyPanel('my-panel2')">OTHER PANEL</button>
|
|
||||||
</div>
|
|
||||||
<div *ovAdditionalPanels id="my-panels">
|
|
||||||
<div id="my-panel1" *ngIf="showExternalPanel">
|
|
||||||
<h2>NEW PANEL</h2>
|
|
||||||
<p>This is my new additional panel</p>
|
|
||||||
</div>
|
|
||||||
<div id="my-panel2" *ngIf="showExternalPanel2">
|
|
||||||
<h2>NEW PANEL 2</h2>
|
|
||||||
<p>This is other new panel</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ov-videoconference>
|
|
||||||
`,
|
|
||||||
styles: [
|
|
||||||
`
|
|
||||||
#my-panels {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
#my-panel1, #my-panel2 {
|
|
||||||
text-align: center;
|
|
||||||
height: calc(100% - 40px);
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
#my-panel1 {
|
|
||||||
background: #c9ffb2;
|
|
||||||
}
|
|
||||||
#my-panel2 {
|
|
||||||
background: #ddf2ff;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
]
|
|
||||||
})
|
|
||||||
export class AdditionalPanelsDirectiveComponent implements OnInit {
|
|
||||||
tokens: TokenModel;
|
|
||||||
sessionId = 'chat-panel-directive-example';
|
|
||||||
OPENVIDU_URL = 'https://localhost:4443';
|
|
||||||
OPENVIDU_SECRET = 'MY_SECRET';
|
|
||||||
showExternalPanel: boolean = false;
|
|
||||||
showExternalPanel2: boolean = false;
|
|
||||||
constructor(private restService: RestService, private panelService: PanelService) {}
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
this.subscribeToPanelToggling();
|
|
||||||
}
|
|
||||||
subscribeToPanelToggling() {
|
|
||||||
this.panelService.panelOpenedObs.subscribe((ev: { opened: boolean; type?: PanelType | string }) => {
|
|
||||||
this.showExternalPanel = ev.opened && ev.type === 'my-panel';
|
|
||||||
this.showExternalPanel2 = ev.opened && ev.type === 'my-panel2';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
async onJoinButtonClicked() {
|
|
||||||
this.tokens = {
|
|
||||||
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
|
|
||||||
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
toggleMyPanel(type: string) {
|
|
||||||
this.panelService.togglePanel(type);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
import { TokenModel, Signal } from 'openvidu-angular';
|
|
||||||
import { Session, SignalOptions } from 'openvidu-browser';
|
|
||||||
import { RestService } from 'src/app/services/rest.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-chatPanel-directive',
|
|
||||||
template: `
|
|
||||||
<ov-videoconference
|
|
||||||
(onJoinButtonClicked)="onJoinButtonClicked()"
|
|
||||||
(onSessionCreated)="onSessionCreated($event)"
|
|
||||||
[tokens]="tokens"
|
|
||||||
[toolbarDisplaySessionName]="false"
|
|
||||||
>
|
|
||||||
<div *ovChatPanel id="my-panel">
|
|
||||||
<h3>Chat</h3>
|
|
||||||
<div>
|
|
||||||
<ul>
|
|
||||||
<li *ngFor="let msg of messages">{{ msg }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<input value="Hello" #input />
|
|
||||||
<button (click)="send(input.value)">Send</button>
|
|
||||||
</div>
|
|
||||||
</ov-videoconference>
|
|
||||||
`,
|
|
||||||
styles: [
|
|
||||||
`
|
|
||||||
#my-panel {
|
|
||||||
background: #aafffc;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
]
|
|
||||||
})
|
|
||||||
export class ChatPanelDirectiveComponent {
|
|
||||||
tokens: TokenModel;
|
|
||||||
sessionId = 'chat-panel-directive-example';
|
|
||||||
OPENVIDU_URL = 'https://localhost:4443';
|
|
||||||
OPENVIDU_SECRET = 'MY_SECRET';
|
|
||||||
session: Session;
|
|
||||||
messages: string[] = [];
|
|
||||||
constructor(private restService: RestService) {}
|
|
||||||
|
|
||||||
async onJoinButtonClicked() {
|
|
||||||
this.tokens = {
|
|
||||||
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
|
|
||||||
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
onSessionCreated(session: Session) {
|
|
||||||
this.session = session;
|
|
||||||
this.session.on(`signal:${Signal.CHAT}`, (event: any) => {
|
|
||||||
const msg = JSON.parse(event.data).message;
|
|
||||||
this.messages.push(msg);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
send(message: string): void {
|
|
||||||
const signalOptions: SignalOptions = {
|
|
||||||
data: JSON.stringify({ message }),
|
|
||||||
type: Signal.CHAT,
|
|
||||||
to: undefined
|
|
||||||
};
|
|
||||||
this.session.signal(signalOptions);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<div class="content" role="main">
|
|
||||||
<div class="card-container">
|
|
||||||
<div class="card card-small" (click)="goTo('toolbarDirective')" tabindex="0">
|
|
||||||
<span>ToolbarDirective</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card card-small" (click)="goTo('toolbarAdditionalButtonsDirective')" tabindex="0">
|
|
||||||
<span>ToolbarAdditionalButtonsDirective</span>
|
|
||||||
</div>
|
|
||||||
<div class="card card-small" (click)="goTo('toolbarAdditionalPanelButtonsDirective')" tabindex="0">
|
|
||||||
<span>ToolbarAdditionalPanelButtonsDirective</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card-container">
|
|
||||||
<div class="card card-small" (click)="goTo('layoutDirective')" tabindex="0">
|
|
||||||
<span>LayoutDirective</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card card-small" (click)="goTo('streamDirective')" tabindex="0">
|
|
||||||
<span>StreamDirective</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card-container">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="card card-small" (click)="goTo('panelDirective')" tabindex="0">
|
|
||||||
<span>PanelDirective</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card card-small" (click)="goTo('additionalPanelsDirective')" tabindex="0">
|
|
||||||
<span>AdditionalPanelsDirective</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card card-small" (click)="goTo('participantsPanelDirective')" tabindex="0">
|
|
||||||
<span>ParticipantsPanelDirective</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card card-small" (click)="goTo('chatPanelDirective')" tabindex="0">
|
|
||||||
<span>ChatPanelDirective</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card card-small" (click)="goTo('participantPanelItemElementsDirective')" tabindex="0">
|
|
||||||
<span>ParticipantPanelItemElementsDirective</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card card-small" (click)="goTo('participantPanelItemDirective')" tabindex="0">
|
|
||||||
<span>ParticipantPanelItemDirective</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,291 +0,0 @@
|
||||||
:host {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 60px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #3c3f3e;
|
|
||||||
color: white;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
margin: 62px auto;
|
|
||||||
padding: 0px;
|
|
||||||
max-width: 960px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-section {
|
|
||||||
height: 45%; width: 100%; text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#call-app, #testing-app {
|
|
||||||
height: 95%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#call-app {
|
|
||||||
border-bottom: 3px solid;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#call-app-btn {
|
|
||||||
background-color: #0088AA;
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#testing-app-btn {
|
|
||||||
background-color: #FFCC00;
|
|
||||||
color: #080808;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg.material-icons {
|
|
||||||
height: 24px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg.material-icons:not(:last-child) {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card svg.material-icons path {
|
|
||||||
fill: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container {
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
width: fit-content !important;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
background-color: #fafafa;
|
|
||||||
height: 40px;
|
|
||||||
width: 200px;
|
|
||||||
margin: 0 8px 16px;
|
|
||||||
padding: 16px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
line-height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container .card:not(:last-child) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card.card-small {
|
|
||||||
height: 16px;
|
|
||||||
width: 168px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container .card:not(.highlight-card) {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container .card:not(.highlight-card):hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container .card:not(.highlight-card):hover .material-icons path {
|
|
||||||
fill: rgb(105, 103, 103);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card.highlight-card {
|
|
||||||
background-color: #1976d2;
|
|
||||||
color: white;
|
|
||||||
font-weight: 600;
|
|
||||||
border: none;
|
|
||||||
width: auto;
|
|
||||||
min-width: 30%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card.card.highlight-card span {
|
|
||||||
margin-left: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg#rocket {
|
|
||||||
width: 80px;
|
|
||||||
position: absolute;
|
|
||||||
left: -10px;
|
|
||||||
top: -24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg#rocket-smoke {
|
|
||||||
height: calc(100vh - 95px);
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 180px;
|
|
||||||
z-index: -10;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
a:visited,
|
|
||||||
a:hover {
|
|
||||||
color: #1976d2;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #125699;
|
|
||||||
}
|
|
||||||
|
|
||||||
.terminal {
|
|
||||||
position: relative;
|
|
||||||
width: 80%;
|
|
||||||
max-width: 600px;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding-top: 45px;
|
|
||||||
margin-top: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: rgb(15, 15, 16);
|
|
||||||
}
|
|
||||||
|
|
||||||
.terminal::before {
|
|
||||||
content: "\2022 \2022 \2022";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 4px;
|
|
||||||
background: rgb(58, 58, 58);
|
|
||||||
color: #c2c3c4;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 2rem;
|
|
||||||
line-height: 0;
|
|
||||||
padding: 14px 0;
|
|
||||||
text-indent: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.terminal pre {
|
|
||||||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
|
|
||||||
color: white;
|
|
||||||
padding: 0 1rem 1rem;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circle-link {
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
border-radius: 40px;
|
|
||||||
margin: 8px;
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid #eeeeee;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
||||||
transition: 1s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circle-link:hover {
|
|
||||||
transform: translateY(-0.25rem);
|
|
||||||
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.github-star-badge {
|
|
||||||
color: #24292e;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 3px 10px;
|
|
||||||
border: 1px solid rgba(27,31,35,.2);
|
|
||||||
border-radius: 3px;
|
|
||||||
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
|
|
||||||
margin-left: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
|
|
||||||
}
|
|
||||||
|
|
||||||
.github-star-badge:hover {
|
|
||||||
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
|
|
||||||
border-color: rgba(27,31,35,.35);
|
|
||||||
background-position: -.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.github-star-badge .material-icons {
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg#clouds {
|
|
||||||
position: fixed;
|
|
||||||
bottom: -160px;
|
|
||||||
left: -230px;
|
|
||||||
z-index: -10;
|
|
||||||
width: 1920px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Responsive Styles */
|
|
||||||
@media screen and (max-width: 767px) {
|
|
||||||
|
|
||||||
.card-container > *:not(.circle-link) ,
|
|
||||||
.terminal {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:not(.highlight-card) {
|
|
||||||
height: 16px;
|
|
||||||
margin: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card.highlight-card span {
|
|
||||||
margin-left: 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg#rocket-smoke {
|
|
||||||
right: 120px;
|
|
||||||
transform: rotate(-5deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 575px) {
|
|
||||||
svg#rocket-smoke {
|
|
||||||
display: none;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
import { Router } from '@angular/router';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-examples-dashboard',
|
|
||||||
templateUrl: './examples-dashboard.component.html',
|
|
||||||
styleUrls: ['./examples-dashboard.component.scss']
|
|
||||||
})
|
|
||||||
export class ExamplesDashboardComponent implements OnInit {
|
|
||||||
|
|
||||||
constructor(private router: Router) { }
|
|
||||||
|
|
||||||
ngOnInit(): void {}
|
|
||||||
|
|
||||||
goTo(path: string) {
|
|
||||||
this.router.navigate([`examples/${path}`]);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
|
||||||
import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
|
|
||||||
import { Subscription } from 'rxjs';
|
|
||||||
import { RestService } from 'src/app/services/rest.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-layout-directive',
|
|
||||||
styles: [
|
|
||||||
`
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
flex: 0 50%;
|
|
||||||
height: 250px;
|
|
||||||
margin-bottom: 2%;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
],
|
|
||||||
template: `
|
|
||||||
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
|
|
||||||
<div *ovLayout>
|
|
||||||
<div class="container">
|
|
||||||
<div class="item" *ngFor="let stream of localParticipant | streams">
|
|
||||||
<ov-stream [stream]="stream"></ov-stream>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="item" *ngFor="let stream of remoteParticipants | streams">
|
|
||||||
<ov-stream [stream]="stream"></ov-stream>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ov-videoconference>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class LayoutDirectiveComponent implements OnInit, OnDestroy {
|
|
||||||
tokens: TokenModel;
|
|
||||||
sessionId = 'layout-directive-example';
|
|
||||||
OPENVIDU_URL = 'https://localhost:4443';
|
|
||||||
OPENVIDU_SECRET = 'MY_SECRET';
|
|
||||||
localParticipant: ParticipantAbstractModel;
|
|
||||||
remoteParticipants: ParticipantAbstractModel[];
|
|
||||||
localParticipantSubs: Subscription;
|
|
||||||
remoteParticipantsSubs: Subscription;
|
|
||||||
|
|
||||||
constructor(private restService: RestService, private participantService: ParticipantService) {}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
this.subscribeToParticipants();
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy() {
|
|
||||||
this.localParticipantSubs.unsubscribe();
|
|
||||||
this.remoteParticipantsSubs.unsubscribe();
|
|
||||||
}
|
|
||||||
subscribeToParticipants() {
|
|
||||||
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
|
|
||||||
this.localParticipant = p;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
|
|
||||||
this.remoteParticipants = participants;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async onJoinButtonClicked() {
|
|
||||||
this.tokens = {
|
|
||||||
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
|
|
||||||
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
import { TokenModel } from 'openvidu-angular';
|
|
||||||
import { RestService } from 'src/app/services/rest.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-panel-directive',
|
|
||||||
template: `
|
|
||||||
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
|
|
||||||
<ov-panel *ovPanel>
|
|
||||||
<div *ovChatPanel id="my-chat-panel">This is my custom chat panel</div>
|
|
||||||
<div *ovParticipantsPanel id="my-participants-panel">This is my custom participants panel</div>
|
|
||||||
</ov-panel>
|
|
||||||
</ov-videoconference>
|
|
||||||
`,
|
|
||||||
styles: [
|
|
||||||
`
|
|
||||||
#my-chat-panel, #my-participants-panel {
|
|
||||||
text-align: center;
|
|
||||||
height: calc(100% - 40px);
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
#my-chat-panel {
|
|
||||||
background: #c9ffb2;
|
|
||||||
}
|
|
||||||
#my-participants-panel {
|
|
||||||
background: #ddf2ff;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
]
|
|
||||||
})
|
|
||||||
export class PanelDirectiveComponent {
|
|
||||||
tokens: TokenModel;
|
|
||||||
sessionId = 'panel-directive-example';
|
|
||||||
OPENVIDU_URL = 'https://localhost:4443';
|
|
||||||
OPENVIDU_SECRET = 'MY_SECRET';
|
|
||||||
constructor(private restService: RestService) {}
|
|
||||||
|
|
||||||
async onJoinButtonClicked() {
|
|
||||||
this.tokens = {
|
|
||||||
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
|
|
||||||
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
import { TokenModel } from 'openvidu-angular';
|
|
||||||
import { RestService } from 'src/app/services/rest.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-participantPanelItem-directive',
|
|
||||||
template: `
|
|
||||||
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
|
|
||||||
<div *ovParticipantPanelItem="let participant" style="display: flex">
|
|
||||||
<p>{{ participant.nickname }}</p>
|
|
||||||
<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
|
|
||||||
<mat-menu #menu="matMenu">
|
|
||||||
<button mat-menu-item>Button 1</button>
|
|
||||||
<button mat-menu-item>Button 2</button>
|
|
||||||
</mat-menu>
|
|
||||||
</div>
|
|
||||||
</ov-videoconference>
|
|
||||||
`,
|
|
||||||
styles: [``]
|
|
||||||
})
|
|
||||||
export class ParticipantPanelItemDirectiveComponent {
|
|
||||||
tokens: TokenModel;
|
|
||||||
sessionId = 'participants-panel-directive-example';
|
|
||||||
OPENVIDU_URL = 'https://localhost:4443';
|
|
||||||
OPENVIDU_SECRET = 'MY_SECRET';
|
|
||||||
|
|
||||||
constructor(private restService: RestService) {}
|
|
||||||
|
|
||||||
async onJoinButtonClicked() {
|
|
||||||
this.tokens = {
|
|
||||||
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
|
|
||||||
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
import { OpenViduService, TokenModel } from 'openvidu-angular';
|
|
||||||
import { RestService } from 'src/app/services/rest.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-participantPanelItemElements-directive',
|
|
||||||
template: `
|
|
||||||
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
|
|
||||||
<div *ovParticipantPanelItemElements="let participant">
|
|
||||||
<button *ngIf="participant.local" (click)="leaveSession()">Leave</button>
|
|
||||||
</div>
|
|
||||||
</ov-videoconference>
|
|
||||||
`,
|
|
||||||
styles: [``]
|
|
||||||
})
|
|
||||||
export class ParticipantPanelItemElementsDirectiveComponent {
|
|
||||||
tokens: TokenModel;
|
|
||||||
sessionId = 'participants-panel-directive-example';
|
|
||||||
OPENVIDU_URL = 'https://localhost:4443';
|
|
||||||
OPENVIDU_SECRET = 'MY_SECRET';
|
|
||||||
|
|
||||||
constructor(private restService: RestService, private openviduService: OpenViduService) {}
|
|
||||||
|
|
||||||
async onJoinButtonClicked() {
|
|
||||||
this.tokens = {
|
|
||||||
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
|
|
||||||
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
leaveSession() {
|
|
||||||
this.openviduService.disconnect();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
import { Component, OnDestroy, OnInit, } from '@angular/core';
|
|
||||||
import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
|
|
||||||
import { Subscription } from 'rxjs';
|
|
||||||
import { RestService } from 'src/app/services/rest.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-participantsPanel-directive',
|
|
||||||
template: `
|
|
||||||
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
|
|
||||||
<div *ovParticipantsPanel id="my-panel">
|
|
||||||
<ul id="local">
|
|
||||||
<li>{{localParticipant.nickname}}</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul id="remote">
|
|
||||||
<li *ngFor="let p of remoteParticipants">{{p.nickname}}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</ov-videoconference>
|
|
||||||
`,
|
|
||||||
styles: [
|
|
||||||
`
|
|
||||||
#my-panel {
|
|
||||||
background: #faff7f;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
#my-panel > #local {
|
|
||||||
background: #a184ff;
|
|
||||||
}
|
|
||||||
#my-panel > #remote {
|
|
||||||
background: #7fb8ff;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
]
|
|
||||||
})
|
|
||||||
export class ParticipantsPanelDirectiveComponent implements OnInit, OnDestroy {
|
|
||||||
tokens: TokenModel;
|
|
||||||
sessionId = 'participants-panel-directive-example';
|
|
||||||
OPENVIDU_URL = 'https://localhost:4443';
|
|
||||||
OPENVIDU_SECRET = 'MY_SECRET';
|
|
||||||
localParticipant: ParticipantAbstractModel;
|
|
||||||
remoteParticipants: ParticipantAbstractModel[];
|
|
||||||
localParticipantSubs: Subscription;
|
|
||||||
remoteParticipantsSubs: Subscription;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private restService: RestService,
|
|
||||||
private participantService: ParticipantService
|
|
||||||
) {}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
this.subscribeToParticipants();
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy() {
|
|
||||||
this.localParticipantSubs.unsubscribe();
|
|
||||||
this.remoteParticipantsSubs.unsubscribe();
|
|
||||||
}
|
|
||||||
|
|
||||||
async onJoinButtonClicked() {
|
|
||||||
this.tokens = {
|
|
||||||
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
|
|
||||||
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
subscribeToParticipants() {
|
|
||||||
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
|
|
||||||
this.localParticipant = p;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
|
|
||||||
this.remoteParticipants = participants;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
import { TokenModel } from 'openvidu-angular';
|
|
||||||
import { RestService } from 'src/app/services/rest.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-stream-directive',
|
|
||||||
styles: [
|
|
||||||
`
|
|
||||||
p {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
border: 2px solid;
|
|
||||||
background: #000000;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
],
|
|
||||||
template: `
|
|
||||||
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
|
|
||||||
<div *ovStream="let stream">
|
|
||||||
<ov-stream [stream]="stream" [displayParticipantName]="false"></ov-stream>
|
|
||||||
<p>{{ stream.participant.nickname }}</p>
|
|
||||||
</div>
|
|
||||||
</ov-videoconference>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class StreamDirectiveComponent {
|
|
||||||
tokens: TokenModel;
|
|
||||||
sessionId = 'toolbar-directive-example';
|
|
||||||
OPENVIDU_URL = 'https://localhost:4443';
|
|
||||||
OPENVIDU_SECRET = 'MY_SECRET';
|
|
||||||
|
|
||||||
constructor(private restService: RestService) {}
|
|
||||||
|
|
||||||
async onJoinButtonClicked() {
|
|
||||||
this.tokens = {
|
|
||||||
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
|
|
||||||
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
import { OpenViduService, TokenModel } from 'openvidu-angular';
|
|
||||||
import { RestService } from 'src/app/services/rest.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-toolbar-directive',
|
|
||||||
template: `
|
|
||||||
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
|
|
||||||
<div *ovToolbar style="text-align: center;">
|
|
||||||
<button (click)="toggleVideo()">Toggle Video</button>
|
|
||||||
<button (click)="toggleAudio()">Toggle Audio</button>
|
|
||||||
</div>
|
|
||||||
</ov-videoconference>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class ToolbarDirectiveComponent implements OnInit {
|
|
||||||
tokens: TokenModel;
|
|
||||||
sessionId = 'toolbar-directive-example';
|
|
||||||
OPENVIDU_URL = 'https://localhost:4443';
|
|
||||||
OPENVIDU_SECRET = 'MY_SECRET';
|
|
||||||
publishVideo = true;
|
|
||||||
publishAudio = true;
|
|
||||||
constructor(private restService: RestService, private openviduService: OpenViduService) { }
|
|
||||||
|
|
||||||
ngOnInit(): void { }
|
|
||||||
|
|
||||||
async onJoinButtonClicked() {
|
|
||||||
this.tokens = {
|
|
||||||
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
|
|
||||||
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
async toggleVideo(): Promise<void> {
|
|
||||||
this.publishVideo = !this.publishVideo;
|
|
||||||
await this.openviduService.publishVideo(this.publishVideo);
|
|
||||||
}
|
|
||||||
|
|
||||||
async toggleAudio(): Promise<void> {
|
|
||||||
this.publishAudio = !this.publishAudio;
|
|
||||||
await this.openviduService.publishAudio(this.publishAudio);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
import { OpenViduService, ParticipantService, TokenModel } from 'openvidu-angular';
|
|
||||||
import { RestService } from 'src/app/services/rest.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-toolbarAdditionalButtons-directive',
|
|
||||||
template: `
|
|
||||||
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
|
|
||||||
<div *ovToolbarAdditionalButtons style="text-align: center;">
|
|
||||||
<button (click)="toggleVideo()">Toggle Video</button>
|
|
||||||
<button (click)="toggleAudio()">Toggle Audio</button>
|
|
||||||
</div>
|
|
||||||
</ov-videoconference>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class ToolbarAdditionalButtonsDirectiveComponent {
|
|
||||||
tokens: TokenModel;
|
|
||||||
sessionId = 'toolbar-additionalbtn-directive-example';
|
|
||||||
OPENVIDU_URL = 'https://localhost:4443';
|
|
||||||
OPENVIDU_SECRET = 'MY_SECRET';
|
|
||||||
constructor(
|
|
||||||
private restService: RestService,
|
|
||||||
private openviduService: OpenViduService,
|
|
||||||
private participantService: ParticipantService
|
|
||||||
) { }
|
|
||||||
|
|
||||||
async onJoinButtonClicked() {
|
|
||||||
this.tokens = {
|
|
||||||
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
|
|
||||||
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
async toggleVideo() {
|
|
||||||
const publishVideo = !this.participantService.isMyVideoActive();
|
|
||||||
await this.openviduService.publishVideo(publishVideo);
|
|
||||||
}
|
|
||||||
|
|
||||||
async toggleAudio() {
|
|
||||||
const publishAudio = !this.participantService.isMyAudioActive();
|
|
||||||
await this.openviduService.publishAudio(publishAudio);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
import { TokenModel } from 'openvidu-angular';
|
|
||||||
import { RestService } from 'src/app/services/rest.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-toolbarAdditionalButtons-directive',
|
|
||||||
template: `
|
|
||||||
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
|
|
||||||
<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
|
|
||||||
<button>MY PANEL</button>
|
|
||||||
</div>
|
|
||||||
</ov-videoconference>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class ToolbarAdditionalPanelButtonsDirectiveComponent {
|
|
||||||
tokens: TokenModel;
|
|
||||||
sessionId = 'toolbar-additionalPanelbtn';
|
|
||||||
OPENVIDU_URL = 'https://localhost:4443';
|
|
||||||
OPENVIDU_SECRET = 'MY_SECRET';
|
|
||||||
|
|
||||||
constructor(private restService: RestService) {}
|
|
||||||
|
|
||||||
async onJoinButtonClicked() {
|
|
||||||
this.tokens = {
|
|
||||||
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
|
|
||||||
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue