💚 Install libmagic in CI

apps/participation/templates/participation/participation_detail.html

@@ -0,0 +1,61 @@
+{% extends "base.html" %}
+
+{% load i18n %}
+
+{% block content %}
+{% trans "any" as any %}
+<div class="row mt-4">
+    <div class="col-xl-4">
+    <div class="card bg-light shadow">
+        <div class="card-header text-center">
+            <h4>{% trans "Participation of team" %} {{ participation.team.name }} ({{ participation.team.trigram }})</h4>
+        </div>
+        <div class="card-body">
+            <dl class="row">
+                <dt class="col-sm-6 text-right">{% trans "Chosen problem:" %}</dt>
+                <dd class="col-sm-6">{{ participation.get_problem_display }}</dd>
+            </dl>
+        </div>
+        <div class="card-footer text-center">
+        </div>
+    </div>
+    </div>
+
+    <div class="col-xl-8">
+    <div class="card bg-light shadow">
+        <div class="card-header text-center">
+            <h4>{% trans "Participation of team" %} {{ participation.team.name }} ({{ participation.team.trigram }})</h4>
+        </div>
+        <div class="card-body">
+            {% trans "No video sent" as novideo %}
+            {% trans "Video link:" %} <a href="{{ participation.solution.link|default:"#" }}" target="_blank">{{ participation.solution.link|default:novideo }}</a>
+            <button class="btn btn-primary" data-toggle="modal" data-target="#uploadVideoModal">{% trans "Upload" %}</button>
+            {% if participation.solution.platform == "youtube" %}
+                {% include "participation/youtube_iframe.html" with youtube_code=participation.solution.youtube_code %}
+            {% else %}
+                <div class="alert alert-danger">
+                {% trans "This video platform is not supported yet." %}
+                </div>
+            {% endif %}
+        </div>
+    </div>
+    </div>
+</div>
+
+{% trans "Upload video" as modal_title %}
+{% trans "Upload" as modal_button %}
+{% url "participation:upload_video" pk=participation.solution_id as modal_action %}
+{% include "base_modal.html" with modal_id="uploadVideo" %}
+{% endblock %}
+
+{% block extrajavascript %}
+    <script>
+        $(document).ready(function() {
+            $('button[data-target="#uploadVideoModal"]').click(function() {
+                let modalBody = $("#uploadVideoModal div.modal-body");
+                if (!modalBody.html().trim())
+                    modalBody.load("{% url "participation:upload_video" pk=participation.solution_id %} #form-content");
+            });
+        });
+    </script>
+{% endblock %}

apps/participation/templates/participation/upload_video.html

@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+
+{% load crispy_forms_filters i18n %}
+
+{% block content %}
+    <form method="post">
+        <div id="form-content">
+            {% csrf_token %}
+            {{ form|crispy }}
+        </div>
+        <button class="btn btn-success" type="submit">{% trans "Upload" %}</button>
+    </form>
+{% endblock content %}
+

apps/participation/templates/participation/youtube_iframe.html

@@ -0,0 +1,8 @@
+<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
+    <iframe src="https://www.youtube.com/embed/{{ youtube_code }}"
+            frameborder="0"
+            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen>
+    </iframe>
+</div>