Plugins: fix icon for tile view

packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -305,6 +305,13 @@ const StyledFileTileTop = styled.div`
     bottom: 16px;
   }
 
+  .temporary-icon {
+    svg {
+      width: 96px;
+      height: 96px;
+    }
+  }
+
   ${(props) =>
     props.isHighlight &&
     css`
@@ -500,10 +507,13 @@ class Tile extends React.PureComponent {
   };
 
   getIconFile = () => {
-    const { temporaryIcon, thumbnailClick, thumbnail } = this.props;
+    const { temporaryIcon, thumbnailClick, thumbnail, item } = this.props;
 
-    const icon =
-      thumbnail && !this.state.errorLoadSrc ? thumbnail : temporaryIcon;
+    const icon = item.isPlugin
+      ? item.fileTileIcon
+      : thumbnail && !this.state.errorLoadSrc
+      ? thumbnail
+      : temporaryIcon;
 
     return (
       <Link type="page" onClick={thumbnailClick}>
@@ -677,6 +687,8 @@ class Tile extends React.PureComponent {
       });
     }
 
+    console.log(item);
+
     return (
       <StyledTile
         ref={this.tile}
@@ -865,6 +877,7 @@ class Tile extends React.PureComponent {
                 item?.viewAccessability?.ImageView ||
                 item?.viewAccessability?.MediaView
               }
+              isPlugin={item.isPlugin}
             >
               {icon}
             </StyledFileTileTop>

packages/client/src/store/FilesStore.js

@@ -3045,12 +3045,17 @@ class FilesStore {
           )
         : undefined;
 
-      let fileTypeName = null;
+      const pluginOptions = {};
 
       if (enablePlugins && fileItemsList) {
         fileItemsList.forEach(({ key, value }) => {
-          if (value.extension === fileExst && value.fileTypeName)
-            fileTypeName = value.fileTypeName;
+          if (value.extension === fileExst) {
+            if (value.fileTypeName)
+              pluginOptions.fileTypeName = value.fileTypeName;
+            pluginOptions.isPlugin = true;
+            if (value.fileIconTile)
+              pluginOptions.fileTileIcon = value.fileIconTile;
+          }
         });
       }
 
@@ -3117,7 +3122,7 @@ class FilesStore {
         providerType,
         security,
         viewAccessability,
-        fileTypeName,
+        ...pluginOptions,
         inRoom,
       };
     });

packages/client/src/store/PluginStore.js

@@ -952,7 +952,8 @@ class PluginStore {
 
       if (!correctUserType || !correctDevice) return;
 
-      const fileIcon = `${plugin.iconUrl}/assets/${value.fileIcon}`;
+      const fileIcon = `${plugin.iconUrl}/assets/${value.fileRowIcon}`;
+      const fileIconTile = `${plugin.iconUrl}/assets/${value.fileTileIcon}`;
 
       const onClick = async (item) => {
         if (!value.onClick) return;
@@ -987,6 +988,7 @@ class PluginStore {
         ...value,
         onClick,
         fileIcon,
+        fileIconTile,
         pluginId: plugin.id,
         pluginName: plugin.name,
         pluginSystem: plugin.system,