filament media manager

مدير وسائل الإعلام خيوط

قم بإدارة ملفات الوسائط الخاصة بك باستخدام مكتبة الوسائط spatie مع واجهة المستخدم الرسومية سهلة الاستخدام لـ FilamentPHP

تثبيت

composer require tomatophp/filament-media-manager

أنت الآن بحاجة إلى نشر ترحيل الوسائط

php artisan vendor:publish --provider= " SpatieMediaLibraryMediaLibraryServiceProvider " --tag= " medialibrary-migrations "

بعد تثبيت الحزمة الخاصة بك يرجى تشغيل هذا الأمر

php artisan filament-media-manager:install

أخيرًا قم بتسجيل المكون الإضافي على /app/Providers/Filament/AdminPanelProvider.php ، إذا كنت ترغب في استخدام واجهة المستخدم الرسومية ومتصفح المجلدات.

-> plugin ( TomatoPHP  FilamentMediaManager  FilamentMediaManagerPlugin :: make ())

سمات

• إدارة ملفات الوسائط الخاصة بك باستخدام مكتبة الوسائط spatie
• إنشاء المجلدات والمجلدات الفرعية
• تعيين كلمة المرور للمجلدات
• تحميل الملفات ذات الحقول المخصصة باستخدام ->schema()
• إنشاء مجلدات تلقائيًا للنموذج/المجموعة/السجل
• دعم اللغة RTL/Mutli

لقطات الشاشة

الاستخدام

يمكنك استخدام مدير الوسائط عن طريق إضافة هذا الرمز إلى مكون الفتيل الخاص بك

 use TomatoPHP  FilamentMediaManager  Form  MediaManagerInput ;

public function form ( Form $ form )
{
    return $ form -> schema ([
        MediaManagerInput :: make ( ' images ' )
            -> disk ( ' public ' )
            -> schema ([
                Forms  Components  TextInput :: make ( ' title ' )
                    -> required ()
                    -> maxLength ( 255 ),
                Forms  Components  TextInput :: make ( ' description ' )
                    -> required ()
                    -> maxLength ( 255 ),
            ]),
    ]);
}

أضف معاينة مخصصة للنوع المحدد في مدير الوسائط

يمكنك إضافة معاينة مخصصة للنوع المحدد في مدير الوسائط عن طريق إضافة هذا الرمز إلى المزود الخاص بك

 use TomatoPHP  FilamentMediaManager  Facade  FilamentMediaManager ;
use TomatoPHP  FilamentMediaManager  Services  Contracts  MediaManagerType ;


public function boot () {
     FilamentMediaManager :: register ([
        MediaManagerType :: make ( ' .pdf ' )
            -> icon ( ' bxs-file-pdf ' )
            -> preview ( ' media-manager.pdf ' ),
    ]);
}

في ملف العرض الخاص بك يمكنك استخدامه مثل هذا

<div class="m- 4 ">
    <canvas id="the-canvas"></canvas>
</div>

<script src="//mozilla.github.io/pdf.js/build/pdf.mjs" type="module"></script>

<style type="text/css">
    #the-canvas {
        border: 1 px solid black;
        direction: ltr;
    }
</style>
<script type="module">
    // If absolute URL from the remote server is provided, configure the CORS
    // header on that server.
    var url = " {{ $ url }} " ;

    // Loaded via <script> tag, create shortcut to access PDF.js exports.
    var { pdfjsLib } = globalThis;

    // The workerSrc property shall be specified.
    pdfjsLib. GlobalWorkerOptions .workerSrc = ' //mozilla.github.io/pdf.js/build/pdf.worker.mjs ' ;

    // Asynchronous download of PDF
    var loadingTask = pdfjsLib. getDocument (url);
    loadingTask.promise. then ( function ( pdf ) {

        // Fetch the first page
        var pageNumber = 1 ;
        pdf. getPage (pageNumber). then ( function ( page ) {
            var scale = 1 ;
            var viewport = page.getViewport({scale: scale});

            // Prepare canvas using PDF page dimensions
            var canvas = document. getElementById ( ' the-canvas ' );
            var context = canvas. getContext ( ' 2d ' );
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            var renderTask = page. render (renderContext);
        });
    }, function ( reason ) {
        // PDF loading error
        console. error (reason);
    });
</script>

يمكنك إرفاق ملف js أو css عالمي بمدير الوسائط عن طريق إضافة هذا الرمز إلى المزود الخاص بك

 use TomatoPHP  FilamentMediaManager  Facade  FilamentMediaManager ;
use TomatoPHP  FilamentMediaManager  Services  Contracts  MediaManagerType ;


public function boot() {
     FilamentMediaManager ::register([
        MediaManagerType :: make ( ' .pdf ' )
            -> js ( ' https://mozilla.github.io/pdf.js/build/pdf.mjs ' ),
            -> css ( ' https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf_viewer.min.css ' ),
            -> icon ( ' bxs-file-pdf ' )
            -> preview ( ' media-manager.pdf ' ),
    ]);
}

يرجى ملاحظة أن name المكون سيكون هو نفس اسم المجموعة.

السماح بالمجلدات الفرعية

يمكنك السماح بإنشاء وإدارة المجلدات الفرعية على مدير الوسائط الخاص بك على /app/Providers/Filament/AdminPanelProvider.php

-> plugin (
     TomatoPHP  FilamentMediaManager  FilamentMediaManagerPlugin :: make ()
        -> allowSubFolders ()
)

السماح بوصول المستخدم

يمكنك الآن السماح للمستخدم بالوصول إلى المجلد المحدد وتقييد وصول المستخدم إلى المجلدات الأخرى إذا لم يكن المجلد عامًا على /app/Providers/Filament/AdminPanelProvider.php

-> plugin (
     TomatoPHP  FilamentMediaManager  FilamentMediaManagerPlugin :: make ()
        -> allowUserAccess ()
)

الآن، في نموذج المستخدم الخاص بك، يمكنك استخدام هذه السمة للسماح للمستخدم بالوصول إلى المجلد المحدد

 use TomatoPHP  FilamentMediaManager  Traits  InteractsWithMediaFolders ;

class User extends Authenticatable
{
    use InteractsWithMediaFolders ;
}

ملحوظة: لا تنس الترحيل بعد تحديث البرنامج المساعد

واجهة برمجة تطبيقات المجلدات

الآن يمكنك الوصول إلى الوسائط والمجلدات الخاصة بك باستخدام واجهة برمجة التطبيقات (API) لديك نقطتي نهاية

• /api/folders للحصول على كافة المجلدات
• /api/folders/{id} للحصول على المجلد حسب المعرف مع المجلدات الفرعية وملفات الوسائط

للسماح بهذه الميزة، تحتاج إلى نشر ملف التكوين باستخدام هذا الأمر

php artisan vendor:publish --tag= " filament-media-manager-config "

ثم يمكنك ضبط api.active على true في ملف التكوين

 ' api ' => [
    " active " => true ,
],

نشر الأصول

يمكنك نشر ملف التكوين باستخدام هذا الأمر

php artisan vendor:publish --tag= " filament-media-manager-config "

يمكنك نشر ملف المشاهدات باستخدام هذا الأمر

php artisan vendor:publish --tag= " filament-media-manager-views "

يمكنك نشر ملف اللغات باستخدام هذا الأمر

php artisan vendor:publish --tag= " filament-media-manager-lang "

يمكنك نشر ملف الترحيل باستخدام هذا الأمر

php artisan vendor:publish --tag= " filament-media-manager-migrations " 

حزم خيوط أخرى

تحقق من TomatoPHP الرائع الخاص بنا