R1-240: BE/FE - Home Page - Promo Banner Video Option

pyproject.toml

@@ -47,6 +47,7 @@ urllib3 = "^2.3.0"
 whitenoise = "^6.9.0"
 social-auth-app-django = "^5.4.3"
 django-xff = "^1.5.0"
+wagtailmedia = "^0.16.0"
 
 [tool.poetry.extras]
 gunicorn = ["gunicorn"]

rca/home/blocks.py

@@ -1,8 +1,11 @@
 from itertools import chain
 
+from django.forms.utils import ErrorList
 from django.utils import timezone
 from wagtail import blocks
+from wagtail.blocks.struct_block import StructBlockValidationError
 from wagtail.images.blocks import ImageChooserBlock
+from wagtailmedia.blocks import VideoChooserBlock
 
 from rca.editorial.models import EditorialPage
 from rca.events.models import EventDetailPage
@@ -214,7 +217,8 @@ class PromoBannerBlock(blocks.StructBlock):
         default="light",
         help_text="Select the background color for this promo banner",
     )
-    image = ImageChooserBlock()
+    image = ImageChooserBlock(required=False)
+    video = VideoChooserBlock(required=False)
     title = blocks.CharBlock()
     strapline = blocks.CharBlock()
     cta = LinkBlock(label="Call to Action")
@@ -224,6 +228,23 @@ class Meta:
         icon = "image"
         label = "Promo Banner"
 
+    def clean(self, value):
+        value = super().clean(value)
+        errors = {}
+
+        if value["image"] and value["video"]:
+            error = ["Please select either an image or a video, but not both."]
+            errors["image"] = errors["video"] = ErrorList(error)
+
+        if not value["image"] and not value["video"]:
+            error = ["Please select either an image or a video."]
+            errors["image"] = errors["video"] = ErrorList(error)
+
+        if errors:
+            raise StructBlockValidationError(errors)
+
+        return value
+
 
 class HomePageBodyBlock(blocks.StreamBlock):
     body_section = BodySectionBlock()

rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html

@@ -6,7 +6,7 @@
 {# Match the background color of the previous section if it exists, otherwise use the value's background color #}
 <section class="section section--top-space bg bg--{% if previous_section_bg %}{{ previous_section_bg }}{% elif value.background_color == "dark" %}light{% else %}dark{% endif %}">
     <div class="promo-banner bg bg--{{ value.background_color }}">
-        <div class="grid">
+        <div class="promo-banner__grid">
             <div class="promo-banner__intro">
                 <h2 class="promo-banner__heading heading heading--one">{{ value.title }}</h2>
                 <p class="promo-banner__text heading heading--five">{{ value.strapline }}</p>
@@ -19,8 +19,14 @@ <h2 class="promo-banner__heading heading heading--one">{{ value.title }}</h2>
                 </a>
             {% endif %}
 
-            <div class="promo-banner__image-container">
-                {% include "patterns/atoms/image/image--lazyload.html" with image_small=image_small width=580 height=607 image_large=image_large classList='promo-banner__image' %}
+            <div class="promo-banner__media-container">
+                {% if value.image %}
+                    {% include "patterns/atoms/image/image--lazyload.html" with image_small=image_small width=580 height=607 image_large=image_large classList='promo-banner__image' %}
+                {% else %}
+                    <video controls autoplay muted loop loading="lazy" preload="none" class="promo-banner__video">
+                        <source src="{{ value.video.url }}" type="video/{{ value.video.file_extension }}">
+                    </video>
+                {% endif %}
             </div>
         </div>
     </div>

rca/settings/base.py

@@ -109,6 +109,7 @@
     "rca.project_styleguide.apps.ProjectStyleguideConfig",
     "rest_framework",
     "corsheaders",
+    "wagtailmedia",
     "wagtail_rangefilter",
     "rangefilter",
     "wagtail_modeladmin",

rca/static_src/sass/components/_promo-banner.scss

@@ -10,11 +10,21 @@
     }
 
     @include media-query(large) {
+        width: 100%;
         min-height: ($gutter * 20);
         padding-top: ($gutter * 7);
         padding-bottom: ($gutter * 3.5);
     }
 
+    &__grid {
+        @include grid-layout();
+
+        @include media-query(large) {
+            padding: 0;
+            grid-template-columns: repeat(5, 1fr);
+        }
+    }
+
     &__intro {
         grid-column: 1 / span 2;
         margin-bottom: ($gutter * 2);
@@ -63,32 +73,32 @@
         }
     }
 
-    &__image-container {
+    &__media-container {
         grid-column: 1 / span 2;
         order: -1;
         margin-bottom: ($gutter * 2);
 
         @include media-query(large) {
-            grid-column: auto;
+            display: grid;
+            grid-column: 4 / span 2;
+            margin-bottom: -($gutter * 3.5);
             order: 0;
-            margin-bottom: 0;
+            position: relative;
         }
 
-        #{$root}__image {
+        #{$root}__image,
+        #{$root}__video {
             @include z-index(above-gridlines);
             height: 250px;
+            max-width: 100%;
             object-fit: cover;
 
             @include media-query(large) {
                 bottom: 0;
-                height: calc(100% + 140px);
+                height: calc(100% + 280px);
                 position: absolute;
             }
         }
-
-        @include media-query(large) {
-            display: block;
-        }
     }
 
     &.bg--dark {