Display video and slides in talk details

Author: jsmitka

program/models.py

@@ -1,5 +1,6 @@
 import datetime
 import re
+from pathlib import PurePath
 from typing import Any
 
 from django.core import validators
@@ -318,6 +319,16 @@ def video_id(self) -> str | None:
             return None
         return match.group("video_id")
 
+    @property
+    def slides_file_extension(self) -> str | None:
+        if not self.slides_file:
+            return None
+        path = PurePath(self.slides_file.name)
+        ext = path.suffix
+        if ext.startswith("."):
+            ext = ext[1:]
+        return ext
+
     def update_from_pretalx(self, pretalx_submission: dict[str, Any]) -> None:
         # Note: remember to update the PRETALX_FIELDS class variable
         # when adding/removing fields synced with pretalx.

static/img/icons/youtube.min.svg

@@ -55,3 +55,57 @@
         overflow-wrap: break-word;
     }
 }
+
+.PC-session-detail-video {
+    display: block;
+    position: relative;
+    max-width: 1280px;
+    margin: 0 auto;
+}
+
+.PC-session-detail-video-overlay {
+    @extend .text-white;
+    @extend .fw-semibold;
+    @extend .fs-4;
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    background-image: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
+
+    display: grid;
+    place-items: center;
+
+    &:hover, &:focus, &:active {
+        background-image: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
+    }
+}
+
+.PC-session-detail-video-play {
+    @extend .px-4;
+    @extend .py-3;
+    @extend .rounded-3;
+
+    background-color: rgba(0, 0, 0, 0.75);
+
+    img {
+        @extend .mb-3;
+        width: 52px;
+        height: 36px;
+
+        @include media-breakpoint-up(md) {
+            width: 130px;
+            height: 90px;
+        }
+    }
+}
+
+/* Session video has max-width of 1280px. Apply the same width to slides block to keep them aligned. */
+.PC-session-detail-slides {
+    max-width: 1280px;
+    margin-left: auto;
+    margin-right: auto;
+}

static_src/scss/custom-components/_PC-session-detail.scss

@@ -105,6 +105,41 @@ <h1>
             </div>
         {% endif %}
 
+        {% if session.video_url and session.video_image %}
+            <div class="mt-3 mb-4">
+                <a href="{{ session.video_url }}" class="PC-session-detail-video rounded-2">
+                    <img src="{{ session.video_image.url }}"
+                         alt="{{ session.title }} - talk video"
+                         class="img-fluid rounded-2"/>
+                    <div class="PC-session-detail-video-overlay rounded-2">
+                        <div class="PC-session-detail-video-play text-center">
+                            <img src="{% static "img/icons/youtube.min.svg" %}"
+                                 width="52" height="36" alt=""
+                                 class="img-fluid" /><br/>
+
+                            Play video on YouTube
+                        </div>
+                    </div>
+                </a>
+            </div>
+        {% endif %}
+
+        {% if session.slides_file or session.slides_description %}
+            <div class="PC-session-detail-slides">
+                {% if session.slides_file %}
+                    <a href="{{ session.slides_file.url }}"
+                       class="btn btn-secondary btn-sm mb-3"
+                       target="_blank">
+                        {{ session.title }} – download slides
+                        ({{ session.slides_file_extension|upper }}, {{ session.slides_file.size|filesizeformat }})
+                    </a>
+                {% endif %}
+                {% if session.slides_description %}
+                    {{ session.slides_description|markdown }}
+                {% endif %}
+            </div>
+        {% endif %}
+
         <div class="PC-multicol my-4">
             {{ session.abstract|markdown }}