Fix review comments

packages/core/helper-plugin/lib/src/index.js

@@ -145,7 +145,7 @@ export { default as hasPermissions } from './old/utils/hasPermissions';
 export { findMatchingPermissions } from './old/utils/hasPermissions';
 export { default as translatedErrors } from './old/utils/translatedErrors';
 export { darken } from './old/utils/colors';
-export { default as getFileExtension } from './old/utils/getFileExtension';
+export { default as getFileExtension } from './utils/getFileExtension/getFileExtension';
 export { default as getFilterType } from './old/utils/getFilterType';
 export { default as getQueryParameters } from './old/utils/getQueryParameters';
 export { default as validateInput } from './old/utils/inputsValidations';
@@ -158,7 +158,7 @@ export { default as getYupInnerErrors } from './old/utils/getYupInnerErrors';
 export { default as generateFiltersFromSearch } from './old/utils/generateFiltersFromSearch';
 export { default as generateSearchFromFilters } from './old/utils/generateSearchFromFilters';
 export { default as generateSearchFromObject } from './old/utils/generateSearchFromObject';
-export { default as prefixFileUrlWithBackendUrl } from './old/utils/prefixFileUrlWithBackendUrl';
+export { default as prefixFileUrlWithBackendUrl } from './utils/prefixFileUrlWithBackendUrl/prefixFileUrlWithBackendUrl';
 export { default as prefixPluginTranslations } from './old/utils/prefixPluginTranslations';
 
 export { default as pxToRem } from './utils/pxToRem';

packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.stories.mdx

@@ -0,0 +1,21 @@
+<!--- getFileExtension.stories.mdx --->
+
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="utils/getFileExtension" />
+
+# getFileExtension
+
+This hook is used to create URL aware of the backend. Practical to resolve assets.
+
+## Usage
+
+```
+import { getFileExtension } from '@strapi/helper-plugin';
+
+const Compo = () => {
+  const ext = getFileExtension('.png')
+
+  return <div>{ext}</div>;
+}
+```

packages/core/helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl/prefixFileUrlWithBackendUrl.stories.mdx

@@ -0,0 +1,21 @@
+<!--- prefixFileUrlWithBackendUrl.stories.mdx --->
+
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="utils/prefixFileUrlWithBackendUrl" />
+
+# prefixFileUrlWithBackendUrl
+
+This hook is used to create URL aware of the backend. Practical to resolve assets.
+
+## Usage
+
+```
+import { prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
+
+const Compo = () => {
+  const url = prefixFileUrlWithBackendUrl('/somewhere-i-belong')
+
+  return <div>{url}</div>;
+}
+```

packages/core/upload/admin/src/pages/App/components/DocAssetCard.js

@@ -52,7 +52,7 @@ export const DocAssetCard = ({ name, extension }) => {
         <CardContent>
           <CardTitle as="h2">{name}</CardTitle>
           <CardSubtitle>
-            <Extension>{extension.replace('.', '')}</Extension>
+            <Extension>{extension}</Extension>
           </CardSubtitle>
         </CardContent>
         <CardBadge>

packages/core/upload/admin/src/pages/App/components/ImageAssetCard.js

@@ -35,13 +35,13 @@ export const ImageAssetCard = ({ name, extension, height, width, thumbnail }) =>
             icon={<EditIcon />}
           />
         </CardAction>
-        <CardAsset src={`http://localhost:1337${thumbnail}`} />
+        <CardAsset src={thumbnail} />
       </CardHeader>
       <CardBody>
         <CardContent>
           <CardTitle as="h2">{name}</CardTitle>
           <CardSubtitle>
-            <Extension>{extension.replace('.', '')}</Extension> - {height}✕{width}
+            <Extension>{extension}</Extension> - {height}✕{width}
           </CardSubtitle>
         </CardContent>
         <CardBadge>

packages/core/upload/admin/src/pages/App/components/ListView.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { GridLayout } from '@strapi/parts/Layout';
 import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable';
+import { prefixFileUrlWithBackendUrl, getFileExtension } from '@strapi/helper-plugin';
 import { ImageAssetCard } from './ImageAssetCard';
 import { VideoAssetCard } from './VideoAssetCard';
 import { DocAssetCard } from './DocAssetCard';
@@ -17,8 +18,8 @@ export const ListView = ({ assets }) => {
                 id={asset.id}
                 key={asset.id}
                 name={asset.name}
-                extension={asset.ext}
+                extension={getFileExtension(asset.ext)}
-                url={asset.url}
+                url={prefixFileUrlWithBackendUrl(asset.url)}
                 mime={asset.mime}
               />
             );
@@ -30,16 +31,21 @@ export const ListView = ({ assets }) => {
                 id={asset.id}
                 key={asset.id}
                 name={asset.name}
-                extension={asset.ext}
+                extension={getFileExtension(asset.ext)}
                 height={asset.height}
                 width={asset.width}
-                thumbnail={asset?.formats?.thumbnail?.url || asset.url}
+                thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)}
               />
             );
           }
 
           return (
-            <DocAssetCard id={asset.id} key={asset.id} name={asset.name} extension={asset.ext} />
+            <DocAssetCard
+              id={asset.id}
+              key={asset.id}
+              name={asset.name}
+              extension={getFileExtension(asset.ext)}
+            />
           );
         })}
       </GridLayout>

packages/core/upload/admin/src/pages/App/components/VideoAssetCard.js

@@ -48,7 +48,7 @@ export const VideoAssetCard = ({ name, extension, url, mime }) => {
         <CardContent>
           <CardTitle as="h2">{name}</CardTitle>
           <CardSubtitle>
-            <Extension>{extension.replace('.', '')}</Extension>
+            <Extension>{extension}</Extension>
           </CardSubtitle>
         </CardContent>
         <CardBadge>

packages/core/upload/admin/src/pages/App/components/VideoPreview.js

@@ -31,11 +31,7 @@ export const VideoPreview = ({ url, mime, onLoadDuration }) => {
   return (
     <VideoPreviewWrapper>
       {!loaded && (
-        <video
+        <video ref={videoRef} onLoadedData={handleThumbnailVisibility} src={url}>
-          ref={videoRef}
-          onLoadedData={handleThumbnailVisibility}
-          src={`http://localhost:1337${url}`}
-        >
           <source type={mime} />
         </video>
       )}

packages/core/upload/admin/src/pages/App/components/tests/ListView.test.js

@@ -10,7 +10,6 @@ jest.mock('../../../../utils', () => ({
 }));
 
 jest.mock('react-intl', () => ({
-  FormattedMessage: ({ id }) => id,
   useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }),
 }));
 
@@ -146,6 +145,55 @@ describe('MediaLibrary / ListView', () => {
         grid-gap: 16px;
       }
 
+      .c7 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        cursor: pointer;
+        padding: 8px;
+        border-radius: 4px;
+        background: #ffffff;
+        border: 1px solid #dcdce4;
+      }
+
+      .c7 svg {
+        height: 12px;
+        width: 12px;
+      }
+
+      .c7 svg > g,
+      .c7 svg path {
+        fill: #ffffff;
+      }
+
+      .c7[aria-disabled='true'] {
+        pointer-events: none;
+      }
+
+      .c8 svg > g,
+      .c8 svg path {
+        fill: #8e8ea9;
+      }
+
+      .c8:hover svg > g,
+      .c8:hover svg path {
+        fill: #666687;
+      }
+
+      .c8:active svg > g,
+      .c8:active svg path {
+        fill: #a5a5ba;
+      }
+
+      .c8[aria-disabled='true'] {
+        background-color: #eaeaef;
+      }
+
+      .c8[aria-disabled='true'] svg path {
+        fill: #666687;
+      }
+
       .c1 {
         background: #ffffff;
         border-radius: 4px;
@@ -364,55 +412,6 @@ describe('MediaLibrary / ListView', () => {
         right: 4px;
       }
 
-      .c7 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        cursor: pointer;
-        padding: 8px;
-        border-radius: 4px;
-        background: #ffffff;
-        border: 1px solid #dcdce4;
-      }
-
-      .c7 svg {
-        height: 12px;
-        width: 12px;
-      }
-
-      .c7 svg > g,
-      .c7 svg path {
-        fill: #ffffff;
-      }
-
-      .c7[aria-disabled='true'] {
-        pointer-events: none;
-      }
-
-      .c8 svg > g,
-      .c8 svg path {
-        fill: #8e8ea9;
-      }
-
-      .c8:hover svg > g,
-      .c8:hover svg path {
-        fill: #666687;
-      }
-
-      .c8:active svg > g,
-      .c8:active svg path {
-        fill: #a5a5ba;
-      }
-
-      .c8[aria-disabled='true'] {
-        background-color: #eaeaef;
-      }
-
-      .c8[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
       .c15 {
         text-transform: uppercase;
       }