new mediasets

lens-protocol · Jul 28, 2023 · 0de596f · 0de596f
1 parent e479dc2
commit 0de596f
Show file tree

Hide file tree

Showing 33 changed files with 403 additions and 203 deletions.
diff --git a/packages/client/src/consts/config.ts b/packages/client/src/consts/config.ts
@@ -1,6 +1,16 @@
 import { IStorageProvider } from '@lens-protocol/storage';
 
 import { Environment } from './environments';
+import { MediaTransform } from './media';
+
+/**
+ * The media transforms configuration.
+ */
+export type MediaTransformsConfig = {
+  publication?: MediaTransform;
+  profilePicture?: MediaTransform;
+  profileCover?: MediaTransform;
+};
 
 /**
  * LensClient configuration
@@ -14,4 +24,13 @@ export type LensConfig = {
    * The storage provider to use.
    */
   storage?: IStorageProvider;
+
+  /**
+   * Media returned from the publication and profile queries can be transformed
+   * to sizes needed by the SDK consuming application.
+   * To overwrite default transformation values, provide a `mediaTransforms` object.
+   *
+   * @see {@link MediaTransformsConfig} for more information
+   */
+  mediaTransforms?: MediaTransformsConfig;
 };
diff --git a/packages/client/src/consts/defaults.ts b/packages/client/src/consts/defaults.ts
diff --git a/packages/client/src/consts/media.ts b/packages/client/src/consts/media.ts
@@ -0,0 +1,34 @@
+type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+
+type Percentage = `100%` | `${Digit}${Digit}%` | `${Digit}%`;
+
+type Pixel =
+  | `${Digit}${Digit}${Digit}${Digit}px`
+  | `${Digit}${Digit}${Digit}px`
+  | `${Digit}${Digit}px`;
+
+export type ImageSizeTransform = Pixel | Percentage | 'auto';
+
+export type MediaTransform = {
+  /**
+   * Set the transformed image's width. You can use specific size in
+   * pixels eg. 100px, a percentage eg. 50% or set as 'auto' to be set automatically.
+   *
+   * @defaultValue 'auto'
+   */
+  width?: ImageSizeTransform;
+  /**
+   * Set the transformed image's height. You can use specific size in
+   * pixels eg. 100px, a percentage eg. 50% or set as 'auto' to be set automatically.
+   *
+   * @defaultValue 'auto'
+   */
+  height?: ImageSizeTransform;
+  /**
+   * Set if you want to keep the image's original aspect ratio.
+   * If explicitly set to false, the image will stretch based on the width and height values.
+   *
+   * @defaultValue true
+   */
+  keepAspectRatio?: boolean;
+};
diff --git a/packages/client/src/explore/Explore.ts b/packages/client/src/explore/Explore.ts
@@ -1,15 +1,15 @@
 import type { Authentication } from '../authentication';
 import type { LensConfig } from '../consts/config';
-import { defaultMediaTransformParams } from '../consts/defaults';
 import { FetchGraphQLClient } from '../graphql/FetchGraphQLClient';
 import type { ProfileFragment } from '../graphql/fragments.generated';
 import type { PublicationFragment } from '../graphql/types';
-import type {
-  ExploreProfilesRequest,
-  ExplorePublicationRequest,
-  MediaTransformParams,
-} from '../graphql/types.generated';
-import { buildPaginatedQueryResult, PaginatedResult, provideAuthHeaders } from '../helpers';
+import type { ExploreProfilesRequest, ExplorePublicationRequest } from '../graphql/types.generated';
+import {
+  buildMediaTransformsFromConfig,
+  buildPaginatedQueryResult,
+  PaginatedResult,
+  provideAuthHeaders,
+} from '../helpers';
 import { getSdk, Sdk } from './graphql/explore.generated';
 
 /**
@@ -21,7 +21,7 @@ export class Explore {
   private readonly authentication: Authentication | undefined;
   private readonly sdk: Sdk;
 
-  constructor(config: LensConfig, authentication?: Authentication) {
+  constructor(private readonly config: LensConfig, authentication?: Authentication) {
     const client = new FetchGraphQLClient(config.environment.gqlEndpoint);
 
     this.sdk = getSdk(client);
@@ -33,7 +33,6 @@ export class Explore {
    *
    * @param request - Request object for the query
    * @param observerId - Optional id of a profile that is the observer for this request
-   * @param mediaTransformParams - Optional media transform params if you want to optimize media in the response
    * @returns Array of {@link PublicationFragment} wrapped in {@link PaginatedResult}
    *
    * @example
@@ -48,15 +47,14 @@ export class Explore {
   async publications(
     request: ExplorePublicationRequest,
     observerId?: string,
-    mediaTransformParams: MediaTransformParams = defaultMediaTransformParams,
   ): Promise<PaginatedResult<PublicationFragment>> {
     return provideAuthHeaders(this.authentication, async (headers) => {
       return buildPaginatedQueryResult(async (currRequest) => {
         const result = await this.sdk.ExplorePublications(
           {
             request: currRequest,
             observerId,
-            mediaTransformParams,
+            ...buildMediaTransformsFromConfig(this.config.mediaTransforms),
           },
           headers,
         );
@@ -71,7 +69,6 @@ export class Explore {
    *
    * @param request - Request object for the query
    * @param observerId - Optional id of a profile that is the observer for this request
-   * @param mediaTransformParams - Optional media transform params if you want to optimize media in the response
    * @returns Array of {@link ProfileFragment} wrapped in {@link PaginatedResult}
    *
    * @example
@@ -86,15 +83,14 @@ export class Explore {
   async profiles(
     request: ExploreProfilesRequest,
     observerId?: string,
-    mediaTransformParams: MediaTransformParams = defaultMediaTransformParams,
   ): Promise<PaginatedResult<ProfileFragment>> {
     return provideAuthHeaders(this.authentication, async (headers) => {
       return buildPaginatedQueryResult(async (currRequest) => {
         const result = await this.sdk.ExploreProfiles(
           {
             request: currRequest,
             observerId,
-            mediaTransformParams,
+            ...buildMediaTransformsFromConfig(this.config.mediaTransforms),
           },
           headers,
         );

diff --git a/packages/client/src/explore/graphql/explore.generated.ts b/packages/client/src/explore/graphql/explore.generated.ts
@@ -34,7 +34,9 @@ import {
 export type ExplorePublicationsQueryVariables = Types.Exact<{
   request: Types.ExplorePublicationRequest;
   observerId?: Types.InputMaybe<Types.Scalars['ProfileId']>;
-  mediaTransformParams: Types.MediaTransformParams;
+  mediaTransformPublication?: Types.InputMaybe<Types.MediaTransformParams>;
+  mediaTransformProfilePicture?: Types.InputMaybe<Types.MediaTransformParams>;
+  mediaTransformProfileCover?: Types.InputMaybe<Types.MediaTransformParams>;
 }>;
 
 export type ExplorePublicationsQuery = {
@@ -47,7 +49,8 @@ export type ExplorePublicationsQuery = {
 export type ExploreProfilesQueryVariables = Types.Exact<{
   request: Types.ExploreProfilesRequest;
   observerId?: Types.InputMaybe<Types.Scalars['ProfileId']>;
-  mediaTransformParams: Types.MediaTransformParams;
+  mediaTransformProfilePicture?: Types.InputMaybe<Types.MediaTransformParams>;
+  mediaTransformProfileCover?: Types.InputMaybe<Types.MediaTransformParams>;
 }>;
 
 export type ExploreProfilesQuery = {
@@ -58,7 +61,9 @@ export const ExplorePublicationsDocument = gql`
   query ExplorePublications(
     $request: ExplorePublicationRequest!
     $observerId: ProfileId
-    $mediaTransformParams: MediaTransformParams!
+    $mediaTransformPublication: MediaTransformParams = {}
+    $mediaTransformProfilePicture: MediaTransformParams = {}
+    $mediaTransformProfileCover: MediaTransformParams = {}
   ) {
     result: explorePublications(request: $request) {
       items {
@@ -86,7 +91,8 @@ export const ExploreProfilesDocument = gql`
   query ExploreProfiles(
     $request: ExploreProfilesRequest!
     $observerId: ProfileId
-    $mediaTransformParams: MediaTransformParams!
+    $mediaTransformProfilePicture: MediaTransformParams = {}
+    $mediaTransformProfileCover: MediaTransformParams = {}
   ) {
     result: exploreProfiles(request: $request) {
       items {

diff --git a/packages/client/src/explore/graphql/explore.graphql b/packages/client/src/explore/graphql/explore.graphql
@@ -1,7 +1,9 @@
 query ExplorePublications(
   $request: ExplorePublicationRequest!
   $observerId: ProfileId
-  $mediaTransformParams: MediaTransformParams!
+  $mediaTransformPublication: MediaTransformParams = {}
+  $mediaTransformProfilePicture: MediaTransformParams = {}
+  $mediaTransformProfileCover: MediaTransformParams = {}
 ) {
   result: explorePublications(request: $request) {
     items {
@@ -26,7 +28,8 @@ query ExplorePublications(
 query ExploreProfiles(
   $request: ExploreProfilesRequest!
   $observerId: ProfileId
-  $mediaTransformParams: MediaTransformParams!
+  $mediaTransformProfilePicture: MediaTransformParams = {}
+  $mediaTransformProfileCover: MediaTransformParams = {}
 ) {
   result: exploreProfiles(request: $request) {
     items {

diff --git a/packages/client/src/feed/Feed.ts b/packages/client/src/feed/Feed.ts
@@ -2,16 +2,16 @@ import type { PromiseResult } from '@lens-protocol/shared-kernel';
 
 import type { Authentication } from '../authentication';
 import type { LensConfig } from '../consts/config';
-import { defaultMediaTransformParams } from '../consts/defaults';
 import type { CredentialsExpiredError, NotAuthenticatedError } from '../consts/errors';
 import { FetchGraphQLClient } from '../graphql/FetchGraphQLClient';
 import type { PublicationFragment } from '../graphql/types';
-import type {
-  FeedHighlightsRequest,
-  FeedRequest,
-  MediaTransformParams,
-} from '../graphql/types.generated';
-import { buildPaginatedQueryResult, PaginatedResult, requireAuthHeaders } from '../helpers';
+import type { FeedHighlightsRequest, FeedRequest } from '../graphql/types.generated';
+import {
+  buildMediaTransformsFromConfig,
+  buildPaginatedQueryResult,
+  PaginatedResult,
+  requireAuthHeaders,
+} from '../helpers';
 import { FeedItemFragment, getSdk, Sdk } from './graphql/feed.generated';
 
 /**
@@ -23,7 +23,7 @@ export class Feed {
   private readonly authentication: Authentication | undefined;
   private readonly sdk: Sdk;
 
-  constructor(config: LensConfig, authentication: Authentication) {
+  constructor(private readonly config: LensConfig, authentication: Authentication) {
     const client = new FetchGraphQLClient(config.environment.gqlEndpoint);
 
     this.sdk = getSdk(client);
@@ -37,7 +37,6 @@ export class Feed {
    *
    * @param request - Request object for the query
    * @param observerId - Optional id of a profile that is the observer for this request
-   * @param mediaTransformParams - Optional media transform params if you want to optimize media in the response
    * @returns {@link PromiseResult} with array of {@link FeedItemFragment} wrapped in {@link PaginatedResult}
    *
    * @example
@@ -50,7 +49,6 @@ export class Feed {
   async fetch(
     request: FeedRequest,
     observerId?: string,
-    mediaTransformParams: MediaTransformParams = defaultMediaTransformParams,
   ): PromiseResult<
     PaginatedResult<FeedItemFragment>,
     CredentialsExpiredError | NotAuthenticatedError
@@ -61,7 +59,7 @@ export class Feed {
           {
             request: currRequest,
             observerId,
-            mediaTransformParams,
+            ...buildMediaTransformsFromConfig(this.config.mediaTransforms),
           },
           headers,
         );
@@ -78,7 +76,6 @@ export class Feed {
    *
    * @param request - Request object for the query
    * @param observerId - Optional id of a profile that is the observer for this request
-   * @param mediaTransformParams - Optional media transform params if you want to optimize media in the response
    * @returns {@link PromiseResult} with array of {@link PublicationFragment} wrapped in {@link PaginatedResult}
    *
    * @example
@@ -91,7 +88,6 @@ export class Feed {
   async fetchHighlights(
     request: FeedHighlightsRequest,
     observerId?: string,
-    mediaTransformParams: MediaTransformParams = defaultMediaTransformParams,
   ): PromiseResult<
     PaginatedResult<PublicationFragment>,
     CredentialsExpiredError | NotAuthenticatedError
@@ -102,7 +98,7 @@ export class Feed {
           {
             request: currRequest,
             observerId,
-            mediaTransformParams,
+            ...buildMediaTransformsFromConfig(this.config.mediaTransforms),
           },
           headers,
         );

diff --git a/packages/client/src/feed/graphql/feed.generated.ts b/packages/client/src/feed/graphql/feed.generated.ts
@@ -68,7 +68,9 @@ export type FeedItemFragment = {
 export type FeedQueryVariables = Types.Exact<{
   request: Types.FeedRequest;
   observerId?: Types.InputMaybe<Types.Scalars['ProfileId']>;
-  mediaTransformParams: Types.MediaTransformParams;
+  mediaTransformPublication?: Types.InputMaybe<Types.MediaTransformParams>;
+  mediaTransformProfilePicture?: Types.InputMaybe<Types.MediaTransformParams>;
+  mediaTransformProfileCover?: Types.InputMaybe<Types.MediaTransformParams>;
 }>;
 
 export type FeedQuery = {
@@ -78,7 +80,9 @@ export type FeedQuery = {
 export type FeedHighlightsQueryVariables = Types.Exact<{
   request: Types.FeedHighlightsRequest;
   observerId?: Types.InputMaybe<Types.Scalars['ProfileId']>;
-  mediaTransformParams: Types.MediaTransformParams;
+  mediaTransformPublication?: Types.InputMaybe<Types.MediaTransformParams>;
+  mediaTransformProfilePicture?: Types.InputMaybe<Types.MediaTransformParams>;
+  mediaTransformProfileCover?: Types.InputMaybe<Types.MediaTransformParams>;
 }>;
 
 export type FeedHighlightsQuery = {
@@ -168,7 +172,9 @@ export const FeedDocument = gql`
   query Feed(
     $request: FeedRequest!
     $observerId: ProfileId
-    $mediaTransformParams: MediaTransformParams!
+    $mediaTransformPublication: MediaTransformParams = {}
+    $mediaTransformProfilePicture: MediaTransformParams = {}
+    $mediaTransformProfileCover: MediaTransformParams = {}
   ) {
     result: feed(request: $request) {
       items {
@@ -186,7 +192,9 @@ export const FeedHighlightsDocument = gql`
   query FeedHighlights(
     $request: FeedHighlightsRequest!
     $observerId: ProfileId
-    $mediaTransformParams: MediaTransformParams!
+    $mediaTransformPublication: MediaTransformParams = {}
+    $mediaTransformProfilePicture: MediaTransformParams = {}
+    $mediaTransformProfileCover: MediaTransformParams = {}
   ) {
     result: feedHighlights(request: $request) {
       items {

diff --git a/packages/client/src/feed/graphql/feed.graphql b/packages/client/src/feed/graphql/feed.graphql
@@ -63,7 +63,9 @@ fragment FeedItem on FeedItem {
 query Feed(
   $request: FeedRequest!
   $observerId: ProfileId
-  $mediaTransformParams: MediaTransformParams!
+  $mediaTransformPublication: MediaTransformParams = {}
+  $mediaTransformProfilePicture: MediaTransformParams = {}
+  $mediaTransformProfileCover: MediaTransformParams = {}
 ) {
   result: feed(request: $request) {
     items {
@@ -78,7 +80,9 @@ query Feed(
 query FeedHighlights(
   $request: FeedHighlightsRequest!
   $observerId: ProfileId
-  $mediaTransformParams: MediaTransformParams!
+  $mediaTransformPublication: MediaTransformParams = {}
+  $mediaTransformProfilePicture: MediaTransformParams = {}
+  $mediaTransformProfileCover: MediaTransformParams = {}
 ) {
   result: feedHighlights(request: $request) {
     items {