From 312dfa65ca0697cf9ba7c0570963b45271bc1856 Mon Sep 17 00:00:00 2001
From: Jan Smitka <jan.smitka@lynt.cz>
Date: Wed, 1 Nov 2023 14:48:21 +0100
Subject: [PATCH] Display video and slides in talk details

---
 program/models.py                             | 11 ++++
 static/img/icons/youtube.min.svg              |  1 +
 .../custom-components/_PC-session-detail.scss | 54 +++++++++++++++++++
 templates/program/_session_detail.html        | 35 ++++++++++++
 4 files changed, 101 insertions(+)
 create mode 100644 static/img/icons/youtube.min.svg

diff --git a/program/models.py b/program/models.py
index 43b78de..02bcb93 100644
--- a/program/models.py
+++ b/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.
diff --git a/static/img/icons/youtube.min.svg b/static/img/icons/youtube.min.svg
new file mode 100644
index 0000000..f98efd7
--- /dev/null
+++ b/static/img/icons/youtube.min.svg
@@ -0,0 +1 @@
+<svg width="159" height="110" xmlns="http://www.w3.org/2000/svg"><path d="m154 17.5c-1.82-6.73-7.07-12-13.8-13.8-9.04-3.49-96.6-5.2-122 0.1-6.73 1.82-12 7.07-13.8 13.8-4.08 17.9-4.39 56.6 0.1 74.9 1.82 6.73 7.07 12 13.8 13.8 17.9 4.12 103 4.7 122 0 6.73-1.82 12-7.07 13.8-13.8 4.35-19.5 4.66-55.8-0.1-75z" fill="#f00"/><path d="m105 55-40.8-23.4v46.8z" fill="#fff"/></svg>
diff --git a/static_src/scss/custom-components/_PC-session-detail.scss b/static_src/scss/custom-components/_PC-session-detail.scss
index cf871ea..bb47806 100644
--- a/static_src/scss/custom-components/_PC-session-detail.scss
+++ b/static_src/scss/custom-components/_PC-session-detail.scss
@@ -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;
+}
diff --git a/templates/program/_session_detail.html b/templates/program/_session_detail.html
index 61f6630..472e412 100644
--- a/templates/program/_session_detail.html
+++ b/templates/program/_session_detail.html
@@ -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 }}