【提案】歌ってみた動画のメンテナンス性を良くしたい

:rabbit: 提案を思いついた経緯

歌ってみた動画が param 付きのサムネイルの URL のリストになっており、どれがどの動画か判断しづらいので、追加したり順番を変更したりが少し難しいように思いました。

:cat2: 提案の内容

歌ってみた動画のリストをサムネイルのURLの配列から Object 形式でデータを作成持つようにするのはどうでしょうか？

[
  'https://i.ytimg.com/vi/jis7E_mbwPw/hqdefault.jpg?sqp=-oaymwEYCKgBEF5IVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLDhHYwioPk-hofibrZgnyP3gQA7Pw',
  …,
]

👇

[
  {
    title: 'シンクロニティ by おめシス × BACK-ON',
    videoID: 'jis7E_mbwPw',
  },
  {...},
];

cf. こんな感じで変更した状態を作成してみています https://github.com/chaika-design/homepage/commits/refactor_music_player

補足

https://github.com/omegasisters/homepage/issues/291 で param 付きの jpg で webp の画像を表示するようにしていたようですが、<picture> 内の source と img でフォールバックが出来ているようなので、データ上は動画のIDだけ持って webp のサムネイル画像を下記で取得しても良いのかな〜と思いました。

https://i.ytimg.com/vi_webp/[VIDEO_ID]/[SIZE].webp

cf. https://gist.github.com/bojanvidanovic/0b31443827c2c424469da754376180d4

vi_webp で取得するのが良いのかどうか判断しかねる部分があり、変更ブランチが作ってあるのですがご意見を伺いたく 🙏

omegasisters / homepage

【提案】歌ってみた動画のメンテナンス性を良くしたい #364

:rabbit: 提案を思いついた経緯

:cat2: 提案の内容

補足