add twemoji

app/Http/Helpers/helpers.php

@@ -559,7 +559,6 @@ function get_pretty_name($basename, $name, $mimetype)
 function get_image_meta_data($file)
 {
     if (get_file_type_from_mimetype($file->getMimeType()) === 'jpeg') {
-        return exif_read_data($file);
 
         return  mb_convert_encoding(
             exif_read_data($file), 'UTF8', 'UTF8'

app/Http/Tools/Editor.php

@@ -439,7 +439,7 @@ class Editor
         $temp_filename = $file->getClientOriginalName();
 
         // File Path
-        $file_path = config('filesystems.disks.local.root') . '/chunks/' . $temp_filename;\
+        $file_path = config('filesystems.disks.local.root') . '/chunks/' . $temp_filename;
 
         // Generate file
         File::append($file_path, $file->get());

package-lock.json

@@ -10003,6 +10003,53 @@
             "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
             "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
         },
+        "twemoji": {
+            "version": "13.0.1",
+            "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-13.0.1.tgz",
+            "integrity": "sha512-mrTBq+XpCLM4zm76NJOjLHoQNV9mHdBt3Cba/T5lS1rxn8ArwpqE47mqTocupNlkvcLxoeZJjYSUW0DU5ZwqZg==",
+            "requires": {
+                "fs-extra": "^8.0.1",
+                "jsonfile": "^5.0.0",
+                "twemoji-parser": "13.0.0",
+                "universalify": "^0.1.2"
+            },
+            "dependencies": {
+                "fs-extra": {
+                    "version": "8.1.0",
+                    "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+                    "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+                    "requires": {
+                        "graceful-fs": "^4.2.0",
+                        "jsonfile": "^4.0.0",
+                        "universalify": "^0.1.0"
+                    },
+                    "dependencies": {
+                        "jsonfile": {
+                            "version": "4.0.0",
+                            "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+                            "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+                            "requires": {
+                                "graceful-fs": "^4.1.6"
+                            }
+                        }
+                    }
+                },
+                "jsonfile": {
+                    "version": "5.0.0",
+                    "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
+                    "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
+                    "requires": {
+                        "graceful-fs": "^4.1.6",
+                        "universalify": "^0.1.2"
+                    }
+                }
+            }
+        },
+        "twemoji-parser": {
+            "version": "13.0.0",
+            "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.0.0.tgz",
+            "integrity": "sha512-zMaGdskpH8yKjT2RSE/HwE340R4Fm+fbie4AaqjDa4H/l07YUmAvxkSfNl6awVWNRRQ0zdzLQ8SAJZuY5MgstQ=="
+        },
         "type-is": {
             "version": "1.6.18",
             "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -10124,8 +10171,7 @@
         "universalify": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-            "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+            "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
-            "dev": true
         },
         "unpipe": {
             "version": "1.0.0",

package.json

@@ -23,6 +23,7 @@
         "@fortawesome/vue-fontawesome": "^0.1.10",
         "lodash": "^4.17.20",
         "node-sass": "^4.14.1",
+        "twemoji": "^13.0.1",
         "vee-validate": "^3.3.9",
         "vue": "^2.6.11",
         "vue-feather-icons": "^5.1.0",

public/mix-manifest.json

@@ -29,7 +29,7 @@
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a2eed5073e52410cab54",
     "/chunks/files.js": "/chunks/files.js?id=6a283c2c9f8a02500bc6",
     "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=b646ec02fb9d6a497e74",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=7429f60059bbb3b76a66",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=e30bde665233e8108fc2",
     "/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=47ade53389e84dd64310",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=d5e39543eeb619cb5513",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=be9304e6ba2c61b6cab3",
@@ -75,23 +75,24 @@
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=5cfec8a8f8a8aef24ef2",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=c001bef2d6d5171cb359",
     "/chunks/users.js": "/chunks/users.js?id=6e68cb068f69fba3199c",
-    "/js/main.93835132e94cb70cd948.hot-update.js": "/js/main.93835132e94cb70cd948.hot-update.js",
+    "/js/main.b906f4dccf00f7d0df9b.hot-update.js": "/js/main.b906f4dccf00f7d0df9b.hot-update.js",
-    "/js/main.14e2786738b678e42790.hot-update.js": "/js/main.14e2786738b678e42790.hot-update.js",
+    "/js/main.51e6604147d828f6788c.hot-update.js": "/js/main.51e6604147d828f6788c.hot-update.js",
-    "/js/main.1e09d5a114b47f78f735.hot-update.js": "/js/main.1e09d5a114b47f78f735.hot-update.js",
+    "/js/main.0cdd7ec9d134e07cbbe5.hot-update.js": "/js/main.0cdd7ec9d134e07cbbe5.hot-update.js",
-    "/js/main.4d2831225ff8c15f9574.hot-update.js": "/js/main.4d2831225ff8c15f9574.hot-update.js",
+    "/js/main.a1bbd60a06d2e7857892.hot-update.js": "/js/main.a1bbd60a06d2e7857892.hot-update.js",
-    "/js/main.a042e64d43031251bbaa.hot-update.js": "/js/main.a042e64d43031251bbaa.hot-update.js",
+    "/js/main.7d7511e400150e72f650.hot-update.js": "/js/main.7d7511e400150e72f650.hot-update.js",
-    "/js/main.a694129c76d54bc01c54.hot-update.js": "/js/main.a694129c76d54bc01c54.hot-update.js",
+    "/js/main.fd48cad164a60b75fe37.hot-update.js": "/js/main.fd48cad164a60b75fe37.hot-update.js",
-    "/js/main.b4e7813819304123bca8.hot-update.js": "/js/main.b4e7813819304123bca8.hot-update.js",
+    "/js/main.296e16fc2d46f99aeae1.hot-update.js": "/js/main.296e16fc2d46f99aeae1.hot-update.js",
-    "/js/main.662b49470346b4b76841.hot-update.js": "/js/main.662b49470346b4b76841.hot-update.js",
+    "/js/main.55e979567c0a590fd839.hot-update.js": "/js/main.55e979567c0a590fd839.hot-update.js",
-    "/js/main.c8076428be03059b7e5e.hot-update.js": "/js/main.c8076428be03059b7e5e.hot-update.js",
+    "/js/main.8f9251f7ae8357e3db2e.hot-update.js": "/js/main.8f9251f7ae8357e3db2e.hot-update.js",
-    "/js/main.3c7083753a45cd005131.hot-update.js": "/js/main.3c7083753a45cd005131.hot-update.js",
+    "/js/main.de57ba3a3902452e1149.hot-update.js": "/js/main.de57ba3a3902452e1149.hot-update.js",
-    "/js/main.507f77403a28efa7443a.hot-update.js": "/js/main.507f77403a28efa7443a.hot-update.js",
+    "/js/main.c29932dfec3afef8d8fd.hot-update.js": "/js/main.c29932dfec3afef8d8fd.hot-update.js",
-    "/js/main.2fd90b99aa2342fdef5f.hot-update.js": "/js/main.2fd90b99aa2342fdef5f.hot-update.js",
+    "/js/main.49b9f8ec98d8ee8c9c32.hot-update.js": "/js/main.49b9f8ec98d8ee8c9c32.hot-update.js",
-    "/js/main.bd0b6550dcc4e063c4b2.hot-update.js": "/js/main.bd0b6550dcc4e063c4b2.hot-update.js",
+    "/js/main.c2adbb59071c1ca6d186.hot-update.js": "/js/main.c2adbb59071c1ca6d186.hot-update.js",
-    "/js/main.6be3a1f5d38918f938a0.hot-update.js": "/js/main.6be3a1f5d38918f938a0.hot-update.js",
+    "/js/main.ac8d05cce080431208c8.hot-update.js": "/js/main.ac8d05cce080431208c8.hot-update.js",
-    "/js/main.77ffad300745cf6a660f.hot-update.js": "/js/main.77ffad300745cf6a660f.hot-update.js",
+    "/js/main.f75a1a86202d4cdc281c.hot-update.js": "/js/main.f75a1a86202d4cdc281c.hot-update.js",
-    "/js/main.e8e09c42dd190eb3bbcb.hot-update.js": "/js/main.e8e09c42dd190eb3bbcb.hot-update.js",
+    "/js/main.af5c709a6815af8a4e19.hot-update.js": "/js/main.af5c709a6815af8a4e19.hot-update.js",
-    "/js/main.c91c2d641e78f5b70169.hot-update.js": "/js/main.c91c2d641e78f5b70169.hot-update.js",
+    "/js/main.7318bbc00df71e76481e.hot-update.js": "/js/main.7318bbc00df71e76481e.hot-update.js",
-    "/js/main.47d4d2225326852931a0.hot-update.js": "/js/main.47d4d2225326852931a0.hot-update.js",
+    "/js/main.d5f1dacf73037666202d.hot-update.js": "/js/main.d5f1dacf73037666202d.hot-update.js",
-    "/js/main.69855deb7789f02f9f19.hot-update.js": "/js/main.69855deb7789f02f9f19.hot-update.js"
+    "/js/main.bea7af7eaca85b6fec19.hot-update.js": "/js/main.bea7af7eaca85b6fec19.hot-update.js",
+    "/js/main.8f087722cc55622e0a99.hot-update.js": "/js/main.8f087722cc55622e0a99.hot-update.js"
 }

resources/js/components/FilesView/FileItemList.vue

@@ -30,7 +30,7 @@
                 <FontAwesomeIcon v-if="isFolder && !folderIconHandle" :ref="`folder${this.data.unique_id}`" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
 
                 <!-- If folder have set emoji -->
-                <div class="emoji" v-if="isFolder && folderIconHandle"> {{folderIconHandle}}</div>
+                <div class="emoji-wrapper" v-if="isFolder && folderIconHandle"> {{folderIconHandle}}</div>
                
             </div>
 
@@ -280,8 +280,13 @@ export default {
         }, 300)
     },
     created() {
+    
+        this.$emojisCustomize()
+
         this.itemName = this.data.name
 
+
+
         events.$on('newFolder:focus', (unique_id) => {
 
             if(this.data.unique_id == unique_id) {
@@ -312,6 +317,13 @@ export default {
 @import '@assets/vue-file-manager/_variables';
 @import '@assets/vue-file-manager/_mixins';
 
+img.emoji {
+   height: 20px;
+   width: 20px;
+   margin: 0 .05em 0 .1em;
+   vertical-align: -0.1em;
+}
+
 .slide-from-left-move {
     transition: transform 300s ease;
 }
@@ -464,8 +476,8 @@ export default {
         line-height: 0;
         margin-right: 20px;
 
-        .emoji {
+        .emoji-wrapper {
-            @include font-size(35)
+            padding: 5px;    
         }
 
         .folder-icon {

resources/js/components/Others/SetFolderIcon.vue

@@ -2,14 +2,14 @@
     <div class="set-folder-icon">
 
         <TableWrapper >
-            <TableOption :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
+            <TableOption id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
                 <div class="select-emoji-wrapper">
                     <label class="main-label">Pick Yout Emoji Icon:</label>
 
                     <div @click="openMenu" v-if="!selectOpen" class="select-input-wrapper">
 
                         <div class="select-input" v-if="selectedEmoji">
-                            <span>{{selectedEmoji.char}}</span>
+                            <div class="emoji-preview">{{selectedEmoji.char}}</div>
                             <span>{{selectedEmoji.name}}</span>
                         </div>
                     
@@ -76,6 +76,9 @@
                 if(this.searchEmoji !== undefined) {
                     emojisList = this.emojis.filter(emoji => emoji.name.includes(this.searchEmoji))
                 }
+
+                this.$emojisCustomize('emoji-list')
+
                 return emojisList ? emojisList : "Not Found"
             },
         },
@@ -87,13 +90,16 @@
                 selectOpen: false,
                 emojis: emojis,
                 colors: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
-		  '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
+                        '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
-		  '#80B300', '#809900', '#E6B3B3', '#6680B3']
+                        '#80B300', '#809900', '#E6B3B3', '#6680B3']
             }
         },
         methods: {
             openMenu() {
                 this.selectOpen = ! this.selectOpen
+
+                 this.$emojisCustomize('emoji-list')
+
             },
             setIcon(value) {
                 if(value.emoji)
@@ -106,6 +112,9 @@
 
 
                 this.selectOpen = false
+
+                this.$emojisCustomize()
+
             }
         },
         mounted () {
@@ -194,9 +203,10 @@
 
             .option {
                 list-style: none;
-                padding: 8px;
+                width: 45px;
+                height: 45px;
+                padding: 6px;
                 cursor: pointer;
-                @include font-size(30);
 
                 &:hover {
                     background: $light_background;
@@ -234,6 +244,15 @@
         .select-input {
             @include font-size(16);
             font-weight: 700;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .emoji-preview {
+                width: 25px;
+                height: 25px;
+                margin-right: 10px;
+            }
         }
 
         .not-selected {

resources/js/components/Others/ThumbnailItem.vue

@@ -16,7 +16,7 @@
             <!--Else show only folder icon-->
             <FontAwesomeIcon ref="folderIcon" v-if="isFolder && !folderIconHandle" class="folder-icon" icon="folder"/>
 
-            <div v-if="isFolder && folderIconHandle" class="folder-emoji">{{folderIconHandle}}</div>
+            <div id="thumbnail-emoji" v-if="isFolder && folderIconHandle" class="folder-emoji">{{folderIconHandle}}</div>
         </div>
 
         <!--Name-->
@@ -54,6 +54,7 @@
             folderIconHandle(){
                 let icon = undefined
 
+                this.$emojisCustomize()
                 // Set icon folder if set folder from rename popup
                 if(this.setFolderIcon){
 

resources/js/helpers.js

@@ -1,5 +1,6 @@
 import i18n from '@/i18n/index'
 import store from './store/index'
+import twemoji from 'twemoji'
 import {debounce, includes} from "lodash";
 import {events} from './bus'
 import axios from 'axios'
@@ -351,7 +352,21 @@ const Helpers = {
 				let body = document.body
 				body.classList.add('windows')
 			}
-		}
+        },
+        Vue.prototype.$emojisCustomize = function (elementId) {
+            this.$nextTick(() => {
+                
+                let list = elementId ? document.getElementById(elementId) : document.body
+
+                twemoji.parse(list, {
+                    folder: 'svg',
+                    ext: '.svg',
+                    attributes: () => ({
+                        loading: 'lazy'
+                    }) 
+                })
+            })
+        }
 	}
 }