118 lines
4.6 KiB
HTML
118 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>{{ title }}</title>
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; media-src 'self' https://*.googlevideo.com;
|
|
{{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}">
|
|
<!--<link href="{{ theme_path }}" type="text/css" rel="stylesheet">-->
|
|
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
font-family: {{ font_family|safe }};
|
|
}
|
|
html, body, div, ol, h2{
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
a:link {
|
|
color: #22aaff;
|
|
}
|
|
a:visited {
|
|
color: #7755ff;
|
|
}
|
|
body{
|
|
background-color: black;
|
|
color: white;
|
|
max-height: 100vh;
|
|
overflow-y: hidden;
|
|
}
|
|
.text-height{
|
|
font-size: 0.75rem;
|
|
overflow-y: hidden;
|
|
height: 1rem;
|
|
}
|
|
a.video-link{
|
|
color: white;
|
|
}
|
|
h2 {
|
|
font-weight: normal;
|
|
margin-left: 5px;
|
|
}
|
|
ol.video-info-list{
|
|
padding: 0px;
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
ol.video-info-list li{
|
|
margin-left: 20px;
|
|
font-size: 0.75rem;
|
|
max-width: 75%;
|
|
}
|
|
address{
|
|
font-style: normal;
|
|
}
|
|
.video-info-list span{
|
|
height: 1rem;
|
|
overflow-y: hidden;
|
|
display: inline-block;
|
|
}
|
|
body > video, body > .plyr{
|
|
max-height: calc(100vh - 2rem);
|
|
width: 100%;
|
|
height: 56.25vw; /* 360/640 == 720/1280 */
|
|
}
|
|
</style>
|
|
|
|
{% if js_data %}
|
|
<script>data = {{ js_data|tojson }}</script>
|
|
{% endif %}
|
|
|
|
{% if settings.video_player == 1 %}
|
|
<!-- plyr -->
|
|
<script>var storyboard_url = {{ storyboard_url | tojson }}</script>
|
|
<link href="/youtube.com/static/modules/plyr/plyr.css" rel="stylesheet"/>
|
|
<link href="/youtube.com/static/plyr_fixes.css" rel="stylesheet"/>
|
|
<!--/ plyr -->
|
|
{% endif %}
|
|
</head>
|
|
|
|
<body>
|
|
<a class="video-link text-height" href="{{ video_url }}" title="{{ title }}" target="_blank" rel="noopener noreferrer"><h2 class="text-height">{{ title }}</h2></a>
|
|
<div class="video-info-bar text-height">
|
|
<ol class="video-info-list text-height">
|
|
<li class="text-height"><time class="text-height"><span class="text-height">{{ time_published }}</span></time></li>
|
|
<li class="text-height"><address class="text-height"><span class="text-height">Uploaded by <a class="text-height" href="{{ uploader_channel_url }}" title="{{ uploader }}" target="_blank" rel="noopener noreferrer">{{ uploader }}</a></span></address></li>
|
|
</ol>
|
|
</div>
|
|
<video controls autofocus class="video" height="{{ video_height }}px">
|
|
{% if uni_sources %}
|
|
<source src="{{ uni_sources[uni_idx]['url'] }}" type="{{ uni_sources[uni_idx]['type'] }}" data-res="{{ uni_sources[uni_idx]['quality'] }}">
|
|
{% endif %}
|
|
|
|
{% for source in subtitle_sources %}
|
|
{% if source['on'] %}
|
|
<track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}" default>
|
|
{% else %}
|
|
<track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}">
|
|
{% endif %}
|
|
{% endfor %}
|
|
</video>
|
|
{% if settings.video_player == 1 %}
|
|
<!-- plyr -->
|
|
<script src="/youtube.com/static/modules/plyr/plyr.js"></script>
|
|
<script src="/youtube.com/static/js/plyr-start.js"></script>
|
|
<!-- /plyr -->
|
|
{% endif %}
|
|
|
|
{% if settings.use_video_hotkeys %}
|
|
<script src="/youtube.com/static/js/common.js"></script>
|
|
<script src="/youtube.com/static/js/hotkeys.js"></script>
|
|
{% endif %}
|
|
</body>
|
|
</html>
|