{% 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 }}">
	{% for v in stream_map.muxed|sort(attribute='height', reverse=True) %}
	<source src="{{v.url}}">
	{% 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 %}
</video>

<script>
	"use strict";
	//todo: should only be done after user is made aware of video id getting sent to 3rd party (wait for k-anon)
	//window.addEventListener("load", () => load_sponsorblock("{{ video_id }}"));
	document.addEventListener('DOMContentLoaded', ()=>{ let check = document.querySelector("#skip_sponsors");
	check.addEventListener("change", () => {if (check.checked) load_sponsorblock("{{ video_id }}")});});
	function load_sponsorblock(video_id){
		fetch(`https://sponsor.ajay.app/api/skipSegments?videoID=${video_id}`)
				.then(response => response.json())
				.then(data => {
			for (const segment of data) {
				const [start, stop] = segment.segment;
				if (segment.category != "sponsor") continue;
				document.querySelector('.main-video video')
						.addEventListener("timeupdate", function() {
					if (document.querySelector("#skip_sponsors").checked &&
							this.currentTime >= start && this.currentTime < stop-1) {
						this.currentTime = stop;
					}
				});
			}
		});
	}
</script>

</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 }}
<hr></details>

<details><summary>Metadata</summary>
	<dl>
	<dt>Duration
	{% set h = length // (60*60) %}
	{% set m = length // 60 % 60 %}
	{% set s = length % 60 %}
	<dd>{{ h~':' if h }}{{ '%02d' % m }}:{{ '%02d' % s }}
	<dt>Views
	<dd>{{ '{0:,}'.format(views | int)|replace(",","&hairsp;") }}
	<dt>Published
	<dd>{{ published.split('T')[0] }}
	<dt>Rating
	<dd>{{ rating | round(1) }}/5
	<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>Blacklisted in
	<dd>{{ blacklisted | join(', ') }}
	{% endif %}
	</dl>
<hr></details>

<details><summary>More Actions</summary>
	<ul class="more-actions">
	<li><label><input type=checkbox id=skip_sponsors>skip sponsors</label>
	{# TODO: make checked by default (need to inform the user about potential privacy concerns) #}
	<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://invidio.us/watch?v={{ video_id }}">watch on invidious</a>
	<li><a href="https://youtu.be/{{ video_id }}">watch on youtube</a>
	</ul>
<hr></details>

<details><summary>Info- and Endcards</summary>
	<div class="cards">
	{% for card in all_cards %}
	{% set c = card.content %}
	{% if card.type == 'VIDEO' %}
		{% call macros.card(c.video_id, c.title, c.length) %}
			<span class=channel>{{ c.author }}&nbsp;</span>
		{% endcall %}
	{% elif card.type == 'CHANNEL' and c.channel_id != channel_id %}
		{% call macros.card_generic("/channel/"~c.channel_id, c.icons[250] if 'icons' in c else '', c.title) %}
			<span class=channel>Channel</span>
			<span class=advanced></span>
		{% endcall %}
	{% elif card.type == 'PLAYLIST' %}
		{% call macros.card_generic("/playlist?list="~c.playlist_id, "https://i.ytimg.com/vi/"~c.video_id~"/mqdefault.jpg", c.title) %}
			<span class=channel>{{ c.author }}</span>
			<span class=advanced>{{ c.n_videos }} videos</span>
		{% endcall %}
	{% elif card.type == 'WEBSITE' %}
		{% call macros.card_generic(c.url, c.icons[c.icons.largest] if 'icons' in c else '', c.title) %}
			<span class=channel>{{ c.domain }}</span>
		{% endcall %}
	{% endif %}
	{% endfor %}
	{{ macros.dummycard() }}
	</div>
<hr></details>
{% endblock %}