app/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 %}
   7
   8 <!--b style=font-size:large></b><hr-->
   9
  10 {% include 'messages.inc.j2' %}
  11
  12 <div id=main style="margin:auto">
  13 {% if video_url %}
  14 <div class="aspect-ratio main-video" style="--aspect-ratio:{{ aspectr }}">
  15 <video controls poster="{{ poster }}">
  16         <source src="{{ video_url }}">
  17         {% for cc in subtitles %}
  18         <track label="{{ cc.name }}" kind="subtitles" srclang="{{ cc.code }}" src="{{ cc.url }}" {{ 'default' if not loop.counter }}>
  19         {% endfor %}
  20 </video>
  21 </div>
  22 {% else %}{#TODO: this'll break livestreams #}
  23 <img src="{{ poster }}" style="width:100%;object-fit:cover;height:calc(100% / {{ aspectr }});">
  24 {% endif %}
  25
  26 {% if video_error %}
  27 <div class="video_error">
  28         {{ errdetails }} Watch on <a href="{{ invidious_url }}">Invidious</a> or <a href="https://www.youtube.com/watch?v={{ video_id }}">Youtube</a>
  29 </div>
  30 {% endif %}
  31
  32 <h1>{{ title | e }}<br>
  33 <small><a href="/channel/{{ channel_id }}">{{ author | e }}</a></small></h1>
  34
  35 <details><summary>Description</summary>
  36         <p style="white-space:pre-wrap">{{ description | e }}
  37 <hr></details>
  38
  39 <details><summary>Metadata</summary>
  40         <dl>
  41         <dt>Duration
  42         {% set h = length // (60*60) %}
  43         {% set m = length // 60 % 60 %}
  44         {% set s = length % 60 %}
  45         <dd>{{ h~':' if h }}{{ '%02d' % m }}:{{ '%02d' % s }}
  46         <dt>Views
  47         <dd>{{ '{0:,}'.format(views | int)|replace(",","&hairsp;") }}
  48         <dt>Published
  49         <dd>{{ published }}
  50         <dt>Rating
  51         <dd>{{ rating | round(1) }}/5
  52         <dt>Visibility
  53         <dd>{{ 'unlisted' if unlisted else 'public' }}
  54         {% if blacklisted|length > countries|length %}
  55         <dt>Available in
  56         <dd>{{ countries | join(', ') }}
  57         {% else %}
  58         <dt>Blacklisted in
  59         <dd>{{ blacklisted | join(', ') }}
  60         {% endif %}
  61         </dl>
  62 <hr></details>
  63
  64 <!-- not implemented warning:--><div style="background:red">{%for x in (infocards+endcards)|selectattr('content.error')%}{{x.content.error}}{%endfor%}</div>
  65 <details><summary>Info- and Endcards</summary>
  66 <!--TODO: don't show duplicates (e.g. same video/playlist in infocard and endscreen; G1m7goLCJDY, 5TkIe60y2GI). We want videos+playlists from infocards, channels+websites from endcards (wherever more info is available). -->
  67         {% for card in infocards+endcards %}{#
  68         #}{% set c = card.content %}{#
  69         #}{% if card.type == 'VIDEO' %}{#
  70                 #}{% call macros.card(c.video_id, c.title) %}
  71                         <span class=channel>{{ c.author }}&nbsp;</span>
  72                         <span class=advanced>{{ c.length }}</span>
  73                 {% endcall %}{#
  74         #}{% elif card.type == 'CHANNEL' and c.channel_id != channel_id %}{#
  75                 #}{% call macros.card_generic("/channel/"~c.channel_id, c.icons[250] if 'icons' in c else '', c.title) %}
  76                         <span class=channel>Channel</span>
  77                         <span class=advanced></span>
  78                 {% endcall %}{#
  79         #}{% elif card.type == 'PLAYLIST' %}{#
  80                 #}{% call macros.card_generic("/playlist?list="~c.playlist_id, "https://i.ytimg.com/vi/"~c.video_id~"/mqdefault.jpg", c.title) %}
  81                         <span class=channel>{{ c.author }}</span>
  82                         <span class=advanced>{{ c.n_videos }} videos</span>
  83                 {% endcall %}{#
  84         #}{% elif card.type == 'WEBSITE' %}{#
  85                 #}{% call macros.card_generic(c.url, c.icons[250] if 'icons' in c else '', c.title) %}
  86                         <span class=channel>{{ c.domain }}</span>
  87                 {% endcall %}{#
  88         #}{% endif %}{#
  89         #}{% endfor %}
  90 <hr></details>
  91 </div>