From 652255b9d99699e70222cf65c1d410d556bd3760 Mon Sep 17 00:00:00 2001
From: Sharmaine Lim <amanda.lim@torchbox.com>
Date: Mon, 4 Oct 2021 18:12:54 +0800
Subject: [PATCH 01/40] Create integration branch for frontend and backend


From 2f2e68c9be09657fea706dcb2e98e52121f13d45 Mon Sep 17 00:00:00 2001
From: Sharmaine Lim <amanda.lim@torchbox.com>
Date: Wed, 6 Oct 2021 17:18:30 +0800
Subject: [PATCH 02/40] Bump wagtailmedia to 0.8.0

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 3b8cef0631..b6d51e0d12 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -258,7 +258,7 @@ wagtail-localize-git==0.9.3
     # via -r requirements.in
 wagtail-metadata==3.4.0
     # via -r requirements.in
-wagtailmedia==0.7.1
+wagtailmedia==0.8.0
     # via -r requirements.in
 webencodings==0.5.1
     # via html5lib

From 69afb2213a3095fd9abec7661e4f86c331478631 Mon Sep 17 00:00:00 2001
From: Sharmaine Lim <amanda.lim@torchbox.com>
Date: Wed, 6 Oct 2021 17:21:23 +0800
Subject: [PATCH 03/40] Add EmbeddedVideoBlock

---
 .../pagemodels/customblocks/__init__.py       |  3 ++-
 .../pagemodels/customblocks/video_block.py    |  5 ++++
 .../blocks/embedded_video_block.html          | 25 +++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html

diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
index 9c2c7606f4..9625a2050d 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
@@ -20,7 +20,7 @@
 from .typeform_block import TypeformBlock
 from .quote_block import QuoteBlock
 from .single_quote_block import SingleQuoteBlock
-from .video_block import VideoBlock
+from .video_block import EmbeddedVideoBlock, VideoBlock
 from .youtube_regret_block import YoutubeRegretBlock
 from .articles import ArticleRichText, ArticleDoubleImageBlock, ArticleFullWidthImageBlock, ArticleImageBlock
 from .dear_internet_letter_block import DearInternetLetterBlock
@@ -40,6 +40,7 @@
     CardGrid,
     CardGridBlock,
     DearInternetLetterBlock,
+    EmbeddedVideoBlock,
     iFrameBlock,
     ImageBlock,
     ImageGrid,
diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py
index b9efc2d339..ef55c53117 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py
@@ -10,6 +10,11 @@ def __init__(self, *args, **kwargs):
         )
 
 
+class EmbeddedVideoBlock(blocks.URLBlock):
+    class Meta:
+        template = 'wagtailpages/blocks/embedded_video_block.html'
+
+
 class VideoBlock(blocks.StructBlock):
     url = blocks.CharBlock(
         help_text='For YouTube: go to your YouTube video and click “Share,” '
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html
new file mode 100644
index 0000000000..34eb400ad9
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html
@@ -0,0 +1,25 @@
+{% extends "./base_streamfield_block.html" %}
+{% load wagtailcore_tags %}
+
+{% block block_row_classes %}
+no-gutters
+{% endblock %}
+
+{% block main_block_class %}
+streamfield-content
+full-width
+{% endblock %}
+
+{% block block_content %}
+<div class="my-2">
+  <div class="embed-responsive embed-responsive-16by9 d-print-none">
+    <iframe
+      src="{{ value }}"
+      frameborder="0"
+      class="embed-responsive-item"
+      allow="autoplay; encrypted-media"
+      allowfullscreen>
+    </iframe>
+  </div>
+</div>
+{% endblock %}

From 439e59ae512f1d24ecd080654b3f81cb9f8073ed Mon Sep 17 00:00:00 2001
From: Sharmaine Lim <amanda.lim@torchbox.com>
Date: Wed, 6 Oct 2021 17:29:25 +0800
Subject: [PATCH 04/40] Add WagtailVideoChooserBlock

---
 .../pagemodels/customblocks/__init__.py       |  3 ++-
 .../pagemodels/customblocks/video_block.py    |  8 ++++++
 .../blocks/wagtail_video_block.html           | 25 +++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/wagtail_video_block.html

diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
index 9625a2050d..218ede4f82 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
@@ -20,7 +20,7 @@
 from .typeform_block import TypeformBlock
 from .quote_block import QuoteBlock
 from .single_quote_block import SingleQuoteBlock
-from .video_block import EmbeddedVideoBlock, VideoBlock
+from .video_block import EmbeddedVideoBlock, VideoBlock, WagtailVideoChooserBlock
 from .youtube_regret_block import YoutubeRegretBlock
 from .articles import ArticleRichText, ArticleDoubleImageBlock, ArticleFullWidthImageBlock, ArticleImageBlock
 from .dear_internet_letter_block import DearInternetLetterBlock
@@ -58,5 +58,6 @@
     RecentBlogEntries,
     TypeformBlock,
     VideoBlock,
+    WagtailVideoChooserBlock,
     YoutubeRegretBlock,
 ]
diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py
index ef55c53117..e1f7adeeb2 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py
@@ -1,6 +1,8 @@
 from django import forms
 from wagtail.core import blocks
 
+from wagtailmedia import blocks as wagtailmedia_blocks
+
 
 class RadioSelectBlock(blocks.ChoiceBlock):
     def __init__(self, *args, **kwargs):
@@ -42,3 +44,9 @@ class VideoBlock(blocks.StructBlock):
 
     class Meta:
         template = 'wagtailpages/blocks/video_block.html'
+
+
+class WagtailVideoChooserBlock(wagtailmedia_blocks.VideoChooserBlock):
+    class Meta:
+        icon = "media"
+        template = 'wagtailpages/blocks/wagtail_video_block.html'
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/wagtail_video_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/wagtail_video_block.html
new file mode 100644
index 0000000000..6e1c536ff6
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/wagtail_video_block.html
@@ -0,0 +1,25 @@
+{% extends "./base_streamfield_block.html" %}
+{% load wagtailcore_tags %}
+
+{% block block_row_classes %}
+no-gutters
+{% endblock %}
+
+{% block main_block_class %}
+streamfield-content
+{% endblock %}
+
+{% block block_content %}
+<video controls>
+  {% for source in value.sources %}
+  <source
+    {% for attr_key, attr_value in source.items %}
+    {{ attr_key }}="{{ attr_value}}"
+    {% endfor %}
+  >
+  {% endfor %}
+
+  {# Fallback #}
+  <p>Your browser does not support the video element.</p>
+</video>
+{% endblock %}

From d66cf8c02d0f5680d04105c2a2ece62ab46b8950 Mon Sep 17 00:00:00 2001
From: Sharmaine Lim <amanda.lim@torchbox.com>
Date: Wed, 6 Oct 2021 17:30:41 +0800
Subject: [PATCH 05/40] Add BannerCarouselSlideBlock

---
 .../wagtailpages/pagemodels/customblocks/__init__.py      | 2 ++
 .../pagemodels/customblocks/banner_carousel.py            | 8 ++++++++
 2 files changed, 10 insertions(+)
 create mode 100644 network-api/networkapi/wagtailpages/pagemodels/customblocks/banner_carousel.py

diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
index 218ede4f82..90a1b85a24 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
@@ -5,6 +5,7 @@
 from .blog_set_block import BlogSetBlock
 from .bootstrap_spacer_block import BootstrapSpacerBlock
 from .card_grid import CardGrid, CardGridBlock
+from .banner_carousel import BannerCarouselSlideBlock
 from .iframe_block import iFrameBlock
 from .image_block import ImageBlock
 from .image_grid import ImageGrid, ImageGridBlock
@@ -35,6 +36,7 @@
     ArticleFullWidthImageBlock,
     ArticleRichText,
     AudioBlock,
+    BannerCarouselSlideBlock,
     BlogSetBlock,
     BootstrapSpacerBlock,
     CardGrid,
diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/banner_carousel.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/banner_carousel.py
new file mode 100644
index 0000000000..97bb1f7495
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/pagemodels/customblocks/banner_carousel.py
@@ -0,0 +1,8 @@
+from wagtail.core import blocks
+from wagtail.images.blocks import ImageChooserBlock
+
+
+class BannerCarouselSlideBlock(blocks.StructBlock):
+    image = ImageChooserBlock()
+    heading = blocks.CharBlock(required=False)
+    description = blocks.CharBlock(required=False)

From c09a705fd999a5e8cb7674a48dddc148a17b1394 Mon Sep 17 00:00:00 2001
From: Sharmaine Lim <amanda.lim@torchbox.com>
Date: Wed, 6 Oct 2021 17:32:14 +0800
Subject: [PATCH 06/40] Set new banner_video_type 'featured' instead of
 'hardcoded'

---
 network-api/networkapi/mozfest/models.py | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/network-api/networkapi/mozfest/models.py b/network-api/networkapi/mozfest/models.py
index ad8ae64977..c38e8e91a5 100644
--- a/network-api/networkapi/mozfest/models.py
+++ b/network-api/networkapi/mozfest/models.py
@@ -108,7 +108,7 @@ class MozfestHomepage(MozfestPrimaryPage):
     """
 
     #  this tells the templates to load a hardcoded, pre-defined video in the banner background
-    banner_video_type = "hardcoded"
+    banner_video_type = "featured"
 
     cta_button_label = models.CharField(
         max_length=250,
@@ -135,6 +135,7 @@ class MozfestHomepage(MozfestPrimaryPage):
         help_text='A banner paragraph specific to the homepage'
     )
 
+    # For banner_video_type == 'hardcoded'
     banner_video_url = models.URLField(
         max_length=2048,
         blank=True,
@@ -166,6 +167,15 @@ class MozfestHomepage(MozfestPrimaryPage):
             if field.field_name not in
             ['banner', 'header', 'intro', 'banner_guide_text', 'banner_video_url']
         ]
+    elif banner_video_type == "featured":
+        # Hide all the panels that aren't relevant for the video banner version of the MozFest Homepage
+        content_panels = [
+            field for field in all_panels
+            if field.field_name not in [
+                'banner', 'banner_guide_text', 'banner_video_url', 'cta_button_destination',
+                'cta_button_label', 'header', 'hero_image', 'intro',
+            ]
+        ]
     else:
         content_panels = all_panels
 

From 1ca62ce47c335eef67d1d69cbe4795b052067eba Mon Sep 17 00:00:00 2001
From: Sharmaine Lim <amanda.lim@torchbox.com>
Date: Wed, 6 Oct 2021 17:33:33 +0800
Subject: [PATCH 07/40] Add banner_carousel and banner_video to MozfestHomepage
 model

---
 network-api/networkapi/mozfest/models.py | 38 ++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/network-api/networkapi/mozfest/models.py b/network-api/networkapi/mozfest/models.py
index c38e8e91a5..ffb953c8a4 100644
--- a/network-api/networkapi/mozfest/models.py
+++ b/network-api/networkapi/mozfest/models.py
@@ -6,7 +6,7 @@
 from wagtail.snippets.edit_handlers import SnippetChooserPanel
 from wagtail_localize.fields import SynchronizedField, TranslatableField
 
-
+from networkapi.wagtailpages.pagemodels import customblocks
 from networkapi.wagtailpages.utils import (
     set_main_site_nav_information,
     get_page_tree_information
@@ -142,6 +142,34 @@ class MozfestHomepage(MozfestPrimaryPage):
         help_text='The video to play when users click "watch video"'
     )
 
+    # For banner_video_type == 'featured'
+    banner_carousel = StreamField(
+        [
+            ('slide', customblocks.BannerCarouselSlideBlock()),
+        ],
+        max_num=3,
+        min_num=3,
+        null=True,
+    )
+
+    # For banner_video_type == 'featured'
+    banner_video = StreamField(
+        [
+            ('CMS_video', customblocks.WagtailVideoChooserBlock()),
+            ('video_url', customblocks.EmbeddedVideoBlock(
+                help_text='For YouTube: go to your YouTube video and click “Share,” '
+                          'then “Embed,” and then copy and paste the provided URL only. '
+                          'For example: https://www.youtube.com/embed/3FIVXBawyQw<br/>'
+                          'For Vimeo: follow similar steps to grab the embed URL. '
+                          'For example: https://player.vimeo.com/video/9004979'
+            )),
+        ],
+        blank=True,
+        help_text='The video to play when users click "watch video"',
+        max_num=1,
+        null=True,
+    )
+
     subpage_types = [
         'MozfestPrimaryPage',
         'MozfestHomepage',
@@ -156,16 +184,20 @@ class MozfestHomepage(MozfestPrimaryPage):
         FieldPanel('cta_button_label'),
         FieldPanel('cta_button_destination'),
         FieldPanel('banner_heading'),
+        StreamFieldPanel('banner_carousel'),
         FieldPanel('banner_guide_text'),
         FieldPanel('banner_video_url'),
+        StreamFieldPanel('banner_video'),
     ] + parent_panels[n:]
 
     if banner_video_type == "hardcoded":
         # Hide all the panels that aren't relevant for the video banner version of the MozFest Homepage
         content_panels = [
             field for field in all_panels
-            if field.field_name not in
-            ['banner', 'header', 'intro', 'banner_guide_text', 'banner_video_url']
+            if field.field_name not in [
+                'banner', 'header', 'intro', 'banner_carousel', 'banner_guide_text',
+                'banner_video', 'banner_video_url',
+            ]
         ]
     elif banner_video_type == "featured":
         # Hide all the panels that aren't relevant for the video banner version of the MozFest Homepage

From 28f4050a5d3ce9b0be8aab8add1d47f3ea50e62d Mon Sep 17 00:00:00 2001
From: Sharmaine Lim <amanda.lim@torchbox.com>
Date: Wed, 6 Oct 2021 17:34:51 +0800
Subject: [PATCH 08/40] Add new banner_video_type 'featured' in HTML templates

---
 .../templates/fragments/hero/large.html       | 12 ++++++++
 .../templates/partials/homepage_banner.html   | 30 +++++++++++++++++--
 .../templates/partials/primary_heroguts.html  |  8 ++++-
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/large.html b/network-api/networkapi/mozfest/templates/fragments/hero/large.html
index c31b6f12a2..eef9710d1f 100644
--- a/network-api/networkapi/mozfest/templates/fragments/hero/large.html
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/large.html
@@ -25,6 +25,18 @@
       </div>
 
     </div>
+  {% elif banner_video_type == "featured" %}
+    <ul>
+    {% for slide_block in page.specific.banner_carousel %}
+      {% with slide=slide_block.value %}
+      <li>
+        {% image slide.image original %}
+        <h2>{{ slide.heading }}</h2>
+        <p>{{ slide.description }}</p>
+      </li>
+      {% endwith %}
+    {% endfor %}
+    </ul>
   {% else %}
     {% with banner=page.specific.get_banner %}
     {% if banner %}
diff --git a/network-api/networkapi/mozfest/templates/partials/homepage_banner.html b/network-api/networkapi/mozfest/templates/partials/homepage_banner.html
index b1f148063d..391f22ded2 100644
--- a/network-api/networkapi/mozfest/templates/partials/homepage_banner.html
+++ b/network-api/networkapi/mozfest/templates/partials/homepage_banner.html
@@ -1,10 +1,36 @@
-{% load i18n %}
+{% load i18n wagtailimages_tags %}
 
 <div class="homepage-banner-content container">
   <div class="row">
     <div class="col-10 col-lg-8 dark-theme">
       <h1 class="h1-heading">{{ page.banner_heading }}</h1>
-      {% if banner_video_type != "hardcoded" %}
+      {% if banner_video_type == "featured" %}
+        {% if page.banner_video %}
+        {# TODO Scroll to banner_video #}
+        <button class="btn btn-primary" id="mozfest-home-watch-video-button">{% trans "Watch last year’s recap video" %}</button>
+        {% endif %}
+        {% if page.banner_carousel %}
+        <ul>
+        {% for slide_block in page.specific.banner_carousel %}
+          {% with slide=slide_block.value %}
+          <li>
+            {% comment %}
+            {# Prints an image as <img src={url} width={original_width} height={original_height}> alt={alt_text} #}
+            {% image slide.image original %}
+            {% endcomment %}
+
+            {# Gets info for an image resized to 200 x 100 #}
+            {% image slide.image fill-200x100 as img %}
+            <img src={{ img.url }} width={{ img.width }} height={{ img.height }} alt={{ img.alt }}>
+
+            <h2>Heading: {{ slide.heading }}</h2>
+            <p>Description: {{ slide.description }}</p>
+          </li>
+          {% endwith %}
+        {% endfor %}
+        </ul>
+        {% endif %}
+      {% elif banner_video_type != "hardcoded" %}
         <p class="body-large">{{ page.banner_guide_text }}</p>
         {% if page.banner_video_url %}
         <a class="btn btn-primary" href="{{ page.banner_video_url }}" target="_blank" id="mozfest-home-watch-video-button">{% trans "Watch Video" %}</a>
diff --git a/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html b/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
index f08bd47100..e77eb19d80 100644
--- a/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
+++ b/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
@@ -14,7 +14,13 @@
   <div class="container">
     <div class="row cutout-wrapper-row">
       <div class="cutout col-12 pt-4">
-        {% if banner_video_type != "hardcoded" %}
+        {% if banner_video_type == "featured" %}
+          {% if page.banner_video %}
+          {# See embedded_video_block.html and wagtail_video_block.html #}
+          {% include_block page.banner_video %}
+          {% endif %}
+          <h1 class="h2-heading mb-0">{% if page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
+        {% elif banner_video_type != "hardcoded" %}
           <h1 class="h2-heading mb-0">{% if page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
           {% if page.intro %}
           <div class="body-large mt-3 mb-0">{{ page.intro | richtext }}</div>

From 28a0aa48b4d5703be48bff239f55b0a1b78f62b4 Mon Sep 17 00:00:00 2001
From: Sharmaine Lim <amanda.lim@torchbox.com>
Date: Wed, 6 Oct 2021 21:04:49 +0800
Subject: [PATCH 09/40] Add faker for MozfestHomepage carousel

---
 network-api/networkapi/mozfest/factory.py             |  2 ++
 .../networkapi/utility/faker/streamfield_provider.py  | 11 ++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/network-api/networkapi/mozfest/factory.py b/network-api/networkapi/mozfest/factory.py
index 86332a3f0a..79a9d9ae88 100644
--- a/network-api/networkapi/mozfest/factory.py
+++ b/network-api/networkapi/mozfest/factory.py
@@ -53,6 +53,8 @@ class Meta:
     banner_video_url = Faker('url')
     banner_heading_text = Faker('sentence', nb_words=6, variable_nb_words=True)
 
+    banner_carousel = Faker('streamfield', fields=['banner_carousel'])
+
     signup = SubFactory(SignupFactory)
 
 
diff --git a/network-api/networkapi/utility/faker/streamfield_provider.py b/network-api/networkapi/utility/faker/streamfield_provider.py
index eddf4d2edd..cbf950de1a 100644
--- a/network-api/networkapi/utility/faker/streamfield_provider.py
+++ b/network-api/networkapi/utility/faker/streamfield_provider.py
@@ -326,6 +326,14 @@ def generate_dear_internet_letter_field():
     return generate_field('letter', attributes)
 
 
+def generate_banner_carousel_field():
+    return generate_field('slide', {
+        'image': choice(Image.objects.all()).id,
+        'heading': fake.sentence(nb_words=4, variable_nb_words=True),
+        'description': fake.paragraph(nb_sentences=3, variable_nb_sentences=True),
+    })
+
+
 class StreamfieldProvider(BaseProvider):
     """
     A custom Faker Provider for relative image urls, for use with factory_boy
@@ -368,7 +376,8 @@ def streamfield(self, fields=None):
             'recent_blog_entries': generate_recent_blog_entries_field,
             'blog_set': generate_blog_set_field,
             'airtable': generate_airtable_field,
-            'typeform': generate_typeform_field
+            'typeform': generate_typeform_field,
+            'banner_carousel': generate_banner_carousel_field,
         }
 
         streamfield_data = []

From 3f8fcbbc0037f83de068e95a8f8cdf1a6a47ca12 Mon Sep 17 00:00:00 2001
From: Sharmaine Lim <amanda.lim@torchbox.com>
Date: Wed, 6 Oct 2021 21:04:57 +0800
Subject: [PATCH 10/40] Add faker for MozfestHomepage banner video

---
 network-api/networkapi/mozfest/factory.py                    | 1 +
 network-api/networkapi/utility/faker/streamfield_provider.py | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/network-api/networkapi/mozfest/factory.py b/network-api/networkapi/mozfest/factory.py
index 79a9d9ae88..790000222d 100644
--- a/network-api/networkapi/mozfest/factory.py
+++ b/network-api/networkapi/mozfest/factory.py
@@ -54,6 +54,7 @@ class Meta:
     banner_heading_text = Faker('sentence', nb_words=6, variable_nb_words=True)
 
     banner_carousel = Faker('streamfield', fields=['banner_carousel'])
+    banner_video = Faker('streamfield', fields=['banner_video'])
 
     signup = SubFactory(SignupFactory)
 
diff --git a/network-api/networkapi/utility/faker/streamfield_provider.py b/network-api/networkapi/utility/faker/streamfield_provider.py
index cbf950de1a..44bf7a7f4c 100644
--- a/network-api/networkapi/utility/faker/streamfield_provider.py
+++ b/network-api/networkapi/utility/faker/streamfield_provider.py
@@ -334,6 +334,10 @@ def generate_banner_carousel_field():
     })
 
 
+def generate_banner_video_field():
+    return generate_field('video_url', 'https://www.youtube.com/embed/3FIVXBawyQw')
+
+
 class StreamfieldProvider(BaseProvider):
     """
     A custom Faker Provider for relative image urls, for use with factory_boy
@@ -378,6 +382,7 @@ def streamfield(self, fields=None):
             'airtable': generate_airtable_field,
             'typeform': generate_typeform_field,
             'banner_carousel': generate_banner_carousel_field,
+            'banner_video': generate_banner_video_field,
         }
 
         streamfield_data = []

From 0c1051011406a7a02625c5e16bd1b74c3a2a51c7 Mon Sep 17 00:00:00 2001
From: Sharmaine Lim <amanda.lim@torchbox.com>
Date: Wed, 6 Oct 2021 17:43:11 +0800
Subject: [PATCH 11/40] Make migrations

---
 ...sthomepage_banner_carousel_banner_video.py | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 network-api/networkapi/mozfest/migrations/0021_mozfesthomepage_banner_carousel_banner_video.py

diff --git a/network-api/networkapi/mozfest/migrations/0021_mozfesthomepage_banner_carousel_banner_video.py b/network-api/networkapi/mozfest/migrations/0021_mozfesthomepage_banner_carousel_banner_video.py
new file mode 100644
index 0000000000..4802833303
--- /dev/null
+++ b/network-api/networkapi/mozfest/migrations/0021_mozfesthomepage_banner_carousel_banner_video.py
@@ -0,0 +1,27 @@
+# Generated by Django 3.1.11 on 2021-10-06 09:39
+
+from django.db import migrations
+import networkapi.wagtailpages.pagemodels.customblocks.video_block
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mozfest', '0020_auto_20210910_2042'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='mozfesthomepage',
+            name='banner_carousel',
+            field=wagtail.core.fields.StreamField([('slide', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('heading', wagtail.core.blocks.CharBlock(required=False)), ('description', wagtail.core.blocks.CharBlock(required=False))]))], null=True),
+        ),
+        migrations.AddField(
+            model_name='mozfesthomepage',
+            name='banner_video',
+            field=wagtail.core.fields.StreamField([('CMS_video', networkapi.wagtailpages.pagemodels.customblocks.video_block.WagtailVideoChooserBlock()), ('video_url', networkapi.wagtailpages.pagemodels.customblocks.video_block.EmbeddedVideoBlock(help_text='For YouTube: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. For example: https://www.youtube.com/embed/3FIVXBawyQw<br/>For Vimeo: follow similar steps to grab the embed URL. For example: https://player.vimeo.com/video/9004979'))], blank=True, help_text='The video to play when users click "watch video"', null=True),
+        ),
+    ]

From 287eefc7ab839e60cfaf505affae677f7ed71adb Mon Sep 17 00:00:00 2001
From: Sharmaine Lim <SharmaineLim@users.noreply.github.com>
Date: Thu, 7 Oct 2021 14:17:11 +0800
Subject: [PATCH 12/40] Fix spacing in HTML file
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: boggs ⚓ <hello@boggs.xyz>
---
 .../templates/wagtailpages/blocks/wagtail_video_block.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/wagtail_video_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/wagtail_video_block.html
index 6e1c536ff6..c8810f8b34 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/wagtail_video_block.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/wagtail_video_block.html
@@ -14,7 +14,7 @@
   {% for source in value.sources %}
   <source
     {% for attr_key, attr_value in source.items %}
-    {{ attr_key }}="{{ attr_value}}"
+    {{ attr_key }}="{{ attr_value }}"
     {% endfor %}
   >
   {% endfor %}

From 26080e5d1d37610eef377c297b8f893e608dd644 Mon Sep 17 00:00:00 2001
From: Steve Stein <steven_ts@hotmail.com>
Date: Mon, 11 Oct 2021 15:06:58 -0600
Subject: [PATCH 13/40] [7533] - FE Mozfest homepage hero (#7589)

* Current events slider styles

* Install swiper and style event cards

* video play on hover styling

* Minor spacing

* Mozfest homepage banner start

* Homepage header, mobile styling and slideshow styling

* Homepage banner cleanup and organization

* Link mobile and background image sliders

* Add loops for test hero content

* Rebase on to BE branch

* Thumbnail fixes for hosted cms video

* carousel js cleanup

* Integrate old video functionality back into branch

* Make old functionality work

* Change flag to featured again

* Revert name to homepage banner handler

* Remove carousel.scss

* Add spacing back to tailwind config

* Remove extra space from main.scss

* Add animation for sliding progress bar

* Make carousel clickable
---
 .../fragments/carousel_navigation.html        | 25 +++++
 .../fragments/hero/carousel_hero.html         | 69 +++++++++++++
 .../fragments/hero/featured_video.html        | 39 ++++++++
 .../fragments/hero/hardcoded_video_hero.html  | 43 ++++++++
 .../fragments/hero/hero_mobile_slider.html    | 16 +++
 .../templates/partials/homepage_banner.html   | 41 --------
 .../templates/partials/intro_section.html     | 10 ++
 .../templates/partials/primary_heroguts.html  | 47 +++------
 .../blocks/embedded_video_block.html          |  7 --
 package-lock.json                             |  6 +-
 package.json                                  |  2 +-
 source/images/mozfest/play-circle-grey.svg    | 13 +++
 .../mozfest-hero-carousel.js                  | 83 ++++++++++++++++
 .../template-js-handler/home-banner.js        | 72 +++++++++++---
 source/js/main.js                             |  6 ++
 source/sass/mozfest.scss                      | 99 +++++++++++++++++++
 tailwind.config.js                            | 13 ++-
 17 files changed, 487 insertions(+), 104 deletions(-)
 create mode 100644 network-api/networkapi/mozfest/templates/fragments/carousel_navigation.html
 create mode 100644 network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
 create mode 100644 network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
 create mode 100644 network-api/networkapi/mozfest/templates/fragments/hero/hardcoded_video_hero.html
 create mode 100644 network-api/networkapi/mozfest/templates/fragments/hero/hero_mobile_slider.html
 delete mode 100644 network-api/networkapi/mozfest/templates/partials/homepage_banner.html
 create mode 100644 network-api/networkapi/mozfest/templates/partials/intro_section.html
 create mode 100644 source/images/mozfest/play-circle-grey.svg
 create mode 100644 source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js

diff --git a/network-api/networkapi/mozfest/templates/fragments/carousel_navigation.html b/network-api/networkapi/mozfest/templates/fragments/carousel_navigation.html
new file mode 100644
index 0000000000..7c46877c03
--- /dev/null
+++ b/network-api/networkapi/mozfest/templates/fragments/carousel_navigation.html
@@ -0,0 +1,25 @@
+<div class="tw-flex tw-justify-center tw-items-start tw-flex-col tw-mb-5 medium:tw-flex-row medium:tw-justify-between medium:tw-items-center">
+      <h2 class="font-weight-bold h3-heading tw-font-semibold tw-mb-4">{{ title }}</h2>
+      <div class="tw-flex tw-flex-row tw-justify-between tw-items-center">
+        <div class="swiper-button-prev">
+          <svg class="swiper-button-prev__icon" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M20.75 10.5c0-.70761-.5099-1.28125-1.1389-1.28125H1.38889C.759899 9.21875.25 9.79239.25 10.5c0 .7076.509899 1.2812 1.13889 1.2812H19.6111c.629 0 1.1389-.5736 1.1389-1.2812Z"
+                  fill="currentColor"/>
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M10.1664.625269c-.44474-.500359-1.16584-.500359-1.6106 0L.583572 9.59402c-.444763.50038-.444763 1.31158 0 1.81198L8.5558 20.3747c.44476.5004 1.16586.5004 1.6106 0 .4448-.5003.4448-1.3116 0-1.8119L2.99952 10.5l7.16688-8.06277c.4448-.50036.4448-1.3116 0-1.811961Z"
+                  fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="swiper-button-next">
+          <svg class="swiper-button-next__icon" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M.25 10.5c0-.70761.509898-1.28125 1.13889-1.28125H19.6111c.629 0 1.1389.57364 1.1389 1.28125 0 .7076-.5099 1.2812-1.1389 1.2812H1.38889C.759898 11.7812.25 11.2076.25 10.5Z"
+                  fill="currentColor"/>
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M10.8336.625269c.4447-.500359 1.1658-.500359 1.6106 0l7.9722 8.968751c.4448.50038.4448 1.31158 0 1.81198l-7.9722 8.9687c-.4448.5004-1.1659.5004-1.6106 0-.4448-.5003-.4448-1.3116 0-1.8119L18.0005 10.5l-7.1669-8.06277c-.4448-.50036-.4448-1.3116 0-1.811961Z"
+                  fill="currentColor"/>
+          </svg>
+        </div>
+      </div>
+    </div>
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
new file mode 100644
index 0000000000..78177f3fd7
--- /dev/null
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
@@ -0,0 +1,69 @@
+{% load i18n wagtailimages_tags %}
+<div data-mozfest-hero-carousel>
+  <div class="tw-relative tw-pt-[120px] tw-flex tw-flex-col tw-justify-end{% if not page.banner_video_url %} tw-pb-6 medium:tw-pb-[120px]{% endif %}">
+
+    {# Background images slider #}
+    <div class="tw-absolute tw-inset-0">
+      <div class="tw-absolute tw-inset-0 tw-bg-black tw-z-20 tw-opacity-40"></div>
+      <div class="tw-bg-gradient-to-t tw-from-festival-blue-100 tw-via-festival-blue-100 tw-to-festival-purple-100 tw-w-full tw-h-full tw-absolute tw-inset-0 tw-z-10 tw-opacity-75"></div>
+    </div>
+
+    {# Background Images slider #}
+    {% if page.banner_carousel %}
+      <div class="tw-absolute tw-w-full tw-h-full tw-top-0 tw-left-0">
+        <div class="swiper-hero-carousel tw-h-full tw-overflow-hidden">
+          <div class="swiper-wrapper">
+            {% for slide_block in page.specific.banner_carousel %}
+              {% with slide=slide_block.value %}
+                {% image slide.image fill-1600x900 as img %}
+                <div class="swiper-slide tw-bg-cover tw-bg-center tw-bg-no-repeat tw-filter tw-grayscale" style="background-image: url({{ img.url }});"></div>
+              {% endwith %}
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    {% endif %}
+
+    {# Text slider #}
+    <div class="tw-container tw-relative tw-z-20 tw-text-white">
+      <div>
+        <h1 class="tw-text-white tw-font-bold tw-mb-5">{{ page.banner_heading }}</h1>
+        {% if page.banner_video %}
+          <a href="#mozfest-hero-video" class="btn btn-primary tw-bg-white tw-text-black hover:tw-bg-gray-05">{% trans "Watch last year’s recap video" %}</a>
+        {% endif %}
+      </div>
+
+      <div class="tw-relative tw-pt-[60px] medium:tw-pt-[100px]  tw-hidden medium:tw-block">
+
+        {# pagination progress bars on desktop #}
+        <div class="swiper-hero-pagination tw-bottom-3 tw-relative tw-z-40 tw-grid tw-grid-cols-3 tw-gap-3 medium:tw-gap-4"></div>
+
+        {# Text #}
+        {% if page.banner_carousel %}
+          <div class="tw-grid tw-grid-cols-3 tw-gap-3 medium:tw-gap-4">
+            {% for slide_block in page.specific.banner_carousel %}
+              {% with slide=slide_block.value %}
+                <div>
+                  <span class="tw-font-zilla tw-font-bold tw-inline-block h4-heading tw-text-white">{{ slide.heading }}</span>
+                  <p class="tw-text-white">{{ slide.description }}</p>
+                </div>
+              {% endwith %}
+            {% endfor %}
+          </div>
+        {% endif %}
+      </div>
+
+      {# mobile slider #}
+      {% if page.banner_carousel %}
+        {% include 'fragments/hero/hero_mobile_slider.html' with items=page.hero_slides %}
+      {% endif %}
+    </div>
+
+    {# Video block #}
+    {% if page.banner_video_url %}
+      {% include 'fragments/hero/featured_video.html' %}
+    {% endif %}
+
+  </div>
+
+</div>
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html b/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
new file mode 100644
index 0000000000..1d004d9e7e
--- /dev/null
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
@@ -0,0 +1,39 @@
+{% load i18n static wagtailcore_tags wagtailimages_tags %}
+<div id="mozfest-hero-video" class="tw-relative tw-z-20 tw-pb-5 medium:tw-pb-[60px] tw-mt-7 medium:tw-mt-[60px]">
+
+  {# Overlay spacer #}
+  <div class="tw-bg-white tw-absolute tw-w-full tw-h-[80%] medium:tw-h-[90%] tw-bottom-0"></div>
+
+  {# Video Container #}
+  <div class="container">
+    {% for block in page.banner_video %}
+      <div style="padding-bottom: 56.25%;" class="embed-responsive tw-bg-black tw-text-black">
+
+        {# Thumbnail and overlay #}
+        <button
+                id="mozfest-home-watch-featured-video-button"
+                aria-label="{% trans "Watch Video" %}"
+                class="tw-bg-black tw-w-full tw-h-full tw-absolute tw-inset-0 tw-group tw-z-10 tw-bg-cover tw-bg-center tw-transition tw-duration-500"
+                {% if block.block_type == 'video_url' %}
+                data-video-url="{{ block.value }}"
+                style="background-image: url({{ page.banner_video_thumbnail }});"
+                {% endif %}
+                {% if block.block_type == 'CMS_video' %}
+                style="background-image: url({{ block.value.thumbnail.url }});"
+                {% endif %}
+        >
+            <span class="tw-relative tw-w-full tw-h-full tw-flex tw-justify-center tw-items-center">
+              {# Opacity layer #}
+              <div class="tw-absolute tw-bg-black tw-opacity-25 tw-inset-0 tw-w-full tw-h-full"></div>
+              {# Play Icon #}
+              <img src="{% static "_images/mozfest/play-circle-grey.svg" %}"
+                   class="group-hover:tw--translate-y-1 tw-relative tw-z-10 tw-transition tw-w-[75px] tw-h-[75px] medium:tw-w-[108px] medium:tw-h-[108px]" alt=""/>
+            </span>
+        </button>
+
+        {# Video #}
+        {{ block }}
+      </div>
+    {% endfor %}
+  </div>
+</div>
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/hardcoded_video_hero.html b/network-api/networkapi/mozfest/templates/fragments/hero/hardcoded_video_hero.html
new file mode 100644
index 0000000000..01fa5645e6
--- /dev/null
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/hardcoded_video_hero.html
@@ -0,0 +1,43 @@
+{% load i18n wagtailcore_tags %}
+<div class="banner">
+  <div class="background-wrapper">
+    <div class="overlay"></div>
+    <video class="banner-video" playsinline muted loop preload
+           poster="https://s3.amazonaws.com/mofo-assets/foundation/video/mozfest-banner-video-poster.jpg">
+      <source
+              src="https://s3.amazonaws.com/mofo-assets/foundation/video/mozfest-banner-video.mp4"
+              type="video/mp4">
+    </video>
+
+    <div class="video-control-wrapper dark-theme">
+      <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <button class="btn btn-video-control btn-pause btn-secondary d-none">
+              <span>{% trans "PAUSE VIDEO" context "Pause button for video" %}</span>
+            </button>
+            <button class="btn btn-video-control btn-play btn-secondary d-none">
+              <span>{% trans "PLAY VIDEO" context "Play button for video" %}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="homepage-banner-content container">
+    <div class="row">
+      <div class="col-10 col-lg-8 dark-theme">
+        <h1 class="h1-heading">{{ page.banner_heading }}</h1>
+      </div>
+    </div>
+  </div>
+</div>
+
+{# Bottom overlaping spacing bar #}
+<div class="container">
+  <div class="row cutout-wrapper-row">
+    <div class="cutout col-12 pt-4">
+    </div>
+  </div>
+</div>
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/hero_mobile_slider.html b/network-api/networkapi/mozfest/templates/fragments/hero/hero_mobile_slider.html
new file mode 100644
index 0000000000..b96203bb1a
--- /dev/null
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/hero_mobile_slider.html
@@ -0,0 +1,16 @@
+<div class="swiper-hero-mobile tw-overflow-hidden medium:tw-hidden tw-mt-7">
+
+  <div class="swiper-wrapper">
+    {% for slide_block in page.banner_carousel %}
+      {% with slide=slide_block.value %}
+        <div class="swiper-slide">
+          <div class="swiper-mobile-progress-bar"></div>
+          <span class="tw-font-zilla tw-font-bold tw-inline-block h4-heading tw-text-white tw-mt-4">{{ slide.heading }}</span>
+          <p class="tw-text-white">{{ slide.description }}</p>
+        </div>
+      {% endwith %}
+    {% endfor %}
+  </div>
+</div>
+
+
diff --git a/network-api/networkapi/mozfest/templates/partials/homepage_banner.html b/network-api/networkapi/mozfest/templates/partials/homepage_banner.html
deleted file mode 100644
index 391f22ded2..0000000000
--- a/network-api/networkapi/mozfest/templates/partials/homepage_banner.html
+++ /dev/null
@@ -1,41 +0,0 @@
-{% load i18n wagtailimages_tags %}
-
-<div class="homepage-banner-content container">
-  <div class="row">
-    <div class="col-10 col-lg-8 dark-theme">
-      <h1 class="h1-heading">{{ page.banner_heading }}</h1>
-      {% if banner_video_type == "featured" %}
-        {% if page.banner_video %}
-        {# TODO Scroll to banner_video #}
-        <button class="btn btn-primary" id="mozfest-home-watch-video-button">{% trans "Watch last year’s recap video" %}</button>
-        {% endif %}
-        {% if page.banner_carousel %}
-        <ul>
-        {% for slide_block in page.specific.banner_carousel %}
-          {% with slide=slide_block.value %}
-          <li>
-            {% comment %}
-            {# Prints an image as <img src={url} width={original_width} height={original_height}> alt={alt_text} #}
-            {% image slide.image original %}
-            {% endcomment %}
-
-            {# Gets info for an image resized to 200 x 100 #}
-            {% image slide.image fill-200x100 as img %}
-            <img src={{ img.url }} width={{ img.width }} height={{ img.height }} alt={{ img.alt }}>
-
-            <h2>Heading: {{ slide.heading }}</h2>
-            <p>Description: {{ slide.description }}</p>
-          </li>
-          {% endwith %}
-        {% endfor %}
-        </ul>
-        {% endif %}
-      {% elif banner_video_type != "hardcoded" %}
-        <p class="body-large">{{ page.banner_guide_text }}</p>
-        {% if page.banner_video_url %}
-        <a class="btn btn-primary" href="{{ page.banner_video_url }}" target="_blank" id="mozfest-home-watch-video-button">{% trans "Watch Video" %}</a>
-        {% endif %}
-      {% endif %}
-    </div>
-  </div>
-</div>
diff --git a/network-api/networkapi/mozfest/templates/partials/intro_section.html b/network-api/networkapi/mozfest/templates/partials/intro_section.html
new file mode 100644
index 0000000000..ec9d254863
--- /dev/null
+++ b/network-api/networkapi/mozfest/templates/partials/intro_section.html
@@ -0,0 +1,10 @@
+<div class="container">
+  <div class="row cutout-wrapper-row">
+    <div class="cutout pt-4 col-12 col-lg-8">
+      <h1 class="h1-heading mb-0">{% if root.title %}{{ root.title }}{% elif page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
+      {% if page.intro %}
+        <div class="intro body-large mt-3">{{ page.intro | richtext }}</div>
+      {% endif %}
+    </div>
+  </div>
+</div>
diff --git a/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html b/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
index e77eb19d80..631399ae6d 100644
--- a/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
+++ b/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
@@ -1,48 +1,23 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
 <div id="hero">
-  <div class="banner">
-    {% if homepage %}
-      {% include "../fragments/hero/large.html" with page=page banner_video_type=banner_video_type %}
-      {% include "./homepage_banner.html" with page=page banner_video_type=banner_video_type %}
-    {% else %}
-      {% include "../fragments/hero/normal.html" with page=page %}
-    {% endif %}
-  </div>
-
   {% if homepage %}
-  <div class="container">
-    <div class="row cutout-wrapper-row">
-      <div class="cutout col-12 pt-4">
-        {% if banner_video_type == "featured" %}
-          {% if page.banner_video %}
-          {# See embedded_video_block.html and wagtail_video_block.html #}
-          {% include_block page.banner_video %}
-          {% endif %}
-          <h1 class="h2-heading mb-0">{% if page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
-        {% elif banner_video_type != "hardcoded" %}
-          <h1 class="h2-heading mb-0">{% if page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
-          {% if page.intro %}
-          <div class="body-large mt-3 mb-0">{{ page.intro | richtext }}</div>
-          {% endif %}
-        {% endif %}
-      </div>
-    </div>
-  </div>
+    {% if banner_video_type == "hardcoded" %}
+      {# Hero with hardcoded video as background #}
+      {% include "fragments/hero/hardcoded_video_hero.html" with page=page banner_video_type=banner_video_type %}
+    {% elif banner_video_type == "featured" %}
+      {# Hero with carousel and featured video below #}
+      {% include "fragments/hero/carousel_hero.html" with page=page banner_video_type=banner_video_type %}
+    {% endif %}
   {% else %}
-  <div class="container">
-    <div class="row cutout-wrapper-row">
-      <div class="cutout pt-4 col-12 col-lg-8">
-        <h1 class="h1-heading mb-0">{% if root.title %}{{ root.title }}{% elif page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
-        {% if page.intro %}
-        <div class="intro body-large mt-3">{{ page.intro | richtext }}</div>
-        {% endif %}
-      </div>
+    <div class="banner">
+      {% include "fragments/hero/normal.html" with page=page %}
     </div>
-  </div>
+    {% include "partials/intro_section.html" %}
   {% endif %}
 
   {% if singleton_page == True %}
     {% include "partials/intro_and_content_divider.html" with wrapper_class="d-md-none" %}
   {% endif %}
 </div>
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html
index 34eb400ad9..89f12f96ea 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html
@@ -2,17 +2,12 @@
 {% load wagtailcore_tags %}
 
 {% block block_row_classes %}
-no-gutters
 {% endblock %}
 
 {% block main_block_class %}
-streamfield-content
-full-width
 {% endblock %}
 
 {% block block_content %}
-<div class="my-2">
-  <div class="embed-responsive embed-responsive-16by9 d-print-none">
     <iframe
       src="{{ value }}"
       frameborder="0"
@@ -20,6 +15,4 @@
       allow="autoplay; encrypted-media"
       allowfullscreen>
     </iframe>
-  </div>
-</div>
 {% endblock %}
diff --git a/package-lock.json b/package-lock.json
index 91bdac5bb9..2f6aa35f8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7678,9 +7678,9 @@
       }
     },
     "swiper": {
-      "version": "6.7.5",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-6.7.5.tgz",
-      "integrity": "sha512-KaTjO93tZyMpxWHaey+T+H/JeePMZV/joZWhZaor76Xk+rPGmjOz1S8mXSyrRkaW0p0LOJYeWGB8d0gYxSSV/Q==",
+      "version": "6.8.4",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-6.8.4.tgz",
+      "integrity": "sha512-O+buF9Q+sMA0H7luMS8R59hCaJKlpo8PXhQ6ZYu6Rn2v9OsFd4d1jmrv14QvxtQpKAvL/ZiovEeANI/uDGet7g==",
       "requires": {
         "dom7": "^3.0.0",
         "ssr-window": "^3.0.0"
diff --git a/package.json b/package.json
index fad0147b3d..f762f9c9a2 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "react-ga": "3.3.0",
     "sass": "^1.38.2",
     "shx": "^0.3.3",
-    "swiper": "^6.7.5",
+    "swiper": "^6.8.4",
     "tailwindcss": "^2.2.9",
     "uuid": "^8.3.2",
     "whatwg-fetch": "^3.6.2"
diff --git a/source/images/mozfest/play-circle-grey.svg b/source/images/mozfest/play-circle-grey.svg
new file mode 100644
index 0000000000..99e0e3c47c
--- /dev/null
+++ b/source/images/mozfest/play-circle-grey.svg
@@ -0,0 +1,13 @@
+<svg viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)">
+    <path
+      d="M73.286 51.7056 38.4153 34.2877c-.4705-.2177-.9879-.3144-1.5053-.2814-.5174.0331-1.0183.1949-1.4572.4708-.4388.2758-.8016.6569-1.0553 1.1086-.2537.4517-.3903.9596-.3974 1.4775V71.884c-.0044.5316.1286 1.0554.386 1.5206.2575.4653.6307.8564 1.0837 1.1354.453.2791.9703.4367 1.5021.4576.5318.0209 1.0599-.0956 1.5335-.3382L73.286 57.2415c.5152-.2583.9483-.6547 1.251-1.1448.3027-.4902.463-1.0547.463-1.6306 0-.5759-.1603-1.1405-.463-1.6306s-.7358-.8865-1.251-1.1449v.015Z"
+      fill="#CBCBCB"/>
+  </g>
+  <circle cx="54" cy="54" r="51.5" stroke="#CBCBCB" stroke-width="5"/>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" transform="translate(34 34)" d="M0 0h41v41H0z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js b/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
new file mode 100644
index 0000000000..1a4498a813
--- /dev/null
+++ b/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
@@ -0,0 +1,83 @@
+import Swiper, {A11y, Autoplay, Pagination, Navigation, Keyboard, EffectFade} from 'swiper';
+
+Swiper.use([A11y, Autoplay, Pagination, Navigation, Keyboard, EffectFade]);
+
+class MozfestHeroCarousel {
+  static selector() {
+    return "[data-mozfest-hero-carousel]";
+  }
+
+  constructor(node) {
+    this.node = node;
+    this.delay = 10000;
+
+    // Initialize Carousels
+    this.initBackgroundImageCarousel();
+    this.initMobileTexCarousel();
+
+    // Link transitions
+    this.linkSlideChanges();
+  }
+
+  initBackgroundImageCarousel() {
+    this.backGroundImagesSwiper = new Swiper(".swiper-hero-carousel", {
+      loop: true,
+      watchSlidesProgress: true,
+      autoplay: {
+        delay: this.delay,
+      },
+      paginationClickable: false,
+      keyboard: {
+        enabled: true,
+      },
+      pagination: {
+        el: ".swiper-hero-pagination",
+        clickable: true,
+      },
+      effect: "fade",
+      fadeEffect: {
+        crossFade: false,
+      },
+    });
+  }
+
+  initMobileTexCarousel() {
+    this.heroTextMobile = new Swiper(".swiper-hero-mobile", {
+      allowTouchMove: true,
+      loop: true,
+      keyboard: {
+        enabled: true,
+      },
+      autoplay: {
+        delay: this.delay,
+      },
+      slidesPerView: 1,
+      centeredSlides: true,
+      spaceBetween: 30,
+    });
+  }
+
+  // Ensure that the background image slider stays in sync with the mobile one
+  linkSlideChanges() {
+    this.heroTextMobile.on("slideChange", (event) => {
+      if (event.swipeDirection === "next") {
+        this.backGroundImagesSwiper.slideNext();
+      }
+      if (event.swipeDirection === "prev") {
+        this.backGroundImagesSwiper.slidePrev();
+      }
+    })
+  }
+}
+
+const MozfestHeroCarousels = {
+  init: function () {
+    for (const carousel of document.querySelectorAll(
+      MozfestHeroCarousel.selector()
+    )) {
+      new MozfestHeroCarousel(carousel);
+    }
+  },
+};
+
+export default MozfestHeroCarousels;
diff --git a/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js b/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
index 984ffb869a..2e9b2721f7 100644
--- a/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
+++ b/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
@@ -1,22 +1,54 @@
-import { ReactGA } from "../../../../common";
+import {ReactGA} from "../../../../common";
 
-const watchVideoButtonHandler = () => {
-  let homeWatchVideoButton = document.querySelector(
-    `#mozfest-home-watch-video-button`
+// For the featured banner type on mozefest homepage
+const watchFeaturedVideoHandler = () => {
+  const watchVideoButton = document.querySelector(
+      `#mozfest-home-watch-featured-video-button`
   );
+  const externalVideo = document.querySelector("#mozfest-hero-video iframe");
+  const internalVideo = document.querySelector("#mozfest-hero-video video");
+
+  // If no video exists then do nothing
+  if (!externalVideo && !internalVideo) {
+    return;
+  }
+
+  if (watchVideoButton) {
+    watchVideoButton.addEventListener(`click`, () => {
+      trackWatchVideoClicks();
+
+      if (externalVideo) {
+        // Get video url from button
+        const videoUrl = watchVideoButton.dataset.videoUrl;
+
+        if (videoUrl) {
+          // Add Src to video to play it
+          externalVideo.setAttribute("src", videoUrl);
+          fadeOutOverlay(watchVideoButton);
+        }
+      }
+
+      if (internalVideo) {
+        fadeOutOverlay(watchVideoButton);
+        internalVideo.play();
+      }
 
-  if (homeWatchVideoButton) {
-    homeWatchVideoButton.addEventListener(`click`, () => {
-      ReactGA.event({
-        category: `CTA`,
-        action: `watch video tap`,
-        label: `watch video button tap`,
-      });
     });
   }
 };
 
-const backgroundVideoHandler = () => {
+const fadeOutOverlay = (overlay) => {
+  // Fade out overlay
+  overlay.classList.add("tw-opacity-0");
+
+  // After fading out remove from DOM Flow
+  setTimeout(() => {
+    overlay.classList.add("tw-hidden");
+  }, 500);
+};
+
+
+const backgroundHardcodedVideoHandler = () => {
   let homepageBanner = document.querySelector(
     "#view-mozfest-home #hero .banner"
   );
@@ -49,6 +81,7 @@ const backgroundVideoHandler = () => {
     });
 
     playButton.addEventListener(`click`, () => {
+      trackWatchVideoClicks();
       video.play();
     });
 
@@ -64,10 +97,21 @@ const backgroundVideoHandler = () => {
   }
 };
 
+
+// Track video watches in google analytics
+const trackWatchVideoClicks = () => {
+  ReactGA.event({
+    category: `CTA`,
+    action: `watch video tap`,
+    label: `watch video button tap`,
+  });
+}
+
+
 /**
  * Bind handlers to MozFest homepage banner
  */
 export default () => {
-  watchVideoButtonHandler();
-  backgroundVideoHandler();
+  watchFeaturedVideoHandler();
+  backgroundHardcodedVideoHandler();
 };
diff --git a/source/js/main.js b/source/js/main.js
index 9bf2ec01e5..4886b0d898 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -16,6 +16,7 @@ import {
 import primaryNav from "./primary-nav.js";
 import EmbedTypeform from "./embed-typeform.js";
 import Dropdowns from "./dropdowns.js";
+import MozfestHeroCarousels from "./components/mozfest-hero-carousel/mozfest-hero-carousel";
 import initializeSentry from "./common/sentry-config.js";
 import YouTubeRegretsTunnel from "./foundation/pages/youtube-regrets/intro-tunnel";
 import RegretsReporterTimeline from "./foundation/pages/youtube-regrets/regrets-reporter/timeline";
@@ -138,6 +139,11 @@ let main = {
     if (document.querySelector("#view-dear-internet")) {
       bindDearInternetEventHandlers();
     }
+
+    // Mozfest pages
+    if (document.querySelector(".mozfest")) {
+      MozfestHeroCarousels.init();
+    }
   },
 };
 
diff --git a/source/sass/mozfest.scss b/source/sass/mozfest.scss
index c767574e55..d873346402 100644
--- a/source/sass/mozfest.scss
+++ b/source/sass/mozfest.scss
@@ -1,6 +1,12 @@
 // MozFest-specific styling
 // https://www.mozillafestival.org
 
+// Mozfest Carousel Modules
+@import "../../node_modules/swiper/swiper-vars.scss";
+@import "../../node_modules/swiper/swiper.scss";
+@import "../../node_modules/swiper/components/pagination/pagination.scss";
+@import "../../node_modules/swiper/components/effect-fade/effect-fade.scss";
+
 body.mozfest {
   .primary-nav-container {
     // The following overrides are to make sure
@@ -174,4 +180,97 @@ body.mozfest {
       }
     }
   }
+
+}
+
+.swiper-button-next,
+.swiper-button-prev {
+  @apply tw-border-2 tw-text-blue tw-flex tw-flex-col tw-justify-center tw-items-center tw-w-[40px] tw-h-[40px] tw-transition;
+
+  &.swiper-button-disabled {
+    @apply tw-border-gray-20;
+  }
+
+  &::after {
+    content: "";
+  }
+
+  &:hover {
+    @apply tw-opacity-75;
+  }
+}
+
+.swiper-button-icon {
+  @apply tw-text-blue tw-w-4 tw-h-4;
+}
+
+.swiper-button-disabled {
+  .swiper-button-icon {
+    @apply tw-text-gray-20;
+  }
+}
+
+.swiper-button-prev {
+  @apply tw-mr-5;
+}
+
+.swiper-pagination-bullet {
+  @apply tw-w-3 tw-h-3;
+}
+
+.swiper-pagination-bullet-active {
+  @apply tw-bg-festival-blue-100;
+}
+
+@keyframes slide-progress-bar {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+#view-mozfest-home {
+  .swiper-hero-pagination {
+    .swiper-pagination-bullet {
+      @apply tw-block tw-w-full tw-rounded-full tw-overflow-hidden tw-relative tw-bg-white;
+      height: 4px;
+
+      &::before {
+        @apply tw-block tw-inset-0 tw-absolute;
+        background: rgba(255, 255, 255, 1);
+        content: "";
+      }
+    }
+
+    .swiper-pagination-bullet-active {
+      background: rgba(255, 255, 255, 0.2);
+
+      &::before {
+        animation: slide-progress-bar 10s ease-in-out forwards;
+      }
+    }
+  }
+
+  .swiper-mobile-progress-bar {
+    @apply tw-rounded-full tw-relative tw-overflow-hidden tw-w-full;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.5);
+
+    &::before {
+      @apply tw-block tw-inset-0 tw-absolute;
+      background: rgba(255, 255, 255, 1);
+      content: "";
+    }
+  }
+
+  .swiper-slide-active {
+    .swiper-mobile-progress-bar {
+      &::before {
+        animation: slide-progress-bar 10s ease-in-out forwards;
+      }
+    }
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 80ab675f42..183721fd34 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -41,6 +41,9 @@ module.exports = {
       screens: {
         print: { raw: "print" },
       },
+      opacity: {
+        40: 0.4,
+      }
     },
     // Overriding default spacing
     spacing: {
@@ -104,8 +107,14 @@ module.exports = {
         purple: "#a66efd",
       },
       festival: {
-        blue: "#0e11bf",
-        purple: "#8f14fb",
+        blue: {
+          DEFAULT: "#0e11bf",
+          100: "#2e05ff"
+        },
+        purple: {
+          DEFAULT: "#8f14fb",
+          100: "#fa00ff",
+        },
       },
       "dear-internet": {
         lilac: "#d3d5fc",

From 9c98d51b26dc4b297150222f0644dbf912802fd4 Mon Sep 17 00:00:00 2001
From: Steve <steven_ts@hotmail.com>
Date: Tue, 12 Oct 2021 09:01:00 -0600
Subject: [PATCH 14/40] Only show carousel if there are carousels

---
 .../fragments/hero/carousel_hero.html         | 26 ++++++++-----------
 .../templates/partials/primary_heroguts.html  | 17 ++++++------
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
index 78177f3fd7..0399fd984c 100644
--- a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
@@ -39,24 +39,20 @@ <h1 class="tw-text-white tw-font-bold tw-mb-5">{{ page.banner_heading }}</h1>
         <div class="swiper-hero-pagination tw-bottom-3 tw-relative tw-z-40 tw-grid tw-grid-cols-3 tw-gap-3 medium:tw-gap-4"></div>
 
         {# Text #}
-        {% if page.banner_carousel %}
-          <div class="tw-grid tw-grid-cols-3 tw-gap-3 medium:tw-gap-4">
-            {% for slide_block in page.specific.banner_carousel %}
-              {% with slide=slide_block.value %}
-                <div>
-                  <span class="tw-font-zilla tw-font-bold tw-inline-block h4-heading tw-text-white">{{ slide.heading }}</span>
-                  <p class="tw-text-white">{{ slide.description }}</p>
-                </div>
-              {% endwith %}
-            {% endfor %}
-          </div>
-        {% endif %}
+        <div class="tw-grid tw-grid-cols-3 tw-gap-3 medium:tw-gap-4">
+          {% for slide_block in page.specific.banner_carousel %}
+            {% with slide=slide_block.value %}
+              <div>
+                <span class="tw-font-zilla tw-font-bold tw-inline-block h4-heading tw-text-white">{{ slide.heading }}</span>
+                <p class="tw-text-white">{{ slide.description }}</p>
+              </div>
+            {% endwith %}
+          {% endfor %}
+        </div>
       </div>
 
       {# mobile slider #}
-      {% if page.banner_carousel %}
-        {% include 'fragments/hero/hero_mobile_slider.html' with items=page.hero_slides %}
-      {% endif %}
+      {% include 'fragments/hero/hero_mobile_slider.html' with items=page.hero_slides %}
     </div>
 
     {# Video block #}
diff --git a/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html b/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
index 631399ae6d..ffd35b8d7c 100644
--- a/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
+++ b/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
@@ -2,18 +2,19 @@
 
 <div id="hero">
   {% if homepage %}
-    {% if banner_video_type == "hardcoded" %}
-      {# Hero with hardcoded video as background #}
-      {% include "fragments/hero/hardcoded_video_hero.html" with page=page banner_video_type=banner_video_type %}
-    {% elif banner_video_type == "featured" %}
+    {% if page.banner_carousel %}
       {# Hero with carousel and featured video below #}
       {% include "fragments/hero/carousel_hero.html" with page=page banner_video_type=banner_video_type %}
+    {% else %}
+      {# Hero with hardcoded video as background #}
+      {% include "fragments/hero/hardcoded_video_hero.html" with page=page banner_video_type=banner_video_type %}
     {% endif %}
+  {% endif %}
   {% else %}
-    <div class="banner">
-      {% include "fragments/hero/normal.html" with page=page %}
-    </div>
-    {% include "partials/intro_section.html" %}
+  <div class="banner">
+    {% include "fragments/hero/normal.html" with page=page %}
+  </div>
+  {% include "partials/intro_section.html" %}
   {% endif %}
 
   {% if singleton_page == True %}

From 092175bbe9c7a28b71cb7c63dc6593cb90cfda45 Mon Sep 17 00:00:00 2001
From: Steve <steven_ts@hotmail.com>
Date: Tue, 12 Oct 2021 09:01:26 -0600
Subject: [PATCH 15/40] Remove uneeded carousel check

---
 .../fragments/hero/carousel_hero.html         | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
index 0399fd984c..b44e54c567 100644
--- a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
@@ -9,20 +9,18 @@
     </div>
 
     {# Background Images slider #}
-    {% if page.banner_carousel %}
-      <div class="tw-absolute tw-w-full tw-h-full tw-top-0 tw-left-0">
-        <div class="swiper-hero-carousel tw-h-full tw-overflow-hidden">
-          <div class="swiper-wrapper">
-            {% for slide_block in page.specific.banner_carousel %}
-              {% with slide=slide_block.value %}
-                {% image slide.image fill-1600x900 as img %}
-                <div class="swiper-slide tw-bg-cover tw-bg-center tw-bg-no-repeat tw-filter tw-grayscale" style="background-image: url({{ img.url }});"></div>
-              {% endwith %}
-            {% endfor %}
-          </div>
+    <div class="tw-absolute tw-w-full tw-h-full tw-top-0 tw-left-0">
+      <div class="swiper-hero-carousel tw-h-full tw-overflow-hidden">
+        <div class="swiper-wrapper">
+          {% for slide_block in page.specific.banner_carousel %}
+            {% with slide=slide_block.value %}
+              {% image slide.image fill-1600x900 as img %}
+              <div class="swiper-slide tw-bg-cover tw-bg-center tw-bg-no-repeat tw-filter tw-grayscale" style="background-image: url({{ img.url }});"></div>
+            {% endwith %}
+          {% endfor %}
         </div>
       </div>
-    {% endif %}
+    </div>
 
     {# Text slider #}
     <div class="tw-container tw-relative tw-z-20 tw-text-white">

From 9bce112e414628a7951aa62a7326b39573266c88 Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Wed, 13 Oct 2021 04:48:09 +0800
Subject: [PATCH 16/40] Update migrations

---
 ...y => 0022_mozfesthomepage_banner_carousel_banner_video.py} | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename network-api/networkapi/mozfest/migrations/{0021_mozfesthomepage_banner_carousel_banner_video.py => 0022_mozfesthomepage_banner_carousel_banner_video.py} (93%)

diff --git a/network-api/networkapi/mozfest/migrations/0021_mozfesthomepage_banner_carousel_banner_video.py b/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
similarity index 93%
rename from network-api/networkapi/mozfest/migrations/0021_mozfesthomepage_banner_carousel_banner_video.py
rename to network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
index 4802833303..4b0b78992d 100644
--- a/network-api/networkapi/mozfest/migrations/0021_mozfesthomepage_banner_carousel_banner_video.py
+++ b/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
@@ -1,4 +1,4 @@
-# Generated by Django 3.1.11 on 2021-10-06 09:39
+# Generated by Django 3.1.11 on 2021-10-12 20:47
 
 from django.db import migrations
 import networkapi.wagtailpages.pagemodels.customblocks.video_block
@@ -10,7 +10,7 @@
 class Migration(migrations.Migration):
 
     dependencies = [
-        ('mozfest', '0020_auto_20210910_2042'),
+        ('mozfest', '0021_add_spaces_cards'),
     ]
 
     operations = [

From 0b43be5f6ae0dfeb45a1b044e7a820d6a72e4ecb Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Wed, 13 Oct 2021 04:50:34 +0800
Subject: [PATCH 17/40] Fix template

---
 .../networkapi/mozfest/templates/partials/primary_heroguts.html  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html b/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
index ffd35b8d7c..7cf2d14b59 100644
--- a/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
+++ b/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
@@ -9,7 +9,6 @@
       {# Hero with hardcoded video as background #}
       {% include "fragments/hero/hardcoded_video_hero.html" with page=page banner_video_type=banner_video_type %}
     {% endif %}
-  {% endif %}
   {% else %}
   <div class="banner">
     {% include "fragments/hero/normal.html" with page=page %}

From 5839a96c884a206b34498952e851b4b3b05559b3 Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Wed, 13 Oct 2021 06:32:07 +0800
Subject: [PATCH 18/40] Add thumbnail

---
 ...sthomepage_banner_carousel_banner_video.py |  4 ++--
 network-api/networkapi/mozfest/models.py      | 22 ++++++++++++++-----
 .../fragments/hero/featured_video.html        | 21 +++++++++---------
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py b/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
index 4b0b78992d..edd989c490 100644
--- a/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
+++ b/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
@@ -1,4 +1,4 @@
-# Generated by Django 3.1.11 on 2021-10-12 20:47
+# Generated by Django 3.1.11 on 2021-10-12 22:31
 
 from django.db import migrations
 import networkapi.wagtailpages.pagemodels.customblocks.video_block
@@ -22,6 +22,6 @@ class Migration(migrations.Migration):
         migrations.AddField(
             model_name='mozfesthomepage',
             name='banner_video',
-            field=wagtail.core.fields.StreamField([('CMS_video', networkapi.wagtailpages.pagemodels.customblocks.video_block.WagtailVideoChooserBlock()), ('video_url', networkapi.wagtailpages.pagemodels.customblocks.video_block.EmbeddedVideoBlock(help_text='For YouTube: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. For example: https://www.youtube.com/embed/3FIVXBawyQw<br/>For Vimeo: follow similar steps to grab the embed URL. For example: https://player.vimeo.com/video/9004979'))], blank=True, help_text='The video to play when users click "watch video"', null=True),
+            field=wagtail.core.fields.StreamField([('CMS_video', networkapi.wagtailpages.pagemodels.customblocks.video_block.WagtailVideoChooserBlock()), ('external_video', wagtail.core.blocks.StructBlock([('video_url', networkapi.wagtailpages.pagemodels.customblocks.video_block.EmbeddedVideoBlock(help_text='For YouTube: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. For example: https://www.youtube.com/embed/3FIVXBawyQw<br/>For Vimeo: follow similar steps to grab the embed URL. For example: https://player.vimeo.com/video/9004979')), ('thumbnail', wagtail.images.blocks.ImageChooserBlock(help_text='The image to show before the video is played'))], icon='media'))], blank=True, help_text='The video to play when users click "watch video"', null=True),
         ),
     ]
diff --git a/network-api/networkapi/mozfest/models.py b/network-api/networkapi/mozfest/models.py
index e03827ff26..877f2ac1c1 100644
--- a/network-api/networkapi/mozfest/models.py
+++ b/network-api/networkapi/mozfest/models.py
@@ -2,6 +2,8 @@
 from wagtail.admin.edit_handlers import FieldPanel, StreamFieldPanel
 from wagtail.core.fields import StreamField, RichTextField
 from wagtail.core.models import Page
+from wagtail.core.blocks import StructBlock
+from wagtail.images.blocks import ImageChooserBlock
 from wagtail.images.edit_handlers import ImageChooserPanel
 from wagtail.snippets.edit_handlers import SnippetChooserPanel
 from wagtail_localize.fields import SynchronizedField, TranslatableField
@@ -162,12 +164,20 @@ class MozfestHomepage(MozfestPrimaryPage):
     banner_video = StreamField(
         [
             ('CMS_video', customblocks.WagtailVideoChooserBlock()),
-            ('video_url', customblocks.EmbeddedVideoBlock(
-                help_text='For YouTube: go to your YouTube video and click “Share,” '
-                          'then “Embed,” and then copy and paste the provided URL only. '
-                          'For example: https://www.youtube.com/embed/3FIVXBawyQw<br/>'
-                          'For Vimeo: follow similar steps to grab the embed URL. '
-                          'For example: https://player.vimeo.com/video/9004979'
+            ('external_video', StructBlock(
+                [
+                    ('video_url', customblocks.EmbeddedVideoBlock(
+                        help_text='For YouTube: go to your YouTube video and click “Share,” '
+                                  'then “Embed,” and then copy and paste the provided URL only. '
+                                  'For example: https://www.youtube.com/embed/3FIVXBawyQw<br/>'
+                                  'For Vimeo: follow similar steps to grab the embed URL. '
+                                  'For example: https://player.vimeo.com/video/9004979'
+                    )),
+                    ('thumbnail', ImageChooserBlock(
+                        help_text='The image to show before the video is played'
+                    )),
+                ],
+                icon='media',
             )),
         ],
         blank=True,
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html b/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
index 1d004d9e7e..2322e2b268 100644
--- a/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
@@ -11,16 +11,17 @@
 
         {# Thumbnail and overlay #}
         <button
-                id="mozfest-home-watch-featured-video-button"
-                aria-label="{% trans "Watch Video" %}"
-                class="tw-bg-black tw-w-full tw-h-full tw-absolute tw-inset-0 tw-group tw-z-10 tw-bg-cover tw-bg-center tw-transition tw-duration-500"
-                {% if block.block_type == 'video_url' %}
-                data-video-url="{{ block.value }}"
-                style="background-image: url({{ page.banner_video_thumbnail }});"
-                {% endif %}
-                {% if block.block_type == 'CMS_video' %}
-                style="background-image: url({{ block.value.thumbnail.url }});"
-                {% endif %}
+          id="mozfest-home-watch-featured-video-button"
+          aria-label="{% trans "Watch Video" %}"
+          class="tw-bg-black tw-w-full tw-h-full tw-absolute tw-inset-0 tw-group tw-z-10 tw-bg-cover tw-bg-center tw-transition tw-duration-500"
+          {% if block.block_type == 'external_video' %}
+            {% image block.value.thumbnail fill-158x158 as img %}
+            data-video-url="{{ block.value.video_url }}"
+            style="background-image: url({{ img.url }});"
+          {% endif %}
+          {% if block.block_type == 'CMS_video' %}
+            style="background-image: url({{ block.value.thumbnail.url }});"
+          {% endif %}
         >
             <span class="tw-relative tw-w-full tw-h-full tw-flex tw-justify-center tw-items-center">
               {# Opacity layer #}

From 62f762432c24bb9a20850f4666c2ae714a978ac0 Mon Sep 17 00:00:00 2001
From: Steve <steven_ts@hotmail.com>
Date: Tue, 12 Oct 2021 17:06:23 -0600
Subject: [PATCH 19/40] Fix video thumbnail overlay fade out for external
 videos

---
 .../fragments/hero/carousel_hero.html         |  2 +-
 .../fragments/hero/featured_video.html        | 34 ++++++++++++-------
 .../template-js-handler/home-banner.js        | 11 ++----
 3 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
index b44e54c567..02eb1806f5 100644
--- a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
@@ -55,7 +55,7 @@ <h1 class="tw-text-white tw-font-bold tw-mb-5">{{ page.banner_heading }}</h1>
 
     {# Video block #}
     {% if page.banner_video_url %}
-      {% include 'fragments/hero/featured_video.html' %}
+      {% include 'fragments/hero/featured_video.html'  %}
     {% endif %}
 
   </div>
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html b/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
index 2322e2b268..e47cb1ae4c 100644
--- a/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
@@ -11,17 +11,17 @@
 
         {# Thumbnail and overlay #}
         <button
-          id="mozfest-home-watch-featured-video-button"
-          aria-label="{% trans "Watch Video" %}"
-          class="tw-bg-black tw-w-full tw-h-full tw-absolute tw-inset-0 tw-group tw-z-10 tw-bg-cover tw-bg-center tw-transition tw-duration-500"
-          {% if block.block_type == 'external_video' %}
-            {% image block.value.thumbnail fill-158x158 as img %}
-            data-video-url="{{ block.value.video_url }}"
-            style="background-image: url({{ img.url }});"
-          {% endif %}
-          {% if block.block_type == 'CMS_video' %}
-            style="background-image: url({{ block.value.thumbnail.url }});"
-          {% endif %}
+                id="mozfest-home-watch-featured-video-button"
+                aria-label="{% trans "Watch Video" %}"
+                class="tw-bg-black tw-w-full tw-h-full tw-absolute tw-inset-0 tw-group tw-z-10 tw-bg-cover tw-bg-center tw-transition tw-duration-500"
+                {% if block.block_type == 'external_video' %}
+                {% image block.value.thumbnail fill-1200x600 as img %}
+                data-video-url="{{ block.value.video_url }}?&autoplay=1"
+                style="background-image: url({{ img.url }});"
+                {% endif %}
+                {% if block.block_type == 'CMS_video' %}
+                style="background-image: url({{ block.value.thumbnail.url }});"
+                {% endif %}
         >
             <span class="tw-relative tw-w-full tw-h-full tw-flex tw-justify-center tw-items-center">
               {# Opacity layer #}
@@ -33,7 +33,17 @@
         </button>
 
         {# Video #}
-        {{ block }}
+        {% if block.block_type == 'external_video' %}
+          <iframe
+                  src=""
+                  frameborder="0"
+                  class="embed-responsive-item"
+                  allow="autoplay; encrypted-media"
+                  allowfullscreen>
+          </iframe>
+        {% else %}
+          {{ block }}
+        {% endif %}
       </div>
     {% endfor %}
   </div>
diff --git a/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js b/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
index 2e9b2721f7..47b981f2b0 100644
--- a/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
+++ b/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
@@ -21,18 +21,15 @@ const watchFeaturedVideoHandler = () => {
         // Get video url from button
         const videoUrl = watchVideoButton.dataset.videoUrl;
 
-        if (videoUrl) {
-          // Add Src to video to play it
-          externalVideo.setAttribute("src", videoUrl);
-          fadeOutOverlay(watchVideoButton);
-        }
+        // Add Src to video to play it
+        externalVideo.setAttribute("src", videoUrl);
+        fadeOutOverlay(watchVideoButton);
       }
 
       if (internalVideo) {
         fadeOutOverlay(watchVideoButton);
         internalVideo.play();
       }
-
     });
   }
 };
@@ -47,7 +44,6 @@ const fadeOutOverlay = (overlay) => {
   }, 500);
 };
 
-
 const backgroundHardcodedVideoHandler = () => {
   let homepageBanner = document.querySelector(
     "#view-mozfest-home #hero .banner"
@@ -97,7 +93,6 @@ const backgroundHardcodedVideoHandler = () => {
   }
 };
 
-
 // Track video watches in google analytics
 const trackWatchVideoClicks = () => {
   ReactGA.event({

From 4a39a9d6b7d373e553855e5750197a949555317b Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Thu, 14 Oct 2021 00:16:43 +0800
Subject: [PATCH 20/40] Remove unused template blocks, simplify external_video

---
 ...esthomepage_banner_carousel_banner_video.py |  4 ++--
 network-api/networkapi/mozfest/models.py       | 16 +---------------
 .../pagemodels/customblocks/__init__.py        |  4 ++--
 .../pagemodels/customblocks/video_block.py     | 18 +++++++++++++++---
 .../blocks/embedded_video_block.html           | 18 ------------------
 5 files changed, 20 insertions(+), 40 deletions(-)
 delete mode 100644 network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html

diff --git a/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py b/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
index edd989c490..e8d024c6a3 100644
--- a/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
+++ b/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
@@ -1,4 +1,4 @@
-# Generated by Django 3.1.11 on 2021-10-12 22:31
+# Generated by Django 3.1.11 on 2021-10-13 16:13
 
 from django.db import migrations
 import networkapi.wagtailpages.pagemodels.customblocks.video_block
@@ -22,6 +22,6 @@ class Migration(migrations.Migration):
         migrations.AddField(
             model_name='mozfesthomepage',
             name='banner_video',
-            field=wagtail.core.fields.StreamField([('CMS_video', networkapi.wagtailpages.pagemodels.customblocks.video_block.WagtailVideoChooserBlock()), ('external_video', wagtail.core.blocks.StructBlock([('video_url', networkapi.wagtailpages.pagemodels.customblocks.video_block.EmbeddedVideoBlock(help_text='For YouTube: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. For example: https://www.youtube.com/embed/3FIVXBawyQw<br/>For Vimeo: follow similar steps to grab the embed URL. For example: https://player.vimeo.com/video/9004979')), ('thumbnail', wagtail.images.blocks.ImageChooserBlock(help_text='The image to show before the video is played'))], icon='media'))], blank=True, help_text='The video to play when users click "watch video"', null=True),
+            field=wagtail.core.fields.StreamField([('CMS_video', networkapi.wagtailpages.pagemodels.customblocks.video_block.WagtailVideoChooserBlock()), ('external_video', wagtail.core.blocks.StructBlock([('video_url', wagtail.core.blocks.URLBlock(help_text='For YouTube: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. For example: https://www.youtube.com/embed/3FIVXBawyQw For Vimeo: follow similar steps to grab the embed URL. For example: https://player.vimeo.com/video/9004979')), ('thumbnail', wagtail.images.blocks.ImageChooserBlock(help_text='The image to show before the video is played.'))]))], blank=True, help_text='The video to play when users click "watch video"', null=True),
         ),
     ]
diff --git a/network-api/networkapi/mozfest/models.py b/network-api/networkapi/mozfest/models.py
index 877f2ac1c1..3fed292ea6 100644
--- a/network-api/networkapi/mozfest/models.py
+++ b/network-api/networkapi/mozfest/models.py
@@ -164,21 +164,7 @@ class MozfestHomepage(MozfestPrimaryPage):
     banner_video = StreamField(
         [
             ('CMS_video', customblocks.WagtailVideoChooserBlock()),
-            ('external_video', StructBlock(
-                [
-                    ('video_url', customblocks.EmbeddedVideoBlock(
-                        help_text='For YouTube: go to your YouTube video and click “Share,” '
-                                  'then “Embed,” and then copy and paste the provided URL only. '
-                                  'For example: https://www.youtube.com/embed/3FIVXBawyQw<br/>'
-                                  'For Vimeo: follow similar steps to grab the embed URL. '
-                                  'For example: https://player.vimeo.com/video/9004979'
-                    )),
-                    ('thumbnail', ImageChooserBlock(
-                        help_text='The image to show before the video is played'
-                    )),
-                ],
-                icon='media',
-            )),
+            ('external_video', customblocks.ExternalVideoBlock()),
         ],
         blank=True,
         help_text='The video to play when users click "watch video"',
diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
index 1a60ea7943..a6ded0a97d 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py
@@ -22,7 +22,7 @@
 from .quote_block import QuoteBlock
 from .single_quote_block import SingleQuoteBlock
 from .space_card_list_block import SpaceCardListBlock
-from .video_block import EmbeddedVideoBlock, VideoBlock, WagtailVideoChooserBlock
+from .video_block import ExternalVideoBlock, VideoBlock, WagtailVideoChooserBlock
 from .youtube_regret_block import YoutubeRegretBlock
 from .articles import ArticleRichText, ArticleDoubleImageBlock, ArticleFullWidthImageBlock, ArticleImageBlock
 from .dear_internet_letter_block import DearInternetLetterBlock
@@ -43,7 +43,7 @@
     CardGrid,
     CardGridBlock,
     DearInternetLetterBlock,
-    EmbeddedVideoBlock,
+    ExternalVideoBlock,
     iFrameBlock,
     ImageBlock,
     ImageGrid,
diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py
index e1f7adeeb2..6f23d7fb89 100644
--- a/network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py
+++ b/network-api/networkapi/wagtailpages/pagemodels/customblocks/video_block.py
@@ -1,5 +1,6 @@
 from django import forms
 from wagtail.core import blocks
+from wagtail.images.blocks import ImageChooserBlock
 
 from wagtailmedia import blocks as wagtailmedia_blocks
 
@@ -12,9 +13,20 @@ def __init__(self, *args, **kwargs):
         )
 
 
-class EmbeddedVideoBlock(blocks.URLBlock):
+class ExternalVideoBlock(blocks.StructBlock):
+    video_url = blocks.URLBlock(
+        help_text='For YouTube: go to your YouTube video and click “Share,” '
+                  'then “Embed,” and then copy and paste the provided URL only. '
+                  'For example: https://www.youtube.com/embed/3FIVXBawyQw '
+                  'For Vimeo: follow similar steps to grab the embed URL. '
+                  'For example: https://player.vimeo.com/video/9004979'
+    )
+    thumbnail = ImageChooserBlock(
+        help_text='The image to show before the video is played.'
+    )
+
     class Meta:
-        template = 'wagtailpages/blocks/embedded_video_block.html'
+        icon = 'media'
 
 
 class VideoBlock(blocks.StructBlock):
@@ -48,5 +60,5 @@ class Meta:
 
 class WagtailVideoChooserBlock(wagtailmedia_blocks.VideoChooserBlock):
     class Meta:
-        icon = "media"
+        icon = 'media'
         template = 'wagtailpages/blocks/wagtail_video_block.html'
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html
deleted file mode 100644
index 89f12f96ea..0000000000
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{% extends "./base_streamfield_block.html" %}
-{% load wagtailcore_tags %}
-
-{% block block_row_classes %}
-{% endblock %}
-
-{% block main_block_class %}
-{% endblock %}
-
-{% block block_content %}
-    <iframe
-      src="{{ value }}"
-      frameborder="0"
-      class="embed-responsive-item"
-      allow="autoplay; encrypted-media"
-      allowfullscreen>
-    </iframe>
-{% endblock %}

From 585303bbacf7ec235148e13a80186204f0b214dd Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Thu, 14 Oct 2021 03:47:20 +0800
Subject: [PATCH 21/40] Update fake data

---
 network-api/networkapi/utility/faker/streamfield_provider.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/network-api/networkapi/utility/faker/streamfield_provider.py b/network-api/networkapi/utility/faker/streamfield_provider.py
index 44bf7a7f4c..0d01eea576 100644
--- a/network-api/networkapi/utility/faker/streamfield_provider.py
+++ b/network-api/networkapi/utility/faker/streamfield_provider.py
@@ -335,7 +335,10 @@ def generate_banner_carousel_field():
 
 
 def generate_banner_video_field():
-    return generate_field('video_url', 'https://www.youtube.com/embed/3FIVXBawyQw')
+    return generate_field('external_video', {
+        'video_url': 'https://www.youtube.com/embed/3FIVXBawyQw',
+        'thumbnail': choice(Image.objects.all()).id,
+    })
 
 
 class StreamfieldProvider(BaseProvider):

From 9193b7c2f82cf2b132d75dc8c65a4ceeb8a727ca Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Thu, 14 Oct 2021 04:18:08 +0800
Subject: [PATCH 22/40] CI fixes

---
 network-api/networkapi/mozfest/models.py | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/network-api/networkapi/mozfest/models.py b/network-api/networkapi/mozfest/models.py
index 3fed292ea6..dc1239bc86 100644
--- a/network-api/networkapi/mozfest/models.py
+++ b/network-api/networkapi/mozfest/models.py
@@ -2,13 +2,10 @@
 from wagtail.admin.edit_handlers import FieldPanel, StreamFieldPanel
 from wagtail.core.fields import StreamField, RichTextField
 from wagtail.core.models import Page
-from wagtail.core.blocks import StructBlock
-from wagtail.images.blocks import ImageChooserBlock
 from wagtail.images.edit_handlers import ImageChooserPanel
 from wagtail.snippets.edit_handlers import SnippetChooserPanel
 from wagtail_localize.fields import SynchronizedField, TranslatableField
 
-from networkapi.wagtailpages.pagemodels import customblocks
 from networkapi.wagtailpages.utils import (
     set_main_site_nav_information,
     get_page_tree_information

From a6a1c84f3038b3049117a6130126d4a48472d626 Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Thu, 14 Oct 2021 04:41:37 +0800
Subject: [PATCH 23/40] Use brand colors instead of rgb values

---
 source/sass/mozfest.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/source/sass/mozfest.scss b/source/sass/mozfest.scss
index d873346402..6a114bcf1e 100644
--- a/source/sass/mozfest.scss
+++ b/source/sass/mozfest.scss
@@ -240,13 +240,13 @@ body.mozfest {
 
       &::before {
         @apply tw-block tw-inset-0 tw-absolute;
-        background: rgba(255, 255, 255, 1);
+        background: rgba($white, 1);
         content: "";
       }
     }
 
     .swiper-pagination-bullet-active {
-      background: rgba(255, 255, 255, 0.2);
+      background: rgba($white, 0.2);
 
       &::before {
         animation: slide-progress-bar 10s ease-in-out forwards;
@@ -257,11 +257,11 @@ body.mozfest {
   .swiper-mobile-progress-bar {
     @apply tw-rounded-full tw-relative tw-overflow-hidden tw-w-full;
     height: 4px;
-    background: rgba(255, 255, 255, 0.5);
+    background: rgba($white, 0.5);
 
     &::before {
       @apply tw-block tw-inset-0 tw-absolute;
-      background: rgba(255, 255, 255, 1);
+      background: rgba($white, 1);
       content: "";
     }
   }

From 495ccde7590c5ca737e8f9bb841f6774aad16dd8 Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Thu, 14 Oct 2021 04:51:48 +0800
Subject: [PATCH 24/40] Add stylelint-disable

---
 source/sass/mozfest.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/source/sass/mozfest.scss b/source/sass/mozfest.scss
index 6a114bcf1e..9038b3bea9 100644
--- a/source/sass/mozfest.scss
+++ b/source/sass/mozfest.scss
@@ -240,13 +240,15 @@ body.mozfest {
 
       &::before {
         @apply tw-block tw-inset-0 tw-absolute;
-        background: rgba($white, 1);
+        background: $white;
         content: "";
       }
     }
 
     .swiper-pagination-bullet-active {
+      /* stylelint-disable */
       background: rgba($white, 0.2);
+      /* stylelint-enable */
 
       &::before {
         animation: slide-progress-bar 10s ease-in-out forwards;
@@ -257,11 +259,13 @@ body.mozfest {
   .swiper-mobile-progress-bar {
     @apply tw-rounded-full tw-relative tw-overflow-hidden tw-w-full;
     height: 4px;
+    /* stylelint-disable */
     background: rgba($white, 0.5);
+    /* stylelint-enable */
 
     &::before {
       @apply tw-block tw-inset-0 tw-absolute;
-      background: rgba($white, 1);
+      background: $white;
       content: "";
     }
   }

From f13e2c781c99d7c586d5149c02e05068ea0c4dd5 Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Thu, 14 Oct 2021 04:57:31 +0800
Subject: [PATCH 25/40] Add wagtailcore_tags

---
 .../networkapi/mozfest/templates/partials/intro_section.html    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/network-api/networkapi/mozfest/templates/partials/intro_section.html b/network-api/networkapi/mozfest/templates/partials/intro_section.html
index ec9d254863..594820fca5 100644
--- a/network-api/networkapi/mozfest/templates/partials/intro_section.html
+++ b/network-api/networkapi/mozfest/templates/partials/intro_section.html
@@ -1,3 +1,5 @@
+{% load wagtailcore_tags %}
+
 <div class="container">
   <div class="row cutout-wrapper-row">
     <div class="cutout pt-4 col-12 col-lg-8">

From de6ab70fe71839a24e6cd2c602ca93afd7ea3174 Mon Sep 17 00:00:00 2001
From: Steve <steven_ts@hotmail.com>
Date: Thu, 14 Oct 2021 16:01:26 -0600
Subject: [PATCH 26/40] Fix video conditionals on front end, remove minimum
 requirement on carousel

---
 network-api/networkapi/mozfest/models.py      |  2 +-
 .../fragments/hero/carousel_hero.html         | 14 +++--
 .../templates/fragments/hero/large.html       | 62 -------------------
 3 files changed, 11 insertions(+), 67 deletions(-)
 delete mode 100644 network-api/networkapi/mozfest/templates/fragments/hero/large.html

diff --git a/network-api/networkapi/mozfest/models.py b/network-api/networkapi/mozfest/models.py
index dc1239bc86..d9f3d93583 100644
--- a/network-api/networkapi/mozfest/models.py
+++ b/network-api/networkapi/mozfest/models.py
@@ -153,8 +153,8 @@ class MozfestHomepage(MozfestPrimaryPage):
             ('slide', customblocks.BannerCarouselSlideBlock()),
         ],
         max_num=3,
-        min_num=3,
         null=True,
+        blank=True,
     )
 
     # For banner_video_type == 'featured'
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
index 02eb1806f5..a70b0fb56d 100644
--- a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
@@ -1,6 +1,6 @@
 {% load i18n wagtailimages_tags %}
 <div data-mozfest-hero-carousel>
-  <div class="tw-relative tw-pt-[120px] tw-flex tw-flex-col tw-justify-end{% if not page.banner_video_url %} tw-pb-6 medium:tw-pb-[120px]{% endif %}">
+  <div class="tw-relative tw-pt-[120px] tw-flex tw-flex-col tw-justify-end{% if not page.banner_video %} tw-pb-6 medium:tw-pb-[120px]{% endif %}">
 
     {# Background images slider #}
     <div class="tw-absolute tw-inset-0">
@@ -54,10 +54,16 @@ <h1 class="tw-text-white tw-font-bold tw-mb-5">{{ page.banner_heading }}</h1>
     </div>
 
     {# Video block #}
-    {% if page.banner_video_url %}
-      {% include 'fragments/hero/featured_video.html'  %}
+    {% if page.banner_video %}
+      {% include 'fragments/hero/featured_video.html' %}
     {% endif %}
 
   </div>
-
 </div>
+
+{# Spacing for top of content section when there is no video #}
+{% if not page.banner_video %}
+    <div class="tw-w-full tw-bg-white tw-h-7"></div>
+{% endif %}
+
+
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/large.html b/network-api/networkapi/mozfest/templates/fragments/hero/large.html
deleted file mode 100644
index eef9710d1f..0000000000
--- a/network-api/networkapi/mozfest/templates/fragments/hero/large.html
+++ /dev/null
@@ -1,62 +0,0 @@
-{% load wagtailcore_tags wagtailimages_tags i18n static %}
-
-<div class="background-wrapper">
-  <div class="overlay"></div>
-  {% if banner_video_type == "hardcoded" %}
-    <video class="banner-video" playsinline muted loop preload
-           poster="https://s3.amazonaws.com/mofo-assets/foundation/video/mozfest-banner-video-poster.jpg" >
-      <source
-        src="https://s3.amazonaws.com/mofo-assets/foundation/video/mozfest-banner-video.mp4"
-        type="video/mp4">
-    </video>
-
-    <div class="video-control-wrapper dark-theme">
-      <div class="container">
-        <div class="row">
-          <div class="col-12">
-            <button class="btn btn-video-control btn-pause btn-secondary d-none">
-              <span>{% trans "PAUSE VIDEO" context "Pause button for video" %}</span>
-            </button>
-            <button class="btn btn-video-control btn-play btn-secondary d-none">
-              <span>{% trans "PLAY VIDEO" context "Play button for video" %}</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  {% elif banner_video_type == "featured" %}
-    <ul>
-    {% for slide_block in page.specific.banner_carousel %}
-      {% with slide=slide_block.value %}
-      <li>
-        {% image slide.image original %}
-        <h2>{{ slide.heading }}</h2>
-        <p>{{ slide.description }}</p>
-      </li>
-      {% endwith %}
-    {% endfor %}
-    </ul>
-  {% else %}
-    {% with banner=page.specific.get_banner %}
-    {% if banner %}
-      <picture>
-        {% image banner fill-4960x3000 as image_xl %}
-        {% image banner fill-2480x1500 as image_lg %}
-        {% image banner fill-1984x1200 as image_md %}
-        {% image banner fill-1536x929 as image_sm %}
-        <source media="(min-width: 1200px)" srcset="{{ image_xl.url }}">
-        <source media="(min-width: 992px)" srcset="{{ image_lg.url }}">
-        <source media="(min-width: 768px)" srcset="{{ image_md.url }}">
-        <source media="(min-width: 576px)" srcset="{{ image_sm.url }}">
-        {# Fallback Image #}
-        {% image banner fill-1536x929 alt="" %}
-      </picture>
-    {% else %}
-    <picture>
-      <img src="{% static "_images/mozfest/mozfest-home-banner-default.jpg" %}" alt="">
-    </picture>
-    {% endif %}
-    {% endwith %}
-  {% endif %}
-</div>

From 2d4633248bf739d6e5146dec2da5505924a19461 Mon Sep 17 00:00:00 2001
From: Steve <steven_ts@hotmail.com>
Date: Thu, 14 Oct 2021 16:09:01 -0600
Subject: [PATCH 27/40] Fix issue on FE template when there is no video
 thumbnail

---
 .../mozfest/templates/fragments/hero/featured_video.html      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html b/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
index e47cb1ae4c..5c9c0a528e 100644
--- a/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
@@ -20,7 +20,9 @@
                 style="background-image: url({{ img.url }});"
                 {% endif %}
                 {% if block.block_type == 'CMS_video' %}
-                style="background-image: url({{ block.value.thumbnail.url }});"
+                  {% if block.value.thumbnail %}
+                  style="background-image: url({{ block.value.thumbnail.url }});"
+                  {% endif %}
                 {% endif %}
         >
             <span class="tw-relative tw-w-full tw-h-full tw-flex tw-justify-center tw-items-center">

From 82cda8efe53584d891a9d8146d7b39c634c97e37 Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Fri, 15 Oct 2021 19:12:46 +0800
Subject: [PATCH 28/40] Update migrations

---
 .../0022_mozfesthomepage_banner_carousel_banner_video.py      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py b/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
index e8d024c6a3..ed6561c6d0 100644
--- a/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
+++ b/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
@@ -1,4 +1,4 @@
-# Generated by Django 3.1.11 on 2021-10-13 16:13
+# Generated by Django 3.1.11 on 2021-10-15 11:12
 
 from django.db import migrations
 import networkapi.wagtailpages.pagemodels.customblocks.video_block
@@ -17,7 +17,7 @@ class Migration(migrations.Migration):
         migrations.AddField(
             model_name='mozfesthomepage',
             name='banner_carousel',
-            field=wagtail.core.fields.StreamField([('slide', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('heading', wagtail.core.blocks.CharBlock(required=False)), ('description', wagtail.core.blocks.CharBlock(required=False))]))], null=True),
+            field=wagtail.core.fields.StreamField([('slide', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('heading', wagtail.core.blocks.CharBlock(required=False)), ('description', wagtail.core.blocks.CharBlock(required=False))]))], blank=True, null=True),
         ),
         migrations.AddField(
             model_name='mozfesthomepage',

From b934712beb05de29769ca37645ee2cf3a6c63dd1 Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Sat, 16 Oct 2021 00:08:03 +0800
Subject: [PATCH 29/40] Add help texts for banner_carousel and banner_video

---
 ...022_mozfesthomepage_banner_carousel_banner_video.py |  6 +++---
 network-api/networkapi/mozfest/models.py               | 10 +++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py b/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
index ed6561c6d0..74c571ec1c 100644
--- a/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
+++ b/network-api/networkapi/mozfest/migrations/0022_mozfesthomepage_banner_carousel_banner_video.py
@@ -1,4 +1,4 @@
-# Generated by Django 3.1.11 on 2021-10-15 11:12
+# Generated by Django 3.1.11 on 2021-10-15 16:07
 
 from django.db import migrations
 import networkapi.wagtailpages.pagemodels.customblocks.video_block
@@ -17,11 +17,11 @@ class Migration(migrations.Migration):
         migrations.AddField(
             model_name='mozfesthomepage',
             name='banner_carousel',
-            field=wagtail.core.fields.StreamField([('slide', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('heading', wagtail.core.blocks.CharBlock(required=False)), ('description', wagtail.core.blocks.CharBlock(required=False))]))], blank=True, null=True),
+            field=wagtail.core.fields.StreamField([('slide', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('heading', wagtail.core.blocks.CharBlock(required=False)), ('description', wagtail.core.blocks.CharBlock(required=False))]))], blank=True, help_text='The slides shown on the new Hero. Please ensure that there are exactly 3 slides. The old Hero will be shown if there are no slides present.', null=True),
         ),
         migrations.AddField(
             model_name='mozfesthomepage',
             name='banner_video',
-            field=wagtail.core.fields.StreamField([('CMS_video', networkapi.wagtailpages.pagemodels.customblocks.video_block.WagtailVideoChooserBlock()), ('external_video', wagtail.core.blocks.StructBlock([('video_url', wagtail.core.blocks.URLBlock(help_text='For YouTube: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. For example: https://www.youtube.com/embed/3FIVXBawyQw For Vimeo: follow similar steps to grab the embed URL. For example: https://player.vimeo.com/video/9004979')), ('thumbnail', wagtail.images.blocks.ImageChooserBlock(help_text='The image to show before the video is played.'))]))], blank=True, help_text='The video to play when users click "watch video"', null=True),
+            field=wagtail.core.fields.StreamField([('CMS_video', networkapi.wagtailpages.pagemodels.customblocks.video_block.WagtailVideoChooserBlock()), ('external_video', wagtail.core.blocks.StructBlock([('video_url', wagtail.core.blocks.URLBlock(help_text='For YouTube: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. For example: https://www.youtube.com/embed/3FIVXBawyQw For Vimeo: follow similar steps to grab the embed URL. For example: https://player.vimeo.com/video/9004979')), ('thumbnail', wagtail.images.blocks.ImageChooserBlock(help_text='The image to show before the video is played.'))]))], blank=True, help_text='The video to play when users click "Watch Video". This is only shown on the new Hero.', null=True),
         ),
     ]
diff --git a/network-api/networkapi/mozfest/models.py b/network-api/networkapi/mozfest/models.py
index d9f3d93583..a5ec748d51 100644
--- a/network-api/networkapi/mozfest/models.py
+++ b/network-api/networkapi/mozfest/models.py
@@ -153,8 +153,11 @@ class MozfestHomepage(MozfestPrimaryPage):
             ('slide', customblocks.BannerCarouselSlideBlock()),
         ],
         max_num=3,
-        null=True,
+        help_text='The slides shown on the new Hero. Please ensure that there '
+                  'are exactly 3 slides. The old Hero will be shown if there '
+                  'are no slides present.',
         blank=True,
+        null=True,
     )
 
     # For banner_video_type == 'featured'
@@ -163,9 +166,10 @@ class MozfestHomepage(MozfestPrimaryPage):
             ('CMS_video', customblocks.WagtailVideoChooserBlock()),
             ('external_video', customblocks.ExternalVideoBlock()),
         ],
-        blank=True,
-        help_text='The video to play when users click "watch video"',
         max_num=1,
+        help_text='The video to play when users click "Watch Video". This is '
+                  'only shown on the new Hero.',
+        blank=True,
         null=True,
     )
 

From 7add0fb6b0fdbe9f3351023569169fedde2c28f5 Mon Sep 17 00:00:00 2001
From: Steve <steven_ts@hotmail.com>
Date: Fri, 15 Oct 2021 11:26:01 -0600
Subject: [PATCH 30/40] Scroll to video with offset through JS

---
 .../templates/fragments/hero/carousel_hero.html  |  2 +-
 .../mozfest-hero-carousel.js                     |  1 +
 .../mozfest/template-js-handler/home-banner.js   | 16 ++++++++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
index a70b0fb56d..c9f27c5af1 100644
--- a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
@@ -27,7 +27,7 @@
       <div>
         <h1 class="tw-text-white tw-font-bold tw-mb-5">{{ page.banner_heading }}</h1>
         {% if page.banner_video %}
-          <a href="#mozfest-hero-video" class="btn btn-primary tw-bg-white tw-text-black hover:tw-bg-gray-05">{% trans "Watch last year’s recap video" %}</a>
+          <button id="mozfest-hero-video-cta" class="btn btn-primary tw-bg-white tw-text-black hover:tw-bg-gray-05">{% trans "Watch last year’s recap video" %}</button>
         {% endif %}
       </div>
 
diff --git a/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js b/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
index 1a4498a813..ea9fc6899f 100644
--- a/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
+++ b/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
@@ -25,6 +25,7 @@ class MozfestHeroCarousel {
       watchSlidesProgress: true,
       autoplay: {
         delay: this.delay,
+        disableOnInteraction: false,
       },
       paginationClickable: false,
       keyboard: {
diff --git a/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js b/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
index 47b981f2b0..e10882a0e8 100644
--- a/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
+++ b/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
@@ -102,6 +102,21 @@ const trackWatchVideoClicks = () => {
   });
 }
 
+const scrollToVideoHandler = () => {
+  let element = document.getElementById('mozfest-hero-video');
+  let button = document.getElementById('mozfest-hero-video-cta');
+  let headerOffset = 90;
+  let elementPosition = element.getBoundingClientRect().top;
+  let offsetPosition = elementPosition - headerOffset;
+
+  button.addEventListener('click', () => {
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: "smooth"
+    });
+  })
+}
+
 
 /**
  * Bind handlers to MozFest homepage banner
@@ -109,4 +124,5 @@ const trackWatchVideoClicks = () => {
 export default () => {
   watchFeaturedVideoHandler();
   backgroundHardcodedVideoHandler();
+  scrollToVideoHandler();
 };

From 60ef9e41af9382fb43489c9c3abf95998966302b Mon Sep 17 00:00:00 2001
From: Steve <steven_ts@hotmail.com>
Date: Fri, 15 Oct 2021 11:27:50 -0600
Subject: [PATCH 31/40] Still autoplay after interacting with banner carousel

---
 .../js/components/mozfest-hero-carousel/mozfest-hero-carousel.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js b/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
index ea9fc6899f..a3b4e2274f 100644
--- a/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
+++ b/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
@@ -51,6 +51,7 @@ class MozfestHeroCarousel {
       },
       autoplay: {
         delay: this.delay,
+        disableOnInteraction: false,
       },
       slidesPerView: 1,
       centeredSlides: true,

From 2bea4432d60b73b715ccf942dc1f083d02c35615 Mon Sep 17 00:00:00 2001
From: Steve <steven_ts@hotmail.com>
Date: Fri, 15 Oct 2021 11:43:53 -0600
Subject: [PATCH 32/40] Add blue hover to CTA button

---
 .../mozfest/templates/fragments/hero/carousel_hero.html         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
index c9f27c5af1..06a682bdcd 100644
--- a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
@@ -27,7 +27,7 @@
       <div>
         <h1 class="tw-text-white tw-font-bold tw-mb-5">{{ page.banner_heading }}</h1>
         {% if page.banner_video %}
-          <button id="mozfest-hero-video-cta" class="btn btn-primary tw-bg-white tw-text-black hover:tw-bg-gray-05">{% trans "Watch last year’s recap video" %}</button>
+          <button id="mozfest-hero-video-cta" class="btn btn-primary tw-bg-white tw-text-black hover:tw-bg-blue hover:tw-text-white">{% trans "Watch last year’s recap video" %}</button>
         {% endif %}
       </div>
 

From 9f48b1a162ee16e307b5e67a798bd2fd09c61de6 Mon Sep 17 00:00:00 2001
From: Steve <steven_ts@hotmail.com>
Date: Fri, 15 Oct 2021 11:44:42 -0600
Subject: [PATCH 33/40] Change selector to string instead of function for hero
 carousel

---
 .../mozfest-hero-carousel/mozfest-hero-carousel.js          | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js b/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
index a3b4e2274f..6533512891 100644
--- a/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
+++ b/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
@@ -3,9 +3,7 @@ import Swiper, {A11y, Autoplay, Pagination, Navigation, Keyboard, EffectFade} fr
 Swiper.use([A11y, Autoplay, Pagination, Navigation, Keyboard, EffectFade]);
 
 class MozfestHeroCarousel {
-  static selector() {
-    return "[data-mozfest-hero-carousel]";
-  }
+  static selector = "[data-mozfest-hero-carousel]";
 
   constructor(node) {
     this.node = node;
@@ -75,7 +73,7 @@ class MozfestHeroCarousel {
 const MozfestHeroCarousels = {
   init: function () {
     for (const carousel of document.querySelectorAll(
-      MozfestHeroCarousel.selector()
+      MozfestHeroCarousel.selector
     )) {
       new MozfestHeroCarousel(carousel);
     }

From b476f4ad85695b3e4f7193573f0f9acc6a0f2c34 Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Tue, 19 Oct 2021 11:59:00 +0800
Subject: [PATCH 34/40] Fix eslint issues

---
 .../mozfest-hero-carousel.js                      | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js b/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
index 6533512891..956f4daf2b 100644
--- a/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
+++ b/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
@@ -1,10 +1,15 @@
-import Swiper, {A11y, Autoplay, Pagination, Navigation, Keyboard, EffectFade} from 'swiper';
+import Swiper, {
+  A11y,
+  Autoplay,
+  Pagination,
+  Navigation,
+  Keyboard,
+  EffectFade,
+} from "swiper";
 
 Swiper.use([A11y, Autoplay, Pagination, Navigation, Keyboard, EffectFade]);
 
 class MozfestHeroCarousel {
-  static selector = "[data-mozfest-hero-carousel]";
-
   constructor(node) {
     this.node = node;
     this.delay = 10000;
@@ -66,14 +71,14 @@ class MozfestHeroCarousel {
       if (event.swipeDirection === "prev") {
         this.backGroundImagesSwiper.slidePrev();
       }
-    })
+    });
   }
 }
 
 const MozfestHeroCarousels = {
   init: function () {
     for (const carousel of document.querySelectorAll(
-      MozfestHeroCarousel.selector
+      "[data-mozfest-hero-carousel]"
     )) {
       new MozfestHeroCarousel(carousel);
     }

From eb81ac561b130dca7b83e9e8367484a2a7fa941b Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Tue, 19 Oct 2021 12:16:37 +0800
Subject: [PATCH 35/40] Fix Percy issues

---
 .../template-js-handler/home-banner.js        | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js b/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
index e10882a0e8..0ef369257e 100644
--- a/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
+++ b/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
@@ -105,16 +105,19 @@ const trackWatchVideoClicks = () => {
 const scrollToVideoHandler = () => {
   let element = document.getElementById('mozfest-hero-video');
   let button = document.getElementById('mozfest-hero-video-cta');
-  let headerOffset = 90;
-  let elementPosition = element.getBoundingClientRect().top;
-  let offsetPosition = elementPosition - headerOffset;
-
-  button.addEventListener('click', () => {
-    window.scrollTo({
-      top: offsetPosition,
-      behavior: "smooth"
-    });
-  })
+
+  if (element && button) {
+    let headerOffset = 90;
+    let elementPosition = element.getBoundingClientRect().top;
+    let offsetPosition = elementPosition - headerOffset;
+
+    button.addEventListener('click', () => {
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: "smooth"
+      });
+    })
+  }
 }
 
 

From e3da22ebbe385e703152917267efd5dcf04df13c Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Wed, 20 Oct 2021 20:24:57 +0800
Subject: [PATCH 36/40] Update comment on `banner_video_type`
 https://github.com/mozilla/foundation.mozilla.org/pull/7585#discussion_r732191949

---
 network-api/networkapi/mozfest/models.py | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/network-api/networkapi/mozfest/models.py b/network-api/networkapi/mozfest/models.py
index a5ec748d51..a4d4f1cb1a 100644
--- a/network-api/networkapi/mozfest/models.py
+++ b/network-api/networkapi/mozfest/models.py
@@ -110,9 +110,14 @@ class MozfestHomepage(MozfestPrimaryPage):
     MozFest Homepage
 
     'banner_video_type' determines what version of banner design the page should load
-    """
 
-    #  this tells the templates to load a hardcoded, pre-defined video in the banner background
+    If the value of `banner_video_type` is `hardcoded`, it displays a hardcoded,
+    predefined video in the banner background.
+
+    If the value of `banner_video_type` is `featured`, it displays a carousel of
+    cards with their associated headings and body content (`banner_carousel`),
+    and an embedded user-defined video (`banner_video`).
+    """
     banner_video_type = "featured"
 
     cta_button_label = models.CharField(

From 46c0fc61282cd7018b51bb4ab8a198cfb0c3166f Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Wed, 20 Oct 2021 20:25:31 +0800
Subject: [PATCH 37/40] Remove fallback text for <video>
 https://github.com/mozilla/foundation.mozilla.org/pull/7585#discussion_r732193989

---
 .../templates/wagtailpages/blocks/wagtail_video_block.html     | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/wagtail_video_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/wagtail_video_block.html
index c8810f8b34..5090271cf4 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/wagtail_video_block.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/wagtail_video_block.html
@@ -18,8 +18,5 @@
     {% endfor %}
   >
   {% endfor %}
-
-  {# Fallback #}
-  <p>Your browser does not support the video element.</p>
 </video>
 {% endblock %}

From 65867a30a3466903405e1d3fa8179363222b1785 Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Wed, 20 Oct 2021 20:28:12 +0800
Subject: [PATCH 38/40] Run npm run optimize:svg on play-circle-grey
 https://github.com/mozilla/foundation.mozilla.org/pull/7585#discussion_r732195807

---
 source/images/mozfest/play-circle-grey.svg | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/source/images/mozfest/play-circle-grey.svg b/source/images/mozfest/play-circle-grey.svg
index 99e0e3c47c..fa3b3a4c01 100644
--- a/source/images/mozfest/play-circle-grey.svg
+++ b/source/images/mozfest/play-circle-grey.svg
@@ -1,13 +1 @@
-<svg viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#a)">
-    <path
-      d="M73.286 51.7056 38.4153 34.2877c-.4705-.2177-.9879-.3144-1.5053-.2814-.5174.0331-1.0183.1949-1.4572.4708-.4388.2758-.8016.6569-1.0553 1.1086-.2537.4517-.3903.9596-.3974 1.4775V71.884c-.0044.5316.1286 1.0554.386 1.5206.2575.4653.6307.8564 1.0837 1.1354.453.2791.9703.4367 1.5021.4576.5318.0209 1.0599-.0956 1.5335-.3382L73.286 57.2415c.5152-.2583.9483-.6547 1.251-1.1448.3027-.4902.463-1.0547.463-1.6306 0-.5759-.1603-1.1405-.463-1.6306s-.7358-.8865-1.251-1.1449v.015Z"
-      fill="#CBCBCB"/>
-  </g>
-  <circle cx="54" cy="54" r="51.5" stroke="#CBCBCB" stroke-width="5"/>
-  <defs>
-    <clipPath id="a">
-      <path fill="#fff" transform="translate(34 34)" d="M0 0h41v41H0z"/>
-    </clipPath>
-  </defs>
-</svg>
+<svg viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="m73.286 51.706-34.87-17.418a3.113 3.113 0 0 0-4.018 1.298A3.11 3.11 0 0 0 34 37.063v34.821a3.088 3.088 0 0 0 2.972 3.114c.532.02 1.06-.096 1.533-.339l34.781-17.418a3.107 3.107 0 0 0 1.251-4.406 3.108 3.108 0 0 0-1.251-1.144v.015Z" fill="#CBCBCB"/></g><circle cx="54" cy="54" r="51.5" stroke="#CBCBCB" stroke-width="5"/><defs><clipPath id="a"><path fill="#fff" transform="translate(34 34)" d="M0 0h41v41H0z"/></clipPath></defs></svg>
\ No newline at end of file

From 32a90db9524436fb15e0b151d9a347b0e1d24dcb Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Thu, 21 Oct 2021 20:53:17 +0800
Subject: [PATCH 39/40] Change "PLAY VIDEO" and "PAUSE VIDEO" to normal case,
 use text-transform to transform them to uppercase

---
 .../templates/fragments/hero/hardcoded_video_hero.html        | 4 ++--
 source/sass/mozfest.scss                                      | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/hardcoded_video_hero.html b/network-api/networkapi/mozfest/templates/fragments/hero/hardcoded_video_hero.html
index 01fa5645e6..3ddf892f1e 100644
--- a/network-api/networkapi/mozfest/templates/fragments/hero/hardcoded_video_hero.html
+++ b/network-api/networkapi/mozfest/templates/fragments/hero/hardcoded_video_hero.html
@@ -14,10 +14,10 @@
         <div class="row">
           <div class="col-12">
             <button class="btn btn-video-control btn-pause btn-secondary d-none">
-              <span>{% trans "PAUSE VIDEO" context "Pause button for video" %}</span>
+              <span>{% trans "Pause video" context "Pause button for video" %}</span>
             </button>
             <button class="btn btn-video-control btn-play btn-secondary d-none">
-              <span>{% trans "PLAY VIDEO" context "Play button for video" %}</span>
+              <span>{% trans "Play video" context "Play button for video" %}</span>
             </button>
           </div>
         </div>
diff --git a/source/sass/mozfest.scss b/source/sass/mozfest.scss
index 9038b3bea9..0c2efe735e 100644
--- a/source/sass/mozfest.scss
+++ b/source/sass/mozfest.scss
@@ -54,6 +54,7 @@ body.mozfest {
           height: $icon-size;
           background: center left/$icon-size $icon-size no-repeat transparent;
           padding-left: calc(#{$icon-size} + 0.5rem);
+          text-transform: uppercase;
           // due to a Safari bug, we have to remove transition for these buttons
           // so background SVGs don't get resized on hover
           transition: none;

From 9e009699fd1ed00d8212832499d75c22cc60dbb2 Mon Sep 17 00:00:00 2001
From: boggs <hello@boggs.xyz>
Date: Thu, 21 Oct 2021 21:19:44 +0800
Subject: [PATCH 40/40] Use template literals for query selectors, use forEach
 instead of for

---
 .../mozfest-hero-carousel/mozfest-hero-carousel.js        | 8 +++-----
 .../pages/mozfest/template-js-handler/home-banner.js      | 6 +++---
 source/js/main.js                                         | 2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js b/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
index 956f4daf2b..b1ee4c2e2e 100644
--- a/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
+++ b/source/js/components/mozfest-hero-carousel/mozfest-hero-carousel.js
@@ -77,11 +77,9 @@ class MozfestHeroCarousel {
 
 const MozfestHeroCarousels = {
   init: function () {
-    for (const carousel of document.querySelectorAll(
-      "[data-mozfest-hero-carousel]"
-    )) {
-      new MozfestHeroCarousel(carousel);
-    }
+    document
+      .querySelectorAll(`[data-mozfest-hero-carousel]`)
+      .forEach((e) => new MozfestHeroCarousel(e));
   },
 };
 
diff --git a/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js b/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
index 0ef369257e..c823d9fcf6 100644
--- a/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
+++ b/source/js/foundation/pages/mozfest/template-js-handler/home-banner.js
@@ -1,12 +1,12 @@
-import {ReactGA} from "../../../../common";
+import { ReactGA } from "../../../../common";
 
 // For the featured banner type on mozefest homepage
 const watchFeaturedVideoHandler = () => {
   const watchVideoButton = document.querySelector(
       `#mozfest-home-watch-featured-video-button`
   );
-  const externalVideo = document.querySelector("#mozfest-hero-video iframe");
-  const internalVideo = document.querySelector("#mozfest-hero-video video");
+  const externalVideo = document.querySelector(`#mozfest-hero-video iframe`);
+  const internalVideo = document.querySelector(`#mozfest-hero-video video`);
 
   // If no video exists then do nothing
   if (!externalVideo && !internalVideo) {
diff --git a/source/js/main.js b/source/js/main.js
index 4886b0d898..e1dc3d7eaa 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -141,7 +141,7 @@ let main = {
     }
 
     // Mozfest pages
-    if (document.querySelector(".mozfest")) {
+    if (document.querySelector(`.mozfest`)) {
       MozfestHeroCarousels.init();
     }
   },