Skip to content

Commit

Permalink
audioplayer v0.2.3
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Nov 12, 2023
1 parent 907f106 commit 1b89f3a
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 81 deletions.
10 changes: 5 additions & 5 deletions src/app/system-apps/audioplayer/audioplayer.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,19 +167,19 @@
top: 50%;
/* left: 0; */
width: 100%;
height: 4px;
height: 2px;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
opacity: 0.9;
}
.progress {
position: absolute;
top: 0;
top: 30px;
left: 0;
width: 0%;
height: 100%;
height: calc(100% - 30px);
background-color: rgba(0, 0, 0, 0.1);
z-index: -1;
z-index: 0;
}

/* Loading */
Expand All @@ -195,7 +195,7 @@
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
display: none;
}
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
Expand Down
10 changes: 5 additions & 5 deletions src/app/system-apps/audioplayer/audioplayer.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name" (click)="setAudi0WindowToFocus(this.processId)">
<cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name" (click)="setAudioWindowToFocus(this.processId)">
<div class="body" #siriContainer>
<!-- Top Info -->
<div class="basic-info-container">
Expand All @@ -11,10 +11,10 @@
<div class="controlsOuter">
<div class="controlsInner">
<div class="loading" #loading></div>
<div class="btn playBtn" (click) ="onPlayBtnClicked()"></div>
<div class="btn pauseBtn" #pauseBtn></div>
<div class="btn prevBtn" #prevBtn></div>
<div class="btn nextBtn" #nextBtn></div>
<div class="btn playBtn" (click) ="onPlayBtnClicked()" #playBtn></div>
<div class="btn pauseBtn" (click) ="onPauseBtnClicked()" #pauseBtn></div>
<div class="btn prevBtn" (click) ="onPrevBtnClicked()" #prevBtn></div>
<div class="btn nextBtn" (click) ="onNextBtnClicked()" #nextBtn></div>
</div>
<div class="btn playlistBtn" #playlistBtn></div>
<div class="btn volumeBtn" #volumeBtn></div>
Expand Down
172 changes: 101 additions & 71 deletions src/app/system-apps/audioplayer/audioplayer.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { FileService } from 'src/app/shared/system-service/file.service';
import { BaseComponent } from 'src/app/system-base/base/base.component';
import { ComponentType } from 'src/app/system-files/component.types';
import { ProcessIDService } from 'src/app/shared/system-service/process.id.service';
Expand All @@ -20,10 +19,11 @@ declare let SiriWave:any;
export class AudioPlayerComponent implements BaseComponent, OnInit, OnDestroy, AfterViewInit {

@ViewChild('siriContainer', {static: true}) siriContainer!: ElementRef;
// @ViewChild('playBtn', {static: true}) playBtn!: ElementRef;
// @ViewChild('pauseBtn', {static: true}) pauseBtn!: ElementRef;
// @ViewChild('siriContainer', {static: true}) siriContainer!: ElementRef;
// @ViewChild('siriContainer', {static: true}) siriContainer!: ElementRef;
@ViewChild('playBtn', {static: true}) playBtn!: ElementRef;
@ViewChild('pauseBtn', {static: true}) pauseBtn!: ElementRef;
@ViewChild('progress', {static: true}) progress!: ElementRef;
@ViewChild('bar', {static: true}) bar!: ElementRef;
@ViewChild('loading', {static: true}) loading!: ElementRef;
// @ViewChild('siriContainer', {static: true}) siriContainer!: ElementRef;
// @ViewChild('siriContainer', {static: true}) siriContainer!: ElementRef;
// @ViewChild('siriContainer', {static: true}) siriContainer!: ElementRef;
Expand Down Expand Up @@ -67,9 +67,19 @@ export class AudioPlayerComponent implements BaseComponent, OnInit, OnDestroy, A

ngOnInit(): void {
this._fileInfo = this._triggerProcessService.getLastProcessTrigger();

const audioSrc = '/' +this._fileInfo.getDataPath;

this.siriWave = new SiriWave({
container: this.siriContainer.nativeElement,
width: 640,
height: 480,
autostart: false,
cover: true,
speed: 0.03,
amplitude: 0.7,
frequency: 2
});

this.audioPlayer = new Howl({
src: [audioSrc],
format:['mp3'],
Expand All @@ -78,26 +88,21 @@ export class AudioPlayerComponent implements BaseComponent, OnInit, OnDestroy, A
volume: 0.5,
// html5: true,
preload: true,
onplay: function() {
// Display the duration.
// this.duration = self.formatTime(Math.round(this.audioPlayer.duration()));

//console.log(this.audioPlayer.duration())

// Start updating the progress of the track.
//requestAnimationFrame(self.step.bind(self));

// Start the wave animation if we have already loaded
// wave.container.style.display = 'block';
// bar.style.display = 'none';
// pauseBtn.style.display = 'block';
},

onend: function() {
onend:()=>{
console.log('Finished!');
},
onload: function(){
onload:()=>{
console.log('load!');

if(this.audioPlayer.state() === 'loaded'){
const duration = this.audioPlayer.duration();
this.duration = this.formatTime(duration);
}

// // Start the wave animation if we have already loaded
// this.siriContainer.nativeElement.style.display = 'block';
// this.bar.nativeElement.style.display = 'none';
// this.pauseBtn.nativeElement.style.display = 'block';
}
});
}
Expand All @@ -116,81 +121,106 @@ export class AudioPlayerComponent implements BaseComponent, OnInit, OnDestroy, A
this.showTopMenu = false;
}

ngAfterViewInit() {
const fileType = 'video/' + this._fileInfo.getFileType.replace('.','');

ngAfterViewInit() {
1
// // console.log('audioPlayer:',this.audioPlayer)
// setTimeout(()=>{
// if(this.audioPlayer.state() === 'loaded'){
// const duration = this.audioPlayer.duration();
// this.duration = this.formatTime(duration);
// }
// },500);
}

// const id1 = this.audioPlayer.play()
// console.log('id1:',id1);
this.audioPlayer.load()
// console.log('audioPlayer:',this.audioPlayer)
// console.log(this.audioPlayer.duration());
// console.log(this.audioPlayer.state());
onPlayBtnClicked(){
console.log('What is this:',this);
console.log('this.audioPlayer.state():',this.audioPlayer.state());

// if(this.audioPlayer.state() === 'loading'){
// console.log('was up')
// }
// Display the duration.
this.duration = this.formatTime(this.audioPlayer.duration());

// const id1 = this.audioPlayer.play()
// console.log('id1:',id1);
// console.log('duration:',Math.round(this.audioPlayer.duration(id1)))
// Start updating the progress of the track.
requestAnimationFrame(this.updatePlayBackPosition.bind(this))

//this.audioPlayer.load()
//this.audioPlayer.play();

this.siriWave = new SiriWave({
container: this.siriContainer.nativeElement,
width: 640,
height: 300,
autostart: false,
});

// setTimeout(function(data){
// console.log('data:',data)
// if(data.state() === 'loaded'){
// console.log('was up 1')
// console.log(data.duration());
// }
// }, 500, this.audioPlayer);

// Start the wave animation if we have already loaded
//this.siriContainer.nativeElement.style.display = 'block';
this.siriWave.start();
this.bar.nativeElement.style.display = 'none';
this.pauseBtn.nativeElement.style.display = 'block';
this.playBtn.nativeElement.style.display = 'none';

setTimeout(()=>{
if(this.audioPlayer.state() === 'loaded'){
const duration = this.audioPlayer.duration();
this.duration = this.secondToMinutesAndSeconds(duration);
console.log(this.duration)
}
},500);
this.audioPlayer.play();
}

onPauseBtnClicked(){
//this.siriContainer.nativeElement.style.display = 'block';
this.siriWave.stop();
this.bar.nativeElement.style.display = 'block';
this.pauseBtn.nativeElement.style.display = 'none';
this.playBtn.nativeElement.style.display = 'block';
this.audioPlayer.pause();
}

onPrevBtnClicked(){
this.audioPlayer.play();
}

onPlayBtnClicked(){
onNextBtnClicked(){
this.audioPlayer.play();
}


ngOnDestroy(): void {
if (this.audioPlayer) {
this.audioPlayer.unload();
}
}

secondToMinutesAndSeconds(seconds:number):string{
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds - (mins * 60));
formatTime(seconds:number):string{
const mins = Math.floor(seconds / 60) || 0;
const secs = Math.floor(seconds - (mins * 60)) || 0;

return `${mins}:${secs}`
//return `${mins}:${secs < 10 ? '0' : ''}`
return mins + ':' + (secs < 10 ? '0' : '') + secs;
}

addToRecentsList(videoPath:string):void{
if(!this.recents.includes(videoPath))
this.recents.push(videoPath);
addToRecentsList(audioPath:string):void{
if(!this.recents.includes(audioPath))
this.recents.push(audioPath);
}

setAudi0WindowToFocus(pid:number):void{
setAudioWindowToFocus(pid:number):void{
this._runningProcessService.focusOnCurrentProcessNotify.next(pid);
}


resizeSiriWave(){
const height = window.innerHeight * 0.3;
const width = window.innerWidth;
this.siriWave.height = height;
this.siriWave.height_2 = height / 2;
this.siriWave.MAX = this.siriWave.height_2 - 4;
this.siriWave.width = width;
this.siriWave.width_2 = width / 2;
this.siriWave.width_4 = width / 4;
this.siriWave.canvas.height = height;
this.siriWave.canvas.width = width;
this.siriWave.container.style.margin = -(height / 2) + 'px auto';
}


updatePlayBackPosition(){
const seek = this.audioPlayer.seek() || 0;
this.timer = this.formatTime(Math.round(seek));
this.progress.nativeElement.style.width = (((seek / this.audioPlayer.duration()) * 100) || 0) + '%';

if(this.audioPlayer.playing()){
requestAnimationFrame(this.updatePlayBackPosition.bind(this));
}
}


private getComponentDetail():Process{
return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type, this._triggerProcessService.getLastProcessTrigger)
}
Expand Down

0 comments on commit 1b89f3a

Please sign in to comment.