zelo72
/
mastodon-ios
mirror of https://github.com/mastodon/mastodon-ios
2
2
Fork 1
Code Issues 17 Releases Wiki Activity

Merge pull request #615 from j-f1/edit-banner 

Allow editing profile header/banner image
This commit is contained in:
Marcus Kida 2022-11-17 16:51:53 +01:00 committed by GitHub
parent c2bb14eaab f4018935f9
commit 1e80643735
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 89 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
Mastodon/Scene/Profile/Header/ProfileHeaderViewController.swift
View File

@ -60,7 +60,8 @@ final class ProfileHeaderViewController: UIViewController, NeedsDependency, Medi
// private var isAdjustBannerImageViewForSafeAreaInset = false
private var containerSafeAreaInset: UIEdgeInsets = .zero
private var currentImageType = ImageType.avatar
private(set) lazy var imagePicker: PHPickerViewController = {
var configuration = PHPickerConfiguration()
configuration.filter = .images
@ -125,7 +126,9 @@ extension ProfileHeaderViewController {
}
.store(in: &disposeBag)
profileHeaderView.editAvatarButtonOverlayIndicatorView.menu = createAvatarContextMenu()
profileHeaderView.editBannerButton.menu = createImageContextMenu(.banner)
profileHeaderView.editBannerButton.showsMenuAsPrimaryAction = true
profileHeaderView.editAvatarButtonOverlayIndicatorView.menu = createImageContextMenu(.avatar)
profileHeaderView.editAvatarButtonOverlayIndicatorView.showsMenuAsPrimaryAction = true
profileHeaderView.delegate = self
@ -156,6 +159,9 @@ extension ProfileHeaderViewController {
viewModel.$isUpdating
.assign(to: \.isUpdating, on: profileHeaderView.viewModel)
.store(in: &disposeBag)
viewModel.profileInfoEditing.$header
.assign(to: \.headerImageEditing, on: profileHeaderView.viewModel)
.store(in: &disposeBag)
viewModel.profileInfoEditing.$avatar
.assign(to: \.avatarImageEditing, on: profileHeaderView.viewModel)
.store(in: &disposeBag)
@ -173,7 +179,7 @@ extension ProfileHeaderViewController {
profileHeaderView.viewModel.viewDidAppear.send()
// set display after view appear
profileHeaderView.setupAvatarOverlayViews()
profileHeaderView.setupImageOverlayViews()
}
override func viewDidLayoutSubviews() {
@ -185,11 +191,16 @@ extension ProfileHeaderViewController {
}
extension ProfileHeaderViewController {
private func createAvatarContextMenu() -> UIMenu {
fileprivate enum ImageType {
case avatar
case banner
}
private func createImageContextMenu(_ type: ImageType) -> UIMenu {
var children: [UIMenuElement] = []
let photoLibraryAction = UIAction(title: L10n.Scene.Compose.MediaSelection.photoLibrary, image: UIImage(systemName: "rectangle.on.rectangle"), identifier: nil, discoverabilityTitle: nil, attributes: [], state: .off) { [weak self] _ in
guard let self = self else { return }
os_log(.info, log: .debug, "%{public}s[%{public}ld], %{public}s: mediaSelectionType: .photoLibaray", ((#file as NSString).lastPathComponent), #line, #function)
self.currentImageType = type
self.present(self.imagePicker, animated: true, completion: nil)
}
children.append(photoLibraryAction)
@ -197,6 +208,7 @@ extension ProfileHeaderViewController {
let cameraAction = UIAction(title: L10n.Scene.Compose.MediaSelection.camera, image: UIImage(systemName: "camera"), identifier: nil, discoverabilityTitle: nil, attributes: [], state: .off, handler: { [weak self] _ in
guard let self = self else { return }
os_log(.info, log: .debug, "%{public}s[%{public}ld], %{public}s: mediaSelectionType: .camera", ((#file as NSString).lastPathComponent), #line, #function)
self.currentImageType = type
self.present(self.imagePickerController, animated: true, completion: nil)
})
children.append(cameraAction)
@ -204,6 +216,7 @@ extension ProfileHeaderViewController {
let browseAction = UIAction(title: L10n.Scene.Compose.MediaSelection.browse, image: UIImage(systemName: "ellipsis"), identifier: nil, discoverabilityTitle: nil, attributes: [], state: .off) { [weak self] _ in
guard let self = self else { return }
os_log(.info, log: .debug, "%{public}s[%{public}ld], %{public}s: mediaSelectionType: .browse", ((#file as NSString).lastPathComponent), #line, #function)
self.currentImageType = type
self.present(self.documentPickerController, animated: true, completion: nil)
}
children.append(browseAction)
@ -215,7 +228,13 @@ extension ProfileHeaderViewController {
DispatchQueue.main.async {
let cropController = CropViewController(croppingStyle: .default, image: image)
cropController.delegate = self
cropController.setAspectRatioPreset(.presetSquare, animated: true)
switch self.currentImageType {
case .banner:
cropController.customAspectRatio = CGSize(width: 3, height: 1)
cropController.setAspectRatioPreset(.presetCustom, animated: true)
case .avatar:
cropController.setAspectRatioPreset(.presetSquare, animated: true)
}
cropController.aspectRatioPickerButtonHidden = true
cropController.aspectRatioLockEnabled = true
pickerViewController.dismiss(animated: true, completion: {
@ -443,7 +462,12 @@ extension ProfileHeaderViewController: UIDocumentPickerDelegate {
// MARK: - CropViewControllerDelegate
extension ProfileHeaderViewController: CropViewControllerDelegate {
public func cropViewController(_ cropViewController: CropViewController, didCropToImage image: UIImage, withRect cropRect: CGRect, angle: Int) {
viewModel.profileInfoEditing.avatar = image
switch currentImageType {
case .banner:
viewModel.profileInfoEditing.header = image
case .avatar:
viewModel.profileInfoEditing.avatar = image
}
cropViewController.dismiss(animated: true, completion: nil)
}
}

6
Mastodon/Scene/Profile/Header/ProfileHeaderViewModel.swift
View File

@ -18,6 +18,7 @@ import MastodonUI
final class ProfileHeaderViewModel {
static let avatarImageMaxSizeInPixel = CGSize(width: 400, height: 400)
static let bannerImageMaxSizeInPixel = CGSize(width: 1500, height: 500)
static let maxProfileFieldCount = 4
var disposeBag = Set<AnyCancellable>()
@ -52,6 +53,9 @@ final class ProfileHeaderViewModel {
.sink { [weak self] account in
guard let self = self else { return }
guard let account = account else { return }
// banner
self.profileInfo.header = nil
self.profileInfoEditing.header = nil
// avatar
self.profileInfo.avatar = nil
self.profileInfoEditing.avatar = nil
@ -72,6 +76,7 @@ final class ProfileHeaderViewModel {
extension ProfileHeaderViewModel {
class ProfileInfo {
// input
@Published var header: UIImage?
@Published var avatar: UIImage?
@Published var name: String?
@Published var note: String?
@ -99,6 +104,7 @@ extension ProfileHeaderViewModel: ProfileViewModelEditable {
var isEdited: Bool {
guard isEditing else { return false }
guard profileInfoEditing.header == nil else { return true }
guard profileInfoEditing.avatar == nil else { return true }
guard profileInfo.name == profileInfoEditing.name else { return true }
guard profileInfo.note == profileInfoEditing.note else { return true }

21
Mastodon/Scene/Profile/Header/View/ProfileHeaderView+ViewModel.swift
View File

@ -28,6 +28,7 @@ extension ProfileHeaderView {
@Published var emojiMeta: MastodonContent.Emojis = [:]
@Published var headerImageURL: URL?
@Published var headerImageEditing: UIImage?
@Published var avatarImageURL: URL?
@Published var avatarImageEditing: UIImage?
@ -61,14 +62,19 @@ extension ProfileHeaderView.ViewModel {
func bind(view: ProfileHeaderView) {
// header
Publishers.CombineLatest(
Publishers.CombineLatest4(
$headerImageURL,
$headerImageEditing,
$isEditing,
viewDidAppear
)
.sink { headerImageURL, _ in
.sink { headerImageURL, headerImageEditing, isEditing, _ in
view.bannerImageView.af.cancelImageRequest()
let placeholder = UIImage.placeholder(color: ProfileHeaderView.bannerImageViewPlaceholderColor)
guard let bannerImageURL = headerImageURL else {
let defaultPlaceholder = UIImage.placeholder(color: ProfileHeaderView.bannerImageViewPlaceholderColor)
let placeholder = isEditing ? (headerImageEditing ?? defaultPlaceholder) : defaultPlaceholder
guard let bannerImageURL = headerImageURL,
!isEditing || headerImageEditing == nil
else {
view.bannerImageView.image = placeholder
return
}
@ -262,22 +268,29 @@ extension ProfileHeaderView {
animator.addAnimations {
self.bannerImageViewOverlayVisualEffectView.backgroundColor = ProfileHeaderView.bannerImageViewOverlayViewBackgroundNormalColor
self.nameTextFieldBackgroundView.backgroundColor = .clear
self.editBannerButton.alpha = 0
self.editAvatarBackgroundView.alpha = 0
}
animator.addCompletion { _ in
self.editBannerButton.isHidden = true
self.editAvatarBackgroundView.isHidden = true
self.bannerImageViewSingleTapGestureRecognizer.isEnabled = true
}
case .editing:
nameMetaText.textView.alpha = 0
nameTextField.isEnabled = true
nameTextField.alpha = 1
editBannerButton.isHidden = false
editBannerButton.alpha = 0
editAvatarBackgroundView.isHidden = false
editAvatarBackgroundView.alpha = 0
bioMetaText.textView.backgroundColor = .clear
bannerImageViewSingleTapGestureRecognizer.isEnabled = false
animator.addAnimations {
self.bannerImageViewOverlayVisualEffectView.backgroundColor = ProfileHeaderView.bannerImageViewOverlayViewBackgroundEditingColor
self.nameTextFieldBackgroundView.backgroundColor = Asset.Scene.Profile.Banner.nameEditBackgroundGray.color
self.editBannerButton.alpha = 1
self.editAvatarBackgroundView.alpha = 1
self.bioMetaText.textView.backgroundColor = Asset.Scene.Profile.Banner.bioEditBackgroundGray.color
}

27
Mastodon/Scene/Profile/Header/View/ProfileHeaderView.swift
View File

@ -50,6 +50,7 @@ final class ProfileHeaderView: UIView {
return viewModel
}()
let bannerImageViewSingleTapGestureRecognizer = UITapGestureRecognizer.singleTapGestureRecognizer
let bannerContainerView = UIView()
let bannerImageView: UIImageView = {
let imageView = UIImageView()
@ -101,7 +102,9 @@ final class ProfileHeaderView: UIView {
return button
}()
func setupAvatarOverlayViews() {
func setupImageOverlayViews() {
editBannerButton.tintColor = .white
editAvatarBackgroundView.backgroundColor = UIColor.black.withAlphaComponent(0.6)
editAvatarButtonOverlayIndicatorView.tintColor = .white
}
@ -113,6 +116,13 @@ final class ProfileHeaderView: UIView {
return visualEffectView
}()
let editBannerButton: HighlightDimmableButton = {
let button = HighlightDimmableButton()
button.setImage(UIImage(systemName: "photo", withConfiguration: UIImage.SymbolConfiguration(pointSize: 28)), for: .normal)
button.tintColor = .clear
return button
}()
let editAvatarBackgroundView: UIView = {
let view = UIView()
view.backgroundColor = .clear // set value after view appeared
@ -271,7 +281,17 @@ extension ProfileHeaderView {
bannerImageViewOverlayVisualEffectView.trailingAnchor.constraint(equalTo: bannerImageView.trailingAnchor),
bannerImageViewOverlayVisualEffectView.bottomAnchor.constraint(equalTo: bannerImageView.bottomAnchor),
])
editBannerButton.translatesAutoresizingMaskIntoConstraints = false
bannerContainerView.addSubview(editBannerButton)
NSLayoutConstraint.activate([
editBannerButton.topAnchor.constraint(equalTo: bannerImageView.topAnchor),
editBannerButton.leadingAnchor.constraint(equalTo: bannerImageView.leadingAnchor),
editBannerButton.trailingAnchor.constraint(equalTo: bannerImageView.trailingAnchor),
editBannerButton.bottomAnchor.constraint(equalTo: bannerImageView.bottomAnchor),
])
bannerContainerView.isUserInteractionEnabled = true
// follows you
followsYouBlurEffectView.translatesAutoresizingMaskIntoConstraints = false
addSubview(followsYouBlurEffectView)
@ -455,8 +475,7 @@ extension ProfileHeaderView {
statusDashboardView.delegate = self
bioMetaText.textView.delegate = self
bioMetaText.textView.linkDelegate = self
let bannerImageViewSingleTapGestureRecognizer = UITapGestureRecognizer.singleTapGestureRecognizer
bannerImageView.addGestureRecognizer(bannerImageViewSingleTapGestureRecognizer)
bannerImageViewSingleTapGestureRecognizer.addTarget(self, action: #selector(ProfileHeaderView.bannerImageViewDidPressed(_:)))

17
Mastodon/Scene/Profile/ProfileViewModel.swift
View File

@ -215,8 +215,17 @@ extension ProfileViewModel {
let authenticationBox = authContext.mastodonAuthenticationBox
let domain = authenticationBox.domain
let authorization = authenticationBox.userAuthorization
let _image: UIImage? = {
// TODO: constrain size?
let _header: UIImage? = {
guard let image = headerProfileInfo.header else { return nil }
guard image.size.width <= ProfileHeaderViewModel.bannerImageMaxSizeInPixel.width else {
return image.af.imageScaled(to: ProfileHeaderViewModel.bannerImageMaxSizeInPixel)
}
return image
}()
let _avatar: UIImage? = {
guard let image = headerProfileInfo.avatar else { return nil }
guard image.size.width <= ProfileHeaderViewModel.avatarImageMaxSizeInPixel.width else {
return image.af.imageScaled(to: ProfileHeaderViewModel.avatarImageMaxSizeInPixel)
@ -233,8 +242,8 @@ extension ProfileViewModel {
bot: nil,
displayName: headerProfileInfo.name,
note: headerProfileInfo.note,
avatar: _image.flatMap { Mastodon.Query.MediaAttachment.png($0.pngData()) },
header: nil,
avatar: _avatar.flatMap { Mastodon.Query.MediaAttachment.png($0.pngData()) },
header: _header.flatMap { Mastodon.Query.MediaAttachment.png($0.pngData()) },
locked: nil,
source: nil,
fieldsAttributes: fieldsAttributes