Skip to content

スクロール中の自動更新停止と画面上部へのバッジ表示に対応しました#83

Open
inugamine wants to merge 1 commit into
mainfrom
newArrivalBadge
Open

スクロール中の自動更新停止と画面上部へのバッジ表示に対応しました#83
inugamine wants to merge 1 commit into
mainfrom
newArrivalBadge

Conversation

@inugamine
Copy link
Copy Markdown
Contributor

resolve #77

概要

タイムラインをスクロール中に新着投稿が自動挿入されることで閲覧位置がズレる問題を解消します。スクロール中は自動更新を停止し、新着があった場合はタイムライン上部にアバター付きバッジを表示します。

変更内容

変更ファイル(2ファイル)

  • app/src/components/RealtimeTimeline.tsx
  • web/src/components/RealtimeTimeline.tsx
    app版・web版ともに同一の変更です。

自動更新の停止制御

  • TimelineReader.haltUpdate を利用し、scrollTop > 100px または新着バッジが表示中の場合に自動挿入を停止
  • スクロールイベント内で haltUpdate フラグを動的に切り替え
  • クロージャの stale state 問題を回避するため newArrivalsRef を併用

新着バッジ

  • TimelineReader.onNewItem コールバックで haltUpdate 中の新着を検知
  • client.getMessage(href) で投稿者のアバター情報を取得し蓄積
  • 同一アバターの重複追加を防止
  • アバターは最大4つ表示、超過分は +N で表示
  • CSS transition による opacity / scale アニメーション

バッジ操作

  • バッジクリック → newArrivals クリア + scrollTo(0) + reload()
  • Pull to Refresh 時にも newArrivals をクリア
  • タイムライン初期化時(props.timelines 変更時)にもクリア

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

スクロール中に自動更新を停止して、新着バッジ表示にする

1 participant