{% 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://njp.ma{{ film.get_absolute_url }}"/> <meta property="og:site_name" content="njp.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="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 %}