-
Notifications
You must be signed in to change notification settings - Fork 0
/
volume.ts
139 lines (116 loc) · 3.94 KB
/
volume.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import {
Component,
NgModule,
Input,
Output,
ViewChild,
HostListener,
ElementRef,
EventEmitter,
OnInit
} from "@angular/core";
import { CommonModule } from "@angular/common";
import Rx from "rxjs/Rx";
@Component({
selector: "volume-control",
template: `
<div class="volume">
<div #volumeMute class="mute" [class.not-muted]="!muted" [class.muted]="muted" (click)="clickMute()"></div>
<div #volumeContainer class="volume-container">
<div #volumeControl class="volume-control" [style.left]="calculateVolumeCurrent()"></div>
<div #volumeCurrent class="volume-current" [style.width]="calculateVolumeCurrent()"></div>
<div #volumeTotal class="volume-total"></div>
</div>
</div>
`
})
export class VolumeControl implements OnInit {
@ViewChild("volumeMute")
private volumeMute: ElementRef;
@ViewChild("volumeControl")
private volumeControl: ElementRef;
@ViewChild("volumeCurrent")
private volumeCurrent: ElementRef;
@ViewChild("volumeTotal")
private volumeTotal: ElementRef;
@Input("volume")
private volume: number;
@Input("muted")
private muted: Boolean;
@Output()
onVolumeChange = new EventEmitter();
@Output()
onMuteClick = new EventEmitter();
private mousedrag;
private mouseup = new EventEmitter();
private mousedown = new EventEmitter();
private mousemove = new EventEmitter();
@HostListener("mousedown", ["$event"])
onMouseDown = (evt: any) => {
this.mousedown.next(evt);
}
@HostListener("mouseup", ["$event"])
onMouseUp = (evt: any) => {
this.mouseup.next(evt);
this.onVolumeChange.emit(this.volume);
}
@HostListener("mousemove", ["$event"])
onMousemove = (evt: any) => {
this.mousemove.emit(evt);
}
constructor() {}
ngOnInit() {
// Find the center of the control
let controlRect = this.volumeControl.nativeElement.getBoundingClientRect();
let controlCenter = controlRect.right - ((controlRect.right - controlRect.left) / 2);
// Determine the max of the volume control
let volumeTotalLength = this.volumeTotal.nativeElement.getBoundingClientRect().width;
// console.info("Timeline Container", this.timelineContainer, this.timelineContainer.nativeElement.getBoundingClientRect());
// console.info("Timeline", this.timelineFull, this.timelineFull.nativeElement.getBoundingClientRect());
// console.info("Playhead", this.playhead, playheadRect, this.playhead.nativeElement.offsetLeft, this.playhead.nativeElement.offsetLeft - this.playhead.nativeElement.offsetWidth);
this.mousedown
.switchMap(event => {
return Rx.Observable.create((observer) => {
observer._next({
left: controlCenter
});
});
})
.flatMap((imageOffset) => {
return this.mousemove.flatMap((moveEvent) => {
return Rx.Observable.create((observer) => {
if (moveEvent["target"] !== this.volumeControl.nativeElement) {
observer._next({
left: (moveEvent["offsetX"] / volumeTotalLength) * 100
});
}
});
}).takeUntil(this.mouseup);
})
.subscribe({
next: pos => {
this.volumeControl.nativeElement.style.left = pos["left"] + "%";
this.volume = pos["left"];
}
});
}
clickMute = () => {
this.onMuteClick.emit();
}
calculateVolumeCurrent = () => {
return this.volume + "%";
}
}
@NgModule({
imports: [
CommonModule
],
declarations: [
VolumeControl,
],
exports: [
VolumeControl,
],
})
export class VolumeControlModule {
}