Issue #3521021: Add parent calls, adjust templates and fix formatter settings

src/Plugin/Field/FieldFormatter/VidstackPlayerFormatterTrait.php

@@ -6,9 +6,12 @@ use Drupal\Core\StringTranslation\StringTranslationTrait;
 
 /**
  * Shared trait for Vidstack Player video formatters.
+ *
+ * NOTE, this trait does not portray ALL shared settings. Notably:
+ * 'controls', 'autoplay' and 'loop' are shared, but not part of this trait.
+ * This is because they get partially inherited by some formatters parent class.
  */
 trait VidstackPlayerFormatterTrait {
-
   use StringTranslationTrait;
 
   /**
@@ -20,60 +23,67 @@ trait VidstackPlayerFormatterTrait {
    * @return array
    *   The shared settings to reduce duplicate code.
    */
-  public function getSharedSettings(array $form) {
-    $form['autoplay'] = [
-      '#title' => $this->t('Autoplay'),
-      '#type' => 'checkbox',
-      '#description' => $this->t('Play the video immediately upon page load. This is generally advised against on UX grounds. It is also disabled by default in some browsers.'),
-      '#default_value' => $this->getSetting('autoplay'),
-    ];
-    $form['loop'] = [
-      '#title' => $this->t('Loop'),
-      '#type' => 'checkbox',
-      '#description' => $this->t('Loop the video.'),
-      '#default_value' => $this->getSetting('loop'),
-    ];
+  protected function getSharedSettings(array $form) {
+    // @see Trait class docblock.
     $form['muted'] = [
       '#title' => $this->t('Muted'),
       '#type' => 'checkbox',
       '#description' => $this->t('Start the video muted.'),
       '#default_value' => $this->getSetting('muted'),
     ];
-    $form['controls'] = [
-      '#title' => $this->t('Default controls'),
-      '#type' => 'checkbox',
-      '#description' => $this->t('Show the default controls of the video (e.g. from the browser itself or a provider like YouTube).'),
-      '#default_value' => $this->getSetting('controls'),
-    ];
     $form['load'] = [
       '#title' => $this->t('Load strategy'),
       '#type' => 'select',
-      '#options' => [
-        'eager' => $this->t('Load immediately'),
-        'idle' => $this->t('Load after the page is loaded'),
-        'visible' => $this->t('Load after becoming visible'),
-        'play' => $this->t('Load after hitting play'),
-      ],
+      '#options' => $this->getLoadStrategyOptions(),
       '#description' => $this->t('The load strategy that will be used to determine when the video content should start loading.'),
       '#default_value' => $this->getSetting('load'),
     ];
     return $form;
   }
 
+  /**
+   * Returns the load strategy form options.
+   *
+   * @return array
+   *   The load strategy options.
+   */
+  protected function getLoadStrategyOptions() {
+    return [
+      'eager' => $this->t('Load immediately'),
+      'idle' => $this->t('Load after the page is loaded'),
+      'visible' => $this->t('Load after becoming visible'),
+      'play' => $this->t('Load after hitting play'),
+    ];
+  }
+
   /**
    * Returns the default settings which are shared between formatters.
    *
    * @return array
    *   The shared default settings to reduce duplicate code.
    */
-  public static function getSharedDefaultSettings() {
+  protected static function getSharedDefaultSettings() {
     return [
-      'autoplay' => FALSE,
-      'loop' => FALSE,
       'muted' => FALSE,
-      'controls' => FALSE,
       'load' => 'visible',
     ];
   }
 
+  /**
+   * Returns the settings summary shared between formatters.
+   *
+   * @return array
+   *   The shared settings summary.
+   */
+  protected function getSharedSettingsSummary() {
+    $summary = [];
+    $summary[] = $this->t('Muted: %muted', [
+      '%muted' => $this->getSetting('muted') ? $this->t('yes') : $this->t('no'),
+    ]);
+    $summary[] = $this->t('Load strategy: %load', [
+      '%load' => $this->getLoadStrategyOptions()[$this->getSetting('load')],
+    ]);
+    return $summary;
+  }
+
 }

src/Plugin/Field/FieldFormatter/VidstackPlayerRemoteVideoFormatter.php

@@ -25,7 +25,6 @@ use Drupal\media\Plugin\media\Source\OEmbedInterface;
  * )
  */
 class VidstackPlayerRemoteVideoFormatter extends FormatterBase {
-
   use VidstackPlayerFormatterTrait;
 
   /**
@@ -80,20 +79,17 @@ class VidstackPlayerRemoteVideoFormatter extends FormatterBase {
    * {@inheritdoc}
    */
   public function settingsSummary() {
-    $loadStrategies = [
-      'eager' => $this->t('Load immediately'),
-      'idle' => $this->t('Load after page-load'),
-      'visible' => $this->t('Load after visible'),
-      'play' => $this->t('Load after play'),
-    ];
-    $summary = [];
-    $summary[] = $this->t('Autoplay: <strong>@autoplay</strong><br>Loop: <strong>@loop</strong><br>Muted: <strong>@muted</strong><br>Default controls: <strong>@controls</strong><br>Load strategy: <strong>@load</strong>', [
-      '@autoplay' => $this->getSetting('autoplay') ? $this->t('Yes') : $this->t('No'),
-      '@loop' => $this->getSetting('loop') ? $this->t('Yes') : $this->t('No'),
-      '@muted' => $this->getSetting('muted') ? $this->t('Yes') : $this->t('No'),
-      '@controls' => $this->getSetting('controls') ? $this->t('Yes') : $this->t('No'),
-      '@load' => $loadStrategies[$this->getSetting('load')],
+    $summary = parent::settingsSummary();
+    $summary[] = $this->t('Playback controls: %controls', [
+      '%controls' => $this->getSetting('controls') ? $this->t('visible') : $this->t('hidden'),
+    ]);
+    $summary[] = $this->t('Autoplay: %autoplay', [
+      '%autoplay' => $this->getSetting('autoplay') ? $this->t('yes') : $this->t('no'),
+    ]);
+    $summary[] = $this->t('Loop: %loop', [
+      '%loop' => $this->getSetting('loop') ? $this->t('yes') : $this->t('no'),
     ]);
+    $summary += $this->getSharedSettingsSummary();
     return $summary;
   }
 
@@ -101,14 +97,36 @@ class VidstackPlayerRemoteVideoFormatter extends FormatterBase {
    * {@inheritdoc}
    */
   public static function defaultSettings() {
-    return self::getSharedDefaultSettings();
+    $settings = parent::defaultSettings();
+    $settings['controls'] = FALSE;
+    $settings['autoplay'] = FALSE;
+    $settings['loop'] = FALSE;
+    $settings += self::getSharedDefaultSettings();
+    return $settings;
   }
 
   /**
    * {@inheritdoc}
    */
   public function settingsForm(array $form, FormStateInterface $form_state) {
-    return $this->getSharedSettings($form);
+    $form = parent::settingsForm($form, $form_state);
+    $form['controls'] = [
+      '#title' => $this->t('Show playback controls'),
+      '#type' => 'checkbox',
+      '#default_value' => $this->getSetting('controls'),
+    ];
+    $form['autoplay'] = [
+      '#title' => $this->t('Autoplay'),
+      '#type' => 'checkbox',
+      '#default_value' => $this->getSetting('autoplay'),
+    ];
+    $form['loop'] = [
+      '#title' => $this->t('Loop'),
+      '#type' => 'checkbox',
+      '#default_value' => $this->getSetting('loop'),
+    ];
+    $form += $this->getSharedSettings($form);
+    return $form;
   }
 
   /**

src/Plugin/Field/FieldFormatter/VidstackPlayerVideoFormatter.php

@@ -24,7 +24,6 @@ use Symfony\Component\DependencyInjection\ContainerInterface;
  * )
  */
 class VidstackPlayerVideoFormatter extends FileMediaFormatterBase implements FileMediaFormatterInterface {
-
   use VidstackPlayerFormatterTrait;
 
   /**
@@ -86,38 +85,21 @@ class VidstackPlayerVideoFormatter extends FileMediaFormatterBase implements Fil
    * {@inheritdoc}
    */
   public function settingsSummary() {
-    $loadStrategies = [
-      'eager' => $this->t('Load immediately'),
-      'idle' => $this->t('Load after page-load'),
-      'visible' => $this->t('Load after visible'),
-      'play' => $this->t('Load after play'),
-    ];
-    $summary = [];
-    $posterValue = '';
-    switch ($this->getSetting('poster')) {
-      case 'none':
-        $posterValue = $this->t('None (Show first frame)');
-        break;
-
-      case 'custom':
-        $posterValue = $this->t('Custom URL');
-        break;
-
-      default:
-        $posterValue = $this->t('Field "@name" (@style)', [
-          '@name' => $this->getSetting('poster'),
-          '@style' => $this->getSetting('posterStyle') === '' ? $this->t('None (original image)') : image_style_options(TRUE)[$this->getSetting('posterStyle')],
-        ]);
-        break;
-    }
-    $summary[] = $this->t('Autoplay: <strong>@autoplay</strong><br>Loop: <strong>@loop</strong><br>Muted: <strong>@muted</strong><br>Default controls: <strong>@controls</strong><br>Load strategy: <strong>@load</strong><br>Poster image: <strong>@poster</strong><br>Poster load strategy: <strong>@posterLoad</strong>', [
-      '@autoplay' => $this->getSetting('autoplay') ? $this->t('Yes') : $this->t('No'),
-      '@loop' => $this->getSetting('loop') ? $this->t('Yes') : $this->t('No'),
-      '@muted' => $this->getSetting('muted') ? $this->t('Yes') : $this->t('No'),
-      '@controls' => $this->getSetting('controls') ? $this->t('Yes') : $this->t('No'),
-      '@load' => $loadStrategies[$this->getSetting('load')],
-      '@poster' => $posterValue,
-      '@posterLoad' => $loadStrategies[$this->getSetting('posterLoad')],
+    $summary = parent::settingsSummary();
+    $summary += $this->getSharedSettingsSummary();
+    $posterValue = match($this->getSetting('poster')) {
+      'none' => $this->t('None (Show first frame)'),
+      'custom' => $this->t('Custom URL'),
+      default => $this->t('Field "%name" (%style)', [
+        '%name' => $this->getSetting('poster'),
+        '%style' => $this->getSetting('posterStyle') === '' ? $this->t('None (original image)') : image_style_options(TRUE)[$this->getSetting('posterStyle')],
+      ]),
+    };
+    $summary[] = $this->t('Poster image: %poster', [
+      '%poster' => $posterValue,
+    ]);
+    $summary[] = $this->t('Poster load strategy: %load', [
+      '%load' => $this->getLoadStrategyOptions()[$this->getSetting('posterLoad')],
     ]);
     return $summary;
   }
@@ -126,19 +108,21 @@ class VidstackPlayerVideoFormatter extends FileMediaFormatterBase implements Fil
    * {@inheritdoc}
    */
   public static function defaultSettings() {
-    return self::getSharedDefaultSettings() + [
-      'poster' => 'none',
-      'posterUrl' => '',
-      'posterLoad' => 'visible',
-      'posterStyle' => '',
-    ];
+    $settings = parent::defaultSettings();
+    $settings += self::getSharedDefaultSettings();
+    $settings['poster'] = 'none';
+    $settings['posterUrl'] = '';
+    $settings['posterLoad'] = 'visible';
+    $settings['posterStyle'] = '';
+    return $settings;
   }
 
   /**
    * {@inheritdoc}
    */
   public function settingsForm(array $form, FormStateInterface $form_state) {
-    $form = $this->getSharedSettings($form);
+    $form = parent::settingsForm($form, $form_state);
+    $form += $this->getSharedSettings($form);
 
     $form['poster'] = [
       '#title' => $this->t('Poster image'),

templates/vidstack-player-remote-video.html.twig

-<iframe {{ attributes }} allowfullscreen></iframe>
+{#
+  NOTE: We are using "progressive enhancement" here, as documented:
+  "The target can be any element but if it’s a <audio>, <video>, or
+  <iframe> element it will be replaced and enhanced (i.e., progressive
+  enhancement)."
+  @see https://vidstack.io/docs/player/getting-started/installation/javascript/?provider=youtube&styling=default-layout&install=cdn
+#}
+<iframe {{ attributes }}></iframe>

templates/vidstack-player-video.html.twig

-<video {{ attributes }} playsinline>
+{#
+  NOTE: We are using "progressive enhancement" here, as documented:
+  "The target can be any element but if it’s a <audio>, <video>, or
+  <iframe> element it will be replaced and enhanced (i.e., progressive
+  enhancement)."
+  @see https://vidstack.io/docs/player/getting-started/installation/javascript/?provider=video&styling=default-layout&install=cdn
+#}
+<video {{ attributes }}>
   {% for file in files %}
     <source {{ file.source_attributes }} />
   {% endfor %}