diff --git a/README.md b/README.md index 0799a9a..924cd8e 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@

Laravel Media Manager
- Browser Status + Browser Status Latest Stable Version Total Downloads
@@ -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)
@@ -138,7 +138,7 @@
| 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 | diff --git a/composer.json b/composer.json index 523f68a..e930d09 100644 --- a/composer.json +++ b/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" diff --git a/logs/v3.7.0.txt b/logs/v3.7.0.txt deleted file mode 100644 index 615b540..0000000 --- a/logs/v3.7.0.txt +++ /dev/null @@ -1,9 +0,0 @@ -- add voice search, plz test and reply back -- add new npm-dep "annyang" -- fix not able to scroll the files container on touch screen -- fix timestamp issue for cloud disks "https://github.com/ctf0/Laravel-Media-Manager/issues/143" -- fix url update "https://github.com/ctf0/Laravel-Media-Manager/issues/142" -- make sure all tooltips have the same styles -- hide folder info if 'get_folder_info' is false -- stop supporting laravel v5 -- some cleanups diff --git a/logs/v3.8.0.txt b/logs/v3.8.0.txt new file mode 100644 index 0000000..6cbdf59 --- /dev/null +++ b/logs/v3.8.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 diff --git a/src/resources/assets/js/manager.js b/src/resources/assets/js/manager.js index 86ae0e0..d315075 100644 --- a/src/resources/assets/js/manager.js +++ b/src/resources/assets/js/manager.js @@ -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) diff --git a/src/resources/assets/js/modules/cache.js b/src/resources/assets/js/modules/cache.js index 3e8434e..96e4fc6 100644 --- a/src/resources/assets/js/modules/cache.js +++ b/src/resources/assets/js/modules/cache.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) } diff --git a/src/resources/assets/js/modules/media_player.js b/src/resources/assets/js/modules/media_player.js index 0810ffd..e884914 100644 --- a/src/resources/assets/js/modules/media_player.js +++ b/src/resources/assets/js/modules/media_player.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() { diff --git a/src/resources/assets/js/webworkers/audio.js b/src/resources/assets/js/webworkers/audio.js index d4d7735..5992a5f 100644 --- a/src/resources/assets/js/webworkers/audio.js +++ b/src/resources/assets/js/webworkers/audio.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 + }) +} diff --git a/src/resources/assets/js/webworkers/db.js b/src/resources/assets/js/webworkers/db.js index e44797d..89af676 100644 --- a/src/resources/assets/js/webworkers/db.js +++ b/src/resources/assets/js/webworkers/db.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 } -}) +}