Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(frontend): スワイプやボタンでタイムラインを再読込する機能 #12113

Merged
merged 29 commits into from
Oct 30, 2023

Conversation

slofp
Copy link
Contributor

@slofp slofp commented Oct 22, 2023

What

  • スワイプ(Pull to Refresh)の追加
    • スワイプはタッチ操作を想定した場合の機能なので、PCは別にリロードボタンの追加

タイムラインの再読み込みとWebSocketの再接続が行われます。

  • タイムラインの自動更新を無効にする機能

WebSocket全体を無効にすると通知やその他更新もなくなってしまい利便性が下がるためタイムラインだけの無効化です。

  • スワイプ部分
    reloadPR1

  • 自動更新を無効時
    reloadPR2

Why

resolve #9119 , resolve #11855

メインのタイムラインがスマートフォンの場合ブラウザやPWAから一時的に離れて数分後に戻るとWebSocketが止まった状態になり、全体を読み込み直す必要があるためその分データが余分に取られるため。

Additional info (optional)

ChromeでのPC表示、スマートフォン表示、iPhoneでの表示で正常に動作することを確認しています。

Checklist

  • Read the contribution guide
  • Test working in a local environment
  • (If needed) Add story of storybook
  • (If needed) Update CHANGELOG.md
  • (If possible) Add tests

@github-actions github-actions bot added the packages/frontend Client side specific issue/PR label Oct 22, 2023
@codecov
Copy link

codecov bot commented Oct 22, 2023

Codecov Report

Attention: 9 lines in your changes are missing coverage. Please review.

Comparison is base (117db08) 79.12% compared to head (943e3a4) 78.98%.

Additional details and impacted files
@@             Coverage Diff             @@
##           develop   #12113      +/-   ##
===========================================
- Coverage    79.12%   78.98%   -0.14%     
===========================================
  Files          940      176     -764     
  Lines       100933    23052   -77881     
  Branches      8210      493    -7717     
===========================================
- Hits         79860    18208   -61652     
+ Misses       21073     4844   -16229     
Files Coverage Δ
packages/frontend/src/components/MkPageWindow.vue 100.00% <100.00%> (ø)
packages/frontend/src/components/MkPagination.vue 98.83% <100.00%> (+0.01%) ⬆️
packages/frontend/src/stream.ts 60.86% <50.00%> (-15.80%) ⬇️

... and 766 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@kakkokari-gtyih
Copy link
Contributor

タイムラインの自動更新を無効にする機能

データセーバーと連動させてもいいかも(ややこしくなるかもしれないけど)

locales/en-US.yml Outdated Show resolved Hide resolved
@slofp
Copy link
Contributor Author

slofp commented Oct 22, 2023

タイムラインの自動更新を無効にする機能

データセーバーと連動させてもいいかも(ややこしくなるかもしれないけど)

うーん...データセーバーがonなら自動更新が一度も手動で変更されてなければ自動で更新無効をつける...とか?

その場合だったらあまり連動のメリットは無さそうに見える気がします(しゅいろさんがどうしたいのかにもよりますが)

@kakkokari-gtyih
Copy link
Contributor

タイムラインの自動更新を無効にする機能

データセーバーと連動させてもいいかも(ややこしくなるかもしれないけど)

うーん...データセーバーがonなら自動更新が一度も手動で変更されてなければ自動で更新無効をつける...とか?

その場合だったらあまり連動のメリットは無さそうに見える気がします(しゅいろさんがどうしたいのかにもよりますが)

たしかにややこしそうなのでこれはいいか

データセーバーのスイッチをタイムライン自動更新のスイッチの隣に置き直すのがいいかも

@syuilo
Copy link
Member

syuilo commented Oct 23, 2023

iPadOS 17.1 Safariでは引っ張ることができなかった

@slofp
Copy link
Contributor Author

slofp commented Oct 23, 2023

iPadOS 17.1 Safariでは引っ張ることができなかった

ぷえー

色々見直してみます。ちなみにどういう挙動か教えていただけますか(iPad持っていないので検証ができない)

@syuilo
Copy link
Member

syuilo commented Oct 23, 2023

下方向に動かそうとしても動かず、文字通り引っ張れない感じです(後で録画共有します)

@slofp
Copy link
Contributor Author

slofp commented Oct 23, 2023

できるときで共有していただければと!

一応私が知っている限りで引っ張れないパターンなのがこれくらいしか思いつかないです...

reloadPR3

(上記のパターンはデバイス判定でtouchmoveではなくpointermoveになって起こる)

@syuilo
Copy link
Member

syuilo commented Oct 23, 2023

RPReplay_Final1698057946.mp4

@slofp
Copy link
Contributor Author

slofp commented Oct 23, 2023

あー...デバイス判定うまく行ってないっぽいですね

PointerEventが存在してかつdeviceKindがPCのときにpointermoveを使用してるようにしてるのでデバイス設定をタブレットにすると多分動きそうです...たぶん

@slofp
Copy link
Contributor Author

slofp commented Oct 23, 2023

ipados Safariはmacosらしい😇

https://scrapbox.io/shokai/iPadOS%E3%81%AEUserAgent%E5%88%A4%E5%88%A5

@syuilo
Copy link
Member

syuilo commented Oct 23, 2023

近年はプライバシーとかなんとかでUAはあてにできなくなってる

@slofp
Copy link
Contributor Author

slofp commented Oct 23, 2023

scrollStopってどんな役割なのかしら

scrollStopはスクロールY座標がscrollStop以上(タッチ操作の場合はscrollStopに引っ張ったときの長さ分加える)のときに強制的に引張イベントをキャンセルするために使います。
10と設定してあるのはMkPaginationの上部判定よりも前にキャンセルさせたいからです。

.frame > .contents > div として div へのセレクタがあるけど、コンポーネント上はそのような要素は無いように見える

これはMkLoadingのdivです。

@syuilo
Copy link
Member

syuilo commented Oct 23, 2023

ふむ
手元の確認ではscrollStopがどんな値であっても動作の違いが分からずまだピンと来てないわね
タッチ操作とそれ以外で違う計算にしているのはなぜかしら?

@syuilo
Copy link
Member

syuilo commented Oct 23, 2023

(あとそもそも非タッチ操作の場合はPull to Refreshできる必要がなさそうに思った)

@slofp
Copy link
Contributor Author

slofp commented Oct 23, 2023

scrollStopは一種のフェールセーフ的な意味合いがあります。
例えば引っ張っている最中にスクロールするとかのときにリロードさせないといった安全策です。

reloadPR4

(あとそもそも非タッチ操作の場合はPull to Refreshできる必要がなさそうに思った)

ごもっとも... スマートフォンでは自然とこの挙動をするのが当たり前みたいになってますがPCは引っ張る人とボタンを探す人がいそうだなと思ったので両方にしてました。

@slofp
Copy link
Contributor Author

slofp commented Oct 23, 2023

scrollStopの例がポインター操作に限定してたのであまり良くなかったですね。

scrollによる制御がなければタッチ操作で途中までのノートを見ているときに上にスクロールする動作をするとリロードが誤爆します

reloadPR5

またこれは補足として

PCは引っ張る人とボタンを探す人がいそう

スマホ表示でもいるかも知れませんが、つけていないのは限られたヘッダータブの幅を取らないようにするためです

@github-actions
Copy link
Contributor

github-actions bot commented Oct 27, 2023

このPRによるapi.jsonの差分

差分はこちら

Get diff files from Workflow Page

@syuilo syuilo merged commit c239058 into misskey-dev:develop Oct 30, 2023
17 of 18 checks passed
@syuilo
Copy link
Member

syuilo commented Oct 30, 2023

👍🏻 👍🏻 👍🏻

kanarikanaru pushed a commit to kanarikanaru/misskey that referenced this pull request Nov 2, 2023
* pc reloading

* add: disable TL websocket option

* fix: stream disconnect when reload

* add: pull to refresh

* fix: pull to refresh

* add changelog

* fact: change to disableStreamingTimeline

* lint

* remove: en-US text

* refactor

* refactor

* add license identifier

* tweak

* Update MkPullToRefresh.vue

* Update MkPullToRefresh.vue

* change name timeoutHeartBeat

* tweak

* 🎨

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
u1-liquid added a commit to MisskeyIO/misskey that referenced this pull request Nov 3, 2023
* feat(frontend): スワイプやボタンでタイムラインを再読込する機能 (misskey-dev#12113)
* tweak MkPullToRefresh
cheery-picked from 52dbab5
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
* enhance(frontend): improve pull to refresh
cheery-picked from d0d32e8
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
@Sayamame-beans
Copy link
Contributor

データセーバーのスイッチをタイムライン自動更新のスイッチの隣に置き直すのがいいかも

これはどうしますか

良い感じにしときます

これ、既に良い感じにされているでしょうか? (忘れられてしまっているような気がしました)
image

確認したサーバー: https://mi.7mi.site/ (develop追従タイプのサーバー)
確認したバージョン: 2024.3.1-2024.04.19.1-cd7f727

@slofp
Copy link
Contributor Author

slofp commented Apr 19, 2024

これ、既に良い感じにされているでしょうか?

(その後のコードがどう変わったかわからないのでこのPR上でですが)

文字通りタイムラインでのwebsocketからの受信をしないようにします

通知やその他のwebsocketに依存してるものは通常通り受信されているはずです

@Sayamame-beans
Copy link
Contributor

これ、既に良い感じにされているでしょうか?

(その後のコードがどう変わったかわからないのでこのPR上でですが)

文字通りタイムラインでのwebsocketからの受信をしないようにします

通知やその他のwebsocketに依存してるものは通常通り受信されているはずです

あっと…機能自体についてではなく、機能の切り替えスイッチの配置位置の話について気になっています

@slofp
Copy link
Contributor Author

slofp commented Apr 19, 2024

あっと…機能自体についてではなく、機能の切り替えスイッチの配置位置の話について気になっています

コミットではしゅいろさんが変えた形跡がないので忘れているか、それとも気にしていないかの2択ですね...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
packages/frontend Client side specific issue/PR
Projects
None yet
Development

Successfully merging this pull request may close these issues.

リアルタイム更新(WebSocket)を無効化するオプションを追加 Pull to refresh
4 participants