File

src/app/components/app-volume/app-volume.component.ts

Implements

OnInit AfterViewInit

Metadata

selector app-volume
styleUrls app-volume.component.css
templateUrl ./app-volume.component.html

Index

Properties
Methods

Constructor

constructor(musicService: MusicLoaderService, playerService: PlayerService, helpService: HelpService)
Parameters :
Name Type Optional
musicService MusicLoaderService No
playerService PlayerService No
helpService HelpService No

Methods

changeVolume
changeVolume(deck: )
Parameters :
Name Optional
deck No
Returns : void
maxVol
maxVol(deck: )
Parameters :
Name Optional
deck No
Returns : void
mute
mute(deck: )
Parameters :
Name Optional
deck No
Returns : void
resetEQ
resetEQ(deck: )
Parameters :
Name Optional
deck No
Returns : void
setEQ
setEQ(i: )
Parameters :
Name Optional
i No
Returns : void

Properties

bass0
bass0: number
Type : number
Default value : 0
bass1
bass1: number
Type : number
Default value : 0
help
help: any
Type : any
mid0
mid0: number
Type : number
Default value : 0
mid1
mid1: number
Type : number
Default value : 0
musicSubscription
musicSubscription: []
Type : []
Default value : [null, null]
trebble0
trebble0: number
Type : number
Default value : 0
trebble1
trebble1: number
Type : number
Default value : 0
volume0
volume0: number
Type : number
Default value : 100
volume1
volume1: number
Type : number
Default value : 100
volumeMaster
volumeMaster: number
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>

result-matching ""

    No results matching ""