ympdのスタイル変更について

---

個人的にも気になりましたが、symphonic-mpdのダークテーマ提供について自分から提起したこともあり、パパリウスさまに現行バージョンのympdをパッケージ化したものを提供頂いて取り急ぎhtmlとcssを解析した結果を書きます（まずは　12月5日時点ということで）。

• ympdではbootstrapというフレームワークを使っています。
  　デフォルトで提供されているbootstrap.cssとbootstrap-theme.cssを直接編集しても
  　スタイルは当然変更できますが、スタイルの継承と上書きを考えるとympd特有のスタイル
  　を記載している「mpd.css」ファイルを外出ししてこれを切り替えしたほうが得策と思われます。

• スタイルの解析については一部の要素を除き大体記載がわかりました。
  　今の段階で残っているものは
  　　プラグインのボタン背景色
  　　プラグインでのテキストボックスの背景色
  　　ディレクトリ・楽曲リストの背景色
  　と言ったところです。
  　ただし後述しますが、ympdをスタイル差替が可能な形でのビルドが終わっていないので、
  　実際に走らせたところで不明点が増える可能性はあります。

• 今後の予定
  　現状ではympdのソースコードからHTMLとCSSだけブラウザに表示させながら
  　ソースコードエディタで記述を確認＋スタイルを一時変更するという形で解析を行ってきましたが、
  　やはり実機で動く状態が必要な段階に来たと思っています。
  　先述の通り、mpd.cssのみ外出しした状態でympdをビルドし、利用者がスタイルを変更できる
  　ような環境を整備します。
  　→うまく行けば、今年中に面白いものがお見せ出来るかもしれません。

ちなみに参考ですが、解析には以下のものを使用しました。
　ブラウザはvivaldi(F12開発者モードが動作する近代的なブラウザならなんでもOKでしょう）
　ソースコードエディタはVisual Studio Code

@sunatomo さん

状況のご報告ありがとうございます。
最終的にはいくつかのテーマ(スキンというのですかね)から好みのものを選べるという形がとれればいいなぁと思います。もちろん勝手なお願いですので、やりやすいように進めて下さいませ。

現レベルでの動作状況を報告します。
結局CSSの継承はそのまま同じタグを記載した場合は部分的に反映させることは難しそう
（私の調べた限りでは再定義した場合、そのタグは全て初期化される)
ということが分かりましたので、
bootswatch.comというテーマをフリーで提供するサイトからbootstrapのテーマをダウンロードして、
これを元に開発する方向となりました。
今回使ったテーマはslateというものです（ダウンロードしたものはympdで使用するbootstrapv3.1対応のもの）。

一応開発途中のものを成果としてアップしますので、人柱上等の方はお試しください。
ympd_20191208.zip

インストール方法：
　①zipファイルを解凍します。たとえば/home/pi/work/ympdなどのホームディレクトリ内に
　　解凍して下さい。以下は記載のディレクトリに置いた前提で書きます。

以降、②〜④まではsudoでroot権限のコマンド実行が必要になります。
　②ympdは/usr/local/binにあるそれと差替
（現行のものは元に戻す際に必要になりますのでympd.orgとでも名前を付けて下さい。）

sudo mv /usr/local/bin/ympd /usr/local/bin/ympd.org
sudo cp ~/work/ympd/ympd /usr/local/bin/

③cssフォルダ内部のbootstrap.cssとbootstrap-theme.cssは/var/lib/mpd/music配下にcssという名前のフォルダを作ってそこに複写して下さい。

sudo mkdir /var/lib/music/mpd/css
sudo cp ~/work/ympd/css/* /var/lib/music/mpd/css

④systemctl stop ympd.serviceの後、systemctl start ympd.serviceと入れてympdを再起動して下さい。
　⑤ブラウザでhttp://smpd.localを表示させます。

元に戻す方法
　①/usr/local/binのympdを消し、バックアップしたympd.orgをympdにリネームします。

sudo rm /usr/local/bin/ympd
sudo mv /usr/local/bin/ympd.org /usr/local/bin/ympd

②/var/lib/mpd/music配下のcssディレクトリとその内部を消します。

sudo rm /var/lib/mpd/music/css/*
sudo rmdir /var/lib/mpd/music/css

③インストール方法の④項目と同じくympdを再起動します。

!

不具合としては3点ほど
・アルバムアートと操作ボタンのみ表示された画面の最上部に線がみえますが、ここに再生中の楽曲名が実は表示されます。
　楽曲名を灰色の枠で囲う必要はなさそうなので、枠を消したいと思います。
・リスト表示のタイトル右上のところに「ゴミ箱」のアイコンがみえますが、ここに灰色の四角形がかぶっています。
・リスト表示でアルバム名を選択したところ、現在マウスカーソルのある行だけ背景色が変わりますが、
その高さが凸凹になります。

他に触ってみて気になるところがありましたら、お申し出くださいませ。
（例えば＋とかのリンク色は前の空色のほうが良かったとか。）

ちなみに副産物ですが、Titleの右横って検索バーなんですね。スタイル上白の場合は見えませんでした。ここにアルバム名を入れると自動的に検索して絞り込みを行います。
（私個人的にはここに”search"と初期表示したほうが良いかも）。

年末年始の時間の取れる際にスタイルシートのダークテーマ化と並行で
現状のympdで不足している機能について2つ対応しようとしています。

・キューでのアルバム名表示とアルバム単位での削除
　ネタとしては私の別スレッドで@hiroget9 さまが提案頂いていましたが、
　確かにあったほうが便利かと思いました。

・ローカル楽曲ファイルのHTTPストリーム再生
　PCなどの楽曲ファイルをympd経由でmpdに転送して再生する機能です。
　ライブラリに格納する前にちょっと聞きたい場合に便利かと。

正直この2つがあればmpdの6600ポートを個人的には閉じても良いかなと思っています。

キューでのアルバム名表示は本日時点で実現しましたので、サンプル提供します。ympd.zip
（アルバム名を楽曲の先頭に表示＋アルバム行のゴミ箱アイコンをクリックすると当該アルバムの楽曲をまとめてキューから削除）
↑
あと、アルバム内の楽曲を展開表示＋隠す機能は実装したいと思っています。

（シャッフルONの際はアルバム名は隠す機能はあったほうが良いでしょうか？）
すいません。シャッフルについては機能は実現したのですがボタンを押したタイミングでの動作が難しくちょっと様子見させてください。

ちなみに添付画像の表示は3つのアルバムをキューに格納した状態で、上2つのアルバムを縮小表示した状態です。
(嫌いではないけど2 Unlimitedなのは私のライブラリの先頭のアーティストがたまたまそうだっただけ。)

ローカルファイルのHTTPストリーム再生については現在調査中です。
恐らく/var/lib/mpd/musicに一時的にファイルアップロードし、再生後に消す方法になるのではないかと。
（Cantataなどではクライアント側にHTTPサーバを構築してストリームをmpdに再生してもらう方法のようですが）。
↑
本日試験を行ってみました。
PCに仮でlighttpdをインストールし、公開用ディレクトリにm4a・mp3・flacファイルを入れて「Add Stream」でPCへのURLを入れたところ、ympdで正常に音楽再生できました。
（わかっている人にとっては「当たり前」ですが、私にとっては「なるほど」という結果です。）
というわけで、node.jsあたりを使えばPC上でHTTPサーバが建てられるらしいので、このあたりを狙ってみようかと思います。

それ以外にも現状のympdで「こんな機能ないのか？」という要望がありましたらソースコードとにらめっこして見ますのでお声がけください。

最後にインストール方法
現状の/usr/local/binのympdをバックアップしてください。
ZIPファイル内のympdを/usr/local/binに複写してください。
ちなみに今回提供するものは現状のympdと外観はほぼ変わりません
（キュー・ディレクトリ表示の行頭部分に検索ボックスがありますが、そこに「search」と文字列追加した位です。）

@sunatomo さん

「キューでのアルバム名表示とアルバム単位での削除」への対応ありがとうございます。
アルバム単位で聴くことがほとんどの私にとっては、非常に助かります。
次のヴァージョンアップの際に組み込まれれば嬉しいです。
私も、このご対応で、6600ポートは閉じてしまっても、何ら不便はないと思います。

@sunatomo さん

v0.9.3のympdのソース一式をメールでご案内いたしました。
ご確認くださいませ。
（ファイルサイズが大きく、フォーラムにアップできませんでした）

多くの変更点がありますので、ご不明点があればご質問ください。

ダークテーマはぜひ取り込みたいですね。
どのように実装するか、ご相談させてください。

ソールコード受領いたしました。
まだよくは見ていませんが、jarファイルがあるということは構築時にJavaが必要ということでしょうか?
（明日は家の大掃除になりそうなので、正月の福袋としてソースコードの詳細は確認させていただきます。）

ダークテーマの件、配布は以下の2つの方法になるかと思います。
1.ympdの実行ファイルにbootstrap.css bootstrap-theme.cssを内蔵する場合
　複数色でこれらのファイルを入れ替えたものをその都度ビルドする。

2.上記のCSSファイルは内蔵しない場合
　/var/lib/mpd/music/cssディレクトリに上記ファイルを起き、プラグインの設定と連動でシェルスクリプトで当該CSSを書換してympdを再起動させる。

1案の場合は従来と全くファイル構成は変わりませんが、配布イメージが増量されますね。（更にWebインターフェースでのテーマ切替は恐らく不可能）

2案の場合はcssディレクトリが増えることで構成が若干変わりますが、その気になれば他のcssを使用することが可能になります。

@sunatomo さん

お送りしたソースに同梱しているjarはgoogle closure compilerというJavascript向けのminifierです。
https://github.com/google/closure-compiler

htdocs/mpd.jsの最適化に使っていますが、リリース版をビルドするときにだけ使うツールなので、あまり気になさらなくて結構です。

CSS内の色定義をCSS変数にして、javascriptから切り替えるような作りにできるといいなぁと思います。
ただ、IE11がCSS変数に未対応らしいので、完璧ではありません。
IE11はテーマ切り替えのサポート対象外と割り切るのもありかなぁと思っています。

@パパリウス さま
CSS変数の件、こちらに記載されている通りで認識は間違いございませんか?
上記の通りを前提に記載しますが「:root」にスタイルシートを変更する部分を追加で記載するという考え方はわかりましたが、
boootsrap.cssと別ファイルにこの部分を外出し出来るかが調査不足でわかっていません。実験してみます(bodyの背景色くらいならすぐできそうですので)。

あ、あと開発用機にはopen-jdk8入りましたのでそのままビルドが出来ることは確認出来ました
(デバッグの際はgoogle closure compilerが不要な件も内部確認で理解しました)。
年末に実施したアルバム名表示対応をマージしたもの、当方環境で動作を確認してからソースコードをお返ししますので少々お待ちください。

@sunatomo さん

CSS変数と書きましたが、正しくはカスタムプロパティなんですね。勉強になりました。

javascriptによるテーマ切り替えのデモンストレーションとして、簡単なプラグインを作ってみました。

32-color.tar.gz

/home/pi/plugins以下に解凍し、
cd /home/pi/plugins/attach; ln -s ../32-color
でシンボリックリンクを作ってください。

色の定義は、bootstrap.css内に約60箇所、bootstrap-theme.cssに約20箇所ありました。
これらのうち、背景色や文字色などテーマ切り替えに関係する箇所をCSS変数に置きかえて、:rootに変数定義と初期値の定義をしておけば、あとはjavascriptで好きなように切り替えできるようになるかと思います。

配色はjsファイルやjsonで保持しておき、Web UIを開いたタイミングで読み込んでCSS変数に代入していけばいいですね。

ユーザが選択したテーマは、専用のconfファイルを用意して設定を保存すればいいかと思います。
confを用意せず、.bashrcに書き込むのもいいですね。

私自身、どのような実装がよいのか、イメージが固まっているわけではありません。
あくまで実装の一例として参考になさっていただければと思います。

アルバム名表示対応のマージはとても助かります！
sunatomoさんにレクチャーしてもらってこちらでマージしようかな、、、と思っていたところです。

@パパリウス さま
v0.93版のympd向けのソースコードマージ分をお返ししますので、ご査収願います。ympd-diff_2020-01-03.zip

下記の改変箇所にもあります通り、当方判断で追加した機能もあります。
メインリポジトリへの反映はパパリウスさまでご判断頂いても結構です。
改変箇所
index.html
　172行
　　Title<input id="title-filter" のplaceholderに"search"を追加
　　（これにより検索ボックスに薄字でsearchが表示される）
　178行
　　<h6 style="position:absolute;top:4px; のあとに
　　<small class="glyphicon glyphicon-trash"
　　があるがこれを削除
　　（メインのゴミ箱アイコンの影として表示されていると思うが、他のゴミ箱には表示がないため不要と判断）

203行
　　<h4 class="text-center" style="background-clip: padding-box;"のstyleに続いて
　　border: 4px solid rgba(255,255,255,0.3);
　　と記載されていたが削除
　　（当該箇所は背景白の場合は非表示であったが、他の色を指定すると白の透過色で枠が表示される。）

mpd.js
　全般
　　jshintによるコードチェックによる修正（セミコロン抜けやオブジェクト・配列の指定方法など）
333行〜
　　function webSocketConnect() 内のswith (objtype)でcase "queue"を書き換え
　　書換ルールとしてはobj.dataの各楽曲にalbumが含まれるようになったため、
　　このalbumが前の楽曲が不一致の場合は別アルバムとしてアルバム名を記載の行を追加。

また、アルバム名記載行でゴミ箱アイコンをクリックした場合、当該アルバム内部の楽曲を
　　消す動作＋アルバム名の左隣の矢印をクリックした際は楽曲の縮小・展開が可能にした。

上記に伴い、末尾に関数2個追加（ outAlbumHeader, albumToggle）

1013行〜
　　$(document).keydown(function(e)
　　キー操作を追加
　　cでConsume、rでRepeat、sでShuffleをオンオフ（repeat/shuffleは画面上でのボタンの切り替えのみ確認）

mpd_client.h
　54行〜
　　MPD_API_RM_RANGE, MPD_API_MOVE_TRACKなど削除済みのコマンドを追加（アルバム削除のための対応）
　　（MPD_API_MOVE_TRACKは実際には今回使用していませんが、将来的にトラックの編集機能を実装したい場合は必要になりそうなので
　　あえて復活させました。）

mpd_client.c
　106行〜
　　MPD_API_RM_RANGE, MPD_API_MOVE_TRACKの実処理追加

555行〜
　　char* mpd_get_album, char* mpd_get_artistなど関数の生成
　　アルバム名・アーティスト名はこちらの関数で処理させることとした。
　　（確かsuperBFG7氏のympdフォークからの反映）

663行〜
　　int mpd_put_current_song以降の関数ではアルバム名・アーティスト名を返す仕様にした
　　（不必要なパケット削減を考えるとすべての関数でこれらの追加は不要かもしれません）

@sunatomo さん

マージしていただきありがとうございます。
さっそく確認してみます。
次のアップデートに含めたいと思います。

@パパリウス さま
カスタムプロパティ対応のhtml・cssの方、第1案出来ましたのでお送りします。
私個人の考えでは、「ここまで配色が変わればスキンとしてはとりあえずOK」かなと思っています。
ympd-htdocs.zip

スキンの切替方法はこれからの要相談ですが、とりあえず以下の通り動くように調整しました。
（以前頂いたプラグインはお試しさせていただきました。たしかにこの方法で配色変更可能ですね。）

・/var/lib/mpd/music/cssにskin.cssのみ置きます。
　それ以外のindex.html・*.cssはympdでビルドしてください。

・/var/lib/mpd/music/cssにskin.cssがある場合は、このカスタムプロパティ値に基づき、配色が変更されます。
　リネームなどでskin.cssが見つけられない場合は、各CSSの既定値に基づき配色が元の状態になります。

・一部bootstrap.cssやmpd.cssを改変しています。
　カスタムプロパティ適用時にボタン上のフォーカスでボタン全体に色がつかなかったため＋
　レイテンシーのグラフ表示の際に背景が黒だと見にくいための修正など。

あと、これは今回mpd.jsなどを直接触っての提案なのですが、各楽曲の右端アイコンが右向き三角形ですよね?
現状のympdでの挙動ではクリック＝キューへの追加のため、フォルダごと追加の際と同じく「＋」アイコンにしては如何でしょうか？
（個人的な感覚では右向き三角形＝再生ボタンのため）

@sunatomo さん

アルバム表示、テーマ切り替え、どちらも素晴らしい出来栄えですね！
skin.cssもカスタマイズしやすく、実装はシンプルで美しいです。

skin.cssの配布・インストール方法をちょっと考えてみたいと思います。

ところでqueueの一番最後の曲がダブって表示される現象があります。そちらでも再現しますでしょうか？

ダークテーマのスクリーンショット、coolですね！

@パパリウス さま

ところでqueueの一番最後の曲がダブって表示される現象があります。そちらでも再現しますでしょうか？

実は私も先のメッセージを送ったあとで同じ現象になっていたのを確認いたしました。
F12 developer toolで確認したところ、ympdのラズパイ側のサーバから返されるJSONでは正常な楽曲数が返されているため、
私がアルバム表示向けに拡張したキューの関係で何故か二重表示されているようです。

（正直な話、v0.92のソースコードを改変してそちらで正常動作していたものをv0.93向けに修正した状況でした。）
アルバム毎追加した場合、アルバム内に楽曲が10曲あったとしたら1〜10＋1〜10という形で楽曲が2回表示されることから、
outAlbumHeader()関数(アルバム名の行を追加し、そのアルバムの楽曲をその下に出力)の動作が悪さしていると推察されます。
（こちらでもバグだししてみます。少しお待ちください。）

追伸：mpdプラグインのconsumeボタン、現状では有効化表示しないのは私の環境だけでしょうか?
（consumeボタンをプラグインで外出ししたため、index.htmlのJavascriptからはstatusを受信しない限りは動作状況がわからない状態かと思います。
もし差し支えなければ、カバーアートモードの下左にアイコンのみのconsumeボタンを追加いただければと思います。）

@sunatomo さん

ご指摘ありがとうございます。
mpdプラグインのconsumeボタンがうまく動いていませんね。こちらで修正したいと思います。

@パパリウス さま
原因わかりました。mpd.jsの410行目付近の

          //if (!rnd) {
            if (alb !== "")
              html += outAlbumHeader(alb, startval, endval, html2);
          //}
          html += html2;
          $('#salamisandwich > tbody').append(html);

html += html2;を消してください（これが混入していたバグの原因でした。お手数おかけいたします。）

@sunatomo さん

情報ありがとうございます。
こちらでも正常動作することが確認できました。

@パパリウス さま
例のカスタムプロパティ向けCSSなのですが、一部修正いたしましたのでcss_2019-01-13.zip コチラに添付いたします（お送りしたファイルは今回修正したファイルのみ）。
修正内容：
　・ライブラリ絞り込み時の階層表示部分（breadfcrumb)が白色であったため、
　ここの表示色を変更するためのカスタムプロパティ追加。
　・ライブラリ表示部のテーブル内部のリンク文字色が他の文字色と異なるための修正

@sunatomo さん

アップデートありがとうございます。
こちらでもダークテーマで運用しておりまして、細々と気づいたところを手直ししています。
配色の手直しが本当にやり易くていいですね！
こんなメンテのしやすい美しい実装にしていただいて感謝です。