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">{#XXX: object-fit:cover affects poster, not video#}
  13 <video controls poster="{{ poster }}" style="width:100%;object-fit:cover;height:calc(100% / {{ aspectr }});">
  14         <source src="{{ video_url }}">
  15         {% for cc in subtitles %}
  16         <track label="{{ cc.name }}" kind="subtitles" srclang="{{ cc.code }}" src="{{ cc.url }}" {{ 'default' if not loop.counter }}>
  17         {% endfor %}
  18 </video>
  19
  20 <h1>{{ title | e }}<br>
  21 <small><a href="/channel/{{ channel_id }}">{{ author | e }}</a></small></h1>
  22 <details><summary>Description</summary>
  23         <p style="white-space:pre-wrap">{{ description | e }}
  24 <hr></details>
  25
  26 <details><summary>Metadata</summary>
  27         <dl>
  28         <dt>Duration
  29         {% set h = length // (60*60) %}
  30         {% set m = length // 60 % 60 %}
  31         {% set s = length % 60 %}
  32         <dd>{{ h~':' if h }}{{ '%02d' % m }}:{{ '%02d' % s }}
  33         <dt>Views
  34         <dd>{{ '{0:,}'.format(views | int)|replace(",","&hairsp;") }}
  35         <dt>Published
  36         <dd>{{ published }}
  37         <dt>Rating
  38         <dd>{{ rating | round(1) }}/5
  39         <dt>Visibility
  40         <dd>{{ 'unlisted' if unlisted else 'public' }}
  41         </dl>
  42         <hr>
  43         Available in {{ countries | length }} countries: {{ countries | join(', ') }}
  44 <hr></details>
  45
  46 <!-- not implemented warning:--><div style="background:red">{%for x in (infocards+endcards)|selectattr('content.error')%}{{x.content.error}}{%endfor%}</div>
  47 <details><summary>Info- and Endcards</summary>
  48 <!--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). -->
  49         {% for card in infocards+endcards %}{#
  50         #}{% set c = card.content %}{#
  51         #}{% if card.type == 'VIDEO' %}{#
  52                 #}{% call macros.card(c.video_id, c.title) %}
  53                         <span class=channel>{{ c.author }}&nbsp;</span>
  54                         <span class=advanced>{{ c.length }}</span>
  55                 {% endcall %}{#
  56         #}{% elif card.type == 'CHANNEL' and c.channel_id != channel_id %}{#
  57                 #}{% call macros.card_generic("/channel/"~c.channel_id, c.icons[250] if 'icons' in c else '', c.title) %}
  58                         <span class=channel>Channel</span>
  59                         <span class=advanced></span>
  60                 {% endcall %}{#
  61         #}{% elif card.type == 'PLAYLIST' %}{#
  62                 #}{% call macros.card_generic("/playlist?list="~c.playlist_id, "https://i.ytimg.com/vi/"~c.video_id~"/mqdefault.jpg", c.title) %}
  63                         <span class=channel>{{ c.author }}</span>
  64                         <span class=advanced>{{ c.n_videos }} videos</span>
  65                 {% endcall %}{#
  66         #}{% elif card.type == 'WEBSITE' %}{#
  67                 #}{% call macros.card_generic(c.url, c.icons[250] if 'icons' in c else '', c.title) %}
  68                         <span class=channel>{{ c.domain }}</span>
  69                 {% endcall %}{#
  70         #}{% endif %}{#
  71         #}{% endfor %}
  72 <hr></details>
  73 </div>