Fix design issues

Fix init player when not user click
This commit is contained in:
Siroco 2020-10-31 20:09:18 +01:00
parent c65f2cb516
commit 2427d43db2
6 changed files with 51 additions and 12 deletions

View File

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

View File

@ -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>

View File

@ -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;
}

View File

@ -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();
}
}

View File

@ -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"
};

View File

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