Add new Medium "Now Playing" widget

CHANGELOG.md

@@ -1,5 +1,6 @@
 7.72
 -----
+- Adds a medium size for the Now Playing widget [#1876](https://github.com/Automattic/pocket-casts-ios/pull/1876)
 - Fix playback when switching from iPhone speaker to other audio outputs with trim silence enabled [#2049](https://github.com/Automattic/pocket-casts-ios/issues/2049)
 - Fix keyboard shortcuts order for MainTabBarController [#1951](https://github.com/Automattic/pocket-casts-ios/issues/1951)
 - Update podcast list when episode is archived or marked as played from player [#1976](https://github.com/Automattic/pocket-casts-ios/issues/1976)

WidgetExtension/Common/ArtworkViews.swift

@@ -2,6 +2,7 @@ import SwiftUI
 
 struct LargeArtworkView: View {
     @State var imageData: Data?
+    var size: CGFloat = 74
 
     var showShadow: Bool = true
 
@@ -11,7 +12,7 @@ struct LargeArtworkView: View {
                 Rectangle()
                     .foregroundColor(Color.nowPlayingShadowColor)
                     .aspectRatio(1, contentMode: .fit)
-                    .frame(maxHeight: 74)
+                    .frame(maxHeight: size)
                     .cornerRadius(9)
                     .secondaryShadow()
             }
@@ -20,7 +21,7 @@ struct LargeArtworkView: View {
                 Image(uiImage: uiImage)
                     .resizable()
                     .aspectRatio(1, contentMode: .fit)
-                    .frame(maxHeight: 74)
+                    .frame(maxHeight: size)
                     .cornerRadius(8)
                     .if(showShadow) { view in
                         view.artworkShadow()
@@ -29,7 +30,7 @@ struct LargeArtworkView: View {
                 Image("no-podcast-artwork")
                     .resizable()
                     .aspectRatio(1, contentMode: .fit)
-                    .frame(maxHeight: 74)
+                    .frame(maxHeight: size)
                     .cornerRadius(8)
                     .if(showShadow) { view in
                         view.artworkShadow()

WidgetExtension/Common/CommonWidgetHelper.swift

@@ -4,6 +4,8 @@ import UIKit
 
 class CommonWidgetHelper {
     static let appGroupId = "group.au.com.shiftyjelly.pocketcasts"
+    static let iconSize: CGFloat = 28
+
     class func loadAppIconName() -> String {
         guard let sharedDefaults = UserDefaults(suiteName: SharedConstants.GroupUserDefaults.groupContainerId), let appIcon = sharedDefaults.object(forKey: SharedConstants.GroupUserDefaults.appIcon) as? String else {
             return "AppIcon-Default"

WidgetExtension/Now Playing/NowPlayingEntryView.swift

@@ -6,6 +6,7 @@ struct NowPlayingWidgetEntryView: View {
     @State var entry: NowPlayingProvider.Entry
 
     @Environment(\.showsWidgetContainerBackground) var showsWidgetBackground
+    @Environment(\.widgetFamily) var family
 
     @Environment(\.colorScheme) var colorScheme
     var widgetColorSchemeLight: PCWidgetColorScheme
@@ -18,50 +19,118 @@ struct NowPlayingWidgetEntryView: View {
 
     var body: some View {
         if let playingEpisode = entry.episode {
-            ZStack {
-                if showsWidgetBackground {
-                    Rectangle().fill(widgetColorScheme.bottomBackgroundColor)
+            switch family {
+            case .systemSmall:
+                smallWidget(playingEpisode: playingEpisode)
+            default:
+                mediumWidget(playingEpisode: playingEpisode)
+            }
+        }
+        else if !showsWidgetBackground {
+            nothingPlaying
+        }
+        else {
+            switch family {
+            case .systemSmall:
+                ZStack {
+                    Image(CommonWidgetHelper.loadAppIconName())
+                        .resizable()
                 }
+                .widgetURL(URL(string: "pktc://last_opened"))
+                .clearBackground()
+            default:
+                nothingPlayingMedium
+            }
+        }
+    }
+
+    private func smallWidget(playingEpisode: WidgetEpisode) -> some View {
+        ZStack {
+            if showsWidgetBackground {
+                Rectangle().fill(widgetColorScheme.bottomBackgroundColor)
+            }
+            VStack(alignment: .leading, spacing: 10) {
+                smallArtwork(playingEpisode: playingEpisode)
+
+                episodeTitle(playingEpisode: playingEpisode)
+
+                playToggleOrPlaybackLabel(playingEpisode: playingEpisode)
+            }
+            .widgetURL(URL(string: "pktc://last_opened"))
+            .clearBackground()
+            .if(!showsWidgetBackground) { view in
+                view
+                    .padding(.top)
+                    .padding(.bottom)
+            }
+        }
+    }
+
+    private func mediumWidget(playingEpisode: WidgetEpisode) -> some View {
+        ZStack {
+            if showsWidgetBackground {
+                Rectangle().fill(widgetColorScheme.bottomBackgroundColor)
+            }
+
+            HStack {
+                LargeArtworkView(imageData: playingEpisode.imageData, size: .infinity)
+
                 VStack(alignment: .leading, spacing: 10) {
-                    artwork(playingEpisode: playingEpisode)
+                    HStack(alignment: .bottom) {
+                        Text("Now Playing")
+                            .font(.caption)
+                            .textCase(.uppercase)
+                            .padding(topPadding)
+                            .foregroundColor(widgetColorScheme.bottomTextColor.opacity(0.6))
+                        Spacer()
+                        Image(widgetColorScheme.iconAssetName)
+                            .frame(width: CommonWidgetHelper.iconSize, height: CommonWidgetHelper.iconSize)
+                            .unredacted()
+                    }
 
-                    episodeTitle(playingEpisode: playingEpisode)
+                    podcastTitle(playingEpisode: playingEpisode)
 
+                    episodeTitle(playingEpisode: playingEpisode)
+                    Spacer()
                     playToggleOrPlaybackLabel(playingEpisode: playingEpisode)
                 }
-                .widgetURL(URL(string: "pktc://last_opened"))
-                .clearBackground()
-                .if(!showsWidgetBackground) { view in
-                    view
-                        .padding(.top)
-                        .padding(.bottom)
-                }
-            }
-        }
-        else if !showsWidgetBackground {
-            nothingPlaying
-        } else {
-            ZStack {
-                Image(CommonWidgetHelper.loadAppIconName())
-                    .resizable()
+                .frame(maxHeight: 128)
             }
+            .padding(16)
+
             .widgetURL(URL(string: "pktc://last_opened"))
             .clearBackground()
+            .if(!showsWidgetBackground) { view in
+                view
+                    .padding(.top)
+                    .padding(.bottom)
+            }
         }
     }
 
-    private func artwork(playingEpisode: WidgetEpisode) -> some View {
+    private func smallArtwork(playingEpisode: WidgetEpisode) -> some View {
         HStack(alignment: .top) {
             LargeArtworkView(imageData: playingEpisode.imageData)
                 .frame(width: 64, height: 64)
             Spacer()
             Image(widgetColorScheme.iconAssetName)
-                .frame(width: 28, height: 28)
+                .frame(width: CommonWidgetHelper.iconSize, height: CommonWidgetHelper.iconSize)
                 .unredacted()
         }
         .padding(topPadding)
     }
 
+    private func podcastTitle(playingEpisode: WidgetEpisode) -> some View {
+        Text(playingEpisode.podcastName)
+            .font(.body)
+            .fontWeight(.semibold)
+            .foregroundColor(widgetColorScheme.bottomTextColor)
+            .lineLimit(1)
+            .frame(height: 12, alignment: .center)
+            .layoutPriority(1)
+            .padding(episodeTitlePadding)
+    }
+
     private func episodeTitle(playingEpisode: WidgetEpisode) -> some View {
         Text(playingEpisode.episodeTitle)
             .font(.footnote)
@@ -111,34 +180,72 @@ struct NowPlayingWidgetEntryView: View {
         }
     }
 
+    private var nothingPlayingMedium: some View {
+        ZStack {
+            if showsWidgetBackground {
+                Rectangle().fill(widgetColorScheme.bottomBackgroundColor)
+            }
 
-    private var nothingPlaying: some View {
-        VStack(alignment: .leading, spacing: 3) {
-            GeometryReader { geometry in
-                HStack(alignment: .top) {
-                    LargeArtworkView()
-                        .opacity(0.5)
-                    Spacer()
-                    Image("logo-transparent")
-                        .frame(width: 28, height: 28)
-                }.padding(topPadding)
+            HStack(alignment: .top) {
+                LargeArtworkView(size: .infinity)
+                    .opacity(0.5)
+
+                VStack(alignment: .leading) {
+                    HStack(alignment: .top) {
+                        Spacer()
+                        Image(widgetColorScheme.iconAssetName)
+                            .frame(width: CommonWidgetHelper.iconSize, height: CommonWidgetHelper.iconSize)
+                            .unredacted()
+                    }
+
+                    nothingPlayingText
+                }
+                .frame(maxHeight: 128)
             }
+            .padding(16)
+        }
+        .widgetURL(URL(string: "pktc://discover"))
+        .clearBackground()
+        .if(!showsWidgetBackground) { view in
+            view
+                .padding(.top)
+                .padding(.bottom)
+        }
+    }
+
+    private var nothingPlayingText: some View {
+        Group {
             Text(L10n.widgetsDiscoverPromptTitle)
                 .font(.footnote)
                 .fontWeight(.semibold)
-                .foregroundColor(Color.primary)
+                .foregroundColor(showsWidgetBackground ? widgetColorScheme.bottomTextColor : Color.primary)
                 .lineLimit(2)
                 .frame(height: 38, alignment: .center)
                 .layoutPriority(1)
                 .padding(episodeTitlePadding)
-
             Text(L10n.widgetsDiscoverPromptMsg)
                 .font(.caption2)
                 .fontWeight(.medium)
-                .foregroundColor(Color.secondary)
+                .foregroundColor(showsWidgetBackground ? widgetColorScheme.bottomTextColor : Color.secondary)
+                .lineLimit(2)
                 .padding(bottomTextPadding)
                 .layoutPriority(1)
         }
+    }
+
+    private var nothingPlaying: some View {
+        VStack(alignment: .leading, spacing: 3) {
+            GeometryReader { geometry in
+                HStack(alignment: .top) {
+                    LargeArtworkView()
+                        .opacity(0.5)
+                    Spacer()
+                    Image("logo-transparent")
+                        .frame(width: CommonWidgetHelper.iconSize, height: CommonWidgetHelper.iconSize)
+                }.padding(topPadding)
+            }
+            nothingPlayingText
+        }
         .widgetURL(URL(string: "pktc://discover"))
         .clearBackground()
         .if(!showsWidgetBackground) { view in

WidgetExtension/Now Playing/NowPlayingWidget.swift

@@ -10,6 +10,6 @@ struct NowPlayingWidget: Widget {
         .contentMarginsDisabledIfAvailable()
         .configurationDisplayName(L10n.nowPlaying)
         .description(L10n.widgetsNowPlayingDesc)
-        .supportedFamilies([.systemSmall])
+        .supportedFamilies([.systemSmall, .systemMedium])
     }
 }

WidgetExtension/Now Playing/NowPlayingWidgetBold.swift

@@ -10,6 +10,6 @@ struct NowPlayingWidgetBold: Widget {
         .contentMarginsDisabledIfAvailable()
         .configurationDisplayName(L10n.nowPlaying)
         .description(L10n.widgetsNowPlayingDesc)
-        .supportedFamilies([.systemSmall])
+        .supportedFamilies([.systemSmall, .systemMedium])
     }
 }

WidgetExtension/Up Next/UpNextLargeWidgetView.swift

@@ -33,7 +33,7 @@ struct LargeUpNextWidgetView: View {
                                 EpisodeView(episode: firstEpisode, topText: isPlaying ? Text(L10n.nowPlaying.localizedCapitalized) : Text(L10n.podcastTimeLeft(CommonWidgetHelper.durationString(duration: firstEpisode.duration))), isPlaying: isPlaying, isFirstEpisode: true)
                                 Spacer()
                                 Image(colorScheme.iconAssetName)
-                                    .frame(width: 28, height: 28)
+                                    .frame(width: CommonWidgetHelper.iconSize, height: CommonWidgetHelper.iconSize)
                                     .unredacted()
                             }
                             .padding(16)
@@ -103,7 +103,7 @@ struct LargeFilterView: View {
                         }
                         Spacer()
                         Image(colorScheme.filterViewIconAssetName)
-                            .frame(width: 28, height: 28)
+                            .frame(width: CommonWidgetHelper.iconSize, height: CommonWidgetHelper.iconSize)
                             .unredacted()
                     }
                     .frame(height: 32)

WidgetExtension/Up Next/UpNextMediumWidgetView.swift

@@ -35,7 +35,7 @@ struct MediumUpNextView: View {
                         EpisodeView(episode: firstEpisode, topText: isPlaying ? Text(L10n.nowPlaying) : Text(L10n.podcastTimeLeft(CommonWidgetHelper.durationString(duration: firstEpisode.duration))), isPlaying: isPlaying, isFirstEpisode: true)
                         Spacer()
                         Image(colorScheme.iconAssetName)
-                            .frame(width: 28, height: 28)
+                            .frame(width: CommonWidgetHelper.iconSize, height: CommonWidgetHelper.iconSize)
                             .accessibility(hidden: true)
                             .unredacted()
                     }
@@ -85,7 +85,7 @@ struct MediumFilterView: View {
                         .frame(height: 18)
                     Spacer()
                     Image(colorScheme.filterViewIconAssetName)
-                        .frame(width: 28, height: 28)
+                        .frame(width: CommonWidgetHelper.iconSize, height: CommonWidgetHelper.iconSize)
                         .unredacted()
                 }
                 .frame(height: 32)

WidgetExtension/Up Next/UpNextWidgetEntryView.swift

@@ -31,7 +31,7 @@ struct UpNextWidgetEntryView: View {
                             .lineLimit(1)
                         Spacer()
                         Image(widgetColorScheme.filterViewIconAssetName)
-                            .frame(width: 28, height: 28, alignment: .topTrailing)
+                            .frame(width: CommonWidgetHelper.iconSize, height: CommonWidgetHelper.iconSize, alignment: .topTrailing)
                             .accessibility(hidden: true)
                     }
                     .padding(.init(top: 16, leading: 16, bottom: 0, trailing: 16))

podcasts.xcodeproj/xcshareddata/xcschemes/Pocket Casts Staging.xcscheme

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
    LastUpgradeVersion = "1540"
-   version = "1.7">
+   version = "1.8">
    <BuildAction
       parallelizeBuildables = "YES"
       buildImplicitDependencies = "YES"