Thumbnails for media app (#14528)

OrchardCMS · Oct 19, 2023 · 566c21d · 566c21d
1 parent 68daf1d
commit 566c21d
Show file tree

Hide file tree

Showing 6 changed files with 295 additions and 167 deletions.
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/font-awesome-thumbnails.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/font-awesome-thumbnails.js
@@ -0,0 +1,57 @@
+// https://github.com/spatie/font-awesome-filetypes
+
+const faIcons = {
+    image: 'fa-regular fa-image',
+    pdf: 'fa-regular fa-file-pdf',
+    word: 'fa-regular fa-file-word',
+    powerpoint: 'fa-regular fa-file-powerpoint',
+    excel: 'fa-regular fa-file-excel',
+    csv: 'fa-regular fa-file',
+    audio: 'fa-regular fa-file-audio',
+    video: 'fa-regular fa-file-video',
+    archive: 'fa-regular fa-file-zipper',
+    code: 'fa-regular fa-file-code',
+    text: 'fa-regular fa-file-lines',
+    file: 'fa-regular fa-file'
+};
+
+const faThumbnails = {
+    gif: faIcons.image,
+    jpeg: faIcons.image,
+    jpg: faIcons.image,
+    png: faIcons.image,
+    pdf: faIcons.pdf,
+    doc: faIcons.word,
+    docx: faIcons.word,
+    ppt: faIcons.powerpoint,
+    pptx: faIcons.powerpoint,
+    xls: faIcons.excel,
+    xlsx: faIcons.excel,
+    csv: faIcons.csv,
+    aac: faIcons.audio,
+    mp3: faIcons.audio,
+    ogg: faIcons.audio,
+    avi: faIcons.video,
+    flv: faIcons.video,
+    mkv: faIcons.video,
+    mp4: faIcons.video,
+    webm: faIcons.video,
+    gz: faIcons.archive,
+    zip: faIcons.archive,
+    css: faIcons.code,
+    html: faIcons.code,
+    js: faIcons.code,
+    txt: faIcons.text
+};
+
+function getClassNameForExtension(extension) {
+    return faThumbnails[extension.toLowerCase()] || faIcons.file
+}
+
+function getExtensionForFilename(filename) {
+    return filename.slice((filename.lastIndexOf('.') - 1 >>> 0) + 2)
+}
+
+function getClassNameForFilename(filename) {
+    return getClassNameForExtension(getExtensionForFilename(filename))
+}
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/mediaItemsGridComponent.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/mediaItemsGridComponent.js
@@ -14,7 +14,7 @@ Vue.component('media-items-grid', {
                                 :src="buildMediaUrl(media.url, thumbSize)"
                                 :data-mime="media.mime"
                                 :style="{maxHeight: thumbSize +'px', maxWidth: thumbSize +'px'}" />
-                        <i v-else class="fa-regular fa-file display-1" :data-mime="media.mime"></i>
+                        <i v-else :class="getfontAwesomeClassNameForFileName(media.name, \'fa-5x\')" :data-mime="media.mime"></i>
                     </div>
                 <div class="media-container-main-item-title card-body">
                         <a href="javascript:;" class="btn btn-light btn-sm float-end inline-media-button edit-button" v-on:click.stop="renameMedia(media)"><i class="fa-solid fa-edit" aria-hidden="true"></i></a>
@@ -62,6 +62,9 @@ Vue.component('media-items-grid', {
         },
         dragStart: function (media, e) {
             bus.$emit('mediaDragStartRequested', media, e);
+        },
+        getfontAwesomeClassNameForFileName:function getfontAwesomeClassNameForFilename(filename, thumbsize){
+            return getClassNameForFilename(filename) + ' ' + thumbsize;
         }
     }
 });
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/mediaItemsTableComponent.js b/src/OrchardCore.Modules/OrchardCore.Media/Assets/js/app/MediaApp/mediaItemsTableComponent.js
@@ -37,7 +37,7 @@ Vue.component('media-items-table', {
                              <td class="thumbnail-column">
                                 <div class="img-wrapper">
                                     <img v-if="media.mime.startsWith('image')" draggable="false" :src="buildMediaUrl(media.url, thumbSize)" />
-                                    <i v-else class="fa-solid fa-file fa-lg" :data-mime="media.mime"></i>
+                                    <i v-else :class="getfontAwesomeClassNameForFileName(media.name, \'fa-4x\')" :data-mime="media.mime"></i>
                                 </div>
                             </td>
                             <td>
@@ -114,6 +114,9 @@ Vue.component('media-items-table', {
         printDateTime: function (datemillis){
             var d = new Date(datemillis);
             return d.toLocaleString();            
+        },
+        getfontAwesomeClassNameForFileName:function getfontAwesomeClassNameForFilename(filename, thumbsize){
+             return   getClassNameForFilename(filename) + ' ' + thumbsize;
         }
     }
 });
diff --git a/...chardCore.Modules/OrchardCore.Media/Assets/js/app/MediaField/mediaFieldThumbsContainer.js b/...chardCore.Modules/OrchardCore.Media/Assets/js/app/MediaField/mediaFieldThumbsContainer.js
@@ -21,7 +21,7 @@ Vue.component('mediaFieldThumbsContainer', {
                             :src="buildMediaUrl(media.url, thumbSize)" \
                             :data-mime="media.mime"\
                             :style="{maxHeight: thumbSize + \'px\' , maxWidth: thumbSize + \'px\'}"/>\
-                            <i v-else class="fa-regular fa-file display-1" :data-mime="media.mime"></i>\
+                            <i v-else :class="getfontAwesomeClassNameForFileName(media.name, \'fa-4x\')" :data-mime="media.mime"></i>\
                          </div>\
                          <div class="media-container-main-item-title card-body">\
                                 <a href="javascript:;" class="btn btn-light btn-sm float-end inline-media-button delete-button"\
@@ -75,6 +75,9 @@ Vue.component('mediaFieldThumbsContainer', {
         },
         buildMediaUrl: function (url, thumbSize) {
             return url + (url.indexOf('?') == -1 ? '?' : '&') + 'width=' + thumbSize + '&height=' + thumbSize;
+        },
+        getfontAwesomeClassNameForFileName:function getfontAwesomeClassNameForFilename(filename, thumbsize){
+            return getClassNameForFilename(filename) + ' ' + thumbsize;
         }
     }
 });