EWPP-1822: Display live stream information at the exact time.

modules/oe_theme_content_event/js/event_livestream.js

@@ -0,0 +1,23 @@
+/**
+ * @file
+ * Attaches behaviors for Event Livestreams.
+ */
+(function (Drupal, drupalSettings) {
+  /**
+   * Shows related description and link when livestream is active.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the Livestream behaviors.
+   */
+  Drupal.behaviors.liveStreamDiscloser = {
+    attach: function attach(context) {
+      setTimeout(function () {
+        Array.prototype.forEach.call(document.querySelectorAll('[data-livestream-element]'), function (element) {
+          element.classList.remove('ecl-u-d-none');
+        });
+      }, drupalSettings.oe_theme_content_event.livestream_starttime_timestamp - Date.now())
+    },
+  };
+})(Drupal, drupalSettings);

modules/oe_theme_content_event/oe_theme_content_event.libraries.yml

@@ -0,0 +1,6 @@
+livestream_link_disclosure:
+  js:
+    js/event_livestream.js: {}
+  dependencies:
+    - core/drupal
+    - core/jquery

modules/oe_theme_content_event/oe_theme_content_event.module

@@ -48,6 +48,7 @@ function oe_theme_content_event_theme() {
     ],
     'oe_theme_content_event_online_description' => [
       'variables' => [
+        'hidden' => FALSE,
         'label' => '',
         'url' => '',
         'description' => '',
@@ -58,6 +59,7 @@ function oe_theme_content_event_theme() {
         'label' => '',
         'url' => '',
         'date' => '',
+        'hide_link' => FALSE,
       ],
     ],
     'oe_theme_content_event_status_message' => [

modules/oe_theme_content_event/src/Plugin/ExtraField/Display/InfoDisclosureExtraFieldBase.php

@@ -0,0 +1,97 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace Drupal\oe_theme_content_event\Plugin\ExtraField\Display;
+
+use Drupal\Component\Datetime\TimeInterface;
+use Drupal\Core\Datetime\DateFormatterInterface;
+use Drupal\oe_time_caching\Cache\TimeBasedCacheTagGeneratorInterface;
+use Drupal\Core\Entity\EntityTypeManagerInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Base class for fields that require display in exact time.
+ */
+abstract class InfoDisclosureExtraFieldBase extends DateAwareExtraFieldBase {
+
+  /**
+   * Date formatter service.
+   *
+   * @var \Drupal\Core\Datetime\DateFormatterInterface
+   */
+  protected $dateFormatter;
+
+  /**
+   * InfoDisclosureExtraFieldBase constructor.
+   *
+   * @param array $configuration
+   *   A configuration array containing information about the plugin instance.
+   * @param string $plugin_id
+   *   The plugin_id for the plugin instance.
+   * @param mixed $plugin_definition
+   *   The plugin implementation definition.
+   * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entity_type_manager
+   *   The entity type manager.
+   * @param \Drupal\Component\Datetime\TimeInterface $time
+   *   The time service.
+   * @param \Drupal\oe_time_caching\Cache\TimeBasedCacheTagGeneratorInterface $cache_tag_generator
+   *   Time based cache tag generator service.
+   * @param \Drupal\Core\Datetime\DateFormatterInterface $date_formatter
+   *   The date formatter.
+   */
+  public function __construct(array $configuration, $plugin_id, $plugin_definition, EntityTypeManagerInterface $entity_type_manager, TimeInterface $time, TimeBasedCacheTagGeneratorInterface $cache_tag_generator, DateFormatterInterface $date_formatter) {
+    parent::__construct($configuration, $plugin_id, $plugin_definition, $entity_type_manager, $time, $cache_tag_generator);
+    $this->dateFormatter = $date_formatter;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
+    return new static(
+      $configuration,
+      $plugin_id,
+      $plugin_definition,
+      $container->get('entity_type.manager'),
+      $container->get('datetime.time'),
+      $container->get('oe_time_caching.time_based_cache_tag_generator'),
+      $container->get('date.formatter')
+    );
+  }
+
+  /**
+   * Is current day.
+   *
+   * @param int $timestamp
+   *   The timestamp of start date.
+   *
+   * @return bool
+   *   True if timestamp is within current day.
+   */
+  protected function isCurrentDay(int $timestamp): bool {
+    $current_date = $this->dateFormatter->format($this->requestDateTime->getTimestamp(), 'custom', 'Ymd');
+    $start_day = $this->dateFormatter->format($timestamp, 'custom', 'Ymd');
+    return $current_date === $start_day;
+  }
+
+  /**
+   * Add livestream information disclosure.
+   *
+   * @param array $build
+   *   The render array.
+   * @param int $timestamp
+   *   The timestamp of start date.
+   */
+  protected function attachLivestreamDisclosure(array &$build, int $timestamp): void {
+    $build['#attached'] = [
+      'library' => 'oe_theme_content_event/livestream_link_disclosure',
+      'drupalSettings' => [
+        'oe_theme_content_event' => [
+          'livestream_starttime_timestamp' => $timestamp * 1000,
+        ],
+      ],
+    ];
+  }
+
+}

modules/oe_theme_content_event/src/Plugin/ExtraField/Display/LivestreamExtraField.php

@@ -4,13 +4,8 @@
 
 namespace Drupal\oe_theme_content_event\Plugin\ExtraField\Display;
 
-use Drupal\Component\Datetime\TimeInterface;
-use Drupal\Core\Datetime\DateFormatterInterface;
 use Drupal\Core\Entity\ContentEntityInterface;
-use Drupal\Core\Entity\EntityTypeManagerInterface;
 use Drupal\oe_content_event\EventNodeWrapper;
-use Drupal\oe_time_caching\Cache\TimeBasedCacheTagGeneratorInterface;
-use Symfony\Component\DependencyInjection\ContainerInterface;
 
 /**
  * Extra field displaying livestream information on events.
@@ -24,52 +19,7 @@
  *   visible = true
  * )
  */
-class LivestreamExtraField extends DateAwareExtraFieldBase {
-
-  /**
-   * Date formatter service.
-   *
-   * @var \Drupal\Core\Datetime\DateFormatterInterface
-   */
-  protected $dateFormatter;
-
-  /**
-   * LivestreamExtraField constructor.
-   *
-   * @param array $configuration
-   *   A configuration array containing information about the plugin instance.
-   * @param string $plugin_id
-   *   The plugin_id for the plugin instance.
-   * @param mixed $plugin_definition
-   *   The plugin implementation definition.
-   * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entity_type_manager
-   *   The entity type manager.
-   * @param \Drupal\Component\Datetime\TimeInterface $time
-   *   The time service.
-   * @param \Drupal\oe_time_caching\Cache\TimeBasedCacheTagGeneratorInterface $cache_tag_generator
-   *   Time based cache tag generator service.
-   * @param \Drupal\Core\Datetime\DateFormatterInterface $date_formatter
-   *   The date formatter.
-   */
-  public function __construct(array $configuration, $plugin_id, $plugin_definition, EntityTypeManagerInterface $entity_type_manager, TimeInterface $time, TimeBasedCacheTagGeneratorInterface $cache_tag_generator, DateFormatterInterface $date_formatter) {
-    parent::__construct($configuration, $plugin_id, $plugin_definition, $entity_type_manager, $time, $cache_tag_generator);
-    $this->dateFormatter = $date_formatter;
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
-    return new static(
-      $configuration,
-      $plugin_id,
-      $plugin_definition,
-      $container->get('entity_type.manager'),
-      $container->get('datetime.time'),
-      $container->get('oe_time_caching.time_based_cache_tag_generator'),
-      $container->get('date.formatter')
-    );
-  }
+class LivestreamExtraField extends InfoDisclosureExtraFieldBase {
 
   /**
    * {@inheritdoc}
@@ -95,10 +45,21 @@ public function viewElements(ContentEntityInterface $entity) {
       $this->isEmpty = TRUE;
       return $build;
     }
+    $link = $entity->get('oe_event_online_link')->first();
+    $value = $link->getValue();
+    $link = [
+      '#url' => $link->getUrl(),
+      '#label' => $value['title'],
+    ];
     // If the livestream didn't start yet, we cache it by its start date and
     // render the date only.
     if ($event->isOnlinePeriodYetToCome($this->requestDateTime)) {
       $this->applyHourTag($build, $event->getOnlineStartDate());
+      if ($this->isCurrentDay($event->getOnlineStartDate()->getTimestamp())) {
+        $build += $link;
+        $build['#hide_link'] = TRUE;
+        $this->attachLivestreamDisclosure($build, $event->getOnlineStartDate()->getTimestamp());
+      }
     }
     $build['#date'] = $this->t('Starts on @date', [
       '@date' => $this->dateFormatter->format($event->getOnlineStartDate()->getTimestamp(), 'oe_event_long_date_hour'),
@@ -107,12 +68,7 @@ public function viewElements(ContentEntityInterface $entity) {
     if ($event->isOnlinePeriodActive($this->requestDateTime)) {
       // Cache it by its end date.
       $this->applyHourTag($build, $event->getOnlineEndDate());
-      $link = $entity->get('oe_event_online_link')->first();
-      $value = $link->getValue();
-      $build += [
-        '#url' => $link->getUrl(),
-        '#label' => $value['title'],
-      ];
+      $build += $link;
     }
 
     return $build;

modules/oe_theme_content_event/src/Plugin/ExtraField/Display/OnlineDescriptionExtraField.php

@@ -19,7 +19,7 @@
  *   visible = true
  * )
  */
-class OnlineDescriptionExtraField extends DateAwareExtraFieldBase {
+class OnlineDescriptionExtraField extends InfoDisclosureExtraFieldBase {
 
   /**
    * {@inheritdoc}
@@ -43,24 +43,31 @@ public function viewElements(ContentEntityInterface $entity) {
     // If the livestream didn't start yet, we cache it by its start date.
     if ($event->isOnlinePeriodYetToCome($this->requestDateTime)) {
       $this->applyHourTag($build, $event->getOnlineStartDate());
-      $this->isEmpty = TRUE;
-      return $build;
+      // Do not send field value to browser if it is not yet day online
+      // livestreaming should be started.
+      if (!$this->isCurrentDay($event->getOnlineStartDate()->getTimestamp())) {
+        $this->isEmpty = TRUE;
+        return $build;
+      }
+      // But anyway keep information hidden from users till the time
+      // of online streaming has started.
+      $build['#hidden'] = TRUE;
+      $this->attachLivestreamDisclosure($build, $event->getOnlineStartDate()->getTimestamp());
     }
 
     if ($event->isOnlinePeriodActive($this->requestDateTime)) {
       // Cache it by the livestream end date.
       $this->applyHourTag($build, $event->getOnlineEndDate());
-      $view_builder = $this->entityTypeManager->getViewBuilder('node');
-      $build['#description'] = $view_builder->viewField($entity->get('oe_event_online_description'), [
-        'label' => 'hidden',
-      ]);
-
-      /** @var \Drupal\link\Plugin\Field\FieldType\LinkItem $link */
-      $link = $entity->get('oe_event_online_link')->first();
-      $value = $link->getValue();
-      $build['#url'] = $link->getUrl();
-      $build['#label'] = $value['title'];
     }
+    $view_builder = $this->entityTypeManager->getViewBuilder('node');
+    $build['#description'] = $view_builder->viewField($entity->get('oe_event_online_description'), [
+      'label' => 'hidden',
+    ]);
+    /** @var \Drupal\link\Plugin\Field\FieldType\LinkItem $link */
+    $link = $entity->get('oe_event_online_link')->first();
+    $value = $link->getValue();
+    $build['#url'] = $link->getUrl();
+    $build['#label'] = $value['title'];
 
     return $build;
   }

modules/oe_theme_content_event/templates/oe-theme-content-event-livestream.html.twig

@@ -19,6 +19,12 @@
       name: 'livestreaming',
       size: 's',
       path: ecl_icon_path
-    }
+    },
+    extra_attributes: [
+      {
+        name: 'data-livestream-element'
+      },
+    ],
+    extra_classes: hide_link ? 'ecl-u-d-none',
   } %}
 {% endif %}

modules/oe_theme_content_event/templates/oe-theme-content-event-online-description.html.twig

@@ -5,7 +5,9 @@
  */
 #}
 {% if description is not empty %}
-  <h3 class="ecl-u-type-heading-3">{{ 'Livestream'|t }}</h3>
-  {{ description }}
-  <a href="{{ url }}" class="ecl-u-mt-l ecl-u-mb-l ecl-link ecl-link--cta ecl-u-d-inline-block">{{ label }}</a>
+  <div {% if hidden %}class="ecl-u-d-none"{% endif %} data-livestream-element="true">
+    <h3 class="ecl-u-type-heading-3">{{ 'Livestream'|t }}</h3>
+    {{ description }}
+    <a href="{{ url }}" class="ecl-u-mt-l ecl-u-mb-l ecl-link ecl-link--cta ecl-u-d-inline-block">{{ label }}</a>
+  </div>
 {% endif %}