src/app/components/app-volume/app-volume.component.ts
selector | app-volume |
styleUrls | app-volume.component.css |
templateUrl | ./app-volume.component.html |
Properties |
Methods |
constructor(musicService: MusicLoaderService, playerService: PlayerService, helpService: HelpService)
|
||||||||||||
Parameters :
|
changeVolume | ||||
changeVolume(deck: )
|
||||
Parameters :
Returns :
void
|
maxVol | ||||
maxVol(deck: )
|
||||
Parameters :
Returns :
void
|
mute | ||||
mute(deck: )
|
||||
Parameters :
Returns :
void
|
resetEQ | ||||
resetEQ(deck: )
|
||||
Parameters :
Returns :
void
|
setEQ | ||||
setEQ(i: )
|
||||
Parameters :
Returns :
void
|
bass0 |
bass0:
|
Type : number
|
Default value : 0
|
bass1 |
bass1:
|
Type : number
|
Default value : 0
|
help |
help:
|
Type : any
|
mid0 |
mid0:
|
Type : number
|
Default value : 0
|
mid1 |
mid1:
|
Type : number
|
Default value : 0
|
musicSubscription |
musicSubscription:
|
Type : []
|
Default value : [null, null]
|
trebble0 |
trebble0:
|
Type : number
|
Default value : 0
|
trebble1 |
trebble1:
|
Type : number
|
Default value : 0
|
volume0 |
volume0:
|
Type : number
|
Default value : 100
|
volume1 |
volume1:
|
Type : number
|
Default value : 100
|
volumeMaster |
volumeMaster:
|
Type : number
|
Default value : 0
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { PlayerService } from '../../services/player.service';
import { MusicLoaderService } from '../../services/music-loader.service';
import { HelpService } from 'src/app/services/help.service';
@Component({
selector: 'app-volume',
templateUrl: './app-volume.component.html',
styleUrls: ['./app-volume.component.css']
})
export class AppVolumeComponent implements OnInit, AfterViewInit {
constructor(
private musicService: MusicLoaderService,
private playerService: PlayerService,
helpService: HelpService
) {
helpService.help$.subscribe(help => {
this.help = help;
});
}
help: any;
volume0 = 100;
volume1 = 100;
volumeMaster = 0;
bass0 = 0;
mid0 = 0;
trebble0 = 0;
bass1 = 0;
mid1 = 0;
trebble1 = 0;
musicSubscription = [null, null];
changeVolume(deck) {
let masterMultiplier = 1;
if (deck === 0 && this.volumeMaster > 0) {
masterMultiplier = (100 - this.volumeMaster) / 100;
}
if (deck === 1 && this.volumeMaster < 0) {
masterMultiplier = (100 + this.volumeMaster) / 100;
}
this.playerService.setVolume(deck, (this['volume' + deck] / 100) * masterMultiplier);
}
ngOnInit() {
this.setEQ(0);
this.setEQ(1);
}
setEQ(i) {
this.playerService.saveEQ(this['bass' + i], this['mid' + i], this['trebble' + i], i);
}
resetEQ(deck) {
if (deck === 0) {
this.bass0 = 0;
this.mid0 = 0;
this.trebble0 = 0;
}
if (deck === 1) {
this.bass1 = 0;
this.mid1 = 0;
this.trebble1 = 0;
}
this.setEQ(deck);
}
ngAfterViewInit() {
this.musicSubscription[0] = this.musicService.decksongs$[0].subscribe(a => {
this.resetEQ(0);
});
this.musicSubscription[1] = this.musicService.decksongs$[1].subscribe(a => {
this.resetEQ(1);
});
}
maxVol(deck) {
this['volume' + deck] = 100;
this.changeVolume(deck);
}
mute(deck) {
this['volume' + deck] = 0;
this.changeVolume(deck);
}
}
<!--
This file is part of Web Virtual DJ.
Web Virtual DJ is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Web Virtual DJ is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Web Virtual DJ. If not, see <https://www.gnu.org/licenses/>.
-->
<div class="volume-container" id="app_volume">
<div class="volume components-container">
<div class="volume-eq">
<div class="volume-decks" [class.help]="help === 'maindeckvolume'">
<div class="volume-images">
<img (click)="maxVol(0)" (dragstart)="$event.preventDefault()" draggable="false" class="icon"
src="assets/images/high-volume.png">
</div>
<div class="volume-slider">
<slider-controller [config]="{id:'volume_deck_0',
min:0, max:100,
vertical:true,
thumb:'sliderthumb-pitch-vertical',
track:'slidertrack-vol-vertical'}" [(ngModel)]="volume0" (ngModelChange)="changeVolume(0)">
</slider-controller>
</div>
<div class="volume-images">
<img (click)="mute(0)" (dragstart)="$event.preventDefault()" draggable="false" class="icon"
src="assets/images/mute.png">
</div>
</div>
<div class="volume-equalizers" [class.help]="help === 'equalizer'">
<div class="roulette-container">
<div class="roulete-title">
<p style="margin-bottom:3px;">{{ 'VOLUME.HIGH' | translate }}</p>
<roulette-controller [config]="{ id: 'trebble_1', min:-40, max:40 }" [(ngModel)]="trebble0"
(ngModelChange)="setEQ(0)"></roulette-controller>
</div>
<div class="roulete-title">
<p style="margin-bottom:3px;">{{ 'VOLUME.MID' | translate }}</p>
<roulette-controller [config]="{ id: 'middle_1', min:-40, max:40 }" [(ngModel)]="mid0"
(ngModelChange)="setEQ(0)"></roulette-controller>
</div>
<div class="roulete-title">
<p style="margin-bottom:3px;">{{ 'VOLUME.LOW' | translate }}</p>
<roulette-controller [config]="{ id: 'bass_1', min:-40, max:40 }" [(ngModel)]="bass0"
(ngModelChange)="setEQ(0)"></roulette-controller>
</div>
<img (dragstart)="$event.preventDefault()" draggable="false" class="icon-reset" src="assets/images/reset.png"
(click)="resetEQ(0)">
</div>
<div class="roulette-container">
<div class="roulete-title">
<p style="margin-bottom:3px;">{{ 'VOLUME.HIGH' | translate }}</p>
<roulette-controller [config]="{ id: 'trebble_2', min:-40, max:40, right:true }" [(ngModel)]="trebble1"
(ngModelChange)="setEQ(1)"></roulette-controller>
</div>
<div class="roulete-title">
<p style="margin-bottom:3px;">{{ 'VOLUME.MID' | translate }}</p>
<roulette-controller [config]="{ id: 'middle_2', min:-40, max:40, right:true }" [(ngModel)]="mid1"
(ngModelChange)="setEQ(1)"></roulette-controller>
</div>
<div class="roulete-title">
<p style="margin-bottom:3px;">{{ 'VOLUME.LOW' | translate }}</p>
<roulette-controller [config]="{ id: 'bass_2', min:-40, max:40, right:true }" [(ngModel)]="bass1"
(ngModelChange)="setEQ(1)"></roulette-controller>
</div>
<img (dragstart)="$event.preventDefault()" draggable="false" class="icon-reset" src="assets/images/reset.png"
(click)="resetEQ(1)">
</div>
</div>
<div class="volume-decks" [class.help]="help === 'maindeckvolume'">
<div class="volume-images">
<img (click)="maxVol(1)" (dragstart)="$event.preventDefault()" draggable="false" class="icon"
src="assets/images/high-volume.png">
</div>
<div class="volume-slider">
<slider-controller [config]="{id:'volume_deck_1',
min:0,
max:100,
vertical:true,
thumb:'sliderthumb-pitch-vertical',
track:'slidertrack-vol-vertical'}" [(ngModel)]="volume1" (ngModelChange)="changeVolume(1)">
</slider-controller>
</div>
<div class="volume-images">
<img (click)="mute(1)" (dragstart)="$event.preventDefault()" draggable="false" class="icon"
src="assets/images/mute.png">
</div>
</div>
</div>
<div class="volume-master" [class.help]="help === 'mastervolume'">
<slider-controller [config]="{id:'volume_balance',
min:-100,
max:100,
thumb:'sliderthumb-pitch',
track:'slidertrack-vol'}" [(ngModel)]="volumeMaster" (ngModelChange)="changeVolume(0);changeVolume(1)">
</slider-controller>
</div>
</div>
</div>