ISTWCMS-7002: add the media flags to banners twig so that we can turn things on/off

src/patterns/04-components/banners/banners.twig

@@ -11,6 +11,7 @@
   {% block content %}
     {% include '@components/card/card--banner/card--banner.twig' with {
       'banners': banners,
+      'media_flags': media_flags
     } %}
   {% endblock %}
 

src/patterns/04-components/card/card-elements/_banner.twig

@@ -29,80 +29,80 @@
       {% endif %}
   {% endif %}
 	<div class="card__banner--media">
-	{% if image.type == "uw_para_local_video_banner" %}
-	<div id="{{ image.uuid }}" class="uw-video-wrapper {{ image.type }}">
-	  <video id="video-{{ image.uuid }}" aria-label="video"  muted="1" loop="1"  class="video-{{ image.uuid }}" autoplay="1" poster="{{ image.img_element }}" width="100%">
-	    <source src="{{ image.video }}"  type="video/mp4" />
-	    Your browser does not support the video tag.
-	  </video>
-	</div>
-	{% elseif image.type == "uw_para_vimeo_video_banner" %}
-	<div id="{{ banners.uuid }}" class="uw-video-wrapper {{ image.type }}">
-	{% set remote_video = {'video': image.video} %}
-	{% include '@components/remote-video/remote-video.twig' with {
-	  remote_video: remote_video
-	} %}
-	</div>
-	{% else %}
-    {% if listing_image.img_element %}
-      {% include "@components/responsive-image/responsive-image.twig" with {
-        sources: image.sources,
-        img_element: listing_image.img_element,
-        alt: listing_image.alt
-      }%}
+    {% if image.type == "uw_para_local_video_banner" %}
+      <div id="{{ image.uuid }}" class="uw-video-wrapper {{ image.type }}">
+        <video id="video-{{ image.uuid }}" aria-label="video"  muted="1" loop="1"  class="video-{{ image.uuid }}" autoplay="1" poster="{{ image.img_element }}" width="100%">
+          <source src="{{ image.video }}"  type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      </div>
+    {% elseif image.type == "uw_para_vimeo_video_banner" %}
+      <div id="{{ banners.uuid }}" class="uw-video-wrapper {{ image.type }}">
+        {% set remote_video = {'video': image.video} %}
+        {% include '@components/remote-video/remote-video.twig' with {
+          remote_video: remote_video
+        } %}
+      </div>
     {% else %}
-      {% include "@components/responsive-image/responsive-image.twig" with {
-        sources: image.sources,
-        img_element: image.img_element,
-        alt: image.alt
-      }%}
+      {% if listing_image.img_element %}
+        {% include "@components/responsive-image/responsive-image.twig" with {
+          sources: image.sources,
+          img_element: listing_image.img_element,
+          alt: listing_image.alt
+        }%}
+      {% else %}
+        {% include "@components/responsive-image/responsive-image.twig" with {
+          sources: image.sources,
+          img_element: image.img_element,
+          alt: image.alt
+        }%}
+      {% endif %}
     {% endif %}
-  {% endif %}
   </div>
   {% if not text_overlay_big or image.small_text or image.other_text or image.tag %}
     <div class="card__banner--caption {{ image.type }}">
-    {% if banners.text_overlay == "left-dark" or banners.text_overlay == "left-light" or text_overlay_class == 'uw-text-overlay--none' %}
-      <div class="card__banner--text-align">
-      {% endif %}
-      {% if image.tag %}
-        {% include '@components/tag-list/tag-list.twig' with {
-          'items': image.tag,
-        } %}
-      {% endif %}
-      {% if image.big_text or image.small_text or image.other_text %}
-        {% if banners.use_page_title_big_text %}
-          {% if banners.text_overlay != "split" %}
-            <h1 class="card__banner--title">{{ image.big_text }}</h1>
-          {% endif %}
-        {% else %}
-          {% if banners.text_overlay != "split" %}
-            {% if image.big_text %}
-                <span class="card__banner--title">
-                 <strong>
-                  {{ image.big_text }}
-                 </strong>
-                </span>
+      {% if banners.text_overlay == "left-dark" or banners.text_overlay == "left-light" or text_overlay_class == 'uw-text-overlay--none' %}
+        <div class="card__banner--text-align">
+        {% endif %}
+        {% if image.tag %}
+          {% include '@components/tag-list/tag-list.twig' with {
+            'items': image.tag,
+          } %}
+        {% endif %}
+        {% if image.big_text or image.small_text or image.other_text %}
+          {% if banners.use_page_title_big_text %}
+            {% if banners.text_overlay != "split" %}
+              <h1 class="card__banner--title">{{ image.big_text }}</h1>
+            {% endif %}
+          {% else %}
+            {% if banners.text_overlay != "split" %}
+              {% if image.big_text %}
+                  <span class="card__banner--title">
+                   <strong>
+                    {{ image.big_text }}
+                   </strong>
+                  </span>
+              {% endif %}
             {% endif %}
           {% endif %}
+          {% if image.small_text %}
+          <span class="card__banner--sub-title">
+            {{ image.small_text }}
+          </span>
+        {% endif %}
+        {% if image.other_text %}
+          <div class="card__banner--other-split">{{ image.other_text }}</div>
         {% endif %}
-        {% if image.small_text %}
-        <span class="card__banner--sub-title">
-          {{ image.small_text }}
-        </span>
       {% endif %}
-      {% if image.other_text %}
-        <div class="card__banner--other-split">{{ image.other_text }}</div>
+      {% if banners.text_overlay == "left-dark" or banners.text_overlay == "left-light" or text_overlay_class == "uw-text-overlay--none" %}
+        </div>
       {% endif %}
-  {% endif %}
-  {% if banners.text_overlay == "left-dark" or banners.text_overlay == "left-light" or text_overlay_class == "uw-text-overlay--none" %}
     </div>
   {% endif %}
-  </div>
-  {% endif %}
   {% if image.link %}
     </a>
   {% endif %}
-  {% if image.type == "uw_para_local_video_banner" %}
+  {% if image.type == "uw_para_local_video_banner" and media_flags.use_play_pause %}
     <div class="video-bottom">
       <div class="controls embedded-video-controls">
         <button id="btn-{{ image.uuid }}"  class="banner-video-control video-control uw-video-pause" aria-label="Pause" title="Pause Video Autoplay">

src/patterns/04-components/card/card-elements/_media.twig

@@ -2,7 +2,8 @@
 
   {% if media.type == 'banner' %}
     {% include '@components/banners/banners.twig' with {
-      'banners': media.media
+      'banners': media.media,
+      'media_flags': media_flags
     } only %}
   {% endif %}
 
@@ -16,7 +17,8 @@
 
   {% if media.type == 'remote_video' %}
     {% include '@components/remote-video/remote-video.twig' with {
-      'remote_video': media.media
+      'remote_video': media.media,
+      'media_flags': media_flags
     } %}
   {% endif %}
 </div>