Fix media preview when browsing and selecting resources

netgen · Oct 2, 2024 · cd2d1fa · cd2d1fa
1 parent 477215d
commit cd2d1fa
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 66 deletions.
diff --git a/bundle/Controller/Resource/AbstractController.php b/bundle/Controller/Resource/AbstractController.php
@@ -13,6 +13,7 @@
 use Symfony\Component\HttpFoundation\Response;
 
 use function is_array;
+use function str_starts_with;
 
 abstract class AbstractController
 {
@@ -83,11 +84,17 @@ private function resolveImageUrl(RemoteResource $resource, string $variationName
             $variationName .= '_protected';
         }
 
+        if ($resource->getType() === RemoteResource::TYPE_IMAGE) {
+            $variationName .= '_image';
+        }
+
         $location = new RemoteResourceLocation($resource);
 
         return match ($resource->getType()) {
             RemoteResource::TYPE_IMAGE => $this->provider->buildVariation($location, 'ngrm_interface', $variationName)->getUrl(),
-            RemoteResource::TYPE_VIDEO => $this->provider->buildVideoThumbnailVariation($location, 'ngrm_interface', $variationName)->getUrl(),
+            RemoteResource::TYPE_VIDEO => str_starts_with($variationName, 'preview')
+                ? $this->provider->buildVariation($location, 'ngrm_interface', $variationName)->getUrl()
+                : $this->provider->buildVideoThumbnailVariation($location, 'ngrm_interface', $variationName)->getUrl(),
             default => '',
         };
     }

diff --git a/bundle/Resources/config/default_settings.yaml b/bundle/Resources/config/default_settings.yaml
@@ -20,20 +20,43 @@ image_variations:
             transformations:
                 - { name: limit, params: [500, 500] }
                 - { name: quality, params: ['auto', 'eco'] }
+        preview_image:
+            transformations:
+                - { name: limit, params: [500, 500] }
+                - { name: quality, params: ['auto', 'eco'] }
+                - { name: format, params: ['jpg'] }
         preview_protected:
             transformations:
                 - { name: limit, params: [500, 500] }
                 - { name: quality, params: ['auto', 'eco'] }
                 - { name: effect, params: ['pixelate', 4] }
+        preview_protected_image:
+            transformations:
+                - { name: limit, params: [500, 500] }
+                - { name: quality, params: ['auto', 'eco'] }
+                - { name: format, params: ['jpg'] }
+                - { name: effect, params: ['pixelate', 4] }
         browse:
             transformations:
                 - { name: crop, params: [174, 100] }
                 - { name: fill, params: [174, 100] }
                 - { name: quality, params: ['auto', 'eco'] }
-
+        browse_image:
+            transformations:
+                - { name: crop, params: [174, 100] }
+                - { name: fill, params: [174, 100] }
+                - { name: quality, params: ['auto', 'eco'] }
+                - { name: format, params: ['jpg'] }
         browse_protected:
             transformations:
                 - { name: crop, params: [174, 100] }
                 - { name: fill, params: [174, 100] }
                 - { name: quality, params: ['auto', 'eco'] }
                 - { name: effect, params: ['pixelate', 1] }
+        browse_protected_image:
+            transformations:
+                - { name: crop, params: [174, 100] }
+                - { name: fill, params: [174, 100] }
+                - { name: quality, params: ['auto', 'eco'] }
+                - { name: format, params: ['jpg'] }
+                - { name: effect, params: ['pixelate', 1] }
diff --git a/bundle/Resources/public/css/remotemedia.css b/bundle/Resources/public/css/remotemedia.css
diff --git a/bundle/Resources/public/js/remotemedia.js b/bundle/Resources/public/js/remotemedia.js
diff --git a/bundle/Resources/views/app/interactions.html.twig b/bundle/Resources/views/app/interactions.html.twig
@@ -137,16 +137,21 @@
 
     {% if location.remoteResource.protected %}
         {% set authenticated_location = ngrm_authenticate_remote_resource_location(location, 600) %}
-        {% set browse_variation_name = 'browse_protected' %}
-        {% set preview_variation_name = 'preview_protected' %}
+        {% set browse_variation_name = browse_variation_name ~ '_protected' %}
+        {% set preview_variation_name = preview_variation_name ~ '_protected' %}
+    {% endif %}
+
+    {% if location.remoteResource.type == 'image' %}
+        {% set browse_variation_name = browse_variation_name ~ '_image' %}
+        {% set preview_variation_name = preview_variation_name ~ '_image' %}
     {% endif %}
 
     {% if location.remoteResource.type == 'image' %}
         {% set browse_url = ngrm_remote_resource_variation(authenticated_location, 'ngrm_interface', browse_variation_name).url %}
         {% set preview_url = ngrm_remote_resource_variation(authenticated_location, 'ngrm_interface', preview_variation_name).url %}
     {% elseif location.remoteResource.type == 'video' %}
         {% set browse_url = ngrm_video_thumbnail_variation(authenticated_location, 'ngrm_interface', browse_variation_name).url %}
-        {% set preview_url = ngrm_video_thumbnail_variation(authenticated_location, 'ngrm_interface', preview_variation_name).url %}
+        {% set preview_url = ngrm_remote_resource_variation(authenticated_location, 'ngrm_interface', preview_variation_name).url %}
     {% endif %}
 {% endif %}
 

diff --git a/frontend/src/components/Preview.vue b/frontend/src/components/Preview.vue
@@ -1,7 +1,8 @@
 <template>
   <div v-if="selectedImage.id" class="ngremotemedia-image">
     <div class="image-wrap">
-      <img v-if="selectedImage.type==='image' || selectedImage.type==='video'" :src="selectedImage.previewUrl" ref="image" />
+      <img v-if="selectedImage.type==='image'" :src="selectedImage.previewUrl" ref="image" />
+      <video v-else-if="selectedImage.type==='video'" :src="selectedImage.previewUrl" controls></video>
 
       <span v-else class="file-placeholder">
         <span class="icon-doc">

diff --git a/lib/Core/Provider/Cloudinary/Gateway/CloudinaryApiGateway.php b/lib/Core/Provider/Cloudinary/Gateway/CloudinaryApiGateway.php
@@ -34,6 +34,7 @@
 use function count;
 use function date;
 use function floor;
+use function is_array;
 use function log;
 use function max;
 use function min;
@@ -311,6 +312,12 @@ public function getVideoThumbnail(CloudinaryRemoteId $remoteId, array $options =
             );
         }
 
+        if (!is_array($options['transformation'] ?? null)) {
+            $options['transformation'] = [];
+        }
+
+        $options['transformation']['fetch_format'] = 'jpg';
+
         return (string) Image::fromParams($remoteId->getResourceId(), $options)->toUrl();
     }
 

diff --git a/tests/bundle/Controller/Resource/BrowseTest.php b/tests/bundle/Controller/Resource/BrowseTest.php
@@ -109,62 +109,55 @@ public function test(): void
 
         $image1BrowseVariation = new RemoteResourceVariation(
             $result->getResources()[0],
-            'https://cloudinary.com/test/c_fit_160_120/upload/images/image.jpg',
+            'https://cloudinary.com/test/c_fit_160_120/f_jpg/upload/images/image.jpg',
         );
 
         $image1PreviewVariation = new RemoteResourceVariation(
             $result->getResources()[0],
-            'https://cloudinary.com/test/c_fit_800_600/upload/images/image.jpg',
+            'https://cloudinary.com/test/c_fit_800_600/f_jpg/upload/images/image.jpg',
         );
 
         $image2BrowseVariation = new RemoteResourceVariation(
             $result->getResources()[1],
-            'https://cloudinary.com/test/c_fit_160_120/upload/images/image2.jpg',
+            'https://cloudinary.com/test/c_fit_160_120/f_jpg/upload/images/image2.jpg',
         );
 
         $image2PreviewVariation = new RemoteResourceVariation(
             $result->getResources()[1],
-            'https://cloudinary.com/test/c_fit_800_600/upload/images/image2.jpg',
+            'https://cloudinary.com/test/c_fit_800_600/f_jpg/upload/images/image2.jpg',
         );
 
         $videoThumbnailBrowseVariation = new RemoteResourceVariation(
             $result->getResources()[2],
-            'https://cloudinary.com/test/c_fit_160_120/upload/videos/example.mp4.jpg',
+            'https://cloudinary.com/test/c_fit_160_120/f_jpg/upload/videos/example.mp4.jpg',
         );
 
-        $videoThumbnailPreviewVariation = new RemoteResourceVariation(
+        $videoPreviewVariation = new RemoteResourceVariation(
             $result->getResources()[2],
             'https://cloudinary.com/test/c_fit_800_600/upload/videos/example.mp4.jpg',
         );
 
         $this->providerMock
-            ->expects(self::exactly(4))
+            ->expects(self::exactly(5))
             ->method('buildVariation')
             ->willReturnCallback(
                 static fn (
                     RemoteResourceLocation $location,
                     string $variationGroup,
                     string $variationName
                 ) => match ($location->getRemoteResource()->getRemoteId()) {
-                    'upload|image|media/images/image.jpg' => $variationName === 'browse' ? $image1BrowseVariation : $image1PreviewVariation,
-                    'upload|image|media/images/image2.jpg' => $variationName === 'browse' ? $image2BrowseVariation : $image2PreviewVariation,
+                    'upload|image|media/images/image.jpg' => $variationName === 'browse_image' ? $image1BrowseVariation : $image1PreviewVariation,
+                    'upload|image|media/images/image2.jpg' => $variationName === 'browse_image' ? $image2BrowseVariation : $image2PreviewVariation,
+                    'upload|image|media/videos/example.mp4' => $videoPreviewVariation,
                     default => null,
                 },
             );
 
         $this->providerMock
-            ->expects(self::exactly(2))
+            ->expects(self::once())
             ->method('buildVideoThumbnailVariation')
-            ->willReturnCallback(
-                static fn (
-                    RemoteResourceLocation $location,
-                    string $variationGroup,
-                    string $variationName
-                ) => match ($location->getRemoteResource()->getRemoteId()) {
-                    'upload|image|media/videos/example.mp4' => $variationName === 'browse' ? $videoThumbnailBrowseVariation : $videoThumbnailPreviewVariation,
-                    default => null,
-                },
-            );
+            ->with(new RemoteResourceLocation($result->getResources()[2]), 'ngrm_interface', 'browse')
+            ->willReturn($videoThumbnailBrowseVariation);
 
         $expectedResponseContent = json_encode([
             'hits' => [
@@ -180,8 +173,8 @@ public function test(): void
                     'filename' => 'image.jpg',
                     'originalFilename' => null,
                     'format' => null,
-                    'browseUrl' => 'https://cloudinary.com/test/c_fit_160_120/upload/images/image.jpg',
-                    'previewUrl' => 'https://cloudinary.com/test/c_fit_800_600/upload/images/image.jpg',
+                    'browseUrl' => 'https://cloudinary.com/test/c_fit_160_120/f_jpg/upload/images/image.jpg',
+                    'previewUrl' => 'https://cloudinary.com/test/c_fit_800_600/f_jpg/upload/images/image.jpg',
                     'url' => 'https://cloudinary.com/test/upload/images/image.jpg',
                     'altText' => null,
                     'caption' => null,
@@ -198,8 +191,8 @@ public function test(): void
                     'filename' => 'image2.jpg',
                     'originalFilename' => 'orig_image2.jpg',
                     'format' => null,
-                    'browseUrl' => 'https://cloudinary.com/test/c_fit_160_120/upload/images/image2.jpg',
-                    'previewUrl' => 'https://cloudinary.com/test/c_fit_800_600/upload/images/image2.jpg',
+                    'browseUrl' => 'https://cloudinary.com/test/c_fit_160_120/f_jpg/upload/images/image2.jpg',
+                    'previewUrl' => 'https://cloudinary.com/test/c_fit_800_600/f_jpg/upload/images/image2.jpg',
                     'url' => 'https://cloudinary.com/test/upload/images/image2.jpg',
                     'altText' => 'test alt text',
                     'caption' => 'test caption',
@@ -216,7 +209,7 @@ public function test(): void
                     'filename' => 'example.mp4',
                     'originalFilename' => 'example.mp4',
                     'format' => null,
-                    'browseUrl' => 'https://cloudinary.com/test/c_fit_160_120/upload/videos/example.mp4.jpg',
+                    'browseUrl' => 'https://cloudinary.com/test/c_fit_160_120/f_jpg/upload/videos/example.mp4.jpg',
                     'previewUrl' => 'https://cloudinary.com/test/c_fit_800_600/upload/videos/example.mp4.jpg',
                     'url' => 'https://cloudinary.com/test/upload/videos/example.mp4',
                     'altText' => 'some alt text',

diff --git a/tests/bundle/Controller/Resource/UploadTest.php b/tests/bundle/Controller/Resource/UploadTest.php
@@ -137,7 +137,7 @@ public function testUpload(): void
                     string $variationGroup,
                     string $variationName
                 ) => match ($location->getRemoteResource()->getRemoteId()) {
-                    'upload|image|media/image/sample_image.jpg' => $variationName === 'browse' ? $browseVariation : $previewVariation,
+                    'upload|image|media/image/sample_image.jpg' => $variationName === 'browse_image' ? $browseVariation : $previewVariation,
                     default => null,
                 },
             );
@@ -290,7 +290,7 @@ public function testUploadProtectedWithContext(): void
                     string $variationGroup,
                     string $variationName
                 ) => match ($location->getRemoteResource()->getRemoteId()) {
-                    'authenticated|image|media/image/sample_image.jpg' => $variationName === 'browse_protected' ? $browseVariation : $previewVariation,
+                    'authenticated|image|media/image/sample_image.jpg' => $variationName === 'browse_protected_image' ? $browseVariation : $previewVariation,
                     default => null,
                 },
             );
@@ -388,7 +388,7 @@ public function testUploadExistingFile(): void
         $uploadedFileMock
             ->expects(self::exactly(3))
             ->method('getRealPath')
-            ->willReturn('/var/www/project/sample_image.jpg');
+            ->willReturn('/var/www/project/sample_video.mp4');
 
         $uploadedFileMock
             ->expects(self::exactly(2))
@@ -407,7 +407,7 @@ public function testUploadExistingFile(): void
         $this->fileHashFactoryMock
             ->expects(self::once())
             ->method('createHash')
-            ->with('/var/www/project/sample_image.jpg')
+            ->with('/var/www/project/sample_video.mp4')
             ->willReturn('a522f23sf81aa0afd03387c37e2b6eax');
 
         $fileStruct = FileStruct::fromUploadedFile($uploadedFileMock);
@@ -421,13 +421,13 @@ public function testUploadExistingFile(): void
         );
 
         $resource = new RemoteResource(
-            remoteId: 'upload|image|sample_image.jpg',
-            type: 'image',
-            url: 'https://cloudinary.com/test/upload/image/sample_image.jpg',
+            remoteId: 'upload|video|sample_video.mp4',
+            type: 'video',
+            url: 'https://cloudinary.com/test/upload/video/sample_video.mp4',
             md5: 'a522f23sf81aa0afd03387c37e2b6eax',
-            name: 'sample_image.jpg',
+            name: 'sample_video.mp4',
             folder: null,
-            size: 123,
+            size: 12345,
         );
 
         $this->providerMock
@@ -438,43 +438,41 @@ public function testUploadExistingFile(): void
 
         $browseVariation = new RemoteResourceVariation(
             $resource,
-            'https://cloudinary.com/test/c_fit_160_120/upload/image/sample_image.jpg',
+            'https://cloudinary.com/test/c_fit_160_120/f_jpg/upload/video/sample_video.mp4',
         );
 
         $previewVariation = new RemoteResourceVariation(
             $resource,
-            'https://cloudinary.com/test/c_fit_800_600/upload/image/sample_image.jpg',
+            'https://cloudinary.com/test/c_fit_800_600/upload/video/sample_video.mp4',
         );
 
         $this->providerMock
-            ->expects(self::exactly(2))
+            ->expects(self::once())
             ->method('buildVariation')
-            ->willReturnCallback(
-                static fn (
-                    RemoteResourceLocation $location,
-                    string $variationGroup,
-                    string $variationName
-                ) => match ($location->getRemoteResource()->getRemoteId()) {
-                    'upload|image|sample_image.jpg' => $variationName === 'browse' ? $browseVariation : $previewVariation,
-                    default => null,
-                },
-            );
+            ->with(new RemoteResourceLocation($resource), 'ngrm_interface', 'preview')
+            ->willReturn($previewVariation);
+
+        $this->providerMock
+            ->expects(self::once())
+            ->method('buildVideoThumbnailVariation')
+            ->with(new RemoteResourceLocation($resource), 'ngrm_interface', 'browse')
+            ->willReturn($browseVariation);
 
         $expectedResponseContent = json_encode([
-            'remoteId' => 'upload|image|sample_image.jpg',
+            'remoteId' => 'upload|video|sample_video.mp4',
             'folder' => null,
             'tags' => [],
-            'type' => 'image',
+            'type' => 'video',
             'visibility' => 'public',
-            'size' => 123,
+            'size' => 12345,
             'width' => null,
             'height' => null,
-            'filename' => 'sample_image.jpg',
+            'filename' => 'sample_video.mp4',
             'originalFilename' => null,
             'format' => null,
-            'browseUrl' => 'https://cloudinary.com/test/c_fit_160_120/upload/image/sample_image.jpg',
-            'previewUrl' => 'https://cloudinary.com/test/c_fit_800_600/upload/image/sample_image.jpg',
-            'url' => 'https://cloudinary.com/test/upload/image/sample_image.jpg',
+            'browseUrl' => 'https://cloudinary.com/test/c_fit_160_120/f_jpg/upload/video/sample_video.mp4',
+            'previewUrl' => 'https://cloudinary.com/test/c_fit_800_600/upload/video/sample_video.mp4',
+            'url' => 'https://cloudinary.com/test/upload/video/sample_video.mp4',
             'altText' => null,
             'caption' => null,
         ]);
@@ -616,7 +614,7 @@ public function testUploadExistingFileName(): void
                     string $variationGroup,
                     string $variationName
                 ) => match ($location->getRemoteResource()->getRemoteId()) {
-                    'upload|image|media/image/sample_image.jpg' => $variationName === 'browse' ? $browseVariation : $previewVariation,
+                    'upload|image|media/image/sample_image.jpg' => $variationName === 'browse_image' ? $browseVariation : $previewVariation,
                     default => null,
                 },
             );

diff --git a/tests/lib/Core/Provider/Cloudinary/Gateway/CloudinaryApiGatewayTest.php b/tests/lib/Core/Provider/Cloudinary/Gateway/CloudinaryApiGatewayTest.php
@@ -827,7 +827,7 @@ public function testGetVideoThumbnail(): void
         $cloudinaryRemoteId = CloudinaryRemoteId::fromRemoteId('upload|video|media/example');
 
         self::assertSame(
-            'https://res.cloudinary.com/testcloud/video/upload/media/example',
+            'https://res.cloudinary.com/testcloud/video/upload/f_jpg/media/example',
             $this->apiGateway->getVideoThumbnail($cloudinaryRemoteId),
         );
     }
@@ -837,9 +837,15 @@ public function testGetVideoThumbnailAuthenticated(): void
         $cloudinaryRemoteId = CloudinaryRemoteId::fromRemoteId('upload|video|media/example');
         $token = AuthToken::fromExpiresAt(new DateTimeImmutable('2023/1/1'));
 
+        $options = [
+            'transformation' => [[
+                'fetch_format' => 'png',
+            ]],
+        ];
+
         self::assertSame(
-            'https://res.cloudinary.com/testcloud/video/upload/media/example?__cld_token__=exp=1672531200~hmac=91194b19360a54349173e96f49135838cdabd3cdb07d97eb2f12b60d8168e5cc',
-            $this->apiGateway->getVideoThumbnail($cloudinaryRemoteId, [], $token),
+            'https://res.cloudinary.com/testcloud/video/upload/f_jpg/media/example?__cld_token__=exp=1672531200~hmac=566ec5046c26254b12b2dc36c84c1392034a9a5e627af0ef9abc853464b4a6ef',
+            $this->apiGateway->getVideoThumbnail($cloudinaryRemoteId, $options, $token),
         );
     }