# All files / src/lib/services/layout layout.service.ts

72.97% Statements 27/37
41.37% Branches 12/29
66.66% Functions 8/12
70.96% Lines 22/31

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
    831x
    1x
    1x
    1x
    1x

    1x

    3x
    3x
    3x

    1x

    1x

    1x

    1x
    1x
    1x

    1x

    1x

    2x

    1x
    1x

    1x

    1x

     import { Injectable } from '@angular/core';
    import { BehaviorSubject, Observable } from 'rxjs';
    impoIrt { LayoutClass, OpenViduLayout, OpenViduLayoutOptions } from '../../models/layout.model';
    import { DocumentService } from '../document/document.service';

    @Injectable({
    	providedIn: 'root'
    })
    export class LayoutService {
    	layoutWidthObs: Observable<number>;
    	private _layoutWidthObs: BehaviorSubject<number> = new BehaviorSubject(0);
    	private openviduLayout: OpenViduLayout;
    	private openviduLayoutOptions: OpenViduLayoutOptions;

    	constructor(private documentService: DocumentService) {
    		this.layoutWidthObs = this._layoutWidthObs.asObservable();
    	}
    I
    	initialize(timeout: number = null) {
    		if (!!timeout) {
    			setTimeout(() => {
    				this._initialize();
    			}, timeout);
    		} else {
    			this._initialize();
    		}
    		this.sendLayoutWidthEvent();
    	}

    	private _initialize() {
    		this.openviduLayout = new OpenViduLayout();
    		this.openviduLayoutOptions = this.getOptions();
    		this.openviduLayout.initLayoutContainer(document.getElementById('layout'), this.openviduLayoutOptions);
    	}

    	getOptions(): OpenViduLayoutOptions {
    		const options = {
    			maxRatio: 3 / 2, // The narrowest ratio that will be used (default 2x3)
    			minRatio: 9 / 15, // The widest ratio that will be used (default 16x9)
    			fixedRatio: false /* If this is true then the aspect ratio of the video is maintained
          and minRatio and maxRatio are ignored (default false) */,
    			bigClass: LayoutClass.BIG_ELEMENT, // The class to add to elements that should be sized bigger
    			smallClass: LayoutClass.SMALL_ELEMENT,
    			bigPercentage: 0.85, // The maximum percentage of space the big ones should take up
    			bigFixedRatio: false, // fixedRatio for the big ones
    			bigMaxRatio: 3 / 2, // The narrowest ratio to use for the big elements (default 2x3)
    			bigMinRatio: 9 / 16, // The widest ratio to use for the big elements (default 16x9)
    			bigFirst: true, // Whether to place the big one in the top left (true) or bottom right
    			animate: true // Whether you want to animate the transitions. Invalid property, to disable it remove   transition: all .1s linear;
    		};
    		return options;
    	}

    	update(timeout?: number) {
    		if (!!this.openviduLayout) {
    			if (!timeout) {
    				this.openviduLayout.updateLayout();
    			} else {
    				setTimeout(() => {
    					this.openviduLayout.updateLayout();
    				}, timeout);
    			}
    			this.sendLayoutWidthEvent();
    		}
    	}

    	getLayout() {
    		return this.openviduLayout;
    	}

    	clear() {
    		this.openviduLayout = null;
    	}

    	private sendLayoutWidthEvent() {
    		const sidenavLayoutElement = this.documentService.getHTMLElementByClassName(
    			this.openviduLayout.getLayoutContainer(),
    			LayoutClass.SIDENAV_CONTAINER
    		);
    		this._layoutWidthObs.next(sidenavLayoutElement.clientWidth);
    	}
    }