Skip to content
Snippets Groups Projects
Commit 4ec045d1 authored by Joshua Sedler's avatar Joshua Sedler :cartwheel_tone2: Committed by Julian Pustkuchen
Browse files

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

parent 3ea70888
Branches
Tags
1 merge request!3Issue #3521021: Add parent calls, adjust templates and fix formatter settings
Pipeline #481924 passed with warnings
......@@ -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,44 +23,37 @@ 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' => [
'#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'),
],
'#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;
}
/**
......@@ -66,14 +62,28 @@ trait VidstackPlayerFormatterTrait {
* @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;
}
}
......@@ -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;
}
/**
......
......@@ -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')],
$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,
]);
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[] = $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'),
......
<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>
<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 %}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment