feat: netlify large media support (#721)

package.json

@@ -14,6 +14,7 @@
     "lint": "lerna run lint",
     "prepare": "husky install",
     "release": "lerna publish --no-private",
+    "release-dev": "lerna publish --no-private --no-push --no-git-tag-version --dist-tag dev",
     "release-next": "lerna publish --no-private --dist-tag next",
     "test:ci": "lerna run test:ci",
     "test:integration:ci": "lerna run test:integration:ci",

packages/core/src/backends/git-gateway/implementation.tsx

@@ -117,6 +117,7 @@ export default class GitGateway implements BackendClass {
   api?: GitHubAPI | GitLabAPI | BitBucketAPI;
   branch: string;
   mediaFolder?: string;
+  transformImages: boolean;
   gatewayUrl: string;
   netlifyLargeMediaURL: string;
   backendType: string | null;
@@ -140,6 +141,8 @@ export default class GitGateway implements BackendClass {
     this.config = config;
     this.branch = config.backend.branch?.trim() || 'main';
     this.mediaFolder = config.media_folder;
+    const { use_large_media_transforms_in_media_library: transformImages = true } = config.backend;
+    this.transformImages = transformImages;
 
     const netlifySiteURL = localStorage.getItem('netlifySiteURL');
     this.apiUrl = getEndpoint(config.backend.identity_url || defaults.identity, netlifySiteURL);
@@ -437,7 +440,7 @@ export default class GitGateway implements BackendClass {
           rootURL: this.netlifyLargeMediaURL,
           makeAuthorizedRequest: this.requestFunction,
           patterns,
-          transformImages: false,
+          transformImages: this.transformImages ? { nf_resize: 'fit', w: 560, h: 320 } : false,
         });
       },
     );
@@ -470,7 +473,7 @@ export default class GitGateway implements BackendClass {
     return { url, blob };
   }
 
-  async getMediaDisplayURL(displayURL: DisplayURL) {
+  async getMediaDisplayURL(displayURL: DisplayURL): Promise<string> {
     const { path, id } = displayURL as DisplayURLObject;
     const isLargeMedia = await this.isLargeMediaFile(path);
     if (isLargeMedia) {
@@ -481,8 +484,7 @@ export default class GitGateway implements BackendClass {
       return displayURL;
     }
 
-    const url = await this.backend!.getMediaDisplayURL(displayURL);
-    return url;
+    return this.backend!.getMediaDisplayURL(displayURL);
   }
 
   async getMediaFile(path: string) {

packages/core/src/constants/configSchema.tsx

@@ -182,6 +182,7 @@ function getConfigSchema() {
               deleteMedia: { type: 'string' },
             },
           },
+          use_large_media_transforms_in_media_library: { type: 'boolean' },
         },
         required: ['name'],
       },

packages/core/src/interface.ts

@@ -772,6 +772,7 @@ export interface Backend {
     uploadMedia?: string;
     deleteMedia?: string;
   };
+  use_large_media_transforms_in_media_library?: boolean;
 }
 
 export interface Slug {

packages/docs/content/docs/beta-features.mdx

@@ -118,3 +118,9 @@ Static CMS can provide a side by side interface for authoring content in multipl
 For repositories stored on Gitea, the gitea backend allows CMS users to log in directly with their Gitea account. Note that all users must have push access to your content repository for this to work.
 
 See [Gitea Backend](/docs/gitea-backend) for more information.
+
+## Large Media Support
+
+Netlify Large Media allows you to store your media files outside of your git backend. This is helpful if you are trying to store large media files.
+
+See [Gitea Backend](/docs/netlify-large-media) for more information.

packages/docs/content/docs/netlify-large-media.mdx

@@ -0,0 +1,32 @@
+---
+group: Media
+title: Netlify Large Media
+weight: 20
+---
+
+## <img src="https://img.shields.io/badge/-Beta%20Feature-blue" alt="Beta Feature. Use at your own risk" title="Beta Feature. Use at your own risk" />
+
+[Netlify Large Media](https://www.netlify.com/features/large-media/) is a [Git LFS](https://git-lfs.github.com/) implementation for repositories connected to Netlify sites. This means that you can use Git to work with large asset files like images, audio, and video, without bloating your repository. It does this by replacing the asset files in your repository with text pointer files, then uploading the assets to the Netlify Large Media storage service.
+
+If you have a Netlify site with Large Media enabled, Static CMS will handle Large Media asset files seamlessly, in the same way as files stored directly in the repository.
+
+## Requirements
+
+To use Netlify Large Media with Static CMS, you will need to do the following:
+
+- Configure Static CMS to use the [Git Gateway backend with Netlify Identity](/docs/git-gateway-backend).
+- Configure the Netlify site and connected repository to use Large Media, following the [Large Media docs on Netlify](https://www.netlify.com/docs/large-media/).
+
+When these are complete, you can use Static CMS as normal, and the configured asset files will automatically be handled by Netlify Large Media.
+
+## Image transformations
+
+All JPEG, PNG, and GIF files that are handled with Netlify Large Media also have access to Netlify's on-demand image transformation service. This service allows you to request an image to match the dimensions you specify in a query parameter added to the image URL.
+
+You can learn more about this feature in [Netlify's image transformation docs](https://www.netlify.com/docs/image-transformation/).
+
+### Media Gallery Thumbnails
+
+In repositories enabled with Netlify Large Media, Static CMS will use the image transformation query parameters to load thumbnail-sized images for the media gallery view. This makes images in the media gallery load significantly faster.
+
+**Note:** When using this option all tracked file types have to be imported into Large Media. For example if you track `*.jpg` but still have jpg-files that are not imported into Large Media the backend will throw an error. Check the [netlify docs](https://docs.netlify.com/large-media/setup/#migrate-files-from-git-history) on how to add previously committed files to Large Media.

packages/docs/content/menu.json

@@ -21,6 +21,10 @@
         "name": "Widgets",
         "title": "Widgets"
       },
+      {
+        "name": "Media",
+        "title": "Media"
+      },
       {
         "name": "Customization",
         "title": "Customizing Static CMS"