Skip to content

Commit

Permalink
v3.2.0
Browse files Browse the repository at this point in the history
## Fix

- db-click to open folder not selecting first item as it should
- `scrollByRow()` error after the manager modal is closed
- `__stack-files-reverse` not setting `left: 0`
- config `sanitized_text` function is now a string so we can use it with `call_user_func()`, this is to make sure uploaded files dont get a duplicated names when the random option is on.
- not reseting the filter btn class when no files are found

# New

- npm dep “plyr” to overcome the browser inconsistent player look
- tooltip to global search btn
- content ratio bar + an option to enable/disable it under config `show_ratio_bar`

# Update

- re-enable the refresh btn when the ajax call fail so you dont have to manually clear the manager cache.
- changed all the `media-manager__stack-` class names to `__stack-` except the main one.
- changed config `cacheExpiresAfter` to `cache_expires_after`
- all resources + config “plz republish”
  • Loading branch information
ctf0 committed Aug 23, 2018
1 parent 082e1b1 commit 52a7c16
Show file tree
Hide file tree
Showing 19 changed files with 377 additions and 228 deletions.
16 changes: 11 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@
- [install dependencies](https://github.com/ctf0/Laravel-Media-Manager/wiki/Packages-In-Use)

```bash
yarn add vue vue-ls vue-async-computed vue-tippy@v1 vue2-filters vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web fuse.js
yarn add vue vue-ls vue-async-computed vue-tippy@v1 vue2-filters vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web plyr fuse.js
# or
npm install vue vue-ls vue-async-computed vue-tippy@v1 vue2-filters vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web fuse.js --save
npm install vue vue-ls vue-async-computed vue-tippy@v1 vue2-filters vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web plyr fuse.js --save
```

- add this one liner to your main js file and run `npm run watch` to compile your `js/css` files.
Expand Down Expand Up @@ -95,6 +95,7 @@
+ all
+ selected
+ search found
- a content ratio bar "similar to itunes"
- protection against overwriting (files/folders)
- file name sanitization for
+ upload
Expand Down Expand Up @@ -208,7 +209,7 @@ return [
/*
* when file names gets cleand up
*/
'sanitized_text' => uniqid(),
'sanitized_text' => 'uniqid',

/*
* display file last modification time as
Expand All @@ -229,7 +230,7 @@ return [
/*
* automatically invalidate cache after "in Minutes"
*/
'cacheExpiresAfter' => 60,
'cache_expires_after' => 60,

/*
* in-order to get the folder items count & size
Expand All @@ -244,7 +245,12 @@ return [
*
* "laravel-echo" must be installed
*/
'enable_broadcasting' => false
'enable_broadcasting' => false,

/**
* show "an itunes like" content ratio bar
*/
'show_ratio_bar' => true
];
```

Expand Down
3 changes: 0 additions & 3 deletions logs/v3.1.3.txt

This file was deleted.

22 changes: 22 additions & 0 deletions logs/v3.2.0.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
## Fix

- db-click to open folder not selecting first item as it should
- `scrollByRow()` error after the manager modal is closed
- `__stack-files-reverse` not setting `left: 0`
- config `sanitized_text` function is now a string so we can use it with `call_user_func()`, this is to make sure uploaded files dont get a duplicated names when the random option is on.
- not reseting the filter btn class when no files are found


# New

- npm dep “plyr” to overcome the browser inconsistent player look
- tooltip to global search btn
- content ratio bar + an option to enable/disable it under config `show_ratio_bar`


# Update

- re-enable the refresh btn when the ajax call fail so you dont have to manually clear the manager cache.
- changed all the `media-manager__stack-` class names to `__stack-` except the main one.
- changed config `cacheExpiresAfter` to `cache_expires_after`
- all resources + config “plz republish”
10 changes: 5 additions & 5 deletions src/Controllers/Modules/Upload.php
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ public function upload(Request $request)
$name_only = pathinfo($original, PATHINFO_FILENAME);
$ext_only = pathinfo($original, PATHINFO_EXTENSION);
$file_name = $random_name
? $this->sanitizedText . ".$ext_only"
: $this->cleanName($name_only, null) . ".$ext_only";
? $this->getRandomString() . ".$ext_only"
: $this->cleanName($name_only) . ".$ext_only";

$file_type = $one->getMimeType();
$destination = !$upload_path ? $file_name : $this->clearDblSlash("$upload_path/$file_name");
Expand Down Expand Up @@ -102,7 +102,7 @@ public function uploadEditedImage(Request $request)
$path = $request->path;
$data = explode(',', $request->data)[1];
$original = $request->name;
$name_only = pathinfo($original, PATHINFO_FILENAME) . '_' . $this->sanitizedText;
$name_only = pathinfo($original, PATHINFO_FILENAME) . '_' . $this->getRandomString();
$ext_only = pathinfo($original, PATHINFO_EXTENSION);
$file_name = "$name_only.$ext_only";
$destination = !$path ? $file_name : $this->clearDblSlash("$path/$file_name");
Expand Down Expand Up @@ -165,8 +165,8 @@ public function uploadLink(Request $request)
$name_only = pathinfo($original, PATHINFO_FILENAME);
$ext_only = pathinfo($original, PATHINFO_EXTENSION);
$file_name = $random_name
? $this->sanitizedText . ".$ext_only"
: $this->cleanName($name_only, null) . ".$ext_only";
? $this->getRandomString() . ".$ext_only"
: $this->cleanName($name_only) . ".$ext_only";

$destination = !$path ? $file_name : $this->clearDblSlash("$path/$file_name");
$file_type = image_type_to_mime_type(exif_imagetype($url));
Expand Down
17 changes: 8 additions & 9 deletions src/Controllers/Modules/Utils.php
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,19 @@ trait Utils
/**
* sanitize input.
*
* @param [type] $text [description]
* @param null|mixed $folder
*
* @return [type] [description]
*/
protected function cleanName($text, $folder = null)
protected function getRandomString()
{
$pattern = $folder
? $this->filePattern($this->folderChars)
: $this->filePattern($this->fileChars);
return call_user_func($this->sanitizedText);
}

$text = preg_replace($pattern, '', $text);
protected function cleanName($text, $folder = false)
{
$pattern = $this->filePattern($folder ? $this->folderChars : $this->fileChars);
$text = preg_replace($pattern, '', $text);

return $text == '' ? $this->sanitizedText : $text;
return $text == '' ? $this->getRandomString() : $text;
}

protected function filePattern($item)
Expand Down
10 changes: 8 additions & 2 deletions src/config/mediaManager.php
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
/*
* when file names gets cleand up
*/
'sanitized_text' => uniqid(),
'sanitized_text' => 'uniqid',

/*
* display file last modification time as
Expand All @@ -69,7 +69,7 @@
* automatically invalidate cache after ?
* in "Minutes"
*/
'cacheExpiresAfter' => 60,
'cache_expires_after' => 60,

/*
* in-order to get the folder items count & size
Expand All @@ -85,4 +85,10 @@
* "laravel-echo" must be installed
*/
'enable_broadcasting' => false,

/*
* show "an itunes like" content ratio bar
* above the manager
*/
'show_ratio_bar' => true,
];
2 changes: 1 addition & 1 deletion src/resources/assets/js/components/globalSearch/panel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ export default {
// cont.style.position = 'relative'
} else {
EventHub.fire('disable-global-keys', false)
// cont.style.position = 'unset'
// cont.style.position = ''
}
},
search() {
Expand Down
2 changes: 1 addition & 1 deletion src/resources/assets/js/components/lazyLoading/normal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default {
}
})
}, {
root: document.querySelector('.media-manager__stack-files'),
root: document.querySelector('.__stack-files'),
rootMargin: '0px',
threshold: 1.0
})
Expand Down
40 changes: 11 additions & 29 deletions src/resources/assets/js/components/media.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,16 @@ import Watchers from '../modules/watch'
import Computed from '../modules/computed'
import Broadcast from '../modules/broadcast'
import Scroll from '../modules/scroll'
import Media from '../modules/media'
export default {
components: {
Cropper: require('./imageEditor/cropper.vue'),
imageCache: require('./lazyLoading/cache.vue'),
imageIntersect: require('./lazyLoading/normal.vue'),
globalSearchBtn: require('./globalSearch/button.vue'),
globalSearchPanel: require('./globalSearch/panel.vue')
globalSearchPanel: require('./globalSearch/panel.vue'),
contentRatio: require('./ratio.vue')
},
name: 'media-manager',
mixins: [
Expand All @@ -43,7 +45,8 @@ export default {
Image,
Url,
Broadcast,
Scroll
Scroll,
Media
],
props: [
'config',
Expand Down Expand Up @@ -99,23 +102,24 @@ export default {
newFolderName: null,
newFilename: null,
activeModal: null,
plyr: null,
imageSlideDirection: null,
firstRun: true, // for delayed scroll on manager init
firstMeta: false, // for alt + click selection
uploadPanelGradients: [
'linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%)',
'linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%)',
'linear-gradient(141deg, #12af2f 0%, #23d160 71%, #2ce28a 100%)',
'linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%)',
'linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%)',
'linear-gradient(141deg, #1f191a 0%, #363636 71%, #46403f 100%)'
],
firstRun: true, // for delayed scroll on manager init
firstMeta: false // for alt + click selection
]
}
},
created() {
window.addEventListener('popstate', this.urlNavigation)
window.addEventListener('resize', debounce(this.scrollByRow, 250))
window.addEventListener('resize', debounce(this.scrollByRow, 500))
document.addEventListener('keydown', this.shortCuts)
this.init()
},
Expand All @@ -127,7 +131,6 @@ export default {
}, 1000))
},
updated: debounce(function() {
this.autoPlay()
this.$nextTick(() => {
this.activeModal || this.inModal
? this.noScroll('add')
Expand Down Expand Up @@ -382,27 +385,6 @@ export default {
}
this.toggleModal('confirm_delete_modal')
},
/**
* autoplay media
*/
autoPlay() {
if (this.filterNameIs('audio') || this.filterNameIs('video')) {
let player = this.$refs.player
player.onended = () => {
// stop at the end of list
if (this.currentFileIndex < this.allItemsCount - 1) {
// nav to next
this.goToNext()
// play navigated to
this.$nextTick(() => {
this.$refs.player.play()
})
}
}
}
}
},
render() {}
Expand Down
76 changes: 76 additions & 0 deletions src/resources/assets/js/components/ratio.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<template>
<div class="progress">
<p v-tippy="{theme: 'light', arrow: true}"
v-for="(val, key) in contentRatio"
:class="`is-${key}`"
:style="getRatio(val)"
:title="getToolTipContent(key, val)"
class="progress-bar progress-bar-striped active">
<strong v-show="val > 0">{{ key }}</strong>
</p>
</div>
</template>

<style scoped lang="scss">
.progress-bar {
box-shadow: none;
strong {
text-transform: uppercase;
mix-blend-mode: difference;
}
}
</style>

<script>
export default {
props: {
list: {
type: Array,
required: true
},
total: {
type: Number,
required: true
}
},
computed: {
parent() {
return this.$parent
},
contentRatio() {
let ratio = {
audio: 0,
video: 0,
image: 0,
text: 0,
folder: 0,
application: 0,
pdf: 0
}
this.list.forEach((e) => {
if (this.parent.fileTypeIs(e, 'audio')) ratio.audio++
if (this.parent.fileTypeIs(e, 'video')) ratio.video++
if (this.parent.fileTypeIs(e, 'image')) ratio.image++
if (this.parent.fileTypeIs(e, 'text')) ratio.text++
if (this.parent.fileTypeIs(e, 'pdf')) ratio.pdf++
if (this.parent.fileTypeIs(e, 'folder')) ratio.folder++
if (this.parent.fileTypeIs(e, 'application')) ratio.application++
})
return ratio
}
},
methods: {
getRatio(val) {
return {
width: `${val / this.total * 100}%`
}
},
getToolTipContent(k, v) {
return `<p class="title is-marginless">${v}</p><p class="heading">${k}</p>`
}
}
}
</script>
Loading

0 comments on commit 52a7c16

Please sign in to comment.