Add teaser + media files

clubhaus/homepage/templates/homepage/base.html

@@ -39,6 +39,8 @@
             <nav class="nav nav-masthead justify-content-center float-md-end">
                 <a class="nav-link fw-bold py-1 px-0 {% if request.path == '/' %}active{% endif %}"
                    href="{% url 'index' %}">Home</a>
+                <a class="nav-link fw-bold py-1 px-0 {% if 'teaser' in request.path %}active{% endif %}"
+                   href="{% url 'teaser' %}">Teaser</a>
                 <a class="nav-link fw-bold py-1 px-0 {% if 'event' in request.path %}active{% endif %}"
                    href="{% url 'events' %}">Event</a>
                 <a class="nav-link fw-bold py-1 px-0 {% if 'tobacco' in request.path %}active{% endif %}"

clubhaus/homepage/templates/homepage/teaser.html

@@ -0,0 +1,49 @@
+{% extends 'homepage/base.html' %}
+{% load static %}
+
+{% block extra_header_block %}
+    <style>
+        video {
+            width: 100%;
+            height: auto;
+            aspect-ratio: 16 / 9;
+        }
+    </style>
+    <link rel="stylesheet" href="{% static 'homepage/assets/plyr/plyr.3.7.2.css' %}"/>
+{% endblock %}
+
+{% block extra_scripts_block %}
+    <script src="{% static 'homepage/assets/plyr/plyr.polyfilled.3.7.2.js' %}"></script>
+    <script>
+        const player = new Plyr('#trailerVideo', {
+            title: "Teaser 2022",
+            settings: ['quality']
+        });
+    </script>
+{% endblock %}
+
+{% block main %}
+    <main class="container d-flex flex-column flex-grow-1 text-white mt-5" style="max-width: 52rem">
+        <h1 class="fst-italic mx-auto">Teaser 2022</h1>
+        <video id="trailerVideo" class="mx-auto"
+               controls
+               preload="none"
+               poster="{% static 'homepage/vid/teaser-2022/thumb.jpg' %}">
+            <source
+              src="{% static 'homepage/vid/teaser-2022/teaser-480p.mp4' %}"
+              type="video/mp4"
+              size="480"
+            />
+            <source
+              src="{% static 'homepage/vid/teaser-2022/teaser-720p.mp4' %}"
+              type="video/mp4"
+              size="720"
+            />
+            <source
+              src="{% static 'homepage/vid/teaser-2022/teaser-1080p.mp4' %}"
+              type="video/mp4"
+              size="1080"
+            />
+        </video>
+    </main>
+{% endblock %}

clubhaus/homepage/urls.py

@@ -7,6 +7,7 @@ urlpatterns = [
     path('event', views.events, name='events'),
     path('tobacco', views.tobacco, name='tobacco'),
     path('voting', views.voting, name='voting'),
+    path('teaser', views.teaser, name='teaser'),
     path('law/impressum', views.impressum, name='impressum'),
     path('law/cookies-policy', views.cookies, name='cookies'),
 ]

clubhaus/homepage/views.py

@@ -30,6 +30,10 @@ def tobacco(request: HttpRequest) -> django.http.HttpResponse:
     return render(request, 'homepage/tobacco.html', context)
 
 
+def teaser(request: HttpRequest) -> django.http.HttpResponse:
+    return render(request, 'homepage/teaser.html')
+
+
 def events(request: HttpRequest) -> django.http.HttpResponse:
     next_events = ClubhausEvent.objects.filter(active=True).order_by('-id')
     if len(next_events) == 1: