[DEV) better dieplay vieo elements...

front/src/app/component/element-season/element-season.less

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

front/src/app/component/element-series/element-series.less

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

front/src/app/component/element-video/element-video.less

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

front/src/app/scene/season/season.html

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

front/src/app/scene/season/season.less

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

front/src/app/scene/series/series.html

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

front/src/app/scene/series/series.less

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

front/src/app/scene/video/video.html

@@ -17,9 +17,20 @@
 		<div class="title">
 			{{name}}
 		</div>
-		<div class="cover" *ngIf="cover != null" >
+		<div class="cover">
-			<img src="{{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">
+		<div class="video_div" *ngIf="playVideo">
-				<!--<p>Your browser des not suport HTML5 video player. download video: <a href="{{video_source}}>link here</a>.</p>-->
+			<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>

front/src/app/scene/video/video.less

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