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