app/youtube/templates/watch.html.j2

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