kangaroo-and-rabbit/karideo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[DEV) better dieplay vieo elements...

Browse Source
This commit is contained in:
Edouard DUPIN 2020-11-13 14:38:26 +01:00
parent f49e221ac7
commit 05ea58f0f3
9 changed files with 168 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/app/component/element-season/element-season.less
View File

@ -12,7 +12,7 @@
height: 95px;
width: 95px;
//box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.7);
border: solid 1px;
border: solid 2px;
border-color: rgba(0, 0, 0, 0.7);
margin: auto;
}

7
front/src/app/component/element-series/element-series.less
View File

@ -10,10 +10,9 @@
max-width: 200px;
}
.noImage {
height: 245px;
width: 195px;
//box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.7);
border: solid 1px;
height: 243px;
width: 193px;
border: solid 3px;
border-color: rgba(0, 0, 0, 0.7);
margin: auto;
}

7
front/src/app/component/element-video/element-video.less
View File

@ -10,10 +10,9 @@
max-width: 200px;
}
.noImage {
height: 245px;
width: 195px;
//box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.7);
border: solid 1px;
height: 243px;
width: 193px;
border: solid 3px;
border-color: rgba(0, 0, 0, 0.7);
margin: auto;
}

2
front/src/app/scene/season/season.html
View File

@ -8,6 +8,8 @@
<div class="cover" *ngIf="cover != null" >
<img src="{{cover}}"/>
</div>
<div class="no-cover" *ngIf="cover == null" >
</div>
<div class="description" *ngIf="description">
{{description}}
</div>

15
front/src/app/scene/season/season.less
View File

@ -0,0 +1,15 @@
.cover {
width: 400px;
margin: 0 auto;
img {
width: 100%;
}
}
.no-cover {
width: 400px;
height: 500px;
margin: 0 auto;
border: solid 5px;
border-color: rgba(0, 0, 0, 0.7);
}

2
front/src/app/scene/series/series.html
View File

@ -5,6 +5,8 @@
<div class="cover" *ngIf="cover != null" >
<img src="{{cover}}"/>
</div>
<div class="no-cover" *ngIf="cover == null" >
</div>
<div class="description" *ngIf="description">
{{description}}
</div>

15
front/src/app/scene/series/series.less
View File

@ -0,0 +1,15 @@
.cover {
width: 400px;
margin: 0 auto;
img {
width: 100%;
}
}
.no-cover {
width: 400px;
height: 500px;
margin: 0 auto;
border: solid 5px;
border-color: rgba(0, 0, 0, 0.7);
}

41
front/src/app/scene/video/video.html
View File

@ -17,9 +17,20 @@
<div class="title">
{{name}}
</div>
<div class="cover" *ngIf="cover != null" >
<img src="{{cover}}"/>
<div class="cover">
<div class="cover-image" *ngIf="cover != null">
<img src="{{cover}}"/>
</div>
<div class="cover-no-image" *ngIf="cover == null">
<img src="{{cover}}"/>
</div>
<div class="cover-button">
<button (click)="onPlay()">
<i class="material-icons big-button">play_circle_outline</i>
</button>
</div>
</div>
<div class="clear"></div>
<div class="episode" *ngIf="series_name!=null">
<b>Series:</b> {{series_name}}
</div>
@ -35,10 +46,30 @@
<div class="description">
{{description}}
</div>
<div class="video_div">
<video class="video_object" src="{{video_source}}/{{generated_name}}" controls preload="none">
<!--<p>Your browser des not suport HTML5 video player. download video: <a href="{{video_source}}>link here</a>.</p>-->
<!--
<div class="video_div" *ngIf="playVideo">
<video class="video_object" src="{{video_source}}/{{generated_name}}" controls><!--preload="none"- ->
<!--<p>Your browser does not support HTML5 video player. download video: <a href="{{video_source}}>link here</a>.</p>- ->
</video>
</div>
<div class="video_div_button" *ngIf="playVideo">
<button class="play-button"
(click)="onStop()">
<i class="material-icons big-button">highlight_off</i>
</button>
</div>
-->
<div class="video" *ngIf="playVideo">
<div class="video-elem">
<video src="{{video_source}}/{{generated_name}}" controls autoplay (ended)="onVideoEnded()"><!--preload="none"-->
<!--<p>Your browser does not support HTML5 video player. download video: <a href="{{video_source}}>link here</a>.</p>-->
</video>
</div>
<div class="video-button">
<button (click)="onStop()">
<i class="material-icons big-button">highlight_off</i>
</button>
</div>
</div>
</div>
</div>

96
front/src/app/scene/video/video.less
View File

@ -30,25 +30,111 @@
width: 80%;
margin: 0 auto;
}
.cover {
width: 30%;
position:relative;
width: 400px;
height: 500px;
margin: 0 auto;
overflow:hidden;
.cover-image {
position:absolute;
};
.cover-no-image {
position:absolute;
width: 390px;
height: 490px;
margin: 0 auto;
border: solid 5px;
border-color: rgba(0, 0, 0, 0.7);
};
.cover-button {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
};
img {
width: 100%;
}
};
button {
border: none;
background: none;
color: #00F000;
};
}
.video {
position: fixed;
top:0px;
left:0px;
width: 100%;
height: 100%;
z-index: 1000;
background: #3C3C3C;
.video-elem {
position:absolute;
width: 100%;
height: calc(100% - 56px);
top: 56px;
//right: 50%;
//-ms-transform: translate(-50%, -50%);
//transform: translate(-50%, -50%);
};
.video-button {
position: absolute;
top: 100px;
right:100px;
//-ms-transform: translate(-50%, 0);
//transform: translate(-50%, 0);
};
video {
width: 100%;
height: 100%;
z-index: 1600;
};
button {
border: none;
background: none;
color: #F00000;
};
}
.big-button {
font-size:150px;
}
/*
.video_div {
width: 80%;
position: fixed;
top:0px;
left:0px;
width: 100%;
height: 100%;
margin: 0 auto;
border: none;
background: none;
}
.video_div_button {
position: fixed;
top:100px;
right:175px;
width: 50px;
height: 50px;
font-size:50px;
margin: auto;
}
.video_object {
width: 100%;
margin: 0 auto;
}
*/
.item {
font-size: 20px;
height: 21%;