Skip to content

Commit

Permalink
Merge pull request #257 from richard-austin/stage-6-mouse-wheel-contr…
Browse files Browse the repository at this point in the history 
…olled-zoom-on-live-video

* Recording video shown centred when it's not in the same row as the …
  • Loading branch information
@richard-austin
richard-austin committed Feb 2, 2024
2 parents b803026 + c3be984 commit 622bc8f
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 109 deletions.
183 changes: 93 additions & 90 deletions client/src/app/recording-control/recording-control.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,106 @@
<div [ngClass]="{'no-display': !visible}" class="flex-container">
<mat-card class="events-select mat-elevation-z8 hide-background">
<mat-card-title>Select a Motion Event</mat-card-title>
<mat-card-content>
<div>
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput readonly [matDatepickerFilter]="dateFilter" [min]="minDate" [max]="maxDate" [value]="selectedDate" (dateChange)="setDateSlot($event)" [matDatepicker]="picker">
<mat-hint></mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker [startAt]="_selectedDate"></mat-datepicker>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="fill">
<mat-label>Motion Events</mat-label>
<mat-select #selector (selectionChange)="showMotionEvent($event)"
matTooltip="Select a recording by date and time"
matTooltipClass="tooltip">
<mat-option *ngFor="let event of motionEvents" [value]="event">
{{event.dateTime}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="!downloading" [ngSwitch]="confirmDelete" class="delete-button-set">
<div *ngSwitchCase="false"
matTooltip="{{isGuest ? 'Disabled for guest' : 'Delete the currently selected recording'}}"
matTooltipClass="tooltip">
<button (click)="confirmDelete=true" [disabled]="isGuest" color="warning" mat-flat-button
matTooltip="Delete the currently displayed recording" matTooltipClass="tooltip">
Delete This Recording
</button>
<div class="recording-container">
<mat-card class="events-select mat-elevation-z8 hide-background">
<mat-card-title>Select a Motion Event</mat-card-title>
<mat-card-content>
<div>
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput readonly [matDatepickerFilter]="dateFilter" [min]="minDate" [max]="maxDate"
[value]="selectedDate" (dateChange)="setDateSlot($event)" [matDatepicker]="picker">
<mat-hint></mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker [startAt]="_selectedDate"></mat-datepicker>
</mat-form-field>
</div>
<div *ngSwitchCase="true">
Delete {{selector.value.dateTime}},
<div>are you sure?</div>
<button (click)="confirmDelete=false;deleteRecording()" color="danger" mat-flat-button
matTooltip="Delete the currently selected recording"
matTooltipClass="tooltip">Confirm
</button>
<button (click)="confirmDelete=false" color="default" mat-flat-button
matTooltip="Do not delete the recording"
<div>
<mat-form-field appearance="fill">
<mat-label>Motion Events</mat-label>
<mat-select #selector (selectionChange)="showMotionEvent($event)"
matTooltip="Select a recording by date and time"
matTooltipClass="tooltip">
<mat-option *ngFor="let event of motionEvents" [value]="event">
{{ event.dateTime }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="!downloading" [ngSwitch]="confirmDelete" class="delete-button-set">
<div *ngSwitchCase="false"
matTooltip="{{isGuest ? 'Disabled for guest' : 'Delete the currently selected recording'}}"
matTooltipClass="tooltip">
<button (click)="confirmDelete=true" [disabled]="isGuest" color="warning" mat-flat-button
matTooltip="Delete the currently displayed recording" matTooltipClass="tooltip">
Delete This Recording
</button>
</div>
<div *ngSwitchCase="true">
Delete {{ selector.value.dateTime }},
<div>are you sure?</div>
<button (click)="confirmDelete=false;deleteRecording()" color="danger" mat-flat-button
matTooltip="Delete the currently selected recording"
matTooltipClass="tooltip">Confirm
</button>
<button (click)="confirmDelete=false" color="default" mat-flat-button
matTooltip="Do not delete the recording"
matTooltipClass="tooltip">
Cancel
</button>
</div>
</div>
<div *ngIf="!confirmDelete && !downloading" class="download-button">
<button (click)="downloadRecording()" color="light" mat-flat-button
matTooltip="Download this recording to your PC or phone"
matTooltipClass="tooltip">
Cancel
Download Recording
</button>
</div>
</div>
<div *ngIf="!confirmDelete && !downloading" class="download-button">
<button (click)="downloadRecording()" color="light" mat-flat-button
matTooltip="Download this recording to your PC or phone"
matTooltipClass="tooltip">
Download Recording
</button>
</div>
</mat-card-content>
<mat-card-content class="wait-box mat-form-field-flex" *ngIf="downloading">
<mat-spinner [diameter]="25"></mat-spinner>
<span>Please wait..</span>
</mat-card-content>
</mat-card>
<div class="recording-container">
<app-video></app-video>
<div class="buttons-flex-container">
<mat-card class="recording-buttons hide-background mat-elevation-z8">
<mat-button-toggle-group aria-label="Playback control" name="playbackControl"
[(ngModel)]="selectedPlaybackMode">
<button mat-button (click)="returnToStart()"
matTooltip="Go back to the start of the recording" matTooltipClass="tooltip">
<mat-icon>fast_rewind</mat-icon>
</button>
<button mat-button (click)="stepBack()" matTooltip="Step backward 10 seconds" matTooltipClass="tooltip">
<mat-icon>replay_10</mat-icon>
</button>
<button mat-button (click)="stepForward()" matTooltip="Step forward 10 seconds" matTooltipClass="tooltip">
<mat-icon>forward_10</mat-icon>
</button>
</mat-card-content>
<mat-card-content class="wait-box mat-form-field-flex" *ngIf="downloading">
<mat-spinner [diameter]="25"></mat-spinner>
<span>Please wait..</span>
</mat-card-content>
</mat-card>
<div>
<app-video></app-video>
<div class="buttons-flex-container">
<mat-card class="recording-buttons hide-background mat-elevation-z8">
<mat-button-toggle-group aria-label="Playback control" name="playbackControl"
[(ngModel)]="selectedPlaybackMode">
<button mat-button (click)="returnToStart()"
matTooltip="Go back to the start of the recording" matTooltipClass="tooltip">
<mat-icon>fast_rewind</mat-icon>
</button>
<button mat-button (click)="stepBack()" matTooltip="Step backward 10 seconds" matTooltipClass="tooltip">
<mat-icon>replay_10</mat-icon>
</button>
<button mat-button (click)="stepForward()" matTooltip="Step forward 10 seconds" matTooltipClass="tooltip">
<mat-icon>forward_10</mat-icon>
</button>

<mat-button-toggle (click)="paused ? start() : pause()" [matTooltip]="paused ? 'Play' : 'Pause'"
matTooltipClass="tooltip"
value="startPause">
<mat-icon *ngIf="!paused">pause</mat-icon>
<mat-icon *ngIf="paused">play_arrow</mat-icon>
</mat-button-toggle>
<mat-button-toggle (click)="fastForward()" matTooltip="Fast forward" matTooltipClass="tooltip"
value="fastForward">
<mat-icon>fast_forward</mat-icon>
</mat-button-toggle>
<mat-button-toggle (click)="fasterForward()" matTooltip="Faster forward" matTooltipClass="tooltip"
value="fasterForward">
<mat-icon class="faster-forward">fast_forward</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
</mat-card>
<mat-button-toggle (click)="paused ? start() : pause()" [matTooltip]="paused ? 'Play' : 'Pause'"
matTooltipClass="tooltip"
value="startPause">
<mat-icon *ngIf="!paused">pause</mat-icon>
<mat-icon *ngIf="paused">play_arrow</mat-icon>
</mat-button-toggle>
<mat-button-toggle (click)="fastForward()" matTooltip="Fast forward" matTooltipClass="tooltip"
value="fastForward">
<mat-icon>fast_forward</mat-icon>
</mat-button-toggle>
<mat-button-toggle (click)="fasterForward()" matTooltip="Faster forward" matTooltipClass="tooltip"
value="fasterForward">
<mat-icon class="faster-forward">fast_forward</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
</mat-card>
</div>
</div>
</div>
</div>
<br>
<div [ngClass]="{'no-display': !noVideo}" class="alert-warning">No Video Clips Available For {{cam?.name}}
({{stream?.descr}})
<div [ngClass]="{'no-display': !noVideo}" class="alert-warning">No Video Clips Available For {{ cam?.name }}
({{ stream?.descr }})
</div>
<app-reporting></app-reporting>

Expand Down
35 changes: 22 additions & 13 deletions client/src/app/recording-control/recording-control.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ mat-icon.faster-forward {

mat-card.recording-buttons {
padding: 0.4rem;
> mat-button-toggle-group > button{

> mat-button-toggle-group > button {
min-width: 0;
border-right: .2px solid #646363;
border-radius: 0;
Expand All @@ -39,25 +40,33 @@ div.no-display {
display: none;
}

div.delete-button-set
{
> div
{
button{
margin-top: 0.4rem;
margin-right: 0.4rem;
}
div.delete-button-set {
> div {
button {
margin-top: 0.4rem;
margin-right: 0.4rem;
}
}
}

div.download-button
{
>button{
div.download-button {
> button {
width: 167.38px;
}

margin-top: 0.4rem;
}

div.recording-container {
margin-left: 1rem;
> mat-card {
margin-left: 0.5rem;
margin-right: 1rem;
}
display: inline-flex;
flex-wrap: wrap;
justify-content: space-between;
> div {
margin-right: auto;
margin-left: auto;
}
}
15 changes: 9 additions & 6 deletions client/src/app/video/video.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,17 +113,20 @@ export class VideoComponent implements OnInit, AfterViewInit, OnDestroy {
// Timer to ensure full screen mode is detectable with document.fullscreenElement !== null
let sub = timer(60).subscribe(() => {
sub.unsubscribe();
if ((target.type === 'landscape-secondary' || target.type === 'landscape-primary') && document.fullscreenElement !== null) {
if ((target.type === 'landscape-secondary' || target.type === 'landscape-primary') && document.fullscreenElement !== null)
document.exitFullscreen().then();
console.log("Exited full screen");
}
// Timer to ensure it's fully out of full screen before using scrollIntoView
this.vt.reset();
// Timer to ensure it's fully out of full screen before using scrollTo
sub = timer(30).subscribe(() => {
sub.unsubscribe();
this.video.scrollIntoView();
if (target.type.toString().includes('portrait'))
document.body.scrollTop = document.documentElement.scrollTop = 0; // Scroll to top of page
else
// Scroll to fit video in screen
window.scrollTo({left: 0, top: this.video.getBoundingClientRect().y + window.scrollY});
});
});
this.vt.reset(true);

}
}
}
Expand Down

0 comments on commit 622bc8f

Please sign in to comment.