expo-live-activity 0.4.2 → 0.5.0-alpha1

package/ios-files/LiveActivityHelpers.swift

@@ -0,0 +1,58 @@
+import SwiftUI
+import WidgetKit
+
+extension LiveActivityAttributes.ContentState {
+  var hasSegmentedProgress: Bool {
+    currentStep != nil && (totalSteps ?? 0) > 0
+  }
+
+  func logSegmentedProgressWarningIfNeeded() {
+    #if DEBUG
+      if hasSegmentedProgress,
+         elapsedTimerStartDateInMilliseconds != nil
+         || timerEndDateInMilliseconds != nil
+         || progress != nil
+      {
+        DebugLog("⚠️[ExpoLiveActivity] Both segmented and regular progress provided; showing segmented")
+      }
+    #endif
+  }
+}
+
+extension LiveActivityAttributes {
+  var segmentActiveColor: Color {
+    progressSegmentActiveColor.map { Color(hex: $0) } ?? Color.blue
+  }
+
+  var segmentInactiveColor: Color {
+    progressSegmentInactiveColor.map { Color(hex: $0) } ?? Color.gray.opacity(0.3)
+  }
+
+  func resolvedPadding(defaultPadding: Int) -> EdgeInsets {
+    let top = CGFloat(
+      paddingDetails?.top
+        ?? paddingDetails?.vertical
+        ?? padding
+        ?? defaultPadding
+    )
+    let bottom = CGFloat(
+      paddingDetails?.bottom
+        ?? paddingDetails?.vertical
+        ?? padding
+        ?? defaultPadding
+    )
+    let leading = CGFloat(
+      paddingDetails?.left
+        ?? paddingDetails?.horizontal
+        ?? padding
+        ?? defaultPadding
+    )
+    let trailing = CGFloat(
+      paddingDetails?.right
+        ?? paddingDetails?.horizontal
+        ?? padding
+        ?? defaultPadding
+    )
+    return EdgeInsets(top: top, leading: leading, bottom: bottom, trailing: trailing)
+  }
+}

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