audiolab/cear-audiolab
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: audiolab:4ed899b2599d2d86aef31ee7fdd4809613f15239
Branches Tags
audiolab:master
...
compare: audiolab:562b56a5a9f9ea49f4cef129bf9dda6bb5167c9a
Branches Tags
audiolab:master

2 Commits
4ed899b259 ... 562b56a5a9

Author SHA1 Message Date
Luca Rullo
562b56a5a9
Testing audios 2023-11-01 02:44:43 +01:00
Luca Rullo
2dc7f04fcc
Update: Layout 2023-11-01 02:04:11 +01:00
7 changed files with 79 additions and 16 deletions
Show Stats Expand all files Collapse all files

9
inc/src/app/app.component.html
View File

@ -6,7 +6,7 @@
<!-- <div class="col left"></div> -->
<div class="col center priority">
<div class="button title">
<h1>El agua no tiene nombre</h1>
<h1>{{audio_title}}</h1>
</div>
</div>
<!-- <div class="col right"></div> -->
@ -34,15 +34,16 @@
</section> -->
<!-- end space -->
<section id="podcasts" class="container middle" *ngFor="let n of news; let index;">
<section id="podcasts" class="container middle podcasts" *ngFor="let n of podcasts; let index;">
<div class="content columns">
<div class="col center">
<div class="button big" [ngStyle]="{transform:'translateX('+n.random+'vw)'}">
<h1>Podcast {{n.title}}</h1>
<div class="button big" [id]="n.name" (click)="play(n)" [ngStyle]="{transform:'translateX('+n.random+'vw)'}">
<h1>{{n.title}}</h1>
</div>
</div>
</div>
</section>
<!-- space -->
<!-- <section class="container big">
<div class="content columns">

37
inc/src/app/app.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit, Inject } from '@angular/core';
import { PlayerService } from './player.service';
import { DOCUMENT, Location } from '@angular/common';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
@ -13,11 +14,15 @@ export class AppComponent implements OnInit {
title = 'cear-rio';
start:boolean = false;
randomPos:number = 0;
news:any[] = [{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0}]
// news:any[] = [{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0}]
url:string ="/assets/json/podcasts.json";
podcasts:any = [];
audio_title:string = "El agua no tiene nombre";
constructor(
public playerService:PlayerService,
@Inject(DOCUMENT) private document: Document
@Inject(DOCUMENT) private document: Document,
private http: HttpClient
) {
playerService.init_app$
@ -26,12 +31,27 @@ export class AppComponent implements OnInit {
this.start = res;
}
)
/* subscribe to metada info */
playerService.icy_metadata$
.subscribe(
(res:any) => {
this.audio_title=res;
}
)
}
ngOnInit(): void {
this.news.map( (n) => {
n.random = this.randomPos=this.randomPosition();
})
this.http.get(this.url).subscribe(res => {
this.podcasts = res;
// console.log(this.podcasts)
this.podcasts.map( (n:any) => {
n.random = this.randomPos=this.randomPosition();
})
});
}
@ -47,4 +67,11 @@ export class AppComponent implements OnInit {
element.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
}
play(p:any) {
// console.log('play! '+p.audio);
this.audio_title="Cargando";
this.playerService.play(p.audio);
this.playerService.setMetadata(p.title);
}
}

4
inc/src/app/header/header.component.html
View File

@ -14,10 +14,10 @@
<!-- <span *ngIf="!icy_metadata && !duration">El agua no tiene nombre</span> -->
<span *ngIf="icy_metadata" class="player">
<ng-container *ngIf="duration=='00:00'"></ng-container>
<!-- <ng-container>{{icy_metadata}}</ng-container> -->
<ng-container>{{icy_metadata}}</ng-container>
</span>
<span *ngIf="duration!='00:00' && currentTime"><a (click)="stop()" [ngClass]="{'play':isStop}">stop</a></span>
<span *ngIf="currentTime && duration!='00:00'">{{currentTime}}<ng-container *ngIf="duration!='00:00'">/{{duration}}</ng-container></span>
<span>Soinumapa.net</span>
<!-- <span>Soinumapa.net</span> -->
</div>
</section>

1
inc/src/app/header/header.component.ts
View File

@ -36,7 +36,6 @@ export class HeaderComponent implements OnInit {
.subscribe(
(res:any) => {
this.icy_metadata=res;
console.log('asdf')
}
)

13
inc/src/app/player.service.ts
View File

@ -99,6 +99,8 @@ export class PlayerService implements OnInit {
this.audio.onended = () => { this.play(environment.urlStream) };
this.audio.onprogress = () => { this.onProgress() };
this._icy_metadata.next("El agua no tiene nombre");
this.audio.oncanplay = () => {
// init player
this._init_app.next(true);
@ -124,6 +126,7 @@ export class PlayerService implements OnInit {
}
public getStreamMetadata() {
this.http.get<any[]>(environment.urlStreamMetadata)
.subscribe( (res:any) => {
let index
@ -133,12 +136,18 @@ export class PlayerService implements OnInit {
if (res['icestats']['source'][index]) {
//console.log(res.icestats.source[index].title)
this.audio_icy = res.icestats.source[index].title;
this._icy_metadata.next(res.icestats.source[index].title);
//this._icy_metadata.next(res.icestats.source[index].title);
this._icy_metadata.next("El agua no tiene nombre");
this.last_icy_metadata=res.icestats.source[index].title;
}
})
}
public setMetadata(title:string) {
this._icy_metadata.next(title);
}
public podcast(p:any) {
//console.log(p)
@ -338,7 +347,7 @@ export class PlayerService implements OnInit {
}
restart() {
this._icy_metadata.next(true)
this._icy_metadata.next('Cargando')
this.play(environment.urlStream);
}

26
inc/src/assets/json/podcasts.json Normal file
View File

@ -0,0 +1,26 @@
[
{
"name": "podcast1",
"title": "Podcast 1",
"audio": "https://d3uq9vzdmwnq5u.cloudfront.net/v1/variant/8e7eb371-ddd5-51b1-8879-7c99fa0874d5.mp3?session_id=5a59c020-a475-5cef-98c5-e0f05b3cacfe&ct=DOWNLOAD&episode_id=116862422&show_id=2284011&user_id=33206696&organization_id=ivoox&tenant=IVOOX&timestamp=1698802776&media_type=dynamic&fallback_url=https%3A%2F%2Fd3uq9vzdmwnq5u.cloudfront.net%2Fpoximamenteescucharefugio-canalescucharefugio-ivoox116862422.mp3%3Fct%3DDOWNLOAD%26episode_id%3D116862422%26show_id%3D2284011%26user_id%3D33206696%26organization_id%3Divoox%26tenant%3DIVOOX%26timestamp%3D1698802776%26media_type%3Dstatic%26Expires%3D1698975576%26Key-Pair-Id%3DK1J2BR3INU6RYD%26Signature%3Dkc74xwxozH7Wo5rQzRwB1J2TmQ3V~tlWW8sl~mTPQnFfeQkpQoCVqbGsS4sjQM598MDoeMFCqMqNGqx4UTqwZdF7Eq397ir2JnZJb4--Qm1zIPUModg5u5jZItNHd5k-EzbptqQjxqg-3x7BbdBPwwuM5nbHhLLgYfLoSoiC6cpJaqR-6Bovm5EnB3A1iQiV4iTyW1nljvAIP~kyURhAEbLUy95qWhnCqWeZoiohP3YM8qMBXauMAMNFQAYuIogjQ4ObzNazbrjkNEik5Dq8chB2WgxxkEA4JE6qBWV6kS9LpY-QfCyrV7c4U0kNNPmTpeCED9YOC8jrHLibECf8Hw__&Expires=1698975577&Key-Pair-Id=K1J2BR3INU6RYD&Signature=IkNUujU-zkM2cqFgnrJPlxIscHvf-rHq1vz~Jyu6ypGg3h0C02mimVMRZzllV-SZ~fuwjk-p6JpK2lhLvLswMczuvFjTSgEYea71EXpJ1W9Q-gOgpjMp84SZLaMa69IqzxPLNZFA6o1kGd5F12DV8myyosCxcFy~ZDIZsJss98IN7ebusGP5aZFVaXUSC3WBbkuMow1WQeERim7iK2RSXFzYNkiV1zjV6ZLGg8mZj2Gn-RoFB4DRS1vtkVl1~MTD9XmOItmmoThsqu~sMgnrKewEyQDwms~Y3aV4ClEsWxhAZMT9g4s5jQeRwRNjhriU5fY3GBkTWmBhekHA3ERK8Q__",
"random": 0
},
{
"name": "podcast2",
"title": "Podcast 2",
"audio": "https://d3uq9vzdmwnq5u.cloudfront.net/v1/variant/8e7eb371-ddd5-51b1-8879-7c99fa0874d5.mp3?session_id=5a59c020-a475-5cef-98c5-e0f05b3cacfe&ct=DOWNLOAD&episode_id=116862422&show_id=2284011&user_id=33206696&organization_id=ivoox&tenant=IVOOX&timestamp=1698802776&media_type=dynamic&fallback_url=https%3A%2F%2Fd3uq9vzdmwnq5u.cloudfront.net%2Fpoximamenteescucharefugio-canalescucharefugio-ivoox116862422.mp3%3Fct%3DDOWNLOAD%26episode_id%3D116862422%26show_id%3D2284011%26user_id%3D33206696%26organization_id%3Divoox%26tenant%3DIVOOX%26timestamp%3D1698802776%26media_type%3Dstatic%26Expires%3D1698975576%26Key-Pair-Id%3DK1J2BR3INU6RYD%26Signature%3Dkc74xwxozH7Wo5rQzRwB1J2TmQ3V~tlWW8sl~mTPQnFfeQkpQoCVqbGsS4sjQM598MDoeMFCqMqNGqx4UTqwZdF7Eq397ir2JnZJb4--Qm1zIPUModg5u5jZItNHd5k-EzbptqQjxqg-3x7BbdBPwwuM5nbHhLLgYfLoSoiC6cpJaqR-6Bovm5EnB3A1iQiV4iTyW1nljvAIP~kyURhAEbLUy95qWhnCqWeZoiohP3YM8qMBXauMAMNFQAYuIogjQ4ObzNazbrjkNEik5Dq8chB2WgxxkEA4JE6qBWV6kS9LpY-QfCyrV7c4U0kNNPmTpeCED9YOC8jrHLibECf8Hw__&Expires=1698975577&Key-Pair-Id=K1J2BR3INU6RYD&Signature=IkNUujU-zkM2cqFgnrJPlxIscHvf-rHq1vz~Jyu6ypGg3h0C02mimVMRZzllV-SZ~fuwjk-p6JpK2lhLvLswMczuvFjTSgEYea71EXpJ1W9Q-gOgpjMp84SZLaMa69IqzxPLNZFA6o1kGd5F12DV8myyosCxcFy~ZDIZsJss98IN7ebusGP5aZFVaXUSC3WBbkuMow1WQeERim7iK2RSXFzYNkiV1zjV6ZLGg8mZj2Gn-RoFB4DRS1vtkVl1~MTD9XmOItmmoThsqu~sMgnrKewEyQDwms~Y3aV4ClEsWxhAZMT9g4s5jQeRwRNjhriU5fY3GBkTWmBhekHA3ERK8Q__",
"random": 0
},
{
"name": "podcast3",
"title": "Podcast 3",
"audio": "https://d3uq9vzdmwnq5u.cloudfront.net/v1/variant/8e7eb371-ddd5-51b1-8879-7c99fa0874d5.mp3?session_id=5a59c020-a475-5cef-98c5-e0f05b3cacfe&ct=DOWNLOAD&episode_id=116862422&show_id=2284011&user_id=33206696&organization_id=ivoox&tenant=IVOOX&timestamp=1698802776&media_type=dynamic&fallback_url=https%3A%2F%2Fd3uq9vzdmwnq5u.cloudfront.net%2Fpoximamenteescucharefugio-canalescucharefugio-ivoox116862422.mp3%3Fct%3DDOWNLOAD%26episode_id%3D116862422%26show_id%3D2284011%26user_id%3D33206696%26organization_id%3Divoox%26tenant%3DIVOOX%26timestamp%3D1698802776%26media_type%3Dstatic%26Expires%3D1698975576%26Key-Pair-Id%3DK1J2BR3INU6RYD%26Signature%3Dkc74xwxozH7Wo5rQzRwB1J2TmQ3V~tlWW8sl~mTPQnFfeQkpQoCVqbGsS4sjQM598MDoeMFCqMqNGqx4UTqwZdF7Eq397ir2JnZJb4--Qm1zIPUModg5u5jZItNHd5k-EzbptqQjxqg-3x7BbdBPwwuM5nbHhLLgYfLoSoiC6cpJaqR-6Bovm5EnB3A1iQiV4iTyW1nljvAIP~kyURhAEbLUy95qWhnCqWeZoiohP3YM8qMBXauMAMNFQAYuIogjQ4ObzNazbrjkNEik5Dq8chB2WgxxkEA4JE6qBWV6kS9LpY-QfCyrV7c4U0kNNPmTpeCED9YOC8jrHLibECf8Hw__&Expires=1698975577&Key-Pair-Id=K1J2BR3INU6RYD&Signature=IkNUujU-zkM2cqFgnrJPlxIscHvf-rHq1vz~Jyu6ypGg3h0C02mimVMRZzllV-SZ~fuwjk-p6JpK2lhLvLswMczuvFjTSgEYea71EXpJ1W9Q-gOgpjMp84SZLaMa69IqzxPLNZFA6o1kGd5F12DV8myyosCxcFy~ZDIZsJss98IN7ebusGP5aZFVaXUSC3WBbkuMow1WQeERim7iK2RSXFzYNkiV1zjV6ZLGg8mZj2Gn-RoFB4DRS1vtkVl1~MTD9XmOItmmoThsqu~sMgnrKewEyQDwms~Y3aV4ClEsWxhAZMT9g4s5jQeRwRNjhriU5fY3GBkTWmBhekHA3ERK8Q__",
"random": 0
},
{
"name": "podcast4",
"title": "Podcast 4",
"audio": "https://d3uq9vzdmwnq5u.cloudfront.net/v1/variant/8e7eb371-ddd5-51b1-8879-7c99fa0874d5.mp3?session_id=5a59c020-a475-5cef-98c5-e0f05b3cacfe&ct=DOWNLOAD&episode_id=116862422&show_id=2284011&user_id=33206696&organization_id=ivoox&tenant=IVOOX&timestamp=1698802776&media_type=dynamic&fallback_url=https%3A%2F%2Fd3uq9vzdmwnq5u.cloudfront.net%2Fpoximamenteescucharefugio-canalescucharefugio-ivoox116862422.mp3%3Fct%3DDOWNLOAD%26episode_id%3D116862422%26show_id%3D2284011%26user_id%3D33206696%26organization_id%3Divoox%26tenant%3DIVOOX%26timestamp%3D1698802776%26media_type%3Dstatic%26Expires%3D1698975576%26Key-Pair-Id%3DK1J2BR3INU6RYD%26Signature%3Dkc74xwxozH7Wo5rQzRwB1J2TmQ3V~tlWW8sl~mTPQnFfeQkpQoCVqbGsS4sjQM598MDoeMFCqMqNGqx4UTqwZdF7Eq397ir2JnZJb4--Qm1zIPUModg5u5jZItNHd5k-EzbptqQjxqg-3x7BbdBPwwuM5nbHhLLgYfLoSoiC6cpJaqR-6Bovm5EnB3A1iQiV4iTyW1nljvAIP~kyURhAEbLUy95qWhnCqWeZoiohP3YM8qMBXauMAMNFQAYuIogjQ4ObzNazbrjkNEik5Dq8chB2WgxxkEA4JE6qBWV6kS9LpY-QfCyrV7c4U0kNNPmTpeCED9YOC8jrHLibECf8Hw__&Expires=1698975577&Key-Pair-Id=K1J2BR3INU6RYD&Signature=IkNUujU-zkM2cqFgnrJPlxIscHvf-rHq1vz~Jyu6ypGg3h0C02mimVMRZzllV-SZ~fuwjk-p6JpK2lhLvLswMczuvFjTSgEYea71EXpJ1W9Q-gOgpjMp84SZLaMa69IqzxPLNZFA6o1kGd5F12DV8myyosCxcFy~ZDIZsJss98IN7ebusGP5aZFVaXUSC3WBbkuMow1WQeERim7iK2RSXFzYNkiV1zjV6ZLGg8mZj2Gn-RoFB4DRS1vtkVl1~MTD9XmOItmmoThsqu~sMgnrKewEyQDwms~Y3aV4ClEsWxhAZMT9g4s5jQeRwRNjhriU5fY3GBkTWmBhekHA3ERK8Q__",
"random": 0
}
]

5
inc/src/styles.scss
View File

@ -18,14 +18,15 @@ section.container {
width:32px;
height:32px;
position:absolute;
bottom:16px;
bottom:48px;
left:calc( 50vw - 16px );
transform:rotate(45deg);
border: 5px solid #000;
border: 5px solid #29296d;
border-left:0;
border-top:0;
cursor:pointer;
}
&.podcasts { overflow-x:hidden; }
&.big { min-height:100vh;}
&.middle { min-height: 50vh;}
&.fixed {