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.

Sign up for GitHub

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

Jump to bottom

enhance(client): 1枚だけのメディアリストの画像のアスペクト比を画像に応じて縦長にする #10452

Merged
merged 45 commits into from
Apr 15, 2023
Merged

enhance(client): 1枚だけのメディアリストの画像のアスペクト比を画像に応じて縦長にする #10452

merged 45 commits into from
Apr 15, 2023

Conversation

tamaina
Copy link
Contributor

@tamaina tamaina commented Apr 2, 2023

Resolve #10450

What

  • メディアリストが1枚だけの場合、ノート内の画像をいっぱいに表示するように
    （ただしcontainerHeightの50%か50svhのうち小さい方を上限にする（ただし130pxを下回らない））
  • MkImgWithBlurhashのフォールバックのBlurhashは通常のobject-fitを(coverではなく)containに
  • その他型エラー修正

Why

画像を大きく表示したい

Additional info (optional)

動画は16:9で表示されるが、その理屈がよくわからない

Checklist

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

@github-actions github-actions bot added the packages/frontend Client side specific issue/PR label Apr 2, 2023
@github-actions github-actions bot requested a review from rinsuki April 2, 2023 15:34
@tamaina tamaina changed the title 1枚だけのメディアリストの画像のアスペクト比を画像に応じて縦長にする enhance(client): 1枚だけのメディアリストの画像のアスペクト比を画像に応じて縦長にする Apr 2, 2023
@tamaina
Copy link
Contributor Author

tamaina commented Apr 2, 2023

p1.a9z.devで動作中

@codecov
Copy link

codecov bot commented Apr 2, 2023 •
edited
Loading

Codecov Report

Merging #10452 (cc68f19) into develop (38fdc73) will decrease coverage by 0.55%.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           develop   #10452      +/-   ##
===========================================
- Coverage    76.05%   75.50%   -0.55%     
===========================================
  Files          897      734     -163     
  Lines        88521    68509   -20012     
  Branches      6247     5943     -304     
===========================================
- Hits         67327    51731   -15596     
+ Misses       21194    16778    -4416

see 164 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

@tamaina
Copy link
Contributor Author

tamaina commented Apr 3, 2023

スクショ

Screenshot_20230403-184655.png

@tamaina
Copy link
Contributor Author

tamaina commented Apr 4, 2023

vitest死んだな

@tamaina
Copy link
Contributor Author

tamaina commented Apr 4, 2023

propertiesがある前提だけどテスト内だけはPartialになっているのか

@tamaina
Copy link
Contributor Author

tamaina commented Apr 4, 2023

Partialな値は渡さず適当な値を加えて完全なオブジェクトを渡すようにしてみた

@tamaina tamaina closed this Apr 6, 2023
@tamaina
Copy link
Contributor Author

tamaina commented Apr 6, 2023

334px制限にしてみた

@tamaina tamaina reopened this Apr 7, 2023
@tamaina
Copy link
Contributor Author

tamaina commented Apr 7, 2023

オプションにするにしてもデフォルト有効にする？

@tamaina tamaina requested a review from syuilo April 7, 2023 16:14
@tamaina
Copy link
Contributor Author

tamaina commented Apr 9, 2023

これは確実に入れ込みたい

@syuilo
Copy link
Member

syuilo commented Apr 9, 2023

とりあえずopt-outでやってみるかしら

@tamaina
Copy link
Contributor Author

tamaina commented Apr 9, 2023

設定は作る

@tamaina
Copy link
Contributor Author

tamaina commented Apr 14, 2023

マージしたい

@syuilo
Copy link
Member

syuilo commented Apr 14, 2023

見る

@tamaina
Copy link
Contributor Author

tamaina commented Apr 14, 2023

  • min(334px, 50svh)上限の設定名は「おすすめ」にした
  • 1:1固定, 3:4固定を追加した

@tamaina
Copy link
Contributor Author

tamaina commented Apr 14, 2023

マージしたい（短気）

@tamaina
Copy link
Contributor Author

tamaina commented Apr 15, 2023

3:4は微妙だったので2:3にした

@tamaina
Copy link
Contributor Author

tamaina commented Apr 15, 2023 •
edited
Loading

min(334px, 50svh)上限の設定名は「おすすめ」にした

「デフォルト」にした

@tamaina
Copy link
Contributor Author

tamaina commented Apr 15, 2023

conflict resolved

@syuilo
Copy link
Member

syuilo commented Apr 15, 2023

今までの挙動をするのが「おすすめ」かしら？

@syuilo
Copy link
Member

syuilo commented Apr 15, 2023

16:9か

@tamaina
Copy link
Contributor Author

tamaina commented Apr 15, 2023

今までの挙動は存在しない

（16:9上限は近いけど、縮小はされるようになる）

@syuilo syuilo merged commit 15761a0 into misskey-dev:develop Apr 15, 2023
@syuilo
Copy link
Member

syuilo commented Apr 15, 2023

👍

na2na-p pushed a commit to na2na-p/misskey that referenced this pull request May 10, 2023
@tamaina @na2na-p
enhance(client): 1枚だけのメディアリストの画像のアスペクト比を画像に応じて縦長にする (misskey-dev#10452)
d0fcfae 
* ✌️

* fix

* ✌️

* 422px上限

* 334

* min-height: 130px

* 64px

* fix

* wip

* ✌️

* fix

* max-height: none

* MkImgWithBlurHashでratioを計算する

* wip

* fix

* fix?

* Revert "fix?"

This reverts commit e39d832.

* Revert "fix"

This reverts commit 15be36b.

* Revert "wip"

This reverts commit af7d86f.

* fix

* Revert "Revert "wip""

This reverts commit bb0036a.

* Revert "Revert "fix""

This reverts commit c1d94a4.

* Revert "Revert "fix?""

This reverts commit 9cb4fbf.

* fix

* use clamp

* readable

* add 1:1, 3:4

* moveComment

* 3:4 → 2:3

* fix

* default

* fallback

* Revert "fallback"

This reverts commit 741717d.

* Fix?(server): Content-Dispositionのパースでエラーが発生した場合にもダウンロードが完了するように
misskey-dev#10626
@tamaina
Copy link
Contributor Author

tamaina commented Jun 13, 2023

#11004 のような問題が起きるのでJavaScriptでaspect-ratioをしこしこ計算させた方が良かった…

@tamaina tamaina mentioned this pull request Jan 1, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@saschanaz saschanaz saschanaz left review comments

@rinsuki rinsuki Awaiting requested review from rinsuki

@acid-chicken acid-chicken Awaiting requested review from acid-chicken

@syuilo syuilo Awaiting requested review from syuilo

Assignees
No one assigned
Labels
packages/frontend Client side specific issue/PR
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

1枚だけのメディアリストの画像アスペクト比を画像に応じて縦長にしたい
5 participants
@tamaina @syuilo @saschanaz @MineCake147E @acid-chicken