ctf0/media-manager

A Media Manager Built With Vuejs & Laravel

Laravel Media Manager

, _(*1)

• Installation
• Config
• Features
• Events
• Usage

, _(*2)

Installation

• composer require ctf0/media-manager, _(*3)

• publish the package assets with, _(*4)

  php artisan vendor:publish --provider="ctf0\MediaManager\MediaManagerServiceProvider", _(*5)

• after installation, run php artisan lmm:setup to add, _(*6)

  • package routes to routes/web.php
  • package assets compiling to webpack.mix.js

• for lock/unlock item/s we use a db "sqlite" but if you prefer to use something else you should run the migration, _(*7)

  php artisan migrate
  

• install dependencies, _(*8)

  yarn add vue vue-ls vue-infinite-loading vue-image-compare2 vue-tippy@v2 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome vue-touch@next vue-focuspoint-component axios dropzone cropperjs keycode lottie-web plyr fuse.js music-metadata-browser idb-keyval annyang
  yarn add buffer process --dev
  

• add this one liner to your main js file and run npm run watch to compile your js/css files., _(*9)

  • if you are having issues Check.
  • also check mix v6 notes

  // app.js
  
  // mix v5
  window.Vue = require('vue')
  
  // mix v6
  import Vue from 'vue'
  
  require('../assets/vendor/MediaManager/js/manager')
  
  new Vue({
      el: '#app'
  })
  

, _(*10)

Config

• config/mediaManager.php

, _(*11)

Features

• image editor
• multi
  • upload
  • move/copy
  • delete
• upload by either
  • using the upload panel
  • drag & drop anywhere
  • click & hold on an empty area "items container"
  • from a url "images only"
• preview files before uploading
• toggle between random/original names for uploaded files
• asynchronous Updates
• bulk selection
• bookmark visited directories for quicker navigation
• change item/s visibility
• update the page url on navigation
• show audio files info "artist, album, year, etc.."
• dynamically hide files / folders
• restrict access to path
• download selected "including bulk selection"
• directly copy selected file link
• use the manager
  • from modal
  • with any wysiwyg editor
• auto scroll to selected item using "left, up, right, down, home, end"
• lock/unlock item/s.
• search in the current directory or globally through the entire collection.
• filter by
  • folder
  • image
  • audio
  • video
  • text/pdf
  • application/archive
  • locked items
  • selected items
• sort by
  • name
  • size
  • last modified
• items count for
  • all
  • selected
  • search found
• contents ratio bar
• protection against overwriting (files/folders)
• file name sanitization for
  • upload
  • rename
  • new folder
• disable/enable buttons depend on the usage to avoid noise & keep the user focused
• shortcuts / gestures
  • if no more rows available, pressing down will go to the last item in the list "same as native file manager".
  • when viewing a audio/video file in the preview card, pressing space will play/pause the item instead of closing the modal.
  • dbl click/tap
    • any file of type audio/video when sidebar is hidden, will open it in the preview card "same as images".
    • any file of type application/archive will download it.
  • all the left/right gestures have their counterparts available as well.
  • pressing esc while using the image editor wont close the modal but you can dbl click/tap the modal background to do so. "to avoid accidentally canceling your changes".

- the info sidebar is only available on big screens "> 1023px".
- to stop interfering with other keydown events you can toggle the manager listener through
EventHub.fire('disable-global-keys', true/false)., _(*12)

, _(*13)

, _(*14)

Events

, _(*15)

Usage

Wiki
Demo, _(*16)

• visit localhost:8000/media

, _(*17)

Security

If you discover any security-related issues, please email ctf0-dev@protonmail.com., _(*18)