]> git.gir.st - subscriptionfeed.git/blob - app/youtube/templates/watch.html.j2
abstract emoji buttons/links
[subscriptionfeed.git] / app / youtube / templates / watch.html.j2
1 <!DOCTYPE html>
2 <title>{{ title }} &mdash; {{ author }}</title>
3 <link rel="shortcut icon" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" fill="%23fff"><circle r="150" cx="150" cy="150" fill="%23f00"/><path d="m120 97v106l93-53"/></svg>'>
4 <link rel="stylesheet" href="/static/style.css">
5
6 {% import 'macros.imp.j2' as macros with context %}
7
8 {{ macros.headerbar() }}
9
10 {% include 'messages.inc.j2' %}
11
12 <article>
13 {% if video_urls|length %}
14 <div class="aspect-ratio main-video" style="--aspect-ratio:{{ aspectr }}">
15 <video controls poster="{{ poster }}">
16 {% for video_url in video_urls %}
17 <source src="{{ video_url }}">
18 {% endfor %}
19 {% set cc_default = False %}
20 {% for cc in subtitles %}
21 <track label="{{ cc.name }}" kind="subtitles" srclang="{{ cc.code }}" src="{{ url_for('youtube.timedtext') }}?{{ cc.query }}" {{ 'default' if cc_default and not loop.counter }}>
22 {% endfor %}
23 </video>
24
25 <script>
26 "use strict";
27 //todo: should only be done after user is made aware of video id getting sent to 3rd party (wait for k-anon)
28 //window.addEventListener("load", () => load_sponsorblock("{{ video_id }}"));
29 document.addEventListener('DOMContentLoaded', ()=>{ let check = document.querySelector("#skip_sponsors");
30 check.addEventListener("change", () => {if (check.checked) load_sponsorblock("{{ video_id }}")});});
31 function load_sponsorblock(video_id){
32 fetch(`https://sponsor.ajay.app/api/skipSegments?videoID=${video_id}`)
33 .then(response => response.json())
34 .then(data => {
35 for (const segment of data) {
36 const [start, stop] = segment.segment;
37 if (segment.category != "sponsor") continue;
38 document.querySelector('.main-video video')
39 .addEventListener("timeupdate", function() {
40 if (document.querySelector("#skip_sponsors").checked &&
41 this.currentTime >= start && this.currentTime < stop-1) {
42 this.currentTime = stop;
43 }
44 });
45 }
46 });
47 }
48 </script>
49
50 </div>
51 {% else %}{#TODO: this'll break livestreams #}
52 <img src="{{ poster }}" style="width:100%;object-fit:cover;height:calc(100% / {{ aspectr }});">
53 {% endif %}
54
55 {% if video_error %}
56 <div class="video_error">
57 {{ errdetails }} Watch on <a href="{{ invidious_url }}">Invidious</a> or <a href="https://www.youtube.com/watch?v={{ video_id }}">Youtube</a>
58 </div>
59 {% endif %}
60
61 <h1>{{ title | e }}<br>
62 <small><a href="/channel/{{ channel_id }}">{{ author | e }}</a></small></h1>
63
64 <details><summary>Description</summary>
65 <p style="white-space:pre-wrap">{{ description | e }}
66 <hr></details>
67
68 <details><summary>Metadata</summary>
69 <dl>
70 <dt>Duration
71 {% set h = length // (60*60) %}
72 {% set m = length // 60 % 60 %}
73 {% set s = length % 60 %}
74 <dd>{{ h~':' if h }}{{ '%02d' % m }}:{{ '%02d' % s }}
75 <dt>Views
76 <dd>{{ '{0:,}'.format(views | int)|replace(",","&hairsp;") }}
77 <dt>Published
78 <dd>{{ published.split('T')[0] }}
79 <dt>Rating
80 <dd>{{ rating | round(1) }}/5
81 <dt>Visibility
82 <dd>{{ 'unlisted' if unlisted else 'public' }}
83 {% if blacklisted|length == 0 %}
84 <dt>Available in
85 <dd>all regions
86 {% elif whitelisted|length == 0 %}
87 <dt>Blacklisted in
88 <dd>all regions
89 {% elif blacklisted|length > whitelisted|length %}
90 <dt>Available in
91 <dd>{{ whitelisted | join(', ') }}
92 {% else %}
93 <dt>Blacklisted in
94 <dd>{{ blacklisted | join(', ') }}
95 {% endif %}
96 </dl>
97 <hr></details>
98
99 <details><summary>More Actions</summary>
100 <ul class="more-actions">
101 <li><label><input type=checkbox id=skip_sponsors>skip sponsors</label>
102 {# TODO: make checked by default (need to inform the user about potential privacy concerns) #}
103 <noscript><br>Note: requires javascript</noscript>
104 {# TODO: don't redirect away (204 response?) #}
105 <li>{{ macros.emoji_button("pin", video_id, is_pinned, True) }}
106 <li>{{ macros.emoji_button("subscribe", channel_id, is_subscribed, True) }}
107 <li>{{ macros.emoji_link("raw", video_id, True) }}
108 <li>{{ macros.emoji_link("json", video_id, True) }}
109 <li><a href="https://invidio.us/watch?v={{ video_id }}">watch on invidious</a>
110 <li><a href="https://youtu.be/{{ video_id }}">watch on youtube</a>
111 </ul>
112 <hr></details>
113
114 <!-- not implemented warning:--><div style="background:red">{%for x in (infocards+endcards)|selectattr('content.error')%}{{x.content.error}}{%endfor%}</div>
115 <details><summary>Info- and Endcards</summary>
116 <div class="cards">
117 {% for card in all_cards %}
118 {% set c = card.content %}
119 {% if card.type == 'VIDEO' %}
120 {% call macros.card(c.video_id, c.title, c.length) %}
121 <span class=channel>{{ c.author }}&nbsp;</span>
122 {% endcall %}
123 {% elif card.type == 'CHANNEL' and c.channel_id != channel_id %}
124 {% call macros.card_generic("/channel/"~c.channel_id, c.icons[250] if 'icons' in c else '', c.title) %}
125 <span class=channel>Channel</span>
126 <span class=advanced></span>
127 {% endcall %}
128 {% elif card.type == 'PLAYLIST' %}
129 {% call macros.card_generic("/playlist?list="~c.playlist_id, "https://i.ytimg.com/vi/"~c.video_id~"/mqdefault.jpg", c.title) %}
130 <span class=channel>{{ c.author }}</span>
131 <span class=advanced>{{ c.n_videos }} videos</span>
132 {% endcall %}
133 {% elif card.type == 'WEBSITE' %}
134 {% call macros.card_generic(c.url, c.icons[250] if 'icons' in c else '', c.title) %}
135 <span class=channel>{{ c.domain }}</span>
136 {% endcall %}
137 {% endif %}
138 {% endfor %}
139 </div>
140 <hr></details>
141 </article>
Imprint / Impressum