{% extends "base.html.j2" %}
{% import 'macros.imp.j2' as macros %}

{% block title %}{{ title | e }} — {{ author | e }}{% endblock %}

{% block content %}
{% if video_url %}
<div class="aspect-ratio main-video" style="--aspect-ratio:{{ aspectr }}">
<video controls poster="{{ poster }}">
	{% set offset = "#t="~request.args.t|timeoffset if request.args.t else "" %}
	{% for v in stream_map.muxed|sort(attribute='height', reverse=True) %}
	<source src="{{v.url}}{{offset}}">
	{% endfor %}
	{% set cc_default = False %}
	{% for cc in subtitles %}
	<track label="{{ cc.name }}" kind="subtitles" srclang="{{ cc.code }}" src="{{ url_for('youtube.timedtext') }}?{{ cc.query }}" {{ 'default' if cc_default and not loop.counter }}>
	{% endfor %}
{% if '/api/manifest/hls_variant/' in video_url %}{#todo: this is ugly!#}
	<source src="{{ video_url }}">
{% endif %}
</video>

<script>
	"use strict";
var sha256=function a(b){function c(a,b){return a>>>b|a<<32-b}for(var d,e,f=Math.pow,g=f(2,32),h="length",i="",j=[],k=8*b[h],l=a.h=a.h||[],m=a.k=a.k||[],n=m[h],o={},p=2;64>n;p++)if(!o[p]){for(d=0;313>d;d+=p)o[d]=p;l[n]=f(p,.5)*g|0,m[n++]=f(p,1/3)*g|0}for(b+="\x80";b[h]%64-56;)b+="\x00";for(d=0;d<b[h];d++){if(e=b.charCodeAt(d),e>>8)return;j[d>>2]|=e<<(3-d)%4*8}for(j[j[h]]=k/g|0,j[j[h]]=k,e=0;e<j[h];){var q=j.slice(e,e+=16),r=l;for(l=l.slice(0,8),d=0;64>d;d++){var s=q[d-15],t=q[d-2],u=l[0],v=l[4],w=l[7]+(c(v,6)^c(v,11)^c(v,25))+(v&l[5]^~v&l[6])+m[d]+(q[d]=16>d?q[d]:q[d-16]+(c(s,7)^c(s,18)^s>>>3)+q[d-7]+(c(t,17)^c(t,19)^t>>>10)|0),x=(c(u,2)^c(u,13)^c(u,22))+(u&l[1]^u&l[2]^l[1]&l[2]);l=[w+x|0].concat(l),l[4]=l[4]+w|0}for(d=0;8>d;d++)l[d]=l[d]+r[d]|0}for(d=0;8>d;d++)for(e=3;e+1;e--){var y=l[d]>>8*e&255;i+=(16>y?0:"")+y.toString(16)}return i}; /*https://geraintluff.github.io/sha256/sha256.min.js (public domain)*/
	document.addEventListener('DOMContentLoaded', load_sponsorblock);
	document.addEventListener('DOMContentLoaded', ()=>{
		const check = document.querySelector("#skip_sponsors");
		check.addEventListener("change", () => {if (check.checked) load_sponsorblock()});
	});
	function load_sponsorblock(){
		const video_id = (new URLSearchParams(document.location.search)).get('v');
		const hash = sha256(video_id).substr(0,4);
		fetch(`https://sponsor.ajay.app/api/skipSegments/${hash}`)
				.then(response => response.json())
				.then(data => {
			const segments = ((data.find(e => e.videoID == video_id)||{}).segments||[])
					.filter(e => e.category == "sponsor").map(e => e.segment);
			document.querySelector('#skip_n').innerText = `; ${segments.length} segments`;
			for (const [start, end] of segments) {
				document.querySelector('.main-video video')
						.addEventListener("timeupdate", function() {
					if (document.querySelector("#skip_sponsors").checked &&
							this.currentTime >= start &&
							this.currentTime < end-1) {
						this.currentTime = end;
					}
				});
			}
		});
	}
</script>
{% if '/api/manifest/hls_variant/' in video_url %}{#todo: this is ugly!#}
<script src="/static/3rd-party/hls.js/hls.min.js"></script>
<script>
	let vid = document.querySelector('video');
	if (!vid.canPlayType('application/vnd.apple.mpegurl') && Hls.isSupported()) {
		var hls = new Hls();
		let source = new URL(document.querySelector("source").src).pathname;
		hls.loadSource(source);
		hls.attachMedia(vid);
	}
</script>
{% endif %}

</div>
{% else %}{#TODO: this'll break livestreams #}
<img src="{{ poster }}" style="width:100%;object-fit:cover;height:calc(100% / {{ aspectr }});">
{% endif %}

{% if video_error %}
<div class="video_error">
        {{ errdetails }} Watch on <a href="{{ invidious_url }}">Invidious</a> or <a href="https://www.youtube.com/watch?v={{ video_id }}">Youtube</a>
</div>
{% endif %}

<h1>{{ title | e }}<br>
<small><a href="/channel/{{ channel_id }}/">{{ author | e }}</a></small></h1>

<details><summary>Description</summary>
	<p style="white-space:pre-wrap">{{ description | e }}</p>
</details>

<details><summary>Metadata</summary>
	<dl>
	<dt>Duration
	<dd>{{ length | format_time }}
	<dt>Views
	<dd>{{ '{0:,}'.format(views | int)|replace(",","'") }}
	<dt>Published
	<dd>{{ published.split('T')[0] }}
	<dt>Rating
	<dd>{{ thumbs_up | round(1) }}% &#128077;&#xFE0E;&#x2044;&#128078;&#xFE0E; {{ thumbs_dn | round(1) }}%
	<dt>Visibility
	<dd>{{ 'unlisted' if unlisted else 'public' }}
	{% if blacklisted|length == 0 %}
	<dt>Available in
	<dd>all regions
	{% elif whitelisted|length == 0 %}
	<dt>Blacklisted in
	<dd>all regions
	{% elif blacklisted|length > whitelisted|length %}
	<dt>Available in
	<dd>{{ whitelisted | join(', ') }}
	{% else %}
	<dt>Blocked in
	<dd>{{ blacklisted | join(', ') }}
	{% endif %}
	</dl>
</details>

<details><summary>More Actions</summary>
	<ul class="more-actions">
	<li><label><input type=checkbox id=skip_sponsors checked>skip sponsors</label> (with <a href="https://sponsor.ajay.app">SponsorBlock</a><span id=skip_n></span>)
	<noscript><br>Note: requires javascript</noscript>
{# TODO: don't redirect away (204 response?) #}
	<li>{{ macros.emoji_link("audio", video_id, True) }}
	<li>{{ macros.emoji_button("pin", video_id, is_pinned, True) }}
	<li>{{ macros.emoji_button("subscribe", channel_id, is_subscribed, True) }}
	<li>{{ macros.emoji_link("raw", video_id, True) }}
	<li>{{ macros.emoji_link("json", video_id, True) }}
	<li><a href="https://invidious.snopyta.org/watch?v={{ video_id }}">watch on invidious</a>
	<li><a href="https://youtu.be/{{ video_id }}">youtu.be</a>
	  | <a href="https://www.youtube-nocookie.com/embed/{{ video_id }}">embed</a>
	</ul>
</details>

<details><summary>Info- and Endcards</summary>
	<div class="cards">
	{% for card in all_cards %} {# Note: no point in displaying the current channels's channel card #}
	{{ macros.typed_card(card) if not (card.type == 'CHANNEL' and card.content.channel_id == channel_id) }}
	{% endfor %}
	{{ macros.dummycard() }}
	</div>
</details>
{% endblock %}