import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
/**
* The ***ovToolbar** directive allows to replace the default toolbar component injecting your custom template.
* In the example below we've replaced the default toolbar and added the **toggleAudio** and **toggleVide** features.
*
* *You can run the sample [here]()*.
*
*
*```html
*
*
*
*/
@Directive({
selector: '[ovToolbar]'
})
export class ToolbarDirective {
/**
* @ignore
*/
constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {}
}
/**
* The ***ovToolbarAdditionalButtons** directive allows to add additional buttons to center buttons group.
* We've added the same buttons as the {@link ToolbarDirective}.
* Here we are using the {@link ParticipantService} fror checking the audio or video status.
*
* _You can check the sample [here]()_.
*
*
*```html
*
*
*/
@Directive({
selector: '[ovToolbarAdditionalButtons]'
})
export class ToolbarAdditionalButtonsDirective {
/**
* @ignore
*/
constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {}
}
/**
* The ***ovToolbarAdditionalPanelButtons** directive allows to add additional **panel buttons** to the toolbar.
* We've added a simple button without any functionality. For being able to toggle the panel you can see the {@link AdditionalPanelsDirective}.
*
* _You can check the sample [here]()_.
*
*
*```html
*
*
*/
@Directive({
selector: '[ovToolbarAdditionalPanelButtons]'
})
export class ToolbarAdditionalPanelButtonsDirective {
/**
* @ignore
*/
constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {}
}
/**
* The ***ovPanel** directive allows to replace the default panels with yours. This directive also allows us insert elements
* tagged with the {@link ChatPanelDirective}, {@link ParticipantsPanelDirective} and {@link AdditionalPanelsDirective}.
*
* In this example we're going to replace the entire {@link PanelComponent} using the ***ovPanel** directive. Inside of it, we're customizing
* the {@link ParticipantsPanelComponent} and {@link ChatPanelcomponent} using theirs directives.
*
* _You can check the sample [here]()_.
*
*
*```html
*
*
*
*/
@Directive({
selector: '[ovPanel]'
})
export class PanelDirective {
/**
* @ignore
*/
constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {}
}
/**
* The ***ovAdditionalPanels** directive allows to add more extra panels to the {@link PanelComponent}. In this example we've added a new
* panel besides the defaults.
*
* As we want to toggle this new panel as the others, we need to add a new button in the {@link ToolbarComponent}
* using the {@link ToolbarAdditionalPanelButtonsDirective}.
*
* _You can check the sample [here]()_.
*
*
*```html
*
*
*/
@Directive({
selector: '[ovAdditionalPanels]'
})
export class AdditionalPanelsDirective {
/**
* @ignore
*/
constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {}
}
/**
* The ***ovChatPanel** directive allows to replace the default chat panel template injecting your own component.
* Here we're going to redefine the chat template in a few code lines.
*
* _You can check the sample [here]()_.
*
* ```html
*
*
*
Chat
*
*
*
{{ msg }}
*
*
*
*
*
*
*```
*
*
* As we need to get the **openvidu-browser [Session](https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/Session.html)**
* for sending messages to others, we can get it from the `onSessionCreated` event fired by the {@link VideoconferenceComponent}
* when the session has been created.
*
* Once we have the session created, we can use the
* [signal](https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/Session.html#signal) method for sending our messages.
*
* ```javascript
* 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);
* }
*}
* ```
*
*
*
*
*/
@Directive({
selector: '[ovChatPanel]'
})
export class ChatPanelDirective {
constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {}
}
/**
* The ***ovParticipantsPanel** directive allows to replace the default participants panel template injecting your own component.
* Here we're going to redefine the participants template in a few code lines.
*
* _You can check the sample [here]()_.
*
* ```html
*
*
*
*
{{localParticipant.nickname}}
*
*
*
*
{{p.nickname}}
*
*
*
*```
*
*
* As we need to get the participants in our session, we are subscribing to them using the {@link ParticipantService}. We'll get the local participant
* and the remote participants and we will be able to update the participants panel on every update.
*
*
* ```javascript
* 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;
* });
* }
* }
*
* ```
*
*
*
*
*/
@Directive({
selector: '[ovParticipantsPanel]'
})
export class ParticipantsPanelDirective {
constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {}
}
/**
* The ***ovParticipantPanelItem** directive allows to replace the default participant panel item template in the {@link ParticipantsPanelComponent} injecting your own component.
*
* With ***ovParticipantPanelItem** directive we can access to the participant object from its context using
* the `let` keyword and referencing to the `participant` variable: `*ovParticipantPanelItem="let participant"`.
* Now we can access to the {@link ParticipantAbstractModel} object.
*
* _You can check the sample [here]()_.
*
* ```html
*
*
*/
@Directive({
selector: '[ovParticipantPanelItem]'
})
export class ParticipantPanelItemDirective {
constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {}
}
/**
* The ***ovParticipantPanelItemElements** directive allows to add elements to the {@link ParticipantsPanelItemComponent}.
* Here we're going to add a simple button for disconnecting to the session.
*
* With ***ovParticipantPanelItemElements** directive we can access to the participant object from its context using
* the `let` keyword and referencing to the `participant` variable: `*ovParticipantPanelItem="let participant"`.
* Now we can access to the {@link ParticipantAbstractModel} object and enable the button just for local participants.
*
*
* _You can check the sample [here]()_.
*
* ```html
*
*
*/
@Directive({
selector: '[ovParticipantPanelItemElements]'
})
export class ParticipantPanelItemElementsDirective {
constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {}
}
/**
*
* The ***ovLayout** directive allows us replacing the default layout with ours. As we have to add a stream for each participant,
* we must get the local and remote participants.
*
* As the deafult {@link StreamComponent} needs the participant stream, and as the participants streams extraction is not trivial,
* openvidu-angular provides us a {@link ParticipantStreamsPipe}for extracting the streams of each participant with ease.
*
* _You can check the sample [here]()_.
*
* ```html
*
*
*/
@Directive({
selector: '[ovLayout]'
})
export class LayoutDirective {
constructor(public template: TemplateRef, public container: ViewContainerRef) {}
}
/**
* The ***ovStream** directive allows to replace the default {@link StreamComponent} template injecting your own component.
* In the example below, we have to customize the nickname position and styles replacing the default stream.
*
* With ***ovStream** directive we can access to the stream object from its context using the `let` keyword and
* referencing to the `stream` variable: `*ovStream="let stream"`. Now we can access to the {@link StreamModel} object.
*
* _You can check the sample [here]()_.
*
* ```html
*
*
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
*