830 lines
40 KiB
HTML
830 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
|
|
<link rel="icon" sizes="192x192" href="logo192.png">
|
|
<link rel="icon" sizes="512x512" href="logo512.png">
|
|
<link rel="image_src" href="{{channel_poster}}">
|
|
<link rel="canonical" href="{{url}}">
|
|
<title>{{channel_name}}</title>
|
|
<meta name="description" content="{{channel_description}}">
|
|
{{#if channel_creator_name}}
|
|
<meta name="author" content="{{channel_creator_name}}">
|
|
{{/if}}
|
|
<meta property="og:site_name" content="{{titel}}">
|
|
<meta property="og:url" content="{{url}}">
|
|
<meta property="og:title" content="{{channel_name}}">
|
|
<meta property="og:image" content="{{channel_poster}}">
|
|
<meta property="og:image:width" content="{{channel_width}}">
|
|
<meta property="og:image:height" content="{{channel_height}}">
|
|
<meta property="og:description" content="{{channel_description}}">
|
|
<meta property="og:type" content="video.other">
|
|
<meta property="og:video:url" content="{{url}}">
|
|
<meta property="og:video:secure_url" content="{{url}}">
|
|
<meta property="og:video:type" content="text/html">
|
|
<meta property="og:video:width" content="{{channel_width}}">
|
|
<meta property="og:video:height" content="{{channel_height}}">
|
|
<meta name="twitter:card" content="player">
|
|
<meta name="twitter:url" content="{{url}}">
|
|
<meta name="twitter:title" content="{{channel_name}}">
|
|
<meta name="twitter:description" content="{{channel_description}}">
|
|
<meta name="twitter:image" content="{{channel_poster}}">
|
|
<meta name="twitter:player" content="{{url}}">
|
|
<meta name="twitter:player:width" content="{{channel_width}}">
|
|
<meta name="twitter:player:height" content="{{channel_height}}">
|
|
<link rel="alternate" type="application/json+oembed" href="channels/{{channel_id}}/oembed.json" title="{{channel_name}}">
|
|
<link rel="alternate" type="text/xml+oembed" href="channels/{{channel_id}}/oembed.xml" title="{{channel_name}}">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">
|
|
{{#ifEquals player "videojs"}}
|
|
<link href="player/videojs/dist/video-js.min.css" rel="stylesheet">
|
|
<link href="player/videojs/dist/video-js-skin.min.css" rel="stylesheet">
|
|
<link href="player/videojs/dist/videojs-overlay.min.css" rel="stylesheet">
|
|
<link href="player/videojs/dist/videojs-license.min.css" rel="stylesheet">
|
|
{{/ifEquals}}
|
|
<style>
|
|
/** flexboxgrid 6.3.1 **/
|
|
.container,.container-fluid{margin-right:auto;margin-left:auto}.container-fluid{padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media only screen and (min-width:48em){.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:64em){.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-0,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:75em){.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}
|
|
</style>
|
|
<style>
|
|
/** flexboxgrid extention hide/show **/
|
|
.hide-xs{display:block}.show-xs{display:none}.hide-sm{display:block}.show-sm{display:none}.hide-md{display:block}.show-md{display:none}.hide-lg{display:block}.show-lg{display:none}@media only screen and (min-width:48em){.hide-sm{display:none}.show-sm{display:block}}@media only screen and (min-width:64em){.hide-md{display:none}.show-md{display:block}}@media only screen and (min-width:75em){.hide-lg{display:none}.show-lg{display:block}}
|
|
</style>
|
|
<style>
|
|
/** basics **/
|
|
body {
|
|
color: {{textcolor_default}};
|
|
font-family: 'Roboto';
|
|
font-size: 18px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
background-color: {{bgcolor_default}};
|
|
{{#if bgimage_url}}background: {{bgcolor_default}} url('{{bgimage_url}}') no-repeat fixed left top;{{/if}}
|
|
background-size: cover;
|
|
left: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
hr {
|
|
border: none;
|
|
border-top: 2px solid {{hrcolor}};
|
|
height: 2px;
|
|
margin: 0;
|
|
}
|
|
a {
|
|
color: {{textcolor_link}};
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: {{textcolor_link_hover}};
|
|
text-decoration: underline;
|
|
}
|
|
.inline-icon {
|
|
font-size: 18px !important;
|
|
vertical-align: bottom;
|
|
}
|
|
.right-align {
|
|
text-align: right;
|
|
float: right;
|
|
}
|
|
.max-width {
|
|
max-width: 1400px;
|
|
}
|
|
|
|
/** header **/
|
|
.header {
|
|
background-color: {{bgcolor_header}};
|
|
}
|
|
.header-title {
|
|
color: {{textcolor_titel}};
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
padding-left: .5em;
|
|
}
|
|
@media only screen and (min-width: 48em) {
|
|
.header-title {
|
|
padding-left: 1.2em;
|
|
}
|
|
}
|
|
|
|
/** main grid **/
|
|
.main {
|
|
background: {{bgcolor_default}};
|
|
align-content: baseline;
|
|
height: 100%;
|
|
}
|
|
@media only screen and (min-width: 48em) {
|
|
.main {
|
|
background: {{bgcolor_default}};
|
|
padding-top: 1.5em;
|
|
}
|
|
}
|
|
|
|
/** player **/
|
|
.player-l1 {
|
|
margin: 0em -0.5em 0em -0.5em;
|
|
}
|
|
@media only screen and (min-width: 48em) {
|
|
.player-l1 {
|
|
margin: 0em 0em 0em 1.5em;;
|
|
}
|
|
}
|
|
.player-l2 {
|
|
max-height: 980px;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
.player-l3 {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 56.25%;
|
|
}
|
|
.player-l4 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: #000!important;
|
|
max-height: 980px;
|
|
}
|
|
[data-player] {
|
|
max-height: 980px;
|
|
}
|
|
.clappr-watermark[data-watermark-top-left] {
|
|
top: 20px !important;
|
|
left: 35px !important;
|
|
}
|
|
.clappr-watermark[data-watermark-top-right] {
|
|
top: 20px !important;
|
|
right: 35px !important;
|
|
}
|
|
.clappr-watermark[data-watermark-bottom-left] {
|
|
bottom: 20px !important;
|
|
left: 35px !important;
|
|
}
|
|
.clappr-watermark[data-watermark-bottom-right] {
|
|
bottom: 20px !important;
|
|
right: 35px !important;
|
|
}
|
|
|
|
/** channel content **/
|
|
.content {
|
|
padding: 1.5em 1em 1.5em 1em;
|
|
}
|
|
@media only screen and (min-width: 48em) {
|
|
.content {
|
|
padding: 1.5em .5em 1.5em 2em;
|
|
}
|
|
}
|
|
.content-headline {
|
|
color: {{textcolor_titel}};
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
}
|
|
.content-description {
|
|
margin-bottom: 1.4em;
|
|
margin-right: 0em;
|
|
}
|
|
@media only screen and (min-width: 48em) {
|
|
.content-description {
|
|
margin-right: 2em;
|
|
}
|
|
}
|
|
.channel-stats {
|
|
color: {{textcolor_titel}};
|
|
font-weight: 500;
|
|
padding-top: 0.6em;
|
|
padding-bottom: 0.8em;
|
|
}
|
|
.channel-stats-icon {
|
|
color: {{textcolor_titel}};
|
|
font-size: 1.3rem !important;
|
|
height: 1em;
|
|
margin-right: 0.5em;
|
|
}
|
|
.channel-license-image {
|
|
margin-top: .3em;
|
|
}
|
|
|
|
/** channel list **/
|
|
.channel-list-link:hover {
|
|
text-decoration: none;
|
|
}
|
|
.channel-list-sidebar {
|
|
max-width: 390px;
|
|
padding-right: 1.5em;
|
|
}
|
|
.channel-list-inside {
|
|
margin-bottom: 1.6em;
|
|
}
|
|
.channel-list-l1 {
|
|
background-color: {{bgcolor_unselected}};
|
|
margin-left: 0em;
|
|
margin-right: 0em;
|
|
margin-bottom: 1em;
|
|
}
|
|
.channel-list-l1:hover {
|
|
background-color: {{bgcolor_selected}};
|
|
}
|
|
.channel-list-l2 {
|
|
display: flex;
|
|
}
|
|
.channel-list-selected {
|
|
background-color: {{bgcolor_selected}};
|
|
}
|
|
.channel-list-image {
|
|
height: auto;
|
|
max-height: 90px;
|
|
width: 100%;
|
|
min-width: 130px;
|
|
max-width: 130px;
|
|
margin-left: -7px;
|
|
}
|
|
.channel-list-badge {
|
|
display: none;
|
|
position: absolute;
|
|
font-weight: bold;
|
|
background-color: rgb(193, 39, 45);
|
|
border-radius: 4px;
|
|
align-self: flex-end;
|
|
margin-bottom: 5px;
|
|
padding: 1px 5px 2px 4px;
|
|
}
|
|
.channel-list-description {
|
|
width: 100%;
|
|
font-size: 1rem;
|
|
line-height: 1rem;
|
|
text-overflow: ellipsis;
|
|
white-space: normal;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
max-height: 2rem;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
margin: 0px 0px 5px 0px;
|
|
padding: 5px 10px 0px 20px;
|
|
}
|
|
.channel-list-description-stats {
|
|
font-size: .8rem;
|
|
line-height: 1rem;
|
|
text-overflow: ellipsis;
|
|
white-space: normal;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
max-height: 2rem;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
padding: 0px 10px 0px 20px;
|
|
}
|
|
|
|
/** share icons **/
|
|
.btn-share {
|
|
color: {{textcolor_link}};
|
|
text-decoration: none;
|
|
}
|
|
.btn-share:hover {
|
|
color: {{textcolor_link_hover}};
|
|
text-decoration: none;
|
|
}
|
|
.share-icons {
|
|
fill: {{textcolor_link}};
|
|
text-decoration: none;
|
|
}
|
|
.share-icons:hover {
|
|
fill: {{textcolor_link_hover}};
|
|
text-decoration: none;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
/** inject3 **/
|
|
.inject3 {
|
|
padding: 1.3em 0em 1em 0em;
|
|
}
|
|
|
|
/** footer**/
|
|
.footer {
|
|
padding: 1.4em 0em 0em 0em;
|
|
margin-left: -1em;
|
|
margin-right: -1em;
|
|
}
|
|
.footer-link {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
/** modal boxes **/
|
|
.modal {
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 8px;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgb(0,0,0,.4);
|
|
}
|
|
.modal-content {
|
|
background-color: {{bgcolor_default}};
|
|
padding: 20px;
|
|
}
|
|
.modal-content-header {
|
|
justify-content: space-between;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: -20px;
|
|
}
|
|
.modal-content-body {
|
|
justify-content: space-between;
|
|
display: flex;
|
|
}
|
|
.close {
|
|
color: {{textcolor_titel}};
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
.close:hover,
|
|
.close:focus {
|
|
color: {{textcolor_titel}};
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
.modal-share {
|
|
max-width: 340px;
|
|
}
|
|
</style>
|
|
{{{inject1}}}
|
|
</head>
|
|
<body>
|
|
<div class="row">
|
|
<div class="col-xs-12 middle-xs header">
|
|
<h1 class="header-title">{{titel}}</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row max-width">
|
|
<div class="col-xs-12 col-sm-8 main">
|
|
<div class="row player-l1">
|
|
<div class="col-xs-12 player-l2">
|
|
<div class="player-l3">
|
|
{{#ifEquals player "videojs"}}
|
|
<video id="player" class="vjs-public video-js player-l4" playsinline></video>
|
|
{{else}}
|
|
<div id="player" class="player-l4"></div>
|
|
{{/ifEquals}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-12 content">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<h2 class="content-headline">{{channel_name}}</h2>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row col-middle-xs channel-stats">
|
|
<div class="col-xs-9 middle-xs">
|
|
<span id="channel_stats_current_{{channel_id}}"></span> <span class="material-icons inline-icon channel-stats-icon">remove_red_eye</span>
|
|
<span id="channel_stats_sum_{{channel_id}}"></span> <span class="material-icons inline-icon channel-stats-icon">trending_up</span>
|
|
<span id="channel_stats_runtime_{{channel_id}}"></span> <span class="material-icons inline-icon channel-stats-icon">live_tv</span>
|
|
</div>
|
|
<div class="col-xs-3 middle-xs right-align">
|
|
<a id="btn-share" href="#"><span class="material-icons inline-icon">share</span> SHARE</a>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<p class="content-description">
|
|
{{{channel_description_html}}}
|
|
</p>
|
|
<p class="content-description">
|
|
{{#if channel_creator_name}}
|
|
<strong>Creator:</strong> <a id="btn-creator" href="#">{{channel_creator_name}}</a><br />
|
|
{{/if}}
|
|
{{#if channel_license}}
|
|
<strong>Content license:</strong><br />
|
|
<a id="license" target="_blank" rel="noopener"><img id="license_image" class="channel-license-image" height="40" width="114" /></a>
|
|
{{/if}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row show-xs hide-sm">
|
|
{{#if inject2}}
|
|
<div class="col-xs-12">
|
|
{{{inject2}}}
|
|
</div>
|
|
{{/if}}
|
|
<div class="col-xs-12">
|
|
<h2 class="content-headline">Channels</h2>
|
|
</div>
|
|
<div class="col-xs-12 channel-list-inside">
|
|
{{#each channels}}
|
|
<a class="channel-list-link" href="/playersite_{{this.channelid}}.html" target="_self">
|
|
<div class="row channel-list-l1 {{#ifEquals @root.channel_id this.channelid}}channel-list-selected{{/ifEquals}}">
|
|
<div class="col-xs-12 middle-xs channel-list-l2">
|
|
<span id="channel_list_badge_{{this.channelid}}_1" class="channel-list-badge">LIVE</span>
|
|
<img src="/memfs/{{this.channelid}}.jpg" class="channel-list-image">
|
|
<div class="row">
|
|
<div class="channel-list-description">
|
|
{{this.name}}
|
|
</div>
|
|
<div class="channel-list-description-stats">
|
|
Views <span id="channel_list_stats_sum_{{this.channelid}}_1"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
{{#if inject3}}
|
|
<div class="col-xs-12 inject3">
|
|
{{{inject3}}}
|
|
</div>
|
|
<hr />
|
|
{{/if}}
|
|
<div class="col-xs-12">
|
|
<div class="row footer">
|
|
<div class="col-xs-4 middle-xs">
|
|
{{#if imprint_html}}
|
|
<a id="btn-imprint" href="#" class="footer-link">Imprint</a>
|
|
{{/if}}
|
|
{{#if terms_html}}
|
|
<a id="btn-terms" href="#" class="footer-link">Terms</a>
|
|
{{/if}}
|
|
</div>
|
|
{{#if support}}
|
|
<div class="col-xs-8 right-align">
|
|
Powered by <a href="https://github.com/datarhei/restreamer" target="blank" rel="noopener">datarhei Restreamer</a>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-4 hide-xs show-sm" >
|
|
<div class="row channel-list-sidebar main">
|
|
{{#if inject2}}
|
|
<div class="col-xs-12">
|
|
{{{inject2}}}
|
|
</div>
|
|
{{/if}}
|
|
<div class="col-xs-12">
|
|
<h2 class="content-headline">Channels</h2>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12">
|
|
{{#each channels}}
|
|
<a class="channel-list-link" href="/playersite_{{this.channelid}}.html" target="_self">
|
|
<div class="row channel-list-l1 {{#ifEquals @root.channel_id this.channelid}}channel-list-selected{{/ifEquals}}">
|
|
<div class="col-xs-12 middle-xs channel-list-l2">
|
|
<span id="channel_list_badge_{{this.channelid}}_2" class="channel-list-badge">LIVE</span>
|
|
<img src="/memfs/{{this.channelid}}.jpg" class="channel-list-image">
|
|
<div class="row">
|
|
<div class="channel-list-description">
|
|
{{this.name}}
|
|
</div><br />
|
|
<div class="channel-list-description-stats">
|
|
Views <span id="channel_list_stats_sum_{{this.channelid}}_2"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The Modal -->
|
|
<div id="modal-share" class="row modal">
|
|
<div class="col-xs modal-content modal-share">
|
|
<div class="row">
|
|
<div class="col-xs-12 between-xs modal-content-header">
|
|
<p class="content-headline">Share</p>
|
|
<span id="close-share" class="close">×</span>
|
|
</div>
|
|
<div class="col-xs-12 between-xs modal-content-body">
|
|
<a onclick="window.open('https://www.facebook.com/sharer.php?u=' + window.location.href);" rel="noopener" class="share-icons">
|
|
<svg width="36px" height="36px" viewBox="0 0 24 24">
|
|
<path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z" />
|
|
</svg>
|
|
</a>
|
|
<a onclick="window.open('https://twitter.com/intent/tweet?url=' + window.location.href);" rel="noopener" class="share-icons">
|
|
<svg width="36px" height="36px" viewBox="0 0 24 24">
|
|
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z" />
|
|
</svg>
|
|
</a>
|
|
<a onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);" rel="noopener" class="share-icons">
|
|
<svg width="36px" height="36px" viewBox="0 0 24 24">
|
|
<path d="M22 12.14a2.19 2.19 0 0 0-3.71-1.57 10.93 10.93 0 0 0-5.86-1.87l1-4.7 3.27.71a1.56 1.56 0 1 0 .16-.76l-3.64-.77c-.11-.02-.22 0-.29.06-.09.05-.14.14-.16.26l-1.11 5.22c-2.33.07-4.43.78-5.95 1.86A2.2 2.2 0 0 0 4.19 10a2.16 2.16 0 0 0-.9 4.15 3.6 3.6 0 0 0-.05.66c0 3.37 3.92 6.12 8.76 6.12s8.76-2.73 8.76-6.12c0-.21-.01-.44-.05-.66A2.21 2.21 0 0 0 22 12.14M7 13.7c0-.86.68-1.56 1.54-1.56s1.56.7 1.56 1.56a1.56 1.56 0 0 1-1.56 1.56c-.86.02-1.54-.7-1.54-1.56m8.71 4.14C14.63 18.92 12.59 19 12 19c-.61 0-2.65-.1-3.71-1.16a.4.4 0 0 1 0-.57.4.4 0 0 1 .57 0c.68.68 2.14.91 3.14.91s2.47-.23 3.14-.91a.4.4 0 0 1 .57 0c.14.16.14.41 0 .57m-.29-2.56c-.86 0-1.56-.7-1.56-1.56a1.56 1.56 0 0 1 1.56-1.56c.86 0 1.58.7 1.58 1.56a1.6 1.6 0 0 1-1.58 1.56z" />
|
|
</svg>
|
|
</a>
|
|
<a onclick="window.open('https://www.linkedin.com/sharing/share-offsite?mini=true&url=' + window.location.href);" rel="noopener" class="share-icons">
|
|
<svg width="36px" height="36px" viewBox="0 0 24 24">
|
|
<path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z" />
|
|
</svg>
|
|
</a>
|
|
<a onclick="window.open('https://telegram.me/share/url?url=' + window.location.href);" rel="noopener" class="share-icons">
|
|
<svg width="36px" height="36px" viewBox="0 0 24 24">
|
|
<path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z" />
|
|
</svg>
|
|
</a>
|
|
<a onclick="window.open('https://api.whatsapp.com/send?text=' + window.location.href);" rel="noopener" class="share-icons">
|
|
<svg width="36px" height="36px" viewBox="0 0 24 24">
|
|
<path d="M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10c-1.97 0-3.8-.57-5.35-1.55L2 22l1.55-4.65A9.969 9.969 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8c0 1.72.54 3.31 1.46 4.61L4.5 19.5l2.89-.96A7.95 7.95 0 0 0 12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{#if imprint_html}}
|
|
<!-- The Modal -->
|
|
<div id="modal-imprint" class="row modal">
|
|
<!-- Modal content -->
|
|
<div class="col-xs-12 col-sm-10 col-md-7 col-lg-5 modal-content">
|
|
<div class="row">
|
|
<div class="col-xs-12 between-xs modal-content-header">
|
|
<p class="content-headline">Imprint</p>
|
|
<span id="close-imprint" class="close">×</span>
|
|
</div>
|
|
<div class="col-xs-12 between-xs modal-content-body">
|
|
{{{imprint_html}}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if terms_html}}
|
|
<!-- The Modal -->
|
|
<div id="modal-terms" class="row modal">
|
|
<!-- Modal content -->
|
|
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-5 modal-content">
|
|
<div class="row">
|
|
<div class="col-xs-12 between-xs modal-content-header">
|
|
<p class="content-headline">Terms and conditions</p>
|
|
<span id="close-terms" class="close">×</span>
|
|
</div>
|
|
<div class="col-xs-12 between-xs modal-content-body">
|
|
{{{terms_html}}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if channel_creator_name}}{{#if channel_creator_description_html}}
|
|
<!-- The Modal -->
|
|
<div id="modal-creator" class="row modal">
|
|
<!-- Modal content -->
|
|
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-5 modal-content">
|
|
<div class="row">
|
|
<div class="col-xs-12 between-xs modal-content-header">
|
|
<p class="content-headline">{{channel_creator_name}}</p>
|
|
<span id="close-creator" class="close">×</span>
|
|
</div>
|
|
<div class="col-xs-12 between-xs modal-content-body">
|
|
{{{channel_creator_description_html}}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/if}}{{/if}}
|
|
|
|
<script>
|
|
var modal_share = document.getElementById("modal-share");
|
|
var btn_share = document.getElementById("btn-share");
|
|
var close_share = document.getElementById("close-share");
|
|
btn_share.onclick = function() {
|
|
modal_share.style.display = "flex";
|
|
}
|
|
close_share.onclick = function() {
|
|
modal_share.style.display = "none";
|
|
}
|
|
{{#if imprint_html}}
|
|
var modal_imprint = document.getElementById("modal-imprint");
|
|
var btn_imprint = document.getElementById("btn-imprint");
|
|
var close_imprint = document.getElementById("close-imprint");
|
|
btn_imprint.onclick = function() {
|
|
modal_imprint.style.display = "flex";
|
|
}
|
|
close_imprint.onclick = function() {
|
|
modal_imprint.style.display = "none";
|
|
}
|
|
{{/if}}
|
|
{{#if terms_html}}
|
|
var modal_terms = document.getElementById("modal-terms");
|
|
var btn_terms = document.getElementById("btn-terms");
|
|
var close_terms = document.getElementById("close-terms");
|
|
btn_terms.onclick = function() {
|
|
modal_terms.style.display = "flex";
|
|
}
|
|
close_terms.onclick = function() {
|
|
modal_terms.style.display = "none";
|
|
}
|
|
{{/if}}
|
|
{{#if channel_creator_name}}{{#if channel_creator_description_html}}
|
|
var modal_creator = document.getElementById("modal-creator");
|
|
var btn_creator = document.getElementById("btn-creator");
|
|
var close_creator = document.getElementById("close-creator");
|
|
btn_creator.onclick = function() {
|
|
modal_creator.style.display = "flex";
|
|
}
|
|
close_creator.onclick = function() {
|
|
modal_creator.style.display = "none";
|
|
}
|
|
{{/if}}{{/if}}
|
|
var close = document.getElementsByClassName("close")[0];
|
|
|
|
close.onclick = function() {
|
|
modal_share.style.display = "none";
|
|
{{#if imprint_html}}
|
|
modal_imprint.style.display = "none";
|
|
{{/if}}
|
|
{{#if terms_html}}
|
|
modal_terms.style.display = "none";
|
|
{{/if}}
|
|
{{#if channel_creator_name}}{{#if channel_creator_description_html}}
|
|
modal_creator.style.display = "none";
|
|
{{/if}}{{/if}}
|
|
}
|
|
window.onclick = function(event) {
|
|
if (event.target == modal_share) {
|
|
modal_share.style.display = "none";
|
|
{{#if imprint_html}}
|
|
} else if (event.target == modal_imprint) {
|
|
modal_imprint.style.display = "none";
|
|
{{/if}}
|
|
{{#if terms_html}}
|
|
} else if (event.target == modal_terms) {
|
|
modal_terms.style.display = "none";
|
|
{{/if}}
|
|
{{#if channel_creator_name}}{{#if channel_creator_description_html}}
|
|
} else if (event.target == modal_creator) {
|
|
modal_creator.style.display = "none";
|
|
{{/if}}{{/if}}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
var license = '{{channel_license}}';
|
|
var license_url = '';
|
|
var license_name = 'unknown';
|
|
if (license === 'CC0 4.0') {
|
|
license_name = 'CC0 1.0 Universal'
|
|
license_url = 'https://creativecommons.org/publicdomain/zero/1.0/';
|
|
license_image = 'https://creativecommons.org/publicdomain/zero/1.0/';
|
|
} else if (license === 'CC BY 4.0') {
|
|
license_name = 'CC BY 4.0'
|
|
license_url = 'https://creativecommons.org/licenses/by/4.0/';
|
|
license_image = 'https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by.png';
|
|
} else if (license === 'CC BY-SA 4.0') {
|
|
license_name = 'CC BY-SA 4.0'
|
|
license_url = 'https://creativecommons.org/licenses/by-sa/4.0/';
|
|
license_image = 'https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-sa.png';
|
|
} else if (license === 'CC BY-ND 4.0') {
|
|
license_name = 'CC BY-ND 4.0'
|
|
license_url = 'https://creativecommons.org/licenses/by-nd/4.0/';
|
|
license_image = 'https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nd.png';
|
|
} else if (license === 'CC BY-NC 4.0') {
|
|
license_name = 'CC BY-NC 4.0'
|
|
license_url = 'https://creativecommons.org/licenses/by-nc/4.0/';
|
|
license_image = 'https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc.png';
|
|
} else if (license === 'CC BY-NC-SA 4.0') {
|
|
license_name = 'CC BY-NC-SA 4.0'
|
|
license_url = 'https://creativecommons.org/licenses/by-nc-sa/4.0/';
|
|
license_image = 'https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-sa.png';
|
|
} else if (license === 'CC BY-NC-ND 4.0') {
|
|
license_name = 'CC BY-NC-ND 4.0';
|
|
license_url = 'https://creativecommons.org/licenses/by-nc-nd/4.0/';
|
|
license_image = 'https://creativecommons.org/licenses/by-nc-nd/4.0/';
|
|
}
|
|
document.getElementById("license").setAttribute("href", license_url);
|
|
document.getElementById("license_image").src = license_image;
|
|
</script>
|
|
|
|
<script>
|
|
var channelIds = [{{#each channels}}"{{this.id}}",{{/each}}]
|
|
var channel_id = '{{channel_id}}';
|
|
myCallback(channelIds, channel_id);
|
|
setInterval(myCallback, 2000, channelIds, channel_id);
|
|
function myCallback(channelIds) {
|
|
channelIds.forEach(function (channelId) {
|
|
fetch("api/v3/widget/process/" + channelId).then(
|
|
function(u){
|
|
return u.json();
|
|
}
|
|
).then(
|
|
function(json){
|
|
data_function(json);
|
|
}
|
|
);
|
|
function data_function(data){
|
|
/** channel stats **/
|
|
if (channelId.split(':')[2] === channel_id) {
|
|
document.getElementById('channel_stats_current_' + channelId.split(':')[2]).innerHTML = data.current_sessions;
|
|
document.getElementById('channel_stats_sum_' + channelId.split(':')[2]).innerHTML = data.total_sessions;
|
|
|
|
var time = data.uptime;
|
|
var days = Math.floor(time / 86400);
|
|
time -= days * 86400;
|
|
|
|
var hours = Math.floor(time / 3600);
|
|
time -= hours * 3600;
|
|
|
|
var minutes = Math.floor(time / 60);
|
|
time -= minutes * 60;
|
|
|
|
var seconds = parseInt(time % 60, 10);
|
|
|
|
document.getElementById('channel_stats_runtime_' + channelId.split(':')[2]).innerHTML = days + ':' + (hours < 24 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
|
|
}
|
|
|
|
/** channel list **/
|
|
if (data.uptime >= 1) {
|
|
document.getElementById('channel_list_badge_' + channelId.split(':')[2] + '_1').style.display = "block";
|
|
document.getElementById('channel_list_badge_' + channelId.split(':')[2] + '_2').style.display = "block";
|
|
} else {
|
|
document.getElementById('channel_list_badge_' + channelId.split(':')[2] + '_1').style.display = "none";
|
|
document.getElementById('channel_list_badge_' + channelId.split(':')[2] + '_2').style.display = "none";
|
|
}
|
|
document.getElementById('channel_list_stats_sum_' + channelId.split(':')[2] + '_1').innerHTML = data.total_sessions;
|
|
document.getElementById('channel_list_stats_sum_' + channelId.split(':')[2] + '_2').innerHTML = data.total_sessions;
|
|
};
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<script src="channels/{{channel_id}}/config.js"></script>
|
|
{{#ifEquals player "videojs"}}
|
|
<script src="player/videojs/dist/video.min.js"></script>
|
|
<script src="player/videojs/dist/videojs-overlay.min.js"></script>
|
|
<script src="player/videojs/dist/videojs-license.min.js"></script>
|
|
{{else}}
|
|
<script src="player/clappr/clappr.min.js"></script>
|
|
<script src="player/clappr/clappr-stats.min.js"></script>
|
|
<script src="player/clappr/clappr-nerd-stats.min.js"></script>
|
|
{{/ifEquals}}
|
|
<script>
|
|
function getQueryParam(key, defaultValue) {
|
|
var query = window.location.search.substring(1);
|
|
var vars = query.split("&");
|
|
for(var i = 0; i < vars.length; i++) {
|
|
var pair = vars[i].split("=");
|
|
if(pair[0] == key) {
|
|
return pair[1];
|
|
}
|
|
}
|
|
return defaultValue;
|
|
}
|
|
|
|
function convertBoolParam(key, defaultValue) {
|
|
var val = getQueryParam(key, defaultValue);
|
|
return val === true || val === "true" || val === "1" || val === "yes" || val === "on";
|
|
}
|
|
|
|
function convertColorParam(parameter, defaultColor) {
|
|
var re = new RegExp("^#([0-9a-f]{3}|[0-9a-f]{6})$");
|
|
var c = getQueryParam(parameter, defaultColor);
|
|
// decode color as # has to be represented by %23
|
|
var c = decodeURIComponent(c);
|
|
// if color was given without leading #, prepend it
|
|
if (!String(c).startsWith("#")) c = "#" + c;
|
|
|
|
if (re.test(c)) {
|
|
return c;
|
|
} else {
|
|
return defaultColor;
|
|
}
|
|
}
|
|
|
|
var autoplay = convertBoolParam("autoplay", playerConfig.autoplay);
|
|
var mute = convertBoolParam("mute", playerConfig.mute);
|
|
var statistics = convertBoolParam("stats", playerConfig.statistics);
|
|
var color = convertColorParam("color", playerConfig.color.buttons);
|
|
</script>
|
|
<script src="playersite/player.js"></script>
|
|
|
|
{{{inject4}}}
|
|
|
|
</body>
|
|
</html>
|