Merge pull request #104 from mostafaznv/dev

Support intervention/image ^3.0

composer.json

@@ -16,11 +16,11 @@
     ],
     "license": "MIT",
     "require": {
-        "php": "^8.0.2",
-        "intervention/image": "^2.5",
+        "php": "^8.1",
+        "intervention/image": "^3.1.0",
         "laravel/framework": "^9.0|^10.0",
         "laravel/nova": "^4.13",
-        "mostafaznv/nova-video": "^4.0|^5.0|^6.0.2",
+        "mostafaznv/nova-video": "^6.1.0",
         "nova-kit/nova-packages-tool": "^1.2",
         "spatie/laravel-image-optimizer": "^1.6"
     },

config/nova-ckeditor.php

@@ -59,8 +59,8 @@
      |
      */
 
-    'max-width'  => 1024,
-    'max-height' => 768,
+    'max-width'  => 1920,
+    'max-height' => 1080,
 
     /*
      |--------------------------------------------------------------------------

docs/advanced-usage/configuration/image-max-height.md

@@ -6,7 +6,7 @@ description: max-width
 
 | Property Name | Type | Default |
 | ------------- | ---- | ------- |
-| max-height    | int  | 768     |
+| max-height    | int  | 1080    |
 
 The `max-height` configuration option allows you to specify the maximum height for images within the CKEditor field. This setting determines the maximum allowed height for uploaded images and ensures that they are automatically resized if their height exceeds this limit.
 

docs/advanced-usage/configuration/image-max-width.md

@@ -4,7 +4,7 @@ description: max-width
 
 # Image Max Width
 
-<table><thead><tr><th>Property Name</th><th width="213.33333333333331">Type</th><th>Default</th></tr></thead><tbody><tr><td>max-width</td><td>int</td><td>1024</td></tr></tbody></table>
+<table><thead><tr><th>Property Name</th><th width="213.33333333333331">Type</th><th>Default</th></tr></thead><tbody><tr><td>max-width</td><td>int</td><td>1920</td></tr></tbody></table>
 
 The `max-width` configuration option allows you to specify the maximum width for images within the CKEditor field. This setting determines the maximum allowed width for uploaded images and ensures that they are automatically resized if their width exceeds this limit.
 

docs/other/migration.md

@@ -1,5 +1,23 @@
 # Migration
 
+### **From 6.2.1 to 7.0.0**
+
+We have undertaken significant refactoring efforts to release version <mark style="color:red;">7.0.0</mark>. Despite our best efforts to avoid introducing any breaking changes, it became necessary due to the merging of all types of media pickers (<mark style="color:blue;">audio</mark>, <mark style="color:blue;">video</mark>, and <mark style="color:blue;">image</mark>).
+
+
+
+If you are migrating from version <mark style="color:red;">6.\*</mark> to <mark style="color:red;">7.\*</mark>, please be aware that you need to replace `imageBrowser`, `videoBrowser`, and `audioBrowser` with <mark style="color:red;">`mediaBrowser`</mark> in the nova-ckeditor's configuration file, locate it in <mark style="color:red;">`toolbars.toolbar-1.items`</mark>.
+
+Additionally, update `imageBrowser` to <mark style="color:red;">`mediaBrowser`</mark> in <mark style="color:red;">`toolbars.toolbar-1.options.image.toolbar`</mark>.
+
+
+
+We have discontinued support for both `"intervention/image": "^2.5"` as well `"mostafaznv/nova-video": "^4.0|^5.0"`. If you are using these packages in your projects, please be aware that you need to upgrade them to `"intervention/image": "^3.1.0"` and `"mostafaznv/nova-video": "^6.1.0"` before proceeding.
+
+
+
+
+
 ### **From 5.3.0 to 5.4.0**
 
 The `AudioPicker` feature has been introduced to the ckeditor field.

resources/js/components/media-browser/MediaBrowser.vue

@@ -26,7 +26,6 @@
                     :selected-items="selectedItems"
                     :columns="columns"
                     :has-larupload-trait="hasLaruploadTrait"
-                    :nova-video-is-legacy="novaVideoIsLegacy"
                 />
 
                 <div class="media-browser__list p-4">
@@ -108,12 +107,10 @@ import MediaBrowserInfo from "./MediaBrowserInfo.vue"
 import MediaBrowserList from "./MediaBrowserList.vue"
 import MediaBrowserPagination from "./MediaBrowserPagination.vue"
 import MediaBrowserNavbar from "./MediaBrowserNavbar.vue";
-import {novaVideoIsLegacyProp} from "../../utils/picker-props"
 
 
 // variables
 const props = defineProps({
-    novaVideoIsLegacy: novaVideoIsLegacyProp,
     title: {
         type: String,
         default: ''

resources/js/components/media-browser/MediaBrowserItem.vue

@@ -78,10 +78,6 @@ const src = computed(() => {
         return props.item.file.original
     }
 
-    if (props.item?.file_field?.original) {
-        return props.item.file_field.original
-    }
-
     return props.item.url ?? null
 })
 
@@ -90,10 +86,6 @@ const cover = computed(() => {
         return props.item.file.cover
     }
 
-    if (props.item?.file_field?.cover) {
-        return props.item.file_field.cover
-    }
-
     return null
 })
 

resources/js/components/media-browser/MediaBrowserNavbar.vue

@@ -61,7 +61,6 @@
                 @uploaded="$emit('updated')"
                 :type="type"
                 :has-larupload-trait="hasLaruploadTrait"
-                :nova-video-is-legacy="novaVideoIsLegacy"
             />
         </div>
     </div>
@@ -75,7 +74,7 @@ import MediaBrowserDisplayOptions from "./MediaBrowserDisplayOptions.vue"
 import MediaBrowserSearchModal from "./MediaBrowserSearchModal.vue"
 import MediaBrowserDelete from "./MediaBrowserDelete.vue"
 import MediaBrowserRenameModal from "./MediaBrowserRenameModal.vue"
-import {hasLaruploadTraitProp, selectedItemsProp, typeProp, keywordProp, sortProp, paginationProp, novaVideoIsLegacyProp, columnsProp} from "../../utils/picker-props"
+import {hasLaruploadTraitProp, selectedItemsProp, typeProp, keywordProp, sortProp, paginationProp, columnsProp} from "../../utils/picker-props"
 
 
 // composables
@@ -95,7 +94,6 @@ const emit = defineEmits([
 // variables
 const props = defineProps({
     hasLaruploadTrait: hasLaruploadTraitProp,
-    novaVideoIsLegacy: novaVideoIsLegacyProp,
     selectedItems: selectedItemsProp,
     type: typeProp,
     keyword: keywordProp,

resources/js/components/media-browser/MediaBrowserUpload.vue

@@ -81,7 +81,7 @@ import Modal from "../modal.vue"
 import {useLocalization} from 'laravel-nova'
 import MediaBrowserUploadProgress from "./MediaBrowserUploadProgress.vue"
 import MediaBrowserUploadWithCover from "./MediaBrowserUploadWithCover.vue"
-import {hasLaruploadTraitProp, novaVideoIsLegacyProp, typeProp} from "../../utils/picker-props"
+import {hasLaruploadTraitProp, typeProp} from "../../utils/picker-props"
 import {vOnClickOutside} from "@vueuse/components"
 
 
@@ -98,7 +98,6 @@ const {__} = useLocalization()
 // variables
 const props = defineProps({
     hasLaruploadTrait: hasLaruploadTraitProp,
-    novaVideoIsLegacy: novaVideoIsLegacyProp,
     type: typeProp
 })
 
@@ -150,10 +149,6 @@ const resourceKey = computed(() => {
 })
 
 const uploadFileKey = computed(() => {
-    if (props.type === 'video' && props.hasLaruploadTrait && props.novaVideoIsLegacy) {
-        return 'file_field'
-    }
-
     return props.hasLaruploadTrait ? 'file[original]' : 'file'
 })
 
@@ -162,10 +157,6 @@ const uploadApiUrl = computed(() => {
 })
 
 const uploadWithCoverIsDisabled = computed(() => {
-    if (props.type === 'video' && props.hasLaruploadTrait && props.novaVideoIsLegacy) {
-        return true
-    }
-
     return !props.hasLaruploadTrait || !fileWithCover.value.isValid || uploading.value
 })
 
@@ -266,7 +257,6 @@ async function upload(file, index) {
     catch (e) {
         const msg = e?.response?.data?.errors?.['file']?.[0]
             ?? e?.response?.data?.errors?.['file.original']?.[0]
-            ?? e?.response?.data?.errors?.['file_field']?.[0]
             ?? e?.message
             ?? __(`Something went wrong while uploading the file[${file.name}].`)
 

resources/js/fields/editor-field.vue

@@ -10,7 +10,6 @@
                 :field-key="$options[editorUUID] + '-media-browser'"
                 :image-has-larupload-trait="currentField.imageHasLaruploadTrait"
                 :video-has-larupload-trait="currentField.videoHasLaruploadTrait"
-                :nova-video-is-legacy="currentField.novaVideoIsLegacy"
                 :has-image-picker="currentField.imageBrowser"
                 :has-video-picker="currentField.videoBrowser"
                 :has-audio-picker="currentField.audioBrowser"

resources/js/utils/picker-props.js

@@ -3,11 +3,6 @@ export const hasLaruploadTraitProp = {
     required: true
 }
 
-export const novaVideoIsLegacyProp = {
-    type: Boolean,
-    required: true
-}
-
 export const keywordProp = {
     type: String,
     default: ''

src/CkEditor.php

@@ -316,8 +316,7 @@ public function jsonSerialize(): array
             'shouldNotGroupWhenFull' => $this->shouldNotGroupWhenFull,
             'shouldShow'             => $this->shouldBeExpanded(),
             'videoHasLaruploadTrait' => $this->videoHasLaruploadTrait(),
-            'imageHasLaruploadTrait' => $this->imageHasLaruploadTrait(),
-            'novaVideoIsLegacy'      => $this->isLegacyNovaVideo(),
+            'imageHasLaruploadTrait' => $this->imageHasLaruploadTrait()
         ]);
     }
 
@@ -376,20 +375,6 @@ private function hasLaruploadTrait(string $class): bool
         return class_exists($class) and in_array(Larupload::class, class_uses($class));
     }
 
-    /**
-     * Check whether NovaVideo is legacy
-     *
-     * @return bool
-     */
-    private function isLegacyNovaVideo(): bool
-    {
-        if (property_exists(Video::class, 'storeWithLarupload')) {
-            return false;
-        }
-
-        return true;
-    }
-
     private function prepareToolbar(string $toolbar, array $items = null): void
     {
         $this->toolbarName = $toolbar;

src/FieldServiceProvider.php

@@ -2,7 +2,6 @@
 
 namespace Mostafaznv\NovaCkEditor;
 
-use Composer\InstalledVersions;
 use Illuminate\Support\Facades\Route;
 use Laravel\Nova\Nova;
 use Illuminate\Support\Facades\App;
@@ -53,8 +52,6 @@ public function boot(): void
 
     protected function publish(): void
     {
-        $videoStub = $this->isLegacy() ? 'Video.legacy.stub' : 'Video.stub';
-
         $this->publishes([
             __DIR__ . '/../config/nova-ckeditor.php' => config_path('nova-ckeditor.php')
         ], 'nova-ckeditor-config');
@@ -70,8 +67,8 @@ protected function publish(): void
 
             # models
             __DIR__ . '/../stubs/models/Image.stub' => app_path('Models/Image.php'),
-            __DIR__ . "/../stubs/models/$videoStub" => app_path('Models/Video.php'),
-            __DIR__ . "/../stubs/models/Audio.stub" => app_path('Models/Audio.php'),
+            __DIR__ . '/../stubs/models/Video.stub' => app_path('Models/Video.php'),
+            __DIR__ . '/../stubs/models/Audio.stub' => app_path('Models/Audio.php'),
 
             # resources
             __DIR__ . '/../stubs/resources/Image.stub' => app_path('Nova/Resources/Image.php'),
@@ -107,11 +104,4 @@ private function registerUiLanguageScripts(): void {
             Nova::script('ckeditor-lang', $script);
         }
     }
-
-    private function isLegacy(): bool
-    {
-        $larupload = InstalledVersions::getVersion('mostafaznv/larupload');
-
-        return version_compare($larupload, '1.0.0', '<');
-    }
 }

src/ImageStorage.php

@@ -3,10 +3,10 @@
 namespace Mostafaznv\NovaCkEditor;
 
 use Illuminate\Http\UploadedFile;
-use Intervention\Image\Constraint;
-use Intervention\Image\Facades\Image;
-use Intervention\Image\Image as InterventionImage;
-use Spatie\LaravelImageOptimizer\Facades\ImageOptimizer;
+use Intervention\Image\ImageManager;
+use Intervention\Image\Interfaces\ImageInterface;
+use Spatie\ImageOptimizer\OptimizerChainFactory;
+
 
 class ImageStorage extends Storage
 {
@@ -27,10 +27,18 @@ public function handleUpload(UploadedFile $file): array
     {
         $attributes = $this->resize($file);
 
+        $file = new UploadedFile(
+            path: $attributes['path'],
+            originalName: $attributes['file'],
+            mimeType: $attributes['mime']
+        );
+
         $file->storePubliclyAs('', $attributes['file'], [
             'disk' => $this->disk
         ]);
 
+        unset($attributes['path']);
+
         return $attributes;
     }
 
@@ -41,41 +49,49 @@ protected function resize(UploadedFile $file): array
 
         $maxWidth = $config['max-width'];
         $maxHeight = $config['max-height'];
+        $quality = $config['max-quality'];
 
         $name = $this->fileName($file);
         $fileName = $this->makeTargetFilename($file, $name);
         $filePath = $this->makeTargetFilePath($fileName);
 
-        $image = $this->resizeImage($file, $maxWidth, $maxHeight)->save($filePath, $config['max-quality']);
+        $image = $this->resizeImage($file, $maxWidth, $maxHeight);
+        $this->save($image, $quality, $filePath);
 
         return [
             'file'   => $fileName,
+            'path'   => $filePath,
             //'name'   => '$hash',
             'disk'   => $this->disk,
-            'mime'   => $image->mime(),
+            'mime'   => $image->origin()->mimetype(),
             'width'  => $image->width(),
             'height' => $image->height(),
             'size'   => $this->optimize($filePath),
         ];
     }
 
-    protected function resizeImage(UploadedFile $file, int $maxWidth, int $maxHeight): InterventionImage
+    protected function resizeImage(UploadedFile $file, int $maxWidth, int $maxHeight): ImageInterface
     {
-        $image = Image::make($file->getRealPath());
+        $image = ImageManager::gd()->read($file->getRealPath());
 
-        if ($image->width() > $maxWidth || $image->height() > $maxHeight) {
-            $image->resize($maxWidth, $maxHeight, function(Constraint $constraint) {
-                $constraint->aspectRatio();
-                $constraint->upsize();
-            });
-        }
+        return $image->scaleDown($maxWidth, $maxHeight);
+    }
 
-        return $image;
+    protected function save(ImageInterface $image, int $quality, string $path): void
+    {
+        $image = match ($image->origin()->mimetype()) {
+            'image/webp' => $image->toWebp($quality),
+            'image/avif' => $image->toAvif($quality),
+            'image/jpeg' => $image->toJpeg($quality),
+            default      => $image->encode(),
+        };
+
+        $image->save($path);
     }
 
     public function optimize(string $tempPath): int
     {
-        ImageOptimizer::optimize($tempPath);
+        OptimizerChainFactory::create()->optimize($tempPath);
 
         return filesize($tempPath);
     }