nokazn/ravyd

Spotify web client 🎵

OSS activities

• contributions on GitHub

Stats

ravyd's Issues

ライブラリ (tracks) ページ

問題点

• contextUri
• 再生ボタン
• テキストの折り返し
• 余白の調整
• vuex で管理?
• 曲の検索
  • クライアント側で一度全データを取得して保持しておく必要がある?
• nextUrl を保持しておいて、スクロールで随時取得
• addedAtの条件直す
• トラックの数が多くなるとDOM構築完了まで結構時間かかる

キューのボタンの挙動

問題

• trackUriListを指定してトラックを再生した場合、state が保持している分のtrackUriListしか指定できない
• related to #30

カード内のタイトルが長いとき省略する

Cookie でアクセストークンを渡す

プレイリストの description 内に html タグあるときの処理

• テキスト部分だけ抽出したい

スクロールバーの領域

• ヘッダーとその下コンテンツをスクロールさせるようにして、フッターの領域にスクロールバーを表示させたくない
• ヘッダーの下にスクロールバーがあってほしい
• layout/default.vue内で共通にスクロールの設定 (overflown-y: scroll;)すると全ページで遷移したときにスクロールバーの位置が共有されてしまう

スクロール位置に合わせてヘッダーの透明度を変える

フッターのプレイヤーで曲を保存したとき他に反映されない

問題

• ローカル state で曲の保存状態を保存している場合、フッターでお気に入りボタンを押してもページ内に反映されないのでどうにかする。

アルバムの詳細ページ

すぐやる

• 曲の長さ
• 曲のタイトル長かったら省略
• トラックが50以上の時の処理
  • スクロールして読み込み
• トラックが50以上の時の再生時間
  • #69
• ボタン
  • 再生ボタン
  • シェア
  • 再生リストに追加
  • プレイリストに追加
• copyrights
  • 🄫 か ℗ が含まれてなかったら文頭に追加
  • 文が同じならまとめる

あとでやる

• 関連アルバム 他のリリース
• ジャンル
• 曲名のところに他のアーティストの名前

引数をデコレータでチェック

client/plugins/spotify配下の処理

Media Session API で操作できるようにする

参考

• Customize Media Notifications and Handle Playlists  |  Web
• [Web] Media Session APIとメディア通知の表示 - Programming Field

Firefox で開くとログインできない

アクセストークン更新するタイミング

問題点

• アクセストークンを更新したと、Web Playback SDK のトークンをどう更新するか
• トークンの有効時間

プレイヤーの曲名をクリックするとアルバムに飛ぶようにする

• track の ID を URL に含めてしまっている
• アルバムの ID からリンクを生成する

セッション管理のストレージに Redis を使う

インメモリに保存するとメモリリークの可能性あり。

docker-compose 立ち上げ時のエラー

isPlayable が false のとき再生できないようにする

曲が途中のときに previous を押すと 0:00 になるようにする

リンクの中のアイコンに下線が引かれてしまう

問題

• .v-applicationクラスの<a>タグで hover したとき、`text-decoration: underline'を適用させており、これがアイコンにも適用される
• アイコンに text-decoration: none を当てても回避できない

ログイン状態によるルーティングの処理

• ログインしてなかったら/loginに飛ばす
• ログインしてたら/loginには行けない
• アクセストークンが期限切れの場合ログアウト

アーティストの認証マーク

エラーページが呼ばれると、プレイヤーが再び初期化されてしまう

フッターでトラックを操作する

• アートワーク
  • トラックの情報
• 曲名、アーティスト名 - related to #20
• トラックのコントロール
  • 前の曲、次の曲
  • 再生・停止
  • シャッフル
  • リピート - related to #13
• お気に入りボタン
• ボリューム操作
• デバイス選択

アーティストのアルバムが重複してる

異なるマーケットの同じアルバムが表示されてしまっている？

プレイリストでトラックを指定して再生すると 403 が返る

問題

プレイリスト内で、トラックを指定して再生したとき、Player command failed: Restriction violated で 403 エラーとなる場合がある。

対処

offsetプロパティ内でuriではなく、positionでトラックを指定すると解消されるっぽい。

初回レンダリング時に、背景色が変わらない

repeatState の切り替えで context が飛ばされる

$state の値が初期値のまま更新されない

• 関数で渡すようにする

ライブラリ (artists) ページ

問題

• 順番に取得したときの順番がよくわからない
  • アーティストをフォローして/library/artistsページに行っても先頭に追加されるわけではないので更新分だけを再取得みたいなことができない
• 検索
  • クライアント側で一度全データを取得して保持しておく必要がある?

context が変わらない場合、毎回 trackUriList を送信する必要はない?

公式のランキングのプレイリストの追加日

問題

spotifycharts が作成したプレイリスト (バイラルチャートなど) では追加日が 1970-01-01-T00:00:00Zになっている。

再生リスト

問題点

• Playback SDK の nextTrackList/previousTrackList では 2~3 曲ずつしか情報が返ってこない
  • アーティストの contextUri から再生する場面で、再生リストから曲を選択するとトラックのリストが変わってしまう

解決策

• contextUri を保存しておく
• アーティストページなどから再生を開始した場合 (trackList を配列で渡して /player/playした場合) は再生リストを独自で保持しておく

その他追加したいこと

• 再生時間を表示
• listItem をクリックしたときではなく、再生ボタンをクリックしたときに再生し、それ以外はアルバムページに飛ばす

SpotifyApi 呼び出し用のプラグインを定義する

環境変数の取り扱い

#9 でディレクトリ構成を変更したので、~/.envを見に行ってしまう。

検索結果をメニューで表示

ログアウトの処理

• redis のセッションとトークン捨てる

プレイリストの詳細ページ

すぐやる

• 背景色
• スクロールして更新
• 自分のプレイリストの場合は編集できるようにする
  • お気に入りボタンの箇所を編集ボタンにする
  • 編集されたら表示も更新
• 曲の保存状態の反映
• メニュー
  • 公開/非公開
  • 削除? (APIエンドポイントが存在しない?) unfollow
  • 複製
• 曲が 0 のとき
  • 再生ボタン無効化
  • contains を確認しない
• author リンクの幅
• 非公開のマーク

あとでやる

• メニュー
  • プレイリストradio
  • シェア

スクロールを予測させる影をつくる

アプリ内固有の型定義

• ReleaseInfo
• TrackInfo
• TrackDetail
• ArtistInfo

ディレクトリ構成

• serverとclientでディレクトリ分ける
• client内に Nuxt のプロジェクトを格納する
  • nuxt.config.tsのrootDirを変更する

Spotify 通信用の axios インスタンスを作成して使いまわす

• アクセストークンの付与をまとめてやる
• 401 エラーのときにリフレッシュトークンを使ってトークンを更新
• plugin として inject して呼び出せるようにする

プレイリストの新規作成

やること

• 画像アップロード
  • なぜか 403 エラーが出る
• 作成、アップロード失敗したときのメッセージトースト
• バリデーション
  • 名前
    • 必須
  • 説明
    • 改行コード
• プレイリスト一覧を更新

カードのスタイル

About

全般

• hover したときメニューボタンを右に表示
• hover したときお気に入りボタンを左に表示
• サイズの範囲
  • min & max または size の指定にする

ReleaseCard

• トラックのカードの場合、URL のハッシュにトラックの番号埋め込む

PlaylistCard

• descriptionをある程度のところで省略
  • Firefox for Android, IE 対応

ArtistCard

• アーティストのカードで画像がない場合の overlay
• カード全体のリンク

アルバム取得時にマーケットを指定する

マーケットを指定しないとマーケットを指定しても同じアルバムの複数のバージョンがでてきたりする。

参考 : Track Relinking Guide | Spotify for Developers

曲名、アーティスト名が長いときは ... で省略する

プレイリスト再生中に QueueButton から操作すると再生できない曲がある

問題

• related to #52
• 以前urisを指定して再生していた場合に初回ページ読み込み後に直接キューを操作したときのように、customTrackUriListが保持されていない状態で TrackQueueButton からトラックを操作した場合に発生
  • offset が uri での指定になる場合があり、プレイリストの再生時に 403 エラーが発生しうる
  • playback-sdk から提供されるトラックのリストでurisパラメータを書き換えてしまう

解決

• 初回読み込み時にキューを取得する
  • エンドポイントが現状存在しない

各ページの主要データ取得できなかったときのエラーページ

• /albums/:albumId
• /artists/:artistId
• /playlists/:playlistid
• /genres/:genreId

認証してユーザーページを表示

概要

• OAuth認証してユーザーの Spotify アカウントの情報にアクセスする
• AuthorizationResponseの型をMapped Typesにする

参考

https://developer.spotify.com/documentation/general/guides/authorization-guide/

mutation の名前を constant case にする

アーティストの詳細ページ

すぐにやる

• ディスコグラフィー一覧の更に表示ボタン
  • スクロールして読み込み
  • クエリパラメータで表示/非表示、offset の状態を持つ
• 関連アーティスト

あとでやる

• 人気のトラック
  • フィーチャーされたアーティストの表示改善
    • ページで表示しているアーティスト以外のアーティストを表示したい
• 最新のリリース
• ディスコグラフィー
  • アルバム
  • シングル・EP
  • 参加作品
• 関連プレイリスト
• ジャンル
• アーティストの詳細情報 (Wikipedia とかから引用できないか)