diff --git a/administrator/components/com_media/config.xml b/administrator/components/com_media/config.xml index 95344adb705b5..ebc948479b5d4 100644 --- a/administrator/components/com_media/config.xml +++ b/administrator/components/com_media/config.xml @@ -3,14 +3,6 @@
- JYES + + + + + + + + diff --git a/administrator/components/com_media/resources/scripts/app/Api.es6.js b/administrator/components/com_media/resources/scripts/app/Api.es6.js index 69fe8701fe691..5622d66c39b73 100644 --- a/administrator/components/com_media/resources/scripts/app/Api.es6.js +++ b/administrator/components/com_media/resources/scripts/app/Api.es6.js @@ -23,6 +23,9 @@ class Api { this._csrfToken = Joomla.getOptions('csrf.token'); this.imagesExtensions = options.imagesExtensions; + this.audioExtensions = options.audioExtensions; + this.videoExtensions = options.videoExtensions; + this.documentExtensions = options.documentExtensions; } /** diff --git a/administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue b/administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue index 3e93e76161d7e..b9be966f178d5 100644 --- a/administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue +++ b/administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue @@ -62,6 +62,16 @@ export default { /* Handle the on crumb click event */ onCrumbClick(crumb) { this.navigateTo(crumb.path); + window.parent.document.dispatchEvent( + new CustomEvent( + 'onMediaFileSelected', + { + bubbles: true, + cancelable: false, + detail: {}, + }, + ), + ); }, findDrive(adapter) { let driveObject = null; diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/audio.vue b/administrator/components/com_media/resources/scripts/components/browser/items/audio.vue new file mode 100644 index 0000000000000..209f97786686a --- /dev/null +++ b/administrator/components/com_media/resources/scripts/components/browser/items/audio.vue @@ -0,0 +1,221 @@ + + + diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/document.vue b/administrator/components/com_media/resources/scripts/components/browser/items/document.vue new file mode 100644 index 0000000000000..d8bb03445b8d3 --- /dev/null +++ b/administrator/components/com_media/resources/scripts/components/browser/items/document.vue @@ -0,0 +1,221 @@ + + + diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js b/administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js index 80416d66040a2..cea449a718017 100644 --- a/administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js +++ b/administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js @@ -3,6 +3,8 @@ import Directory from './directory.vue'; import File from './file.vue'; import Image from './image.vue'; import Video from './video.vue'; +import Audio from './audio.vue'; +import Doc from './document.vue'; import * as types from '../../../store/mutation-types.es6'; import { api } from '../../../app/Api.es6'; @@ -15,33 +17,41 @@ export default { }, methods: { /** - * Return the correct item type component - */ + * Return the correct item type component + */ itemType() { - const imageExtensions = api.imagesExtensions; - const videoExtensions = ['mp4']; - // Render directory items if (this.item.type === 'dir') return Directory; // Render image items - if (this.item.extension && imageExtensions.includes(this.item.extension.toLowerCase())) { + if (this.item.extension && api.imagesExtensions.includes(this.item.extension.toLowerCase())) { return Image; } // Render video items - if (this.item.extension && !videoExtensions.includes(this.item.extension.toLowerCase())) { + if (this.item.extension && api.videoExtensions.includes(this.item.extension.toLowerCase())) { return Video; } + // Render audio items + if (this.item.extension && api.audioExtensions.includes(this.item.extension.toLowerCase())) { + return Audio; + } + + // Render document items + if (this.item.extension + && api.documentExtensions.includes(this.item.extension.toLowerCase())) { + return Doc; + } + // Default to file type return File; }, /** - * Get the styles for the media browser item - * @returns {{}} - */ + * Get the styles for the media browser item + * @returns {{}} + */ styles() { return { width: `calc(${this.$store.state.gridSize}% - 20px)`, @@ -49,39 +59,39 @@ export default { }, /** - * Whether or not the item is currently selected - * @returns {boolean} - */ + * Whether or not the item is currently selected + * @returns {boolean} + */ isSelected() { return this.$store.state.selectedItems.some((selected) => selected.path === this.item.path); }, /** - * Whether or not the item is currently active (on hover or via tab) - * @returns {boolean} - */ + * Whether or not the item is currently active (on hover or via tab) + * @returns {boolean} + */ isHoverActive() { return this.hoverActive; }, /** - * Turns on the hover class - */ + * Turns on the hover class + */ mouseover() { this.hoverActive = true; }, /** - * Turns off the hover class - */ + * Turns off the hover class + */ mouseleave() { this.hoverActive = false; }, /** - * Handle the click event - * @param event - */ + * Handle the click event + * @param event + */ handleClick(event) { if (this.item.path && this.item.type === 'file') { window.parent.document.dispatchEvent( @@ -147,9 +157,9 @@ export default { }, /** - * Handle the when an element is focused in the child to display the layover for a11y - * @param value - */ + * Handle the when an element is focused in the child to display the layover for a11y + * @param value + */ focused(value) { // eslint-disable-next-line no-unused-expressions value ? this.mouseover() : this.mouseleave(); diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/row.vue b/administrator/components/com_media/resources/scripts/components/browser/items/row.vue index e0317f482648e..5ac82073d7a8e 100644 --- a/administrator/components/com_media/resources/scripts/components/browser/items/row.vue +++ b/administrator/components/com_media/resources/scripts/components/browser/items/row.vue @@ -70,7 +70,8 @@ export default { return; } - const extensionWithPreview = ['jpg', 'jpeg', 'png', 'gif', 'mp4']; + // @todo remove the hardcoded extensions here + const extensionWithPreview = ['jpg', 'jpeg', 'png', 'gif', 'mp4', 'mp3', 'pdf']; // Show preview if (this.item.extension @@ -81,17 +82,17 @@ export default { }, /** - * Whether or not the item is currently selected - * @returns {boolean} - */ + * Whether or not the item is currently selected + * @returns {boolean} + */ isSelected() { return this.$store.state.selectedItems.some((selected) => selected.path === this.item.path); }, /** - * Handle the click event - * @param event - */ + * Handle the click event + * @param event + */ onClick(event) { const path = false; const data = { @@ -107,12 +108,16 @@ export default { data.width = this.item.width ? this.item.width : 0; data.height = this.item.height ? this.item.height : 0; - const ev = new CustomEvent('onMediaFileSelected', { - bubbles: true, - cancelable: false, - detail: data, - }); - window.parent.document.dispatchEvent(ev); + window.parent.document.dispatchEvent( + new CustomEvent( + 'onMediaFileSelected', + { + bubbles: true, + cancelable: false, + detail: data, + }, + ), + ); } // Handle clicks when the item was not selected diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/video.vue b/administrator/components/com_media/resources/scripts/components/browser/items/video.vue index 1714751d5cfdc..45623f42ac71d 100644 --- a/administrator/components/com_media/resources/scripts/components/browser/items/video.vue +++ b/administrator/components/com_media/resources/scripts/components/browser/items/video.vue @@ -7,7 +7,7 @@
- +
diff --git a/administrator/components/com_media/resources/scripts/components/modals/preview-modal.vue b/administrator/components/com_media/resources/scripts/components/modals/preview-modal.vue index 9572f98097a54..9b76de744132f 100644 --- a/administrator/components/com_media/resources/scripts/components/modals/preview-modal.vue +++ b/administrator/components/com_media/resources/scripts/components/modals/preview-modal.vue @@ -17,11 +17,11 @@