Merge pull request #4956 from GabrielInTheWorld/projectorUI
Improves the layout of the projector
This commit is contained in:
Emanuel Schütze
GitHub
commit
4400d805f5
@ -5,290 +5,296 @@
|
|||||||
</div>
|
</div>
|
||||||
</os-head-bar>
|
</os-head-bar>
|
||||||
|
|
||||||
<div class="content-container" *ngIf="projector">
|
<os-grid-layout *ngIf="projector">
|
||||||
<div class="column-left">
|
<os-tile [preferredSize]="projectorTileSizeLeft">
|
||||||
<a [routerLink]="['/projector', projector.id]">
|
<div *ngIf="projector" class="column-left">
|
||||||
<div id="projector">
|
<a [routerLink]="['/projector', projector.id]">
|
||||||
<os-projector [projector]="projector"></os-projector>
|
<div id="projector">
|
||||||
|
<os-projector [projector]="projector"></os-projector>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<!-- Controls under the projector preview -->
|
||||||
|
<div *osPerms="'core.can_manage_projector'" class="control-group projector-controls">
|
||||||
|
<!-- scale up -->
|
||||||
|
<button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Up)">
|
||||||
|
<mat-icon>zoom_in</mat-icon>
|
||||||
|
</button>
|
||||||
|
<!-- scale down -->
|
||||||
|
<button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Down)">
|
||||||
|
<mat-icon>zoom_out</mat-icon>
|
||||||
|
</button>
|
||||||
|
<!-- reset button -->
|
||||||
|
<button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Reset)">
|
||||||
|
<mat-icon>refresh</mat-icon>
|
||||||
|
</button>
|
||||||
|
<!-- scaling indicator -->
|
||||||
|
<div class="button-size" [ngClass]="projector.scale != 0 ? 'warn' : ''">{{ projector.scale }}</div>
|
||||||
|
|
||||||
|
<!-- scroll viewport up (fast), decrease scroll counter -->
|
||||||
|
<button
|
||||||
|
[disabled]="projector.scroll <= 4"
|
||||||
|
type="button"
|
||||||
|
class="spacer-left-50"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="scroll(scrollScaleDirection.Down, 5)"
|
||||||
|
matTooltip="{{ 'Scroll up (big step)' | translate }}"
|
||||||
|
>
|
||||||
|
<mat-icon>arrow_upward</mat-icon>
|
||||||
|
</button>
|
||||||
|
<!-- scroll viewport up (slow), decrease scroll counter -->
|
||||||
|
<button
|
||||||
|
[disabled]="projector.scroll <= 0"
|
||||||
|
type="button"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="scroll(scrollScaleDirection.Down)"
|
||||||
|
matTooltip="{{ 'Scroll up' | translate }}"
|
||||||
|
>
|
||||||
|
<mat-icon>arrow_drop_up</mat-icon>
|
||||||
|
</button>
|
||||||
|
<!-- scroll viewport down (slow), increase scroll counter -->
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="scroll(scrollScaleDirection.Up)"
|
||||||
|
matTooltip="{{ 'Scroll down' | translate }}"
|
||||||
|
>
|
||||||
|
<mat-icon>arrow_drop_down</mat-icon>
|
||||||
|
</button>
|
||||||
|
<!-- scroll viewport down (fast), increase scroll counter -->
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="scroll(scrollScaleDirection.Up, 5)"
|
||||||
|
matTooltip="{{ 'Scroll down (big step)' | translate }}"
|
||||||
|
>
|
||||||
|
<mat-icon>arrow_downward</mat-icon>
|
||||||
|
</button>
|
||||||
|
<!-- reset button -->
|
||||||
|
<button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Reset)">
|
||||||
|
<mat-icon>refresh</mat-icon>
|
||||||
|
</button>
|
||||||
|
<!-- scroll indicator -->
|
||||||
|
<div class="button-size" [ngClass]="projector.scroll != 0 ? 'warn' : ''">
|
||||||
|
{{ projector.scroll }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
<!-- Controls under the projector preview -->
|
|
||||||
<div *osPerms="'core.can_manage_projector'" class="control-group projector-controls">
|
|
||||||
<!-- scale up -->
|
|
||||||
<button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Up)">
|
|
||||||
<mat-icon>zoom_in</mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- scale down -->
|
|
||||||
<button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Down)">
|
|
||||||
<mat-icon>zoom_out</mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- reset button -->
|
|
||||||
<button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Reset)">
|
|
||||||
<mat-icon>refresh</mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- scaling indicator -->
|
|
||||||
<div class="button-size" [ngClass]="projector.scale != 0 ? 'warn' : ''">{{ projector.scale }}</div>
|
|
||||||
|
|
||||||
<!-- scroll viewport up (fast), decrease scroll counter -->
|
|
||||||
<button
|
|
||||||
[disabled]="projector.scroll <= 4"
|
|
||||||
type="button"
|
|
||||||
class="spacer-left-50"
|
|
||||||
mat-icon-button
|
|
||||||
(click)="scroll(scrollScaleDirection.Down, 5)"
|
|
||||||
matTooltip="{{ 'Scroll up (big step)' | translate }}"
|
|
||||||
>
|
|
||||||
<mat-icon>arrow_upward</mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- scroll viewport up (slow), decrease scroll counter -->
|
|
||||||
<button
|
|
||||||
[disabled]="projector.scroll <= 0"
|
|
||||||
type="button"
|
|
||||||
mat-icon-button
|
|
||||||
(click)="scroll(scrollScaleDirection.Down)"
|
|
||||||
matTooltip="{{ 'Scroll up' | translate }}"
|
|
||||||
>
|
|
||||||
<mat-icon>arrow_drop_up</mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- scroll viewport down (slow), increase scroll counter -->
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
mat-icon-button
|
|
||||||
(click)="scroll(scrollScaleDirection.Up)"
|
|
||||||
matTooltip="{{ 'Scroll down' | translate }}"
|
|
||||||
>
|
|
||||||
<mat-icon>arrow_drop_down</mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- scroll viewport down (fast), increase scroll counter -->
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
mat-icon-button
|
|
||||||
(click)="scroll(scrollScaleDirection.Up, 5)"
|
|
||||||
matTooltip="{{ 'Scroll down (big step)' | translate }}"
|
|
||||||
>
|
|
||||||
<mat-icon>arrow_downward</mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- reset button -->
|
|
||||||
<button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Reset)">
|
|
||||||
<mat-icon>refresh</mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- scroll indicator -->
|
|
||||||
<div class="button-size" [ngClass]="projector.scroll != 0 ? 'warn' : ''">{{ projector.scroll }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</os-tile>
|
||||||
<div class="column-right" *osPerms="'core.can_manage_projector'">
|
<os-tile [preferredSize]="projectorTileSizeRight">
|
||||||
<div class="control-group slide-controls">
|
<div *osPerms="'core.can_manage_projector'">
|
||||||
<button
|
<div class="control-group slide-controls">
|
||||||
type="button"
|
<button
|
||||||
mat-button
|
type="button"
|
||||||
(click)="projectPreviousSlide()"
|
mat-button
|
||||||
[disabled]="projector?.elements_history.length === 0"
|
(click)="projectPreviousSlide()"
|
||||||
>
|
[disabled]="projector?.elements_history.length === 0"
|
||||||
<mat-icon>arrow_back</mat-icon>
|
>
|
||||||
<span translate>Previous</span>
|
<mat-icon>arrow_back</mat-icon>
|
||||||
</button>
|
<span translate>Previous</span>
|
||||||
<button
|
</button>
|
||||||
type="button"
|
<button
|
||||||
mat-button
|
type="button"
|
||||||
(click)="projectNextSlide()"
|
mat-button
|
||||||
[disabled]="projector?.elements_preview.length === 0"
|
(click)="projectNextSlide()"
|
||||||
>
|
[disabled]="projector?.elements_preview.length === 0"
|
||||||
<span translate>Next</span>
|
>
|
||||||
<mat-icon>arrow_forward</mat-icon>
|
<span translate>Next</span>
|
||||||
</button>
|
<mat-icon>arrow_forward</mat-icon>
|
||||||
<hr />
|
</button>
|
||||||
</div>
|
<hr />
|
||||||
|
|
||||||
<div>
|
|
||||||
<div *ngIf="projector.non_stable_elements.length">
|
|
||||||
<mat-list>
|
|
||||||
<mat-list-item
|
|
||||||
*ngFor="let element of projector.non_stable_elements"
|
|
||||||
class="currentElement backgroundColorAccent"
|
|
||||||
>
|
|
||||||
<button type="button" mat-icon-button (click)="unprojectCurrent(element)">
|
|
||||||
<mat-icon>videocam</mat-icon>
|
|
||||||
</button>
|
|
||||||
{{ getSlideTitle(element) }}
|
|
||||||
<div class="button-right">
|
|
||||||
<div>
|
|
||||||
<button type="button" mat-icon-button (click)="unprojectCurrent(element)">
|
|
||||||
<mat-icon>close</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</mat-list-item>
|
|
||||||
</mat-list>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Expandable elements -->
|
<div>
|
||||||
<mat-accordion multi="true">
|
<div *ngIf="projector.non_stable_elements.length">
|
||||||
<!-- Queue -->
|
<mat-list>
|
||||||
<mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true" class="queue">
|
<mat-list-item
|
||||||
<mat-expansion-panel-header>
|
*ngFor="let element of projector.non_stable_elements"
|
||||||
<span translate>Queue</span>
|
class="currentElement backgroundColorAccent"
|
||||||
</mat-expansion-panel-header>
|
|
||||||
<div
|
|
||||||
cdkDropList
|
|
||||||
class="drop-list"
|
|
||||||
[cdkDropListDisabled]="!editQueue"
|
|
||||||
(cdkDropListDropped)="onSortingChange($event)"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="drop-list-entry queue-element backgroundColorLight"
|
|
||||||
*ngFor="let element of projector.elements_preview; let i = index"
|
|
||||||
cdkDrag
|
|
||||||
>
|
>
|
||||||
<div class="drag-handle" cdkDragHandle *ngIf="editQueue">
|
<button type="button" mat-icon-button (click)="unprojectCurrent(element)">
|
||||||
<mat-icon>drag_indicator</mat-icon>
|
<mat-icon>videocam</mat-icon>
|
||||||
</div>
|
</button>
|
||||||
<div class="drag-handle no-drag" *ngIf="!editQueue">
|
{{ getSlideTitle(element) }}
|
||||||
<button type="button" mat-icon-button (click)="projectNow(i)">
|
<div class="button-right">
|
||||||
<mat-icon>videocam</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="name">
|
|
||||||
<span>{{ getSlideTitle(element) }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="button-right" *ngIf="editQueue">
|
|
||||||
<div>
|
<div>
|
||||||
<button type="button" mat-icon-button (click)="removePreviewElement(i)">
|
<button type="button" mat-icon-button (click)="unprojectCurrent(element)">
|
||||||
<mat-icon>delete</mat-icon>
|
<mat-icon>close</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</mat-list-item>
|
||||||
|
</mat-list>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expandable elements -->
|
||||||
|
<mat-accordion multi="true">
|
||||||
|
<!-- Queue -->
|
||||||
|
<mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true" class="queue">
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<span translate>Queue</span>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
<div
|
||||||
|
cdkDropList
|
||||||
|
class="drop-list"
|
||||||
|
[cdkDropListDisabled]="!editQueue"
|
||||||
|
(cdkDropListDropped)="onSortingChange($event)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="drop-list-entry queue-element backgroundColorLight"
|
||||||
|
*ngFor="let element of projector.elements_preview; let i = index"
|
||||||
|
cdkDrag
|
||||||
|
>
|
||||||
|
<div class="drag-handle" cdkDragHandle *ngIf="editQueue">
|
||||||
|
<mat-icon>drag_indicator</mat-icon>
|
||||||
|
</div>
|
||||||
|
<div class="drag-handle no-drag" *ngIf="!editQueue">
|
||||||
|
<button type="button" mat-icon-button (click)="projectNow(i)">
|
||||||
|
<mat-icon>videocam</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<span>{{ getSlideTitle(element) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="button-right" *ngIf="editQueue">
|
||||||
|
<div>
|
||||||
|
<button type="button" mat-icon-button (click)="removePreviewElement(i)">
|
||||||
|
<mat-icon>delete</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<mat-action-row>
|
||||||
<mat-action-row>
|
<button *ngIf="!editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
|
||||||
<button *ngIf="!editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
|
<mat-icon>edit</mat-icon>
|
||||||
<mat-icon>edit</mat-icon>
|
|
||||||
</button>
|
|
||||||
<button *ngIf="editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
|
|
||||||
<mat-icon>close</mat-icon>
|
|
||||||
</button>
|
|
||||||
</mat-action-row>
|
|
||||||
</mat-expansion-panel>
|
|
||||||
|
|
||||||
<!-- Previous Slides -->
|
|
||||||
<mat-expansion-panel *ngIf="projector.elements_history.length" class="previous-slides">
|
|
||||||
<mat-expansion-panel-header>
|
|
||||||
<span translate>Previous slides</span>
|
|
||||||
</mat-expansion-panel-header>
|
|
||||||
<p *ngFor="let elements of projector.elements_history; let i = index">
|
|
||||||
{{ i + 1 }}. {{ getSlideTitle(elements[0]) }}
|
|
||||||
</p>
|
|
||||||
</mat-expansion-panel>
|
|
||||||
|
|
||||||
<!-- countdowns -->
|
|
||||||
<mat-expansion-panel>
|
|
||||||
<mat-expansion-panel-header>
|
|
||||||
<span translate>Countdowns</span>
|
|
||||||
</mat-expansion-panel-header>
|
|
||||||
<mat-list>
|
|
||||||
<mat-list-item *ngFor="let countdown of countdowns" class="larger-mat-list-item">
|
|
||||||
<os-countdown-controls
|
|
||||||
class="dynamic-list-entry"
|
|
||||||
[countdown]="countdown"
|
|
||||||
[projector]="projector.projector"
|
|
||||||
(editEvent)="openCountdownDialog($event)"
|
|
||||||
></os-countdown-controls>
|
|
||||||
</mat-list-item>
|
|
||||||
</mat-list>
|
|
||||||
<mat-action-row>
|
|
||||||
<button type="button" mat-button (click)="openCountdownDialog()">
|
|
||||||
<mat-icon>add</mat-icon>
|
|
||||||
<span translate>Add countdown</span>
|
|
||||||
</button>
|
|
||||||
</mat-action-row>
|
|
||||||
</mat-expansion-panel>
|
|
||||||
|
|
||||||
<!-- messages -->
|
|
||||||
<mat-expansion-panel>
|
|
||||||
<mat-expansion-panel-header>
|
|
||||||
<span translate>Messages</span>
|
|
||||||
</mat-expansion-panel-header>
|
|
||||||
<mat-list>
|
|
||||||
<mat-list-item *ngFor="let message of messages" class="larger-mat-list-item">
|
|
||||||
<os-message-controls
|
|
||||||
class="dynamic-list-entry"
|
|
||||||
[message]="message"
|
|
||||||
[projector]="projector.projector"
|
|
||||||
(editEvent)="openMessagesDialog($event)"
|
|
||||||
>
|
|
||||||
</os-message-controls>
|
|
||||||
</mat-list-item>
|
|
||||||
</mat-list>
|
|
||||||
<mat-action-row>
|
|
||||||
<button type="button" mat-button (click)="openMessagesDialog()">
|
|
||||||
<mat-icon>add</mat-icon>
|
|
||||||
<span translate>Add message</span>
|
|
||||||
</button>
|
|
||||||
</mat-action-row>
|
|
||||||
</mat-expansion-panel>
|
|
||||||
|
|
||||||
<!-- Current list of speakers -->
|
|
||||||
<mat-expansion-panel>
|
|
||||||
<mat-expansion-panel-header>
|
|
||||||
<span translate>Current list of speakers</span>
|
|
||||||
</mat-expansion-panel-header>
|
|
||||||
|
|
||||||
<!-- Slide-->
|
|
||||||
<mat-list *ngIf="projectorCount > 1">
|
|
||||||
<mat-list-item>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
mat-mini-fab
|
|
||||||
(click)="toggleClos(false)"
|
|
||||||
[ngClass]="isClosProjected(false) ? 'projector-active' : 'projector-inactive'"
|
|
||||||
>
|
|
||||||
<mat-icon>videocam</mat-icon>
|
|
||||||
</button>
|
</button>
|
||||||
<span class="spacer-left-10" translate>Slide</span>
|
<button *ngIf="editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
|
||||||
</mat-list-item>
|
<mat-icon>close</mat-icon>
|
||||||
</mat-list>
|
|
||||||
|
|
||||||
<!-- Overlay -->
|
|
||||||
<mat-list>
|
|
||||||
<mat-list-item>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
mat-mini-fab
|
|
||||||
(click)="toggleClos(true)"
|
|
||||||
[ngClass]="isClosProjected(true) ? 'projector-active' : 'projector-inactive'"
|
|
||||||
>
|
|
||||||
<mat-icon>videocam</mat-icon>
|
|
||||||
</button>
|
</button>
|
||||||
<span class="spacer-left-10" translate>Overlay</span>
|
</mat-action-row>
|
||||||
</mat-list-item>
|
</mat-expansion-panel>
|
||||||
</mat-list>
|
|
||||||
|
|
||||||
<!-- Chyron -->
|
<!-- Previous Slides -->
|
||||||
<mat-list>
|
<mat-expansion-panel *ngIf="projector.elements_history.length" class="previous-slides">
|
||||||
<mat-list-item>
|
<mat-expansion-panel-header>
|
||||||
<button
|
<span translate>Previous slides</span>
|
||||||
type="button"
|
</mat-expansion-panel-header>
|
||||||
mat-mini-fab
|
<p *ngFor="let elements of projector.elements_history; let i = index">
|
||||||
(click)="toggleChyron()"
|
{{ i + 1 }}. {{ getSlideTitle(elements[0]) }}
|
||||||
[ngClass]="isChyronProjected() ? 'projector-active' : 'projector-inactive'"
|
</p>
|
||||||
>
|
</mat-expansion-panel>
|
||||||
<mat-icon>videocam</mat-icon>
|
|
||||||
|
<!-- countdowns -->
|
||||||
|
<mat-expansion-panel>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<span translate>Countdowns</span>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
<mat-list>
|
||||||
|
<mat-list-item *ngFor="let countdown of countdowns" class="larger-mat-list-item">
|
||||||
|
<os-countdown-controls
|
||||||
|
class="dynamic-list-entry"
|
||||||
|
[countdown]="countdown"
|
||||||
|
[projector]="projector.projector"
|
||||||
|
(editEvent)="openCountdownDialog($event)"
|
||||||
|
></os-countdown-controls>
|
||||||
|
</mat-list-item>
|
||||||
|
</mat-list>
|
||||||
|
<mat-action-row>
|
||||||
|
<button type="button" mat-button (click)="openCountdownDialog()">
|
||||||
|
<mat-icon>add</mat-icon>
|
||||||
|
<span translate>Add countdown</span>
|
||||||
</button>
|
</button>
|
||||||
<span class="spacer-left-10" translate>Chyron</span>
|
</mat-action-row>
|
||||||
</mat-list-item>
|
</mat-expansion-panel>
|
||||||
</mat-list>
|
|
||||||
</mat-expansion-panel>
|
|
||||||
|
|
||||||
<!-- File display controls -->
|
<!-- messages -->
|
||||||
<!--<mat-expansion-panel>
|
<mat-expansion-panel>
|
||||||
<mat-expansion-panel-header>
|
<mat-expansion-panel-header>
|
||||||
<span translate>Media controls</span>
|
<span translate>Messages</span>
|
||||||
</mat-expansion-panel-header>
|
</mat-expansion-panel-header>
|
||||||
<os-presentation-control [projector]="projector">
|
<mat-list>
|
||||||
</os-presentation-control>
|
<mat-list-item *ngFor="let message of messages" class="larger-mat-list-item">
|
||||||
</mat-expansion-panel>-->
|
<os-message-controls
|
||||||
|
class="dynamic-list-entry"
|
||||||
|
[message]="message"
|
||||||
|
[projector]="projector.projector"
|
||||||
|
(editEvent)="openMessagesDialog($event)"
|
||||||
|
>
|
||||||
|
</os-message-controls>
|
||||||
|
</mat-list-item>
|
||||||
|
</mat-list>
|
||||||
|
<mat-action-row>
|
||||||
|
<button type="button" mat-button (click)="openMessagesDialog()">
|
||||||
|
<mat-icon>add</mat-icon>
|
||||||
|
<span translate>Add message</span>
|
||||||
|
</button>
|
||||||
|
</mat-action-row>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
|
||||||
<os-presentation-control [projector]="projector"> </os-presentation-control>
|
<!-- Current list of speakers -->
|
||||||
</mat-accordion>
|
<mat-expansion-panel>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<span translate>Current list of speakers</span>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
|
||||||
|
<!-- Slide-->
|
||||||
|
<mat-list *ngIf="projectorCount > 1">
|
||||||
|
<mat-list-item>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
mat-mini-fab
|
||||||
|
(click)="toggleClos(false)"
|
||||||
|
[ngClass]="isClosProjected(false) ? 'projector-active' : 'projector-inactive'"
|
||||||
|
>
|
||||||
|
<mat-icon>videocam</mat-icon>
|
||||||
|
</button>
|
||||||
|
<span class="spacer-left-10" translate>Slide</span>
|
||||||
|
</mat-list-item>
|
||||||
|
</mat-list>
|
||||||
|
|
||||||
|
<!-- Overlay -->
|
||||||
|
<mat-list>
|
||||||
|
<mat-list-item>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
mat-mini-fab
|
||||||
|
(click)="toggleClos(true)"
|
||||||
|
[ngClass]="isClosProjected(true) ? 'projector-active' : 'projector-inactive'"
|
||||||
|
>
|
||||||
|
<mat-icon>videocam</mat-icon>
|
||||||
|
</button>
|
||||||
|
<span class="spacer-left-10" translate>Overlay</span>
|
||||||
|
</mat-list-item>
|
||||||
|
</mat-list>
|
||||||
|
|
||||||
|
<!-- Chyron -->
|
||||||
|
<mat-list>
|
||||||
|
<mat-list-item>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
mat-mini-fab
|
||||||
|
(click)="toggleChyron()"
|
||||||
|
[ngClass]="isChyronProjected() ? 'projector-active' : 'projector-inactive'"
|
||||||
|
>
|
||||||
|
<mat-icon>videocam</mat-icon>
|
||||||
|
</button>
|
||||||
|
<span class="spacer-left-10" translate>Chyron</span>
|
||||||
|
</mat-list-item>
|
||||||
|
</mat-list>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
|
||||||
|
<!-- File display controls -->
|
||||||
|
<!--<mat-expansion-panel>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<span translate>Media controls</span>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
<os-presentation-control [projector]="projector">
|
||||||
|
</os-presentation-control>
|
||||||
|
</mat-expansion-panel>-->
|
||||||
|
|
||||||
|
<os-presentation-control [projector]="projector"> </os-presentation-control>
|
||||||
|
</mat-accordion>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</os-tile>
|
||||||
</div>
|
</os-grid-layout>
|
||||||
|
|||||||
@ -7,11 +7,6 @@
|
|||||||
|
|
||||||
.column-left {
|
.column-left {
|
||||||
color: black;
|
color: black;
|
||||||
display: inline-block;
|
|
||||||
padding-top: 20px;
|
|
||||||
width: 60%;
|
|
||||||
min-width: 200px;
|
|
||||||
padding-right: 25px;
|
|
||||||
|
|
||||||
/* Do not let the a tag ruin the projector */
|
/* Do not let the a tag ruin the projector */
|
||||||
a {
|
a {
|
||||||
@ -20,12 +15,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-right {
|
|
||||||
padding-top: 20px;
|
|
||||||
width: calc(40% - 30px);
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-group {
|
.control-group {
|
||||||
color: rgba(0, 0, 0, 0.5);
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
|||||||
@ -15,6 +15,7 @@ import {
|
|||||||
ScrollScaleDirection
|
ScrollScaleDirection
|
||||||
} from 'app/core/repositories/projector/projector-repository.service';
|
} from 'app/core/repositories/projector/projector-repository.service';
|
||||||
import { DurationService } from 'app/core/ui-services/duration.service';
|
import { DurationService } from 'app/core/ui-services/duration.service';
|
||||||
|
import { SizeObject } from 'app/shared/components/tile/tile.component';
|
||||||
import { Countdown } from 'app/shared/models/core/countdown';
|
import { Countdown } from 'app/shared/models/core/countdown';
|
||||||
import { ProjectorElement } from 'app/shared/models/core/projector';
|
import { ProjectorElement } from 'app/shared/models/core/projector';
|
||||||
import { ProjectorMessage } from 'app/shared/models/core/projector-message';
|
import { ProjectorMessage } from 'app/shared/models/core/projector-message';
|
||||||
@ -52,6 +53,16 @@ export class ProjectorDetailComponent extends BaseViewComponent implements OnIni
|
|||||||
|
|
||||||
public projectorCount: number;
|
public projectorCount: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines the used sizes for different devices for the left column.
|
||||||
|
*/
|
||||||
|
public projectorTileSizeLeft: SizeObject = { medium: 8, large: 10 };
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines the used sizes for different devices for the right column.
|
||||||
|
*/
|
||||||
|
public projectorTileSizeRight: SizeObject = { medium: 4, large: 6 };
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* true if the queue might be altered
|
* true if the queue might be altered
|
||||||
*/
|
*/
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user