Playback 2024: Loading and Error screens

PocketCastsTests/Tests/End of Year/StoriesModelTests.swift

@@ -153,6 +153,8 @@ class StoriesModelTests: XCTestCase {
 class MockStoriesDataSource: StoriesDataSource {
     var indicatorColor: Color = .white
 
+    var primaryBackgroundColor: Color = .black
+
     var numberOfStories: Int = 2
 
     var didCallStoryForWithStoryNumber: Int?
@@ -196,6 +198,8 @@ class MockStoriesDataSource: StoriesDataSource {
 class MockStoriesWithPlusDataSource: StoriesDataSource {
     var indicatorColor: Color = .white
 
+    var primaryBackgroundColor: Color = .black
+
     var numberOfStories: Int = 4
 
     var didCallStoryForWithStoryNumber: Int?

podcasts/End of Year/End of Year 2023/EndOfYear2023StoriesModel.swift

@@ -11,6 +11,10 @@ class EndOfYear2023StoriesModel: StoryModel {
         .white
     }
 
+    var primaryBackgroundColor: Color {
+        .black
+    }
+
     required init() {}
 
     func populate(with dataManager: DataManager) {

podcasts/End of Year/End of Year 2024/EndOfYear2024StoriesModel.swift

@@ -11,6 +11,10 @@ class EndOfYear2024StoriesModel: StoryModel {
         .black
     }
 
+    var primaryBackgroundColor: Color {
+        Color(hex: "EE661C")
+    }
+
     required init() { }
 
     func populate(with dataManager: DataManager) {

podcasts/End of Year/EndOfYearStoriesBuilder.swift

@@ -60,4 +60,5 @@ protocol StoryModel {
     /// Shown at the bottom of the story as an additional safe area
     func footerShareView() -> AnyView?
     var indicatorColor: Color { get }
+    var primaryBackgroundColor: Color { get }
 }

podcasts/End of Year/Stories/2024/Top5Podcasts2024Story.swift

@@ -42,7 +42,7 @@ struct Top5Podcasts2024Story: ShareableStory {
                 .disabled(!isSmallScreen) // Disable scrolling on larger where we shouldn't be clipping.
                 .frame(height: geometry.size.height * 0.65)
 
-                Text("And you were big on these shows too!")
+                Text(L10n.eoyStoryTopPodcastsTitle)
                     .font(.system(size: 30, weight: .bold))
             }
             .padding()

podcasts/End of Year/Stories/EndOfYearStoriesDataSource.swift

@@ -55,6 +55,10 @@ class EndOfYearStoriesDataSource: StoriesDataSource {
     var indicatorColor: Color {
         model.indicatorColor
     }
+
+    var primaryBackgroundColor: Color {
+        model.primaryBackgroundColor
+    }
 }
 
 extension Array where Element: CaseIterable & Equatable {

podcasts/End of Year/StoriesDataSource.swift

@@ -38,7 +38,11 @@ protocol StoriesDataSource {
     /// Shown at the bottom of the story as an additional safe area
     func footerShareView() -> AnyView?
 
+    /// Color of the top Story progress indicator
     var indicatorColor: Color { get }
+
+    /// Color of the primary background
+    var primaryBackgroundColor: Color { get }
 }
 
 extension StoriesDataSource {

podcasts/End of Year/StoriesModel.swift

@@ -69,7 +69,7 @@ class StoriesModel: ObservableObject {
 
     func start() {
         cancellable = publisher.autoconnect().sink(receiveValue: { _ in
-            guard self.numberOfStories > 0 else {
+            guard self.currentStory != nil, self.numberOfStories > 0 else {
                 return
             }
 
@@ -250,6 +250,10 @@ class StoriesModel: ObservableObject {
     var indicatorColor: Color {
         dataSource.indicatorColor
     }
+
+    var primaryBackgroundColor: Color {
+        dataSource.primaryBackgroundColor
+    }
 }
 
 private extension StoriesModel {

podcasts/End of Year/Views/StoriesView.swift

@@ -98,28 +98,30 @@ struct StoriesView: View {
 
             VStack(spacing: 15) {
                 let progress = syncProgressModel.progress
-                CircularProgressView(value: progress, stroke: Color.white, strokeWidth: 6)
+                CircularProgressView(value: progress, stroke: model.indicatorColor, strokeWidth: 6)
                     .frame(width: 40, height: 40)
                 Text(L10n.loading)
-                    .foregroundColor(.white)
+                    .foregroundColor(model.indicatorColor)
                     .font(style: .body)
             }
 
             storySwitcher
             header
         }
+        .background(model.primaryBackgroundColor)
     }
 
     var failed: some View {
         ZStack {
             Spacer()
 
             Text(L10n.eoyStoriesFailed)
-                .foregroundColor(.white)
+                .foregroundColor(model.indicatorColor)
 
             storySwitcher
             header
         }
+        .background(model.primaryBackgroundColor)
         .onAppear {
             Analytics.track(.endOfYearStoriesFailedToLoad)
         }