diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css new file mode 100644 index 00000000..c9555f6b --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css @@ -0,0 +1,79 @@ +#activities-container { + margin: 20px; + background-color: var(--ov-panel-background); + border-radius: var(--ov-panel-radius); + max-height: calc(100% - 40px); + min-height: calc(100% - 40px); +} + +.header-container { + padding: 10px; + display: flex; +} + +.header-container h3 { + margin-left: 5px; + margin-top: auto; + margin-bottom: auto; + font-weight: bold; +} + +.header-container button { + margin-left: auto; + border-radius: var(--ov-buttons-radius); +} + +.activities-body-container { + display: block !important; + overflow-y: auto; + overflow-x: hidden; + padding: 10px; +} + +.activity-icon { + display: inherit; + background-color: var(--ov-light-color); + border-radius: var(--ov-panel-radius); +} + +.activity-icon mat-icon { + margin: auto; +} + + +.activity-subtitle { + font-style: italic; + font-size: 11px !important; +} +.activity-title { + font-weight: bold !important; +} + +.activity-action-buttons{ + align-self: flex-start; + margin-top: 15px; + font-weight: 600; +} + +::ng-deep .mat-list-text { + padding-left: 10px !important; +} + +::ng-deep .mat-expansion-panel-header { + padding: 0px 10px !important; +} + +::ng-deep .mat-list-base .mat-list-item .mat-list-item-content, .mat-list-base .mat-list-option .mat-list-item-content { + padding: 0px !important; +} + +::ng-deep mat-expansion-panel .mat-expansion-panel-body { + padding: 0px !important; +} +::ng-deep .mat-expansion-panel-header-description { + flex-grow: 0 !important; +} + +::ng-deep .mat-expansion-panel { + box-shadow: none !important; +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html new file mode 100644 index 00000000..9048e1aa --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html @@ -0,0 +1,14 @@ +
+
+

Activities

+ +
+ +
+ + + +
+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.spec.ts new file mode 100644 index 00000000..c61299db --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ActivitiesPanelComponent } from './activities-panel.component'; + +describe('ActivitiesPanelComponent', () => { + let component: ActivitiesPanelComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ActivitiesPanelComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ActivitiesPanelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts new file mode 100644 index 00000000..7a699095 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; +import { PanelType } from '../../../models/panel.model'; +import { PanelService } from '../../../services/panel/panel.service'; + +@Component({ + selector: 'ov-activities-panel', + templateUrl: './activities-panel.component.html', + styleUrls: ['./activities-panel.component.css'] +}) +export class ActivitiesPanelComponent implements OnInit { + constructor(private panelService: PanelService) {} + + ngOnInit(): void {} + + ngOnDestroy() {} + + close() { + this.panelService.togglePanel(PanelType.ACTIVITIES); + } +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.css new file mode 100644 index 00000000..a74b26bb --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.css @@ -0,0 +1,37 @@ +#recording-status { + color: var(--ov-text-color); + display: inline; + padding: 3px; + font-size: 11px; + border-radius: var(--ov-panel-radius); +} +.started { + background-color: #005704; +} +.stopped { + background-color: var(--ov-light-color); + color: var(--ov-panel-text-color) !important; +} + + +#recording-file-item { + padding: 0px 16px; +} + +.recording-action-buttons{ + margin: auto; +} + +#start-recording-btn { + background-color: var(--ov-tertiary-color); + color: var(--ov-text-color); +} + +#stop-recording-btn { + background-color: var(--ov-warn-color); + color: var(--ov-text-color); +} + +mat-expansion-panel { + margin: 0pc 0px 15px 0px; +} \ No newline at end of file diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.html new file mode 100644 index 00000000..59de51df --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.html @@ -0,0 +1,62 @@ + + + + +
+ video_camera_front + +
+

Recording

+

Record your meeting for posterity

+
+
+ {{ recordingStatus }} +
+
+ + + +
+ + + video_file +

{{ recording.name }}

+

+ {{ recording.id }} +

+ +
+ + + +
+ +
+ + + +
NO RECORDINGS FOUND
+
+ diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.spec.ts new file mode 100644 index 00000000..c6babca8 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecordingActivityComponent } from './recording-activity.component'; + +describe('RecordingActivityComponent', () => { + let component: RecordingActivityComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RecordingActivityComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RecordingActivityComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.ts new file mode 100644 index 00000000..7be4ed4f --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.ts @@ -0,0 +1,87 @@ +import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import { Subscription } from 'rxjs'; +import { RecordingStatus } from '../../../../models/recording.model'; +import { RecordingService, RecordingInfo } from '../../../../services/recording/recording.service'; + +@Component({ + selector: 'ov-recording-activity', + templateUrl: './recording-activity.component.html', + styleUrls: ['./recording-activity.component.css', '../activities-panel.component.css'] +}) +export class RecordingActivityComponent implements OnInit { + + /** + * Provides event notifications that fire when start recording button has been clicked. + */ + @Output() startRecordingClicked: EventEmitter = new EventEmitter(); + + /** + * Provides event notifications that fire when stop recording button has been clicked. + */ + @Output() stopRecordingClicked: EventEmitter = new EventEmitter(); + recordingStatus: RecordingStatus = RecordingStatus.STOPPED; + recStatusEnum = RecordingStatus; + isSessionCreator = true; + recording: RecordingInfo; + recordingSubscription: Subscription; + + opened: boolean = false; + + constructor(private recordingService: RecordingService) {} + + ngOnInit(): void { + this.subscribeToRecordingStatus(); + } + + ngOnDestroy() { + if (this.recordingSubscription) this.recordingSubscription.unsubscribe(); + } + + panelOpened() { + //TODO EMITIR EVENTO + this.opened = true; + } + + panelClosed() { + //TODO EMITIR EVENTO + this.opened = false; + } + + startRecording() { + console.log('START RECORDING'); + this.startRecordingClicked.emit(); + //TODO: REMOVE + const info: RecordingInfo = { + status: RecordingStatus.STARTED, + id: '1', + name: 'akajo', + reason: null + }; + this.recordingService.startRecording(info); + } + stopRecording() { + console.log('STOP RECORDING'); + this.stopRecordingClicked.emit(); + //TODO: REMOVE + const info: RecordingInfo = { + status: RecordingStatus.STOPPED, + id: '1', + name: 'akajo', + reason: 'lalal' + }; + this.recordingService.stopRecording(info); + } + + subscribeToRecordingStatus() { + this.recordingSubscription = this.recordingService.recordingStatusObs.subscribe((info: RecordingInfo) => { + if (info) { + this.recordingStatus = info.status; + if (info.status === RecordingStatus.STARTED) { + this.recording = info; + } else { + this.recording = null; + } + } + }); + } +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css new file mode 100644 index 00000000..ba44a10a --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css @@ -0,0 +1,47 @@ +#background-effects-container { + margin: 20px; + background-color: var(--ov-panel-background); + border-radius: var(--ov-panel-radius); + max-height: calc(100% - 40px); + min-height: calc(100% - 40px); +} + +.header-container { + padding: 10px; + display: flex; +} + +.header-container h3 { + margin-left: 5px; + margin-top: auto; + margin-bottom: auto; + font-weight: bold; +} + +.header-container button { + margin-left: auto; + border-radius: var(--ov-buttons-radius); +} + +.effects-container { + display: block !important; + overflow-y: auto; + overflow-x: hidden; + padding: 10px; +} + +.effect-button { + margin: 5px; + border-radius: var(--ov-panel-radius); + background-color: var(--ov-light-color); + width: 50px; + height: 50px; +} + +.active-effect-btn { + border: 2px solid; +} + +#hard-blur-btn .mat-icon { + font-weight: bold !important; +} \ No newline at end of file diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html new file mode 100644 index 00000000..dfa25b6f --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html @@ -0,0 +1,45 @@ +
+
+

Background effects

+ +
+ +
+
+

Blurred background

+
+ + + +
+
+
+
+

Background images

+
+
+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.spec.ts new file mode 100644 index 00000000..e00a9066 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BackgroundEffectsPanelComponent } from './background-effects-panel.component'; + +describe('BackgroundEffectsPanelComponent', () => { + let component: BackgroundEffectsPanelComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ BackgroundEffectsPanelComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BackgroundEffectsPanelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts new file mode 100644 index 00000000..d6eb9e68 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts @@ -0,0 +1,24 @@ +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { PanelType } from '../../../models/panel.model'; +import { PanelService } from '../../../services/panel/panel.service'; + +@Component({ + selector: 'ov-background-effects-panel', + templateUrl: './background-effects-panel.component.html', + styleUrls: ['./background-effects-panel.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class BackgroundEffectsPanelComponent implements OnInit { + + effectActive: string; + + constructor(private panelService: PanelService) { } + + ngOnInit(): void { + } + + close() { + this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS); + } + +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html index 0a897199..4f578c39 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html @@ -9,9 +9,19 @@ + + + + + + + + + + + + - - diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts index 3097a100..92a9f216 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts @@ -1,6 +1,12 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core'; import { skip, Subscription } from 'rxjs'; -import { ChatPanelDirective, AdditionalPanelsDirective, ParticipantsPanelDirective } from '../../directives/template/openvidu-angular.directive'; +import { + ChatPanelDirective, + AdditionalPanelsDirective, + ParticipantsPanelDirective, + BackgroundEffectsPanelDirective, + ActivitiesPanelDirective +} from '../../directives/template/openvidu-angular.directive'; import { PanelType } from '../../models/panel.model'; import { PanelService } from '../../services/panel/panel.service'; @@ -49,19 +55,28 @@ import { PanelService } from '../../services/panel/panel.service'; }) export class PanelComponent implements OnInit { /** - * @ignore - */ + * @ignore + */ @ContentChild('participantsPanel', { read: TemplateRef }) participantsPanelTemplate: TemplateRef; /** - * @ignore - */ + * @ignore + */ + @ContentChild('backgroundEffectsPanel', { read: TemplateRef }) backgroundEffectsPanelTemplate: TemplateRef; + + /** + * @ignore + */ + @ContentChild('activitiesPanel', { read: TemplateRef }) activitiesPanelTemplate: TemplateRef; + /** + * @ignore + */ @ContentChild('chatPanel', { read: TemplateRef }) chatPanelTemplate: TemplateRef; /** - * @ignore - */ - @ContentChild('additionalPanels', { read: TemplateRef }) additionalPanelsTemplate: TemplateRef; + * @ignore + */ + @ContentChild('additionalPanels', { read: TemplateRef }) additionalPanelsTemplate: TemplateRef; @ContentChild(ParticipantsPanelDirective) set externalParticipantPanel(externalParticipantsPanel: ParticipantsPanelDirective) { @@ -72,6 +87,24 @@ export class PanelComponent implements OnInit { } } + @ContentChild(BackgroundEffectsPanelDirective) + set externalBackgroundEffectsPanel(externalBackgroundEffectsPanel: BackgroundEffectsPanelDirective) { + // This directive will has value only when BACKGROUND EFFECTS PANEL component tagged with '*ovBackgroundEffectsPanel' + // is inside of the PANEL component tagged with '*ovPanel' + if (externalBackgroundEffectsPanel) { + this.backgroundEffectsPanelTemplate = externalBackgroundEffectsPanel.template; + } + } + + @ContentChild(ActivitiesPanelDirective) + set externalActivitiesPanel(externalActivitiesPanel: ActivitiesPanelDirective) { + // This directive will has value only when ACTIVITIES PANEL component tagged with '*ovActivitiesPanel' + // is inside of the PANEL component tagged with '*ovPanel' + if (externalActivitiesPanel) { + this.activitiesPanelTemplate = externalActivitiesPanel.template; + } + } + @ContentChild(ChatPanelDirective) set externalChatPanel(externalChatPanel: ChatPanelDirective) { // This directive will has value only when CHAT PANEL component tagged with '*ovChatPanel' @@ -92,16 +125,18 @@ export class PanelComponent implements OnInit { isParticipantsPanelOpened: boolean; isChatPanelOpened: boolean; + isBackgroundEffectsPanelOpened: boolean; + isActivitiesPanelOpened: boolean; /** - * @internal - */ + * @internal + */ isExternalPanelOpened: boolean; private panelSubscription: Subscription; /** - * @ignore - */ + * @ignore + */ constructor(protected panelService: PanelService, private cd: ChangeDetectorRef) {} ngOnInit(): void { @@ -115,11 +150,15 @@ export class PanelComponent implements OnInit { } private subscribeToPanelToggling() { - this.panelSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: PanelType | string }) => { - this.isChatPanelOpened = ev.opened && ev.type === PanelType.CHAT; - this.isParticipantsPanelOpened = ev.opened && ev.type === PanelType.PARTICIPANTS; - this.isExternalPanelOpened = ev.opened && ev.type !== PanelType.PARTICIPANTS && ev.type !== PanelType.CHAT; - this.cd.markForCheck(); - }); + this.panelSubscription = this.panelService.panelOpenedObs + .pipe(skip(1)) + .subscribe((ev: { opened: boolean; type?: PanelType | string }) => { + this.isChatPanelOpened = ev.opened && ev.type === PanelType.CHAT; + this.isParticipantsPanelOpened = ev.opened && ev.type === PanelType.PARTICIPANTS; + this.isBackgroundEffectsPanelOpened = ev.opened && ev.type === PanelType.BACKGROUND_EFFECTS; + this.isActivitiesPanelOpened = ev.opened && ev.type === PanelType.ACTIVITIES; + this.isExternalPanelOpened = ev.opened && ev.type !== PanelType.PARTICIPANTS && ev.type !== PanelType.CHAT; + this.cd.markForCheck(); + }); } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css index 874dee36..d139422b 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css @@ -16,11 +16,28 @@ hr { margin: 0; } -ov-layout { - height: -webkit-fill-available; - height: -moz-available; - width: -webkit-fill-available; - width: -moz-available; +#prejoin-container ::ng-deep .sidenav-container { + padding-top: 0px !important; +} +#prejoin-container ::ng-deep #background-effects-container { + margin: 0px !important; + max-height: 100% !important; + height: 100% !important; +} + +#prejoin-container ::ng-deep .mat-drawer-container, #prejoin-container ::ng-deep .sidenav-menu { + background-color: var(--ov-light-color) !important; +} +#prejoin-container ::ng-deep .sidenav-menu { + width: 320px; +} + +#background-effects-btn { + position: absolute; + z-index: 1; + background-color: var(--ov-secondary-color); + bottom: 5px; + right: 5px; } .media-panel { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html index e3ec1338..3d119729 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html @@ -1,24 +1,51 @@
- - - + + + + + + + - + + + + + + + + + +

Set your name

-
+
- Nickname - +
Audio devices - + {{ microphone.label }} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts index 667adc46..0f0275b8 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts @@ -1,13 +1,23 @@ -import { Component, HostListener, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core'; +import { + Component, + HostListener, + OnDestroy, + OnInit, + Output, + EventEmitter +} from '@angular/core'; import { PublisherProperties } from 'openvidu-browser'; import { Subscription } from 'rxjs'; import { CustomDevice } from '../../models/device.model'; import { ILogger } from '../../models/logger.model'; +import { PanelType } from '../../models/panel.model'; import { ParticipantAbstractModel } from '../../models/participant.model'; +import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service'; import { DeviceService } from '../../services/device/device.service'; import { LayoutService } from '../../services/layout/layout.service'; import { LoggerService } from '../../services/logger/logger.service'; import { OpenViduService } from '../../services/openvidu/openvidu.service'; +import { PanelService } from '../../services/panel/panel.service'; import { ParticipantService } from '../../services/participant/participant.service'; import { StorageService } from '../../services/storage/storage.service'; @@ -33,9 +43,21 @@ export class PreJoinComponent implements OnInit, OnDestroy { hasAudioDevices: boolean; isLoading = true; nickname: string; + isOpenViduCE: boolean; + /** + * @ignore + */ + showBackgroundEffectsButton: boolean = true; + /** + * @ignore + */ + isMinimal: boolean = false; + private log: ILogger; private localParticipantSubscription: Subscription; private screenShareStateSubscription: Subscription; + private minimalSub: Subscription; + private backgroundEffectsButtonSub: Subscription; @HostListener('window:resize') sizeChange() { @@ -49,13 +71,17 @@ export class PreJoinComponent implements OnInit, OnDestroy { private loggerSrv: LoggerService, private openviduService: OpenViduService, private participantService: ParticipantService, + protected panelService: PanelService, + private libService: OpenViduAngularConfigService, private storageSrv: StorageService ) { this.log = this.loggerSrv.get('PreJoinComponent'); } ngOnInit() { + this.subscribeToPrejoinDirectives(); this.subscribeToLocalParticipantEvents(); + this.isOpenViduCE = this.openviduService.isOpenViduCE(); this.windowSize = window.innerWidth; this.hasVideoDevices = this.deviceSrv.hasVideoDeviceAvailable(); @@ -79,6 +105,9 @@ export class PreJoinComponent implements OnInit, OnDestroy { if (this.screenShareStateSubscription) { this.screenShareStateSubscription.unsubscribe(); } + + if (this.backgroundEffectsButtonSub) this.backgroundEffectsButtonSub.unsubscribe(); + if (this.minimalSub) this.minimalSub.unsubscribe(); } async onCameraSelected(event: any) { @@ -138,6 +167,10 @@ export class PreJoinComponent implements OnInit, OnDestroy { this.onJoinButtonClicked.emit(); } + toggleBackgroundEffects() { + this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS); + } + private subscribeToLocalParticipantEvents() { this.localParticipantSubscription = this.participantService.localParticipantObs.subscribe((p) => { this.localParticipant = p; @@ -145,6 +178,17 @@ export class PreJoinComponent implements OnInit, OnDestroy { }); } + private subscribeToPrejoinDirectives() { + this.minimalSub = this.libService.minimalObs.subscribe((value: boolean) => { + this.isMinimal = value; + // this.cd.markForCheck(); + }); + this.backgroundEffectsButtonSub = this.libService.backgroundEffectsButton.subscribe((value: boolean) => { + this.showBackgroundEffectsButton = value; + // this.cd.markForCheck(); + }); + } + //? After test in Chrome and Firefox, the devices always have labels. //? It's not longer needed // private handlePublisherSuccess(publisher: Publisher) { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html index 16ed92b0..7e2fc943 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html @@ -1,5 +1,5 @@
- + - diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts index b1290fd0..50804483 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts @@ -2,14 +2,16 @@ import { ChangeDetectionStrategy, Component, ContentChild, + ElementRef, EventEmitter, HostListener, + Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core'; -import { Subscriber, Session, StreamEvent, StreamPropertyChangedEvent, SessionDisconnectedEvent, ConnectionEvent } from 'openvidu-browser'; +import { Subscriber, Session, StreamEvent, StreamPropertyChangedEvent, SessionDisconnectedEvent, ConnectionEvent, RecordingEvent } from 'openvidu-browser'; import { VideoType } from '../../models/video-type.model'; import { ILogger } from '../../models/logger.model'; @@ -27,7 +29,7 @@ import { LayoutService } from '../../services/layout/layout.service'; import { Subscription, skip } from 'rxjs'; import { PanelType } from '../../models/panel.model'; import { PanelService } from '../../services/panel/panel.service'; -import { PlatformService } from '../../services/platform/platform.service'; +import { RecordingService } from '../../services/recording/recording.service'; /** * @internal @@ -44,6 +46,7 @@ export class SessionComponent implements OnInit { @ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef; @ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef; + @Input() usedInPrejoinPage = false; @Output() onSessionCreated = new EventEmitter(); session: Session; @@ -69,7 +72,8 @@ export class SessionComponent implements OnInit { protected chatService: ChatService, protected tokenService: TokenService, protected layoutService: LayoutService, - protected panelService: PanelService + protected panelService: PanelService, + private recordingService: RecordingService ) { this.log = this.loggerSrv.get('SessionComponent'); } @@ -94,24 +98,40 @@ export class SessionComponent implements OnInit { }, 0); } - async ngOnInit() { - this.session = this.openviduService.getWebcamSession(); - this.sessionScreen = this.openviduService.getScreenSession(); - this.subscribeToConnectionCreatedAndDestroyed(); - this.subscribeToStreamCreated(); - this.subscribeToStreamDestroyed(); - this.subscribeToStreamPropertyChange(); - this.subscribeToNicknameChanged(); - this.chatService.subscribeToChat(); - this.subscribeToReconnection(); - this.onSessionCreated.emit(this.session); + @ViewChild('videoContainer', {static:false, read: ElementRef }) + set videoContainer(container: ElementRef) { + setTimeout(() => { + if (container && !this.toolbarTemplate) { + container.nativeElement.style.height = '100%'; + container.nativeElement.style.minHeight = '100%'; + this.layoutService.update(); + } + }, 0); + } - await this.connectToSession(); - // Workaround, firefox does not have audio when publisher join with muted camera - // if (this.platformService.isFirefox() && !this.participantService.hasCameraVideoActive()) { - // this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), true); - // this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), false); - // } + async ngOnInit() { + if(!this.usedInPrejoinPage){ + this.session = this.openviduService.getWebcamSession(); + this.sessionScreen = this.openviduService.getScreenSession(); + this.subscribeToConnectionCreatedAndDestroyed(); + this.subscribeToStreamCreated(); + this.subscribeToStreamDestroyed(); + this.subscribeToStreamPropertyChange(); + this.subscribeToNicknameChanged(); + this.chatService.subscribeToChat(); + this.subscribeToReconnection(); + // if(RecordingEnabled){ + this.subscribeToRecordingEvents(); + // } + this.onSessionCreated.emit(this.session); + + await this.connectToSession(); + // Workaround, firefox does not have audio when publisher join with muted camera + // if (this.platformService.isFirefox() && !this.participantService.hasCameraVideoActive()) { + // this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), true); + // this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), false); + // } + } } ngOnDestroy() { @@ -270,4 +290,14 @@ export class SessionComponent implements OnInit { } }); } + + private subscribeToRecordingEvents() { + this.session.on('recordingStarted', (event: RecordingEvent) => { + this.recordingService.startRecording(event); + }); + + this.session.on('recordingStopped', (event: RecordingEvent) => { + this.recordingService.stopRecording(event); + }); + } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css index 43e9d3b8..4ac05e71 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css @@ -49,10 +49,6 @@ top: 40px; } - mat-error { - text-align: center; - color: #353535; - } video { -o-object-fit: cover; @@ -115,17 +111,6 @@ border-radius: var(--ov-video-radius); } - mat-error, - ::ng-deep .mat-focused .mat-form-field-label, - ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-label { - color: #cacaca !important; - } - - ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline, - ::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple { - background-color: #cacaca !important; - } - input { caret-color: #ffffff !important; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css index 285d4174..505e7298 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css @@ -10,7 +10,7 @@ right: 0; } -#info-container>div { +#info-container > div { display: flex; align-items: center; } @@ -33,7 +33,8 @@ background-color: var(--ov-warn-color) !important; } -.active-btn, ::ng-deep .active-btn { +.active-btn, +::ng-deep .active-btn { background-color: var(--ov-tertiary-color) !important; } @@ -41,7 +42,8 @@ font-size: 24px; } -#media-buttons-container button, #menu-buttons-container button { +#media-buttons-container button, +#menu-buttons-container button { border-radius: var(--ov-buttons-radius); } @@ -53,15 +55,42 @@ padding: 10px; } - #session-name { +#session-name { font-family: 'Ubuntu', sans-serif; font-weight: bold; font-size: 15px; height: fit-content; padding: 0px 15px; - } +} +#session-info-container { + display: flex; +} - #point { +.colapsed { + flex-direction: column; +} + +#recording-tag { + padding: 0 15px; + background-color: var(--ov-warn-color); + border-radius: var(--ov-panel-radius); + width: fit-content; + font-size: 12px; + text-align: center; + line-height: 20px; + margin: auto; + animation: blinker 1.5s linear infinite; + + +} +#recording-tag mat-icon { + font-size: 16px; + display: inline; + vertical-align: sub; + margin-right: 5px; +} + +#point { width: 10px; height: 10px; position: absolute; @@ -71,39 +100,45 @@ background-color: #ffa600; border: 1px solid #000; z-index: 99999; - } +} - #leave-btn { - background-color: var(--ov-warn-color) !important; - border-radius: var(--ov-leave-button-radius) !important; - width: 60px !important; - } +#leave-btn { + background-color: var(--ov-warn-color) !important; + border-radius: var(--ov-leave-button-radius) !important; + width: 60px !important; +} - - .tooltipList { +.tooltipList { white-space: pre; - } +} - - #navChatButton .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content { +#navChatButton .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content { left: -17px; - } +} - #navChatButton .mat-badge-medium.mat-badge-above .mat-badge-content { +#navChatButton .mat-badge-medium.mat-badge-above .mat-badge-content { top: -6px; - } +} - .mat-icon-button[disabled] { +.mat-icon-button[disabled] { color: #fff; - } - @media (max-width: 750px) { +} +@media (max-width: 750px) { #session-name { - display: none; + display: none; } - } +} - @media (max-width: 850px) { +@media (max-width: 850px) { #branding-logo { - display: none; + display: none; } +} + +::ng-deep .mat-menu-panel { + margin-bottom: 10px; +} + +@keyframes blinker { + 50% { opacity: 0.2; } } \ No newline at end of file diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html index 93b188a2..cad89632 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html @@ -1,8 +1,14 @@
-
+
- {{ session.sessionId }} +
+ {{ session.sessionId }} +
+ radio_button_checked + REC +
+
@@ -47,7 +53,7 @@ + + + + + + + + + + + + @@ -67,6 +110,19 @@