Untitled

<!doctype html><html>
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://cdn.plyr.io/1.8.2/plyr.css">
		<style>
			* {margin: 0; padding:0;}
			body {
				width: 100%;
				background: #0a0d0d;
				color: gray;
				font-family: HelveticaNeueRegular,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
				font-size: 13px;
				line-height: 1.384;
				margin: 5px 0;
			}
			.container {
				position: relative;
				width: 100%;
				max-width: 1200px;
				margin: 0 auto;
				padding: 0 12px;
				box-sizing: border-box;
			}

			.column, .columns { width: 100%; float: left; box-sizing: border-box; }

			@media (min-width: 400px) { .container { width: 95%; padding: 0; } }

			/* For devices larger than 550px */
			@media (min-width: 550px) {
				.column, .columns { margin-left: 4%; }
				.column:first-child, .columns:first-child { margin-left: 0; }

				.one.column,
				.one.columns                    { width: 4.66666666667%; }
				.two.columns                    { width: 13.3333333333%; }
				.three.columns                  { width: 22%;            }
				.four.columns                   { width: 30.6666666667%; }
				.five.columns                   { width: 39.3333333333%; }
				.six.columns                    { width: 48%;            }
				.seven.columns                  { width: 56.6666666667%; }
				.eight.columns                  { width: 65.3333333333%; }
				.nine.columns                   { width: 74.0%;          }
				.ten.columns                    { width: 82.6666666667%; }
				.eleven.columns                 { width: 91.3333333333%; }
				.twelve.columns                 { width: 100%; margin-left: 0; }

				.one-third.column               { width: 30.6666666667%; }
				.two-thirds.column              { width: 65.3333333333%; }

				.one-half.column                { width: 48%; }
			}
			.videobox {position: absolute;width: 100%;height: 100%;z-index:999;top:0;left:0;background-color:#000;}
			video { width:100%; }
			.box {
				width: 210px;
				margin: 0 2em 2.5em 0;
				position: relative;
				display: inline-block;
				vertical-align: top;
				text-transform: uppercase;
    			text-align: center;
			}
			.box a {
				text-decoration: none;
				cursor: pointer;
			}
			.box a .cover {
				border-radius: .4em;
				overflow: hidden;
				z-index: 1;
			}
			.box a .cover:before {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0,0,0,.5);
				opacity: 0;
				z-index: 2;
				transition: opacity .3s;
			}
			.box:hover a .cover:before, .box:hover .hover-play .hover-icon-container {
				opacity: 1;
			}
			.box .info {
				position: relative;
    			margin-top: 1em;
			}
			.box .info .title, .box .info .title-en {
				text-overflow: ellipsis;
				overflow: hidden;
				margin: 0;
				color: #fff;
				font-size: 18px;
				font-weight: 400;
				line-height: 1.2;
				text-transform: uppercase;
    			letter-spacing: .03em;
			}
			.box .info .title-en {
				color: grey;
				font-size: 14px;
			}
			.box .info .separator {
				height: 2px;
				margin: .4em 0 .6em;
				background: #333;
			}
			.box .hover-play {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 0;
			}
			.box .hover-play .hover-icon-container .hover-title {
				pointer-events: none;
				color: #fff;
				margin-bottom: .4em;
				position: relative;
				z-index: 1;
				font-size: 12px;
				font-weight: 400;
				line-height: 1.2;
				margin: .67em 0;
				text-transform: uppercase;
				letter-spacing: .03em;
			}
			.box .hover-play .hover-icon-container a {
				border-radius: 100%;
				border: 2px solid #cbcbcb;
				background: rgba(0,0,0,.3);
				color: #cbcbcb;
				display: inline-block;
				line-height: 24px;
				height: 24px;
				width: 24px;
				font-size: 14px;
				text-align: center;
				position: relative;
				z-index: 1;
				margin: 0 .2em .4em;
				cursor: pointer;
				box-sizing: content-box;
			}
			.box .hover-play .hover-icon-container {
				opacity: 0;
				width: 6em;
			}
			.box .hover-play > * {
				display: inline-block;
    			vertical-align: middle;
			}
			.popup-search-input {
				font-size: 35px;
				border: none;
				border-bottom: 2px solid #4a4a4a;
				width: 96%;
				padding: 0 48px 2px 0!important;
				text-align: left;
				background: none;
				border-radius: 0;
				height: 55px;
				color: #fff;
				letter-spacing: .025em;
				text-transform: none;
				font-weight: 100;
				margin-bottom:15px;
				outline: none;
		</style>
	</head>
	<body>
		<div class="container">
			<div class="twelve columns" data-content>
				<input type="text" class="popup-search-input" placeholder="Поиск сериалов" maxlength="40" />

			</div>
		</div>
		<script id="page-main" type="application/template">
			<a href="#">
				<div class="cover">
					<img width="210" height="150" src="{cover}"/>
				</div>
				<div class="info">
					<div class="title">{serialName}</div>
					<div class="separator"></div>
					<div class="title-en">{serialNameEn}</div>
				</div>
			</a>
			<div class="hover-play">
				<div style="height:150px;"></div>
				<div class="hover-icon-container">
					<div class="hover-title">{episodeName}</div>
					<a href="#">{number}</a>
				</div>
			</div>
		</script>
		<script id="page-video" type="application/template">
			<video preload="none" id="player" autoplay controls crossorigin src=""></video>
		</script>
		<script>
		document.body.onclick = function() { console.log('loadvideo'); loadvideo(); };
		function nano(template, data) {
			return template.replace(/\{([\w\.]*)\}/g, function(str, key) {
				var keys = key.split("."), v = data[keys.shift()];
				for (i = 0, l = keys.length; i < l; i++) v = v[this];
				return (typeof v !== "undefined" && v !== null) ? v : "";
			});
		};

		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://localhost:1101/main.json', false);
		xhr.onreadystatechange = function() {
			if (xhr.readyState != 4 && xhr.status != 200) return;
			var template = document.querySelector('#page-main').innerHTML;
			var elems = JSON.parse(xhr.responseText);
			elems.results.forEach(function(item,index) {
				console.log(item.title);
				item.serialName = item.title;
				item.serialNameEn = "";
				item.episodeName = "";
				item.cover = item.assets.productPoster.replace('{SIZE}', '220x150');
				var newElement = document.createElement('div');
				newElement.classList.add('box');
				newElement.innerHTML = nano(template, item);
				newElement.onclick = function() { console.log('loadvideo'); loadvideo(); };
				document.querySelector('[data-content]').appendChild(newElement);
			});
		};
		xhr.send();

		var loadvideo = function() {
			var template = document.querySelector('#page-video').innerHTML;
			var newElement = document.createElement('div');
				newElement.classList.add('videobox');
				newElement.innerHTML = nano(template, {});
				document.body.appendChild(newElement);

			var xhr = new XMLHttpRequest();
			xhr.open('GET', 'http://localhost:1101/load', false);
			xhr.onreadystatechange = function() {
				if (xhr.readyState != 4 && xhr.status != 200) return;
				var vid = document.querySelector('video');
				if (Hls.isSupported()) {
					var hls = new Hls();
					hls.loadSource("http://localhost:1101/index.m3u8");
					hls.attachMedia(vid);
					hls.on(Hls.Events.MANIFEST_PARSED,function() {
					  vid.play();
					});
				}

				plyr.setup(vid);
			};
			xhr.send();
		};
		var errorHandler = function(e) {
			console.log("error", e);
		};
		</script>
		<script src="https://cdn.plyr.io/1.8.2/plyr.js"></script>
    <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
	</body>
</html>