Merge pull request #1214 from wakmusic/1210-add-ui-activate-lyric-hig…

…hlighting
wakmusic · Aug 24, 2024 · eb16844 · eb16844
2 parents 44c6b3d + d7440dc
commit eb16844
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 16 deletions.
diff --git a/...ricHighlightingFeature/Sources/ViewControllers/LyricHighlightingViewController+Bind.swift b/...ricHighlightingFeature/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/...es/LyricHighlightingFeature/Sources/ViewControllers/LyricHighlightingViewController.swift b/...es/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/...cts/Features/LyricHighlightingFeature/Sources/ViewModels/LyricHighlightingViewModel.swift b/...cts/Features/LyricHighlightingFeature/Sources/ViewModels/LyricHighlightingViewModel.swift
@@ -26,6 +26,7 @@ public final class LyricHighlightingViewModel: ViewModelType {
 
     public struct Input {
         let fetchLyric: PublishSubject<Void> = PublishSubject()
+        let didTapActivateButton: BehaviorRelay<Bool> = BehaviorRelay(value: false)
         let didTapHighlighting: BehaviorRelay<IndexPath> = BehaviorRelay(value: .init(row: -1, section: 0))
         let didTapSaveButton: PublishSubject<Void> = 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