From d7b58858841bea26e761f799067b8b2a7fb77106 Mon Sep 17 00:00:00 2001
From: SofianeLasri <alasri250@gmail.com>
Date: Tue, 13 Jun 2023 23:46:15 +0200
Subject: [PATCH] =?UTF-8?q?Ajout=20des=20vid=C3=A9os=20dans=20les=20types?=
=?UTF-8?q?=20de=20courses.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
WSR/models.py | 1 +
WSR/static/scss/components.scss | 2 +-
WSR/templates/race-types.html | 49 +++++++++++++++++++++++++++++++--
3 files changed, 49 insertions(+), 3 deletions(-)
diff --git a/WSR/models.py b/WSR/models.py
index 35de010..3933e72 100644
--- a/WSR/models.py
+++ b/WSR/models.py
@@ -34,6 +34,7 @@ class RaceType(models.Model):
description = models.TextField(default="", blank=True)
icon = models.ImageField(upload_to='racetypes', default="", blank=True, verbose_name="Logo d'illustration")
image = models.ImageField(upload_to='racetypes', default="", blank=True, verbose_name="Image d'illustration")
+ video = models.FileField(upload_to='racetypes', default="", blank=True, verbose_name="Vidéo de démonstration")
def __str__(self):
return self.name
diff --git a/WSR/static/scss/components.scss b/WSR/static/scss/components.scss
index 0595905..d9ba4d2 100644
--- a/WSR/static/scss/components.scss
+++ b/WSR/static/scss/components.scss
@@ -282,7 +282,7 @@ footer {
margin-bottom: map-get($spacers, 2);
width: 100%;
- img {
+ img, video {
width: inherit;
}
}
diff --git a/WSR/templates/race-types.html b/WSR/templates/race-types.html
index 7fac1ee..6984d10 100644
--- a/WSR/templates/race-types.html
+++ b/WSR/templates/race-types.html
@@ -11,8 +11,8 @@
<div class="race-types-container">
{% for epreuve in epreuves %}
- <div class="card">
- <div class="header">
+ <div class="card" id="type-{{ epreuve.id }}">
+ <div class="header" data-video-url="{% get_media_prefix %}{{ epreuve.video }}">
<img src="{% get_media_prefix %}{{ epreuve.image }}" alt="{{ epreuve.name }}">
</div>
<div class="content">
@@ -31,4 +31,49 @@
</div>
</div>
</div>
+{% endblock %}
+{% block javascripts %}
+ <script type="text/javascript">
+ // Sélectionne tous les éléments de classe 'card' dont l'ID commence par 'type-'
+ const cards = document.querySelectorAll('.card[id^="type-"]');
+
+ cards.forEach((card) => {
+ let timeoutId;
+ let originalContent;
+
+ card.addEventListener('mouseenter', () => {
+ const header = card.querySelector('.header');
+ const videoUrl = header.dataset.videoUrl;
+
+ if (videoUrl && !header.querySelector('video')) {
+ timeoutId = setTimeout(() => {
+ const video = document.createElement('video');
+ video.src = videoUrl;
+ video.controls = false;
+ video.autoplay = true;
+ video.muted = true;
+ video.loop = true;
+
+ // Sauvegarde le contenu d'origine du header pour pouvoir le restaurer plus tard
+ originalContent = header.innerHTML;
+
+ header.innerHTML = '';
+ header.appendChild(video);
+ }, 1000);
+ }
+ });
+
+ card.addEventListener('mouseleave', () => {
+ clearTimeout(timeoutId);
+
+ const header = card.querySelector('.header');
+ const video = header.querySelector('video');
+
+ if (video) {
+ // Supprime la vidéo et réaffiche l'image d'origine
+ header.innerHTML = originalContent;
+ }
+ });
+ });
+ </script>
{% endblock %}
\ No newline at end of file
--
GitLab