From 7297a1632578dc10288dbcbcd3c07f11dc55b160 Mon Sep 17 00:00:00 2001
From: Joe Savella <jsavella@esri.com>
Date: Mon, 13 Jan 2025 12:43:06 -0800
Subject: [PATCH] Media Split Style Play Button  (#515)

* play button

* decorate playbutton

* add space between comma

* re-order properties

* re-order properties

* re-order properties

* re-order properties

* re-order properties

* re-order properties

* re-order properties

* re-order properties

* re-order properties

* re-order properties

* re-order properties

* re-order properties

* refactor

* lint errors

* re-order properties

* refactor

---------

Co-authored-by: Joe-Savella <josephsavella@yahoo.com>
---
 eds/blocks/columns/columns.css | 14 ++++++++++++++
 eds/blocks/columns/columns.js  | 21 +++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/eds/blocks/columns/columns.css b/eds/blocks/columns/columns.css
index 49b0dc90..38500acd 100644
--- a/eds/blocks/columns/columns.css
+++ b/eds/blocks/columns/columns.css
@@ -51,6 +51,20 @@
   justify-content: center;
 }
 
+.columns .play-button {
+  align-items: center;
+  display: flex;
+  inset-block-start: calc(50% - 25px);
+  inset-inline-end: calc(50% - 25px);
+  justify-content: center;
+  position: absolute;
+}
+
+.columns .video-link {
+  display: block;
+  position: relative;
+}
+
 .columns.media-split > div > .columns-img-col img {
   padding-inline: var(--space-6);
 }
diff --git a/eds/blocks/columns/columns.js b/eds/blocks/columns/columns.js
index 33569727..b8b1b79c 100644
--- a/eds/blocks/columns/columns.js
+++ b/eds/blocks/columns/columns.js
@@ -56,6 +56,27 @@ export default function decorate(block) {
       if (p?.querySelector('picture')) {
         p.classList.add('columns-p');
       }
+
+      // decorate play button
+      const vidURL = col.querySelector('a[href*="mediaspace"]', 'a[href*="youtube"]', 'a[href*="video"]');
+      const picture = col.querySelector('picture');
+      if (vidURL) {
+        vidURL.innerHTML = '';
+        vidURL.appendChild(picture);
+        const playButton = calciteButton({
+          class: 'play-button',
+          'icon-start': 'play-f',
+          label: 'play video',
+          'aria-hidden': 'false',
+          'aria-label': 'play video',
+          appearance: 'solid',
+          kind: 'inverse',
+          scale: 'l',
+          round: '',
+        });
+
+        vidURL.appendChild(playButton);
+      }
     });
   });
 }