From 5eef653682acadf1f8d09f0f17c374a9b26f288a Mon Sep 17 00:00:00 2001
From: Patrick Gan <patrick.gan@torchbox.com>
Date: Wed, 30 Jul 2025 15:43:50 +0800
Subject: [PATCH 01/10] Add 'wagtailmedia' package

---
 poetry.lock          | 25 ++++++++++++++++++++++---
 pyproject.toml       |  1 +
 rca/settings/base.py |  1 +
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index be51392ac..bd7ef3a18 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -1,4 +1,4 @@
-# This file is automatically @generated by Poetry 1.8.5 and should not be changed by hand.
+# This file is automatically @generated by Poetry 1.8.3 and should not be changed by hand.
 
 [[package]]
 name = "anyascii"
@@ -1391,7 +1391,7 @@ files = [
     {file = "lxml-5.3.2-cp310-cp310-musllinux_1_2_ppc64le.whl", hash = "sha256:aa837e6ee9534de8d63bc4c1249e83882a7ac22bd24523f83fad68e6ffdf41ae"},
     {file = "lxml-5.3.2-cp310-cp310-musllinux_1_2_s390x.whl", hash = "sha256:da4c9223319400b97a2acdfb10926b807e51b69eb7eb80aad4942c0516934858"},
     {file = "lxml-5.3.2-cp310-cp310-musllinux_1_2_x86_64.whl", hash = "sha256:dc0e9bdb3aa4d1de703a437576007d366b54f52c9897cae1a3716bb44fc1fc85"},
-    {file = "lxml-5.3.2-cp310-cp310-win32.whl", hash = "sha256:5f94909a1022c8ea12711db7e08752ca7cf83e5b57a87b59e8a583c5f35016ad"},
+    {file = "lxml-5.3.2-cp310-cp310-win32.win32.whl", hash = "sha256:dd755a0a78dd0b2c43f972e7b51a43be518ebc130c9f1a7c4480cf08b4385486"},
     {file = "lxml-5.3.2-cp310-cp310-win_amd64.whl", hash = "sha256:d64ea1686474074b38da13ae218d9fde0d1dc6525266976808f41ac98d9d7980"},
     {file = "lxml-5.3.2-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:9d61a7d0d208ace43986a92b111e035881c4ed45b1f5b7a270070acae8b0bfb4"},
     {file = "lxml-5.3.2-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:856dfd7eda0b75c29ac80a31a6411ca12209183e866c33faf46e77ace3ce8a79"},
@@ -3080,6 +3080,25 @@ wagtail = ">=5.2"
 [package.extras]
 testing = ["coverage (>=4.5)"]
 
+[[package]]
+name = "wagtailmedia"
+version = "0.16.0"
+description = "A Wagtail module for audio and video files."
+optional = false
+python-versions = ">=3.9"
+files = [
+    {file = "wagtailmedia-0.16.0-py3-none-any.whl", hash = "sha256:40e3adc077ed6251b9c43a7177649e8cdefa4f94828dff6f1ca3e48ba61dcdca"},
+    {file = "wagtailmedia-0.16.0.tar.gz", hash = "sha256:1f757984240822a7ddfe3eda8e58243f31a3c29935ce8014499e7e664923d4c9"},
+]
+
+[package.dependencies]
+Django = ">=4.2"
+Wagtail = ">=6.3"
+
+[package.extras]
+linting = ["pre-commit (>=4.2.0)"]
+testing = ["coverage (>=7.8.0)"]
+
 [[package]]
 name = "watchdog"
 version = "4.0.0"
@@ -3302,4 +3321,4 @@ gunicorn = ["gunicorn"]
 [metadata]
 lock-version = "2.0"
 python-versions = "~3.11"
-content-hash = "320cd060025a15a177229713e2b9db9cebe12512c8a8ea77e6e79ec0f4895bb5"
+content-hash = "c99c73b75f86ff0f4dd5ede410400f209dc712360a89a29677cf0092dd43c47b"
diff --git a/pyproject.toml b/pyproject.toml
index 69ea1e7c8..92c2c00e9 100644
--- a/pyproject.toml
+++ b/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"]
diff --git a/rca/settings/base.py b/rca/settings/base.py
index 58610f3a6..96bd5a164 100644
--- a/rca/settings/base.py
+++ b/rca/settings/base.py
@@ -109,6 +109,7 @@
     "rca.project_styleguide.apps.ProjectStyleguideConfig",
     "rest_framework",
     "corsheaders",
+    "wagtailmedia",
     "wagtail_rangefilter",
     "rangefilter",
     "wagtail_modeladmin",

From e78e9a793f8e533a95fea2fb0b8c3ae9afa915d3 Mon Sep 17 00:00:00 2001
From: Patrick Gan <patrick.gan@torchbox.com>
Date: Wed, 30 Jul 2025 23:28:38 +0800
Subject: [PATCH 02/10] Add video option to promo banner block

---
 rca/home/blocks.py                                        | 4 +++-
 .../molecules/streamfield/blocks/promo_banner_block.html  | 8 +++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/rca/home/blocks.py b/rca/home/blocks.py
index 4feac8edf..4b3942a7f 100644
--- a/rca/home/blocks.py
+++ b/rca/home/blocks.py
@@ -207,6 +207,7 @@ class Meta:
         icon = "user"
         label = "Statistics"
 
+from wagtailmedia.blocks import VideoChooserBlock
 
 class PromoBannerBlock(blocks.StructBlock):
     background_color = blocks.ChoiceBlock(
@@ -214,7 +215,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")
diff --git a/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html b/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html
index 088a55b3c..2f398928c 100644
--- a/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html
+++ b/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html
@@ -20,7 +20,13 @@ <h2 class="promo-banner__heading heading heading--one">{{ value.title }}</h2>
             {% 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' %}
+                {% 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 class="promo-banner__image">
+                        <source src="{{ value.video.url }}" type="video/{{ value.video.file_extension }}">
+                    </video>
+                {% endif %}
             </div>
         </div>
     </div>

From 8d26bd311e36f2a781e517c1ed4b7e9a89c535f9 Mon Sep 17 00:00:00 2001
From: Patrick Gan <patrick.gan@torchbox.com>
Date: Thu, 31 Jul 2025 14:14:11 +0800
Subject: [PATCH 03/10] Display video in promo banner, if selected

---
 .../streamfield/blocks/promo_banner_block.html       |  4 ++--
 rca/static_src/sass/components/_promo-banner.scss    | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html b/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html
index 2f398928c..f4f4c18cf 100644
--- a/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html
+++ b/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html
@@ -19,11 +19,11 @@ <h2 class="promo-banner__heading heading heading--one">{{ value.title }}</h2>
                 </a>
             {% endif %}
 
-            <div class="promo-banner__image-container">
+            <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 class="promo-banner__image">
+                    <video controls autoplay muted loading="lazy" preload="none" class="promo-banner__video">
                         <source src="{{ value.video.url }}" type="video/{{ value.video.file_extension }}">
                     </video>
                 {% endif %}
diff --git a/rca/static_src/sass/components/_promo-banner.scss b/rca/static_src/sass/components/_promo-banner.scss
index 952a9e106..1e22c9b17 100644
--- a/rca/static_src/sass/components/_promo-banner.scss
+++ b/rca/static_src/sass/components/_promo-banner.scss
@@ -63,18 +63,20 @@
         }
     }
 
-    &__image-container {
+    &__media-container {
         grid-column: 1 / span 2;
         order: -1;
         margin-bottom: ($gutter * 2);
 
         @include media-query(large) {
+            display: block;
             grid-column: auto;
             order: 0;
             margin-bottom: 0;
         }
 
-        #{$root}__image {
+        #{$root}__image,
+        #{$root}__video {
             @include z-index(above-gridlines);
             height: 250px;
             object-fit: cover;
@@ -86,8 +88,10 @@
             }
         }
 
-        @include media-query(large) {
-            display: block;
+        #{$root}__video {
+            @include media-query(large) {
+                max-width: 620px;
+            }
         }
     }
 

From adc292d3f4346338f6f26dde049886d4e4400903 Mon Sep 17 00:00:00 2001
From: Patrick Gan <patrick.gan@torchbox.com>
Date: Thu, 31 Jul 2025 14:38:35 +0800
Subject: [PATCH 04/10] Add validation to make sure at least an image or a
 video is added and not both

---
 rca/home/blocks.py | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/rca/home/blocks.py b/rca/home/blocks.py
index 4b3942a7f..c8a9d7ab1 100644
--- a/rca/home/blocks.py
+++ b/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
@@ -207,7 +210,6 @@ class Meta:
         icon = "user"
         label = "Statistics"
 
-from wagtailmedia.blocks import VideoChooserBlock
 
 class PromoBannerBlock(blocks.StructBlock):
     background_color = blocks.ChoiceBlock(
@@ -226,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()

From b6d5a3a640ee2bd6d0bb69de912f9b3fdc09db98 Mon Sep 17 00:00:00 2001
From: Patrick Gan <patrick.gan@torchbox.com>
Date: Mon, 4 Aug 2025 17:31:44 +0800
Subject: [PATCH 05/10] Make sure videos auto loop

---
 .../molecules/streamfield/blocks/promo_banner_block.html        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html b/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html
index f4f4c18cf..bea972029 100644
--- a/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html
+++ b/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html
@@ -23,7 +23,7 @@ <h2 class="promo-banner__heading heading heading--one">{{ value.title }}</h2>
                 {% 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 loading="lazy" preload="none" class="promo-banner__video">
+                    <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 %}

From 25f7321f0760bc33c0cd5cde8e5ac72e23035df3 Mon Sep 17 00:00:00 2001
From: Patrick Gan <patrick.gan@torchbox.com>
Date: Tue, 5 Aug 2025 15:34:08 +0800
Subject: [PATCH 06/10] Fix video overflowing on mobile issue

---
 rca/static_src/sass/components/_promo-banner.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/rca/static_src/sass/components/_promo-banner.scss b/rca/static_src/sass/components/_promo-banner.scss
index 1e22c9b17..407e34958 100644
--- a/rca/static_src/sass/components/_promo-banner.scss
+++ b/rca/static_src/sass/components/_promo-banner.scss
@@ -89,6 +89,8 @@
         }
 
         #{$root}__video {
+            max-width: 100%;
+
             @include media-query(large) {
                 max-width: 620px;
             }

From 52cbff1d84dfa54df57aa6efa9e0a7e9775dc55b Mon Sep 17 00:00:00 2001
From: Patrick Gan <patrick.gan@torchbox.com>
Date: Wed, 6 Aug 2025 10:56:03 +0800
Subject: [PATCH 07/10] Support more breakpoints in promo banner block

---
 rca/static_src/sass/components/_promo-banner.scss | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/rca/static_src/sass/components/_promo-banner.scss b/rca/static_src/sass/components/_promo-banner.scss
index 407e34958..120a831ff 100644
--- a/rca/static_src/sass/components/_promo-banner.scss
+++ b/rca/static_src/sass/components/_promo-banner.scss
@@ -68,7 +68,7 @@
         order: -1;
         margin-bottom: ($gutter * 2);
 
-        @include media-query(large) {
+        @media only screen and (min-width: 1024px) {
             display: block;
             grid-column: auto;
             order: 0;
@@ -79,19 +79,21 @@
         #{$root}__video {
             @include z-index(above-gridlines);
             height: 250px;
+            max-width: 100%;
             object-fit: cover;
 
-            @include media-query(large) {
+            @media only screen and (min-width: 1024px) {
                 bottom: 0;
                 height: calc(100% + 140px);
+                max-width: 340px;
                 position: absolute;
             }
-        }
 
-        #{$root}__video {
-            max-width: 100%;
+            @media only screen and (min-width: 1360px) {
+                max-width: 420px;
+            }
 
-            @include media-query(large) {
+            @media only screen and (min-width: 1530px) {
                 max-width: 620px;
             }
         }

From 44aef3cc9d8a11697ecf7083b6da2538e40ab60b Mon Sep 17 00:00:00 2001
From: Patrick Gan <patrick.gan@torchbox.com>
Date: Wed, 6 Aug 2025 11:42:16 +0800
Subject: [PATCH 08/10] Adjust the width a bit more

---
 rca/static_src/sass/components/_promo-banner.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/rca/static_src/sass/components/_promo-banner.scss b/rca/static_src/sass/components/_promo-banner.scss
index 120a831ff..2cc34a969 100644
--- a/rca/static_src/sass/components/_promo-banner.scss
+++ b/rca/static_src/sass/components/_promo-banner.scss
@@ -85,12 +85,12 @@
             @media only screen and (min-width: 1024px) {
                 bottom: 0;
                 height: calc(100% + 140px);
-                max-width: 340px;
+                max-width: 380px;
                 position: absolute;
             }
 
             @media only screen and (min-width: 1360px) {
-                max-width: 420px;
+                max-width: 470px;
             }
 
             @media only screen and (min-width: 1530px) {

From e81f66c3199e9950b804bfee061f70602098c0fa Mon Sep 17 00:00:00 2001
From: Patrick Gan <patrick.gan@torchbox.com>
Date: Thu, 7 Aug 2025 18:09:02 +0800
Subject: [PATCH 09/10] Adjust width of the media in breakpoints

---
 rca/static_src/sass/components/_promo-banner.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/rca/static_src/sass/components/_promo-banner.scss b/rca/static_src/sass/components/_promo-banner.scss
index 2cc34a969..a1e9e56c9 100644
--- a/rca/static_src/sass/components/_promo-banner.scss
+++ b/rca/static_src/sass/components/_promo-banner.scss
@@ -85,14 +85,18 @@
             @media only screen and (min-width: 1024px) {
                 bottom: 0;
                 height: calc(100% + 140px);
-                max-width: 380px;
+                max-width: 412px;
                 position: absolute;
             }
 
-            @media only screen and (min-width: 1360px) {
+            @media only screen and (min-width: 1180px) {
                 max-width: 470px;
             }
 
+            @media only screen and (min-width: 1300px) {
+                max-width: 519px;
+            }
+
             @media only screen and (min-width: 1530px) {
                 max-width: 620px;
             }

From 7cc277e48f97fd9d3d3397f85f6fbd2902301e4e Mon Sep 17 00:00:00 2001
From: Patrick Gan <patrick.gan@torchbox.com>
Date: Fri, 15 Aug 2025 09:20:47 +0800
Subject: [PATCH 10/10] Fix issue with promo banner image/video not being
 aligned properly

---
 .../blocks/promo_banner_block.html            |  2 +-
 .../sass/components/_promo-banner.scss        | 36 +++++++++----------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html b/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html
index bea972029..6f1b557d1 100644
--- a/rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/promo_banner_block.html
+++ b/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>
diff --git a/rca/static_src/sass/components/_promo-banner.scss b/rca/static_src/sass/components/_promo-banner.scss
index a1e9e56c9..1c83cb83d 100644
--- a/rca/static_src/sass/components/_promo-banner.scss
+++ b/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);
@@ -68,11 +78,12 @@
         order: -1;
         margin-bottom: ($gutter * 2);
 
-        @media only screen and (min-width: 1024px) {
-            display: block;
-            grid-column: auto;
+        @include media-query(large) {
+            display: grid;
+            grid-column: 4 / span 2;
+            margin-bottom: -($gutter * 3.5);
             order: 0;
-            margin-bottom: 0;
+            position: relative;
         }
 
         #{$root}__image,
@@ -82,24 +93,11 @@
             max-width: 100%;
             object-fit: cover;
 
-            @media only screen and (min-width: 1024px) {
+            @include media-query(large) {
                 bottom: 0;
-                height: calc(100% + 140px);
-                max-width: 412px;
+                height: calc(100% + 280px);
                 position: absolute;
             }
-
-            @media only screen and (min-width: 1180px) {
-                max-width: 470px;
-            }
-
-            @media only screen and (min-width: 1300px) {
-                max-width: 519px;
-            }
-
-            @media only screen and (min-width: 1530px) {
-                max-width: 620px;
-            }
         }
     }