From 5ff25e31d33322e925000cd59a6468416e55606f Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Sun, 4 Jun 2023 16:15:05 -0400 Subject: [PATCH 1/4] =?UTF-8?q?Rename:=20MediaBadgesContainer=20=E2=86=92?= =?UTF-8?q?=20InlineMediaOverlayContainer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...wift => InlineMediaOverlayContainer.swift} | 6 ++-- .../MastodonUI/View/Content/MediaView.swift | 30 +++++++++---------- 2 files changed, 18 insertions(+), 18 deletions(-) rename MastodonSDK/Sources/MastodonUI/View/Content/{MediaBadgesContainer.swift => InlineMediaOverlayContainer.swift} (93%) diff --git a/MastodonSDK/Sources/MastodonUI/View/Content/MediaBadgesContainer.swift b/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift similarity index 93% rename from MastodonSDK/Sources/MastodonUI/View/Content/MediaBadgesContainer.swift rename to MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift index acaddb164..c8dd82c1f 100644 --- a/MastodonSDK/Sources/MastodonUI/View/Content/MediaBadgesContainer.swift +++ b/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift @@ -1,12 +1,12 @@ // -// MediaBadgesContainer.swift +// InlineMediaOverlayContainer.swift // // Created by Jed Fox on 2022-12-20. // import SwiftUI -struct MediaBadgesContainer: View { +struct InlineMediaOverlayContainer: View { var altDescription: String? var isGIF = false var showDuration = false @@ -60,7 +60,7 @@ struct MediaBadgesContainer: View { struct MediaAltTextOverlay_Previews: PreviewProvider { static var previews: some View { - MediaBadgesContainer(altDescription: "Hello, world!") + InlineMediaOverlayContainer(altDescription: "Hello, world!") .frame(height: 300) .background(Color.gray) .previewLayout(.sizeThatFits) diff --git a/MastodonSDK/Sources/MastodonUI/View/Content/MediaView.swift b/MastodonSDK/Sources/MastodonUI/View/Content/MediaView.swift index 2a61525e9..ae78e6b89 100644 --- a/MastodonSDK/Sources/MastodonUI/View/Content/MediaView.swift +++ b/MastodonSDK/Sources/MastodonUI/View/Content/MediaView.swift @@ -66,8 +66,8 @@ public final class MediaView: UIView { return wrapper }() - let badgeViewController: UIHostingController = { - let vc = UIHostingController(rootView: MediaBadgesContainer()) + let overlayViewController: UIHostingController = { + let vc = UIHostingController(rootView: InlineMediaOverlayContainer()) vc.view.backgroundColor = .clear return vc }() @@ -167,8 +167,8 @@ extension MediaView { } private func bindGIF(configuration: Configuration, info: Configuration.VideoInfo) { - badgeViewController.rootView.mediaDuration = info.durationMS.map { Double($0) / 1000 } - badgeViewController.rootView.showDuration = false + overlayViewController.rootView.mediaDuration = info.durationMS.map { Double($0) / 1000 } + overlayViewController.rootView.showDuration = false guard let player = setupGIFPlayer(info: info) else { return } setupPlayerLooper(player: player) @@ -178,7 +178,7 @@ extension MediaView { // auto play for GIF player.play() - badgeViewController.rootView.isGIF = true + overlayViewController.rootView.isGIF = true bindAlt(configuration: configuration, altDescription: info.altDescription) } @@ -197,8 +197,8 @@ extension MediaView { } private func bindVideo(configuration: Configuration, info: Configuration.VideoInfo) { - badgeViewController.rootView.mediaDuration = info.durationMS.map { Double($0) / 1000 } - badgeViewController.rootView.showDuration = true + overlayViewController.rootView.mediaDuration = info.durationMS.map { Double($0) / 1000 } + overlayViewController.rootView.showDuration = true let imageInfo = Configuration.ImageInfo( aspectRadio: info.aspectRadio, @@ -219,7 +219,7 @@ extension MediaView { accessibilityLabel = altDescription } - badgeViewController.rootView.altDescription = altDescription + overlayViewController.rootView.altDescription = altDescription } private func layoutBlurhash() { @@ -251,9 +251,9 @@ extension MediaView { } private func layoutAlt() { - badgeViewController.view.translatesAutoresizingMaskIntoConstraints = false - container.addSubview(badgeViewController.view) - badgeViewController.view.pinToParent() + overlayViewController.view.translatesAutoresizingMaskIntoConstraints = false + container.addSubview(overlayViewController.view) + overlayViewController.view.pinToParent() } public func prepareForReuse() { @@ -288,10 +288,10 @@ extension MediaView { container.removeFromSuperview() container.removeConstraints(container.constraints) - badgeViewController.rootView.altDescription = nil - badgeViewController.rootView.isGIF = false - badgeViewController.rootView.showDuration = false - badgeViewController.rootView.mediaDuration = nil + overlayViewController.rootView.altDescription = nil + overlayViewController.rootView.isGIF = false + overlayViewController.rootView.showDuration = false + overlayViewController.rootView.mediaDuration = nil // reset configuration configuration = nil From 290a62aa5ed686a4a9fdbf01a23cfb953983305e Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Sun, 4 Jun 2023 16:17:34 -0400 Subject: [PATCH 2/4] =?UTF-8?q?Refactor:=20isGIF=20=E2=86=92=20mediaType?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../View/Content/InlineMediaOverlayContainer.swift | 12 +++++++++--- .../Sources/MastodonUI/View/Content/MediaView.swift | 6 +++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift b/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift index c8dd82c1f..2d333776c 100644 --- a/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift +++ b/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift @@ -8,10 +8,16 @@ import SwiftUI struct InlineMediaOverlayContainer: View { var altDescription: String? - var isGIF = false + var mediaType: MediaType = .image var showDuration = false var mediaDuration: TimeInterval? - + + enum MediaType { + case image + case gif + case video + } + @State private var showingAlt = false @State private var space = AnyHashable(UUID()) @@ -35,7 +41,7 @@ struct InlineMediaOverlayContainer: View { .fixedSize(horizontal: false, vertical: true) } } - if isGIF { + if mediaType == .gif { MediaBadge("GIF") } if showDuration { diff --git a/MastodonSDK/Sources/MastodonUI/View/Content/MediaView.swift b/MastodonSDK/Sources/MastodonUI/View/Content/MediaView.swift index ae78e6b89..5a7ec58a1 100644 --- a/MastodonSDK/Sources/MastodonUI/View/Content/MediaView.swift +++ b/MastodonSDK/Sources/MastodonUI/View/Content/MediaView.swift @@ -112,14 +112,17 @@ extension MediaView { switch configuration.info { case .image(let info): layoutImage() + overlayViewController.rootView.mediaType = .image bindImage(configuration: configuration, info: info) accessibilityHint = L10n.Common.Controls.Status.Media.expandImageHint case .gif(let info): layoutGIF() + overlayViewController.rootView.mediaType = .gif bindGIF(configuration: configuration, info: info) accessibilityHint = L10n.Common.Controls.Status.Media.expandGifHint case .video(let info): layoutVideo() + overlayViewController.rootView.mediaType = .video bindVideo(configuration: configuration, info: info) accessibilityHint = L10n.Common.Controls.Status.Media.expandVideoHint } @@ -178,8 +181,6 @@ extension MediaView { // auto play for GIF player.play() - overlayViewController.rootView.isGIF = true - bindAlt(configuration: configuration, altDescription: info.altDescription) } @@ -289,7 +290,6 @@ extension MediaView { container.removeConstraints(container.constraints) overlayViewController.rootView.altDescription = nil - overlayViewController.rootView.isGIF = false overlayViewController.rootView.showDuration = false overlayViewController.rootView.mediaDuration = nil From 10303eee379830f24b0fc59e820093ec0b237112 Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Sun, 4 Jun 2023 16:39:59 -0400 Subject: [PATCH 3/4] =?UTF-8?q?Move=20=E2=80=9Cplay=20video=E2=80=9D=20ima?= =?UTF-8?q?ge=20to=20SwiftUI,=20adjust=20to=20match=20design=20spec?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Content/InlineMediaOverlayContainer.swift | 8 ++++++ .../MastodonUI/View/Content/MediaView.swift | 26 ------------------- 2 files changed, 8 insertions(+), 26 deletions(-) diff --git a/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift b/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift index 2d333776c..17e1d48e2 100644 --- a/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift +++ b/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift @@ -58,6 +58,14 @@ struct InlineMediaOverlayContainer: View { } .padding(.horizontal, 16) .padding(.vertical, 8) + .overlay { + if mediaType == .video { + Image(systemName: "play.circle.fill") + .font(.system(size: 54)) + .foregroundColor(.white) + .shadow(color: .black.opacity(0.5), radius: 32, x: 0, y: 0) + } + } .onChange(of: altDescription) { _ in showingAlt = false } diff --git a/MastodonSDK/Sources/MastodonUI/View/Content/MediaView.swift b/MastodonSDK/Sources/MastodonUI/View/Content/MediaView.swift index 5a7ec58a1..6155b0da5 100644 --- a/MastodonSDK/Sources/MastodonUI/View/Content/MediaView.swift +++ b/MastodonSDK/Sources/MastodonUI/View/Content/MediaView.swift @@ -51,21 +51,6 @@ public final class MediaView: UIView { }() private var playerLooper: AVPlayerLooper? - private(set) lazy var playbackImageView: UIView = { - let wrapper = UIView() - - let imageView = UIImageView() - imageView.translatesAutoresizingMaskIntoConstraints = false - imageView.image = UIImage(systemName: "play.circle.fill") - imageView.tintColor = Asset.Colors.Label.primary.color - wrapper.addSubview(imageView) - imageView.pinToParent(padding: .init(top: 8, left: 8, bottom: 8, right: 8)) - wrapper.backgroundColor = Asset.Theme.Mastodon.systemBackground.color.withAlphaComponent(0.8) - wrapper.applyCornerRadius(radius: 8) - - return wrapper - }() - let overlayViewController: UIHostingController = { let vc = UIHostingController(rootView: InlineMediaOverlayContainer()) vc.view.backgroundColor = .clear @@ -186,15 +171,6 @@ extension MediaView { private func layoutVideo() { layoutImage() - - playbackImageView.translatesAutoresizingMaskIntoConstraints = false - container.addSubview(playbackImageView) - NSLayoutConstraint.activate([ - playbackImageView.centerXAnchor.constraint(equalTo: container.centerXAnchor), - playbackImageView.centerYAnchor.constraint(equalTo: container.centerYAnchor), - playbackImageView.widthAnchor.constraint(equalToConstant: 88).priority(.required - 1), - playbackImageView.heightAnchor.constraint(equalToConstant: 88).priority(.required - 1), - ]) } private func bindVideo(configuration: Configuration, info: Configuration.VideoInfo) { @@ -278,8 +254,6 @@ extension MediaView { playerViewController.player = nil playerLooper = nil - playbackImageView.removeFromSuperview() - // blurhash blurhashImageView.removeFromSuperview() blurhashImageView.removeConstraints(blurhashImageView.constraints) From 3a9e1aa716321303518519bf7ca10158dcf1d552 Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Sun, 4 Jun 2023 17:11:30 -0400 Subject: [PATCH 4/4] + backdrop for play triangle --- .../View/Content/InlineMediaOverlayContainer.swift | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift b/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift index 17e1d48e2..16928d99e 100644 --- a/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift +++ b/MastodonSDK/Sources/MastodonUI/View/Content/InlineMediaOverlayContainer.swift @@ -64,6 +64,12 @@ struct InlineMediaOverlayContainer: View { .font(.system(size: 54)) .foregroundColor(.white) .shadow(color: .black.opacity(0.5), radius: 32, x: 0, y: 0) + .background(alignment: .center) { + Circle() + .fill(.ultraThinMaterial) + .frame(width: 40, height: 40) + .colorScheme(.light) + } } } .onChange(of: altDescription) { _ in