👨‍🚀 New assets logic (#4346)

* Regenerate queries

* Resolve problems

* Fix avatars

* Fix forms

* Trigger video refetch when upload succeed

* Renaming

* Add resolution in video workspace

* Fix build

packages/atlas-meta-server/src/tags.ts

@@ -54,7 +54,7 @@ export const generateCommonMetaTags = (
 
 export const generateVideoMetaTags = (
   video: BasicVideoFieldsFragment,
-  thumbnailUrl: string,
+  thumbnailUrls: string[],
   appName: string,
   baseAppUrl: string,
   twitterId?: string
@@ -67,7 +67,7 @@ export const generateVideoMetaTags = (
     videoUrl,
     videoTitle,
     video.description || videoTitle,
-    thumbnailUrl,
+    thumbnailUrls[0],
     twitterId
   )
 

packages/atlas/atlas.config.yml

@@ -12,7 +12,7 @@ general:
   joystreamDiscordUrl: 'https://discord.gg/DE9UN3YpRP' # URL for Joystream Discord - used for support when errors occur
   appContentFocus: 'web3 & crypto' # Content focus of given app. Provide a string, for example `web & crypto` or `sport`
 storage:
-  assetResponseTimeout: 20000 # Timeout for asset response in ms - after this timeout, different distributor will be tried
+  assetResponseTimeout: 2_000 # Timeout for asset response in ms - after this timeout, different distributor will be tried
   assetUploadStatusPollingInterval: 2000 # Interval for polling asset upload status in ms - polling begins once asset is uploaded and is finished once QN reports the asset as accepted
   uploadProcessingTimeout: 60000 # Timeout for processing uploaded asset in ms - after this timeout, upload will be considered failed
   minimumDistributorRefetchTime: 1000 # Minimum time before refetching distributors list in ms - refetching is done if certain bag is not found on any distributor

packages/atlas/src/api/client/cache.ts

@@ -273,10 +273,9 @@ const cache = new InMemoryCache({
     StorageDataObject: {
       fields: {
         resolvedUrls: {
-          read: (resolvedUrl, { readField }) => {
+          read: (resolvedUrls, { readField }) => {
             const isAccepted = readField('isAccepted')
-
-            return isAccepted ? resolvedUrl : []
+            return isAccepted ? resolvedUrls : []
           },
         },
         size: {

packages/atlas/src/api/client/index.ts

@@ -3,17 +3,11 @@ import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
 import { getMainDefinition } from '@apollo/client/utilities'
 import { createClient } from 'graphql-ws'
 
-import { atlasConfig } from '@/config'
 import { ORION_GRAPHQL_URL, QUERY_NODE_GRAPHQL_SUBSCRIPTION_URL } from '@/config/env'
-import { logDistributorPerformance, testAssetDownload } from '@/providers/assets/assets.helpers'
 import { useUserLocationStore } from '@/providers/userLocation'
-import { AssetLogger, ConsoleLogger, DistributorEventEntry, SentryLogger } from '@/utils/logs'
-import { TimeoutError, withTimeout } from '@/utils/misc'
 
 import cache from './cache'
 
-import { StorageDataObject } from '../queries/__generated__/baseTypes.generated'
-
 const delayLink = new ApolloLink((operation, forward) => {
   const ctx = operation.getContext()
   if (!ctx.delay) {
@@ -29,9 +23,6 @@ const delayLink = new ApolloLink((operation, forward) => {
   })
 })
 
-const MAX_ALLOWED_RETRIES = 10
-const bannedDistributorUrls: Record<string, number> = {}
-
 const createApolloClient = () => {
   const subscriptionLink = new GraphQLWsLink(
     createClient({
@@ -71,71 +62,6 @@ const createApolloClient = () => {
   return new ApolloClient({
     cache,
     link: operationSplitLink,
-    resolvers: {
-      StorageDataObject: {
-        resolvedUrl: async (parent: StorageDataObject) => {
-          if (!parent.isAccepted) {
-            return null
-          }
-
-          // skip distributor url if he failed more than n times(where n is MAX_ALLOWED_RETRIES)
-          const resolvedUrls = parent.resolvedUrls?.filter((url) => {
-            const distributorUrl = url.split(`/${atlasConfig.storage.assetPath}/${parent.id}`)[0]
-            return (bannedDistributorUrls[distributorUrl] || 0) <= MAX_ALLOWED_RETRIES
-          })
-
-          for (const resolvedUrl of resolvedUrls) {
-            if (!parent.type) {
-              return null
-            }
-
-            if (parent.type.__typename === 'DataObjectTypeChannelPayoutsPayload') {
-              // if this is a payload file skip testing and just return first url.
-              return resolvedUrls[0]
-            }
-            const distributorUrl = resolvedUrl.split(`/${atlasConfig.storage.assetPath}/${parent.id}`)[0]
-
-            const assetTestPromise = testAssetDownload(resolvedUrl, parent.type)
-            const assetTestPromiseWithTimeout = withTimeout(assetTestPromise, atlasConfig.storage.assetResponseTimeout)
-            const eventEntry: DistributorEventEntry = {
-              distributorUrl,
-              dataObjectId: parent.id,
-              dataObjectType: parent.type?.__typename,
-            }
-
-            try {
-              await assetTestPromiseWithTimeout
-
-              logDistributorPerformance(resolvedUrl, eventEntry)
-              return resolvedUrl
-            } catch (err) {
-              if (err instanceof MediaError) {
-                SentryLogger.error('Error during asset download test, media is not supported', 'AssetsManager', err, {
-                  asset: { parent, resolvedUrl, mediaError: err },
-                })
-                return null
-              }
-              bannedDistributorUrls[distributorUrl] = (bannedDistributorUrls[distributorUrl] || 0) + 1
-              if (err instanceof TimeoutError) {
-                AssetLogger.logDistributorResponseTimeout(eventEntry)
-                ConsoleLogger.warn(
-                  `Distributor didn't respond in ${atlasConfig.storage.assetResponseTimeout} seconds`,
-                  {
-                    dataObject: parent,
-                  }
-                )
-              } else {
-                AssetLogger.logDistributorError(eventEntry)
-                SentryLogger.error('Error during asset download test', 'AssetsManager', err, {
-                  asset: { parent, resolvedUrl },
-                })
-              }
-            }
-          }
-          return null
-        },
-      },
-    },
   })
 }
 

packages/atlas/src/api/queries/__generated__/baseTypes.generated.ts

@@ -3850,9 +3850,11 @@ export type MutationSetVideoViewPerIpTimeLimitArgs = {
 
 export type MutationSetVideoWeightsArgs = {
   commentsWeight: Scalars['Float']
+  joysteamTimestampSubWeight: Scalars['Float']
   newnessWeight: Scalars['Float']
   reactionsWeight: Scalars['Float']
   viewsWeight: Scalars['Float']
+  ytTimestampSubWeight: Scalars['Float']
 }
 
 export type MutationSignAppActionCommitmentArgs = {
@@ -6573,7 +6575,6 @@ export type StorageDataObject = {
   ipfsHash: Scalars['String']
   /** Whether the data object was uploaded and accepted by the storage provider */
   isAccepted: Scalars['Boolean']
-  resolvedUrl?: Maybe<Scalars['String']>
   /** Resolved asset urls */
   resolvedUrls: Array<Scalars['String']>
   /** Data object size in bytes */

packages/atlas/src/api/queries/__generated__/bids.generated.tsx

@@ -39,7 +39,6 @@ export type GetBidsQuery = {
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean

packages/atlas/src/api/queries/__generated__/channels.generated.tsx

@@ -46,7 +46,6 @@ export type GetFullChannelQuery = {
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -70,7 +69,6 @@ export type GetFullChannelQuery = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -89,7 +87,6 @@ export type GetFullChannelQuery = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -131,7 +128,6 @@ export type GetExtendedBasicChannelsQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -189,7 +185,6 @@ export type GetExtendedFullChannelsQuery = {
                   __typename?: 'StorageDataObject'
                   id: string
                   resolvedUrls: Array<string>
-                  resolvedUrl?: string | null
                   createdAt: Date
                   size: string
                   isAccepted: boolean
@@ -213,7 +208,6 @@ export type GetExtendedFullChannelsQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -232,7 +226,6 @@ export type GetExtendedFullChannelsQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -279,7 +272,6 @@ export type GetBasicChannelsConnectionQuery = {
           __typename?: 'StorageDataObject'
           id: string
           resolvedUrls: Array<string>
-          resolvedUrl?: string | null
           createdAt: Date
           size: string
           isAccepted: boolean
@@ -340,7 +332,6 @@ export type GetTop10ChannelsQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -380,7 +371,6 @@ export type GetDiscoverChannelsQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -423,7 +413,6 @@ export type GetChannelNftCollectorsQuery = {
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -493,7 +482,6 @@ export type GetPayloadDataByCommitmentQuery = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -647,7 +635,6 @@ export type GetTopSellingChannelsFromThreePeriodsQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -681,7 +668,6 @@ export type GetTopSellingChannelsFromThreePeriodsQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -715,7 +701,6 @@ export type GetTopSellingChannelsFromThreePeriodsQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean

packages/atlas/src/api/queries/__generated__/comments.generated.tsx

@@ -34,7 +34,6 @@ export type GetCommentQuery = {
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -101,7 +100,6 @@ export type GetCommentRepliesConnectionQuery = {
                     __typename?: 'StorageDataObject'
                     id: string
                     resolvedUrls: Array<string>
-                    resolvedUrl?: string | null
                     createdAt: Date
                     size: string
                     isAccepted: boolean
@@ -166,7 +164,6 @@ export type GetUserCommentsAndVideoCommentsConnectionQuery = {
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -222,7 +219,6 @@ export type GetUserCommentsAndVideoCommentsConnectionQuery = {
                     __typename?: 'StorageDataObject'
                     id: string
                     resolvedUrls: Array<string>
-                    resolvedUrl?: string | null
                     createdAt: Date
                     size: string
                     isAccepted: boolean

packages/atlas/src/api/queries/__generated__/featured.generated.tsx

@@ -36,7 +36,6 @@ export type GetVideoHeroQuery = {
           __typename?: 'StorageDataObject'
           id: string
           resolvedUrls: Array<string>
-          resolvedUrl?: string | null
           createdAt: Date
           size: string
           isAccepted: boolean
@@ -56,7 +55,6 @@ export type GetVideoHeroQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -104,7 +102,6 @@ export type GetVideoHeroQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -128,7 +125,6 @@ export type GetVideoHeroQuery = {
                   __typename?: 'StorageDataObject'
                   id: string
                   resolvedUrls: Array<string>
-                  resolvedUrl?: string | null
                   createdAt: Date
                   size: string
                   isAccepted: boolean
@@ -161,7 +157,6 @@ export type GetVideoHeroQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -223,7 +218,6 @@ export type GetVideoHeroQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -265,7 +259,6 @@ export type GetVideoHeroQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -302,7 +295,6 @@ export type GetVideoHeroQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -367,7 +359,6 @@ export type GetAllCategoriesFeaturedVideosQuery = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -387,7 +378,6 @@ export type GetAllCategoriesFeaturedVideosQuery = {
           __typename?: 'StorageDataObject'
           id: string
           resolvedUrls: Array<string>
-          resolvedUrl?: string | null
           createdAt: Date
           size: string
           isAccepted: boolean
@@ -468,7 +458,6 @@ export type GetCategoryFeaturedVideosQuery = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -488,7 +477,6 @@ export type GetCategoryFeaturedVideosQuery = {
           __typename?: 'StorageDataObject'
           id: string
           resolvedUrls: Array<string>
-          resolvedUrl?: string | null
           createdAt: Date
           size: string
           isAccepted: boolean

packages/atlas/src/api/queries/__generated__/fragments.generated.tsx

@@ -21,7 +21,6 @@ export type BasicChannelFieldsFragment = {
     __typename?: 'StorageDataObject'
     id: string
     resolvedUrls: Array<string>
-    resolvedUrl?: string | null
     createdAt: Date
     size: string
     isAccepted: boolean
@@ -66,7 +65,6 @@ export type FullChannelFieldsFragment = {
               __typename?: 'StorageDataObject'
               id: string
               resolvedUrls: Array<string>
-              resolvedUrl?: string | null
               createdAt: Date
               size: string
               isAccepted: boolean
@@ -90,7 +88,6 @@ export type FullChannelFieldsFragment = {
     __typename?: 'StorageDataObject'
     id: string
     resolvedUrls: Array<string>
-    resolvedUrl?: string | null
     createdAt: Date
     size: string
     isAccepted: boolean
@@ -109,7 +106,6 @@ export type FullChannelFieldsFragment = {
     __typename?: 'StorageDataObject'
     id: string
     resolvedUrls: Array<string>
-    resolvedUrl?: string | null
     createdAt: Date
     size: string
     isAccepted: boolean
@@ -157,7 +153,6 @@ export type ExtendedFullChannelFieldsFragment = {
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -181,7 +176,6 @@ export type ExtendedFullChannelFieldsFragment = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -200,7 +194,6 @@ export type ExtendedFullChannelFieldsFragment = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -234,7 +227,6 @@ export type ExtendedBasicChannelFieldsFragment = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -266,7 +258,6 @@ export type BasicMembershipFieldsFragment = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -308,7 +299,6 @@ export type FullMembershipFieldsFragment = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -327,7 +317,6 @@ export type FullMembershipFieldsFragment = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -353,7 +342,6 @@ export type FullMembershipFieldsFragment = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -378,7 +366,6 @@ export type StorageDataObjectFieldsFragment = {
   __typename?: 'StorageDataObject'
   id: string
   resolvedUrls: Array<string>
-  resolvedUrl?: string | null
   createdAt: Date
   size: string
   isAccepted: boolean
@@ -433,7 +420,6 @@ export type SubtitlesFieldsFragment = {
     __typename?: 'StorageDataObject'
     id: string
     resolvedUrls: Array<string>
-    resolvedUrl?: string | null
     createdAt: Date
     size: string
     isAccepted: boolean
@@ -472,7 +458,6 @@ export type BasicVideoFieldsFragment = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -492,7 +477,6 @@ export type BasicVideoFieldsFragment = {
     __typename?: 'StorageDataObject'
     id: string
     resolvedUrls: Array<string>
-    resolvedUrl?: string | null
     createdAt: Date
     size: string
     isAccepted: boolean
@@ -540,7 +524,6 @@ export type BasicVideoFieldsFragment = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -564,7 +547,6 @@ export type BasicVideoFieldsFragment = {
               __typename?: 'StorageDataObject'
               id: string
               resolvedUrls: Array<string>
-              resolvedUrl?: string | null
               createdAt: Date
               size: string
               isAccepted: boolean
@@ -597,7 +579,6 @@ export type BasicVideoFieldsFragment = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -659,7 +640,6 @@ export type BasicVideoFieldsFragment = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -701,7 +681,6 @@ export type BasicVideoFieldsFragment = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -738,7 +717,6 @@ export type BasicVideoFieldsFragment = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -804,7 +782,6 @@ export type FullVideoFieldsFragment = {
     __typename?: 'StorageDataObject'
     id: string
     resolvedUrls: Array<string>
-    resolvedUrl?: string | null
     createdAt: Date
     size: string
     isAccepted: boolean
@@ -823,7 +800,6 @@ export type FullVideoFieldsFragment = {
     __typename?: 'StorageDataObject'
     id: string
     resolvedUrls: Array<string>
-    resolvedUrl?: string | null
     createdAt: Date
     size: string
     isAccepted: boolean
@@ -866,7 +842,6 @@ export type FullVideoFieldsFragment = {
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -890,7 +865,6 @@ export type FullVideoFieldsFragment = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -909,7 +883,6 @@ export type FullVideoFieldsFragment = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -965,7 +938,6 @@ export type FullVideoFieldsFragment = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -989,7 +961,6 @@ export type FullVideoFieldsFragment = {
               __typename?: 'StorageDataObject'
               id: string
               resolvedUrls: Array<string>
-              resolvedUrl?: string | null
               createdAt: Date
               size: string
               isAccepted: boolean
@@ -1022,7 +993,6 @@ export type FullVideoFieldsFragment = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -1084,7 +1054,6 @@ export type FullVideoFieldsFragment = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1126,7 +1095,6 @@ export type FullVideoFieldsFragment = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1163,7 +1131,6 @@ export type FullVideoFieldsFragment = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1201,7 +1168,6 @@ export type FullVideoFieldsFragment = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -1252,7 +1218,6 @@ export type BasicNftFieldsFragment = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -1276,7 +1241,6 @@ export type BasicNftFieldsFragment = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -1309,7 +1273,6 @@ export type BasicNftFieldsFragment = {
                     __typename?: 'StorageDataObject'
                     id: string
                     resolvedUrls: Array<string>
-                    resolvedUrl?: string | null
                     createdAt: Date
                     size: string
                     isAccepted: boolean
@@ -1371,7 +1334,6 @@ export type BasicNftFieldsFragment = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -1413,7 +1375,6 @@ export type BasicNftFieldsFragment = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -1450,7 +1411,6 @@ export type BasicNftFieldsFragment = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -1508,7 +1468,6 @@ export type FullNftFieldsFragment = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -1528,7 +1487,6 @@ export type FullNftFieldsFragment = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -1576,7 +1534,6 @@ export type FullNftFieldsFragment = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1600,7 +1557,6 @@ export type FullNftFieldsFragment = {
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -1633,7 +1589,6 @@ export type FullNftFieldsFragment = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -1695,7 +1650,6 @@ export type FullNftFieldsFragment = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -1737,7 +1691,6 @@ export type FullNftFieldsFragment = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -1774,7 +1727,6 @@ export type FullNftFieldsFragment = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -1829,7 +1781,6 @@ export type FullNftFieldsFragment = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -1853,7 +1804,6 @@ export type FullNftFieldsFragment = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -1886,7 +1836,6 @@ export type FullNftFieldsFragment = {
                     __typename?: 'StorageDataObject'
                     id: string
                     resolvedUrls: Array<string>
-                    resolvedUrl?: string | null
                     createdAt: Date
                     size: string
                     isAccepted: boolean
@@ -1948,7 +1897,6 @@ export type FullNftFieldsFragment = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -1990,7 +1938,6 @@ export type FullNftFieldsFragment = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -2027,7 +1974,6 @@ export type FullNftFieldsFragment = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -2077,7 +2023,6 @@ export type BasicBidFieldsFragment = {
               __typename?: 'StorageDataObject'
               id: string
               resolvedUrls: Array<string>
-              resolvedUrl?: string | null
               createdAt: Date
               size: string
               isAccepted: boolean
@@ -2127,7 +2072,6 @@ export type FullBidFieldsFragment = {
               __typename?: 'StorageDataObject'
               id: string
               resolvedUrls: Array<string>
-              resolvedUrl?: string | null
               createdAt: Date
               size: string
               isAccepted: boolean
@@ -2178,7 +2122,6 @@ export type CommentFieldsFragment = {
               __typename?: 'StorageDataObject'
               id: string
               resolvedUrls: Array<string>
-              resolvedUrl?: string | null
               createdAt: Date
               size: string
               isAccepted: boolean
@@ -2235,7 +2178,6 @@ export type MetaprotocolTransactionResultFields_MetaprotocolTransactionResultCom
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -2289,7 +2231,6 @@ export type MetaprotocolTransactionResultFields_MetaprotocolTransactionResultCom
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -2343,7 +2284,6 @@ export type MetaprotocolTransactionResultFields_MetaprotocolTransactionResultCom
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -2397,7 +2337,6 @@ export type MetaprotocolTransactionResultFields_MetaprotocolTransactionResultCom
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -2462,7 +2401,6 @@ export type BasicNftOwnerFields_NftOwnerChannel_Fragment = {
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -2501,7 +2439,6 @@ export type BasicNftOwnerFields_NftOwnerMember_Fragment = {
               __typename?: 'StorageDataObject'
               id: string
               resolvedUrls: Array<string>
-              resolvedUrl?: string | null
               createdAt: Date
               size: string
               isAccepted: boolean
@@ -2549,7 +2486,6 @@ export type BasicFeaturedVideoFragment = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -2569,7 +2505,6 @@ export type BasicFeaturedVideoFragment = {
     __typename?: 'StorageDataObject'
     id: string
     resolvedUrls: Array<string>
-    resolvedUrl?: string | null
     createdAt: Date
     size: string
     isAccepted: boolean
@@ -2639,7 +2574,6 @@ export type BasicVideoFeaturedInCategoryFragment = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -2659,7 +2593,6 @@ export type BasicVideoFeaturedInCategoryFragment = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -2713,7 +2646,6 @@ export type BasicVideoActivityFieldsFragment = {
     __typename?: 'StorageDataObject'
     id: string
     resolvedUrls: Array<string>
-    resolvedUrl?: string | null
     createdAt: Date
     size: string
     isAccepted: boolean
@@ -2743,7 +2675,6 @@ export const StorageDataObjectFieldsFragmentDoc = gql`
   fragment StorageDataObjectFields on StorageDataObject {
     id
     resolvedUrls
-    resolvedUrl @client
     createdAt
     size
     isAccepted

packages/atlas/src/api/queries/__generated__/memberships.generated.tsx

@@ -32,7 +32,6 @@ export type GetMembershipsQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -51,7 +50,6 @@ export type GetMembershipsQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -77,7 +75,6 @@ export type GetMembershipsQuery = {
               __typename?: 'StorageDataObject'
               id: string
               resolvedUrls: Array<string>
-              resolvedUrl?: string | null
               createdAt: Date
               size: string
               isAccepted: boolean

packages/atlas/src/api/queries/__generated__/nfts.generated.tsx

@@ -44,7 +44,6 @@ export type GetNftQuery = {
           __typename?: 'StorageDataObject'
           id: string
           resolvedUrls: Array<string>
-          resolvedUrl?: string | null
           createdAt: Date
           size: string
           isAccepted: boolean
@@ -64,7 +63,6 @@ export type GetNftQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -112,7 +110,6 @@ export type GetNftQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -136,7 +133,6 @@ export type GetNftQuery = {
                   __typename?: 'StorageDataObject'
                   id: string
                   resolvedUrls: Array<string>
-                  resolvedUrl?: string | null
                   createdAt: Date
                   size: string
                   isAccepted: boolean
@@ -169,7 +165,6 @@ export type GetNftQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -231,7 +226,6 @@ export type GetNftQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -273,7 +267,6 @@ export type GetNftQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -310,7 +303,6 @@ export type GetNftQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -365,7 +357,6 @@ export type GetNftQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -389,7 +380,6 @@ export type GetNftQuery = {
               __typename?: 'StorageDataObject'
               id: string
               resolvedUrls: Array<string>
-              resolvedUrl?: string | null
               createdAt: Date
               size: string
               isAccepted: boolean
@@ -422,7 +412,6 @@ export type GetNftQuery = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -484,7 +473,6 @@ export type GetNftQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -526,7 +514,6 @@ export type GetNftQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -563,7 +550,6 @@ export type GetNftQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -631,7 +617,6 @@ export type GetNftsQuery = {
           __typename?: 'StorageDataObject'
           id: string
           resolvedUrls: Array<string>
-          resolvedUrl?: string | null
           createdAt: Date
           size: string
           isAccepted: boolean
@@ -651,7 +636,6 @@ export type GetNftsQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -699,7 +683,6 @@ export type GetNftsQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -723,7 +706,6 @@ export type GetNftsQuery = {
                   __typename?: 'StorageDataObject'
                   id: string
                   resolvedUrls: Array<string>
-                  resolvedUrl?: string | null
                   createdAt: Date
                   size: string
                   isAccepted: boolean
@@ -756,7 +738,6 @@ export type GetNftsQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -818,7 +799,6 @@ export type GetNftsQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -860,7 +840,6 @@ export type GetNftsQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -897,7 +876,6 @@ export type GetNftsQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -952,7 +930,6 @@ export type GetNftsQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -976,7 +953,6 @@ export type GetNftsQuery = {
               __typename?: 'StorageDataObject'
               id: string
               resolvedUrls: Array<string>
-              resolvedUrl?: string | null
               createdAt: Date
               size: string
               isAccepted: boolean
@@ -1009,7 +985,6 @@ export type GetNftsQuery = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -1071,7 +1046,6 @@ export type GetNftsQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1113,7 +1087,6 @@ export type GetNftsQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1150,7 +1123,6 @@ export type GetNftsQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1224,7 +1196,6 @@ export type GetNftsConnectionQuery = {
               __typename?: 'StorageDataObject'
               id: string
               resolvedUrls: Array<string>
-              resolvedUrl?: string | null
               createdAt: Date
               size: string
               isAccepted: boolean
@@ -1244,7 +1215,6 @@ export type GetNftsConnectionQuery = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -1292,7 +1262,6 @@ export type GetNftsConnectionQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1316,7 +1285,6 @@ export type GetNftsConnectionQuery = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -1349,7 +1317,6 @@ export type GetNftsConnectionQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1411,7 +1378,6 @@ export type GetNftsConnectionQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -1453,7 +1419,6 @@ export type GetNftsConnectionQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -1490,7 +1455,6 @@ export type GetNftsConnectionQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -1545,7 +1509,6 @@ export type GetNftsConnectionQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -1569,7 +1532,6 @@ export type GetNftsConnectionQuery = {
                   __typename?: 'StorageDataObject'
                   id: string
                   resolvedUrls: Array<string>
-                  resolvedUrl?: string | null
                   createdAt: Date
                   size: string
                   isAccepted: boolean
@@ -1602,7 +1564,6 @@ export type GetNftsConnectionQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1664,7 +1625,6 @@ export type GetNftsConnectionQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1706,7 +1666,6 @@ export type GetNftsConnectionQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1743,7 +1702,6 @@ export type GetNftsConnectionQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1804,7 +1762,6 @@ export type GetFeaturedNftsVideosQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -1832,7 +1789,6 @@ export type GetFeaturedNftsVideosQuery = {
           __typename?: 'StorageDataObject'
           id: string
           resolvedUrls: Array<string>
-          resolvedUrl?: string | null
           createdAt: Date
           size: string
           isAccepted: boolean
@@ -1852,7 +1808,6 @@ export type GetFeaturedNftsVideosQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -1900,7 +1855,6 @@ export type GetFeaturedNftsVideosQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -1924,7 +1878,6 @@ export type GetFeaturedNftsVideosQuery = {
                   __typename?: 'StorageDataObject'
                   id: string
                   resolvedUrls: Array<string>
-                  resolvedUrl?: string | null
                   createdAt: Date
                   size: string
                   isAccepted: boolean
@@ -1957,7 +1910,6 @@ export type GetFeaturedNftsVideosQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -2019,7 +1971,6 @@ export type GetFeaturedNftsVideosQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -2061,7 +2012,6 @@ export type GetFeaturedNftsVideosQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -2098,7 +2048,6 @@ export type GetFeaturedNftsVideosQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -2153,7 +2102,6 @@ export type GetFeaturedNftsVideosQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -2177,7 +2125,6 @@ export type GetFeaturedNftsVideosQuery = {
               __typename?: 'StorageDataObject'
               id: string
               resolvedUrls: Array<string>
-              resolvedUrl?: string | null
               createdAt: Date
               size: string
               isAccepted: boolean
@@ -2210,7 +2157,6 @@ export type GetFeaturedNftsVideosQuery = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -2272,7 +2218,6 @@ export type GetFeaturedNftsVideosQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -2314,7 +2259,6 @@ export type GetFeaturedNftsVideosQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -2351,7 +2295,6 @@ export type GetFeaturedNftsVideosQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean

packages/atlas/src/api/queries/__generated__/notifications.generated.tsx

@@ -52,7 +52,6 @@ export type GetNotificationsConnectionQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -88,7 +87,6 @@ export type GetNotificationsConnectionQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -119,7 +117,6 @@ export type GetNotificationsConnectionQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -156,7 +153,6 @@ export type GetNotificationsConnectionQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -194,7 +190,6 @@ export type GetNotificationsConnectionQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -236,7 +231,6 @@ export type GetNotificationsConnectionQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -266,7 +260,6 @@ export type GetNotificationsConnectionQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -303,7 +296,6 @@ export type GetNotificationsConnectionQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -341,7 +333,6 @@ export type GetNotificationsConnectionQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -391,7 +382,6 @@ export type GetNotificationsConnectionQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -432,7 +422,6 @@ export type GetNotificationsConnectionQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -462,7 +451,6 @@ export type GetNotificationsConnectionQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -499,7 +487,6 @@ export type GetNotificationsConnectionQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -537,7 +524,6 @@ export type GetNotificationsConnectionQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -579,7 +565,6 @@ export type GetNotificationsConnectionQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -609,7 +594,6 @@ export type GetNotificationsConnectionQuery = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -648,7 +632,6 @@ export type GetNotificationsConnectionQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -678,7 +661,6 @@ export type GetNotificationsConnectionQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -715,7 +697,6 @@ export type GetNotificationsConnectionQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -753,7 +734,6 @@ export type GetNotificationsConnectionQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -811,7 +791,6 @@ export type GetNftHistoryQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -851,7 +830,6 @@ export type GetNftHistoryQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -894,7 +872,6 @@ export type GetNftHistoryQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -932,7 +909,6 @@ export type GetNftHistoryQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -975,7 +951,6 @@ export type GetNftHistoryQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1013,7 +988,6 @@ export type GetNftHistoryQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1051,7 +1025,6 @@ export type GetNftHistoryQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1094,7 +1067,6 @@ export type GetNftHistoryQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1132,7 +1104,6 @@ export type GetNftHistoryQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1176,7 +1147,6 @@ export type GetNftHistoryQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1214,7 +1184,6 @@ export type GetNftHistoryQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1264,7 +1233,6 @@ export type GetNftHistoryQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1302,7 +1270,6 @@ export type GetNftHistoryQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1339,7 +1306,6 @@ export type GetNftHistoryQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1382,7 +1348,6 @@ export type GetNftHistoryQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1420,7 +1385,6 @@ export type GetNftHistoryQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1461,7 +1425,6 @@ export type GetNftHistoryQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -1503,7 +1466,6 @@ export type GetNftHistoryQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1541,7 +1503,6 @@ export type GetNftHistoryQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1585,7 +1546,6 @@ export type GetNftHistoryQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1623,7 +1583,6 @@ export type GetNftHistoryQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1666,7 +1625,6 @@ export type GetNftHistoryQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1704,7 +1662,6 @@ export type GetNftHistoryQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1742,7 +1699,6 @@ export type GetNftHistoryQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1785,7 +1741,6 @@ export type GetNftHistoryQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1823,7 +1778,6 @@ export type GetNftHistoryQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1901,7 +1855,6 @@ export type GetNftActivitiesQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -1933,7 +1886,6 @@ export type GetNftActivitiesQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -1973,7 +1925,6 @@ export type GetNftActivitiesQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -2011,7 +1962,6 @@ export type GetNftActivitiesQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -2049,7 +1999,6 @@ export type GetNftActivitiesQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -2085,7 +2034,6 @@ export type GetNftActivitiesQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -2116,7 +2064,6 @@ export type GetNftActivitiesQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -2149,7 +2096,6 @@ export type GetNftActivitiesQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -2186,7 +2132,6 @@ export type GetNftActivitiesQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -2224,7 +2169,6 @@ export type GetNftActivitiesQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -2267,7 +2211,6 @@ export type GetNftActivitiesQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -2305,7 +2248,6 @@ export type GetNftActivitiesQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -2343,7 +2285,6 @@ export type GetNftActivitiesQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -2373,7 +2314,6 @@ export type GetNftActivitiesQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -2404,7 +2344,6 @@ export type GetNftActivitiesQuery = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -2440,7 +2379,6 @@ export type GetNftActivitiesQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -2478,7 +2416,6 @@ export type GetNftActivitiesQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -2513,7 +2450,6 @@ export type GetNftActivitiesQuery = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -2549,7 +2485,6 @@ export type GetNftActivitiesQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -2587,7 +2522,6 @@ export type GetNftActivitiesQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -2637,7 +2571,6 @@ export type GetNftActivitiesQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -2675,7 +2608,6 @@ export type GetNftActivitiesQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -2713,7 +2645,6 @@ export type GetNftActivitiesQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -2743,7 +2674,6 @@ export type GetNftActivitiesQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -2776,7 +2706,6 @@ export type GetNftActivitiesQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -2813,7 +2742,6 @@ export type GetNftActivitiesQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -2851,7 +2779,6 @@ export type GetNftActivitiesQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -2892,7 +2819,6 @@ export type GetNftActivitiesQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -2931,7 +2857,6 @@ export type GetNftActivitiesQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -2969,7 +2894,6 @@ export type GetNftActivitiesQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -3000,7 +2924,6 @@ export type GetNftActivitiesQuery = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -3030,7 +2953,6 @@ export type GetNftActivitiesQuery = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -3066,7 +2988,6 @@ export type GetNftActivitiesQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -3104,7 +3025,6 @@ export type GetNftActivitiesQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -3139,7 +3059,6 @@ export type GetNftActivitiesQuery = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -3175,7 +3094,6 @@ export type GetNftActivitiesQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -3213,7 +3131,6 @@ export type GetNftActivitiesQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -3254,7 +3171,6 @@ export type GetNftActivitiesQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -3284,7 +3200,6 @@ export type GetNftActivitiesQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -3321,7 +3236,6 @@ export type GetNftActivitiesQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -3359,7 +3273,6 @@ export type GetNftActivitiesQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean
@@ -3395,7 +3308,6 @@ export type GetNftActivitiesQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -3432,7 +3344,6 @@ export type GetNftActivitiesQuery = {
                                     __typename?: 'StorageDataObject'
                                     id: string
                                     resolvedUrls: Array<string>
-                                    resolvedUrl?: string | null
                                     createdAt: Date
                                     size: string
                                     isAccepted: boolean
@@ -3470,7 +3381,6 @@ export type GetNftActivitiesQuery = {
                                   __typename?: 'StorageDataObject'
                                   id: string
                                   resolvedUrls: Array<string>
-                                  resolvedUrl?: string | null
                                   createdAt: Date
                                   size: string
                                   isAccepted: boolean

packages/atlas/src/api/queries/__generated__/transactionEvents.generated.tsx

@@ -61,7 +61,6 @@ export type GetMetaprotocolTransactionStatusEventsQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -114,7 +113,6 @@ export type GetMetaprotocolTransactionStatusEventsQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -167,7 +165,6 @@ export type GetMetaprotocolTransactionStatusEventsQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -220,7 +217,6 @@ export type GetMetaprotocolTransactionStatusEventsQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean

packages/atlas/src/api/queries/__generated__/videos.generated.tsx

@@ -47,7 +47,6 @@ export type GetFullVideoQuery = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -66,7 +65,6 @@ export type GetFullVideoQuery = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -109,7 +107,6 @@ export type GetFullVideoQuery = {
                   __typename?: 'StorageDataObject'
                   id: string
                   resolvedUrls: Array<string>
-                  resolvedUrl?: string | null
                   createdAt: Date
                   size: string
                   isAccepted: boolean
@@ -133,7 +130,6 @@ export type GetFullVideoQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -152,7 +148,6 @@ export type GetFullVideoQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -208,7 +203,6 @@ export type GetFullVideoQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -232,7 +226,6 @@ export type GetFullVideoQuery = {
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -265,7 +258,6 @@ export type GetFullVideoQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -327,7 +319,6 @@ export type GetFullVideoQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -369,7 +360,6 @@ export type GetFullVideoQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -406,7 +396,6 @@ export type GetFullVideoQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -444,7 +433,6 @@ export type GetFullVideoQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -500,7 +488,6 @@ export type GetBasicVideosConnectionQuery = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -520,7 +507,6 @@ export type GetBasicVideosConnectionQuery = {
           __typename?: 'StorageDataObject'
           id: string
           resolvedUrls: Array<string>
-          resolvedUrl?: string | null
           createdAt: Date
           size: string
           isAccepted: boolean
@@ -568,7 +554,6 @@ export type GetBasicVideosConnectionQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -592,7 +577,6 @@ export type GetBasicVideosConnectionQuery = {
                     __typename?: 'StorageDataObject'
                     id: string
                     resolvedUrls: Array<string>
-                    resolvedUrl?: string | null
                     createdAt: Date
                     size: string
                     isAccepted: boolean
@@ -625,7 +609,6 @@ export type GetBasicVideosConnectionQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -687,7 +670,6 @@ export type GetBasicVideosConnectionQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -729,7 +711,6 @@ export type GetBasicVideosConnectionQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -766,7 +747,6 @@ export type GetBasicVideosConnectionQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -851,7 +831,6 @@ export type GetFullVideosConnectionQuery = {
           __typename?: 'StorageDataObject'
           id: string
           resolvedUrls: Array<string>
-          resolvedUrl?: string | null
           createdAt: Date
           size: string
           isAccepted: boolean
@@ -870,7 +849,6 @@ export type GetFullVideosConnectionQuery = {
           __typename?: 'StorageDataObject'
           id: string
           resolvedUrls: Array<string>
-          resolvedUrl?: string | null
           createdAt: Date
           size: string
           isAccepted: boolean
@@ -913,7 +891,6 @@ export type GetFullVideosConnectionQuery = {
                       __typename?: 'StorageDataObject'
                       id: string
                       resolvedUrls: Array<string>
-                      resolvedUrl?: string | null
                       createdAt: Date
                       size: string
                       isAccepted: boolean
@@ -937,7 +914,6 @@ export type GetFullVideosConnectionQuery = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -956,7 +932,6 @@ export type GetFullVideosConnectionQuery = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -1012,7 +987,6 @@ export type GetFullVideosConnectionQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -1036,7 +1010,6 @@ export type GetFullVideosConnectionQuery = {
                     __typename?: 'StorageDataObject'
                     id: string
                     resolvedUrls: Array<string>
-                    resolvedUrl?: string | null
                     createdAt: Date
                     size: string
                     isAccepted: boolean
@@ -1069,7 +1042,6 @@ export type GetFullVideosConnectionQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -1131,7 +1103,6 @@ export type GetFullVideosConnectionQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1173,7 +1144,6 @@ export type GetFullVideosConnectionQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1210,7 +1180,6 @@ export type GetFullVideosConnectionQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -1248,7 +1217,6 @@ export type GetFullVideosConnectionQuery = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -1301,7 +1269,6 @@ export type GetBasicVideosQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -1321,7 +1288,6 @@ export type GetBasicVideosQuery = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -1369,7 +1335,6 @@ export type GetBasicVideosQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1393,7 +1358,6 @@ export type GetBasicVideosQuery = {
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -1426,7 +1390,6 @@ export type GetBasicVideosQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -1488,7 +1451,6 @@ export type GetBasicVideosQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -1530,7 +1492,6 @@ export type GetBasicVideosQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -1567,7 +1528,6 @@ export type GetBasicVideosQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -1643,7 +1603,6 @@ export type GetFullVideosQuery = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -1662,7 +1621,6 @@ export type GetFullVideosQuery = {
       __typename?: 'StorageDataObject'
       id: string
       resolvedUrls: Array<string>
-      resolvedUrl?: string | null
       createdAt: Date
       size: string
       isAccepted: boolean
@@ -1705,7 +1663,6 @@ export type GetFullVideosQuery = {
                   __typename?: 'StorageDataObject'
                   id: string
                   resolvedUrls: Array<string>
-                  resolvedUrl?: string | null
                   createdAt: Date
                   size: string
                   isAccepted: boolean
@@ -1729,7 +1686,6 @@ export type GetFullVideosQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -1748,7 +1704,6 @@ export type GetFullVideosQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -1804,7 +1759,6 @@ export type GetFullVideosQuery = {
                           __typename?: 'StorageDataObject'
                           id: string
                           resolvedUrls: Array<string>
-                          resolvedUrl?: string | null
                           createdAt: Date
                           size: string
                           isAccepted: boolean
@@ -1828,7 +1782,6 @@ export type GetFullVideosQuery = {
                 __typename?: 'StorageDataObject'
                 id: string
                 resolvedUrls: Array<string>
-                resolvedUrl?: string | null
                 createdAt: Date
                 size: string
                 isAccepted: boolean
@@ -1861,7 +1814,6 @@ export type GetFullVideosQuery = {
                         __typename?: 'StorageDataObject'
                         id: string
                         resolvedUrls: Array<string>
-                        resolvedUrl?: string | null
                         createdAt: Date
                         size: string
                         isAccepted: boolean
@@ -1923,7 +1875,6 @@ export type GetFullVideosQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -1965,7 +1916,6 @@ export type GetFullVideosQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -2002,7 +1952,6 @@ export type GetFullVideosQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -2040,7 +1989,6 @@ export type GetFullVideosQuery = {
         __typename?: 'StorageDataObject'
         id: string
         resolvedUrls: Array<string>
-        resolvedUrl?: string | null
         createdAt: Date
         size: string
         isAccepted: boolean
@@ -2098,7 +2046,6 @@ export type GetMostViewedVideosConnectionQuery = {
             __typename?: 'StorageDataObject'
             id: string
             resolvedUrls: Array<string>
-            resolvedUrl?: string | null
             createdAt: Date
             size: string
             isAccepted: boolean
@@ -2118,7 +2065,6 @@ export type GetMostViewedVideosConnectionQuery = {
           __typename?: 'StorageDataObject'
           id: string
           resolvedUrls: Array<string>
-          resolvedUrl?: string | null
           createdAt: Date
           size: string
           isAccepted: boolean
@@ -2166,7 +2112,6 @@ export type GetMostViewedVideosConnectionQuery = {
                               __typename?: 'StorageDataObject'
                               id: string
                               resolvedUrls: Array<string>
-                              resolvedUrl?: string | null
                               createdAt: Date
                               size: string
                               isAccepted: boolean
@@ -2190,7 +2135,6 @@ export type GetMostViewedVideosConnectionQuery = {
                     __typename?: 'StorageDataObject'
                     id: string
                     resolvedUrls: Array<string>
-                    resolvedUrl?: string | null
                     createdAt: Date
                     size: string
                     isAccepted: boolean
@@ -2223,7 +2167,6 @@ export type GetMostViewedVideosConnectionQuery = {
                             __typename?: 'StorageDataObject'
                             id: string
                             resolvedUrls: Array<string>
-                            resolvedUrl?: string | null
                             createdAt: Date
                             size: string
                             isAccepted: boolean
@@ -2285,7 +2228,6 @@ export type GetMostViewedVideosConnectionQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -2327,7 +2269,6 @@ export type GetMostViewedVideosConnectionQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean
@@ -2364,7 +2305,6 @@ export type GetMostViewedVideosConnectionQuery = {
                                 __typename?: 'StorageDataObject'
                                 id: string
                                 resolvedUrls: Array<string>
-                                resolvedUrl?: string | null
                                 createdAt: Date
                                 size: string
                                 isAccepted: boolean

packages/atlas/src/api/queries/fragments.graphql

@@ -91,7 +91,6 @@ fragment FullMembershipFields on Membership {
 fragment StorageDataObjectFields on StorageDataObject {
   id
   resolvedUrls
-  resolvedUrl @client
   createdAt
   size
   isAccepted

packages/atlas/src/components/AssetImage/AssetImage.tsx

@@ -0,0 +1,17 @@
+import { ImgHTMLAttributes } from 'react'
+
+import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
+import { useGetAssetUrl } from '@/hooks/useGetAssetUrl'
+
+export type AssetImage = {
+  resolvedUrls: string[] | undefined | null
+} & Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'>
+
+export const AssetImage = ({ resolvedUrls, ...imgProps }: AssetImage) => {
+  const { url, isLoading } = useGetAssetUrl(resolvedUrls, 'image')
+  if (isLoading) {
+    return <SkeletonLoader className={imgProps.className} />
+  }
+
+  return <img {...imgProps} src={url} />
+}

packages/atlas/src/components/AssetImage/index.ts

@@ -0,0 +1 @@
+export * from './AssetImage'

packages/atlas/src/components/AssetVideo/AssetVideo.tsx

@@ -0,0 +1,19 @@
+import { VideoHTMLAttributes, forwardRef } from 'react'
+
+import { useGetAssetUrl } from '@/hooks/useGetAssetUrl'
+
+export type AssetVideoProps = {
+  resolvedVideoUrls: string[]
+  resolvedPosterUrls: string[]
+} & Omit<VideoHTMLAttributes<HTMLVideoElement>, 'src' | 'poster'>
+
+export const AssetVideo = forwardRef<HTMLVideoElement, AssetVideoProps>(
+  ({ resolvedVideoUrls, resolvedPosterUrls, ...props }: AssetVideoProps, ref) => {
+    const { url: videoSrc } = useGetAssetUrl(resolvedVideoUrls, 'video')
+    const { url: posterSrc } = useGetAssetUrl(resolvedPosterUrls, 'image')
+
+    return <video {...props} ref={ref} src={videoSrc} poster={posterSrc} />
+  }
+)
+
+AssetVideo.displayName = 'AssetVideo'

packages/atlas/src/components/Avatar/Avatar.stories.tsx

@@ -6,7 +6,7 @@ export default {
   title: 'other/Avatar',
   component: Avatar,
   args: {
-    assetUrl: 'https://picsum.photos/200/300',
+    assetUrls: ['https://picsum.photos/200/300'],
   },
 } as Meta<AvatarProps>
 

packages/atlas/src/components/Avatar/Avatar.styles.ts

@@ -4,6 +4,7 @@ import styled from '@emotion/styled'
 
 import { SvgActionAddImage, SvgActionEdit, SvgIllustrativeFileFailed } from '@/assets/icons'
 import { SvgAvatarSilhouette } from '@/assets/illustrations'
+import { AssetImage } from '@/components/AssetImage'
 import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
 import { cVar, square, zIndex } from '@/styles'
 
@@ -154,7 +155,7 @@ export const StyledSkeletonLoader = styled(SkeletonLoader)`
   left: 0;
 `
 
-export const StyledImage = styled.img`
+export const StyledImage = styled(AssetImage)`
   position: absolute;
   left: 0;
   width: 100%;

packages/atlas/src/components/Avatar/Avatar.tsx

@@ -1,9 +1,8 @@
-import { FC, MouseEvent, PropsWithChildren, useCallback, useEffect } from 'react'
+import { FC, MouseEvent, PropsWithChildren, useCallback } from 'react'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'
 
 import { SvgActionNewChannel } from '@/assets/icons'
 import { cVar, transitions } from '@/styles'
-import { validateImage } from '@/utils/image'
 
 import {
   AvatarSize,
@@ -24,9 +23,8 @@ import { Text } from '../Text'
 
 export type AvatarProps = PropsWithChildren<{
   onClick?: (event: MouseEvent<HTMLElement>) => void
-  onImageValidation?: (validImage: boolean) => void
   onError?: () => void
-  assetUrl?: string | null
+  assetUrls?: string[] | null
   hasAvatarUploadFailed?: boolean
   loading?: boolean
   className?: string
@@ -38,7 +36,7 @@ export type AvatarProps = PropsWithChildren<{
 }>
 
 export const Avatar: FC<AvatarProps> = ({
-  assetUrl,
+  assetUrls,
   hasAvatarUploadFailed,
   loading = false,
   size = 32,
@@ -49,31 +47,10 @@ export const Avatar: FC<AvatarProps> = ({
   clickable,
   onError,
   onClick,
-  onImageValidation,
   disableHoverDimm,
 }) => {
   const isEditable = !loading && editable && size !== 32 && size !== 24
 
-  const checkIfImageIsValid = useCallback(async () => {
-    if (!assetUrl) {
-      onImageValidation?.(true)
-      return
-    }
-    try {
-      await validateImage(assetUrl)
-      onImageValidation?.(true)
-    } catch (error) {
-      onImageValidation?.(false)
-    }
-  }, [assetUrl, onImageValidation])
-
-  useEffect(() => {
-    if (!assetUrl) {
-      return
-    }
-    checkIfImageIsValid()
-  }, [assetUrl, checkIfImageIsValid])
-
   const getEditableIconSize = useCallback(() => {
     const smallIconSizes = [24, 32, 40]
     if (smallIconSizes.includes(size)) {
@@ -96,9 +73,9 @@ export const Avatar: FC<AvatarProps> = ({
     >
       {(clickable || !!onClick) && (
         <IconAndOverlayWrapper>
-          <Overlay isEdit={isEditable && !!assetUrl} />
+          <Overlay isEdit={isEditable && !!assetUrls} />
           {isEditable &&
-            (assetUrl ? (
+            (assetUrls ? (
               <StyledSvgActionEdit width={getEditableIconSize()} height={getEditableIconSize()} />
             ) : (
               <StyledSvgActionAddImage width={getEditableIconSize()} height={getEditableIconSize()} />
@@ -128,8 +105,8 @@ export const Avatar: FC<AvatarProps> = ({
             >
               {loading ? (
                 <StyledSkeletonLoader rounded />
-              ) : assetUrl ? (
-                <StyledImage src={assetUrl} onError={onError} />
+              ) : assetUrls?.length ? (
+                <StyledImage resolvedUrls={assetUrls} onError={onError} />
               ) : (
                 <SilhouetteAvatar />
               )}

packages/atlas/src/components/Avatar/AvatarGroup.stories.tsx

@@ -28,9 +28,9 @@ export const Default = Template.bind({})
 
 Default.args = {
   avatars: [
-    { url: 'https://i.pravatar.cc/300', tooltipText: 'Jane' },
-    { url: 'https://i.pravatar.cc/300', tooltipText: 'John' },
-    { url: 'https://i.pravatar.cc/300', tooltipText: 'William' },
-    { url: 'https://i.pravatar.cc/300', tooltipText: 'One line description' },
+    { urls: ['https://i.pravatar.cc/300'], tooltipText: 'Jane' },
+    { urls: ['https://i.pravatar.cc/300'], tooltipText: 'John' },
+    { urls: ['https://i.pravatar.cc/300'], tooltipText: 'William' },
+    { urls: ['https://i.pravatar.cc/300'], tooltipText: 'One line description' },
   ],
 }

packages/atlas/src/components/Avatar/AvatarGroup.tsx

@@ -22,7 +22,7 @@ type SharedAvatarGroupAvatarProps = PropsWithChildren<{
 
 export type AvatarGroupUrlAvatar = {
   __typename?: 'AvatarGroupUrlAvatar'
-  url?: string | null
+  urls?: string[] | null
 } & SharedAvatarGroupAvatarProps
 
 type AvatarGroupMemberAvatar = BasicMembershipFieldsFragment & SharedAvatarGroupAvatarProps
@@ -102,23 +102,23 @@ type SingleAvatarProps = {
   size: AvatarProps['size']
 }
 const SingleAvatar: FC<SingleAvatarProps> = ({ avatar, loading: loadingProp, size }) => {
-  const { url: memberAvatarUrl, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(
+  const { urls: memberAvatarUrls, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(
     avatar.__typename === 'Membership' ? avatar : null
   )
 
   let loading: boolean
-  let url: string | null | undefined
+  let urls: string[] | null | undefined
   if (avatar.__typename === 'Membership') {
-    url = memberAvatarUrl
+    urls = memberAvatarUrls
     loading = memberAvatarLoading || avatar.loading || loadingProp || false
   } else {
-    url = (avatar as AvatarGroupUrlAvatar).url
+    urls = (avatar as AvatarGroupUrlAvatar).urls
     loading = avatar.loading || loadingProp || false
   }
   return (
     <StyledAvatar
       loading={loading}
-      assetUrl={url}
+      assetUrls={urls}
       size={size}
       disableHoverDimm
       onClick={(e) => {

packages/atlas/src/components/MembershipInfo/MembershipInfo.tsx

@@ -14,11 +14,10 @@ import { CopyAddressButton } from '../_buttons/CopyAddressButton/CopyAddressButt
 import { SkeletonLoader } from '../_loaders/SkeletonLoader'
 
 export type MembershipInfoProps = {
-  avatarUrl?: string | null
+  avatarUrls?: string[] | null
   avatarLoading?: boolean
   hasAvatarUploadFailed?: boolean
   onAvatarEditClick?: (event: MouseEvent<HTMLElement>) => void
-  onImageValidation?: (validImage: boolean) => void
   handle?: string | null
   address?: string | null
   loading?: boolean
@@ -29,11 +28,10 @@ export type MembershipInfoProps = {
 
 export const MembershipInfo: FC<MembershipInfoProps> = ({
   address,
-  avatarUrl,
+  avatarUrls,
   avatarLoading,
   hasAvatarUploadFailed,
   onAvatarEditClick,
-  onImageValidation,
   handle,
   loading,
   isOwner,
@@ -54,9 +52,8 @@ export const MembershipInfo: FC<MembershipInfoProps> = ({
             <Avatar
               size={smMatch ? 136 : 88}
               editable={editable}
-              onImageValidation={onImageValidation}
               onClick={onAvatarEditClick}
-              assetUrl={avatarUrl}
+              assetUrls={avatarUrls}
               loading={avatarLoading}
               hasAvatarUploadFailed={hasAvatarUploadFailed}
             />

packages/atlas/src/components/NftCarousel/components/MarketplaceCarouselCard/NftCarouselDetails.tsx

@@ -6,7 +6,7 @@ import { CSSTransition } from 'react-transition-group'
 import { getNftStatus } from '@/api/hooks/nfts'
 import { GetFeaturedNftsVideosQuery } from '@/api/queries/__generated__/nfts.generated'
 import { SvgActionNotForSale } from '@/assets/icons'
-import { AvatarGroup } from '@/components/Avatar/AvatarGroup'
+import { AvatarGroup, AvatarGroupAvatar } from '@/components/Avatar/AvatarGroup'
 import { JoyTokenIcon } from '@/components/JoyTokenIcon'
 import {
   Container,
@@ -43,34 +43,34 @@ export const NftCarouselDetails = ({
   const { convertBlockToMsTimestamp } = useBlockTimeEstimation()
   const nftStatus = getNftStatus(nft, nft?.video)
 
-  const creatorAvatarUrl =
+  const creatorAvatarUrls =
     nft.owner.__typename === 'NftOwnerChannel'
-      ? nft.owner.channel.avatarPhoto?.resolvedUrl
-      : getMemberAvatar(nft.owner.member).url
-  const thumbnailUrl = nft.video.thumbnailPhoto?.resolvedUrl
-  const mediaUrl = nft.video.media?.resolvedUrl
+      ? nft.owner.channel.avatarPhoto?.resolvedUrls
+      : getMemberAvatar(nft.owner.member).urls
+  const thumbnailUrls = nft.video.thumbnailPhoto?.resolvedUrls
+  const mediaUrls = nft.video.media?.resolvedUrls
   const plannedEndDateBlockTimestamp =
     nftStatus?.status === 'auction' &&
     nftStatus.auctionPlannedEndBlock &&
     convertBlockToMsTimestamp(nftStatus.auctionPlannedEndBlock)
-  const isLoading = !thumbnailUrl || !mediaUrl
+  const isLoading = !thumbnailUrls || !mediaUrls
   const name = nft.owner.__typename === 'NftOwnerChannel' ? nft.video.channel.title : nft.owner.member.handle
   const owner = useMemo(
     () =>
       nft?.owner.__typename === 'NftOwnerChannel'
         ? {
             name,
-            assetUrl: creatorAvatarUrl,
+            assetUrls: creatorAvatarUrls,
             onClick: () => navigate(absoluteRoutes.viewer.channel(nft.video.channel.id)),
           }
         : nft?.owner.__typename === 'NftOwnerMember'
         ? {
             name,
-            assetUrl: creatorAvatarUrl,
+            assetUrls: creatorAvatarUrls,
             onClick: () => name && navigate(absoluteRoutes.viewer.member(name)),
           }
         : undefined,
-    [creatorAvatarUrl, name, navigate, nft]
+    [creatorAvatarUrls, name, navigate, nft]
   )
 
   const nftDetails = useMemo(
@@ -83,7 +83,7 @@ export const NftCarouselDetails = ({
           : undefined,
       creator: {
         name: nft?.video.channel.title || undefined,
-        assetUrl: creatorAvatarUrl,
+        assetUrl: creatorAvatarUrls,
         onClick: () => navigate(absoluteRoutes.viewer.channel(nft?.video.channel.id)),
       },
       title: nft.video.title,
@@ -97,20 +97,20 @@ export const NftCarouselDetails = ({
           ? hapiBnToTokenNumber(nftStatus.startingPrice)
           : undefined,
     }),
-    [creatorAvatarUrl, navigate, nft, nftStatus]
+    [creatorAvatarUrls, navigate, nft, nftStatus]
   )
 
   const avatars = useMemo(
-    () => [
+    (): AvatarGroupAvatar[] => [
       {
-        url: nftDetails.creator?.assetUrl,
+        urls: nftDetails.creator?.assetUrl,
         tooltipText: `Creator: ${nftDetails.creator?.name}`,
         onClick: nftDetails.creator?.onClick,
       },
       ...(owner
         ? [
             {
-              url: owner?.assetUrl,
+              urls: owner?.assetUrls,
               tooltipText: `Owner: ${owner?.name}`,
               onClick: owner?.onClick,
             },
@@ -168,8 +168,8 @@ export const NftCarouselDetails = ({
           onPause={() => setIsPaused(true)}
           onPlay={() => setIsPaused(false)}
           preload="auto"
-          src={mediaUrl ?? undefined}
-          poster={thumbnailUrl ?? undefined}
+          src={mediaUrls ?? undefined}
+          poster={thumbnailUrls ?? undefined}
           handleActions={active}
           videoPlaytime={30}
           onEnded={slideNext}

packages/atlas/src/components/OutputPill/OutputPill.stories.tsx

@@ -6,7 +6,7 @@ export default {
   title: 'Other/OutputPill',
   component: OutputPill,
   args: {
-    avatarUri: 'https://placedog.net/100/100',
+    avatarUrls: ['https://placedog.net/100/100'],
     handle: 'Member',
     withAvatar: true,
     readonly: false,

packages/atlas/src/components/OutputPill/OutputPill.tsx

@@ -5,7 +5,7 @@ import { Text } from '@/components/Text'
 import { OutputPillWrapper, RemoveButton, StyledAvatar, StyledSVGCloseIcon } from './OutputPill.styles'
 
 export type OutputPillProps = {
-  avatarUri?: string | null
+  avatarUrls?: string[] | null
   handle?: string | null
   onDeleteClick?: () => void
   className?: string
@@ -16,7 +16,7 @@ export type OutputPillProps = {
   onKeyPress?: (event: KeyboardEvent<HTMLButtonElement>) => void
 }
 export const OutputPill: FC<OutputPillProps> = ({
-  avatarUri,
+  avatarUrls,
   handle,
   onDeleteClick,
   className,
@@ -35,7 +35,7 @@ export const OutputPill: FC<OutputPillProps> = ({
 
   return (
     <OutputPillWrapper className={className} withoutButton={!onDeleteClick || readonly}>
-      {withAvatar && <StyledAvatar size={24} assetUrl={avatarUri} loading={isLoadingAvatar} />}
+      {withAvatar && <StyledAvatar size={24} assetUrls={avatarUrls} loading={isLoadingAvatar} />}
       <Text variant="t200" as="p">
         {handle}
       </Text>

packages/atlas/src/components/OwnerPill/OwnerPill.tsx

@@ -7,7 +7,7 @@ import { Avatar } from '../Avatar'
 export type OwnerPillProps = {
   handle?: string
   avatar?: {
-    assetUrl?: string | null
+    assetUrls?: string[] | null
     loading?: boolean
   }
   title?: string

packages/atlas/src/components/Searchbar/SearchBox/Result.tsx

@@ -3,6 +3,7 @@ import { FC, useCallback, useMemo } from 'react'
 import { BasicChannelFieldsFragment, BasicVideoFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
 import { Text } from '@/components/Text'
 import { absoluteRoutes } from '@/config/routes'
+import { useGetAssetUrl } from '@/hooks/useGetAssetUrl'
 
 import { ResultTitle } from './ResultTitle'
 import { ResultWrapper } from './ResultWrapper'
@@ -34,8 +35,11 @@ export const Result: FC<ResultProps> = ({
   loading,
 }) => {
   const title = video ? video.title : channel?.title
-  const channelAvatar = channel?.avatarPhoto?.resolvedUrl
-  const videoThumbnail = video?.thumbnailPhoto?.resolvedUrl
+  const { url: channelAvatar, isLoading: isLoadingAvatar } = useGetAssetUrl(channel?.avatarPhoto?.resolvedUrls, 'image')
+  const { url: videoThumbnail, isLoading: isLoadingThumbnail } = useGetAssetUrl(
+    video?.thumbnailPhoto?.resolvedUrls,
+    'image'
+  )
   const to = useMemo(() => {
     if (video) {
       return absoluteRoutes.viewer.video(video.id)
@@ -58,12 +62,12 @@ export const Result: FC<ResultProps> = ({
   return (
     <ResultWrapper to={to} selected={selected} handleSelectedItem={onSelected} selectedItem={selectedItem}>
       <ResultContent>
-        {loading ? (
+        {loading && (video ? isLoadingThumbnail : isLoadingAvatar) ? (
           <StyledSkeletonLoader width={video ? '64px' : '32px'} height={video ? '40px' : '32px'} rounded={!!channel} />
         ) : channel && !thumbnailUrl ? (
           <StyledSvgAvatarSilhouette width={32} height={32} />
         ) : (
-          <ResultThumbnail src={thumbnailUrl || ''} rounded={!!channel} />
+          <ResultThumbnail src={thumbnailUrl} rounded={!!channel} />
         )}
         <div>
           <Title as="span" color={!selected ? 'colorText' : undefined} variant="t200-strong">

packages/atlas/src/components/Section/Section.stories.tsx

@@ -262,7 +262,7 @@ const CarouselTemplate: StoryFn<SectionProps<unknown>> = () => {
               <VideoTile
                 loadingDetails={true}
                 loadingAvatar={true}
-                thumbnailUrl={`http://placekitten.com/g/${320 + idx}/180`}
+                thumbnailUrls={[`http://placekitten.com/g/${320 + idx}/180`]}
               />
             </RankingNumberTile>
           )),
@@ -286,7 +286,7 @@ const CarouselTemplate: StoryFn<SectionProps<unknown>> = () => {
               <VideoTile
                 loadingDetails={true}
                 loadingAvatar={true}
-                thumbnailUrl={`https://place.dog/${320 + idx}/180`}
+                thumbnailUrls={[`https://place.dog/${320 + idx}/180`]}
               />
             </RankingNumberTile>
           )),
@@ -308,7 +308,7 @@ const CarouselTemplate: StoryFn<SectionProps<unknown>> = () => {
           children: placeholderItems.map((_, idx) => (
             <NftTile
               key={idx}
-              thumbnail={{ type: 'video', thumbnailUrl: `https://place.dog/${320 + idx}/180` }}
+              thumbnail={{ type: 'video', thumbnailUrls: [`https://place.dog/${320 + idx}/180`] }}
               title={`Nft number ${idx}`}
             />
           )),
@@ -332,7 +332,7 @@ const CarouselTemplate: StoryFn<SectionProps<unknown>> = () => {
               key={idx}
               loadingDetails={true}
               loadingAvatar={true}
-              thumbnailUrl={`https://place.dog/${320 + idx}/180`}
+              thumbnailUrls={[`https://place.dog/${320 + idx}/180`]}
             />
           )),
         }}

packages/atlas/src/components/Section/SectionHeader/SectionHeader.stories.tsx

@@ -215,7 +215,7 @@ const WithTitleTemplate: StoryFn<SectionHeaderProps<unknown>> = () => {
           nodeStart: {
             type: 'avatar',
             avatarProps: {
-              assetUrl: 'https://placekitten.com/g/200/300',
+              assetUrls: ['https://placekitten.com/g/200/300'],
             },
           },
         }}

packages/atlas/src/components/TablePaymentsHistory/TablePaymentsHistory.tsx

@@ -116,7 +116,7 @@ const Sender = ({ sender }: { sender: PaymentHistory['sender'] }) => {
     }
   )
   const member = memberships?.find((member) => member.controllerAccount === sender)
-  const { url: avatarUrl, isLoadingAsset: avatarLoading } = getMemberAvatar(member)
+  const { urls: avatarUrls, isLoadingAsset: avatarLoading } = getMemberAvatar(member)
 
   if (sender === 'council') {
     return (
@@ -135,7 +135,7 @@ const Sender = ({ sender }: { sender: PaymentHistory['sender'] }) => {
     return (
       <StyledLink to={absoluteRoutes.viewer.member(member.handle)}>
         <SenderItem
-          nodeStart={<Avatar assetUrl={avatarUrl} size={32} loading={avatarLoading} />}
+          nodeStart={<Avatar assetUrls={avatarUrls} size={32} loading={avatarLoading} />}
           label={member?.handle}
           isInteractive={false}
         />

packages/atlas/src/components/TopSellingChannelsTable/TopSellingChannelsTable.tsx

@@ -199,7 +199,7 @@ const Channel = ({ channel }: { channel: BasicChannelFieldsFragment }) => {
   return (
     <StyledLink to={absoluteRoutes.viewer.channel(channel.id)} title={channel.title || ''}>
       <StyledListItem
-        nodeStart={<Avatar assetUrl={channel.avatarPhoto?.resolvedUrl ?? undefined} />}
+        nodeStart={<Avatar assetUrls={channel.avatarPhoto?.resolvedUrls ?? undefined} />}
         label={channel.title}
         isInteractive={false}
         nodeEnd={

packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalMembershipStep.tsx

@@ -148,7 +148,7 @@ export const SignInModalMembershipStep: FC<SignInModalMembershipStepProps> = ({
                       !!imageInputFile?.blob
                     )
                   }
-                  assetUrl={imageInputFile?.url}
+                  assetUrls={imageInputFile?.url ? [imageInputFile.url] : undefined}
                   editable
                 />
                 <ImageCropModal

packages/atlas/src/components/_channel/ChannelCard/ChannelCard.tsx

@@ -46,7 +46,7 @@ export const ChannelCard: FC<ChannelCardProps> = ({
   return (
     <ChannelCardArticle className={className} activeDisabled={activeDisabled}>
       <ChannelCardAnchor onClick={onClick} to={channel?.id ? absoluteRoutes.viewer.channel(channel.id) : ''}>
-        <StyledAvatar loading={loading} assetUrl={channel?.avatarPhoto?.resolvedUrl} />
+        <StyledAvatar loading={loading} assetUrls={channel?.avatarPhoto?.resolvedUrls} />
         <SwitchTransition>
           <CSSTransition
             key={loading ? 'placeholder' : 'content'}

packages/atlas/src/components/_channel/ChannelCover/ChannelCover.stories.tsx

@@ -9,7 +9,7 @@ export default {
     editable: { table: { required: false } },
   },
   args: {
-    assetUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/channel-posters/2.jpg',
+    assetUrls: ['https://eu-central-1.linodeobjects.com/atlas-assets/channel-posters/2.jpg'],
   },
 } as Meta<ChannelCoverProps>
 
@@ -30,5 +30,5 @@ export const Default = Template.bind({})
 
 export const WithNoImage = Template.bind({})
 WithNoImage.args = {
-  assetUrl: undefined,
+  assetUrls: undefined,
 }

packages/atlas/src/components/_channel/ChannelCover/ChannelCover.styles.ts

@@ -2,6 +2,7 @@ import styled from '@emotion/styled'
 
 import { SvgIllustrativeFileFailed } from '@/assets/icons'
 import { SvgBgPattern } from '@/assets/illustrations'
+import { AssetImage } from '@/components/AssetImage'
 import { Button } from '@/components/_buttons/Button'
 import { cVar, media, sizes, transitions, zIndex } from '@/styles'
 
@@ -21,7 +22,7 @@ export const Media = styled.div`
   overflow: hidden;
 `
 
-export const CoverImage = styled.img`
+export const CoverImage = styled(AssetImage)`
   width: 100%;
   position: absolute;
   top: 0;

packages/atlas/src/components/_channel/ChannelCover/ChannelCover.tsx

@@ -19,7 +19,7 @@ import {
 } from './ChannelCover.styles'
 
 export type ChannelCoverProps = {
-  assetUrl?: string | null
+  assetUrls?: string[] | null
   hasCoverUploadFailed?: boolean
   editable?: boolean
   disabled?: boolean
@@ -27,7 +27,7 @@ export type ChannelCoverProps = {
 }
 
 export const ChannelCover: FC<ChannelCoverProps> = ({
-  assetUrl,
+  assetUrls,
   hasCoverUploadFailed,
   editable,
   disabled,
@@ -41,7 +41,7 @@ export const ChannelCover: FC<ChannelCoverProps> = ({
             <EditCoverDesktopOverlay onClick={onCoverEditClick}>
               <SvgActionImage />
               <Text as="span" variant="t200-strong" margin={{ top: 1 }} color="colorCoreNeutral100">{`${
-                assetUrl ? 'Edit ' : 'Add '
+                assetUrls ? 'Edit ' : 'Add '
               } cover image`}</Text>
             </EditCoverDesktopOverlay>
             <EditCoverMobileButton icon={<SvgActionImageFile />} onClick={onCoverEditClick} variant="tertiary" />
@@ -50,12 +50,12 @@ export const ChannelCover: FC<ChannelCoverProps> = ({
         <Media>
           <TransitionGroup>
             <CSSTransition
-              key={assetUrl ? 'cover' : 'pattern'}
+              key={assetUrls ? 'cover' : 'pattern'}
               timeout={parseInt(transitions.timings.loading)}
               classNames={transitions.names.fade}
             >
-              {assetUrl ? (
-                <CoverImage src={assetUrl} />
+              {assetUrls ? (
+                <CoverImage resolvedUrls={assetUrls} />
               ) : hasCoverUploadFailed ? (
                 <FailedUploadContainer>
                   <StyledSvgIllustrativeFileFailed />

packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx

@@ -70,7 +70,7 @@ export const ChannelLink: FC<ChannelLinkProps> = ({
             withHandle={!hideHandle}
             loading={!displayedChannel}
             size={avatarSize}
-            assetUrl={displayedChannel?.channel.avatarPhoto?.resolvedUrl}
+            assetUrls={displayedChannel?.channel.avatarPhoto?.resolvedUrls}
           />
         </StyledLink>
       )}

packages/atlas/src/components/_channel/ChannelWithVideos/ChannelWithVideos.tsx

@@ -77,7 +77,7 @@ export const ChannelWithVideos: FC<ChannelWithVideosProps> = memo(({ channelId }
         <StyledAvatar
           size={mdMatch ? 136 : 88}
           loading={isLoading}
-          assetUrl={extendedChannel?.channel.avatarPhoto?.resolvedUrl}
+          assetUrls={extendedChannel?.channel.avatarPhoto?.resolvedUrls}
         />
         <InfoWrapper>
           {isLoading ? (

packages/atlas/src/components/_channel/CollectorsBox/CollectorsBox.stories.tsx

@@ -45,19 +45,19 @@ export const Default = Template.bind({})
 export const WithLessThan5Collectors = Template.bind({})
 WithLessThan5Collectors.args = {
   collectors: [
-    { url: 'https://thispersondoesnotexist.com/image', tooltipText: 'William', nftsAmount: 6 },
+    { urls: ['https://thispersondoesnotexist.com/image'], tooltipText: 'William', nftsAmount: 6 },
     {
-      url: 'https://eu-central-1.linodeobjects.com/atlas-assets/channel-posters/2.jpg',
+      urls: ['https://eu-central-1.linodeobjects.com/atlas-assets/channel-posters/2.jpg'],
       tooltipText: 'Someone',
       nftsAmount: 1,
     },
-    { url: 'https://thispersondoesnotexist.com/image', tooltipText: 'Someone else', nftsAmount: 7 },
+    { urls: ['https://thispersondoesnotexist.com/image'], tooltipText: 'Someone else', nftsAmount: 7 },
   ],
 }
 
 const TemplateWithChannelCover: StoryFn<CollectorsBoxProps> = (args) => (
   <div style={{ position: 'relative' }}>
-    <ChannelCover assetUrl="https://eu-central-1.linodeobjects.com/atlas-assets/channel-posters/2.jpg" />
+    <ChannelCover assetUrls={['https://eu-central-1.linodeobjects.com/atlas-assets/channel-posters/2.jpg']} />
     <div style={{ position: 'absolute', bottom: -32, right: 0 }}>
       <CollectorsBox {...args} />
     </div>

packages/atlas/src/components/_channel/CollectorsBox/CollectorsBox.tsx

@@ -67,7 +67,7 @@ export const CollectorsBox: FC<CollectorsBoxProps> = ({ collectors, maxShowedCol
         {mappedCollectors.map((collector, idx) => (
           <StyledLink key={idx} to={collector.memberUrl || ''}>
             <ListItem
-              nodeStart={<Avatar size={40} assetUrl={collector.url} />}
+              nodeStart={<Avatar size={40} assetUrls={collector.urls} />}
               nodeEnd={
                 <Text as="span" variant="t100" color="colorText">
                   Owns {collector.nftsAmount}

packages/atlas/src/components/_comments/Comment/Comment.tsx

@@ -65,7 +65,7 @@ export const Comment: FC<CommentProps> = memo(
         skip: !commentId,
       }
     )
-    const { isLoadingAsset: isMemberAvatarLoading, url: memberAvatarUrl } = getMemberAvatar(activeMembership)
+    const { isLoadingAsset: isMemberAvatarLoading, urls: memberAvatarUrls } = getMemberAvatar(activeMembership)
 
     const commentIdQueryParam = useRouterQuery(QUERY_PARAMS.COMMENT_ID)
     const reactionPopoverDismissed = usePersonalDataStore((state) => state.reactionPopoverDismissed)
@@ -280,7 +280,7 @@ export const Comment: FC<CommentProps> = memo(
           processing={editCommentInputIsProcessing}
           readOnly={!memberId}
           memberHandle={activeMembership?.handle}
-          memberAvatarUrl={memberAvatarUrl}
+          memberAvatarUrls={memberAvatarUrls}
           isMemberAvatarLoading={isMemberAvatarLoading}
           value={editCommentInputText}
           hasInitialValueChanged={comment?.text !== editCommentInputText}
@@ -334,7 +334,7 @@ export const Comment: FC<CommentProps> = memo(
               ref={replyCommentInputRef}
               fee={replyCommentFee}
               feeLoading={replyCommentFeeLoading}
-              memberAvatarUrl={memberAvatarUrl}
+              memberAvatarUrls={memberAvatarUrls}
               isMemberAvatarLoading={isMemberAvatarLoading}
               processing={replyCommentInputIsProcessing}
               readOnly={!memberId}

packages/atlas/src/components/_comments/Comment/InternalComment.tsx

@@ -115,11 +115,11 @@ export const InternalComment: FC<InternalCommentProps> = ({
 
   const popoverRef = useRef<PopoverImperativeHandle>(null)
   const isTouchDevice = useTouchDevice()
-  const { url: memberAvatarUrl, isLoadingAsset: isMemberAvatarLoading } = getMemberAvatar(author)
+  const { urls: memberAvatarUrls, isLoadingAsset: isMemberAvatarLoading } = getMemberAvatar(author)
   const filteredDuplicatedAvatars = repliesCount
     ? replyAvatars
       ? [...new Map(replyAvatars?.map((item) => [item.handle, item])).values()]
-      : createPlaceholderData(repliesCount, { url: undefined })
+      : createPlaceholderData(repliesCount, { urls: undefined })
     : []
 
   const tooltipDate = createdAt ? `${formatDate(createdAt || new Date())} at ${format(createdAt, 'HH:mm')}` : undefined
@@ -185,7 +185,7 @@ export const InternalComment: FC<InternalCommentProps> = ({
       highlighted={highlighted}
       isMemberAvatarLoading={loading || isMemberAvatarLoading}
       memberUrl={memberUrl}
-      memberAvatarUrl={memberAvatarUrl}
+      memberAvatarUrls={memberAvatarUrls}
       onMouseEnter={() => setCommentHover(true)}
       onMouseLeave={() => setCommentHover(false)}
     >

packages/atlas/src/components/_comments/CommentEditHistory/CommentEditHistory.tsx

@@ -18,7 +18,7 @@ type CommentEditHistoryProps = {
 
 export const CommentEditHistory: FC<CommentEditHistoryProps> = ({ originalComment }) => {
   const { commentEdits, loading } = useCommentEdits(originalComment?.id)
-  const { url: memberAvatarUrl, isLoadingAsset } = getMemberAvatar(originalComment?.author)
+  const { urls: memberAvatarUrls, isLoadingAsset } = getMemberAvatar(originalComment?.author)
 
   const placeholderItems = createPlaceholderData(3)
 
@@ -47,7 +47,7 @@ export const CommentEditHistory: FC<CommentEditHistoryProps> = ({ originalCommen
                   memberUrl={absoluteRoutes.viewer.member(originalComment?.author?.handle)}
                   text={commentEdit.data.text}
                   loading={loading}
-                  memberAvatarUrl={memberAvatarUrl || ''}
+                  memberAvatarUrls={memberAvatarUrls}
                   isMemberAvatarLoading={isLoadingAsset}
                 />
               )

packages/atlas/src/components/_comments/CommentRow/CommentRow.tsx

@@ -11,7 +11,7 @@ export type CommentRowProps = PropsWithChildren<{
   processing?: boolean
   highlighted?: boolean
   isMemberAvatarLoading?: boolean
-  memberAvatarUrl?: string | null
+  memberAvatarUrls?: string[] | null
   memberUrl?: string
   className?: string
   isInput?: boolean
@@ -24,7 +24,7 @@ export const CommentRow: FC<CommentRowProps> = ({
   processing,
   highlighted,
   children,
-  memberAvatarUrl,
+  memberAvatarUrls,
   isMemberAvatarLoading,
   memberUrl = '',
   className,
@@ -61,10 +61,10 @@ export const CommentRow: FC<CommentRowProps> = ({
         <div>
           {memberUrl ? (
             <Link to={memberUrl}>
-              <Avatar assetUrl={memberAvatarUrl} size={avatarSize} loading={isMemberAvatarLoading} clickable />
+              <Avatar assetUrls={memberAvatarUrls} size={avatarSize} loading={isMemberAvatarLoading} clickable />
             </Link>
           ) : (
-            <Avatar assetUrl={memberAvatarUrl} size={avatarSize} loading={isMemberAvatarLoading} />
+            <Avatar assetUrls={memberAvatarUrls} size={avatarSize} loading={isMemberAvatarLoading} />
           )}
         </div>
         <div className={className}>{children}</div>

packages/atlas/src/components/_comments/CommentSnapshot/CommentSnaphsot.tsx

@@ -21,7 +21,7 @@ import { CommentBody } from '../CommentBody'
 
 export type CommentSnapshotProps = {
   isMemberAvatarLoading?: boolean
-  memberAvatarUrl?: string
+  memberAvatarUrls?: string[] | null
   memberUrl?: string
   memberHandle?: string
   loading?: boolean
@@ -31,7 +31,7 @@ export type CommentSnapshotProps = {
 }
 
 export const CommentSnapshot: FC<CommentSnapshotProps> = ({
-  memberAvatarUrl,
+  memberAvatarUrls,
   isMemberAvatarLoading,
   memberHandle,
   loading,
@@ -44,7 +44,7 @@ export const CommentSnapshot: FC<CommentSnapshotProps> = ({
     <ContentWrapper>
       <AvatarWrapper>
         <Link to={memberUrl}>
-          <Avatar assetUrl={memberAvatarUrl} size={40} loading={isMemberAvatarLoading} clickable />
+          <Avatar assetUrls={memberAvatarUrls} size={40} loading={isMemberAvatarLoading} clickable />
         </Link>
         {!last && <Line />}
       </AvatarWrapper>

packages/atlas/src/components/_inputs/ComboBox/ComboBox.stories.tsx

@@ -13,77 +13,77 @@ const MEMBERS = [
   {
     id: 1,
     label: 'Klaudiusz',
-    thumbnailUrl: 'https://placedog.net/57/32?random=1',
+    thumbnailUrls: ['https://placedog.net/57/32?random=1'],
   },
   {
     id: 2,
     label: 'Diego',
-    thumbnailUrl: 'https://placedog.net/57/32?random=2',
+    thumbnailUrls: ['https://placedog.net/57/32?random=2'],
   },
   {
     id: 3,
     label: 'Rafal',
-    thumbnailUrl: 'https://placedog.net/57/32?random=3',
+    thumbnailUrls: ['https://placedog.net/57/32?random=3'],
   },
   {
     id: 3,
     label: 'Loic',
-    thumbnailUrl: 'https://placedog.net/57/32?random=4',
+    thumbnailUrls: ['https://placedog.net/57/32?random=4'],
   },
   {
     id: 4,
     label: 'Bartosz',
-    thumbnailUrl: 'https://placedog.net/57/32?random=5',
+    thumbnailUrls: ['https://placedog.net/57/32?random=5'],
   },
   {
     id: 5,
     label: 'Klaudiusz the Second',
-    thumbnailUrl: 'https://placedog.net/57/32?random=6',
+    thumbnailUrls: ['https://placedog.net/57/32?random=6'],
   },
   {
     id: 6,
     label: 'Diego the Second',
-    thumbnailUrl: 'https://placedog.net/57/32?random=7',
+    thumbnailUrls: ['https://placedog.net/57/32?random=7'],
   },
   {
     id: 7,
     label: 'Rafal the Second',
-    thumbnailUrl: 'https://placedog.net/57/32?random=8',
+    thumbnailUrls: ['https://placedog.net/57/32?random=8'],
   },
   {
     id: 8,
     label: 'Loic the Second',
-    thumbnailUrl: 'https://placedog.net/57/32?random=9',
+    thumbnailUrls: ['https://placedog.net/57/32?random=9'],
   },
   {
     id: 9,
     label: 'Bartosz the Second',
-    thumbnailUrl: 'https://placedog.net/57/32?random=10',
+    thumbnailUrls: ['https://placedog.net/57/32?random=10'],
   },
   {
     id: 10,
     label: 'Klaudiusz the Third',
-    thumbnailUrl: 'https://placedog.net/57/32?random=11',
+    thumbnailUrls: ['https://placedog.net/57/32?random=11'],
   },
   {
     id: 11,
     label: 'Diego the Third',
-    thumbnailUrl: 'https://placedog.net/57/32?random=12',
+    thumbnailUrls: ['https://placedog.net/57/32?random=12'],
   },
   {
     id: 12,
     label: 'Rafal the Third',
-    thumbnailUrl: 'https://placedog.net/57/32?random=13',
+    thumbnailUrls: ['https://placedog.net/57/32?random=13'],
   },
   {
     id: 13,
     label: 'Loic the Third',
-    thumbnailUrl: 'https://placedog.net/57/32?random=14',
+    thumbnailUrls: ['https://placedog.net/57/32?random=14'],
   },
   {
     id: 14,
     label: 'Bartosz the Third',
-    thumbnailUrl: 'https://placedog.net/57/32?random=15',
+    thumbnailUrls: ['https://placedog.net/57/32?random=15'],
   },
 ]
 
@@ -134,7 +134,7 @@ const Template: StoryFn<ComboBoxProps> = (args) => {
 
 export const Default = Template.bind({})
 
-type Member = { label: string; thumbnailUrl: string; id: string }
+type Member = { label: string; thumbnailUrls: string[]; id: string }
 const TemplateWithMembers: StoryFn<ComboBoxProps> = (args) => {
   const [selectedMembers, setSelectedMembers] = useState<Member[]>([])
   const [focusedElement, setFocusedElement] = useState<number | null>(null)
@@ -167,7 +167,7 @@ const TemplateWithMembers: StoryFn<ComboBoxProps> = (args) => {
         items={dropdownItems.map((member) => ({
           id: member.id,
           label: member.label,
-          thumbnailUrl: '',
+          thumbnailUrls: [],
         }))}
         resetOnSelect
       />
@@ -175,7 +175,7 @@ const TemplateWithMembers: StoryFn<ComboBoxProps> = (args) => {
         {selectedMembers.map((member, idx) => (
           <OutputPill
             withAvatar
-            avatarUri={member.thumbnailUrl}
+            avatarUrls={member.thumbnailUrls}
             key={member.id}
             handle={member.label}
             onDeleteClick={() => handleDeleteMember(member.id)}

packages/atlas/src/components/_inputs/ComboBox/ComboBox.styles.ts

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 
 import { SvgActionPlus } from '@/assets/icons'
+import { AssetImage } from '@/components/AssetImage'
 import { cVar, sizes, zIndex } from '@/styles'
 
 export const ComboBoxWrapper = styled.div`
@@ -19,7 +20,7 @@ export const ListWrapper = styled.ul<{ isOpen: boolean }>`
   margin: 0;
 `
 
-export const StyledThumbnail = styled.img`
+export const StyledThumbnail = styled(AssetImage)`
   max-height: 32px;
 `
 

packages/atlas/src/components/_inputs/ComboBox/ComboBox.tsx

@@ -14,7 +14,7 @@ import { Input, InputProps } from '../Input'
 
 type ModifiedListItemProps = ListItemProps & {
   label: string
-  thumbnailUrl?: string
+  thumbnailUrls?: string[]
   isSeparator?: boolean
 }
 
@@ -134,7 +134,9 @@ export const ComboBox = <T extends unknown>(props: ComboBoxProps<T>) => {
                     })}
                     size="large"
                     highlight={highlightedIndex === index}
-                    nodeStart={item.nodeStart || (item.thumbnailUrl && <StyledThumbnail src={item.thumbnailUrl} />)}
+                    nodeStart={
+                      item.nodeStart || (item.thumbnailUrls && <StyledThumbnail resolvedUrls={item.thumbnailUrls} />)
+                    }
                     isSeparator={item.isSeparator}
                   />
                 ))}

packages/atlas/src/components/_inputs/Input/Input.stories.tsx

@@ -60,7 +60,7 @@ const TemplateWithPreffixAndSuffix: StoryFn<InputProps> = (args) => {
       <Input {...args} nodeStart={<Pill label="label" />} nodeEnd="$" />
       <Input
         {...args}
-        nodeStart={<Avatar size={24} assetUrl="https://placedog.net/360/203" />}
+        nodeStart={<Avatar size={24} assetUrls={['https://placedog.net/360/203']} />}
         nodeEnd={<Pill label="500$" />}
       />
       <Input

packages/atlas/src/components/_inputs/MemberComboBox/MemberComboBox.tsx

@@ -137,8 +137,8 @@ type AvatarWithResolvedAssetProps = {
 }
 
 const AvatarWithResolvedAsset: FC<AvatarWithResolvedAssetProps> = ({ member }) => {
-  const { url, isLoadingAsset } = getMemberAvatar(member)
-  return <Avatar size={32} assetUrl={url} loading={isLoadingAsset} />
+  const { urls, isLoadingAsset } = getMemberAvatar(member)
+  return <Avatar size={32} assetUrls={urls} loading={isLoadingAsset} />
 }
 
 type StyledOutputPillWithResolvedAssetProps = {
@@ -154,12 +154,12 @@ const StyledOutputPillWithResolvedAsset: FC<StyledOutputPillWithResolvedAssetPro
   onKeyPress,
   focused,
 }) => {
-  const { url, isLoadingAsset } = getMemberAvatar(member)
+  const { urls, isLoadingAsset } = getMemberAvatar(member)
   return (
     <StyledOutputPill
       handle={member.handle}
       onDeleteClick={onDeleteClick}
-      avatarUri={url}
+      avatarUrls={urls}
       isLoadingAvatar={isLoadingAsset}
       withAvatar
       onKeyPress={onKeyPress}

packages/atlas/src/components/_inputs/SubtitlesBox/SubtitlesBox.tsx

@@ -8,6 +8,7 @@ import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
 import { ContextMenu } from '@/components/_overlays/ContextMenu'
 import { atlasConfig } from '@/config'
+import { useGetAssetUrl } from '@/hooks/useGetAssetUrl'
 import { useConfirmationModal } from '@/providers/confirmationModal'
 import { SubtitlesInput } from '@/types/subtitles'
 
@@ -42,8 +43,7 @@ export const SubtitlesBox: FC<SubtitleBoxProps> = ({
   const { mutateAsync: subtitlesFetch } = useMutation('subtitles-fetch', (url: string) =>
     axios.get(url, { responseType: 'blob' })
   )
-
-  const url = asset?.resolvedUrl
+  const { url } = useGetAssetUrl(asset?.resolvedUrls, 'subtitle')
 
   const handleDownload = async (url = '') => {
     const response = await subtitlesFetch(url)

packages/atlas/src/components/_navigation/SidenavViewer/FollowedChannels.tsx

@@ -44,7 +44,7 @@ export const ChannelNavItem: FC<NavItemProps & ChannelNavItemProps> = ({
 
   return (
     <NavItem to={to} expanded={expanded} itemName={itemName} onClick={onClick} isSecondary={isSecondary}>
-      <Avatar loading={!extendedChannel} size={32} assetUrl={extendedChannel?.channel.avatarPhoto?.resolvedUrl} />
+      <Avatar loading={!extendedChannel} size={32} assetUrls={extendedChannel?.channel.avatarPhoto?.resolvedUrls} />
       {extendedChannel ? (
         <ChannelTitle as="p" variant="h300" color="colorText">
           {extendedChannel.channel.title}

packages/atlas/src/components/_navigation/TopbarStudio/TopbarStudio.tsx

@@ -31,9 +31,9 @@ export const TopbarStudio: FC<StudioTopbarProps> = ({ hideChannelInfo, isMembers
 
   const currentChannel = activeMembership?.channels.find((channel) => channel.id === channelId)
 
-  const channelAvatarUrl = currentChannel?.avatarPhoto?.resolvedUrl
+  const channelAvatarUrls = currentChannel?.avatarPhoto?.resolvedUrls
 
-  const { url: memberAvatarUrl, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(activeMembership)
+  const { urls: memberAvatarUrls, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(activeMembership)
 
   const [isMemberDropdownActive, setIsMemberDropdownActive] = useState(false)
 
@@ -53,13 +53,13 @@ export const TopbarStudio: FC<StudioTopbarProps> = ({ hideChannelInfo, isMembers
   const avatars: AvatarGroupUrlAvatar[] = channelId
     ? [
         {
-          url: memberAvatarUrl,
+          urls: memberAvatarUrls,
           loading: memberAvatarLoading,
           onClick: handleDrawerToggle,
         },
-        { url: channelAvatarUrl, loading: isAuthLoading, onClick: handleDrawerToggle },
+        { urls: channelAvatarUrls, loading: isAuthLoading, onClick: handleDrawerToggle },
       ]
-    : [{ url: memberAvatarUrl, loading: memberAvatarLoading, onClick: handleDrawerToggle }]
+    : [{ urls: memberAvatarUrls, loading: memberAvatarLoading, onClick: handleDrawerToggle }]
 
   return (
     <>

packages/atlas/src/components/_navigation/TopbarViewer/TopbarViewer.tsx

@@ -33,7 +33,7 @@ export const TopbarViewer: FC = () => {
   const { isLoggedIn, activeMembership, signIn, isAuthLoading } = useUser()
   const [isMemberDropdownActive, setIsMemberDropdownActive] = useState(false)
 
-  const { url: memberAvatarUrl, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(activeMembership)
+  const { urls: memberAvatarUrls, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(activeMembership)
 
   const { pathname, search } = useLocation()
   const mdMatch = useMediaMatch('md')
@@ -126,7 +126,7 @@ export const TopbarViewer: FC = () => {
                       {!mdMatch && !searchOpen && (
                         <StyledAvatar
                           size={40}
-                          assetUrl={memberAvatarUrl}
+                          assetUrls={memberAvatarUrls}
                           loading={memberAvatarLoading}
                           onClick={handleDrawerToggle}
                         />
@@ -134,7 +134,7 @@ export const TopbarViewer: FC = () => {
                       {mdMatch && (
                         <StyledAvatar
                           size={40}
-                          assetUrl={memberAvatarUrl}
+                          assetUrls={memberAvatarUrls}
                           onClick={handleDrawerToggle}
                           loading={memberAvatarLoading}
                         />

packages/atlas/src/components/_nft/NftCard/Members.tsx

@@ -15,7 +15,7 @@ import {
 } from './NftCard.styles'
 
 export type Member = {
-  assetUrl?: string | null
+  assetUrls?: string[] | null
   name?: string | null
 }
 
@@ -30,7 +30,7 @@ type MembersProps =
 export const Members: FC<MembersProps> = ({ caption, members, loading }) => {
   const avatars =
     members && Array.isArray(members)
-      ? members.map((member) => ({ assetUrl: member.assetUrl, ...(member.name ? { tooltipText: member.name } : {}) }))
+      ? members.map((member) => ({ assetUrls: member.assetUrls, ...(member.name ? { tooltipText: member.name } : {}) }))
       : null
   const isArray = Array.isArray(members)
   return (
@@ -53,7 +53,7 @@ export const Members: FC<MembersProps> = ({ caption, members, loading }) => {
       )}
       {!isArray && (
         <AvatarWrapper>
-          <StyledAvatar size={24} assetUrl={members.assetUrl} loading={loading} />
+          <StyledAvatar size={24} assetUrls={members.assetUrls} loading={loading} />
           {loading ? (
             <SkeletonLoader width={64} height={24} />
           ) : (

packages/atlas/src/components/_nft/NftTile/NftTile.tsx

@@ -79,7 +79,7 @@ export const NftTile: FC<NftTileProps> = ({
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
         loading={loading}
-        thumbnailUrl={thumbnail?.thumbnailUrl}
+        thumbnailUrls={thumbnail?.thumbnailUrls}
         clickable={false}
         slots={{
           topLeft: views

packages/atlas/src/components/_nft/NftTile/NftTileDetails.tsx

@@ -24,7 +24,7 @@ import {
 } from './NftTileDetails.styles'
 
 export type Member = {
-  assetUrl?: string | null
+  assetUrls?: string[] | null
   name?: string
   onClick?: () => void
   loading?: boolean
@@ -163,7 +163,7 @@ export const NftTileDetails: FC<NftTileDetailsProps> = memo(
     const avatars = useMemo(
       () => [
         {
-          url: creator?.assetUrl,
+          urls: creator?.assetUrls,
           tooltipText: `Creator: ${creator?.name}`,
           onClick: creator?.onClick,
           loading: creator?.loading,
@@ -171,7 +171,7 @@ export const NftTileDetails: FC<NftTileDetailsProps> = memo(
         ...(owner
           ? [
               {
-                url: owner?.assetUrl,
+                urls: owner?.assetUrls,
                 tooltipText: `Owner: ${owner?.name}`,
                 onClick: owner?.onClick,
                 loading: owner.loading,
@@ -179,7 +179,7 @@ export const NftTileDetails: FC<NftTileDetailsProps> = memo(
             ]
           : []),
       ],
-      [creator?.assetUrl, creator?.loading, creator?.name, creator?.onClick, owner]
+      [creator?.assetUrls, creator?.loading, creator?.name, creator?.onClick, owner]
     )
 
     return (

packages/atlas/src/components/_nft/NftTileViewer/NftTileViewer.tsx

@@ -19,9 +19,9 @@ type NftTileViewerProps = {
 export const NftTileViewer: FC<NftTileViewerProps> = ({ nftId, isInCarousel }) => {
   const { nftStatus, nft, loading } = useNft(nftId || '')
   const navigate = useNavigate()
-  const thumbnailUrl = nft?.video.thumbnailPhoto?.resolvedUrl
+  const thumbnailUrls = nft?.video.thumbnailPhoto?.resolvedUrls
   const nftActions = useNftActions()
-  const creatorAvatarUrl = nft?.video.channel.avatarPhoto?.resolvedUrl
+  const creatorAvatarUrls = nft?.video.channel.avatarPhoto?.resolvedUrls
   const nftState = useNftState(nft)
   const {
     auctionPlannedEndDate,
@@ -36,7 +36,7 @@ export const NftTileViewer: FC<NftTileViewerProps> = ({ nftId, isInCarousel }) =
   const ownerMember = nft?.owner.__typename === 'NftOwnerMember' && nft.owner.member
   const ownerChannel = nft?.owner.__typename === 'NftOwnerChannel' && nft.owner.channel
 
-  const { url: ownerMemberAvatarUrl } = getMemberAvatar(ownerMember || null)
+  const { urls: ownerMemberAvatarUrls } = getMemberAvatar(ownerMember || null)
 
   const isAuction = nftStatus?.status === 'auction'
 
@@ -50,14 +50,14 @@ export const NftTileViewer: FC<NftTileViewerProps> = ({ nftId, isInCarousel }) =
   const owner = ownerChannel
     ? {
         name: ownerChannel.title || undefined,
-        assetUrl: creatorAvatarUrl || undefined,
+        assetUrls: creatorAvatarUrls || undefined,
         loading,
         onClick: () => navigate(absoluteRoutes.viewer.channel(ownerChannel.id)),
       }
     : ownerMember
     ? {
         name: ownerMember.handle,
-        assetUrl: ownerMemberAvatarUrl,
+        assetUrls: ownerMemberAvatarUrls,
         loading,
         onClick: () => navigate(absoluteRoutes.viewer.member(ownerMember.handle)),
       }
@@ -83,7 +83,7 @@ export const NftTileViewer: FC<NftTileViewerProps> = ({ nftId, isInCarousel }) =
     loading: loading || !nftId,
     thumbnail: {
       videoHref: absoluteRoutes.viewer.video(nft?.video.id),
-      thumbnailUrl: thumbnailUrl,
+      thumbnailUrls: thumbnailUrls,
       loading: loading,
       thumbnailAlt: `${nft?.video?.title} video thumbnail`,
       type: 'video',
@@ -92,7 +92,7 @@ export const NftTileViewer: FC<NftTileViewerProps> = ({ nftId, isInCarousel }) =
     creator: {
       name: nft?.video.channel.title || undefined,
       loading: loading,
-      assetUrl: creatorAvatarUrl,
+      assetUrls: creatorAvatarUrls,
       onClick: () => navigate(absoluteRoutes.viewer.channel(nft?.video.channel.id)),
     },
     contextMenuItems,

packages/atlas/src/components/_nft/NftWidget/NftHistory.tsx

@@ -66,7 +66,7 @@ type HistoryItemProps = {
 } & NftHistoryEntry
 export const HistoryItem: FC<HistoryItemProps> = ({ size, member, date, joyAmount, text }) => {
   const navigate = useNavigate()
-  const { url, isLoadingAsset } = getMemberAvatar(member)
+  const { urls, isLoadingAsset } = getMemberAvatar(member)
   const { convertHapiToUSD } = useTokenPrice()
 
   const dollarValue = joyAmount ? convertHapiToUSD(joyAmount) : null
@@ -75,7 +75,7 @@ export const HistoryItem: FC<HistoryItemProps> = ({ size, member, date, joyAmoun
     <HistoryItemContainer data-size={size}>
       <Avatar
         onClick={() => navigate(absoluteRoutes.viewer.member(member?.handle))}
-        assetUrl={url}
+        assetUrls={urls}
         loading={isLoadingAsset}
         size={size === 'medium' ? 40 : 32}
       />

packages/atlas/src/components/_nft/NftWidget/NftWidget.hooks.ts

@@ -83,9 +83,11 @@ export const useNftWidget = (video: FullVideoFieldsFragment | undefined | null):
   const ownerMember = nftOwner?.__typename === 'NftOwnerMember' ? nftOwner.member : null
   const ownerChannel = nftOwner?.__typename === 'NftOwnerChannel' ? nftOwner.channel : null
 
-  const { url: ownerAvatarUri } = getMemberAvatar(ownerMember)
-  const creatorAvatarUri = ownerChannel?.avatarPhoto?.resolvedUrl
-  const { url: topBidderAvatarUri } = getMemberAvatar(nftStatus?.status === 'auction' ? nftStatus.topBidder : undefined)
+  const { urls: _ownerAvatarUrls } = getMemberAvatar(ownerMember)
+  const creatorAvatarUrls = ownerChannel?.avatarPhoto?.resolvedUrls
+  const { urls: topBidderAvatarUris } = getMemberAvatar(
+    nftStatus?.status === 'auction' ? nftStatus.topBidder : undefined
+  )
 
   const { entries: nftHistory } = useNftHistoryEntries(video?.id ?? '', {
     skip: !nft,
@@ -95,7 +97,7 @@ export const useNftWidget = (video: FullVideoFieldsFragment | undefined | null):
   })
   const isOwnedByChannel = nftOwner?.__typename === 'NftOwnerChannel'
   const ownerHandle = ownerMember?.handle || ownerChannel?.title
-  const ownerAvatar = isOwnedByChannel ? creatorAvatarUri : ownerAvatarUri
+  const ownerAvatarUrls = isOwnedByChannel ? creatorAvatarUrls : _ownerAvatarUrls
 
   const creatorId = ownerMember?.id || ownerChannel?.id
 
@@ -103,7 +105,7 @@ export const useNftWidget = (video: FullVideoFieldsFragment | undefined | null):
     case 'auction': {
       return {
         ownerHandle,
-        ownerAvatar,
+        ownerAvatarUrls,
         creatorId,
         isOwner,
         needsSettling,
@@ -115,7 +117,7 @@ export const useNftWidget = (video: FullVideoFieldsFragment | undefined | null):
           canChangeBid,
           englishTimerState,
           auctionPlannedEndDate,
-          topBidderAvatarUri,
+          topBidderAvatarUris,
           isUserTopBidder,
           userBidUnlockDate,
           startsAtBlock,
@@ -137,7 +139,7 @@ export const useNftWidget = (video: FullVideoFieldsFragment | undefined | null):
     case 'buy-now':
       return {
         ownerHandle,
-        ownerAvatar,
+        ownerAvatarUrls,
         creatorId,
         isOwner,
         needsSettling,
@@ -154,7 +156,7 @@ export const useNftWidget = (video: FullVideoFieldsFragment | undefined | null):
     case 'idle':
       return {
         ownerHandle,
-        ownerAvatar,
+        ownerAvatarUrls,
         creatorId,
         isOwner,
         needsSettling,

packages/atlas/src/components/_nft/NftWidget/NftWidget.tsx

@@ -43,7 +43,7 @@ export type Auction = {
   topBid: BasicBidFieldsFragment | undefined
   topBidAmount: BN | undefined
   topBidderHandle: string | undefined
-  topBidderAvatarUri: string | null | undefined
+  topBidderAvatarUris: string[] | null | undefined
   isUserTopBidder: boolean | undefined
   userBidAmount: BN | undefined
   userBidUnlockDate: Date | undefined
@@ -62,7 +62,7 @@ export type Auction = {
 
 export type NftWidgetProps = {
   ownerHandle: string | null | undefined
-  ownerAvatar: string | null | undefined
+  ownerAvatarUrls: string[] | null | undefined
   creatorId?: string
   isOwner: boolean | undefined
   needsSettling: boolean | undefined
@@ -103,7 +103,7 @@ export const NftWidget: FC<NftWidgetProps> = ({
   nftStatus,
   nftHistory,
   needsSettling,
-  ownerAvatar,
+  ownerAvatarUrls,
   onNftPutOnSale,
   onNftAcceptBid,
   onWithdrawBid,
@@ -382,7 +382,7 @@ export const NftWidget: FC<NftWidgetProps> = ({
                 content={
                   <>
                     <TopBidderContainer>
-                      <Avatar assetUrl={nftStatus.topBidderAvatarUri} size={24} />
+                      <Avatar assetUrls={nftStatus.topBidderAvatarUris} size={24} />
                       <TopBidderTokenContainer data-size={size}>
                         <JoyTokenIcon size={size === 'small' ? 16 : 24} variant="silver" />
                       </TopBidderTokenContainer>
@@ -602,7 +602,7 @@ export const NftWidget: FC<NftWidgetProps> = ({
   return (
     <Container ref={ref}>
       <NftOwnerContainer data-size={size}>
-        <OwnerAvatar assetUrl={ownerAvatar} size={40} />
+        <OwnerAvatar assetUrls={ownerAvatarUrls} size={40} />
         <OwnerLabel as="span" variant="t100" color="colorText">
           This NFT is owned by
         </OwnerLabel>

packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.tsx

@@ -81,7 +81,7 @@ export const NotificationTile: FC<NotificationProps> = ({
   className,
 }) => {
   const { date, video, member, read } = notification
-  const { url: avatarUrl, isLoadingAsset: isLoadingAvatar } = getMemberAvatar(member)
+  const { urls: avatarUrls, isLoadingAsset: isLoadingAvatar } = getMemberAvatar(member)
 
   const formattedDate = useMemo(() => {
     const differenceDays = differenceInDays(new Date(), date)
@@ -111,7 +111,7 @@ export const NotificationTile: FC<NotificationProps> = ({
           variant="compact"
           nodeStart={
             member ? (
-              <Avatar size={32} assetUrl={avatarUrl} loading={isLoadingAvatar || loading} />
+              <Avatar size={32} assetUrls={avatarUrls} loading={isLoadingAvatar || loading} />
             ) : (
               <NoActorNotificationAvatar size="small" />
             )
@@ -155,7 +155,7 @@ export const NotificationTile: FC<NotificationProps> = ({
       )}
       <AvatarWrapper>
         {member ? (
-          <Avatar size={40} assetUrl={avatarUrl} loading={isLoadingAvatar || loading} />
+          <Avatar size={40} assetUrls={avatarUrls} loading={isLoadingAvatar || loading} />
         ) : (
           <NoActorNotificationAvatar size="regular" />
         )}

packages/atlas/src/components/_overlays/AcceptBidDialog/AcceptBidList.tsx

@@ -46,7 +46,7 @@ export const AcceptBidList: FC<AcceptBidListProps> = ({ items, onSelect, selecte
 export const BidRow: FC<BidRowProps> = ({ bidder, createdAt, amount, amountUSD, selectedBid, onSelect }) => {
   const xsMatch = useMediaMatch('xs')
   const selected = selectedBid?.bidderId === bidder.id
-  const { url, isLoadingAsset } = getMemberAvatar(bidder)
+  const { urls, isLoadingAsset } = getMemberAvatar(bidder)
   return (
     <BidRowWrapper selected={selected} onClick={() => onSelect?.(bidder.id, amount)}>
       <RadioInput
@@ -54,7 +54,7 @@ export const BidRow: FC<BidRowProps> = ({ bidder, createdAt, amount, amountUSD,
         value={bidder.id}
         onChange={() => onSelect?.(bidder.id, amount)}
       />
-      {xsMatch && <Avatar assetUrl={url} loading={isLoadingAsset} size={40} />}
+      {xsMatch && <Avatar assetUrls={urls} loading={isLoadingAsset} size={40} />}
       <div>
         <Text as="p" variant="h300" color={!selected ? 'colorText' : undefined} margin={{ bottom: 1 }}>
           {bidder?.handle}

packages/atlas/src/components/_overlays/ImageCropModal/ImageCropModal.stories.tsx

@@ -85,7 +85,7 @@ const RegularTemplate: StoryFn<ImageCropModalProps> = () => {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'start', gap: '24px' }}>
       <Avatar
-        assetUrl={avatarImage?.url}
+        assetUrls={avatarImage?.url ? [avatarImage.url] : undefined}
         editable
         onClick={() => avatarDialogRef.current?.open(avatarImage?.originalBlob, avatarImage?.cropData, true)}
         size={88}

packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdown.tsx

@@ -34,7 +34,7 @@ export const MemberDropdown = forwardRef<HTMLDivElement, MemberDropdownProps>(
     const [disableScrollDuringAnimation, setDisableScrollDuringAnimation] = useState(false)
 
     const [showSendDialog, setShowSendDialog] = useState(false)
-    const { url: memberAvatarUrl } = getMemberAvatar(activeMembership)
+    const { urls: memberAvatarUrls } = getMemberAvatar(activeMembership)
     const selectedChannel = activeMembership?.channels.find((chanel) => chanel.id === channelId)
 
     const memoizedChannelStateBloatBond = useMemo(() => {
@@ -144,7 +144,7 @@ export const MemberDropdown = forwardRef<HTMLDivElement, MemberDropdownProps>(
     return (
       <>
         <WithdrawFundsDialog
-          avatarUrl={memberAvatarUrl}
+          avatarUrls={memberAvatarUrls}
           activeMembership={activeMembership}
           show={showWithdrawDialog}
           onExitClick={toggleWithdrawDialog}

packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownList.tsx

@@ -68,7 +68,7 @@ export const MemberDropdownList: FC<MemberDropdownListProps> = ({
               <ListItem
                 key={channel.id}
                 onClick={() => onChannelChange?.(channel.id)}
-                nodeStart={<Avatar assetUrl={channel.avatarPhoto?.resolvedUrl} size={32} />}
+                nodeStart={<Avatar assetUrls={channel.avatarPhoto?.resolvedUrls} size={32} />}
                 label={channel?.title ?? ''}
                 caption={channel ? `${channel?.followsNum} followers` : undefined}
                 selected={channel.id === channelId}
@@ -97,11 +97,11 @@ type MemberListItemProps = {
   onClick: () => void
 }
 const MemberListItem: FC<MemberListItemProps> = ({ member, selected, onClick }) => {
-  const { url, isLoadingAsset } = getMemberAvatar(member)
+  const { urls, isLoadingAsset } = getMemberAvatar(member)
   return (
     <ListItem
       onClick={onClick}
-      nodeStart={<Avatar assetUrl={url} loading={isLoadingAsset} />}
+      nodeStart={<Avatar assetUrls={urls} loading={isLoadingAsset} />}
       label={member.handle ?? ''}
       selected={selected}
       asButton

packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownNav.tsx

@@ -93,8 +93,8 @@ export const MemberDropdownNav: FC<MemberDropdownNavProps> = ({
 }) => {
   const navigate = useNavigate()
   const selectedChannel = activeMembership?.channels.find((chanel) => chanel.id === channelId)
-  const { url: memberAvatarUrl, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(activeMembership)
-  const channelAvatarUrl = selectedChannel?.avatarPhoto?.resolvedUrl
+  const { urls: memberAvatarUrls, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(activeMembership)
+  const channelAvatarUrls = selectedChannel?.avatarPhoto?.resolvedUrls
   const setSignInModalOpen = useUserStore((state) => state.actions.setSignInModalOpen)
   const memberAvatarWrapperRef = useRef<HTMLButtonElement>(null)
   const channelAvatarWrapperRef = useRef<HTMLButtonElement>(null)
@@ -148,7 +148,7 @@ export const MemberDropdownNav: FC<MemberDropdownNavProps> = ({
                 clickable={false}
                 isDisabled={type === 'channel'}
                 size={40}
-                assetUrl={memberAvatarUrl}
+                assetUrls={memberAvatarUrls}
                 loading={memberAvatarLoading}
               />
               <StyledIconWrapper size="small" icon={<SvgActionMember />} />
@@ -172,7 +172,7 @@ export const MemberDropdownNav: FC<MemberDropdownNavProps> = ({
                 clickable={false}
                 isDisabled={type === 'member'}
                 size={40}
-                assetUrl={channelAvatarUrl}
+                assetUrls={channelAvatarUrls}
                 loading={membershipLoading}
               >
                 {!hasAtLeastOneChannel ? (
@@ -264,7 +264,7 @@ export const MemberDropdownNav: FC<MemberDropdownNavProps> = ({
             </TextLink>
           </BalanceContainer>
         </MemberInfoContainer>
-        <BlurredBG memberUrl={memberAvatarUrl} channelUrl={channelAvatarUrl} isChannel={type === 'channel'}>
+        <BlurredBG memberUrl={memberAvatarUrls?.[0]} channelUrl={channelAvatarUrls?.[0]} isChannel={type === 'channel'}>
           <Filter />
         </BlurredBG>
       </MemberInfoAndBgWrapper>

packages/atlas/src/components/_overlays/SendTransferDialogs/SendFundsDialog.tsx

@@ -247,10 +247,10 @@ type ResolvedAvatarProps = {
   member: BasicMembershipFieldsFragment
 }
 const ResolvedAvatar: FC<ResolvedAvatarProps> = ({ member }) => {
-  const { url, isLoadingAsset } = getMemberAvatar(member)
+  const { urls, isLoadingAsset } = getMemberAvatar(member)
   return (
     <Tooltip text={member?.handle} placement="top">
-      <Avatar assetUrl={url} loading={isLoadingAsset} size={24} />
+      <Avatar assetUrls={urls} loading={isLoadingAsset} size={24} />
     </Tooltip>
   )
 }

packages/atlas/src/components/_overlays/SendTransferDialogs/WithdrawFundsDialog.tsx

@@ -32,7 +32,7 @@ type WithdrawFundsDialogProps = {
   show: boolean
   totalBalance?: BN
   channelBalance?: BN
-  avatarUrl?: string | null
+  avatarUrls?: string[] | null
   channelId?: string | null
 }
 
@@ -42,7 +42,7 @@ export const WithdrawFundsDialog: FC<WithdrawFundsDialogProps> = ({
   onExitClick,
   activeMembership,
   show,
-  avatarUrl,
+  avatarUrls,
   totalBalance = new BN(0),
   channelBalance = new BN(0),
   channelId,
@@ -186,7 +186,7 @@ export const WithdrawFundsDialog: FC<WithdrawFundsDialogProps> = ({
             Destination account
           </Text>
           <VerticallyCenteredDiv>
-            <StyledAvatar assetUrl={avatarUrl} />
+            <StyledAvatar assetUrls={avatarUrls} />
             <Text as="span" variant="t100" margin={{ left: 2, right: 1 }}>
               {activeMembership?.handle}
             </Text>

packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.styles.ts

@@ -3,6 +3,8 @@ import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { Link } from 'react-router-dom'
 
+import { AssetImage } from '@/components/AssetImage'
+import { AssetVideo } from '@/components/AssetVideo/AssetVideo'
 import { cVar, media, sizes, zIndex } from '@/styles'
 
 type VideoWrapperProps = {
@@ -13,7 +15,7 @@ export const VideoWrapper = styled.div<VideoWrapperProps>`
   overflow: hidden;
 `
 
-export const VideoPoster = styled.img`
+export const VideoPoster = styled(AssetImage)`
   position: absolute;
   object-fit: cover;
   max-height: 100%;
@@ -29,7 +31,7 @@ export const VideoPoster = styled.img`
   }
 `
 
-export const StyledVideo = styled.video`
+export const StyledVideo = styled(AssetVideo)`
   position: absolute;
   object-fit: cover;
   max-height: 100%;

packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx

@@ -17,7 +17,9 @@ type BackgroundVideoPlayerProps = {
   videoPlaytime?: number
   videoId?: string
   withFade?: boolean
-} & VideoHTMLAttributes<HTMLVideoElement>
+  src: string[]
+  poster: string[]
+} & Omit<VideoHTMLAttributes<HTMLVideoElement>, 'src' | 'poster'>
 
 export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
   autoPlay,
@@ -110,13 +112,13 @@ export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
       {playing && <VideoProgress video={videoRef.current} isPlaying={isPlaying} tick={10} limit={videoPlaytime} />}
       <StyledLink withFade={withFade} to={videoId ? absoluteRoutes.viewer.video(videoId) : ''}>
         <StyledVideo
-          src={src}
+          resolvedVideoUrls={src}
           autoPlay={autoPlay}
           playsInline={playsInline}
           ref={videoRef}
           onEnded={handleEnded}
           onPlay={handlePlay}
-          poster={poster}
+          resolvedPosterUrls={poster}
           {...props}
           muted={handleActions ? isMuted : props.muted}
         />
@@ -128,7 +130,7 @@ export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
             classNames={transitions.names.fade}
             timeout={300}
           >
-            <VideoPoster src={poster} alt="" />
+            <VideoPoster resolvedUrls={poster} alt="" />
           </CSSTransition>
         )}
       </StyledLink>

packages/atlas/src/components/_video/VideoHero/VideoHero.tsx

@@ -125,9 +125,9 @@ export const VideoHero: FC<VideoHeroProps> = ({
             muted={soundMuted}
             autoPlay
             onTimeUpdate={onTimeUpdate}
-            poster={videoHeroData.heroPosterUrl ?? undefined}
+            poster={[videoHeroData.heroPosterUrl ?? '']}
             onEnded={handleEnded}
-            src={videoHeroData?.heroVideoCutUrl}
+            src={[videoHeroData?.heroVideoCutUrl]}
           />
         )}
         <GradientOverlay withSolidOverlay />

packages/atlas/src/components/_video/VideoPlayer/VideoOverlay.tsx

@@ -16,7 +16,7 @@ type VideoOverlayProps = {
   playerState: PlayerState
   onPlayAgain: () => void
   channelId?: string
-  currentThumbnailUrl?: string | null
+  currentThumbnailUrls?: string[] | null
   videoId?: string
   isFullScreen?: boolean
   isPlayNextDisabled?: boolean
@@ -29,7 +29,7 @@ export const VideoOverlay: FC<VideoOverlayProps> = ({
   playerState,
   onPlayAgain,
   channelId,
-  currentThumbnailUrl,
+  currentThumbnailUrls,
   videoId,
   isFullScreen,
   isPlayNextDisabled,
@@ -87,7 +87,7 @@ export const VideoOverlay: FC<VideoOverlayProps> = ({
               isPlayNextDisabled={isPlayNextDisabled}
               onPlayAgain={onPlayAgain}
               channelId={channelId}
-              currentThumbnailUrl={currentThumbnailUrl}
+              currentThumbnailUrls={currentThumbnailUrls}
               randomNextVideo={playRandomVideoOnEnded ? randomNextVideo : undefined}
             />
           )}

packages/atlas/src/components/_video/VideoPlayer/VideoOverlays/EndingOverlay.styles.ts

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
 
+import { AssetImage } from '@/components/AssetImage'
 import { CircularProgress } from '@/components/CircularProgress'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
@@ -163,7 +164,7 @@ export const RestartButton = styled(Button)`
   }
 `
 
-export const VideoThumbnail = styled.img`
+export const VideoThumbnail = styled(AssetImage)`
   width: 320px;
   display: none;
 

packages/atlas/src/components/_video/VideoPlayer/VideoOverlays/EndingOverlay.tsx

@@ -25,7 +25,7 @@ import {
 
 type EndingOverlayProps = {
   channelId?: string
-  currentThumbnailUrl?: string | null
+  currentThumbnailUrls?: string[] | null
   isFullScreen?: boolean
   onPlayAgain?: () => void
   randomNextVideo?: BasicVideoFieldsFragment | null
@@ -39,7 +39,7 @@ export const EndingOverlay: FC<EndingOverlayProps> = ({
   onPlayAgain,
   isFullScreen,
   channelId,
-  currentThumbnailUrl,
+  currentThumbnailUrls,
   randomNextVideo,
   isEnded,
   isPlayNextDisabled,
@@ -49,7 +49,7 @@ export const EndingOverlay: FC<EndingOverlayProps> = ({
   const [isCountDownStarted, setIsCountDownStarted] = useState(false)
   const mdMatch = useMediaMatch('md')
 
-  const randomNextVideoThumbnailUrl = randomNextVideo?.thumbnailPhoto?.resolvedUrl
+  const randomNextVideoThumbnailUrls = randomNextVideo?.thumbnailPhoto?.resolvedUrls
 
   useEffect(() => {
     if (!randomNextVideo || !isEnded) {
@@ -103,13 +103,13 @@ export const EndingOverlay: FC<EndingOverlayProps> = ({
     }
   }
 
-  const thumbnailUrl = useMemo(() => {
+  const thumbnailUrls = useMemo(() => {
     if (randomNextVideo) {
-      return randomNextVideoThumbnailUrl || ''
+      return randomNextVideoThumbnailUrls
     } else {
-      return currentThumbnailUrl || ''
+      return currentThumbnailUrls
     }
-  }, [currentThumbnailUrl, randomNextVideo, randomNextVideoThumbnailUrl])
+  }, [currentThumbnailUrls, randomNextVideo, randomNextVideoThumbnailUrls])
 
   const stopPropagationx = (e: MouseEvent) => {
     e.stopPropagation()
@@ -124,7 +124,7 @@ export const EndingOverlay: FC<EndingOverlayProps> = ({
               navigate(absoluteRoutes.viewer.video(randomNextVideo.id))
             }}
           >
-            <VideoThumbnail src={thumbnailUrl} />
+            <VideoThumbnail resolvedUrls={thumbnailUrls} />
             <VideoInfo>
               <Text as="span" variant={mdMatch ? 't300' : 't200'} color="colorText">
                 Up next

packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.stories.tsx

@@ -30,7 +30,7 @@ const Template: StoryFn<VideoPlayerProps> = (args) => (
 )
 export const Regular = Template.bind({})
 Regular.args = {
-  src: 'https://eu-central-1.linodeobjects.com/atlas-assets/videos/1.mp4',
+  videoUrls: ['https://eu-central-1.linodeobjects.com/atlas-assets/videos/1.mp4'],
   fill: true,
 }
 

packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx

@@ -71,7 +71,7 @@ import { CustomVideojsEvents, PlayerState, VOLUME_STEP, hotkeysHandler, isFullSc
 import { VideoJsConfig, useVideoJsPlayer } from './videoJsPlayer'
 
 export type VideoPlayerProps = {
-  channelAvatarUrl?: string | null
+  channelAvatarUrls?: string[] | null
   isChannelAvatarLoading?: boolean
   isShareDialogOpen?: boolean
   onCloseShareDialog?: () => void
@@ -107,7 +107,7 @@ const VideoPlayerComponent: ForwardRefRenderFunction<HTMLVideoElement, VideoPlay
   {
     isVideoPending,
     className,
-    channelAvatarUrl,
+    channelAvatarUrls,
     isChannelAvatarLoading,
     onCloseShareDialog,
     onAddVideoView,
@@ -199,12 +199,12 @@ const VideoPlayerComponent: ForwardRefRenderFunction<HTMLVideoElement, VideoPlay
           ConsoleLogger.warn('Video playback failed', error)
         } else {
           SentryLogger.error('Video playback failed', 'VideoPlayer', error, {
-            video: { id: videoId, url: videoJsConfig.src },
+            video: { id: videoId, urls: videoJsConfig.videoUrls },
           })
         }
       }
     },
-    [videoId, videoJsConfig.src]
+    [videoId, videoJsConfig.videoUrls]
   )
 
   const pauseVideo = useCallback((player: VideoJsPlayer | null, withIndicator?: boolean, callback?: () => void) => {
@@ -304,11 +304,11 @@ const VideoPlayerComponent: ForwardRefRenderFunction<HTMLVideoElement, VideoPlay
   // When src is null that means something went wrong during asset resolution
   // No need to log anything here, error logging is handled in resolvers
   useEffect(() => {
-    if (videoJsConfig.src === null) {
+    if (!videoJsConfig.videoUrls) {
       setPlayerState('error')
       onError?.()
     }
-  }, [onError, videoJsConfig.src])
+  }, [onError, videoJsConfig.videoUrls])
 
   // handle video loading
   useEffect(() => {
@@ -898,7 +898,7 @@ const VideoPlayerComponent: ForwardRefRenderFunction<HTMLVideoElement, VideoPlay
             handlePlayPause(true)
           }}
           channelId={video?.channel.id}
-          currentThumbnailUrl={videoJsConfig.posterUrl}
+          currentThumbnailUrls={videoJsConfig.posterUrls}
           playRandomVideoOnEnded={!isEmbedded}
           isMinimized={isMinimized}
         />
@@ -910,7 +910,7 @@ const VideoPlayerComponent: ForwardRefRenderFunction<HTMLVideoElement, VideoPlay
                 <Avatar
                   clickable
                   size={isFullScreen && !isMobile() ? 88 : 32}
-                  assetUrl={channelAvatarUrl}
+                  assetUrls={channelAvatarUrls}
                   loading={isChannelAvatarLoading}
                 />
               </a>

packages/atlas/src/components/_video/VideoPlayer/videoJsPlayer.ts

@@ -2,15 +2,17 @@ import { RefObject, useEffect, useRef, useState } from 'react'
 import { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'
 import videojs from 'video.js/dist/alt/video.core.novtt'
 
+import { useGetAssetUrl } from '@/hooks/useGetAssetUrl'
+
 export type VideoJsConfig = {
-  src?: string | null
+  videoUrls?: string[] | null
   width?: number
   height?: number
   fluid?: boolean
   fill?: boolean
   muted?: boolean
   loop?: boolean
-  posterUrl?: string | null
+  posterUrls?: string[] | null
   startTime?: number
   onDataLoaded?: () => void
   onPlay?: () => void
@@ -24,11 +26,11 @@ export const useVideoJsPlayer: VideoJsPlayerHook = ({
   fill,
   fluid,
   height,
-  src,
+  videoUrls,
   width,
   muted = false,
   loop = false,
-  posterUrl,
+  posterUrls,
   startTime = 0,
   onDataLoaded,
   onPlay,
@@ -38,7 +40,8 @@ export const useVideoJsPlayer: VideoJsPlayerHook = ({
 }) => {
   const playerRef = useRef<HTMLVideoElement | null>(null)
   const [player, setPlayer] = useState<VideoJsPlayer | null>(null)
-
+  const { url: src } = useGetAssetUrl(videoUrls, 'video')
+  const { url: posterUrl } = useGetAssetUrl(posterUrls, 'image')
   useEffect(() => {
     if (!playerRef.current) {
       return

packages/atlas/src/components/_video/VideoThumbnail/VideoThumbnail.styles.ts

@@ -2,6 +2,7 @@ import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { Link } from 'react-router-dom'
 
+import { AssetImage } from '@/components/AssetImage'
 import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
 import { cVar, square } from '@/styles'
 
@@ -81,7 +82,7 @@ export const ContentContainer = styled.div`
   ${square('100%')};
 `
 
-export const ThumbnailImage = styled.img`
+export const ThumbnailImage = styled(AssetImage)`
   position: absolute;
   top: 0;
   left: 0;
@@ -208,7 +209,7 @@ export const VideoThumbnailContainer = styled(Link, { shouldForwardProp: isPropV
           transform: translate(0, 12px);
         }
 
-        ${ContentOverlay}, ${HoverOverlay}, ${PlaylistOverlay}, ${SlotsOverlay}, {
+        ${ContentOverlay}, ${HoverOverlay}, ${PlaylistOverlay}, ${SlotsOverlay} {
           transform: translate(0, -4px);
         }
         ${PlaylistOverlay} {

packages/atlas/src/components/_video/VideoThumbnail/VideoThumbnail.tsx

@@ -43,7 +43,7 @@ export type VideoThumbnailProps = {
   loading?: boolean
   videoHref?: To
   linkState?: LinkProps['state']
-  thumbnailUrl?: string | null
+  thumbnailUrls?: string[] | null
   thumbnailAlt?: string | null
   clickable?: boolean
   videosInPlaylist?: number
@@ -60,7 +60,7 @@ export const VideoThumbnail = forwardRef<HTMLAnchorElement, VideoThumbnailProps>
       videoHref,
       linkState,
       slots,
-      thumbnailUrl,
+      thumbnailUrls,
       thumbnailAlt,
       onClick,
       clickable = true,
@@ -105,7 +105,7 @@ export const VideoThumbnail = forwardRef<HTMLAnchorElement, VideoThumbnailProps>
                 <ThumbnailSkeletonLoader />
               ) : (
                 <ThumbnailBackground>
-                  {thumbnailUrl && <ThumbnailImage src={thumbnailUrl || ''} alt={thumbnailAlt || ''} />}
+                  {thumbnailUrls && <ThumbnailImage resolvedUrls={thumbnailUrls || ''} alt={thumbnailAlt || ''} />}
                 </ThumbnailBackground>
               )}
             </CSSTransition>

packages/atlas/src/components/_video/VideoTile/VideoTile.stories.tsx

@@ -147,7 +147,10 @@ Publisher.args = {
   slots: {
     topLeft: {
       element: (
-        <OwnerPill avatar={{ assetUrl: 'https://thispersondoesnotexist.com/image' }} handle="thishandledoesntexists" />
+        <OwnerPill
+          avatar={{ assetUrls: ['https://thispersondoesnotexist.com/image'] }}
+          handle="thishandledoesntexists"
+        />
       ),
       clickable: true,
       halfWidth: true,

packages/atlas/src/components/_video/VideoTile/VideoTile.tsx

@@ -35,9 +35,9 @@ export const VideoTile: FC<VideoTileProps> = memo(
     slots,
     videoHref,
     linkState,
-    thumbnailUrl,
+    thumbnailUrls,
     loadingDetails,
-    channelAvatarUrl,
+    channelAvatarUrls,
     createdAt,
     views,
     loadingThumbnail,
@@ -67,7 +67,7 @@ export const VideoTile: FC<VideoTileProps> = memo(
           ref={thumbnailRef}
           videoHref={videoHref}
           linkState={linkState}
-          thumbnailUrl={thumbnailUrl}
+          thumbnailUrls={thumbnailUrls}
           loading={loadingThumbnail}
           contentSlot={contentSlot}
           slots={slots}
@@ -83,7 +83,7 @@ export const VideoTile: FC<VideoTileProps> = memo(
           channelHref={channelHref}
           onChannelAvatarClick={onChannelAvatarClick}
           variant={detailsVariant}
-          channelAvatarUrl={channelAvatarUrl}
+          channelAvatarUrls={channelAvatarUrls}
           videoTitle={videoTitle}
           videoSubTitle={videoSubTitle}
           views={views}

packages/atlas/src/components/_video/VideoTileDetails/VideoTileDetails.tsx

@@ -35,7 +35,7 @@ export type VideoTileDetailsProps = {
   views?: number | null
   createdAt?: Date | null
   channelTitle?: string | null
-  channelAvatarUrl?: string | null
+  channelAvatarUrls?: string[] | null
   channelHref?: string
   onChannelAvatarClick?: () => void
   loadingAvatar?: boolean
@@ -59,7 +59,7 @@ export const VideoTileDetails: FC<VideoTileDetailsProps> = ({
   channelHref,
   onChannelAvatarClick,
   size = 'medium',
-  channelAvatarUrl,
+  channelAvatarUrls,
   loadingAvatar,
   loading,
   kebabMenuItems = [],
@@ -72,7 +72,7 @@ export const VideoTileDetails: FC<VideoTileDetailsProps> = ({
       {variant === 'withChannelNameAndAvatar' && (
         <StyledAvatar
           size={32}
-          assetUrl={channelAvatarUrl}
+          assetUrls={channelAvatarUrls}
           loading={loadingAvatar}
           onClick={onChannelAvatarClick}
           smallGap={size === 'small'}

packages/atlas/src/components/_video/VideoTilePublisher/VideoTilePublisher.tsx

@@ -48,7 +48,11 @@ export const DELAYED_FADE_CLASSNAME = 'delayed-fade'
 export const VideoTilePublisher: FC<VideoTilePublisherProps> = memo(
   ({ id, onEditClick, onDeleteVideoClick, onReuploadVideoClick, onMintNftClick, isSyncing }) => {
     const [videoTitleMap, setVideoTitleMap] = useState('')
-    const { video, loading } = useFullVideo(id ?? '', {
+    const {
+      video,
+      loading,
+      refetch: refetchVideo,
+    } = useFullVideo(id ?? '', {
       skip: !id,
       onError: (error) => SentryLogger.error('Failed to fetch video', 'VideoTilePublisher', error, { video: { id } }),
     })
@@ -59,7 +63,7 @@ export const VideoTilePublisher: FC<VideoTilePublisherProps> = memo(
       }
     }, [video?.title, videoTitleMap])
 
-    const { isLoadingThumbnail, thumbnailPhotoUrl, videoHref } = useVideoTileSharedLogic(video)
+    const { isLoadingThumbnail, thumbnailPhotoUrls, videoHref } = useVideoTileSharedLogic(video)
     const navigate = useNavigate()
 
     const hasNft = !!video?.nft
@@ -151,7 +155,7 @@ export const VideoTilePublisher: FC<VideoTilePublisherProps> = memo(
                     e?.preventDefault()
                     navigate(absoluteRoutes.viewer.member(ownerMember.handle))
                   }}
-                  avatar={{ assetUrl: ownerAvatar.url, loading: ownerAvatar.isLoadingAsset }}
+                  avatar={{ assetUrls: ownerAvatar.urls, loading: ownerAvatar.isLoadingAsset }}
                   handle={ownerMember.handle}
                   title={ownerMember.handle}
                 />
@@ -206,7 +210,7 @@ export const VideoTilePublisher: FC<VideoTilePublisherProps> = memo(
       onEditClick,
       ownerMember,
       ownerAvatar.isLoadingAsset,
-      ownerAvatar.url,
+      ownerAvatar.urls,
       video?.duration,
       video?.nft,
     ])
@@ -304,6 +308,12 @@ export const VideoTilePublisher: FC<VideoTilePublisherProps> = memo(
       return videoHref
     }, [hasVideoUploadFailed, isSyncingWithYoutube, isUploading, videoHref])
 
+    useEffect(() => {
+      if (uploadVideoStatus?.lastStatus === 'completed' || uploadThumbnailStatus?.lastStatus === 'completed') {
+        refetchVideo()
+      }
+    }, [refetchVideo, uploadThumbnailStatus?.lastStatus, uploadVideoStatus?.lastStatus])
+
     return (
       <VideoTile
         clickable={(!isUploading || hasAssetUploadFailed) && !isSyncingWithYoutube}
@@ -316,7 +326,7 @@ export const VideoTilePublisher: FC<VideoTilePublisherProps> = memo(
         detailsVariant="withoutChannel"
         loadingDetails={loading || !video}
         loadingThumbnail={isLoadingThumbnail && !hasThumbnailUploadFailed}
-        thumbnailUrl={isSyncingWithYoutube ? null : thumbnailPhotoUrl}
+        thumbnailUrls={isSyncingWithYoutube ? null : thumbnailPhotoUrls}
         createdAt={video?.createdAt}
         videoTitle={video?.title}
         views={video?.viewsNum}

packages/atlas/src/components/_video/VideoTileViewer/VideoTileViewer.tsx

@@ -33,7 +33,7 @@ export const VideoTileViewer: FC<VideoTileViewerProps> = ({ id, onClick, details
   })
   const nftStatus = getNftStatus(video?.nft, video)
   const nftState = useNftState(video?.nft)
-  const { avatarPhotoUrl, isLoadingAvatar, isLoadingThumbnail, thumbnailPhotoUrl, videoHref } =
+  const { avatarPhotoUrls, isLoadingAvatar, isLoadingThumbnail, thumbnailPhotoUrls, videoHref } =
     useVideoTileSharedLogic(video)
 
   const handleWithdrawBid = () => {
@@ -75,7 +75,7 @@ export const VideoTileViewer: FC<VideoTileViewerProps> = ({ id, onClick, details
       onChannelAvatarClick={() => navigate(channelHref)}
       loadingDetails={loading || !video}
       loadingThumbnail={isLoadingThumbnail}
-      thumbnailUrl={thumbnailPhotoUrl}
+      thumbnailUrls={thumbnailPhotoUrls}
       views={video?.viewsNum}
       createdAt={video?.createdAt}
       slots={{
@@ -95,7 +95,7 @@ export const VideoTileViewer: FC<VideoTileViewerProps> = ({ id, onClick, details
           type: 'hover',
         },
       }}
-      channelAvatarUrl={avatarPhotoUrl}
+      channelAvatarUrls={avatarPhotoUrls}
       loadingAvatar={isLoadingAvatar}
       channelTitle={video?.channel?.title}
       videoTitle={video?.title}

packages/atlas/src/components/_ypp/YppReferralBanner/YppReferralBanner.tsx

@@ -52,7 +52,7 @@ export const YppReferralBanner: FC<YppReferralBannerProps> = ({ className }) =>
   })
 
   const channel = extendedChannel?.channel
-  const channelAvatarUrl = channel?.avatarPhoto?.resolvedUrl
+  const channelAvatarUrls = channel?.avatarPhoto?.resolvedUrls
   const shouldShowReferrerBanner = referrerId && channel && !isLoadingChannel
 
   // persist referrer id in store
@@ -71,7 +71,7 @@ export const YppReferralBanner: FC<YppReferralBannerProps> = ({ className }) =>
       <ReferralBannerContainer className={className}>
         <ChannelInfoContainer>
           <ChannelAvatarLink to={absoluteRoutes.viewer.channel(channel?.id)}>
-            <Avatar clickable loading={isLoading} assetUrl={channelAvatarUrl} size={32} />
+            <Avatar clickable loading={isLoading} assetUrls={channelAvatarUrls} size={32} />
           </ChannelAvatarLink>
           <SwitchTransition>
             <CSSTransition

packages/atlas/src/hooks/useGetAssetUrl.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react'
+
+import { atlasConfig } from '@/config'
+import { testAssetDownload } from '@/providers/assets/assets.helpers'
+import { ConsoleLogger } from '@/utils/logs'
+import { TimeoutError, withTimeout } from '@/utils/misc'
+
+export const getSingleAssetUrl = async (urls: string[] | undefined | null, type: 'image' | 'video' | 'subtitle') => {
+  if (!urls || urls[0] === '') {
+    return
+  }
+
+  for (const distributionAssetUrl of urls) {
+    const distributorUrl = distributionAssetUrl.split(`/${atlasConfig.storage.assetPath}/`)[0]
+
+    const assetTestPromise = testAssetDownload(distributionAssetUrl, type)
+    const assetTestPromiseWithTimeout = withTimeout(assetTestPromise, atlasConfig.storage.assetResponseTimeout)
+
+    try {
+      await assetTestPromiseWithTimeout
+
+      return distributionAssetUrl
+    } catch (err) {
+      if (err instanceof TimeoutError) {
+        // AssetLogger.logDistributorResponseTimeout(eventEntry)
+        ConsoleLogger.warn(`Distributor didn't respond in ${atlasConfig.storage.assetResponseTimeout} seconds`, {
+          distributorUrl: distributorUrl,
+          assetUrl: distributionAssetUrl,
+        })
+      }
+    }
+  }
+}
+
+export const useGetAssetUrl = (urls: string[] | undefined | null, type: 'image' | 'video' | 'subtitle') => {
+  const [url, setUrl] = useState<string | undefined>(undefined)
+  const [isLoading, setIsLoading] = useState(true)
+  useEffect(() => {
+    const init = async () => {
+      setIsLoading(true)
+      const resolvedUrl = await getSingleAssetUrl(urls, type)
+      setIsLoading(false)
+      if (resolvedUrl) {
+        setUrl(resolvedUrl)
+      }
+    }
+
+    init()
+  }, [type, urls])
+
+  return { url, isLoading }
+}

packages/atlas/src/hooks/useInfiniteVideoGrid.ts

@@ -53,6 +53,7 @@ export const useInfiniteVideoGrid = <Query extends VideoInfiniteQueries>({
   const itemsToLoad = Math.min(itemsLeft, columns * 4)
 
   const nextLoadPlaceholders = !dataConnection?.pageInfo.hasNextPage || false ? [] : createPlaceholderData(itemsToLoad)
+
   return {
     tiles: [...firstLoadPlaceholders, ...displayedItems, ...(loading ? nextLoadPlaceholders : [])],
     fetchMore,

packages/atlas/src/hooks/useVideoTileSharedLogic.ts

@@ -2,16 +2,18 @@ import { BasicVideoFieldsFragment, FullVideoFieldsFragment } from '@/api/queries
 import { absoluteRoutes } from '@/config/routes'
 
 export const useVideoTileSharedLogic = (video?: BasicVideoFieldsFragment | FullVideoFieldsFragment | null) => {
-  const thumbnailPhotoUrl = video?.thumbnailPhoto?.resolvedUrl
-  const avatarPhotoUrl = video?.channel?.avatarPhoto?.resolvedUrl
+  const thumbnailPhotoUrls = video?.thumbnailPhoto?.resolvedUrls.length ? video.thumbnailPhoto.resolvedUrls : undefined
+  const avatarPhotoUrls = video?.channel?.avatarPhoto?.resolvedUrls.length
+    ? video.channel.avatarPhoto.resolvedUrls
+    : undefined
 
   const videoHref = video ? absoluteRoutes.viewer.video(video.id) : undefined
 
   return {
     isLoadingThumbnail: !video,
     isLoadingAvatar: !video,
-    thumbnailPhotoUrl,
-    avatarPhotoUrl,
+    thumbnailPhotoUrls,
+    avatarPhotoUrls,
     videoHref,
   }
 }

packages/atlas/src/providers/assets/assets.helpers.ts

@@ -1,30 +1,21 @@
-import { DataObjectType } from '@/api/queries/__generated__/baseTypes.generated'
 import { BasicMembershipFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
 import { BUILD_ENV } from '@/config/env'
 import { AssetLogger, ConsoleLogger, DataObjectResponseMetric, DistributorEventEntry } from '@/utils/logs'
 import { wait } from '@/utils/misc'
 
-const imageAssetTypes: DataObjectType['__typename'][] = [
-  'DataObjectTypeChannelAvatar',
-  'DataObjectTypeChannelCoverPhoto',
-  'DataObjectTypeVideoThumbnail',
-]
-const videoAssetTypes: DataObjectType['__typename'][] = ['DataObjectTypeVideoMedia']
-const subtitleAssetTypes: DataObjectType['__typename'][] = ['DataObjectTypeVideoSubtitle']
-
 export const getMemberAvatar = (member?: BasicMembershipFieldsFragment | null) => {
   const avatar = member?.metadata?.avatar
 
   if (avatar?.__typename === 'AvatarUri') {
-    return { url: avatar.avatarUri, isLoadingAsset: false }
+    return { urls: [avatar.avatarUri], isLoadingAsset: false }
   } else if (avatar?.__typename === 'AvatarObject') {
-    return { url: avatar.avatarObject.resolvedUrl, isLoadingAsset: false }
+    return { urls: avatar.avatarObject.resolvedUrls, isLoadingAsset: false }
   }
   // if avatar is `undefined` it means that avatar is not loaded yet, If it's `null` it means that it's not set
-  return { url: null, isLoadingAsset: avatar === null ? false : true }
+  return { urls: null, isLoadingAsset: avatar !== null }
 }
 
-export const testAssetDownload = (url: string, type: DataObjectType): Promise<number> => {
+export const testAssetDownload = (url: string, type: 'image' | 'video' | 'subtitle'): Promise<string> => {
   return new Promise((_resolve, _reject) => {
     let img: HTMLImageElement | null = null
     let video: HTMLVideoElement | null = null
@@ -50,12 +41,7 @@ export const testAssetDownload = (url: string, type: DataObjectType): Promise<nu
     const resolve = () => {
       cleanup()
 
-      const performanceEntries = performance.getEntriesByName(url)
-      if (performanceEntries.length !== 1) {
-        _resolve(0)
-        return
-      }
-      _resolve(performanceEntries[0].duration)
+      _resolve(url)
     }
 
     const reject = (err?: unknown) => {
@@ -63,12 +49,12 @@ export const testAssetDownload = (url: string, type: DataObjectType): Promise<nu
       _reject(err)
     }
 
-    if (imageAssetTypes.includes(type?.__typename)) {
+    if (type === 'image') {
       img = new Image()
       img.addEventListener('load', resolve)
       img.addEventListener('error', reject)
       img.src = url
-    } else if (videoAssetTypes.includes(type?.__typename)) {
+    } else if (type === 'video') {
       video = document.createElement('video')
       video.addEventListener('loadedmetadata', resolve)
       video.addEventListener('loadeddata', resolve)
@@ -82,10 +68,10 @@ export const testAssetDownload = (url: string, type: DataObjectType): Promise<nu
         }
       })
       video.src = url
-    } else if (subtitleAssetTypes.includes(type?.__typename)) {
+    } else if (type === 'subtitle') {
       fetch(url, { method: 'HEAD', cache: 'no-store' }).then(resolve).catch(reject)
     } else {
-      ConsoleLogger.warn('Encountered unknown asset type', { ...type })
+      ConsoleLogger.warn('Encountered unknown asset type', { url, type })
       reject()
     }
   })

packages/atlas/src/providers/videoWorkspace/hooks.ts

@@ -8,6 +8,7 @@ import { useFullVideo } from '@/api/hooks/video'
 import { displayCategories } from '@/config/categories'
 import { cancelledVideoFilter } from '@/config/contentFilter'
 import { absoluteRoutes } from '@/config/routes'
+import { useGetAssetUrl } from '@/hooks/useGetAssetUrl'
 import { useAuthorizedUser } from '@/providers/user/user.hooks'
 import { RoutingState } from '@/types/routing'
 import { SubtitlesInput } from '@/types/subtitles'
@@ -44,6 +45,8 @@ export const useVideoWorkspaceData = () => {
       },
     }
   )
+  const videoUrl = useGetAssetUrl(video?.media?.resolvedUrls, 'video')
+  const thumbnailUrl = useGetAssetUrl(video?.thumbnailPhoto?.resolvedUrls, 'image')
 
   const hasAnyAvailableSubtitles = video?.subtitles?.some((s) => !!s.asset?.isAccepted)
 
@@ -84,11 +87,11 @@ export const useVideoWorkspaceData = () => {
     : {
         video: {
           id: video?.media?.id ?? null,
-          url: video?.media?.resolvedUrl,
+          url: videoUrl.url,
         },
         thumbnail: {
           cropId: video?.thumbnailPhoto?.id ?? null,
-          url: video?.thumbnailPhoto?.resolvedUrl,
+          url: thumbnailUrl.url,
           originalId: null,
         },
       }

packages/atlas/src/utils/logs/asset.ts

@@ -24,6 +24,7 @@ type StorageEvent = {
 export type DistributorEventEntry = {
   dataObjectId: string
   dataObjectType: DataObjectType['__typename']
+  resolvedUrl: string
 } & DistributorEventDetails
 
 export type DataObjectResponseMetric = {

packages/atlas/src/utils/misc.ts

@@ -1,10 +1,19 @@
 import { formatNumber } from '@/utils/number'
 
-export class TimeoutError extends Error {}
+export class TimeoutError<T> extends Error {
+  payload: T
 
-export const withTimeout = async <T>(promise: Promise<T>, timeout: number) => {
-  const timeoutPromise = new Promise<T>((resolve, reject) => setTimeout(() => reject(new TimeoutError()), timeout))
-  return await Promise.race([timeoutPromise, promise])
+  constructor(payload: T) {
+    super()
+    this.payload = payload
+  }
+}
+
+export const withTimeout = async <T, P>(promise: Promise<T> | Promise<T>[], timeout: number, rejectionPayload?: P) => {
+  const timeoutPromise = new Promise<T>((resolve, reject) =>
+    setTimeout(() => reject(new TimeoutError(rejectionPayload)), timeout)
+  )
+  return await Promise.race([timeoutPromise, ...[promise].flat()])
 }
 
 export const pluralizeNoun = (count: number, noun: string, formatCount?: boolean, suffix = 's') =>

packages/atlas/src/views/global/NftPurchaseBottomDrawer/NftPurchaseBottomDrawer.tsx

@@ -62,9 +62,9 @@ export const NftPurchaseBottomDrawer: FC = () => {
   const { currentAction, closeNftAction, currentNftId, isBuyNowClicked } = useNftActions()
   const { nft, nftStatus, loading, refetch } = useNft(currentNftId || '')
   const { userBid, canChangeBid, userBidUnlockDate } = useNftState(nft)
-  const thumbnailUrl = nft?.video.thumbnailPhoto?.resolvedUrl
-  const creatorAvatarUrl = nft?.video.channel.avatarPhoto?.resolvedUrl
-  const { url: ownerMemberAvatarUrl } = getMemberAvatar(
+  const thumbnailUrls = nft?.video.thumbnailPhoto?.resolvedUrls
+  const creatorAvatarUrls = nft?.video.channel.avatarPhoto?.resolvedUrls
+  const { urls: ownerMemberAvatarUrls } = getMemberAvatar(
     nft?.owner.__typename === 'NftOwnerMember' ? nft.owner.member : null
   )
   const mdMatch = useMediaMatch('md')
@@ -282,8 +282,8 @@ export const NftPurchaseBottomDrawer: FC = () => {
     }
   }, [isOpen, setValue])
 
-  const { isLoadingAsset: userBidAvatarLoading, url: userBidAvatarUrl } = getMemberAvatar(userBid?.bidder)
-  const { isLoadingAsset: topBidderAvatarLoading, url: topBidderAvatarUrl } = getMemberAvatar(topBidder)
+  const { isLoadingAsset: userBidAvatarLoading, urls: userBidAvatarUrls } = getMemberAvatar(userBid?.bidder)
+  const { isLoadingAsset: topBidderAvatarLoading, urls: topBidderAvatarUrls } = getMemberAvatar(topBidder)
   const timeToUnlockSeconds = userBidUnlockDate ? differenceInSeconds(userBidUnlockDate, new Date()) : 0
 
   return (
@@ -317,13 +317,13 @@ export const NftPurchaseBottomDrawer: FC = () => {
             title={nft?.video.title}
             thumbnail={{
               loading: loading || !nft,
-              thumbnailUrl: thumbnailUrl,
+              thumbnailUrls: thumbnailUrls,
               type: 'video',
             }}
-            creator={{ name: nft?.video.channel.title, assetUrl: creatorAvatarUrl }}
+            creator={{ name: nft?.video.channel.title, assetUrls: creatorAvatarUrls }}
             owner={{
               name: (nft?.owner.__typename === 'NftOwnerMember' && nft.owner.member?.handle) || '',
-              assetUrl: ownerMemberAvatarUrl,
+              assetUrls: ownerMemberAvatarUrls,
             }}
             loading={loading}
             fullWidth={!mdMatch}
@@ -378,7 +378,7 @@ export const NftPurchaseBottomDrawer: FC = () => {
                           Top bid
                         </Text>
                         <FlexWrapper>
-                          <Avatar size={24} assetUrl={topBidderAvatarUrl} loading={topBidderAvatarLoading} />
+                          <Avatar size={24} assetUrls={topBidderAvatarUrls} loading={topBidderAvatarLoading} />
                           <TokenWrapper>
                             <StyledJoyTokenIcon variant="gray" size={24} />
                           </TokenWrapper>
@@ -399,7 +399,7 @@ export const NftPurchaseBottomDrawer: FC = () => {
                             Your Bid
                           </Text>
                           <FlexWrapper>
-                            <Avatar size={24} assetUrl={userBidAvatarUrl} loading={userBidAvatarLoading} />
+                            <Avatar size={24} assetUrls={userBidAvatarUrls} loading={userBidAvatarLoading} />
                             <TokenWrapper>
                               <StyledJoyTokenIcon variant="gray" size={24} />
                             </TokenWrapper>
@@ -531,7 +531,7 @@ export const NftPurchaseBottomDrawer: FC = () => {
                   Owner
                 </Text>
                 <PaymentSplitValues>
-                  <Avatar size={24} assetUrl={ownerMemberAvatarUrl} />
+                  <Avatar size={24} assetUrls={ownerMemberAvatarUrls} />
                   <Text as="span" variant="h400" color="colorText" margin={{ left: 2 }}>
                     {ownerRoyalty}%
                   </Text>
@@ -542,7 +542,7 @@ export const NftPurchaseBottomDrawer: FC = () => {
                   Creator
                 </Text>
                 <PaymentSplitValues>
-                  <Avatar size={24} assetUrl={creatorAvatarUrl} />
+                  <Avatar size={24} assetUrls={creatorAvatarUrls} />
                   <Text as="span" variant="h400" color="colorText" margin={{ left: 2 }}>
                     {creatorRoyalty}%
                   </Text>

packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/AcceptTerms/AcceptTerms.tsx

@@ -247,8 +247,8 @@ export const AcceptTerms: FC<AcceptTermsProps> = ({
 }
 
 export const MemberWithResolvedAvatar: FC<{ member: BasicMembershipFieldsFragment }> = ({ member }) => {
-  const { isLoadingAsset, url } = getMemberAvatar(member)
-  return <StyledOutputPill avatarUri={url} isLoadingAvatar={isLoadingAsset} handle={member.handle} withAvatar />
+  const { isLoadingAsset, urls } = getMemberAvatar(member)
+  return <StyledOutputPill avatarUrls={urls} isLoadingAvatar={isLoadingAsset} handle={member.handle} withAvatar />
 }
 
 export const TitleText: FC<PropsWithChildren> = ({ children }) => (

packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/NftForm.tsx

@@ -105,9 +105,9 @@ export const NftForm: FC<NftFormProps> = ({ setFormStatus, onSubmit, videoId })
 
   const { video, loading: loadingVideo } = useBasicVideo(videoId, { fetchPolicy: 'cache-only' })
 
-  const channelAvatarUrl = video?.channel.avatarPhoto?.resolvedUrl
-  const thumbnailPhotoUrl = video?.thumbnailPhoto?.resolvedUrl
-  const { url: memberAvatarUri } = getMemberAvatar(activeMembership)
+  const channelAvatarUrls = video?.channel.avatarPhoto?.resolvedUrls
+  const thumbnailPhotoUrls = video?.thumbnailPhoto?.resolvedUrls
+  const { urls: memberAvatarUris } = getMemberAvatar(activeMembership)
 
   const [openModal, closeModal] = useConfirmationModal()
 
@@ -302,10 +302,10 @@ export const NftForm: FC<NftFormProps> = ({ setFormStatus, onSubmit, videoId })
 
   const nftTileProps: NftTileProps = {
     status: getNftStatus(),
-    thumbnail: { thumbnailUrl: thumbnailPhotoUrl, type: 'video' },
+    thumbnail: { thumbnailUrls: thumbnailPhotoUrls, type: 'video' },
     title: video?.title,
-    owner: { assetUrl: memberAvatarUri, name: activeMembership?.handle },
-    creator: { assetUrl: channelAvatarUrl, name: video?.channel.title ?? '' },
+    owner: { assetUrls: memberAvatarUris, name: activeMembership?.handle },
+    creator: { assetUrls: channelAvatarUrls, name: video?.channel.title ?? '' },
     loading: loadingVideo,
     duration: video?.duration,
     views: video?.viewsNum,

packages/atlas/src/views/global/NftSettlementBottomDrawer/NftSettlementBottomDrawer.tsx

@@ -31,9 +31,9 @@ export const NftSettlementBottomDrawer: FC = () => {
   const { nft, loading, refetch } = useNft(currentNftId || '')
 
   const { displaySnackbar } = useSnackbar()
-  const thumbnailUrl = nft?.video.thumbnailPhoto?.resolvedUrl
-  const avatarUrl = nft?.video.channel.avatarPhoto?.resolvedUrl
-  const { url: memberAvatarUrl } = getMemberAvatar(
+  const thumbnailUrls = nft?.video.thumbnailPhoto?.resolvedUrls
+  const avatarUrls = nft?.video.channel.avatarPhoto?.resolvedUrls
+  const { urls: memberAvatarUrls } = getMemberAvatar(
     nft?.owner.__typename === 'NftOwnerMember' && nft.owner.member ? nft.owner.member : null
   )
 
@@ -76,13 +76,13 @@ export const NftSettlementBottomDrawer: FC = () => {
               title={nft?.video.title}
               thumbnail={{
                 loading: loading,
-                thumbnailUrl: thumbnailUrl,
+                thumbnailUrls: thumbnailUrls,
                 type: 'video',
               }}
-              creator={{ name: nft?.video.channel.title, assetUrl: avatarUrl }}
+              creator={{ name: nft?.video.channel.title, assetUrls: avatarUrls }}
               owner={{
                 name: (nft?.owner.__typename === 'NftOwnerMember' && nft.owner.member?.handle) || '',
-                assetUrl: memberAvatarUrl,
+                assetUrls: memberAvatarUrls,
               }}
               fullWidth
               loading={loading}