diff --git a/modules/video_embed_wysiwyg/src/Plugin/Filter/VideoEmbedWysiwyg.php b/modules/video_embed_wysiwyg/src/Plugin/Filter/VideoEmbedWysiwyg.php index 7334122938618a72dd0c51b5361d15c3cbfe3297..f0c50e77f974f4c9b91f0fb4fdf7bcf8c2825c72 100644 --- a/modules/video_embed_wysiwyg/src/Plugin/Filter/VideoEmbedWysiwyg.php +++ b/modules/video_embed_wysiwyg/src/Plugin/Filter/VideoEmbedWysiwyg.php @@ -2,6 +2,7 @@ namespace Drupal\video_embed_wysiwyg\Plugin\Filter; +use Drupal\Component\Utility\Html; use Drupal\Core\Plugin\ContainerFactoryPluginInterface; use Drupal\Core\Session\AccountProxyInterface; use Drupal\filter\FilterProcessResult; @@ -89,18 +90,20 @@ class VideoEmbedWysiwyg extends FilterBase implements ContainerFactoryPluginInte $autoplay = $this->currentUser->hasPermission('never autoplay videos') ? FALSE : $embed_data['settings']['autoplay']; $embed_code = $provider->renderEmbedCode($embed_data['settings']['width'], $embed_data['settings']['height'], $autoplay); + $embed_code = [ + '#type' => 'container', + '#attributes' => [ + 'class' => [Html::cleanCssIdentifier(sprintf('video-embed-field-provider-%s', $provider->getPluginId()))], + ], + 'children' => $embed_code, + ]; + // Add the container to make the video responsive if it's been // configured as such. This usually is attached to field output in the // case of a formatter, but a custom container must be used where one is // not present. if ($embed_data['settings']['responsive']) { - $embed_code = [ - '#type' => 'container', - '#attributes' => [ - 'class' => ['video-embed-field-responsive-video'], - ], - 'children' => $embed_code, - ]; + $embed_code['#attributes']['class'][] = 'video-embed-field-responsive-video'; } // Replace the JSON settings with a video. diff --git a/modules/video_embed_wysiwyg/tests/src/Kernel/FilterTest.php b/modules/video_embed_wysiwyg/tests/src/Kernel/FilterTest.php index a04ec4e3c3763328e0a7aac38a7f17057330a02f..417236cd4d77313fa97c360f6e00e9535f2e557e 100644 --- a/modules/video_embed_wysiwyg/tests/src/Kernel/FilterTest.php +++ b/modules/video_embed_wysiwyg/tests/src/Kernel/FilterTest.php @@ -47,23 +47,23 @@ class FilterTest extends KernelTestBase { return [ 'Standard embed code' => [ '

Content.

{"preview_thumbnail":"http://example.com/thumbnail.jpg","video_url":"https://www.youtube.com/watch?v=uNRtZDAS0xI","settings":{"responsive":1,"width":"854","height":"480","autoplay":1},"settings_summary":["Embedded Video (854x480, autoplaying)."]}

More content.

', - '

Content.

More content.

', + '

Content.

More content.

', ], 'Embedded vimeo video' => [ '

Content.

{"preview_thumbnail":"http://example.com/thumbnail.jpg","video_url":"https://vimeo.com/18352872","settings":{"responsive":1,"width":"854","height":"480","autoplay":1},"settings_summary":["Embedded Video (854x480, autoplaying)."]}

More content.

', - '

Content.

More content.

', + '

Content.

More content.

', ], 'JSON keys in reverse order' => [ '

Content.

{"settings_summary":["Embedded Video (854x480, autoplaying)."],"settings":{"responsive":1,"width":"854","height":"480","autoplay":1},"video_url":"https://vimeo.com/18352872","preview_thumbnail":"http://example.com/thumbnail.jpg"}

More content.

', - '

Content.

More content.

', + '

Content.

More content.

', ], 'Relative thumbnail URL' => [ '

Content.

{"settings_summary":["Embedded Video (854x480, autoplaying)."],"settings":{"responsive":1,"width":"854","height":"480","autoplay":1},"video_url":"https://vimeo.com/18352872","preview_thumbnail":"/thumbnail.jpg"}

More content.

', - '

Content.

More content.

', + '

Content.

More content.

', ], 'No wrapping paragraphs tags' => [ '{"settings_summary":["Embedded Video (854x480, autoplaying)."],"settings":{"responsive":1,"width":"854","height":"480","autoplay":1},"video_url":"https://vimeo.com/18352872","preview_thumbnail":"/thumbnail.jpg"}', - '
', + '
', ], 'Invalid URL' => [ '

Content.

{"preview_thumbnail":"http://example.com/thumbnail.jpg","video_url":"https://example.com/InvalidUrl","settings":{"responsive":1,"width":"854","height":"480","autoplay":1},"settings_summary":["Embedded Video (854x480, autoplaying)."]}

More content.

', @@ -79,7 +79,7 @@ class FilterTest extends KernelTestBase { ], 'XSS Width/Height' => [ '

Content.

{"preview_thumbnail":"http://example.com/thumbnail.jpg","video_url":"https://www.youtube.com/watch?v=uNRtZDAS0xI","settings":{"responsive":1,"width":"\">test","height":"\">test","autoplay":1},"settings_summary":["Embedded Video (854x480, autoplaying)."]}

More content.

', - '

Content.

More content.

', + '

Content.

More content.

', ], 'Empty settings' => [ '

Content.

{"preview_thumbnail":"http://example.com/thumbnail.jpg","video_url":"https://www.youtube.com/watch?v=uNRtZDAS0xI","settings":{},"settings_summary":["Embedded Video (854x480, autoplaying)."]}

More content.

', diff --git a/src/Plugin/Field/FieldFormatter/Video.php b/src/Plugin/Field/FieldFormatter/Video.php index 152b524fb9e9ba29b5e63cf9fbd0c5d7b41fe492..361207a728f52e90175cc78ae9bd0833afd2cf04 100644 --- a/src/Plugin/Field/FieldFormatter/Video.php +++ b/src/Plugin/Field/FieldFormatter/Video.php @@ -2,6 +2,7 @@ namespace Drupal\video_embed_field\Plugin\Field\FieldFormatter; +use Drupal\Component\Utility\Html; use Drupal\Core\Field\FieldDefinitionInterface; use Drupal\Core\Field\FormatterBase; use Drupal\Core\Field\FieldItemListInterface; @@ -100,14 +101,16 @@ class Video extends FormatterBase implements ContainerFactoryPluginInterface { $element[$delta] = $provider->renderEmbedCode($this->getSetting('width'), $this->getSetting('height'), $autoplay); $element[$delta]['#cache']['contexts'][] = 'user.permissions'; + $element[$delta] = [ + '#type' => 'container', + '#attributes' => ['class' => [Html::cleanCssIdentifier(sprintf('video-embed-field-provider-%s', $provider->getPluginId()))]], + 'children' => $element[$delta], + ]; + // For responsive videos, wrap each field item in it's own container. if ($this->getSetting('responsive')) { - $element[$delta] = [ - '#type' => 'container', - '#attached' => ['library' => ['video_embed_field/responsive-video']], - '#attributes' => ['class' => ['video-embed-field-responsive-video']], - 'children' => $element[$delta], - ]; + $element[$delta]['#attached']['library'][] = 'video_embed_field/responsive-video'; + $element[$delta]['#attributes']['class'][] = 'video-embed-field-responsive-video'; } } diff --git a/src/ProviderPluginInterface.php b/src/ProviderPluginInterface.php index 7020c6413da7e08ce448cecefe26c454c5d55d89..863feeb33bacc1a00299d4e674b7814af6a21933 100644 --- a/src/ProviderPluginInterface.php +++ b/src/ProviderPluginInterface.php @@ -1,11 +1,12 @@ 'video_embed_iframe', - '#provider' => 'youtube', - '#url' => 'https://www.youtube.com/embed/fdbFVWupSsw', - '#query' => [ - 'autoplay' => '1', - 'start' => '0', - 'rel' => '0', - ], + '#type' => 'container', '#attributes' => [ - 'width' => '100', - 'height' => '100', - 'frameborder' => '0', - 'allowfullscreen' => 'allowfullscreen', + 'class' => [ + 'video-embed-field-provider-youtube', + ], ], - '#cache' => [ - 'contexts' => [ - 'user.permissions', + 'children' => [ + '#type' => 'video_embed_iframe', + '#provider' => 'youtube', + '#url' => 'https://www.youtube.com/embed/fdbFVWupSsw', + '#query' => [ + 'autoplay' => '1', + 'start' => '0', + 'rel' => '0', + ], + '#attributes' => [ + 'width' => '100', + 'height' => '100', + 'frameborder' => '0', + 'allowfullscreen' => 'allowfullscreen', + ], + '#cache' => [ + 'contexts' => [ + 'user.permissions', + ], ], ], ], @@ -91,23 +99,31 @@ class FieldOutputTest extends KernelTestBase { ], ], [ - '#type' => 'video_embed_iframe', - '#provider' => 'youtube', - '#url' => 'https://www.youtube.com/embed/fdbFVWupSsw', - '#query' => [ - 'autoplay' => '1', - 'start' => '100', - 'rel' => '0', - ], + '#type' => 'container', '#attributes' => [ - 'width' => '100', - 'height' => '100', - 'frameborder' => '0', - 'allowfullscreen' => 'allowfullscreen', + 'class' => [ + 'video-embed-field-provider-youtube', + ], ], - '#cache' => [ - 'contexts' => [ - 'user.permissions', + 'children' => [ + '#type' => 'video_embed_iframe', + '#provider' => 'youtube', + '#url' => 'https://www.youtube.com/embed/fdbFVWupSsw', + '#query' => [ + 'autoplay' => '1', + 'start' => '100', + 'rel' => '0', + ], + '#attributes' => [ + 'width' => '100', + 'height' => '100', + 'frameborder' => '0', + 'allowfullscreen' => 'allowfullscreen', + ], + '#cache' => [ + 'contexts' => [ + 'user.permissions', + ], ], ], ], @@ -124,24 +140,32 @@ class FieldOutputTest extends KernelTestBase { ], ], [ - '#type' => 'video_embed_iframe', - '#provider' => 'youtube', - '#url' => 'https://www.youtube.com/embed/fdbFVWupSsw', - '#query' => [ - 'autoplay' => '1', - 'start' => '0', - 'rel' => '0', - 'cc_lang_pref' => 'fr', - ], + '#type' => 'container', '#attributes' => [ - 'width' => '100', - 'height' => '100', - 'frameborder' => '0', - 'allowfullscreen' => 'allowfullscreen', + 'class' => [ + 'video-embed-field-provider-youtube', + ], ], - '#cache' => [ - 'contexts' => [ - 'user.permissions', + 'children' => [ + '#type' => 'video_embed_iframe', + '#provider' => 'youtube', + '#url' => 'https://www.youtube.com/embed/fdbFVWupSsw', + '#query' => [ + 'autoplay' => '1', + 'start' => '0', + 'rel' => '0', + 'cc_lang_pref' => 'fr', + ], + '#attributes' => [ + 'width' => '100', + 'height' => '100', + 'frameborder' => '0', + 'allowfullscreen' => 'allowfullscreen', + ], + '#cache' => [ + 'contexts' => [ + 'user.permissions', + ], ], ], ], @@ -169,21 +193,29 @@ class FieldOutputTest extends KernelTestBase { ], ], [ - '#type' => 'video_embed_iframe', - '#provider' => 'vimeo', - '#url' => 'https://player.vimeo.com/video/80896303', - '#query' => [ - 'autoplay' => '1', - ], + '#type' => 'container', '#attributes' => [ - 'width' => '100', - 'height' => '100', - 'frameborder' => '0', - 'allowfullscreen' => 'allowfullscreen', + 'class' => [ + 'video-embed-field-provider-vimeo', + ], ], - '#cache' => [ - 'contexts' => [ - 'user.permissions', + 'children' => [ + '#type' => 'video_embed_iframe', + '#provider' => 'vimeo', + '#url' => 'https://player.vimeo.com/video/80896303', + '#query' => [ + 'autoplay' => '1', + ], + '#attributes' => [ + 'width' => '100', + 'height' => '100', + 'frameborder' => '0', + 'allowfullscreen' => 'allowfullscreen', + ], + '#cache' => [ + 'contexts' => [ + 'user.permissions', + ], ], ], ], @@ -200,22 +232,30 @@ class FieldOutputTest extends KernelTestBase { ], ], [ - '#type' => 'video_embed_iframe', - '#provider' => 'vimeo', - '#url' => 'https://player.vimeo.com/video/80896303', - '#query' => [ - 'autoplay' => '1', - ], - '#fragment' => 't=150s', + '#type' => 'container', '#attributes' => [ - 'width' => '100', - 'height' => '100', - 'frameborder' => '0', - 'allowfullscreen' => 'allowfullscreen', + 'class' => [ + 'video-embed-field-provider-vimeo', + ], ], - '#cache' => [ - 'contexts' => [ - 'user.permissions', + 'children' => [ + '#type' => 'video_embed_iframe', + '#provider' => 'vimeo', + '#url' => 'https://player.vimeo.com/video/80896303', + '#query' => [ + 'autoplay' => '1', + ], + '#fragment' => 't=150s', + '#attributes' => [ + 'width' => '100', + 'height' => '100', + 'frameborder' => '0', + 'allowfullscreen' => 'allowfullscreen', + ], + '#cache' => [ + 'contexts' => [ + 'user.permissions', + ], ], ], ], @@ -265,7 +305,7 @@ class FieldOutputTest extends KernelTestBase { [ '#type' => 'container', '#attributes' => [ - 'data-video-embed-field-modal' => '', + 'data-video-embed-field-modal' => '
', 'class' => ['video-embed-field-launch-modal'], ], '#attached' => [ @@ -305,7 +345,7 @@ class FieldOutputTest extends KernelTestBase { [ '#type' => 'container', '#attributes' => [ - 'data-video-embed-field-modal' => '
', + 'data-video-embed-field-modal' => '
', 'class' => [ 'video-embed-field-launch-modal', ], @@ -348,7 +388,10 @@ class FieldOutputTest extends KernelTestBase { 'library' => ['video_embed_field/responsive-video'], ], '#attributes' => [ - 'class' => ['video-embed-field-responsive-video'], + 'class' => [ + 'video-embed-field-provider-vimeo', + 'video-embed-field-responsive-video' + ], ], 'children' => [ '#type' => 'video_embed_iframe', @@ -383,21 +426,29 @@ class FieldOutputTest extends KernelTestBase { ], ], [ - '#type' => 'video_embed_iframe', - '#provider' => 'youtube_playlist', - '#url' => 'https://www.youtube.com/embed/videoseries', - '#query' => [ - 'list' => 'PLpeDXSh4nHjQCIZmkxg3VSdpR5e87X5eB', - ], + '#type' => 'container', '#attributes' => [ - 'width' => '100', - 'height' => '100', - 'frameborder' => '0', - 'allowfullscreen' => 'allowfullscreen', + 'class' => [ + 'video-embed-field-provider-youtube-playlist', + ], ], - '#cache' => [ - 'contexts' => [ - 'user.permissions', + 'children' => [ + '#type' => 'video_embed_iframe', + '#provider' => 'youtube_playlist', + '#url' => 'https://www.youtube.com/embed/videoseries', + '#query' => [ + 'list' => 'PLpeDXSh4nHjQCIZmkxg3VSdpR5e87X5eB', + ], + '#attributes' => [ + 'width' => '100', + 'height' => '100', + 'frameborder' => '0', + 'allowfullscreen' => 'allowfullscreen', + ], + '#cache' => [ + 'contexts' => [ + 'user.permissions', + ], ], ], ], @@ -482,9 +533,10 @@ class FieldOutputTest extends KernelTestBase { $entity->{$this->fieldName}->value = $url; $entity->save(); - $field_output = $this->container->get('renderer')->executeInRenderContext(new RenderContext(), function() use ($entity, $settings) { - return $entity->{$this->fieldName}->view($settings); - }); + $field_output = $this->container->get('renderer') + ->executeInRenderContext(new RenderContext(), function () use ($entity, $settings) { + return $entity->{$this->fieldName}->view($settings); + }); // Prepare the field output to make it easier to compare our test data // values against.