Create: CEAR Project
This commit is contained in:
commit
5548f9cc04
GPG Key ID:
A04E97D8E19A58A7
15
Dockerfile
Normal file
15
Dockerfile
Normal file
@ -0,0 +1,15 @@
|
||||
## ANGULAR THEME BUILD
|
||||
|
||||
FROM node:16-alpine as angular
|
||||
|
||||
WORKDIR angular
|
||||
|
||||
COPY inc ./
|
||||
|
||||
RUN npm install -g @angular/cli
|
||||
RUN ng config -g cli.warnings.versionMismatch false
|
||||
RUN npm install
|
||||
|
||||
RUN npm run build:ssr --prod --proxy-config
|
||||
|
||||
CMD npm run serve:ssr -c production --proxy-config
|
||||
8
docker-compose.yml
Normal file
8
docker-compose.yml
Normal file
@ -0,0 +1,8 @@
|
||||
version: "3"
|
||||
services:
|
||||
frontend:
|
||||
image: registry.audio-lab.org/cear
|
||||
build: .
|
||||
ports:
|
||||
- 0.0.0.0:${APP_PORT_HTTP}:4000
|
||||
restart: always
|
||||
16
inc/.editorconfig
Normal file
16
inc/.editorconfig
Normal file
@ -0,0 +1,16 @@
|
||||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
42
inc/.gitignore
vendored
Normal file
42
inc/.gitignore
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
4
inc/.vscode/extensions.json
vendored
Normal file
4
inc/.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
|
||||
"recommendations": ["angular.ng-template"]
|
||||
}
|
||||
20
inc/.vscode/launch.json
vendored
Normal file
20
inc/.vscode/launch.json
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "ng serve",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: start",
|
||||
"url": "http://localhost:4200/"
|
||||
},
|
||||
{
|
||||
"name": "ng test",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: test",
|
||||
"url": "http://localhost:9876/debug.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
42
inc/.vscode/tasks.json
vendored
Normal file
42
inc/.vscode/tasks.json
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"type": "npm",
|
||||
"script": "start",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "npm",
|
||||
"script": "test",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
27
inc/README.md
Normal file
27
inc/README.md
Normal file
@ -0,0 +1,27 @@
|
||||
# CearRio
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.8.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
104
inc/angular.json
Normal file
104
inc/angular.json
Normal file
@ -0,0 +1,104 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"cear-rio": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/cear-rio",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": [
|
||||
"zone.js"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "cear-rio:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "cear-rio:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "cear-rio:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"polyfills": [
|
||||
"zone.js",
|
||||
"zone.js/testing"
|
||||
],
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
12872
inc/package-lock.json
generated
Normal file
12872
inc/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
38
inc/package.json
Normal file
38
inc/package.json
Normal file
@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "cear-rio",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^16.2.0",
|
||||
"@angular/common": "^16.2.0",
|
||||
"@angular/compiler": "^16.2.0",
|
||||
"@angular/core": "^16.2.0",
|
||||
"@angular/forms": "^16.2.0",
|
||||
"@angular/platform-browser": "^16.2.0",
|
||||
"@angular/platform-browser-dynamic": "^16.2.0",
|
||||
"@angular/router": "^16.2.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^16.2.8",
|
||||
"@angular/cli": "^16.2.8",
|
||||
"@angular/compiler-cli": "^16.2.0",
|
||||
"@types/jasmine": "~4.3.0",
|
||||
"jasmine-core": "~4.6.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"typescript": "~5.1.3"
|
||||
}
|
||||
}
|
||||
10
inc/src/app/app-routing.module.ts
Normal file
10
inc/src/app/app-routing.module.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
const routes: Routes = [];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
67
inc/src/app/app.component.html
Normal file
67
inc/src/app/app.component.html
Normal file
@ -0,0 +1,67 @@
|
||||
<app-header></app-header>
|
||||
<!-- <video style="position:fixed;top:0;left:0;height:100vh;" src="https://onjustonebreath.com/videos/alenka-monofin-enlarged-cropped-1600.mp4" loop autoplay></video> -->
|
||||
<ng-container *ngIf="start">
|
||||
<section class="container big fixed">
|
||||
<div class="content columns">
|
||||
<!-- <div class="col left"></div> -->
|
||||
<div class="col center priority">
|
||||
<div class="button title">
|
||||
<h1>El agua no tiene nombre</h1>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col right"></div> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container big text">
|
||||
<div class="content columns">
|
||||
<div class="col left"></div>
|
||||
<div class="col center intro">
|
||||
<p>Gracias a las personas que han hecho posible la elaboración de este podcast desde la delegación de CEAR Navarra.</p>
|
||||
</div>
|
||||
<div class="col right"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- space -->
|
||||
<section class="container big">
|
||||
<div class="content columns">
|
||||
<div class="col left"></div>
|
||||
<div class="col center"></div>
|
||||
<div class="col right"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end space -->
|
||||
|
||||
<section class="container middle" *ngFor="let n of news; let index;">
|
||||
<div class="content columns">
|
||||
<div class="col center">
|
||||
<div class="button big" [ngStyle]="{transform:'translateX('+n.random+'%)'}">
|
||||
<h1>Podcast {{n.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- space -->
|
||||
<section class="container big">
|
||||
<div class="content columns">
|
||||
<div class="col left"></div>
|
||||
<div class="col center"></div>
|
||||
<div class="col right"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end space -->
|
||||
|
||||
<section class="container big text">
|
||||
<div class="content columns">
|
||||
<div class="col left"></div>
|
||||
<div class="col center intro">
|
||||
<p>Gracias a las personas que han hecho posible la elaboración de este podcast desde la delegación de CEAR Navarra.</p>
|
||||
<p>Este programa contó con la colaboración de <a href="https://www.audio-lab.org">Audio Laborategia elkartea</a> para la realización de la pieza sonora a través de talleres de escucha y de creación colectiva.</p>
|
||||
<p>En la realización sonora: Xabier Erkizia, Luca Rullo, Iñigo Telletxea y Juan Arnal.</p>
|
||||
<p>El guion ha sido escrito colaborativamente junto a las mismas personas que han puesto su voz en la narración.</p>
|
||||
</div>
|
||||
<div class="col right"></div>
|
||||
</div>
|
||||
</section>
|
||||
</ng-container>
|
||||
0
inc/src/app/app.component.scss
Normal file
0
inc/src/app/app.component.scss
Normal file
29
inc/src/app/app.component.spec.ts
Normal file
29
inc/src/app/app.component.spec.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [AppComponent]
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'cear-rio'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('cear-rio');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('.content span')?.textContent).toContain('cear-rio app is running!');
|
||||
});
|
||||
});
|
||||
42
inc/src/app/app.component.ts
Normal file
42
inc/src/app/app.component.ts
Normal file
@ -0,0 +1,42 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { PlayerService } from './player.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss']
|
||||
})
|
||||
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}]
|
||||
|
||||
constructor(
|
||||
public playerService:PlayerService
|
||||
) {
|
||||
|
||||
playerService.init_app$
|
||||
.subscribe(
|
||||
(res:any) => {
|
||||
console.log('jsjs')
|
||||
this.start = res;
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.news.map( (n) => {
|
||||
n.random = this.randomPos=this.randomPosition();
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
randomPosition():number {
|
||||
let seed = Math.random();
|
||||
let max=100
|
||||
let min=-100
|
||||
// return (Math.floor(seed * 100)*(-1*Math.floor(seed*2)));
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
}
|
||||
26
inc/src/app/app.module.ts
Normal file
26
inc/src/app/app.module.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
import { PlayerService } from './player.service';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { HeaderComponent } from './header/header.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeaderComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
HttpClientModule
|
||||
],
|
||||
providers: [
|
||||
PlayerService
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
23
inc/src/app/header/header.component.html
Normal file
23
inc/src/app/header/header.component.html
Normal file
@ -0,0 +1,23 @@
|
||||
<section class="container big fixed header" *ngIf="!start">
|
||||
<div class="content columns">
|
||||
<!-- <div class="col left"></div> -->
|
||||
<div class="col center priority">
|
||||
<div #button class="button title" (click)="click()" [ngClass]="{'clicked':clicked}">
|
||||
<h1>El agua no tiene nombre</h1>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col right"></div> -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="header player-container" *ngIf="start">
|
||||
<div class="player">
|
||||
<!-- <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> -->
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
22
inc/src/app/header/header.component.scss
Normal file
22
inc/src/app/header/header.component.scss
Normal file
@ -0,0 +1,22 @@
|
||||
section.header {
|
||||
position:fixed;
|
||||
z-index:20;
|
||||
|
||||
&.player-container {
|
||||
width:100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
div.player {
|
||||
padding:12px;
|
||||
span { margin:0 12px;}
|
||||
a { cursor:pointer;}
|
||||
}
|
||||
}
|
||||
21
inc/src/app/header/header.component.spec.ts
Normal file
21
inc/src/app/header/header.component.spec.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HeaderComponent } from './header.component';
|
||||
|
||||
describe('HeaderComponent', () => {
|
||||
let component: HeaderComponent;
|
||||
let fixture: ComponentFixture<HeaderComponent>;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [HeaderComponent]
|
||||
});
|
||||
fixture = TestBed.createComponent(HeaderComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
86
inc/src/app/header/header.component.ts
Normal file
86
inc/src/app/header/header.component.ts
Normal file
@ -0,0 +1,86 @@
|
||||
import { Component, OnInit} from '@angular/core';
|
||||
import { PlayerService } from '../player.service';
|
||||
import { Subject,Observable } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
templateUrl: './header.component.html',
|
||||
styleUrls: ['./header.component.scss']
|
||||
})
|
||||
export class HeaderComponent implements OnInit {
|
||||
|
||||
start?:boolean;
|
||||
delete:boolean = false;
|
||||
isPlay:boolean = false;
|
||||
isStop:boolean = false;
|
||||
icy_metadata:string = "";
|
||||
title:string = "";
|
||||
duration = "";
|
||||
currentTime = "";
|
||||
init:boolean = false;
|
||||
clicked:boolean = false;
|
||||
|
||||
constructor(
|
||||
public playerService:PlayerService
|
||||
) {
|
||||
|
||||
playerService.init_app$
|
||||
.subscribe(
|
||||
(res:any) => {
|
||||
this.start = res;
|
||||
}
|
||||
)
|
||||
|
||||
/* subscribe to metada info */
|
||||
playerService.icy_metadata$
|
||||
.subscribe(
|
||||
(res:any) => {
|
||||
this.icy_metadata=res;
|
||||
console.log('asdf')
|
||||
}
|
||||
)
|
||||
|
||||
/* subscribe isPlaying */
|
||||
playerService.audio_is_playing$
|
||||
.subscribe(
|
||||
(res:any) => {
|
||||
this.isPlay=res;
|
||||
}
|
||||
)
|
||||
/* subscribe timer */
|
||||
playerService.audio_current_time$
|
||||
.subscribe(
|
||||
(res:any) => {
|
||||
this.duration = res.duration;
|
||||
this.currentTime = res.currentTime;
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
click():void {
|
||||
this.clicked = true;
|
||||
this.playerService.play("https://brba.audio-lab.org/stream/ura.mp3");
|
||||
}
|
||||
|
||||
mute() {
|
||||
this.playerService.mute()
|
||||
this.delete = !this.delete;
|
||||
}
|
||||
|
||||
play() {
|
||||
this.playerService.pause();
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.playerService.restart();
|
||||
this.title="";
|
||||
this.icy_metadata="";
|
||||
this.currentTime="";
|
||||
this.duration="";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
16
inc/src/app/player.service.spec.ts
Normal file
16
inc/src/app/player.service.spec.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PlayerService } from './player.service';
|
||||
|
||||
describe('PlayerService', () => {
|
||||
let service: PlayerService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(PlayerService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
325
inc/src/app/player.service.ts
Normal file
325
inc/src/app/player.service.ts
Normal file
@ -0,0 +1,325 @@
|
||||
import { Injectable, OnInit } from '@angular/core';
|
||||
import { HttpClient, HttpParams, HttpHeaders, HttpErrorResponse} from '@angular/common/http';
|
||||
import { Subject,Observable } from 'rxjs';
|
||||
import {environment} from '../environments/environment';
|
||||
|
||||
@Injectable()
|
||||
export class PlayerService implements OnInit {
|
||||
|
||||
audio;
|
||||
audio_paused;
|
||||
|
||||
audio_id?:any;
|
||||
audio_title?:any;
|
||||
audio_position?:any;
|
||||
audio_status:string = "load";
|
||||
audio_elapsed?:any;
|
||||
audio_duration?:any;
|
||||
audio_url?:any;
|
||||
audio_stopped;
|
||||
audio_autoplay:boolean = false;
|
||||
audio_buffered:number=-1;
|
||||
public audio_icy="loading data..."
|
||||
|
||||
metadataTimeout?:any;
|
||||
|
||||
public player_minimized:boolean = false;
|
||||
|
||||
/* initApp */
|
||||
private _init_app = new Subject();
|
||||
init_app$ = this._init_app.asObservable();
|
||||
|
||||
/* Metadata */
|
||||
private _icy_metadata = new Subject();
|
||||
icy_metadata$ = this._icy_metadata.asObservable();
|
||||
last_icy_metadata?:any;
|
||||
|
||||
/* Playing */
|
||||
private _audio_is_playing = new Subject();
|
||||
public audio_is_playing$ = this._audio_is_playing.asObservable();
|
||||
|
||||
/* Time */
|
||||
private _audio_current_time = new Subject();
|
||||
public audio_current_time$ = this._audio_current_time.asObservable();
|
||||
|
||||
private _podcast = new Subject();
|
||||
podcast$ = this._podcast.asObservable();
|
||||
posts$?: Observable<any[]>;
|
||||
|
||||
constructor(
|
||||
public http:HttpClient,
|
||||
) {
|
||||
this.audio = new Audio();
|
||||
this.audio_paused = true; //audio not playing
|
||||
this._audio_is_playing.next(this.audio_paused);
|
||||
this.audio_stopped = true;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
|
||||
//end audio play
|
||||
this.audio_status = "init"
|
||||
this.audio.onended = this.handleEnded.bind(this);
|
||||
this.audio.oncanplay= this.handledCanPlay.bind(this);
|
||||
//play updates
|
||||
this.audio.ontimeupdate = this.handleTimeUpdate.bind(this);
|
||||
this.audio.onwaiting = this.handleWaiting.bind(this);
|
||||
this.audio.onloadedmetadata = this.handleLoadMetadata.bind(this);
|
||||
}
|
||||
|
||||
load(url:string) {
|
||||
|
||||
this.audio.src = url;
|
||||
this.audio.load();
|
||||
this.audio.ontimeupdate = this.handleTimeUpdate.bind(this);
|
||||
this.audio.onloadstart = () => {this.audio_buffered = 0;};
|
||||
this.audio.onended = () => { this.play(environment.urlStream) };
|
||||
this.audio.onprogress = () => { this.onProgress() };
|
||||
|
||||
console.log(environment.urlStream)
|
||||
|
||||
this.audio.oncanplay = () => {
|
||||
// init player
|
||||
this._init_app.next(true);
|
||||
|
||||
this.audio_paused=false;
|
||||
this._audio_is_playing.next(this.audio_paused);
|
||||
|
||||
if (url===environment.urlStream) {
|
||||
this.getStreamMetadata()
|
||||
this.metadataTimeout = setInterval( () => { this.getStreamMetadata()}, 5000 );
|
||||
} else {
|
||||
try {
|
||||
clearInterval(this.metadataTimeout)
|
||||
} catch (e) {
|
||||
console.error("Clear Interval Error: "+e)
|
||||
}
|
||||
//console.log(this.audio)
|
||||
// this._icy_metadata.next();
|
||||
// this._icy_metadata.next("Brba Podcast")
|
||||
}
|
||||
this.canPlay();
|
||||
};
|
||||
}
|
||||
|
||||
public getStreamMetadata() {
|
||||
this.http.get<any[]>(environment.urlStreamMetadata)
|
||||
.subscribe( (res:any) => {
|
||||
let index
|
||||
try { index = res['icestats']['source'].findIndex( (source:any) => source.server_name == "ura.mp3" ) }
|
||||
catch (e) { index=0 }
|
||||
|
||||
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.last_icy_metadata=res.icestats.source[index].title;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
public podcast(p:any) {
|
||||
//console.log(p)
|
||||
this._icy_metadata.next(p[0].acf.icy_metadata_identifier);
|
||||
this._podcast.next(p)
|
||||
}
|
||||
|
||||
public getIcyMetadata() {
|
||||
return this.audio_icy;
|
||||
}
|
||||
|
||||
public getBuffered() {
|
||||
return Math.round(this.audio_buffered / this.audio.duration * 100);
|
||||
}
|
||||
|
||||
onProgress() {
|
||||
|
||||
var duration = this.audio.duration;
|
||||
|
||||
if (duration > 0) {
|
||||
for (var i=0; i<this.audio.buffered.length; i++) {
|
||||
if (this.audio.buffered.start(this.audio.buffered.length - 1 - i) < this.audio.currentTime) {
|
||||
this.audio_buffered = this.audio.buffered.end(this.audio.buffered.length-1);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
play(url:string) {
|
||||
this.load(url);
|
||||
}
|
||||
|
||||
// play(url?,title?,id?) {
|
||||
// this.audio_stopped = true;
|
||||
// // exite ya un audio en uso
|
||||
// if (this.audio_id>0) {
|
||||
// //si le volvemos a enviar el id comprobamos si hay que cambiar
|
||||
// if (!!id) {
|
||||
// if (id!=this.audio_id) {
|
||||
// this.audio_id=id;
|
||||
// this.audio_title=title;
|
||||
// this.audio_url=url.replace(/^http:\/\//i, 'https://');
|
||||
// this.load(this.audio_url);
|
||||
// }
|
||||
// else { this.canPlay(); }
|
||||
// // si no hay id reconstruimos el objeto de audio
|
||||
// } else {
|
||||
// url = this.audio_url;
|
||||
// title = this.audio_title;
|
||||
// id = this.audio_id;
|
||||
// this.canPlay();
|
||||
// }
|
||||
// // no existe un audio en uso
|
||||
// } else if (this.audio_url=="" || id!=this.audio_id) {
|
||||
// //reload sound
|
||||
// this.audio_id=id;
|
||||
// this.audio_title=title;
|
||||
// this.audio_url=url;
|
||||
// this.load(url);
|
||||
// } else {
|
||||
// this.canPlay();
|
||||
// }
|
||||
// }
|
||||
|
||||
canPlay() {
|
||||
this.audio_status = "canplay";
|
||||
var a = this.audio.play();
|
||||
try {
|
||||
if (a!==undefined) {
|
||||
a.then(_ => {
|
||||
this.initPlayer(this.audio_title,this.audio_id);
|
||||
}).catch(error=>{
|
||||
console.log(error)
|
||||
console.log("not possible to play")
|
||||
// show play button!!!
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
/* firefox & old browsers not use Observale*/
|
||||
this.initPlayer(this.audio_title,this.audio_id);
|
||||
}
|
||||
}
|
||||
|
||||
initPlayer(title:string,id:number) {
|
||||
this.audio_title=title;
|
||||
this.audio_stopped = false;
|
||||
this.audio_paused = false;
|
||||
this.audio_id = id;
|
||||
//this.setAutoplay();
|
||||
}
|
||||
|
||||
pause() {
|
||||
|
||||
if (!this.audio_paused) {
|
||||
this.audio.pause();
|
||||
} else {
|
||||
this.audio.play();
|
||||
}
|
||||
this.audio_paused = !this.audio_paused;
|
||||
this._audio_is_playing.next(this.audio_paused);
|
||||
|
||||
}
|
||||
|
||||
mute() {
|
||||
this.audio.muted = !this.audio.muted;
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.audio.onloadstart = null;
|
||||
this.audio.oncanplay = null
|
||||
this.audio.onprogress = null;
|
||||
this.audio.pause();
|
||||
this.audio_buffered=-1
|
||||
this.audio.currentTime = 0;
|
||||
this.audio.removeAttribute('src');
|
||||
this.audio.load();
|
||||
this.audio_paused = true;
|
||||
this.audio_stopped = true;
|
||||
this.audio_id = 0;
|
||||
this.audio_url="";
|
||||
// Always playing
|
||||
this.play(environment.urlStream)
|
||||
}
|
||||
|
||||
public isStopped():boolean {
|
||||
return this.audio_stopped;
|
||||
}
|
||||
|
||||
public isPaused(id:number):boolean {
|
||||
if (id==this.audio_id) {
|
||||
return this.audio_paused;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
public getAudioID():number {
|
||||
return this.audio_id;
|
||||
}
|
||||
|
||||
formatTime(seconds:number) {
|
||||
let minutes:any = Math.floor(seconds / 60);
|
||||
minutes = (minutes >= 10) ? minutes : "0" + minutes;
|
||||
seconds = Math.floor(seconds % 60);
|
||||
seconds = (seconds >= 10) ? seconds : 0 + seconds;
|
||||
return minutes + ":" + seconds;
|
||||
}
|
||||
|
||||
setAutoplay() {
|
||||
this.audio.autoplay = true;
|
||||
}
|
||||
|
||||
public getPercentDuration():number {
|
||||
return (this.audio.currentTime / this.audio.duration) * 100;
|
||||
}
|
||||
|
||||
public setSeekPosition(rTime:number) {
|
||||
this.audio.currentTime = this.audio.duration * rTime;
|
||||
}
|
||||
|
||||
handleStop() {
|
||||
this.stop();
|
||||
}
|
||||
|
||||
handleEnded(e:any) {
|
||||
this.stop();
|
||||
this.audio_status = "finish";
|
||||
}
|
||||
|
||||
handleTimeUpdate(e:any) {
|
||||
this.audio_status = "playing";
|
||||
let elapsed = this.audio.currentTime;
|
||||
let duration = this.audio.duration;
|
||||
|
||||
|
||||
if (Number.isNaN(duration) || duration == Infinity || this.audio.src === environment.urlStream) duration=0;
|
||||
if (elapsed) {
|
||||
this.audio_position = elapsed / duration;
|
||||
this.audio_elapsed = this.formatTime(elapsed);
|
||||
this.audio_duration = this.formatTime(duration);
|
||||
this._audio_current_time.next({currentTime: this.formatTime(elapsed), duration: this.formatTime(duration)});
|
||||
}
|
||||
}
|
||||
|
||||
handledCanPlay(e:any) {
|
||||
console.log(e)
|
||||
//play
|
||||
}
|
||||
|
||||
handleWaiting() {
|
||||
this.audio_status = "waiting";
|
||||
}
|
||||
|
||||
handleLoadMetadata(e:any) {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
restart() {
|
||||
this._icy_metadata.next(true)
|
||||
this.play(environment.urlStream);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
0
inc/src/assets/.gitkeep
Normal file
0
inc/src/assets/.gitkeep
Normal file
BIN
inc/src/assets/img/island001.png
Normal file
BIN
inc/src/assets/img/island001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
46
inc/src/assets/img/island001.svg
Normal file
46
inc/src/assets/img/island001.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
83
inc/src/assets/img/island001b.svg
Normal file
83
inc/src/assets/img/island001b.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.4 KiB |
67
inc/src/assets/img/island002.svg
Normal file
67
inc/src/assets/img/island002.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 24 KiB |
11
inc/src/environments/environment.prod.ts
Normal file
11
inc/src/environments/environment.prod.ts
Normal file
@ -0,0 +1,11 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
uriDomain: "https://brba.audio-lab.org",
|
||||
uriAPI: "https://brba.audio-lab.org/wp-json/wp/v2",
|
||||
apiUrlUserActivation: 'https://brba.audio-lab.org/wp-json/ahum/v1/activation',
|
||||
apiUrlUserSubscriptions: 'https://brba.audio-lab.org/wp-json/ahum/v1/subscriptions',
|
||||
apiToken:'https://brba.audio-lab.org/wp-json/jwt-auth/v1/token',
|
||||
apiAddSubscription: 'https://brba.audio-lab.org/wp-json/ahum/v1/subscription/add',
|
||||
urlStreamMetadata: "https://brba.audio-lab.org/stream/status-json.xsl",
|
||||
urlStream: "http://stream.piperrak.cc/ura.mp3",
|
||||
};
|
||||
24
inc/src/environments/environment.ts
Normal file
24
inc/src/environments/environment.ts
Normal file
@ -0,0 +1,24 @@
|
||||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
uriDomain: "https://brba.audio-lab.org",
|
||||
uriAPI: "https://brba.audio-lab.org/wp-json/wp/v2",
|
||||
apiUrlUserActivation: 'https://brba.audio-lab.org/wp-json/ahum/v1/activation',
|
||||
apiUrlUserSubscriptions: 'https://brba.audio-lab.org/wp-json/ahum/v1/subscriptions',
|
||||
apiToken:'https://brba.audio-lab.org/wp-json/jwt-auth/v1/token',
|
||||
apiAddSubscription: 'https://brba.audio-lab.org/wp-json/ahum/v1/subscription/add',
|
||||
urlStreamMetadata: "https://brba.audio-lab.org/stream/status-json.xsl",
|
||||
urlStream: "http://stream.piperrak.cc/ura.mp3",
|
||||
};
|
||||
|
||||
/*
|
||||
* For easier debugging in development mode, you can import the following file
|
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||
*
|
||||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
||||
BIN
inc/src/favicon.ico
Normal file
BIN
inc/src/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
13
inc/src/index.html
Normal file
13
inc/src/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>El agua no tiene nombre | Soinumapa</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
7
inc/src/main.ts
Normal file
7
inc/src/main.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.catch(err => console.error(err));
|
||||
101
inc/src/styles.scss
Normal file
101
inc/src/styles.scss
Normal file
@ -0,0 +1,101 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;900&family=Poppins&display=swap');
|
||||
|
||||
|
||||
body {
|
||||
font-family:"Playfair Display",sans-serif;
|
||||
color:#fff;
|
||||
background:#29296d;
|
||||
margin:0;
|
||||
|
||||
h1 {font-weight: 600;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
section.container {
|
||||
&.big { min-height:100vh;}
|
||||
&.middle { min-height: 50vh;}
|
||||
&.fixed {
|
||||
position:fixed;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
top:0;
|
||||
left:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
z-index:-10;
|
||||
}
|
||||
&.header {
|
||||
background:#29296d;
|
||||
}
|
||||
&.text {
|
||||
background:#fff;
|
||||
color:#29296d;
|
||||
}
|
||||
display:flex;
|
||||
align-items: center;
|
||||
position:sticky;
|
||||
div.content {
|
||||
flex:1;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
flex-direction: row;
|
||||
div.col {
|
||||
flex:1;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display:flex;
|
||||
&.priority {
|
||||
div.button {
|
||||
width:80%;
|
||||
max-width:280px;
|
||||
h1 { font-size:2rem;}
|
||||
}
|
||||
}
|
||||
&.intro {
|
||||
flex:2;
|
||||
font-size:1.5rem;
|
||||
}
|
||||
}
|
||||
div.button {
|
||||
transition-duration: 1s;
|
||||
|
||||
&:hover {
|
||||
background:rgba(115, 124, 207,1);
|
||||
transform: scale(1.2);
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
&.clicked {
|
||||
transform: scale(20);
|
||||
background:#fff;
|
||||
transition-duration:2s;
|
||||
* { opacity:0;}
|
||||
&.hover {
|
||||
}
|
||||
}
|
||||
|
||||
&.title {
|
||||
//background-image:url('/assets/img/island002.svg');
|
||||
cursor:pointer;
|
||||
}
|
||||
background:rgba(115, 124, 207,0.5);
|
||||
//background-color:transparent;
|
||||
//background-image:url('/assets/img/island001.svg');
|
||||
background-size:contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
align-items: center;
|
||||
aspect-ratio: 1;
|
||||
max-width:60%;
|
||||
&.big { max-width:auto;}
|
||||
border-radius:100%;
|
||||
display:flex;
|
||||
text-align: center;
|
||||
* { flex:1;}
|
||||
h1 { padding:24px; font-size:1.2rem; }
|
||||
}
|
||||
}
|
||||
}
|
||||
14
inc/tsconfig.app.json
Normal file
14
inc/tsconfig.app.json
Normal file
@ -0,0 +1,14 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
32
inc/tsconfig.json
Normal file
32
inc/tsconfig.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"useDefineForClassFields": false,
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"dom"
|
||||
]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
14
inc/tsconfig.spec.json
Normal file
14
inc/tsconfig.spec.json
Normal file
@ -0,0 +1,14 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user