Fix design issues

Fix init player when not user click

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 = "Live Streaming from Beire"}
+        if (!data[this.ListIndex]["title"]) {this.audio_title = "Escuchando desde Beire"}
-        else {this.audio_title = "Live: "+data[this.ListIndex]["title"]}
+        else {this.audio_title = "Escuchando "+data[this.ListIndex]["title"]}
         this.playUrl(data[this.ListIndex]["url"],this.audio_title)
       }
     )

src/app/slide/slide.component.html

@@ -1,3 +1,5 @@
+<ng-container *ngIf="!showInit">
+
 <div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}" (click)="playUrl()">
   <div class="content">
     <div *ngIf="slide.name!='about' && audio_title!=slide.title" class="element big-title" [innerHTML]="slide.title"></div>
@@ -22,11 +24,18 @@
 </div>
 
 <div class="footer player">
- <span (click)="mute()" [ngClass]="{'muted': muted}">mute</span>
+ <span class="mute" (click)="mute()" [ngClass]="{'muted': muted}">mute</span>
  <span class="audioElement audioTimer" *ngIf="currentTime && duration!='00:00'">{{currentTime}}<ng-container *ngIf="duration!='00:00'">/{{duration}}</ng-container></span>
+</div>
+
+<div class="footer right">
   <span class="audioElement"[innerHTML]="audio_title"></span>
 </div>
 
 <div class="video-player" [ngStyle]="{'display':showVideo }" (click)="stopVideo()">
   <div id="video-player-content"></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>

src/app/slide/slide.component.scss

@@ -16,6 +16,13 @@ div.slide {
   overflow:hidden;
 }
 
+div.slide.init-slide {
+  position:absolute;
+  z-index:2000;
+  top:0;
+  left:0;
+}
+
 div.element {
   width:50vw;
   margin:auto;
@@ -30,19 +37,22 @@ div.big-title {
   color:$primary;
   opacity:1;
   max-width: 100px;
+  cursor:pointer;
 }
 
 div.second-title {
-  font-size:3vw;
+  font-size:1.6vw;
   font-family:"Swiss Light",serif;
+  overflow-wrap:break-word;
+  a { text-decoration:none; font-weight:bold;}
 }
 
 /* controls */
 div.controls{
-  div.control {position:absolute;z-index:100;width:10vw;height:20vh;display:flex;justify-content: center; align-items: center;}
+  div.control {position:absolute;z-index:100;width:10vw;height:10vh;display:flex;justify-content: center; align-items: center;}
   div.left { top:0;left:0;height:100vh; }
   div.right { top:0;right:0;height:100vh; }
-  div.top { top:0;left:0;width:100vw; }
+  div.top { top:0;left:0;width:100vw;padding-top:2vh; }
   div.bottom { bottom:0;left:0;width:100vw; }
 }
 
@@ -58,7 +68,7 @@ div.arrow {
   font-weight:bold;
   div.rotate-up { transform:rotate(90deg);}
   div.rotate-down { transform:rotate(-90deg);}
-  img { max-width:30px; max-height:30px;}
+  img { max-width:60px; max-height:60px;}
 }
 
 /* header */
@@ -72,7 +82,9 @@ div.header {
 }
 
 .muted { opacity:0.6; text-decoration:line-through;;}
-.audioElement { margin:0 20px;}
+.audioElement { margin:0 20px;
+  @media screen and (max-width: $breakpoint-phone) { display:none;}
+}
 
 div.footer {
   overflow:hidden;
@@ -80,10 +92,16 @@ div.footer {
   position:absolute;z-index:200;bottom:0;left:0;height:10vh;
   max-width:50%;
   text-align:left;margin-left:5vw;margin-top:3vw;
+  span.mute { cursor:pointer;}
 }
 
+div.footer.right {
+  left:auto;
+  right:0;
+}
 div.menu {
-  margin-left:95vw;z-index:200;cursor:pointer;
+  z-index:200;cursor:pointer;left:auto;
+  right:0;padding-right:5vw;
 }
 
 

src/app/slide/slide.component.ts

@@ -16,6 +16,7 @@ export class SlideComponent implements OnInit {
 
   slide: any;
   muted:boolean = false;
+  showInit:boolean = true;
 
   /*player info*/
   duration=""
@@ -141,4 +142,9 @@ export class SlideComponent implements OnInit {
     else if (this.slide.featuredAudio) { this.playerService.playUrl(this.slide.featuredAudio, this.slide.title); }
   }
 
+  forcePlay() {
+    this.showInit = false;
+    this.play();
+  }
+
 }

src/environments/environment.prod.ts

@@ -1,5 +1,5 @@
 export const environment = {
   production: true,
   uriAPI: "https://public.audio-lab.org/beireapi/",
-  ListURL: "https://public.audio-lab.org/beire3/assets/playlist.json"
+  ListURL: "https://beire.soinumapa.net/assets/playlist.json"
 };

src/styles.scss

@@ -58,6 +58,12 @@ h3 {
   font-family:"Frutiger";
 }
 
+a {
+  text-decoration:none;
+  font-weight:bold;
+  color:$primary;
+}
+
 
 /* animations css */