[4.0] Select image/audio/video/document file from Media Manager

administrator/components/com_media/config.xml

@@ -3,14 +3,6 @@
 	<fieldset
 		name="component"
 		label="COM_MEDIA_FIELDSET_OPTIONS_LABEL">
-		<field
-			name="upload_extensions"
-			type="text"
-			label="COM_MEDIA_FIELD_LEGAL_EXTENSIONS_LABEL"
-			description="COM_MEDIA_FIELD_LEGAL_EXTENSIONS_DESC"
-			size="50"
-			default="bmp,csv,doc,gif,ico,jpg,jpeg,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,BMP,CSV,DOC,GIF,ICO,JPG,JPEG,ODG,ODP,ODS,ODT,PDF,PNG,PPT,TXT,XCF,XLS"
-		/>
 
 		<field
 			name="upload_maxsize"
@@ -56,6 +48,16 @@
 			<option value="1">JYES</option>
 		</field>
 
+		<field
+			name="restrict_uploads_extensions"
+			type="text"
+			label="COM_MEDIA_FIELD_RESTRICT_UPLOADS_EXTENSIONS_LABEL"
+			description="COM_MEDIA_FIELD_RESTRICT_UPLOADS_EXTENSIONS_DESC"
+			size="50"
+			default="bmp,gif,jpg,jpeg,png,ico,mp3,mp4,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv"
+			showon="restrict_uploads:1"
+		/>
+
 		<field
 			name="check_mime"
 			type="radio"
@@ -75,8 +77,34 @@
 			label="COM_MEDIA_FIELD_LEGAL_IMAGE_EXTENSIONS_LABEL"
 			description="COM_MEDIA_FIELD_LEGAL_IMAGE_EXTENSIONS_DESC"
 			size="50"
-			default="bmp,gif,jpg,jpeg,png"
-			showon="restrict_uploads:1"
+			default="bmp,gif,jpg,jpeg,png,webp"
+		/>
+
+		<field
+			name="audio_extensions"
+			type="text"
+			label="COM_MEDIA_FIELD_LEGAL_AUDIO_EXTENSIONS_LABEL"
+			description="COM_MEDIA_FIELD_LEGAL_AUDIO_EXTENSIONS_DESC"
+			size="50"
+			default="mp3,m4a,mp4a,ogg"
+		/>
+
+		<field
+			name="video_extensions"
+			type="text"
+			label="COM_MEDIA_FIELD_LEGAL_VIDEO_EXTENSIONS_LABEL"
+			description="COM_MEDIA_FIELD_LEGAL_VIDEO_EXTENSIONS_DESC"
+			size="50"
+			default="mp4,mp4v,mpeg,mov,webm"
+		/>
+
+		<field
+			name="doc_extensions"
+			type="text"
+			label="COM_MEDIA_FIELD_LEGAL_DOCUMENT_EXTENSIONS_LABEL"
+			description="COM_MEDIA_FIELD_LEGAL_DOCUMENT_EXTENSIONS_DESC"
+			size="50"
+			default="doc,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv"
 		/>
 
 		<field
@@ -93,7 +121,7 @@
 			label="COM_MEDIA_FIELD_LEGAL_MIME_TYPES_LABEL"
 			description="COM_MEDIA_FIELD_LEGAL_MIME_TYPES_DESC"
 			size="50"
-			default="image/jpeg,image/gif,image/png,image/bmp,application/msword,application/excel,application/pdf,application/powerpoint,text/plain,application/x-zip"
+			default="image/jpeg,image/gif,image/png,image/bmp,image/webp,audio/ogg,audio/mpeg,audio/mp4,video/mp4,video/mpeg,video/quicktime,video/webm,application/msword,application/excel,application/pdf,application/powerpoint,text/plain,application/x-zip"
 			showon="restrict_uploads:1"
 		/>
 

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;
   }
 
   /**

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;

administrator/components/com_media/resources/scripts/components/browser/items/audio.vue

@@ -0,0 +1,221 @@
+<template>
+  <div
+    class="media-browser-audio"
+    @dblclick="openPreview()"
+    @mouseleave="hideActions()"
+  >
+    <div class="media-browser-item-preview">
+      <div class="file-background">
+        <div class="file-icon">
+          <span class="fas fa-file-audio" />
+        </div>
+      </div>
+    </div>
+    <div class="media-browser-item-info">
+      {{ item.name }} {{ item.filetype }}
+    </div>
+    <span
+      class="media-browser-select"
+      :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+      :title="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+    />
+    <div
+      class="media-browser-actions"
+      :class="{'active': showActions}"
+    >
+      <button
+        ref="actionToggle"
+        type="button"
+        class="action-toggle"
+        :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
+        :title="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
+        @keyup.enter="openActions()"
+        @focus="focused(true)"
+        @blur="focused(false)"
+        @keyup.space="openActions()"
+        @keyup.down="openActions()"
+        @keyup.up="openLastActions()"
+      >
+        <span
+          class="image-browser-action icon-ellipsis-h"
+          aria-hidden="true"
+          @click.stop="openActions()"
+        />
+      </button>
+      <div
+        v-if="showActions"
+        class="media-browser-actions-list"
+      >
+        <ul>
+          <li>
+            <button
+              ref="actionPreview"
+              type="button"
+              class="action-preview"
+              :aria-label="translate('COM_MEDIA_ACTION_PREVIEW')"
+              :title="translate('COM_MEDIA_ACTION_PREVIEW')"
+              @keyup.enter="openPreview()"
+              @keyup.space="openPreview()"
+              @focus="focused(true)"
+              @blur="focused(false)"
+              @keyup.esc="hideActions()"
+              @keyup.up="$refs.actionDelete.focus()"
+              @keyup.down="$refs.actionDownload.focus()"
+            >
+              <span
+                class="image-browser-action icon-search-plus"
+                aria-hidden="true"
+                @click.stop="openPreview()"
+              />
+            </button>
+          </li>
+          <li>
+            <button
+              ref="actionDownload"
+              type="button"
+              class="action-download"
+              :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')"
+              :title="translate('COM_MEDIA_ACTION_DOWNLOAD')"
+              @keyup.enter="download()"
+              @keyup.space="download()"
+              @focus="focused(true)"
+              @blur="focused(false)"
+              @keyup.esc="hideActions()"
+              @keyup.up="$refs.actionPreview.focus()"
+              @keyup.down="$refs.actionRename.focus()"
+            >
+              <span
+                class="image-browser-action icon-download"
+                aria-hidden="true"
+                @click.stop="download()"
+              />
+            </button>
+          </li>
+          <li>
+            <button
+              ref="actionRename"
+              type="button"
+              class="action-rename"
+              :aria-label="translate('COM_MEDIA_ACTION_RENAME')"
+              :title="translate('COM_MEDIA_ACTION_RENAME')"
+              @keyup.enter="openRenameModal()"
+              @keyup.space="openRenameModal()"
+              @focus="focused(true)"
+              @blur="focused(false)"
+              @keyup.esc="hideActions()"
+              @keyup.up="$refs.actionDownload.focus()"
+              @keyup.down="$refs.actionShare.focus()"
+            >
+              <span
+                class="image-browser-action icon-text-width"
+                aria-hidden="true"
+                @click.stop="openRenameModal()"
+              />
+            </button>
+          </li>
+          <li>
+            <button
+              ref="actionShare"
+              type="button"
+              class="action-url"
+              :aria-label="translate('COM_MEDIA_ACTION_SHARE')"
+              :title="translate('COM_MEDIA_ACTION_SHARE')"
+              @keyup.enter="openShareUrlModal()"
+              @keyup.space="openShareUrlModal()"
+              @focus="focused(true)"
+              @blur="focused(false)"
+              @keyup.esc="hideActions()"
+              @keyup.up="$refs.actionRename.focus()"
+              @keyup.down="$refs.actionDelete.focus()"
+            >
+              <span
+                class="image-browser-action icon-link"
+                aria-hidden="true"
+                @click.stop="openShareUrlModal()"
+              />
+            </button>
+          </li>
+          <li>
+            <button
+              ref="actionDelete"
+              type="button"
+              class="action-delete"
+              :aria-label="translate('COM_MEDIA_ACTION_DELETE')"
+              :title="translate('COM_MEDIA_ACTION_DELETE')"
+              @keyup.enter="openConfirmDeleteModal()"
+              @keyup.space="openConfirmDeleteModal()"
+              @focus="focused(true)"
+              @blur="focused(false)"
+              @keyup.esc="hideActions()"
+              @keyup.up="$refs.actionShare.focus()"
+              @keyup.down="$refs.actionPreview.focus()"
+            >
+              <span
+                class="image-browser-action icon-trash"
+                aria-hidden="true"
+                @click.stop="openConfirmDeleteModal()"
+              />
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as types from '../../../store/mutation-types.es6';
+
+export default {
+  name: 'MediaBrowserItemAudio',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['item', 'focused'],
+  data() {
+    return {
+      showActions: false,
+    };
+  },
+  methods: {
+    /* Preview an item */
+    openPreview() {
+      this.$store.commit(types.SHOW_PREVIEW_MODAL);
+      this.$store.dispatch('getFullContents', this.item);
+    },
+    /* Preview an item */
+    download() {
+      this.$store.dispatch('download', this.item);
+    },
+    /* Opening confirm delete modal */
+    openConfirmDeleteModal() {
+      this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
+      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
+      this.$store.commit(types.SHOW_CONFIRM_DELETE_MODAL);
+    },
+    /* Rename an item */
+    openRenameModal() {
+      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
+      this.$store.commit(types.SHOW_RENAME_MODAL);
+    },
+    /* Open modal for share url */
+    openShareUrlModal() {
+      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
+      this.$store.commit(types.SHOW_SHARE_MODAL);
+    },
+    /* Open actions dropdown */
+    openActions() {
+      this.showActions = true;
+      this.$nextTick(() => this.$refs.actionPreview.focus());
+    },
+    /* Open actions dropdown and focus on last element */
+    openLastActions() {
+      this.showActions = true;
+      this.$nextTick(() => this.$refs.actionDelete.focus());
+    },
+    /* Hide actions dropdown */
+    hideActions() {
+      this.showActions = false;
+      this.$nextTick(() => this.$refs.actionToggle.focus());
+    },
+  },
+};
+</script>