Skip to content

Commit

Permalink
v3.8.0
Browse files Browse the repository at this point in the history
  • Loading branch information
ctf0 committed Dec 25, 2020
1 parent 2608eeb commit 5cba9e9
Show file tree
Hide file tree
Showing 9 changed files with 80 additions and 70 deletions.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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.
Expand All @@ -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>

Expand Down Expand Up @@ -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 | | |
Expand Down Expand Up @@ -182,7 +182,7 @@
## Events

| type | event-name | description |
|-----------------|----------------------------------------------------|----------------------------------------------------------------------------|
| --------------- | -------------------------------------------------- | -------------------------------------------------------------------------- |
| [JS][js] | | |
| | modal-show | when modal is shown |
| | modal-hide | when modal is hidden |
Expand Down
2 changes: 1 addition & 1 deletion composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
9 changes: 0 additions & 9 deletions logs/v3.7.0.txt

This file was deleted.

6 changes: 6 additions & 0 deletions logs/v3.8.0.txt
Original file line number Diff line number Diff line change
@@ -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
10 changes: 5 additions & 5 deletions src/resources/assets/js/manager.js
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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,
Expand All @@ -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)
Expand Down
19 changes: 12 additions & 7 deletions src/resources/assets/js/modules/cache.js
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down Expand Up @@ -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)
}
Expand Down
32 changes: 19 additions & 13 deletions src/resources/assets/js/modules/media_player.js
Original file line number Diff line number Diff line change
@@ -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)) {
Expand Down Expand Up @@ -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() {
Expand All @@ -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() {
Expand Down
36 changes: 17 additions & 19 deletions src/resources/assets/js/webworkers/audio.js
Original file line number Diff line number Diff line change
@@ -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
})
}
26 changes: 15 additions & 11 deletions src/resources/assets/js/webworkers/db.js
Original file line number Diff line number Diff line change
@@ -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
}
})
}

0 comments on commit 5cba9e9

Please sign in to comment.