v3.8.0

Author: ctf0

README.md

@@ -1,7 +1,7 @@
 <h1 align="center">
     Laravel Media Manager
     <br>
-    <a href="https://packagist.org/packages/laravel/laravel"><img src="https://img.shields.io/badge/Laravel-v6+-red" alt="Browser Status"/></a>
+    <a href="https://packagist.org/packages/laravel/laravel"><img src="https://img.shields.io/badge/Laravel-v7+-red" alt="Browser Status"/></a>
     <a href="https://packagist.org/packages/ctf0/media-manager"><img src="https://img.shields.io/packagist/v/ctf0/media-manager.svg" alt="Latest Stable Version"/></a>
     <a href="https://packagist.org/packages/ctf0/media-manager"><img src="https://img.shields.io/packagist/dt/ctf0/media-manager.svg" alt="Total Downloads"/></a>
     <br>
@@ -43,7 +43,7 @@
 
     ```bash
     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@v2 vue-touch@next vue-focuspoint-component axios dropzone cropperjs keycode lottie-web plyr fuse.js music-metadata-browser idb-keyval annyang
-    yarn add worker-loader --dev
+    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.
@@ -64,7 +64,7 @@
 
 ## Config
 
-- [**config/mediaManager.php**](https://github.com/ctf0/Laravel-Media-Manager/blob/master/src/config/mediaManager.php)
+- [**config/mediaManager.php**](./src/config/mediaManager.php)
 
 <br>
 
@@ -138,7 +138,7 @@
 <br>
 
 | navigation           | button                                              | keyboard         | click / tap                  | touch                           |
-|----------------------|-----------------------------------------------------|------------------|------------------------------|---------------------------------|
+| -------------------- | --------------------------------------------------- | ---------------- | ---------------------------- | ------------------------------- |
 |                      | toggle upload panel *(toolbar)*                     | u                |                              |                                 |
 |                      | refresh *(toolbar)*                                 | r                | hold *"clear cache"*         | pinch in *(items container)*    |
 |                      | [move/show movable list][movable] *(toolbar)*       | m / p            |                              |                                 |
@@ -182,7 +182,7 @@
 ## Events
 
 | type            | event-name                                         | description                                                                |
-|-----------------|----------------------------------------------------|----------------------------------------------------------------------------|
+| --------------- | -------------------------------------------------- | -------------------------------------------------------------------------- |
 | [JS][js]        |                                                    |                                                                            |
 |                 | modal-show                                         | when modal is shown                                                        |
 |                 | modal-hide                                         | when modal is hidden                                                       |

composer.json

@@ -18,7 +18,7 @@
         }
     ],
     "require": {
-        "illuminate/support": ">=6.0 <9.0",
+        "illuminate/support": ">=7.0 <9.0",
         "maennchen/zipstream-php": ">=1.0",
         "ctf0/package-changelog": "*",
         "jhofm/flysystem-iterator": "^2.2"

logs/v3.7.0.txt

@@ -0,0 +1,6 @@
+- use laravel mix v6
+- change minimum version for laravel to v7
+- remove `worker-loader` & use wp native worker support instead
+- add `buffer & process` to dev deps
+- update demo repo with the new changes
+- add new wiki for v6 upgrade https://github.com/ctf0/Laravel-Media-Manager/wiki/Laravel-Mix-V6

logs/v3.8.0.txt

@@ -1,6 +1,6 @@
 /*                Libs                */
-import Vue2Filters from 'vue2-filters'
 import VueClipboard from 'vue-clipboard2'
+import Vue2Filters  from 'vue2-filters'
 
 Vue.use(Vue2Filters)
 Vue.use(VueClipboard)
@@ -27,8 +27,8 @@ Vue.use(VueTouch)
 // axios
 window.axios = require('axios')
 axios.defaults.headers.common = {
-    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
-    'X-Requested-With': 'XMLHttpRequest'
+    'X-CSRF-TOKEN'     : document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
+    'X-Requested-With' : 'XMLHttpRequest'
 }
 axios.interceptors.response.use(
     (response) => response,
@@ -44,8 +44,8 @@ axios.interceptors.response.use(
 
 // vue-awesome
 require('./modules/icons')
-Vue.component('icon', require('vue-awesome/components/Icon').default)
-Vue.component('iconTypes', require('./components/utils/icon-types.vue').default)
+Vue.component('Icon', require('vue-awesome/components/Icon').default)
+Vue.component('IconTypes', require('./components/utils/icon-types.vue').default)
 
 /*                Components                */
 Vue.component('MediaManager', require('./components/manager.vue').default)

src/resources/assets/js/manager.js

@@ -1,4 +1,10 @@
-import DbWorker from 'worker-loader!../webworkers/db'
+const DbWorker = new Worker(
+    new URL('../webworkers/db.js', import.meta.url),
+    {
+        name: 'db'
+        /* webpackEntryOptions: { filename: "workers/[name].js" } */
+    }
+)
 
 export default {
     methods: {
@@ -31,12 +37,11 @@ export default {
         /*                idb                */
         db(type, key = null, val = null) {
             return new Promise((resolve) => {
-                const db = new DbWorker()
-                db.addEventListener('message', (e) => resolve(e.data))
-                db.postMessage({
-                    type: type, // get,set,del,clr,keys
-                    key: key ? encodeURI(key) : null,
-                    val: val
+                DbWorker.onmessage = (e) => resolve(e.data)
+                DbWorker.postMessage({
+                    type : type, // get,set,del,clr,keys
+                    key  : key ? encodeURI(key) : null,
+                    val  : val
                 })
             }).then((data) => data)
         }

src/resources/assets/js/modules/cache.js

@@ -1,15 +1,22 @@
-import Plyr from 'plyr'
-import AudioWorker from 'worker-loader!../webworkers/audio'
 import omit from 'lodash/omit'
+import Plyr from 'plyr'
+
+const AudioWorker = new Worker(
+    new URL('../webworkers/audio.js', import.meta.url),
+    {
+        name: 'audio'
+        /* webpackEntryOptions: { filename: "workers/[name].js" } */
+    }
+)
 
 export default {
     methods: {
         initPlyr() {
             let options = {
-                debug: false,
-                controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
-                tooltips: {controls: true, seek: true},
-                keyboard: {focused: false, global: false}
+                debug    : false,
+                controls : ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
+                tooltips : {controls: true, seek: true},
+                keyboard : {focused: false, global: false}
             }
 
             if (!this.isASmallScreen || (this.isASmallScreen && this.activeModal)) {
@@ -44,9 +51,9 @@ export default {
         destroyPlyr() {
             if (this.player.item) this.player.item.destroy()
             this.player = {
-                item: null,
-                fs: false,
-                playing: false
+                item    : null,
+                fs      : false,
+                playing : false
             }
         },
         playMedia() {
@@ -68,15 +75,14 @@ export default {
                 // cover could be corrupted when loaded from cache
                 // so we have to refetch it
                 // also to save space we cache all except 'cover'
-                const audio = new AudioWorker()
-                audio.addEventListener('message', ({data}) => {
+                AudioWorker.onmessage = ({data}) => {
                     if (!cache) {
                         this.db('set', url, omit(data, ['cover']))
                     }
 
                     this.audioFileMeta = data
-                })
-                audio.postMessage(url)
+                }
+                AudioWorker.postMessage(url)
             })
         },
         checkAudioData() {

src/resources/assets/js/modules/media_player.js

@@ -1,24 +1,22 @@
 const musicMetadata = require('music-metadata-browser')
 
-self.addEventListener('message', (e) => {
+onmessage = async (e) => {
     let url = e.data
 
-    musicMetadata.fetchFromUrl(url)
-        .then((val) => {
-            let res = val.common
-            let picture = res.picture
+    let val = await musicMetadata.fetchFromUrl(url)
+    let res = val.common
+    let picture = res.picture
 
-            self.postMessage({
-                artist: res.artist,
-                title: res.title,
-                album: res.album,
-                track: res.track.no,
-                track_total: res.track.of,
-                year: res.year,
-                genre: res.genre ? res.genre[0] : null,
-                cover: picture
-                    ? URL.createObjectURL(new Blob([picture[0].data.buffer]))
-                    : null
-            })
-        })
-})
+    postMessage({
+        artist      : res.artist,
+        title       : res.title,
+        album       : res.album,
+        track       : res.track.no,
+        track_total : res.track.of,
+        year        : res.year,
+        genre       : res.genre ? res.genre[0] : null,
+        cover       : picture
+            ? URL.createObjectURL(new Blob([picture[0].data.buffer]))
+            : null
+    })
+}

src/resources/assets/js/webworkers/audio.js

@@ -1,33 +1,37 @@
 const db = require('idb-keyval')
 const store = new db.Store('ctf0-Media_Manager', 'media_manager')
 
-self.addEventListener('message', async (e) => {
+onmessage = (e) => {
     let {type, key, val} = e.data
 
     switch (type) {
         case 'get':
             db.get(key, store)
-                .then((res) => self.postMessage(res))
+                .then((res) => postMessage(res))
             break
+
         case 'set':
             db.set(key, val, store)
-                .then(() => self.postMessage(true))
-                .catch(() => self.postMessage(false))
+                .then(() => postMessage(true))
+                .catch(() => postMessage(false))
             break
+
         case 'del':
             db.del(key, store)
-                .then(() => self.postMessage(true))
-                .catch(() => self.postMessage(false))
+                .then(() => postMessage(true))
+                .catch(() => postMessage(false))
             break
+
         case 'clr':
             db.clear(store)
-                .then(() => self.postMessage(true))
-                .catch(() => self.postMessage(false))
+                .then(() => postMessage(true))
+                .catch(() => postMessage(false))
             break
+
         case 'keys':
             db.keys(store)
-                .then((res) => self.postMessage(res))
-                .catch(() => self.postMessage(false))
+                .then((res) => postMessage(res))
+                .catch(() => postMessage(false))
             break
     }
-})
+}