@app-brew/brewery 1.0.0

package/src/state/src/lib/splash.ts

@@ -0,0 +1,497 @@
+import { StoreSlice } from './types'
+import { ConfigSlice } from './config'
+import { navigationRef } from './route'
+import { LocalStorage } from '@gauntlet/local-storage'
+import {
+  deleteFile,
+  downloadFile,
+  fileExists,
+  getAppId,
+  getCachesDirectoryPath,
+  hideNativeSplash,
+} from './splash-platform'
+const DEFAULT_MIN_DISPLAY_TIME_MS = 3000
+const NAVIGATION_READY_FALLBACK_TIMEOUT_MS = 5000
+const MAX_VIDEO_TIMEOUT_MS = 20000 // Maximum time to wait for video to end (safety net)
+const HEAD_REQUEST_TIMEOUT_MS = 5000 // Max time to wait for HEAD request before skipping splash
+const SPLASH_CACHE_ETAG_KEY = 'splash-media-etag'
+const SPLASH_CACHE_PATH_KEY = 'splash-media-path'
+
+const localStorage = LocalStorage.getInstance()
+
+const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'webp', 'gif']
+
+export interface SplashState {
+  visible: boolean
+  navigationReady: boolean
+  startTime: number | null
+  minDisplayTimeMs: number
+  mediaMimetype: 'video' | 'image' | null
+  cachedMediaPath: string | null
+  previewMediaUrl: string | null
+  previewPosterUrl: string | null
+  videoHasAudio: boolean
+  waitingForVideoEnd: boolean
+  initInProgress: boolean // True while splash.init() is running (HEAD request in progress)
+}
+
+export interface SplashActions {
+  init: () => Promise<void>
+  previewLaunchScreen: (filename: string) => Promise<void>
+  setNavigationReady: () => void
+  notifyRendering: () => void
+  notifyVideoEnded: () => void
+  hide: () => void
+}
+
+export interface SplashSlice {
+  splash: SplashActions & SplashState
+}
+
+async function headRequest(
+  url: string
+): Promise<{ status: number; headers: Record<string, string> | null }> {
+  try {
+    const response = await fetch(url, {
+      method: 'HEAD',
+    })
+
+    // Convert headers iterator to a normal object
+    const headers: Record<string, string> = {}
+    response.headers.forEach((value: string, key: string) => {
+      headers[key] = value
+    })
+
+    return {
+      status: response.status,
+      headers: response.ok ? headers : null,
+    }
+  } catch (err) {
+    console.error('HEAD request error:', err)
+    return {
+      status: 0,
+      headers: null,
+    }
+  }
+}
+
+/**
+ * Gets the file extension based on content type
+ */
+function getFileExtension(contentType: string | undefined): string {
+  if (!contentType) return ''
+  const mimeToExt: Record<string, string> = {
+    'video/mp4': '.mp4',
+    'video/quicktime': '.mov',
+    'video/webm': '.webm',
+    'image/png': '.png',
+    'image/jpeg': '.jpg',
+    'image/jpg': '.jpg',
+    'image/gif': '.gif',
+    'image/webp': '.webp',
+  }
+  return mimeToExt[contentType.toLowerCase()] || ''
+}
+
+/**
+ * Gets the cached splash media path and validates it
+ * Returns null if cache is invalid or doesn't match the etag
+ */
+async function getCachedMediaPath(etag: string | null): Promise<string | null> {
+  if (!etag) return null
+
+  const cachedEtag = localStorage.getString(SPLASH_CACHE_ETAG_KEY)
+  const cachedPath = localStorage.getString(SPLASH_CACHE_PATH_KEY)
+
+  if (cachedEtag === etag && cachedPath) {
+    // Verify the cached file still exists
+    const mediaExists = await fileExists(cachedPath)
+
+    if (mediaExists) {
+      return cachedPath
+    }
+    // File doesn't exist, clear cache
+    localStorage.delete(SPLASH_CACHE_ETAG_KEY)
+    localStorage.delete(SPLASH_CACHE_PATH_KEY)
+  }
+
+  return null
+}
+
+/**
+ * Downloads and caches the splash media file
+ */
+async function downloadAndCacheMedia(
+  url: string,
+  etag: string,
+  contentType: string | undefined
+): Promise<string | null> {
+  try {
+    const ext = getFileExtension(contentType)
+    const fileName = `splash-media${ext}`
+    const destPath = `${getCachesDirectoryPath()}/${fileName}`
+
+    // Delete old cached file if exists
+    const oldPath = localStorage.getString(SPLASH_CACHE_PATH_KEY)
+    if (oldPath) {
+      const oldExists = await fileExists(oldPath)
+      if (oldExists) {
+        await deleteFile(oldPath)
+      }
+    }
+
+    // Download the file
+    const downloadResult = await downloadFile(url, destPath)
+
+    if (downloadResult.statusCode === 200) {
+      // Save cache metadata
+      localStorage.set(SPLASH_CACHE_ETAG_KEY, etag)
+      localStorage.set(SPLASH_CACHE_PATH_KEY, destPath)
+      return destPath
+    }
+
+    return null
+  } catch (error) {
+    console.log('Failed to download and cache splash media:', error)
+    return null
+  }
+}
+
+export const createSplashSlice: StoreSlice<
+  SplashSlice,
+  SplashSlice & ConfigSlice
+> = (set, get) => {
+  let minDisplayTimer: ReturnType<typeof setTimeout> | null = null
+  let navigationReadyTimer: ReturnType<typeof setTimeout> | null = null
+  let navigationReadyFallbackTimer: ReturnType<typeof setTimeout> | null = null
+  let videoTimeoutTimer: ReturnType<typeof setTimeout> | null = null
+
+  const clearAllTimers = () => {
+    if (minDisplayTimer) {
+      clearTimeout(minDisplayTimer)
+      minDisplayTimer = null
+    }
+    if (navigationReadyTimer) {
+      clearTimeout(navigationReadyTimer)
+      navigationReadyTimer = null
+    }
+    if (videoTimeoutTimer) {
+      clearTimeout(videoTimeoutTimer)
+      videoTimeoutTimer = null
+    }
+    if (navigationReadyFallbackTimer) {
+      clearTimeout(navigationReadyFallbackTimer)
+      navigationReadyFallbackTimer = null
+    }
+  }
+
+  const hideSplashIfReady = () => {
+    const state = get().splash
+    if (state.visible && state.navigationReady && state.startTime) {
+      // For videos, wait for the video to end (don't rely on timer)
+      if (state.waitingForVideoEnd) {
+        return
+      }
+
+      const minDisplayTime = state.minDisplayTimeMs
+      const elapsed = Date.now() - state.startTime
+
+      if (elapsed >= minDisplayTime) {
+        set((state) => {
+          state.splash.visible = false
+        })
+        clearAllTimers()
+      }
+    }
+  }
+
+  const showSplash = ({
+    mediaMimetype,
+    mediaPath,
+    minDisplayTime,
+    videoHasAudio,
+    previewMediaUrl,
+    previewPosterUrl,
+  }: {
+    mediaMimetype: 'video' | 'image' | null
+    mediaPath: string | null
+    minDisplayTime: number
+    videoHasAudio: boolean
+    previewMediaUrl?: string | null
+    previewPosterUrl?: string | null
+  }) => {
+    // Check if navigation is already ready before initializing splash
+    const isNavigationAlreadyReady = navigationRef.isReady()
+
+    // Start fallback timer BEFORE setting visible = true
+    // This ensures the timer exists when notifyRendering() is called
+    // (Zustand's set() triggers synchronous re-render, so useLayoutEffect
+    // in SecondarySplashScreen runs before code after set() executes)
+    // This timer is ONLY cleared by notifyRendering() when SecondarySplashScreen renders
+    navigationReadyFallbackTimer = setTimeout(() => {
+      console.log('Splash screen fallback: hiding after 5s timeout')
+      hideNativeSplash()
+
+      const state = get().splash
+      if (state.visible) {
+        get().splash.hide()
+      }
+    }, NAVIGATION_READY_FALLBACK_TIMEOUT_MS)
+
+    // Set visible = true (this triggers synchronous re-render)
+    set((state) => {
+      state.splash.visible = true
+      state.splash.startTime = Date.now()
+      state.splash.navigationReady = isNavigationAlreadyReady
+      state.splash.minDisplayTimeMs = minDisplayTime
+      state.splash.mediaMimetype = mediaMimetype
+      state.splash.cachedMediaPath = mediaPath
+      state.splash.previewMediaUrl = previewMediaUrl ?? null
+      state.splash.previewPosterUrl = previewPosterUrl ?? null
+      state.splash.videoHasAudio = videoHasAudio
+      // For videos, wait for the video to end instead of relying on timer
+      state.splash.waitingForVideoEnd = mediaMimetype === 'video'
+      state.splash.initInProgress = false
+    })
+
+    // Set minimum display time timer (for images) since for videos hidesplashIfReady will return early and not hide the splash
+    minDisplayTimer = setTimeout(() => {
+      hideSplashIfReady()
+    }, minDisplayTime)
+
+    // For videos, set a maximum timeout as a safety net
+    // This ensures the splash is hidden even if the video never ends (corrupted, etc.)
+    if (mediaMimetype === 'video') {
+      videoTimeoutTimer = setTimeout(() => {
+        console.log('Video splash timeout: hiding after max timeout')
+        const state = get().splash
+        if (state.visible && state.waitingForVideoEnd) {
+          get().splash.notifyVideoEnded()
+        }
+      }, MAX_VIDEO_TIMEOUT_MS)
+    }
+
+    // Re-check if navigation became ready while we were doing async operations
+    // This handles the race condition where setNavigationReady was called
+    // before we set visible=true, causing it to return early
+    if (!isNavigationAlreadyReady && navigationRef.isReady()) {
+      get().splash.setNavigationReady()
+    }
+  }
+
+  return {
+    splash: {
+      visible: false,
+      navigationReady: false,
+      startTime: null,
+      minDisplayTimeMs: DEFAULT_MIN_DISPLAY_TIME_MS,
+      mediaMimetype: null,
+      cachedMediaPath: null,
+      previewMediaUrl: null,
+      previewPosterUrl: null,
+      videoHasAudio: false,
+      waitingForVideoEnd: false,
+      // Default to true - splash.init() will set to false when complete
+      // This prevents race conditions where navigation becomes ready before splash.init() starts
+      // and native splash used to get hidden before the headRequest completes
+      initInProgress: true,
+      init: async () => {
+        // If a preview is already showing, don't override it with the default splash
+        if (get().splash.previewMediaUrl) return
+
+        // initInProgress is already true by default, no need to set it here
+        // Clear any existing timers before creating new ones
+        clearAllTimers()
+
+        try {
+          const mediaUrl = `https://assets.appbrew.tech/${getAppId()}/launch-screens/default`
+
+          // Race HEAD request against timeout - skip splash if HEAD takes too long
+          const headPromise = headRequest(mediaUrl)
+          const timeoutPromise: any = new Promise((resolve) =>
+            setTimeout(
+              () => resolve({ status: 0, headers: null }),
+              HEAD_REQUEST_TIMEOUT_MS
+            )
+          )
+
+          const { status, headers } = await Promise.race([
+            headPromise,
+            timeoutPromise,
+          ])
+
+          // If a preview started while we were waiting for HEAD, don't override it
+          if (get().splash.previewMediaUrl) return
+
+          if (status !== 200 || !headers || Object.keys(headers).length === 0) {
+            // No splash screen config found or timeout, don't show splash screen
+            set((state) => {
+              state.splash.initInProgress = false
+            })
+            return
+          }
+          // Extract duration from headers (in seconds) and convert to milliseconds
+          const durationSeconds = headers['x-amz-meta-splashduration']
+          const minDisplayTime = durationSeconds
+            ? parseInt(durationSeconds, 10) * 1000
+            : DEFAULT_MIN_DISPLAY_TIME_MS
+
+          // Extract mimetype from Content-Type header (e.g., "image/png" -> "image", "video/mp4" -> "video")
+          const contentType = headers['Content-Type'] || headers['content-type']
+          const mimetype = contentType?.split('/')[0] as
+            | 'video'
+            | 'image'
+            | null
+          const mediaMimetype =
+            mimetype === 'video' || mimetype === 'image' ? mimetype : null
+
+          // Check if video has audio (from S3 object metadata)
+          const videoHasAudio = headers['x-amz-meta-hasaudio'] === 'true'
+          // Extract ETag for caching
+          const etag = headers['ETag'] || headers['etag'] || null
+
+          // Check for cached media
+          const cachedMediaPath = await getCachedMediaPath(etag)
+
+          // If no cached version or ETag changed, download in background for NEXT launch
+          // Don't update state - this prevents re-render and double onLoadStart
+          if (!cachedMediaPath && etag) {
+            // Start download in background - cached file will be used on next app launch
+            downloadAndCacheMedia(mediaUrl, etag, contentType)
+          }
+
+          showSplash({
+            mediaMimetype,
+            mediaPath: cachedMediaPath,
+            minDisplayTime,
+            videoHasAudio,
+          })
+        } catch (error) {
+          // Silently fail - splash config is optional, don't show splash screen
+          console.log('Failed to initialize splash screen:', error)
+          set((state) => {
+            state.splash.initInProgress = false
+          })
+          return
+        }
+      },
+      previewLaunchScreen: async (filename: string) => {
+        try {
+          // Clear any active timers from a previous splash session (e.g. init() still running)
+          clearAllTimers()
+
+          const appId = getAppId()
+          const basePath = `https://assets.appbrew.tech/${appId}/launch-screens`
+
+          const ext = filename.split('.').pop()?.toLowerCase() || ''
+          const isImage = IMAGE_EXTENSIONS.includes(ext)
+          const mediaMimetype: 'video' | 'image' = isImage ? 'image' : 'video'
+
+          const mediaSrc = `${basePath}/${filename}`
+
+          let minDisplayTime = DEFAULT_MIN_DISPLAY_TIME_MS
+          let previewPosterUrl: string | null = null
+
+          // HEAD request for all media types to get actual splash duration
+          const { headers } = await headRequest(mediaSrc)
+          const durationSeconds = headers?.['x-amz-meta-splashduration']
+          if (durationSeconds) {
+            minDisplayTime = parseFloat(durationSeconds) * 1000
+          }
+          // Check if video has audio (from S3 object metadata)
+          const videoHasAudio = headers?.['x-amz-meta-hasaudio'] === 'true'
+
+          if (!isImage) {
+            const thumbnailFilename = filename.replace(/\.[^.]+$/, '.jpg')
+            previewPosterUrl = `${basePath}/thumbnails/${thumbnailFilename}`
+          }
+
+          // Pass null for cachedMediaPath (no local cache for preview),
+          // and mediaSrc as previewMediaUrl (remote URL used directly)
+          showSplash({
+            mediaMimetype,
+            mediaPath: null,
+            minDisplayTime,
+            videoHasAudio,
+            previewMediaUrl: mediaSrc,
+            previewPosterUrl,
+          })
+        } catch (error) {
+          console.log('Failed to preview launch screen:', error)
+        }
+      },
+      setNavigationReady: () => {
+        const state = get().splash
+        if (!state.visible) return
+
+        set((state) => {
+          state.splash.navigationReady = true
+        })
+
+        // For videos, wait for the video to end (don't rely on timer)
+        if (state.waitingForVideoEnd) {
+          return
+        }
+
+        // Check if minimum time has passed
+        const minDisplayTime = state.minDisplayTimeMs
+
+        if (state.startTime) {
+          const elapsed = Date.now() - state.startTime
+          if (elapsed >= minDisplayTime) {
+            // Minimum time has passed, hide immediately
+            set((state) => {
+              state.splash.visible = false
+            })
+            clearAllTimers()
+          } else {
+            // Clear any existing navigationReadyTimer before creating a new one
+            if (navigationReadyTimer) {
+              clearTimeout(navigationReadyTimer)
+              navigationReadyTimer = null
+            }
+            // Wait for remaining time
+            const remainingTime = minDisplayTime - elapsed
+            navigationReadyTimer = setTimeout(() => {
+              hideSplashIfReady()
+            }, remainingTime)
+          }
+        }
+      },
+      notifyRendering: () => {
+        // Called by SecondarySplashScreen when it starts rendering valid content
+        // This clears the fallback timer since the splash is now rendering properly
+        // and should follow the normal minDisplayTime logic instead
+        if (navigationReadyFallbackTimer) {
+          clearTimeout(navigationReadyFallbackTimer)
+          navigationReadyFallbackTimer = null
+        }
+      },
+      notifyVideoEnded: () => {
+        // Called by SecondarySplashScreen when the video finishes playing
+        // This allows us to hide the splash only after the full video has played
+        const state = get().splash
+        if (!state.visible || !state.waitingForVideoEnd) return
+
+        set((state) => {
+          state.splash.waitingForVideoEnd = false
+        })
+
+        // If navigation is ready, hide immediately
+        // Otherwise, it will be hidden when navigation becomes ready
+        if (state.navigationReady) {
+          set((state) => {
+            state.splash.visible = false
+          })
+          clearAllTimers()
+        }
+      },
+      hide: () => {
+        set((state) => {
+          state.splash.visible = false
+        })
+        clearAllTimers()
+      },
+    },
+  }
+}

package/src/state/src/lib/store.ts

@@ -0,0 +1,138 @@
+import { DiscountSlice, createDiscountSlice } from './discounts'
+import { SubscriptionSlice, createSubscriptionsSlice } from './subscriptions'
+import create from 'zustand'
+import { subscribeWithSelector } from 'zustand/middleware'
+import { immer } from 'zustand/middleware/immer'
+import { CartSlice, createCartSlice } from './cart'
+import { ConfigSlice, createConfigSlice } from './config'
+import { DeviceSlice, createDeviceSlice } from './device'
+import { createRouteSlice } from './route'
+import { CollectionSlice, createCollectionsSlice } from './collections'
+import { ProductSlice, createProductsSlice } from './products'
+import { AddressSlice, createAddressSlice } from './address'
+import { SearchSlice, createSearchSlice } from './search'
+import { RouteSlice } from './route'
+import { ModuleSlice, createModuleSlice } from './modules'
+import { UserSlice, createUserSlice } from './user'
+import { ModalSlice, createModalSlice } from './modal'
+import { RewardsSlice, createRewardsSlice } from './rewards'
+import { ConstantsSlice, createConstantsSlice } from './constants'
+import { GiftSlice, createGiftSlice } from './integrations/gift'
+import { PromotionsSlice, createPromotionsSlice } from './promotions'
+import { FilterSlice, createFilterSlice } from './filter'
+import { MetafieldSlice, createMetafieldSlice } from './metafield'
+import { ReviewSlice, createReviewSlice } from './integrations/review'
+import { RewardsProgramSlice, createRewardProgramSlice } from './reward-program'
+import { OrderDetailSlice, createOrderDetailSlice } from './order'
+import { GiftWrapSlice, createGiftWrapSlice } from './gift-wrap'
+import { BundleSlice, createBundleSlice } from './bundleV2'
+import {
+  CollectionMetafieldSlice,
+  createCollectionMetafieldSlice,
+} from './collection-metafields'
+import { WishlistSlice, createWishlistSlice } from './wishlist'
+import { LocalizationSlice, createLocalizationSlice } from './localization'
+import { SizingSlice, createSizingSlice } from './sizing-chart'
+import { ShopSlice, createShopSlice } from './shop'
+import {
+  EstimatedDeliveryDateSlice,
+  createEstimatedDeliveryDateSlice,
+} from './estimated-delivery-date'
+import { enableMapSet } from 'immer'
+import { AnalyticsSlice, createAnalyticsSlice } from './analytics'
+import { OrdersSlice, createOrdersSlice } from './orders'
+import { OnboardingSlice, createOnboardingSlice } from './onboarding'
+import { SplashSlice, createSplashSlice } from './splash'
+import { ScreenTemplateSlice, createScreenTemplateSlice } from './template'
+import { CheckoutSlice, createCheckoutSlice } from './checkout'
+import { ScreenSlice, createScreenSlice } from './screen'
+import {
+  UserNotificationsSlice,
+  createUserNotificationsSlice,
+} from './user-notifications'
+
+export type AppSlice = ConfigSlice &
+  DeviceSlice &
+  CartSlice &
+  RouteSlice &
+  CollectionSlice &
+  AddressSlice &
+  ProductSlice &
+  SearchSlice &
+  ModuleSlice &
+  UserSlice &
+  ModalSlice &
+  RewardsSlice &
+  ConstantsSlice &
+  GiftSlice &
+  PromotionsSlice &
+  FilterSlice &
+  MetafieldSlice &
+  ReviewSlice &
+  RewardsProgramSlice &
+  OrderDetailSlice &
+  GiftWrapSlice &
+  BundleSlice &
+  CollectionMetafieldSlice &
+  WishlistSlice &
+  LocalizationSlice &
+  SizingSlice &
+  ShopSlice &
+  EstimatedDeliveryDateSlice &
+  AnalyticsSlice &
+  OrdersSlice &
+  OnboardingSlice &
+  SplashSlice &
+  ScreenTemplateSlice &
+  SubscriptionSlice &
+  CheckoutSlice &
+  DiscountSlice &
+  ScreenSlice &
+  UserNotificationsSlice
+
+enableMapSet()
+
+export const useAppStore = create<AppSlice>()(
+  subscribeWithSelector(
+    immer((...a) => ({
+      ...createConfigSlice(...a),
+      ...createDeviceSlice(...a),
+      ...createCartSlice(...a),
+      ...createRouteSlice(...a),
+      ...createCollectionsSlice(...a),
+      ...createProductsSlice(...a),
+      ...createAddressSlice(...a),
+      ...createSearchSlice(...a),
+      ...createModuleSlice(...a),
+      ...createUserSlice(...a),
+      ...createModalSlice(...a),
+      ...createRewardsSlice(...a),
+      ...createConstantsSlice(...a),
+      ...createGiftSlice(...a),
+      ...createPromotionsSlice(...a),
+      ...createFilterSlice(...a),
+      ...createMetafieldSlice(...a),
+      ...createReviewSlice(...a),
+      ...createRewardProgramSlice(...a),
+      ...createOrderDetailSlice(...a),
+      ...createGiftWrapSlice(...a),
+      ...createBundleSlice(...a),
+      ...createCollectionMetafieldSlice(...a),
+      ...createWishlistSlice(...a),
+      ...createLocalizationSlice(...a),
+      ...createSizingSlice(...a),
+      ...createShopSlice(...a),
+      ...createEstimatedDeliveryDateSlice(...a),
+      ...createOrdersSlice(...a),
+      ...createAnalyticsSlice(...a),
+      ...createOnboardingSlice(...a),
+      ...createSplashSlice(...a),
+      ...createScreenTemplateSlice(...a),
+      ...createSubscriptionsSlice(...a),
+      ...createCheckoutSlice(...a),
+      ...createDiscountSlice(...a),
+      ...createUserNotificationsSlice(...a),
+      ...createScreenSlice(...a),
+    }))
+  )
+)