phantasma/app/templates/film.html
2021-11-24 12:45:15 +01:00

123 lines
3.5 KiB
HTML

{% extends "base.html" %}
{% block head %}
<meta name="title" content="{{ film.data.title }}"/>
<meta name="description" content="{% for director in film.data.director %}{{ director|safe }}{% endfor %}"/>
<meta property="og:title" content="{{ film.data.title }} {{ film.data.tile.zh }}"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="https://phantas.ma{{ film.get_absolute_url }}"/>
<meta property="og:site_name" content="Phantas.ma"/>
<meta property="og:description" content="{% for director in film.data.director %}{{ director|safe }}{% endfor %}"/>
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:title" content="{{ film.data.title }} {{ film.data.tile.zh }}"/>
<meta property="twitter:description" content="{% for director in film.data.director %}{{ director|safe }}{% endfor %}"/>
{% endblock head %}
{% block body_class%}animated{% endblock %}
{% block main %}
{% comment %}
<style>
:root {
--bg-color-1: {{ film.color_1 }};
--bg-color-2: {{ film.color_2 }};
--bg-color-3: {{ film.color_2 }};
--bg-color-4: {{ film.color_4 }};
}
body {
background-attachment: fixed;
}
</style>
{% endcomment %}
<div class="film">
<div class="info">
<div class="info-meta">
<h1>
<span class="font-bold">{{ film.data.title | safe }}</span>
</h1>
{% if film.data.date %}
<div class="date">
{{ film.data.date | safe }}
</div>
{% endif %}
<div class="country">
{{ film.data.country|default:''|join:', ' }}
</div>
<div class="type">
{{ film.data.type|default:''|join:', ' }}
</div>
<div class="details">
{{ film.data.description|default:''|safe }}
</div>
<div class="featuring">
Featuring:
{{ film.data.featuring|default:''|join:', ' }}
</div>
</div>
<div class="video-block">
<img src="{{ stream_prefix }}/{{ film.data.items.0.id }}/timelineslitscan64pframe.jpg" class="video-fallback-block">
<video
id="timeline-video"
src="{{ stream_prefix }}/{{ film.data.items.0.id }}/timelineslitscan64p.mp4"
poster="{{ stream_prefix }}/{{ film.data.items.0.id }}/timelineslitscan64pframe.jpg"
controlsList="nodownload"
autoplay
loop
muted
playsinline>
</video>
</div>
<div class="summary-block">
<p>{{ film.data.summary|safe }}</p>
</div>
<div class="items">
{% for item in film.data.items %}
<div class="item">
<a href="play/{{ item.id }}">
<figure>
<div class="overlay">
<img src="{% static 'svg/play.svg' %}">
</div>
<img src="{{ stream_prefix }}/{{ item.id }}/480p.jpg">
<figcaption>
{{ item.title | safe }}
{% if item.date %}({{item.date | safe }}){% endif %}
</figcaption>
</figure>
</a>
</div>
{% endfor %}
</div>
<div class="play">
<div class="film-play-pandora"><a href="{{ film.pandora_url }}" target="_blank">Open in Archive</a></div>
</div>
{% if film.related_texts.exists %}
<div class="texts">
<h2>Related Assemblies</h2>
{% for text in film.related_texts %}
<div class="text">
<a href="{{ text.get_absolute_url }}">
{{ text.title | safe }}<br>
</a>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% block end %}
<script>
var film = {{ film.json | safe }};
film.prefix = "{{ stream_prefix }}";
var pandoraURL = "{{ pandora_url }}";
</script>
{% comment %}
<script src="{% static 'js/film.js' %}"></script>
{% endcomment %}
{% endblock %}