New pause feature and screenshots

This commit is contained in:
Chrystian Huot 2019-07-11 10:34:49 -04:00
parent daa6d2bb45
commit 51847e8e6d
12 changed files with 120 additions and 58 deletions

View file

@ -24,7 +24,9 @@
<button class="radio-button" (click)="searchCall()"> <button class="radio-button" (click)="searchCall()">
SEARCH<br>CALL SEARCH<br>CALL
</button> </button>
<div class="radio-button-none"></div> <button class="radio-button" (click)="pause()" [ngClass]="{ off: !paused, on: paused }">
PAUSE
</button>
<button class="radio-button" (click)="selectTalkgroups()"> <button class="radio-button" (click)="selectTalkgroups()">
SELECT<br>TG SELECT<br>TG
</button> </button>

View file

@ -13,6 +13,7 @@ import { AppRadioService } from '../radio.service';
}) })
export class AppRadioControlComponent implements OnDestroy, OnInit { export class AppRadioControlComponent implements OnDestroy, OnInit {
liveFeed: boolean = this.appRadioService.live; liveFeed: boolean = this.appRadioService.live;
paused = false;
systemHold = false; systemHold = false;
talkgroupHold = false; talkgroupHold = false;
@ -40,6 +41,10 @@ export class AppRadioControlComponent implements OnDestroy, OnInit {
this.appRadioService.holdTalkgroup(); this.appRadioService.holdTalkgroup();
} }
pause(): void {
this.appRadioService.pause();
}
replayLast(): void { replayLast(): void {
this.appRadioService.replay(); this.appRadioService.replay();
} }
@ -60,6 +65,12 @@ export class AppRadioControlComponent implements OnDestroy, OnInit {
this.appRadioService.liveFeed(); this.appRadioService.liveFeed();
} }
private _handlePauseEvent(event: RadioEvent): void {
if ('pause' in event) {
this.paused = event.pause;
}
}
private _handleRadioEvent(event: RadioEvent): void { private _handleRadioEvent(event: RadioEvent): void {
if ('hold' in event) { if ('hold' in event) {
switch (event.hold) { switch (event.hold) {
@ -83,7 +94,10 @@ export class AppRadioControlComponent implements OnDestroy, OnInit {
private _subscribe(): void { private _subscribe(): void {
this._subscriptions.push( this._subscriptions.push(
this.appRadioService.event.subscribe((event: RadioEvent) => this._handleRadioEvent(event)), this.appRadioService.event.subscribe((event: RadioEvent) => {
this._handlePauseEvent(event);
this._handleRadioEvent(event);
}),
); );
} }

View file

@ -1 +1 @@
<div [ngClass]="{ off: !rx, on: rx }"></div> <div [ngClass]="{ off: !rx, on: rx, paused: rx && paused }"></div>

View file

@ -22,5 +22,16 @@ $color-on: rgb(100, 230, 50);
background: $color-on; background: $color-on;
box-shadow: 0 0 6px 3px $color-on; box-shadow: 0 0 6px 3px $color-on;
} }
&.paused {
animation: blink 2s step-end infinite;
}
}
}
@keyframes blink {
50% {
background: $color-off;
box-shadow: none;
} }
} }

View file

@ -12,6 +12,7 @@ import { AppRadioService } from '../radio.service';
templateUrl: './radio-led.component.html', templateUrl: './radio-led.component.html',
}) })
export class AppRadioLedComponent implements OnDestroy, OnInit { export class AppRadioLedComponent implements OnDestroy, OnInit {
paused = false;
rx = false; rx = false;
private _subcriptions: Subscription[] = []; private _subcriptions: Subscription[] = [];
@ -32,8 +33,17 @@ export class AppRadioLedComponent implements OnDestroy, OnInit {
} }
} }
private _handlePauseEvent(event: RadioEvent): void {
if ('pause' in event) {
this.paused = event.pause;
}
}
private _subscribe(): void { private _subscribe(): void {
this._subcriptions.push(this.appRadioService.event.subscribe((event: RadioEvent) => this._handleCallEvent(event))); this._subcriptions.push(this.appRadioService.event.subscribe((event: RadioEvent) => {
this._handleCallEvent(event);
this._handlePauseEvent(event);
}));
} }
private _unsubscribe(subscriptions: Subscription[] = this._subcriptions): void { private _unsubscribe(subscriptions: Subscription[] = this._subcriptions): void {

View file

@ -38,6 +38,8 @@ export class AppRadioService implements OnDestroy {
talkgroup: null, talkgroup: null,
}; };
private _paused = false;
private _subscriptions: { private _subscriptions: {
liveFeed: Subscription[]; liveFeed: Subscription[];
systems: Subscription[]; systems: Subscription[];
@ -169,6 +171,26 @@ export class AppRadioService implements OnDestroy {
} }
} }
pause(): void {
this._configureAudio();
this._paused = !this._paused;
this._emitPauseEvent();
if (this._paused) {
this._audio.pause();
} else {
if (this._call.current) {
this._audio.play();
} else {
this.skip();
}
}
}
play(call?: RadioCall): void { play(call?: RadioCall): void {
this._configureAudio(); this._configureAudio();
@ -187,7 +209,7 @@ export class AppRadioService implements OnDestroy {
} }
} }
} else if (!this._call.current && this._call.queue.length) { } else if (!this._call.current && this._call.queue.length && !this._paused) {
this._call.current = this._call.queue.shift(); this._call.current = this._call.queue.shift();
this._audio.src = this._call.current.audio; this._audio.src = this._call.current.audio;
@ -209,12 +231,14 @@ export class AppRadioService implements OnDestroy {
} }
replay(): void { replay(): void {
if (!this._paused) {
const call = this._call.current || this._call.previous; const call = this._call.current || this._call.previous;
if (call) { if (call) {
this.play(call); this.play(call);
} }
} }
}
search(): void { search(): void {
this._emitSearchEvent(); this._emitSearchEvent();
@ -230,11 +254,7 @@ export class AppRadioService implements OnDestroy {
if (nodelay) { if (nodelay) {
this.play(); this.play();
} else { } else {
setTimeout(() => { setTimeout(() => this.play(), 1000);
if (this._call.queue.length) {
this.play();
}
}, 1000);
} }
} }
@ -319,7 +339,7 @@ export class AppRadioService implements OnDestroy {
}; };
const stopHandler = () => { const stopHandler = () => {
if (this._call.current && playing) { if (this._call.current && playing && !this._paused) {
playing = false; playing = false;
if (watchdog) { if (watchdog) {
@ -366,6 +386,10 @@ export class AppRadioService implements OnDestroy {
this.event.emit({ live: this.live }); this.event.emit({ live: this.live });
} }
private _emitPauseEvent(): void {
this.event.emit({ pause: this._paused });
}
private _emitQueueEvent(): void { private _emitQueueEvent(): void {
this.event.emit({ queue: this._call.queue.length }); this.event.emit({ queue: this._call.queue.length });
} }

View file

@ -30,6 +30,7 @@ export interface RadioEvent {
call?: RadioCall | null; call?: RadioCall | null;
hold?: '-sys' | '+sys' | '-tg' | '+tg'; hold?: '-sys' | '+sys' | '-tg' | '+tg';
live?: boolean; live?: boolean;
pause?: boolean;
queue?: number; queue?: number;
search?: null; search?: null;
select?: null; select?: null;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 132 KiB

After

Width:  |  Height:  |  Size: 136 KiB

66
package-lock.json generated
View file

@ -3,9 +3,9 @@
"lockfileVersion": 1, "lockfileVersion": 1,
"dependencies": { "dependencies": {
"@angular/animations": { "@angular/animations": {
"version": "8.1.0", "version": "8.1.1",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.1.0.tgz", "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.1.1.tgz",
"integrity": "sha512-v1paXrWQGsD+E4QBpwNUZ8dPj8hEn0b2kDVzYX6l/e9flUX6W2BWYx+BRuC4QBnNtTV9jiGsHT8FmQq/WztgWw==", "integrity": "sha512-9P9Yyf2/IUMs0MR4CfthBaMdizbTh8dDSLJHhMw1PjxPQ3c6mn74uY46NyxcJnCxII9oA2pnnV/O+10JFUFKMw==",
"requires": { "requires": {
"tslib": "^1.9.0" "tslib": "^1.9.0"
} }
@ -20,25 +20,25 @@
} }
}, },
"@angular/common": { "@angular/common": {
"version": "8.1.0", "version": "8.1.1",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-8.1.0.tgz", "resolved": "https://registry.npmjs.org/@angular/common/-/common-8.1.1.tgz",
"integrity": "sha512-m5oEBPSy5nE+4SZTu3XchJhKT/u73NnJIS3+41xRsF5aX/1p8uNHkhJR7kcJmlVa7BZNr4byl8bGsYjX0CCpVg==", "integrity": "sha512-kgLtexfPhAyNFlwJHKBkpwKyt/19pfULIJWJpUahFqXdYE3LkRNMJQqgfz7DCNpAQxG7B6u4ocq1j2Hx206kxw==",
"requires": { "requires": {
"tslib": "^1.9.0" "tslib": "^1.9.0"
} }
}, },
"@angular/compiler": { "@angular/compiler": {
"version": "8.1.0", "version": "8.1.1",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-8.1.0.tgz", "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-8.1.1.tgz",
"integrity": "sha512-+o4jR7WfqR39zgGk7gwpxZfd2hS3X2qgr17mUCeqQkKj0gh+GYWj7OlSuYXG63OS9S4iLsKQiVUYYgqdNSK5mg==", "integrity": "sha512-wz8Mc45EGax5RKRYYqgXI8lr1d0w+f9BDbHui7b3hQtKM5Mj1QxLXiSOYX0dt3lG4VzrxpO0Xku5tS3D4T1xxQ==",
"requires": { "requires": {
"tslib": "^1.9.0" "tslib": "^1.9.0"
} }
}, },
"@angular/compiler-cli": { "@angular/compiler-cli": {
"version": "8.1.0", "version": "8.1.1",
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-8.1.0.tgz", "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-8.1.1.tgz",
"integrity": "sha512-WqEWjUTkvkp4rYDwYKo9XVXK1sbUHihwiZDOZrBEiGdw08TvZ+3qZs/mnYwRUYCzoN99RVG5rxJDg8Sf2VTY+w==", "integrity": "sha512-nGN+AqNgi4qsh+4c2Tmtg7/v/mG62sDkjPttra1pUPI6cJS9Y4bA+PBEIW1UsR5OcD85qvNK4vliw2YdLtaeuw==",
"dev": true, "dev": true,
"requires": { "requires": {
"canonical-path": "1.0.0", "canonical-path": "1.0.0",
@ -55,17 +55,17 @@
} }
}, },
"@angular/core": { "@angular/core": {
"version": "8.1.0", "version": "8.1.1",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-8.1.0.tgz", "resolved": "https://registry.npmjs.org/@angular/core/-/core-8.1.1.tgz",
"integrity": "sha512-GviWJjOu6LJMYNbukdSK35VaXvSrp5LTNd0FbXoBQF+mhVVV/8cG4hTKKjxG1xwWXI5E1t5U4aUKXrKUNJ1sQg==", "integrity": "sha512-B6x8IZeu0Qm2H13leEcNzsx0pGKHMvowziurvDnm7W97MaVrYrgbelNsnly4wNX91FzdBtSVXqbe3jijAD9kjA==",
"requires": { "requires": {
"tslib": "^1.9.0" "tslib": "^1.9.0"
} }
}, },
"@angular/forms": { "@angular/forms": {
"version": "8.1.0", "version": "8.1.1",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-8.1.0.tgz", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-8.1.1.tgz",
"integrity": "sha512-T9BOveIHZp2/jNB1BnyIZiu+a5Vmn+Z3k95mveP5K3hhMO7dNAKI7X0WaSwe9CW+xxME9Zpc4CpsfnPEhDuY3A==", "integrity": "sha512-jz05UIiIY2Zz/nEveL4Pm9mVCAd5O6JwVDWTHKQ64nKYIN9Nepzgb0ASeOBEZA4qP82KTGJtUm2AN4L7fXN6Pw==",
"requires": { "requires": {
"tslib": "^1.9.0" "tslib": "^1.9.0"
} }
@ -79,25 +79,25 @@
} }
}, },
"@angular/platform-browser": { "@angular/platform-browser": {
"version": "8.1.0", "version": "8.1.1",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.1.0.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.1.1.tgz",
"integrity": "sha512-qH6bH6DSRGvgx5iD7BbufsdeMxhh7lL1zN47LkrLGa8hojF+yxwtdE+go+WJ160ArACyX/FrPmPDSWT20YilUQ==", "integrity": "sha512-uP9UIhi9NYTEbfvNj4misBspXkItFopA2pRk083AhHEhOKs79WvMI15w5H5ziIFeH+4UiCvyKrSnPfcjP+Yrvg==",
"requires": { "requires": {
"tslib": "^1.9.0" "tslib": "^1.9.0"
} }
}, },
"@angular/platform-browser-dynamic": { "@angular/platform-browser-dynamic": {
"version": "8.1.0", "version": "8.1.1",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-8.1.0.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-8.1.1.tgz",
"integrity": "sha512-By9I9hXqg538UzhlYDrF1dW7cDaF2JPjoFCE9jZZQxVRhOdjVoYVuIxIa5qPuGWfmMITO2G9rfMMrDiRHMyEDg==", "integrity": "sha512-yUazvP4IBNgXjbzo+NKmu7lVYrrplAN3HSkgYszXwd9uvWLtk1CtXER5hSJE5ZE3Lawoh7PU5hOfMYbqtdAbwg==",
"requires": { "requires": {
"tslib": "^1.9.0" "tslib": "^1.9.0"
} }
}, },
"@angular/router": { "@angular/router": {
"version": "8.1.0", "version": "8.1.1",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-8.1.0.tgz", "resolved": "https://registry.npmjs.org/@angular/router/-/router-8.1.1.tgz",
"integrity": "sha512-LeJOmiFdsXVf0KlN/jzA5NgWY1V4Ty5TDcfNd01s/ckZlzZd+p5hFhRFc75qwENTb8UwClTLsYQLmvmphnB4dA==", "integrity": "sha512-UTL/TjokRUd3hdePBrj1ITmBGq+EcVNz3D18lFi96461ZLQeXSbbf3vjQfL6SE53E4+hfKKR7/tOqQOgb5br7A==",
"requires": { "requires": {
"tslib": "^1.9.0" "tslib": "^1.9.0"
} }
@ -123,9 +123,9 @@
} }
}, },
"@babel/runtime": { "@babel/runtime": {
"version": "7.5.2", "version": "7.5.4",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.2.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.4.tgz",
"integrity": "sha512-9M29wrrP7//JBGX70+IrDuD1w4iOYhUGpJNMQJVNAXue+cFeFlMTqBECouIziXPUphlgrfjcfiEpGX4t0WGK4g==", "integrity": "sha512-Na84uwyImZZc3FKf4aUF1tysApzwf3p2yuFBIyBfbzT5glzKTdvYI4KVW4kcgjrzoGUjC7w3YyCHcJKaRxsr2Q==",
"requires": { "requires": {
"regenerator-runtime": "^0.13.2" "regenerator-runtime": "^0.13.2"
} }
@ -160,9 +160,9 @@
} }
}, },
"@types/node": { "@types/node": {
"version": "12.6.1", "version": "12.6.2",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.1.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.2.tgz",
"integrity": "sha512-rp7La3m845mSESCgsJePNL/JQyhkOJA6G4vcwvVgkDAwHhGdq5GCumxmPjEk1MZf+8p5ZQAUE7tqgQRQTXN7uQ==", "integrity": "sha512-gojym4tX0FWeV2gsW4Xmzo5wxGjXGm550oVUII7f7G5o4BV6c7DBdiG1RRQd+y1bvqRyYtPfMK85UM95vsapqQ==",
"dev": true "dev": true
}, },
"@types/prop-types": { "@types/prop-types": {

View file

@ -5,17 +5,17 @@
"start:prod": "AOT=1 ROLLUP=1 meteor --production --settings private/settings.json" "start:prod": "AOT=1 ROLLUP=1 meteor --production --settings private/settings.json"
}, },
"dependencies": { "dependencies": {
"@angular/animations": "^8.1.0", "@angular/animations": "^8.1.1",
"@angular/cdk": "^8.0.2", "@angular/cdk": "^8.0.2",
"@angular/common": "8.1.0", "@angular/common": "8.1.1",
"@angular/compiler": "8.1.0", "@angular/compiler": "8.1.1",
"@angular/core": "8.1.0", "@angular/core": "8.1.1",
"@angular/forms": "8.1.0", "@angular/forms": "8.1.1",
"@angular/material": "^8.0.2", "@angular/material": "^8.0.2",
"@angular/platform-browser": "8.1.0", "@angular/platform-browser": "8.1.1",
"@angular/platform-browser-dynamic": "8.1.0", "@angular/platform-browser-dynamic": "8.1.1",
"@angular/router": "8.1.0", "@angular/router": "8.1.1",
"@babel/runtime": "7.5.2", "@babel/runtime": "7.5.4",
"bcrypt": "^3.0.6", "bcrypt": "^3.0.6",
"core-js": "3.1.4", "core-js": "3.1.4",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
@ -26,10 +26,10 @@
"zone.js": "0.9.1" "zone.js": "0.9.1"
}, },
"devDependencies": { "devDependencies": {
"@angular/compiler-cli": "8.1.0", "@angular/compiler-cli": "8.1.1",
"@types/meteor": "1.4.28", "@types/meteor": "1.4.28",
"@types/multiparty": "0.0.32", "@types/multiparty": "0.0.32",
"@types/node": "^12.6.1", "@types/node": "^12.6.2",
"codelyzer": "^5.1.0", "codelyzer": "^5.1.0",
"tslint": "^5.18.0", "tslint": "^5.18.0",
"typescript": "3.5.3" "typescript": "3.5.3"