expo-live-activity 0.4.3-alpha1 → 0.5.0-alpha1

package/ios-files/LiveActivityMediumView.swift

@@ -0,0 +1,127 @@
+import SwiftUI
+import WidgetKit
+
+struct LiveActivityMediumView: View {
+  let contentState: LiveActivityAttributes.ContentState
+  let attributes: LiveActivityAttributes
+  @Binding var imageContainerSize: CGSize?
+  let alignedImage: (String, HorizontalAlignment, Bool) -> AnyView
+
+  private var hasImage: Bool {
+    contentState.imageName != nil
+  }
+
+  private var isLeftImage: Bool {
+    (attributes.imagePosition ?? "right").hasPrefix("left")
+  }
+
+  private var isStretch: Bool {
+    (attributes.imagePosition ?? "right").contains("Stretch")
+  }
+
+  private var effectiveStretch: Bool {
+    isStretch && hasImage
+  }
+
+  private var progressViewTint: Color? {
+    attributes.progressViewTint.map { Color(hex: $0) }
+  }
+
+  var body: some View {
+    let padding = attributes.resolvedPadding(defaultPadding: 24)
+
+    let _ = contentState.logSegmentedProgressWarningIfNeeded()
+
+    VStack(alignment: .leading) {
+      HStack(alignment: .center) {
+        if hasImage, isLeftImage {
+          if let imageName = contentState.imageName {
+            alignedImage(imageName, .leading, false)
+          }
+        }
+
+        VStack(alignment: .leading, spacing: 2) {
+          Text(contentState.title)
+            .font(.title2)
+            .fontWeight(.semibold)
+            .modifier(ConditionalForegroundViewModifier(color: attributes.titleColor))
+
+          if let subtitle = contentState.subtitle {
+            Text(subtitle)
+              .font(.title3)
+              .modifier(ConditionalForegroundViewModifier(color: attributes.subtitleColor))
+          }
+
+          if effectiveStretch {
+            if contentState.hasSegmentedProgress,
+               let currentStep = contentState.currentStep,
+               let totalSteps = contentState.totalSteps,
+               totalSteps > 0
+            {
+              SegmentedProgressView(
+                currentStep: currentStep,
+                totalSteps: totalSteps,
+                activeColor: attributes.segmentActiveColor,
+                inactiveColor: attributes.segmentInactiveColor
+              )
+            } else if let startDate = contentState.elapsedTimerStartDateInMilliseconds {
+              ElapsedTimerText(
+                startTimeMilliseconds: startDate,
+                color: attributes.progressViewLabelColor.map { Color(hex: $0) }
+              )
+              .font(.title3)
+              .fontWeight(.medium)
+            } else if let date = contentState.timerEndDateInMilliseconds {
+              ProgressView(timerInterval: Date.toTimerInterval(miliseconds: date))
+                .tint(progressViewTint)
+                .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
+            } else if let progress = contentState.progress {
+              ProgressView(value: progress)
+                .tint(progressViewTint)
+                .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
+            }
+          }
+        }.layoutPriority(1)
+
+        if hasImage, !isLeftImage {
+          if let imageName = contentState.imageName {
+            alignedImage(imageName, .trailing, false)
+          }
+        }
+      }
+
+      if !effectiveStretch {
+        if contentState.hasSegmentedProgress,
+           let currentStep = contentState.currentStep,
+           let totalSteps = contentState.totalSteps,
+           totalSteps > 0
+        {
+          SegmentedProgressView(
+            currentStep: currentStep,
+            totalSteps: totalSteps,
+            activeColor: attributes.segmentActiveColor,
+            inactiveColor: attributes.segmentInactiveColor
+          )
+        } else if let startDate = contentState.elapsedTimerStartDateInMilliseconds {
+          ElapsedTimerText(
+            startTimeMilliseconds: startDate,
+            color: attributes.progressViewLabelColor.map { Color(hex: $0) }
+          )
+          .font(.title2)
+          .fontWeight(.semibold)
+          .frame(maxWidth: .infinity, alignment: .leading)
+          .padding(.top, 4)
+        } else if let date = contentState.timerEndDateInMilliseconds {
+          ProgressView(timerInterval: Date.toTimerInterval(miliseconds: date))
+            .tint(progressViewTint)
+            .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
+        } else if let progress = contentState.progress {
+          ProgressView(value: progress)
+            .tint(progressViewTint)
+            .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
+        }
+      }
+    }
+    .padding(padding)
+  }
+}

package/ios-files/LiveActivitySmallView.swift

@@ -0,0 +1,178 @@
+import SwiftUI
+import WidgetKit
+
+#if canImport(ActivityKit)
+  import ActivityKit
+
+  struct LiveActivitySmallView: View {
+    let contentState: LiveActivityAttributes.ContentState
+    let attributes: LiveActivityAttributes
+    @Binding var imageContainerSize: CGSize?
+    let alignedImage: (String, HorizontalAlignment, Bool) -> AnyView
+
+    // CarPlay Live Activity views don't have fixed dimensions (unlike Apple Watch),
+    // because the system may scale them to fit the vehicle display.
+    // These thresholds are derived from the CarPlay live activities test sizes listed in the documentation.
+    private let carPlayWidthThreshold: CGFloat = 200
+    private let carPlayTallHeightThreshold: CGFloat = 90
+
+    private var resolvedImageName: String? {
+      contentState.smallImageName ?? contentState.imageName
+    }
+
+    private var hasImage: Bool {
+      resolvedImageName != nil
+    }
+
+    private var isLeftImage: Bool {
+      (attributes.imagePosition ?? "right").hasPrefix("left")
+    }
+
+    private var progressViewTint: Color? {
+      attributes.progressViewTint.map { Color(hex: $0) }
+    }
+
+    private var isSubtitleDisplayed: Bool {
+      contentState.subtitle != nil
+    }
+
+    private var isTimerShownAsText: Bool {
+      attributes.timerType == .digital && contentState.timerEndDateInMilliseconds != nil
+    }
+
+    private var shouldShowProgressBar: Bool {
+      let hasProgress = contentState.progress != nil
+      let hasTimer = contentState.timerEndDateInMilliseconds != nil
+      return hasProgress || (hasTimer && !isSubtitleDisplayed && !isTimerShownAsText) || contentState.hasSegmentedProgress
+    }
+
+    var body: some View {
+      GeometryReader { proxy in
+        let w = proxy.size.width
+        let h = proxy.size.height
+
+        let carPlayView = w > carPlayWidthThreshold
+        let carPlayTallView = carPlayView && h > carPlayTallHeightThreshold
+
+        let padding = attributes.resolvedPadding(defaultPadding: carPlayView ? 14 : 8)
+
+        let fixedImageSize: CGFloat = carPlayView ? 28 : 23
+
+        let _ = contentState.logSegmentedProgressWarningIfNeeded()
+
+        VStack(alignment: .leading, spacing: 4) {
+          VStack(alignment: .leading, spacing: shouldShowProgressBar ? 0 : nil) {
+            HStack(alignment: .center, spacing: 8) {
+              if hasImage, isLeftImage, !isTimerShownAsText, let imageName = resolvedImageName {
+                if carPlayView, !carPlayTallView {
+                  fixedSizeImage(name: imageName, size: fixedImageSize)
+                  Spacer()
+                } else {
+                  alignedImage(imageName, .leading, true)
+                }
+              }
+
+              VStack(alignment: .leading, spacing: 0) {
+                Text(contentState.title)
+                  .font(carPlayView
+                    ? (isSubtitleDisplayed || contentState.hasSegmentedProgress ? .body : .footnote)
+                    : (isSubtitleDisplayed ? .footnote : .callout))
+                  .fontWeight(.semibold)
+                  .lineLimit(1)
+                  .modifier(ConditionalForegroundViewModifier(color: attributes.titleColor))
+
+                if let subtitle = contentState.subtitle, !(carPlayView && !carPlayTallView) {
+                  Text(subtitle)
+                    .font(carPlayView ? .body : .footnote)
+                    .fontWeight(.semibold)
+                    .lineLimit(1)
+                    .modifier(ConditionalForegroundViewModifier(color: attributes.subtitleColor))
+                }
+
+                if let startDate = contentState.elapsedTimerStartDateInMilliseconds {
+                  ElapsedTimerText(
+                    startTimeMilliseconds: startDate,
+                    color: attributes.progressViewLabelColor.map { Color(hex: $0) }
+                  )
+                  .font(carPlayView
+                    ? (isSubtitleDisplayed ? .footnote : .title2)
+                    : (isSubtitleDisplayed ? .footnote : .callout))
+                  .fontWeight(carPlayView && !isSubtitleDisplayed ? .semibold : .medium)
+                  .padding(.top, isSubtitleDisplayed ? 3 : 0)
+                } else if let date = contentState.timerEndDateInMilliseconds, !isTimerShownAsText, !(carPlayView && isSubtitleDisplayed) {
+                  smallTimerText(endDate: date, isSubtitleDisplayed: isSubtitleDisplayed, carPlayView: carPlayView, labelColor: attributes.progressViewLabelColor)
+                }
+              }
+              .layoutPriority(1)
+
+              if hasImage, !isLeftImage, !isTimerShownAsText, let imageName = resolvedImageName {
+                if carPlayView, !carPlayTallView {
+                  Spacer()
+                  fixedSizeImage(name: imageName, size: fixedImageSize)
+                } else {
+                  alignedImage(imageName, .trailing, true)
+                }
+              }
+            }
+            if isTimerShownAsText, let date = contentState.timerEndDateInMilliseconds {
+              HStack {
+                if let imageName = resolvedImageName, hasImage, isLeftImage {
+                  fixedSizeImage(name: imageName, size: fixedImageSize)
+                  Spacer()
+                }
+                smallTimerText(endDate: date, isSubtitleDisplayed: false, carPlayView: carPlayView, labelColor: attributes.progressViewLabelColor).frame(maxWidth: .infinity, alignment: isLeftImage ? .trailing : .leading)
+                if let imageName = resolvedImageName, hasImage, !isLeftImage {
+                  Spacer()
+                  fixedSizeImage(name: imageName, size: fixedImageSize)
+                }
+              }
+              .frame(maxWidth: .infinity)
+            } else {
+              if contentState.hasSegmentedProgress,
+                 let currentStep = contentState.currentStep,
+                 let totalSteps = contentState.totalSteps,
+                 totalSteps > 0
+              {
+                SegmentedProgressView(
+                  currentStep: currentStep,
+                  totalSteps: totalSteps,
+                  activeColor: attributes.segmentActiveColor,
+                  inactiveColor: attributes.segmentInactiveColor,
+                  height: 6
+                ).padding(.bottom, 6)
+              } else if let progress = contentState.progress {
+                styledLinearProgressView(tint: progressViewTint, labelColor: attributes.progressViewLabelColor) {
+                  ProgressView(value: progress)
+                }
+              } else if let date = contentState.timerEndDateInMilliseconds, !isSubtitleDisplayed || carPlayView {
+                HStack(spacing: 4) {
+                  styledLinearProgressView(tint: progressViewTint, labelColor: attributes.progressViewLabelColor) {
+                    ProgressView(
+                      timerInterval: Date.toTimerInterval(miliseconds: date),
+                      countsDown: false,
+                      label: { EmptyView() },
+                      currentValueLabel: { EmptyView() }
+                    )
+                  }
+                  .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
+
+                  if carPlayView, isSubtitleDisplayed {
+                    Text(timerInterval: Date.toTimerInterval(miliseconds: date))
+                      .font(.footnote)
+                      .monospacedDigit()
+                      .lineLimit(1)
+                      .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
+                      .multilineTextAlignment(.trailing)
+                      .frame(maxWidth: 60, alignment: .trailing)
+                  }
+                }
+              }
+            }
+          }
+        }
+        .padding(padding)
+      }
+    }
+  }
+
+#endif

package/ios-files/LiveActivityView.swift

@@ -18,6 +18,8 @@ import WidgetKit
   struct DebugLog: View {
     #if DEBUG
       private let message: String
+
+      @discardableResult
       init(_ message: String) {
         self.message = message
         print(message)
@@ -29,11 +31,31 @@ import WidgetKit
           .foregroundStyle(.red)
       }
     #else
+      @discardableResult
       init(_: String) {}
       var body: some View { EmptyView() }
     #endif
   }
 
+  struct SegmentedProgressView: View {
+    let currentStep: Int
+    let totalSteps: Int
+    let activeColor: Color
+    let inactiveColor: Color
+    var height: CGFloat = 4
+
+    var body: some View {
+      let clampedCurrentStep = min(max(currentStep, 0), totalSteps)
+      HStack(spacing: 4) {
+        ForEach(0 ..< totalSteps, id: \.self) { index in
+          RoundedRectangle(cornerRadius: 2)
+            .fill(index < clampedCurrentStep ? activeColor : inactiveColor)
+            .frame(height: height)
+        }
+      }
+    }
+  }
+
   struct LiveActivityView: View {
     let contentState: LiveActivityAttributes.ContentState
     let attributes: LiveActivityAttributes
@@ -54,69 +76,142 @@ import WidgetKit
       }
     }
 
-    private func alignedImage(imageName: String, horizontalAlignment: HorizontalAlignment) -> some View {
-      let defaultHeight: CGFloat = 64
-      let defaultWidth: CGFloat = 64
+    private var hasImage: Bool {
+      contentState.imageName != nil
+    }
+
+    private var isLeftImage: Bool {
+      (attributes.imagePosition ?? "right").hasPrefix("left")
+    }
+
+    private var isStretch: Bool {
+      (attributes.imagePosition ?? "right").contains("Stretch")
+    }
+
+    var body: some View {
+      if #available(iOS 18.0, *) {
+        LiveActivityView_iOS18(
+          contentState: contentState,
+          attributes: attributes,
+          imageContainerSize: $imageContainerSize,
+          smallView: {
+            LiveActivitySmallView(
+              contentState: contentState,
+              attributes: attributes,
+              imageContainerSize: $imageContainerSize,
+              alignedImage: { imageName, horizontalAlignment, isSmallView in
+                AnyView(alignedImage(imageName: imageName, horizontalAlignment: horizontalAlignment, isSmallView: isSmallView))
+              }
+            )
+          },
+          mediumView: {
+            LiveActivityMediumView(
+              contentState: contentState,
+              attributes: attributes,
+              imageContainerSize: $imageContainerSize,
+              alignedImage: { imageName, horizontalAlignment, isSmallView in
+                AnyView(alignedImage(imageName: imageName, horizontalAlignment: horizontalAlignment, isSmallView: isSmallView))
+              }
+            )
+          }
+        )
+      } else {
+        // iOS 17: missing activityFamily in environment -> default to medium
+        LiveActivityMediumView(
+          contentState: contentState,
+          attributes: attributes,
+          imageContainerSize: $imageContainerSize,
+          alignedImage: { imageName, horizontalAlignment, isSmallView in
+            AnyView(alignedImage(imageName: imageName, horizontalAlignment: horizontalAlignment, isSmallView: isSmallView))
+          }
+        )
+      }
+    }
+
+    private func alignedImage(imageName: String, horizontalAlignment: HorizontalAlignment, isSmallView: Bool = false) -> some View {
+      let defaultHeight: CGFloat = isSmallView ? 28 : 64
+      let defaultWidth: CGFloat = isSmallView ? 28 : 64
       let containerHeight = imageContainerSize?.height
       let containerWidth = imageContainerSize?.width
-      let hasWidthConstraint = (attributes.imageWidthPercent != nil) || (attributes.imageWidth != nil)
+
+      // For small view, check small-specific dimensions first, then fall back to global
+      let imageWidth = isSmallView ? (attributes.smallImageWidth ?? attributes.imageWidth) : attributes.imageWidth
+      let imageHeight = isSmallView ? (attributes.smallImageHeight ?? attributes.imageHeight) : attributes.imageHeight
+      let imageWidthPercent = isSmallView ? (attributes.smallImageWidthPercent ?? attributes.imageWidthPercent) : attributes.imageWidthPercent
+      let imageHeightPercent = isSmallView ? (attributes.smallImageHeightPercent ?? attributes.imageHeightPercent) : attributes.imageHeightPercent
+
+      let hasWidthConstraint = (imageWidthPercent != nil) || (imageWidth != nil)
 
       let computedHeight: CGFloat? = {
-        if let percent = attributes.imageHeightPercent {
+        if let percent = imageHeightPercent {
           let clamped = min(max(percent, 0), 100) / 100.0
           // Use the row height as a base. Fallback to default when row height is not measured yet.
           let base = (containerHeight ?? defaultHeight)
           return base * clamped
-        } else if let size = attributes.imageHeight {
+        } else if let size = imageHeight {
           return CGFloat(size)
         } else if hasWidthConstraint {
           // Mimic CSS: when only width is set, keep height automatic to preserve aspect ratio
           return nil
         } else {
           // Mimic CSS: this works against CSS but provides a better default behavior.
-          // When no width/height is set, use a default size (64pt)
+          // When no width/height is set, use a default size (64 / 28pt)
           // Width will adjust automatically base on aspect ratio
           return defaultHeight
         }
       }()
 
       let computedWidth: CGFloat? = {
-        if let percent = attributes.imageWidthPercent {
+        if let percent = imageWidthPercent {
           let clamped = min(max(percent, 0), 100) / 100.0
           let base = (containerWidth ?? defaultWidth)
           return base * clamped
-        } else if let size = attributes.imageWidth {
+        } else if let size = imageWidth {
           return CGFloat(size)
         } else {
           return nil // Keep aspect fit based on height
         }
       }()
 
+      let resolvedHeight = computedHeight ?? defaultHeight
+
+      let resolvedWidth: CGFloat? = {
+        if let w = computedWidth { return w }
+
+        if let uiImage = UIImage.dynamic(assetNameOrPath: imageName) {
+          let h = max(uiImage.size.height, 1)
+          let ratio = uiImage.size.width / h
+          return resolvedHeight * ratio
+        }
+
+        return nil
+      }()
+
       return ZStack(alignment: .center) {
         Group {
           let fit = attributes.contentFit ?? "contain"
           switch fit {
           case "contain":
-            Image.dynamic(assetNameOrPath: imageName).resizable().scaledToFit().frame(width: computedWidth, height: computedHeight)
+            Image.dynamic(assetNameOrPath: imageName).resizable().scaledToFit().frame(width: resolvedWidth, height: resolvedHeight)
           case "fill":
             Image.dynamic(assetNameOrPath: imageName).resizable().frame(
-              width: computedWidth,
-              height: computedHeight
+              width: resolvedWidth,
+              height: resolvedHeight
             )
           case "none":
-            Image.dynamic(assetNameOrPath: imageName).renderingMode(.original).frame(width: computedWidth, height: computedHeight)
+            Image.dynamic(assetNameOrPath: imageName).renderingMode(.original).frame(width: resolvedWidth, height: resolvedHeight)
           case "scale-down":
             if let uiImage = UIImage.dynamic(assetNameOrPath: imageName) {
               // Determine the target box. When width/height are nil, we use image's intrinsic dimension for comparison.
-              let targetHeight = computedHeight ?? uiImage.size.height
-              let targetWidth = computedWidth ?? uiImage.size.width
+              let targetHeight = resolvedHeight
+              let targetWidth = resolvedWidth ?? uiImage.size.width
               let shouldScaleDown = uiImage.size.height > targetHeight || uiImage.size.width > targetWidth
 
               if shouldScaleDown {
                 Image(uiImage: uiImage)
                   .resizable()
                   .scaledToFit()
-                  .frame(width: computedWidth, height: computedHeight)
+                  .frame(width: resolvedWidth, height: resolvedHeight)
               } else {
                 Image(uiImage: uiImage)
                   .renderingMode(.original)
@@ -127,8 +222,8 @@ import WidgetKit
             }
           case "cover":
             Image.dynamic(assetNameOrPath: imageName).resizable().scaledToFill().frame(
-              width: computedWidth,
-              height: computedHeight
+              width: resolvedWidth,
+              height: resolvedHeight
             ).clipped()
           default:
             DebugLog("⚠️[ExpoLiveActivity] Unknown contentFit '\(fit)'")
@@ -153,97 +248,28 @@ import WidgetKit
         }
       )
     }
+  }
 
-    var body: some View {
-      let defaultPadding = 24
-
-      let top = CGFloat(
-        attributes.paddingDetails?.top
-          ?? attributes.paddingDetails?.vertical
-          ?? attributes.padding
-          ?? defaultPadding
-      )
-
-      let bottom = CGFloat(
-        attributes.paddingDetails?.bottom
-          ?? attributes.paddingDetails?.vertical
-          ?? attributes.padding
-          ?? defaultPadding
-      )
-
-      let leading = CGFloat(
-        attributes.paddingDetails?.left
-          ?? attributes.paddingDetails?.horizontal
-          ?? attributes.padding
-          ?? defaultPadding
-      )
-
-      let trailing = CGFloat(
-        attributes.paddingDetails?.right
-          ?? attributes.paddingDetails?.horizontal
-          ?? attributes.padding
-          ?? defaultPadding
-      )
-
-      VStack(alignment: .leading) {
-        let position = attributes.imagePosition ?? "right"
-        let isStretch = position.contains("Stretch")
-        let isLeftImage = position.hasPrefix("left")
-        let hasImage = contentState.imageName != nil
-        let effectiveStretch = isStretch && hasImage
-
-        HStack(alignment: .center) {
-          if hasImage, isLeftImage {
-            if let imageName = contentState.imageName {
-              alignedImage(imageName: imageName, horizontalAlignment: .leading)
-            }
-          }
-
-          VStack(alignment: .leading, spacing: 2) {
-            Text(contentState.title)
-              .font(.title2)
-              .fontWeight(.semibold)
-              .modifier(ConditionalForegroundViewModifier(color: attributes.titleColor))
-
-            if let subtitle = contentState.subtitle {
-              Text(subtitle)
-                .font(.title3)
-                .modifier(ConditionalForegroundViewModifier(color: attributes.subtitleColor))
-            }
+  @available(iOS 18.0, *)
+  private struct LiveActivityView_iOS18<Small: View, Medium: View>: View {
+    let contentState: LiveActivityAttributes.ContentState
+    let attributes: LiveActivityAttributes
+    @Binding var imageContainerSize: CGSize?
 
-            if effectiveStretch {
-              if let date = contentState.timerEndDateInMilliseconds {
-                ProgressView(timerInterval: Date.toTimerInterval(miliseconds: date))
-                  .tint(progressViewTint)
-                  .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
-              } else if let progress = contentState.progress {
-                ProgressView(value: progress)
-                  .tint(progressViewTint)
-                  .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
-              }
-            }
-          }.layoutPriority(1)
+    let smallView: () -> Small
+    let mediumView: () -> Medium
 
-          if hasImage, !isLeftImage { // right side (default)
-            if let imageName = contentState.imageName {
-              alignedImage(imageName: imageName, horizontalAlignment: .trailing)
-            }
-          }
-        }
+    @Environment(\.activityFamily) private var activityFamily
 
-        if !effectiveStretch {
-          if let date = contentState.timerEndDateInMilliseconds {
-            ProgressView(timerInterval: Date.toTimerInterval(miliseconds: date))
-              .tint(progressViewTint)
-              .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
-          } else if let progress = contentState.progress {
-            ProgressView(value: progress)
-              .tint(progressViewTint)
-              .modifier(ConditionalForegroundViewModifier(color: attributes.progressViewLabelColor))
-          }
-        }
+    var body: some View {
+      switch activityFamily {
+      case .small:
+        smallView()
+      case .medium:
+        mediumView()
+      @unknown default:
+        mediumView()
       }
-      .padding(EdgeInsets(top: top, leading: leading, bottom: bottom, trailing: trailing))
     }
   }