IYY-279: Visitors can listen to Posts - aka Audio player component

atomic.libraries.yml

@@ -79,16 +79,19 @@ calendar:
     node_modules/@yalesites-org/component-library-twig/dist/js/03-organisms/calendar/yds-calendar.js: {}
   dependencies:
     - core/drupal.ajax
+audio-player:
+  js:
+    node_modules/@yalesites-org/component-library-twig/dist/js/01-atoms/audio/yds-audio-player.js: {}
+ys_embed:
+  dependencies:
+    - core/jquery
 in-this-section:
   js:
     node_modules/@yalesites-org/component-library-twig/dist/js/02-molecules/menu/menu-in-this-section-toggle/yds-menu-in-this-section-toggle.js: {}
     node_modules/@yalesites-org/component-library-twig/dist/js/03-organisms/site-in-this-section/yds-site-in-this-section.js: {}
 utility-nav-dropdown-menu:
   js:
     node_modules/@yalesites-org/component-library-twig/dist/js/03-organisms/menu/utility-nav/utility-nav-dropdown-menu.js: {}
-ys_embed:
-  dependencies:
-    - core/jquery
 read-time:
   js:
     node_modules/@yalesites-org/component-library-twig/dist/js/02-molecules/read-time/yds-read-time.js: {}

css/layout-builder.css

@@ -60,7 +60,7 @@ need to have margin-bottom set to 0 */
 .main-content .layout.layout--onecol:last-of-type .layout__region--content:last-child .grand-hero-banner:last-child,
 .main-content .layout.layout--onecol:last-of-type .layout__region--content:last-child .image-banner:last-child,
 .main-content .layout.layout--onecol:last-of-type .layout__region--content:last-child .quick-links:last-child,
-.main-content .layout.layout--onecol:last-of-type .layout__region--content:last-child .text-with-image:not([data-component-theme='default']):last-child, 
+.main-content .layout.layout--onecol:last-of-type .layout__region--content:last-child .text-with-image:not([data-component-theme='default']):last-child,
 .main-content .layout.layout--onecol:last-of-type .layout__region--content:last-child .content-spotlight-portrait:not([data-component-theme='default']):last-child {
   margin-bottom: 0;
 }
@@ -201,7 +201,7 @@ div[data-drupal-selector="edit-block-form"] {
 }
 
 
-#drupal-off-canvas-wrapper .draggable:hover, 
+#drupal-off-canvas-wrapper .draggable:hover,
 #drupal-off-canvas-wrapper .draggable:focus-within {
   background-color: var(--gin-bg-layer2);
 }
@@ -220,7 +220,7 @@ div[data-drupal-selector="edit-block-form"] {
 .yds-layout.layout-builder__layout[data-component-theme="four"] .layout-builder__link.layout-builder__link--add:hover {
   background-color: var(--gin-color-primary-hover) !important;
   border-color: white !important;
-} 
+}
 
 /* Change layoutbuilder configure/UI element colors in dark mode because the defaults don't look good */
 .gin--dark-mode .layout-builder__link--configure:hover {
@@ -246,7 +246,7 @@ div[data-drupal-selector="edit-block-form"] {
 }
 
 /* Override layout builder block categories hover state in dark mode */
-.gin--dark-mode .glb-grid-item:hover, 
+.gin--dark-mode .glb-grid-item:hover,
 .gin--dark-mode .layout-builder-browser-block-item:hover {
   color: white;
   background-color: var(--gin-color-primary-light-rgb) !important;
@@ -341,6 +341,10 @@ th.field-label {
   display: none;
 }
 
+/* Fix for .layout-builder-block word-break */
+.audio-embed.layout-builder-block {
+  word-break: normal;
+}
 /* Fix for caption in image banner */
 /* This is an override for a core CSS file for tables which has too broad styles for .caption */
 .js-layout-builder-block .image-banner__image figcaption.caption  {
@@ -354,12 +358,12 @@ th.field-label {
   margin-bottom: 0;
 }
 
-/* Adjust top-margin if an element with an [data-spotlights-position="first" or data-spotlights-position="first-and-last" 
+/* Adjust top-margin if an element with an [data-spotlights-position="first" or data-spotlights-position="first-and-last"
 // is the first element in main content */
 .main-content [data-spotlights-position="first"]:first-child,
 .main-content [data-spotlights-position="first-and-last"]:first-child,
 /* page-meta will almost always be the first element in main content, so we need a condition for it */
 .main-content > .page-meta + [data-spotlights-position="first-and-last"],
 .main-content > .page-meta + [data-spotlights-position="first"] {
   margin-top: 0;
-} 
+}

templates/block/layout-builder/block--inline-block--audio.html.twig

@@ -0,0 +1,23 @@
+{% extends "@atomic/block/layout-builder/_layout-builder-block-template.twig" %}
+
+{% block content %}
+
+  {% if parentNode == 'post' or parentNode == 'event' %}
+    {% set audio_embed__width = "content" %}
+    {% set audio_embed__alignment = "center" %}
+  {% else %}
+    {% set audio_embed__width = "site" %}
+    {% set audio_embed__alignment = "left" %}
+  {% endif %}
+
+  {% embed "@atoms/audio/yds-audio.twig" with {
+    audio_embed__width: audio_embed__width,
+    audio_embed__content: content.field_audio_label.0,
+  } %}
+    {% block audio_embed__source %}
+      {% if content.field_media.0['#media'].field_media_audio_file.entity.uri.value is not empty %}
+        {{ content.field_media }}
+      {% endif %}
+    {% endblock %}
+  {% endembed %}
+{% endblock %}

templates/field/field--block-content--field-media--audio.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+  {{ item.content }}
+{% endfor %}

templates/field/field--media--field-file-title--audio.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+  {{ item.content }}
+{% endfor %}

templates/field/field--media--field-media-audio-file--audio.html.twig

@@ -0,0 +1,5 @@
+{{ attach_library('atomic/audio-player') }}
+
+{% for item in items %}
+  {{item.content}}
+{% endfor %}

templates/media/media--audio.html.twig

@@ -0,0 +1 @@
+{{content}}