diff --git a/Projects/Features/LyricHighlightingFeature/Sources/ViewControllers/LyricHighlightingViewController+Bind.swift b/Projects/Features/LyricHighlightingFeature/Sources/ViewControllers/LyricHighlightingViewController+Bind.swift index 8c6651f5d..2fe1590a3 100644 --- a/Projects/Features/LyricHighlightingFeature/Sources/ViewControllers/LyricHighlightingViewController+Bind.swift +++ b/Projects/Features/LyricHighlightingFeature/Sources/ViewControllers/LyricHighlightingViewController+Bind.swift @@ -8,6 +8,16 @@ extension LyricHighlightingViewController { func inputBind() { input.fetchLyric.onNext(()) + activateButton.rx.tap + .do(onNext: { [activateContentView] _ in + UIView.animate(withDuration: 0.2) { + activateContentView.isHidden = true + } + }) + .map { _ in true } + .bind(to: input.didTapActivateButton) + .disposed(by: disposeBag) + collectionView.rx.itemSelected .bind(to: input.didTapHighlighting) .disposed(by: disposeBag) @@ -39,11 +49,11 @@ extension LyricHighlightingViewController { output.dataSource .skip(1) - .do(onNext: { [indicator, warningView, collectionView, writerLabel] model in - indicator.stopAnimating() + .do(onNext: { [activityIndicator, warningView, collectionView, bottomContentStackView] model in + activityIndicator.stopAnimating() warningView.isHidden = !model.isEmpty - collectionView.isHidden = !warningView.isHidden - writerLabel.isHidden = !warningView.isHidden + collectionView.isHidden = model.isEmpty + bottomContentStackView.isHidden = model.isEmpty }) .bind(to: collectionView.rx.items) { collectionView, index, entity in guard let cell = collectionView.dequeueReusableCell( @@ -58,8 +68,11 @@ extension LyricHighlightingViewController { .disposed(by: disposeBag) output.isStorable - .map { !$0 } - .bind(to: completeButton.rx.isHidden) + .bind(with: self) { owner, isStorable in + UIView.animate(withDuration: 0.2) { + owner.completeButton.alpha = isStorable ? 1 : 0 + } + } .disposed(by: disposeBag) output.goDecoratingScene diff --git a/Projects/Features/LyricHighlightingFeature/Sources/ViewControllers/LyricHighlightingViewController.swift b/Projects/Features/LyricHighlightingFeature/Sources/ViewControllers/LyricHighlightingViewController.swift index f3bb05cec..7ee2609d0 100644 --- a/Projects/Features/LyricHighlightingFeature/Sources/ViewControllers/LyricHighlightingViewController.swift +++ b/Projects/Features/LyricHighlightingFeature/Sources/ViewControllers/LyricHighlightingViewController.swift @@ -48,6 +48,14 @@ public final class LyricHighlightingViewController: UIViewController { $0.backgroundColor = .clear } + let bottomContentStackView = UIStackView().then { + $0.axis = .vertical + $0.distribution = .fill + $0.isHidden = true + } + + let writerContentView = UIView() + let writerLabel = WMLabel( text: "", textColor: .white.withAlphaComponent(0.5), @@ -56,6 +64,19 @@ public final class LyricHighlightingViewController: UIViewController { kernValue: -0.5 ) + let activateContentView = UIView() + + let activateTopLineLabel = UILabel().then { + $0.backgroundColor = DesignSystemAsset.NewGrayColor.gray700.color + } + + let activateButton = UIButton(type: .system).then { + $0.setImage( + DesignSystemAsset.LyricHighlighting.lyricHighlightSaveOff.image.withRenderingMode(.alwaysOriginal), + for: .normal + ) + } + let warningView = UIView().then { $0.isHidden = true } @@ -85,10 +106,10 @@ public final class LyricHighlightingViewController: UIViewController { $0.setTitleColor(DesignSystemAsset.PrimaryColorV2.point.color, for: .normal) $0.titleLabel?.font = DesignSystemFontFamily.Pretendard.bold.font(size: 12) $0.titleLabel?.setTextWithAttributes(alignment: .center) - $0.isHidden = true + $0.alpha = 0 } - let indicator = NVActivityIndicatorView(frame: .zero).then { + let activityIndicator = NVActivityIndicatorView(frame: .zero).then { $0.type = .circleStrokeSpin $0.color = DesignSystemAsset.PrimaryColorV2.point.color } @@ -151,14 +172,19 @@ private extension LyricHighlightingViewController { thumbnailImageView, dimmedBackgroundView, collectionView, - writerLabel, + bottomContentStackView, warningView, navigationBarView, - indicator + activityIndicator ) + navigationBarView.addSubviews(backButton, navigationTitleStackView, completeButton) navigationTitleStackView.addArrangedSubview(songLabel) navigationTitleStackView.addArrangedSubview(artistLabel) + + bottomContentStackView.addArrangedSubviews(writerContentView, activateContentView) + writerContentView.addSubview(writerLabel) + activateContentView.addSubviews(activateTopLineLabel, activateButton) warningView.addSubviews(warningImageView, warningLabel) } @@ -209,13 +235,36 @@ private extension LyricHighlightingViewController { $0.horizontalEdges.equalToSuperview() } + bottomContentStackView.snp.makeConstraints { + $0.top.equalTo(collectionView.snp.bottom).offset(19) + $0.horizontalEdges.equalToSuperview() + $0.bottom.equalTo(view.safeAreaLayoutGuide) + } + + writerContentView.snp.makeConstraints { + $0.height.equalTo(51) + } + writerLabel.snp.makeConstraints { - $0.top.equalTo(collectionView.snp.bottom).offset(18) + $0.top.equalToSuperview() $0.horizontalEdges.equalToSuperview().inset(20) - $0.bottom.equalTo(view.safeAreaLayoutGuide).offset(-30) $0.height.equalTo(22) } + activateContentView.snp.makeConstraints { + $0.height.equalTo(56) + } + + activateTopLineLabel.snp.makeConstraints { + $0.top.equalToSuperview() + $0.horizontalEdges.equalToSuperview() + $0.height.equalTo(1) + } + + activateButton.snp.makeConstraints { + $0.edges.equalToSuperview() + } + warningView.snp.makeConstraints { $0.top.equalToSuperview().offset(APP_HEIGHT() * ((294.0 - 6.0) / 812.0)) $0.centerX.equalToSuperview() @@ -233,8 +282,8 @@ private extension LyricHighlightingViewController { $0.bottom.equalToSuperview() } - indicator.snp.makeConstraints { - $0.center.equalToSuperview() + activityIndicator.snp.makeConstraints { + $0.center.equalTo(warningView.snp.center) $0.size.equalTo(30) } } @@ -262,7 +311,7 @@ private extension LyricHighlightingViewController { .alternativeSources(alternativeSources) ] ) - indicator.startAnimating() + activityIndicator.startAnimating() } func createLayout() -> UICollectionViewLayout { diff --git a/Projects/Features/LyricHighlightingFeature/Sources/ViewModels/LyricHighlightingViewModel.swift b/Projects/Features/LyricHighlightingFeature/Sources/ViewModels/LyricHighlightingViewModel.swift index 88ed2e459..45736338b 100644 --- a/Projects/Features/LyricHighlightingFeature/Sources/ViewModels/LyricHighlightingViewModel.swift +++ b/Projects/Features/LyricHighlightingFeature/Sources/ViewModels/LyricHighlightingViewModel.swift @@ -26,6 +26,7 @@ public final class LyricHighlightingViewModel: ViewModelType { public struct Input { let fetchLyric: PublishSubject = PublishSubject() + let didTapActivateButton: BehaviorRelay = BehaviorRelay(value: false) let didTapHighlighting: BehaviorRelay = BehaviorRelay(value: .init(row: -1, section: 0)) let didTapSaveButton: PublishSubject = PublishSubject() } @@ -61,7 +62,9 @@ public final class LyricHighlightingViewModel: ViewModelType { .disposed(by: disposeBag) input.didTapHighlighting - .map { $0.item } + .withLatestFrom(input.didTapActivateButton) { ($0, $1) } + .filter { $0.1 } + .map { $0.0.item } .filter { $0 >= 0 } .withLatestFrom(output.dataSource) { ($0, $1) } .filter { index, entities in