nokazn / ravyd

Spotify web client 🎵

Ravyd

Ravyd is an open source Spotify web client. Spotify premium account is required to play entire tracks.

Setup

1. Regisiter your application to Spotify

You need to register your application and get client ID & client secret to use Spotify Web API and Spotify web playback SDK in Spotify for Developers page.

For detailed explanation, please check out App settings guide.

2. Set environment variables

# packages/server/.env.development

CLIENT_ORIGIN=https://localhost:3000 # Required
PORT=5000
REDIS_URL=localhost # Required
REDIS_PORT=6379
REDIS_PASSWORD=<Your redis password> # Required
SESSION_SECRET=<Your session secret> # Required
SPOTIFY_CLIENT_ID=<Your Spotify Client ID> # Required
SPOTIFY_CLIENT_SECRET=<Your Spotify Client Secret> # Required
LOCAL_HTTPS=true # set to true If you use https local server

# packages/client/.env.development

CLIENT_ORIGIN=https://localhost:3000 # Required
SERVER_ORIGIN=https://api.localhost:5000 # Required
PORT=3000
LOCAL_HTTPS=true # set to true If you use https local server

You can use https local development server by locally-trusted certificates. You need to set LOCAL_HTTPS to true, and generate localhost.pem and localhost-key.pem by tools like mkcert and put them at project root.

Please refer to .env for client and .env for server.

3. Install dependencies

This project is managed by lerna. You can install dependencies for all packages by lerna bootstrap.

$ yarn global add lerna # or npm i -g lerna

# install dependencies for all packages
$ lerna bootstrap

4. Start application

This project uses Redis for session store. You can launch Redis by Docker.

# launch Redis
$ docker-compose up -d redis

# start development server at localhost:5000
lerna run dev --scope @ravyd/server --stream
# or start development server in Docker container
docker-compose up -d client

# start development server for client at localhost:3000
lerna run dev --scope @ravyd/client --stream
# or start development server in Docker container
docker-compose up -d server

If you want to launch client/server by docker-compose, you need to set environment variables in .env at project root. Please refer to .env.sample.

# build for production and launch server
$ lerna run build --scope @ravyd/server
$ lerna run start --scope @ravyd/server

# build for production and launch client
$ lerna run build --scope @ravyd/client
$ lerna run start --scope @ravyd/client

Scripts

# ESLint (fix option)
$ yarn lint
$ yarn lint:fix

# Stylelint (fix option)
$ yarn stylelint
$ yarn stylelint:fix

# Run vue type checks
$ yarn vtc

# Type checks
$ yarn tsc

Roadmap

• Play albums, artists, playlists & podcasts
• Create/Edit playlists
• Follow artists/users
• Spotify connect support
• Detailed search
• Synchronously playing tracks with other listeners
• i18n

License

MIT

ravyd's Issues

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

問題

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

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

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

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

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

すぐにやる

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

あとでやる

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

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

環境変数の取り扱い

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

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

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

スクロールバーの領域

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

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

問題点

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

キューのボタンの挙動

問題

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

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

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

カードのスタイル

About

全般

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

ReleaseCard

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

PlaylistCard

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

ArtistCard

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

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

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

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

ライブラリ (tracks) ページ

問題点

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

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

client/plugins/spotify配下の処理

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

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

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

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

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

参考

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

プレイリストの新規作成

やること

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

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

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

• 関数で渡すようにする

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

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

参考 : Track Relinking Guide | Spotify for Developers

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

すぐやる

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

あとでやる

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

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

再生リスト

問題点

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

解決策

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

その他追加したいこと

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

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

ログアウトの処理

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

アルバムの詳細ページ

すぐやる

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

あとでやる

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

mutation の名前を constant case にする

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

問題

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

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

問題

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

対処

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

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

概要

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

参考

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

ライブラリ (artists) ページ

問題

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

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

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

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

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

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

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

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

問題

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

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

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

アプリ内固有の型定義

• ReleaseInfo
• TrackInfo
• TrackDetail
• ArtistInfo

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

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

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

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

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

問題

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

解決

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

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

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

ディレクトリ構成

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