Fix Design issues

src/_variables.scss

@@ -11,6 +11,6 @@ $breakpoint-tablet: 768px;
 $breakpoint-phone: 500px;
 $background-color: #1c1c1c;
 // $slide-background: #f90;
-$slide-background: #cc7722;
+$slide-background: #090501;
 
 $backgroundhover: #ff0038b5;

src/app/app-routing.module.ts

@@ -6,7 +6,8 @@ import { InitComponent} from './init/init.component';
 
 const routes: Routes = [
   { path: ':name', component: SlideComponent },
-  { path: '', component: InitComponent }
+  { path: '', redirectTo: '/home', pathMatch: 'full'}
+  // { path: '', component: InitComponent }
 ];
 
 @NgModule({

src/app/app.component.html

@@ -1,4 +1,4 @@
-<div [@myAnimation]="o.isActivated ? o.activatedRoute : ''">
+<div class="router" [@myAnimation]="o.isActivated ? o.activatedRoute : ''">
   <router-outlet #o="outlet"></router-outlet>
 </div>
 

src/app/app.component.scss

@@ -0,0 +1 @@
+div.router  { overflow:hidden;}

src/app/init/init.component.html

@@ -1,13 +1,13 @@
-<div class="slide" routerLink="home" style="background-image:url('https://git.audio-lab.org/lrullo/beire-hugo/raw/branch/master/content/items/noche/noche.gif');">
+<div class="slide" routerLink="home" style="background-image:url('/assets/img/trailer.gif');">
-  <div class="element" *ngIf="false">
+  <div class="element">
-    <h1 routerLink="home" style="cursor:pointer">Beire</h1>
+    <!-- <h1 routerLink="home" style="cursor:pointer">Beire</h1> -->
-    <h2>Un propuesta de Maite Redondo y Luca Rullo</h2>
+    <!-- <h2>Un propuesta de Maite Redondo y Luca Rullo</h2> -->
     <!-- <div class="round-button" title="Pulsa para iniciar" routerLink="home" (click)="play()"></div> -->
-    <h3>Con la ayuda de Pedro, María, Luis, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre,Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre </h3>
+    <!-- <h3>Con la ayuda de Pedro, María, Luis, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre,Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre </h3> -->
     <div class="element logo">
       <img src="assets/img/landarte_logo.png"/>
+      <img src="assets/img/logoCK.png"/>
       <img src="assets/img/logoBeire.png"/>
-      <img src="assets/img/logoEscuelaMusicaOlite.jpg"/>
       <img src="assets/img/logoSoinumapa.png"/>
     </div>
   </div>

src/app/player.service.ts

@@ -76,8 +76,8 @@ export class PlayerService {
         if (data.length <= 0) { return }
         this.ListIndex = this.getRandomInt(data.length);
         if (this.ListIndex >= data.length) { this.ListIndex = 0 }
-        if (!data[this.ListIndex]["title"]) {this.audio_title = "Escuchando desde Beire"}
+        if (!data[this.ListIndex]["title"]) {this.audio_title = "desde Beire"}
-        else {this.audio_title = "Escuchando "+data[this.ListIndex]["title"]}
+        else {this.audio_title = data[this.ListIndex]["title"]}
         this.playUrl(data[this.ListIndex]["url"],this.audio_title)
       }
     )

src/app/slide/slide.component.html

@@ -2,17 +2,28 @@
 
 <div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}" (click)="playUrl()">
   <div class="content">
+    <div class="element logo" *ngIf="slide.name=='about'">
+      <a href="http://www.landarte.es/"><img style="max-height:60px;" src="assets/img/landarte_logo.png"/></a>
+      </div>
     <div *ngIf="slide.name!='about' && audio_title!=slide.title" class="element big-title" [innerHTML]="slide.title"></div>
     <div class="element big-title" *ngIf="audio_title==slide.title && currentTime && duration!='00:00'" (click)="play()">{{currentTime}}</div>
     <div class="element second-title" [innerHTML]="slide.content"></div>
+    <div class="element logo" *ngIf="slide.name=='about'">
+      <a href="http://www.culturanavarra.es/"><img src="assets/img/logoCK.png"/></a>
+      <a href="http://www.navarra.es/"><img src="assets/img/navarra.png"/></a>
+      </div>
+      <div class="element logo" *ngIf="slide.name=='about'">
+      <a href="https://www.beire.es/"><img src="assets/img/logoBeire.png"/></a>
+      <a href="http://soinumapa.net"><img src="assets/img/logoSoinumapa.png" style="max-width:80px;"/></a>
+    </div>
   </div>
 </div>
 
 <div class="controls" *ngIf="slide">
   <div *ngIf="slide.o" class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><img src="assets/img/left.svg"/></div></div>
-  <div *ngIf="slide.e" class="right control"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div>
+  <div *ngIf="slide.e" class="right control end"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div>
-  <div *ngIf="slide.n" class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><div class="rotate-up"><img src="assets/img/left.svg"/></div></div></div>
+  <div *ngIf="slide.n" class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><img src="assets/img/top.svg"/></div></div>
-  <div *ngIf="slide.s" class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><div class="rotate-down"><img src="assets/img/left.svg"/></div></div></div>
+  <div *ngIf="slide.s" class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><img src="assets/img/down.svg"/></div></div>
 </div>
 
 <div class="header">
@@ -29,13 +40,20 @@
 </div>
 
 <div class="footer right">
-  <span class="audioElement"[innerHTML]="audio_title"></span>
+  <span class="audioElement"[innerHTML]="'Escuchando '+audio_title"></span>
 </div>
 
 <div class="video-player" [ngStyle]="{'display':showVideo }" (click)="stopVideo()">
-  <div id="video-player-content"></div>
+  <div id="video-player-content" (click)="stopVideo()"></div>
 </div>
 
 </ng-container>
 
-<div *ngIf="showInit" class="slide init-slide" style="background-image:url('https://git.audio-lab.org/lrullo/beire-hugo/raw/branch/master/content/items/noche/noche.gif');" (click)="forcePlay()"></div>
+<div *ngIf="showInit" class="slide init-slide" style="background-image:url('/assets/img/trailer.gif');" (click)="forcePlay()">
+  <div class="element">
+    <!-- <h1 routerLink="home" style="cursor:pointer">Beire</h1> -->
+    <!-- <h2>Un propuesta de Maite Redondo y Luca Rullo</h2> -->
+    <!-- <div class="round-button" title="Pulsa para iniciar" routerLink="home" (click)="play()"></div> -->
+    <!-- <h3>Con la ayuda de Pedro, María, Luis, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre,Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre </h3> -->
+  </div>
+</div>

src/app/slide/slide.component.scss

@@ -17,16 +17,20 @@ div.slide {
 }
 
 div.slide.init-slide {
+  background-size:cover;
+  background-position:center center;
   position:absolute;
+  background-repeat: no-repeat;
   z-index:2000;
   top:0;
   left:0;
+  filter:none;
 }
 
 div.element {
   width:50vw;
   margin:auto;
-  text-align:center;
+  text-align:justify;
 }
 
 div.big-title {
@@ -41,22 +45,33 @@ div.big-title {
 }
 
 div.second-title {
-  font-size:1.6vw;
+  font-size:1.2vmax;
-  font-family:"Swiss Light",serif;
+  font-family:"Helvetica",serif;
   overflow-wrap:break-word;
+  text-align:justify;
   a { text-decoration:none; font-weight:bold;}
 }
 
 /* controls */
 div.controls{
-  div.control {position:absolute;z-index:100;width:10vw;height:10vh;display:flex;justify-content: center; align-items: center;}
+  div.control {
-  div.left { top:0;left:0;height:100vh; }
+    position:absolute;
-  div.right { top:0;right:0;height:100vh; }
+    z-index:100;
-  div.top { top:0;left:0;width:100vw;padding-top:2vh; }
+    width:22vw;
-  div.bottom { bottom:0;left:0;width:100vw; }
+    height:18vh;
+    display:flex;justify-content: center; align-items: center;}
+  div.left { top:0;left:4.5vw;height:100vh;max-width:80px; }
+  div.right { top:0;right:4.5vw;height:100vh;max-width:80px; }
+  div.top { top:5.5vh;left:0;width:100vw;padding-top:2vh;max-height:80px; }
+  div.bottom { bottom:6vh;left:0;width:100vw;max-height:80px; }
+}
+
+div.controls.end {
+  justify-content: end;
 }
 
 div.arrow {
+  display:inline-flex;
   cursor:pointer;
   min-width:75px;
   min-height:75px;
@@ -68,7 +83,7 @@ div.arrow {
   font-weight:bold;
   div.rotate-up { transform:rotate(90deg);}
   div.rotate-down { transform:rotate(-90deg);}
-  img { max-width:60px; max-height:60px;}
+  img { max-width:60px; max-height:60px; margin:auto;}
 }
 
 /* header */
@@ -115,4 +130,12 @@ div.video-player {
   background:rgba(0,0,0,0.5);
   top:0;
   * { margin:auto;}
+  #video-player-content { max-width:100%; max-height:100%; display:inherit; }
+}
+
+/** logo **/
+div.logo img {
+  padding:10px;
+  max-height:40px;
+  max-width:200px;
 }

src/app/slide/slide.component.ts

@@ -78,16 +78,20 @@ export class SlideComponent implements OnInit {
 
   showVideoVimeo(id:string) {
 
-    var options = {loop: false, id: id, responsive: true, autoplay: true};
+    var options = {loop: false, id: id, responsive: false, autoplay: true};
 
     if (this.videoPlayer && this.getVideoId() != id) { this.videoPlayer = this.videoPlayer.destroy();}
-    else if ( this.getVideoId() == id ) { this.videoPlayer.requestFullscreen(); }
+    else if ( this.getVideoId() == id ) {
+      //this.videoPlayer.requestFullscreen();
+    }
 
     this.videoPlayer = new Player('video-player-content', options);
     this.showVideo = "flex"
     this.videoPlayer.on('play', () => {
       this._videoID = id;
-      this.videoPlayer.getFullscreen().then( (f) => { if (!f) { this.videoPlayer.requestFullscreen(); } });
+      this.videoPlayer.getFullscreen().then( (f) => {
+        //if (!f) { this.videoPlayer.requestFullscreen(); }
+      });
       }
     );
     this.videoPlayer.on('ended', () => { this.stopVideo(); });
@@ -122,13 +126,15 @@ export class SlideComponent implements OnInit {
         this.up(e); break;
       case "ArrowDown" :
         this.down(e); break;
+      case "Space" :
+        this.playUrl(); break;
     }
   }
 
-  left(e) { this.router.navigate(['/', this.slide.o]);}
+  left(e) { if (this.slide.o) this.router.navigate(['/', this.slide.o]);}
-  right(e) { this.router.navigate(['/', this.slide.e]); }
+  right(e) { if (this.slide.e) this.router.navigate(['/', this.slide.e]); }
-  up(e) { this.router.navigate(['/', this.slide.n]); }
+  up(e) { if (this.slide.n) this.router.navigate(['/', this.slide.n]); }
-  down(e) { this.router.navigate(['/', this.slide.s]); }
+  down(e) { if (this.slide.s) this.router.navigate(['/', this.slide.s]); }
 
   mute() {
     this.playerService.mute();

src/index.html

@@ -2,10 +2,13 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>BeireFrontend</title>
+  <title>Beire - Una propuesta de Maite Redondo y Luca Rullo</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <meta name="description" content="Una propuesta de Maite Redondo y Luca Rullo para el programa Landarte, Cultura contemporánea y ruralidad. Con la ayuda de JESUSA — PAZ — LOLA — JUANA — CATALINA — ARACELI — YASMIN — ANGÉLICA — MIREN — NAIARA — NOA — TERE — AMAYA — IDOIA — PATRICIA — DAVID — LUIS MARI — PAULA — DAVID — JUAN — MARI CARMEN — AINARA — MARGARITA RUBIO — FERMINA [BURRA] — AZAHARA — ASIER — JUDITH — MARKEL — ION — NIEZYELA — SAAD — ALICIA — OIHANE — JOAQUIN — JAVIER GORRIA — ALFONSO — MARI — PEPÍN — BERTA — JOSÉ PIERRE — BRUNO — VIRGINIA — POLI — VALENTÍN — CHARO — CECILIA — FERMINA — FLAVIO — CASINO DE BEIRE — MARI — PEDRO LUIS — HILDA — BAR BARIAIN — ANGÉLICA — MARGARITA ONGAY — VICTOR — EDUARDO — CARLOS — IGNACIO — ESCALERAS ARIZONA — ESCUELA DE MÚSICA DE OLITE — GERMÁN — JAVIER CLEMENTE — AMETS — MIKEL — GARAZI — PERU — NURIA — JON — ANNE — MARC">
+  <meta name="keywords" content="beire, landarte, navarra, nafarroa, cultura, documental, interactivo, documentary, interactive, maite redondo, luca rullo">
+  <meta name="author" content="Maite Redondo y Luca Rullo">
   <link rel="manifest" href="manifest.json" />
 </head>
 <body>