thumbnails for media app

src/OrchardCore.Modules/OrchardCore.Media/Assets.json

@@ -12,6 +12,7 @@
       "./node_modules/blueimp-file-upload/js/jquery.fileupload.js",
       "./node_modules/blueimp-file-upload/js/jquery.iframe-transport.js",
       "Assets/js/helpers.js",
+      "Assets/js/fontawesome-icons-thumbnails/**/*.js",
       "Assets/js/app/**/*.js"
     ],
     "watch": [

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-6x\')" :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;
         }
     }
 });

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;
         }
     }
 });

src/OrchardCore.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;
         }
     }
 });

src/OrchardCore.Modules/OrchardCore.Media/Assets/js/fontawesome-icons-thumbnails/font-awesome-thumbnails.js

@@ -0,0 +1,68 @@
+// https://github.com/spatie/font-awesome-filetypes
+
+const fa_icons = {
+    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 fa_thumbnails = {
+    gif: fa_icons.image,
+    jpeg: fa_icons.image,
+    jpg: fa_icons.image,
+    png: fa_icons.image,
+
+    pdf: fa_icons.pdf,
+
+    doc: fa_icons.word,
+    docx: fa_icons.word,
+
+    ppt: fa_icons.powerpoint,
+    pptx: fa_icons.powerpoint,
+
+    xls: fa_icons.excel,
+    xlsx: fa_icons.excel,
+
+    csv: fa_icons.csv,
+
+    aac: fa_icons.audio,
+    mp3: fa_icons.audio,
+    ogg: fa_icons.audio,
+
+    avi: fa_icons.video,
+    flv: fa_icons.video,
+    mkv: fa_icons.video,
+    mp4: fa_icons.video,
+    webm: fa_icons.video,
+
+    gz: fa_icons.archive,
+    zip: fa_icons.archive,
+
+    css: fa_icons.code,
+    html: fa_icons.code,
+    js: fa_icons.code,
+
+    txt: fa_icons.text
+};
+
+function getClassNameForExtension(extension) {
+    return fa_thumbnails[extension.toLowerCase()] || fa_icons.file
+}
+
+function getExtensionForFilename(filename) {
+    return filename.slice((filename.lastIndexOf('.') - 1 >>> 0) + 2)
+}
+
+
+function getClassNameForFilename(filename) {
+    return getClassNameForExtension(getExtensionForFilename(filename))
+}