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 <[email protected]>
Esri · Jan 13, 2025 · 7297a16 · 7297a16
1 parent 6678566
commit 7297a16
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git 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
@@ -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);
+      }
     });
   });
 }