Merge pull request #221 from maximehuran/feature/media-manager-compat…

…ibility Media manager compatibility
monsieurbiz · May 25, 2024 · aeb9500 · aeb9500
2 parents 3b35061 + 23cbd98
commit aeb9500
Show file tree

Hide file tree

Showing 11 changed files with 242 additions and 11 deletions.
diff --git a/Makefile b/Makefile
@@ -83,6 +83,8 @@ setup_application:
 ${APP_DIR}/docker-compose.yaml:
 	rm -f ${APP_DIR}/docker-compose.yml
 	rm -f ${APP_DIR}/docker-compose.yaml
+	rm -f ${APP_DIR}/compose.yml
+	rm -f ${APP_DIR}/compose.override.dist.yml
 	ln -s ../../docker-compose.yaml.dist ${APP_DIR}/docker-compose.yaml
 .PHONY: ${APP_DIR}/docker-compose.yaml
 

diff --git a/README.md b/README.md
@@ -45,6 +45,16 @@ And install the assets
 bin/console asset:install
 ```
 
+## Use it with the [Sylius Media Manager](https://github.com/monsieurbiz/SyliusMediaManagerPlugin/)
+
+You don't need to do something, everything is compatible.
+
+If you used the rich editor before using the media manager, you need to override the form theme of the media manager plugin :
+```
+mkdir -p templates/bundles/MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Form/;
+cp dist/templates/bundles/MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Form/_theme.html.twig templates/bundles/MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Form/_theme.html.twig;
+```
+
 ## Use the Rich Editor
 
 ### Update your form type

diff --git a/...ates/bundles/MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Form/_theme.html.twig b/...ates/bundles/MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Form/_theme.html.twig
@@ -0,0 +1,116 @@
+{% block monsieurbiz_sylius_media_manager_image_row %}
+    <div class="monsieurbiz-sylius-file-manager__image-field monsieurbiz-sylius-file-manager__field field">
+        {{- form_row(form, {'attr': {'style': 'display: none;', 'data-file-type': fileType}}) -}}
+        <div class="field">
+            <div class="monsieurbiz-sylius-file-manager__current" {%- if form.vars.value is empty -%}style="display: none;"{%- endif -%}>
+                <p>
+                    <small>{{ 'monsieurbiz_sylius_media_manager.ui.current_image' | trans }}</small><br />
+                    <img src="{{ form.vars.value ? monsieurbiz_richeditor_get_media_without_upload_dir(form.vars.value)|imagine_filter('monsieurbiz_sylius_media_manager_uploaded_image', {"relative_resize": {"widen": filterWidth }}) : '' }}" alt="" style="max-width: 300px;max-height: 300px;" />
+                </p>
+            </div>
+            <button type="button" class="ui button" onclick="monsieurbizSyliusMediaManagerChooseFile('{{ form.vars.full_name | escape('js') }}', '{{ form.vars.value | escape('js') }}', '{{ folder | escape('js') }}');">
+                {{ 'monsieurbiz_sylius_media_manager.ui.choose_image' | trans }}
+            </button>
+            <button type="button" class="monsieurbiz-sylius-file-manager__button-remove ui red button" onclick="monsieurbizSyliusMediaManagerRemoveFile('{{ form.vars.full_name | escape('js') }}', '{{ 'monsieurbiz_sylius_media_manager.ui.remove_confirmation' | trans | escape('js')}}');" {%- if form.vars.value is empty -%} style="display: none;"{%- endif -%}>
+                {{ 'monsieurbiz_sylius_media_manager.ui.remove_image' | trans }}
+            </button>
+        </div>
+    </div>
+{% endblock %}
+
+{% block monsieurbiz_sylius_media_manager_video_row %}
+    {% set videoSrc = '' %}
+    {% if form.vars.value %}
+        {% if monsieurbiz_richeditor_file_extension_media_manager_exists() %}
+            {% set videoSrc = get_media_manager_file_path(form.vars.value) %}
+            {% if not monsieurbiz_richeditor_file_exists(videoSrc) %}
+                {% set videoSrc = form.vars.value%}
+            {% endif %}
+        {% else %}
+            {% set videoSrc = form.vars.value %}
+        {% endif %}
+    {% endif %}
+    <div class="monsieurbiz-sylius-file-manager__video-field monsieurbiz-sylius-file-manager__field field">
+        {{- form_row(form, {'attr': {'style': 'display: none;', 'data-file-type': fileType}}) -}}
+        <div class="field">
+            <div class="monsieurbiz-sylius-file-manager__current" {%- if form.vars.value is empty -%}style="display: none;"{%- endif -%}>
+                <p>
+                    <small>{{ 'monsieurbiz_sylius_media_manager.ui.current_video' | trans }}</small><br />
+                     <video width="320" height="240" controls>
+                        <source src="{{ form.vars.value ? videoSrc : '' }}">
+                    </video>
+                </p>
+            </div>
+            <button type="button" class="ui button" onclick="monsieurbizSyliusMediaManagerChooseFile('{{ form.vars.full_name | escape('js') }}', '{{ form.vars.value | escape('js') }}', '{{ folder | escape('js') }}');">
+                {{ 'monsieurbiz_sylius_media_manager.ui.choose_video' | trans }}
+            </button>
+            <button type="button" class="monsieurbiz-sylius-file-manager__button-remove ui red button" onclick="monsieurbizSyliusMediaManagerRemoveFile('{{ form.vars.full_name | escape('js') }}', '{{ 'monsieurbiz_sylius_media_manager.ui.remove_confirmation' | trans | escape('js')}}');" {%- if form.vars.value is empty -%} style="display: none;"{%- endif -%}>
+                {{ 'monsieurbiz_sylius_media_manager.ui.remove_video' | trans }}
+            </button>
+        </div>
+    </div>
+{% endblock %}
+
+{% block monsieurbiz_sylius_media_manager_pdf_row %}
+    <div class="monsieurbiz-sylius-file-manager__file-field monsieurbiz-sylius-file-manager__field field">
+        {{- form_row(form, {'attr': {'style': 'display: none;', 'data-file-type': fileType}}) -}}
+        <div class="field">
+            <div class="monsieurbiz-sylius-file-manager__current" {%- if form.vars.value is empty -%}style="display: none;"{%- endif -%}>
+                <p>
+                    <small>{{ 'monsieurbiz_sylius_media_manager.ui.current_file' | trans }}</small><br />
+                    <a href="{{ form.vars.value ? get_media_manager_file_path(form.vars.value) : '' }}" target="_blank" rel="noopener noreferrer">
+                        {{ form.vars.value }}
+                    </a>
+                </p>
+            </div>
+            <button type="button" class="ui button" onclick="monsieurbizSyliusMediaManagerChooseFile('{{ form.vars.full_name | escape('js') }}', '{{ form.vars.value | escape('js') }}', '{{ folder | escape('js') }}');">
+                {{ 'monsieurbiz_sylius_media_manager.ui.choose_file' | trans }}
+            </button>
+            <button type="button" class="monsieurbiz-sylius-file-manager__button-remove ui red button" onclick="monsieurbizSyliusMediaManagerRemoveFile('{{ form.vars.full_name | escape('js') }}', '{{ 'monsieurbiz_sylius_media_manager.ui.remove_confirmation' | trans | escape('js')}}');" {%- if form.vars.value is empty -%} style="display: none;"{%- endif -%}>
+                {{ 'monsieurbiz_sylius_media_manager.ui.remove_file' | trans }}
+            </button>
+        </div>
+    </div>
+{% endblock %}
+
+{% block monsieurbiz_sylius_media_manager_favicon_row %}
+    <div class="monsieurbiz-sylius-file-manager__image-field monsieurbiz-sylius-file-manager__field field">
+        {{- form_row(form, {'attr': {'style': 'display: none;', 'data-file-type': fileType}}) -}}
+        <div class="field">
+            <div class="monsieurbiz-sylius-file-manager__current" {%- if form.vars.value is empty -%}style="display: none;"{%- endif -%}>
+                <p>
+                    <small>{{ 'monsieurbiz_sylius_media_manager.ui.current_image' | trans }}</small><br />
+                    <img src="{{ form.vars.value ? monsieurbiz_richeditor_get_media_without_upload_dir(form.vars.value)|imagine_filter('monsieurbiz_sylius_media_manager_uploaded_image', {"relative_resize": {"widen": filterWidth }}) : '' }}" alt="" style="max-width: 40px;max-height: 40px;" />
+                </p>
+            </div>
+            <button type="button" class="ui button" onclick="monsieurbizSyliusMediaManagerChooseFile('{{ form.vars.full_name | escape('js') }}', '{{ form.vars.value | escape('js') }}', '{{ folder | escape('js') }}');">
+                {{ 'monsieurbiz_sylius_media_manager.ui.choose_image' | trans }}
+            </button>
+            <button type="button" class="monsieurbiz-sylius-file-manager__button-remove ui red button" onclick="monsieurbizSyliusMediaManagerRemoveFile('{{ form.vars.full_name | escape('js') }}', '{{ 'monsieurbiz_sylius_media_manager.ui.remove_confirmation' | trans | escape('js')}}');" {%- if form.vars.value is empty -%} style="display: none;"{%- endif -%}>
+                {{ 'monsieurbiz_sylius_media_manager.ui.remove_image' | trans }}
+            </button>
+        </div>
+    </div>
+{% endblock %}
+
+{% block monsieurbiz_sylius_media_manager_audio_row %}
+    <div class="monsieurbiz-sylius-file-manager__audio-field monsieurbiz-sylius-file-manager__field field">
+        {{- form_row(form, {'attr': {'style': 'display: none;', 'data-file-type': fileType}}) -}}
+        <div class="field">
+            <div class="monsieurbiz-sylius-file-manager__current" {%- if form.vars.value is empty -%}style="display: none;"{%- endif -%}>
+                <p>
+                    <small>{{ 'monsieurbiz_sylius_media_manager.ui.current_file' | trans }}</small><br />
+                    <audio controls src="{{ form.vars.value ? get_media_manager_file_path(form.vars.value) : '' }}">
+                        <a href="{{ form.vars.value ? get_media_manager_file_path(form.vars.value) : '' }}">{{ 'monsieurbiz_sylius_media_manager.ui.current_file' | trans }}</a>
+                    </audio>
+                </p>
+            </div>
+            <button type="button" class="ui button" onclick="monsieurbizSyliusMediaManagerChooseFile('{{ form.vars.full_name | escape('js') }}', '{{ form.vars.value | escape('js') }}', '{{ folder | escape('js') }}');">
+                {{ 'monsieurbiz_sylius_media_manager.ui.choose_file' | trans }}
+            </button>
+            <button type="button" class="monsieurbiz-sylius-file-manager__button-remove ui red button" onclick="monsieurbizSyliusMediaManagerRemoveFile('{{ form.vars.full_name | escape('js') }}', '{{ 'monsieurbiz_sylius_media_manager.ui.remove_confirmation' | trans | escape('js')}}');" {%- if form.vars.value is empty -%} style="display: none;"{%- endif -%}>
+                {{ 'monsieurbiz_sylius_media_manager.ui.remove_file' | trans }}
+            </button>
+        </div>
+    </div>
+{% endblock %}
diff --git a/src/Form/Constraints/RichEditorConstraints.php b/src/Form/Constraints/RichEditorConstraints.php
@@ -13,6 +13,7 @@
 
 namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Constraints;
 
+use MonsieurBiz\SyliusRichEditorPlugin\MonsieurBizSyliusRichEditorPlugin;
 use Symfony\Component\Validator\Constraints as Assert;
 
 final class RichEditorConstraints
@@ -24,6 +25,10 @@ final class RichEditorConstraints
      */
     public static function getImageConstraints(array $data, string $fieldName, bool $required = true, array $defaultConstraints = []): array
     {
+        if (MonsieurBizSyliusRichEditorPlugin::imageMediaManagerExists()) {
+            return self::getMediaManagerConstraints($required, $defaultConstraints);
+        }
+
         if (empty($defaultConstraints)) {
             $defaultConstraints = [
                 new Assert\Image([]),
@@ -40,6 +45,10 @@ public static function getImageConstraints(array $data, string $fieldName, bool
      */
     public static function getVideoConstraints(array $data, string $fieldName, bool $required = true, array $defaultConstraints = []): array
     {
+        if (MonsieurBizSyliusRichEditorPlugin::videoMediaManagerExists()) {
+            return self::getMediaManagerConstraints($required, $defaultConstraints);
+        }
+
         if (empty($defaultConstraints)) {
             $defaultConstraints = [
                 new Assert\File([
@@ -67,4 +76,16 @@ private static function getFileConstraints(array $data, string $fieldName, bool
 
         return $constraints;
     }
+
+    private static function getMediaManagerConstraints(bool $required, array $constraints): array
+    {
+        if (!$required) {
+            return $constraints;
+        }
+
+        // No file set yet, we require file
+        $constraints[] = new Assert\NotBlank([]);
+
+        return $constraints;
+    }
 }
diff --git a/src/Form/Type/UiElement/ImageType.php b/src/Form/Type/UiElement/ImageType.php
@@ -13,8 +13,10 @@
 
 namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement;
 
+use MonsieurBiz\SyliusMediaManagerPlugin\Form\Type\ImageType as MediaManagerImageType;
 use MonsieurBiz\SyliusRichEditorPlugin\Form\Constraints\RichEditorConstraints;
 use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\AlignmentType;
+use MonsieurBiz\SyliusRichEditorPlugin\MonsieurBizSyliusRichEditorPlugin;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\FileType;
 use Symfony\Component\Form\Extension\Core\Type\TextType as FormTextType;
@@ -37,7 +39,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
     public function addFields(FormBuilderInterface $builder, array $options): void
     {
         $builder
-            ->add('image', FileType::class, [
+            ->add('image', $this->getImageType(), [
                 'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.image.field.image',
                 'data_class' => null,
                 'required' => true,
@@ -69,13 +71,19 @@ public function addFields(FormBuilderInterface $builder, array $options): void
         ;
     }
 
+    private function getImageType(): string
+    {
+        // @phpstan-ignore-next-line
+        return MonsieurBizSyliusRichEditorPlugin::imageMediaManagerExists() ? MediaManagerImageType::class : FileType::class;
+    }
+
     public function addEvents(FormBuilderInterface $builder, array $options): void
     {
         $builder->addEventListener(FormEvents::PRE_SUBMIT, function (FormEvent $event): void {
             // Change image field constraints depending on submitted value
             $options = $event->getForm()->get('image')->getConfig()->getOptions();
             $options['constraints'] = RichEditorConstraints::getImageConstraints($event->getData(), 'image');
-            $event->getForm()->add('image', FileType::class, $options);
+            $event->getForm()->add('image', $this->getImageType(), $options);
         });
     }
 }
diff --git a/src/Form/Type/UiElement/VideoType.php b/src/Form/Type/UiElement/VideoType.php
@@ -13,8 +13,11 @@
 
 namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement;
 
+use MonsieurBiz\SyliusMediaManagerPlugin\Form\Type\ImageType as MediaManagerImageType;
+use MonsieurBiz\SyliusMediaManagerPlugin\Form\Type\VideoType as MediaManagerVideoType;
 use MonsieurBiz\SyliusRichEditorPlugin\Form\Constraints\RichEditorConstraints;
 use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\AlignmentType;
+use MonsieurBiz\SyliusRichEditorPlugin\MonsieurBizSyliusRichEditorPlugin;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\FileType;
 use Symfony\Component\Form\FormBuilderInterface;
@@ -35,13 +38,13 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
     public function addFields(FormBuilderInterface $builder, array $options): void
     {
         $builder
-            ->add('video', FileType::class, [
+            ->add('video', $this->getVideoType(), [
                 'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.video.field.video',
                 'data_class' => null,
                 'required' => true,
                 'attr' => ['data-video' => 'true'],
             ])
-            ->add('image', FileType::class, [
+            ->add('image', $this->getImageType(), [
                 'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.video.field.image',
                 'data_class' => null,
                 'required' => false,
@@ -51,18 +54,30 @@ public function addFields(FormBuilderInterface $builder, array $options): void
         ;
     }
 
+    private function getImageType(): string
+    {
+        // @phpstan-ignore-next-line
+        return MonsieurBizSyliusRichEditorPlugin::imageMediaManagerExists() ? MediaManagerImageType::class : FileType::class;
+    }
+
+    private function getVideoType(): string
+    {
+        // @phpstan-ignore-next-line
+        return MonsieurBizSyliusRichEditorPlugin::videoMediaManagerExists() ? MediaManagerVideoType::class : FileType::class;
+    }
+
     public function addEvents(FormBuilderInterface $builder, array $options): void
     {
         $builder->addEventListener(FormEvents::PRE_SUBMIT, function (FormEvent $event): void {
             // Change video field constraints depending on submitted value
             $options = $event->getForm()->get('video')->getConfig()->getOptions();
             $options['constraints'] = RichEditorConstraints::getVideoConstraints($event->getData(), 'video');
-            $event->getForm()->add('video', FileType::class, $options);
+            $event->getForm()->add('video', $this->getVideoType(), $options);
 
             // Change image field constraints depending on submitted value
             $options = $event->getForm()->get('image')->getConfig()->getOptions();
             $options['constraints'] = RichEditorConstraints::getImageConstraints($event->getData(), 'image', false);
-            $event->getForm()->add('image', FileType::class, $options);
+            $event->getForm()->add('image', $this->getImageType(), $options);
         });
     }
 }
diff --git a/src/MonsieurBizSyliusRichEditorPlugin.php b/src/MonsieurBizSyliusRichEditorPlugin.php
@@ -51,4 +51,19 @@ public function build(ContainerBuilder $container): void
         parent::build($container);
         $container->addCompilerPass(new UiElementRegistryPass());
     }
+
+    public static function imageMediaManagerExists(): bool
+    {
+        return class_exists('MonsieurBiz\SyliusMediaManagerPlugin\Form\Type\ImageType');
+    }
+
+    public static function videoMediaManagerExists(): bool
+    {
+        return class_exists('MonsieurBiz\SyliusMediaManagerPlugin\Form\Type\VideoType');
+    }
+
+    public static function fileExtensionMediaManagerExists(): bool
+    {
+        return class_exists('MonsieurBiz\SyliusMediaManagerPlugin\Twig\Extension\FileExtension');
+    }
 }
diff --git a/src/Resources/config/services.yaml b/src/Resources/config/services.yaml
@@ -8,6 +8,7 @@ services:
             string $monsieurbizRicheditorDefaultElement: '%monsieurbiz.richeditor.config.default_element%'
             string $monsieurbizRicheditorDefaultElementDataField: '%monsieurbiz.richeditor.config.default_element_data_field%'
             string $monsieurbizRicheditorUploadDirectory: '%monsieurbiz.richeditor.config.upload_directory%'
+            string $monsieurbizRicheditorKernelPublicDir: '%kernel.project_dir%/public'
             Gaufrette\FilesystemInterface $filesystem: '@gaufrette.monsieurbiz_rich_editor_fixture_file_filesystem'
 
     MonsieurBiz\SyliusRichEditorPlugin\Controller\:

diff --git a/src/Resources/views/Admin/UiElement/video.html.twig b/src/Resources/views/Admin/UiElement/video.html.twig
@@ -7,8 +7,16 @@
         align
 #}
 {% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
+{% if monsieurbiz_richeditor_file_extension_media_manager_exists() %}
+    {% set videoSrc = get_media_manager_file_path(element.video) %}
+    {% if not monsieurbiz_richeditor_file_exists(videoSrc) %}
+        {% set videoSrc = element.video %}
+    {% endif %}
+{% else %}
+    {% set videoSrc = element.video %}
+{% endif %}
 <div style="text-align: {{align}};">
     <video width="100%" poster="{{ monsieurbiz_richeditor_get_media_without_upload_dir(element.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" controls>
-        <source src="{{ element.video }}" type="video/{{ element.video|split('.')|last }}">
+        <source src="{{ videoSrc }}" type="video/{{ element.video|split('.')|last }}">
     </video>
 </div>
diff --git a/src/Resources/views/Shop/UiElement/video.html.twig b/src/Resources/views/Shop/UiElement/video.html.twig
@@ -7,8 +7,16 @@
         align
 #}
 {% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
+{% if monsieurbiz_richeditor_file_extension_media_manager_exists() %}
+    {% set videoSrc = get_media_manager_file_path(element.video) %}
+    {% if not monsieurbiz_richeditor_file_exists(videoSrc) %}
+        {% set videoSrc = element.video %}
+    {% endif %}
+{% else %}
+    {% set videoSrc = element.video %}
+{% endif %}
 <div style="text-align: {{align}};">
     <video width="100%" poster="{{ monsieurbiz_richeditor_get_media_without_upload_dir(element.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" controls>
-        <source src="{{ element.video }}" type="video/{{ element.video|split('.')|last }}">
+        <source src="{{ videoSrc }}" type="video/{{ element.video|split('.')|last }}">
     </video>
 </div>