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

---

@パパリウス さま
原因わかりました。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 さん

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

@パパリウス さま
　カスタムプロパティをご紹介頂いた時点で仕様については9割方完成していたものですから、
私の功績というより後は実装のための作業ということですね。
　いつもの通りパパリウスさまの方で新しいバージョンへのマージの方についてはお気持ちの通りやっていただいて結構です。

ところで、ｍｐｄのライブラリの楽曲から特定タグの指定文字列で検索し、抽出結果を表示させる機能についてはニーズありますでしょうか？（私個人的にはympdのみで運用するために欲しい機能の一つです。）
↑
具体的にはアーティスト名やジャンルを指定して検索すると、ヒットした楽曲が表示されるという使い方になるかと。
　来月まではちょっと時間が作れませんが、3月以降ならソースコードを見ながら足掻いてみることは出来そうです（現状不使用のコードと下調べの段階で実装できそうな気配だけは感じています）。
もし、ご入用でしたらお教え下さい。

v0.9.4から実装したカラーテーマについて
　@パパリウス さまの方で公式なドキュメントが作成されるのが筋かもしれませんが、
先に私の方でドキュメント化させていただきます。

１．何が出来るのか
　symphonic-mpdで使用しているWebインターフェースの外観のうち、各コンポーネントの配色を変更出来ます。

２．簡単な説明
　lightテーマ(従来のものと同じ白地背景のもの）
　外観上は従来のものとほぼ変わりありません。ただし、過去バージョンとは変更が加わっています（詳細は後述）。
　darkテーマ（今回追加対応）
　配色を暗めのタッチにしたものです。プラグインで変更できますが、今回のドキュメントではその仕組みとdarkテーマの改変（他のテーマ拡張）について解説します。

３．テーマの切り替え方法（とその解説）
　画面右上のメニューから「COLOR THEME」を選択すると、ダイアログが表示されます。
　中央の「Select Theme」から選択したいテーマを選択して下さい。
　（よく考えたら、現在選択中のテーマも何らかの方法で表示したほうが良いですよね。
　方法考えます。）

このときlightを選択した場合、以下のような動作が裏で動いています。
　/home/pi/plugins配下のskin.cssという名前のシンボリックリンクファイルが消去される。
　またdarkを選択した場合、以下の動作が裏で動いています。
　/home/pi/plugins/32-color/dark.css へのシンボリックリンクが/home/pi/plugins/へskin.cssという名前で作成される。

つまり、「v0.9.4でのympdではskin.cssというファイルが存在する場合はこのファイルに記述されたスタイルシートを利用して各コンポーネントの配色が変更される」ということです。

４．dark.cssの中身について
　以下の通りです。そのまま貼ってしまいます（文字コードはUTF-８で保存）。

/*　symphonic-mpdスキン対応用CSSファイル
 * このCSSファイルが存在する場合はCSSファイルに記載の値が反映されて
 * 外観の色が変更されます。
 * 値が未定義（もしくはCSSファイルが存在しない）場合は
 * 規定の白のスキンの値が使用されて表示されます。
 */
:root {
  --body-col: #c8c8c8; /*背景色*/
  --body-bgcol: #272b30; /*文字色*/
  --a-col: #2a6496; /*リンクの文字色*/
  --a-focus-col: #428bca; /*リンクフォーカス時の文字色*/
  --hr-border-col: #1c1e22; /*水平線の色*/
  --blockquote-col: #7a8288; /*引用部の境界色*/
  --form-control-col: #c8c8c8; /*フォームの文字色*/
  --form-control-bgcol: #3a3f44; /*フォームの背景色*/
  --panel-bgcol: #2e3338; /*パネルの背景色*/
  --btn-col1: #484e55; /*ボタンの背景色1*/
  --btn-col2: #3a3f44; /*ボタンの背景色2*/
  --btn-bdcol: #555555; /*ボタンの境界線色*/
  --btn-bg-repeat: no-repeat; /*ボタンの背景画像繰り返し*/
  --btn-hover-col1: #999999; /*ボタンフォーカス時の背景色1*/
  --btn-hover-col2: #555555; /*ボタンフォーカス時の背景色2*/
  --btn-hover-bdcol: #ffffff; /*ボタンフォーカス時の境界線色*/
  --modal-bgcol: #2e3338; /*モーダルダイアログの背景色*/
  --dropdown-bgcol: #3a3f44; /*ドロップダウンメニューの背景色*/
  --dropdown-hover-bgcol1:#999999; /*ドロップダウンメニューフォーカス時の背景色1*/
  --dropdown-hover-bgcol2:#555555; /*ドロップダウンメニューフォーカス時の背景色2*/
  --dropdown-hover-col:#ffffff; /*ドロップダウンメニューフォーカス時の文字色*/
  --progress-col1: #272b30; /*プログレスバーの背景色1*/
  --progress-col2: #111111; /*プログレスバーの背景色2*/
  --close-col: #ddd; /*クローズボタンの色*/
  --close-shadow-col: #272b30; /*クローズボタンの影色*/
  --pre-col: #f5f5f5; /*preタグの文字色*/
  --pre-bgcol: #ccc; /*preタグの背景色*/
  --cvs-bgcol: #ccc; /*グラフ領域背景色*/
  --table-hover-bgcol: #49515a; /*フォルダ・楽曲リストへのフォーカス時の背景色*/
  --table-active-bgcol: #3e444c; /*フォルダ・楽曲リストへフォーカス＋アクティブ時の背景色*/
  --table-nth-child-odd-bgcol: #3a3f44; /*表のうちnth-childの偶数行背景色*/
  --breadcrumb-bgcol: #272b30;/*フォルダ階層表示箇所の背景色*/
}

各パラメータの解説コメントがありますので、その気になれば現状のdarkテーマの配色を修正したり、新しいテーマを作ることが出来ると思います。
　もう少し解説すると、:rootで囲まれた{}の中身で”--”で始まる各行がCSSのカスタムプロパティと呼ばれるもので、いわゆる変数として指定可能な設計になります。
　CSSの書式としては各行の":"で挟まれる前半が定義名、後半が定義値となっており、必ず;で終わることとなっています。また/**/で挟まれた部分はコメントとなります。
　定義値の色指定としては英単語もしくは#に続き１６進数で３文字もしくは６文字で色を指定します（３文字の場合１6階調で0〜f、６文字の場合256階調で00〜ff）。数字と色の関係は赤・緑・青の順になっています。
　lightテーマではympdが元々使用しているCSSファイルの方にデフォルト値が指定されており、このカスタムプロパティが未定義の場合はデフォルト値が使用されることで以前の外観を維持しているわけです。

５．特定部のみ変更してみたい
　プラグインでdarkテーマに変え、dark.cssの変更したいカスタムプロパティの値を変えるだけです。
　その後、Webインターフェースをブラウザ上で再読込して下さい。

６．新しいテーマを作ってみたが「COLOR THEME」で追加で切り替えできるようにしたい
　/home/pi/plugins/32-color内で以下の変更をして下さい。ステップは２つだけ。
　念の為ファイルを変更する際はバックアップを取って下さい。
　①新しいテーマ用のCSSを当該ディレクトリ内に保存する。
　　（例えばorange.cssにしたとします。名前はご自由に付けて構いませんが、拡張子はcssにします。）
　②form.htmlを書き換える

<datalist id="skin-list">
    <option value="light" />
    <option value="dark" />
</datalist>

<div style="padding:20px 20px 5px 20px;">

  <label class="control-label">Select Theme</label><br/>
  <input type="text" class="run" list="skin-list" autocomplete="on" /><br/>

  <p>After setting the theme, reload the browser.</p>

</div>

3行目の<option value="dark" />に続き<option value="orange" />を追加して下さい。
　（orangeなのは前項でcssファイル名を仮にorange.cssにしたから。新たに作成したcssファイルと必ず一致させて下さい。）
　後はこのプラグインをympdで実行すると設定変更が可能になります。

７．カスタムプロパティに指定しているコンテンツ以外にもここの配色は替えられないの？
　残念ながら現状では不可能です（ympdの場合、カスタムプロパティのデフォルト値が入ったCSSファイルが実行ファイルにアーカイブ化されているため。）
　ただし、元のソースコード側で修正を加えることで将来対応は出来ると思います。ご相談下さい。

８．何故今回InternetExplorer１１が非サポートになったのか
　IE11はカスタムプロパティ非サポートのため、ympdのサポート対象からは外しました。
　Windows環境ではMicrosoftでもEdgeという最新ブラウザがあること、Firefox・Chrome・Vivaldiほか代替手段はありますのでご了承下さい。

９．v0.9.4でympdに対しての他の変更点
　①カバーアートモードでカバーアートの上部に楽曲名が表示されるが、
　　楽曲文字列に背景色の薄い透過色で枠が付いていたのを取りやめ
　　（従来は白地のため不可視でした）
　②キューモードのメニュー部分のゴミ箱アイコンに影があったが、
　　これを取りやめ
　③キューモードのメニュー部分真ん中に薄灰色で「search」と表示されるようにした。
　　ここはテキストボックスになっており、現在キューモードで表示中のライブラリ検索結果に対して
　　「テキストボックスに入力した語句にヒットした結果を抽出」出来るよう設計がされています。
　　lightモードの場合、配色上テキストボックスがわからないことがあったため表示させました。
　　（検索文字列を利用者が入力すると「search」は非表示になります。）

最後に
　私個人的には現状のdarkテーマもbestではなくbetterであると思っていますので、改良提案は大歓迎です。ぜひご提案をお待ちしております。

テーマ切替プラグインの拡張版（現在使用テーマ表示対応）
現段階のlightとdarkのみならば2者択一で背景色を見ればわかりますが、
将来的にそれ以上の数、背景色が同じで一部配色変更などの場合でも対応出来るようにプラグインを拡張しましたので掲載します。

使い方は従来と同じ。ただし、Current Themeのところに現在使用中のテーマ名が表示されます。

各ソースコードは以下のとおり。
・form.html

<script>
  $(function() {
    $('#stat').load("plugins/32-color/stat.txt?ver=" + new Date().getTime());
  });
</script>
<datalist id="skin-list">
    <option value="light" />
    <option value="dark" />
</datalist>

<div style="padding:20px 20px 5px 20px;">
  <label class="coltrol-label">Current Theme "<span id="stat">...</span>"</label><br/>
  <label class="control-label">Select Theme</label><br/>
  <input type="text" class="run" list="skin-list" autocomplete="on" /><br/>

  <p>After setting the theme, reload the browser.</p>

</div>

現在の選択テーマを表示するため、/home/pi/plugins/32-color/stat.txtを読込するように拡張

・run.sh

#!/bin/bash

PDIR=/home/pi/plugins
DIR=$(cd $(dirname $0); pwd)

if [ "$1" = "" ]; then exit 0;fi

case "$1" in
  light)
    rm $PDIR/skin.css
    echo $1 > $DIR/stat.txt
    ;;

  *)
    ln -fs $DIR/$1.css $PDIR/skin.css
    chown -h pi:pi $PDIR/skin.css
    echo $1 > $DIR/stat.txt
esac

exit $?

テーマ変更時、選択したテーマ名を/home/pi/plugins/32-color/stat.txtへ書き込むように設定。

インストール方法
　以下の３ステップです。
①/home/pi/plugins/32-color/form.htmlをこのスレッドに貼り付けしたものに書換して下さい。
②/home/pi/plugins/32-color/run.shをこのスレッドに貼り付けしたものに書換して下さい。
③以下のコマンドで/home/pi/plugins/32-color/stat.txtを予め作っておきます。
　lightモード使用中の場合

echo "light" > /home/pi/plugins/32-color/stat.txt

darkモード使用中の場合

echo "dark" > /home/pi/plugins/32-color/stat.txt

皆様へ
WebUIに関して「スマホ向け」に2点ほど修正を提案しようと思っています。

①キューモード時にカバーアートの右隣に楽曲名が表示されますが、
　中途半端な高さで表示が開始される点です。
　（私の試作では楽曲名がカバーアートの高さと同じ場所から
　書き出されるようになりました。）

②今回、皆さんにご協力をお願いしたい事項です。
　各デバイスでキューのスクロールバーがどのように表示されるか確認いたしたい。

（ゴメンナサイ。PCからのスクリーンショットのため横幅が大きいかもしれませんがご了承下さい）
スクリーンショットで注目して頂きたいのは、キュー表示の右端にあるスクロールバーです。

皆さんのお手持ちのデバイス・ブラウザで「スクロールバーはどの辺りに描画される」か確認頂きたいのです。

実はキュー表示はtable（表）を使っているのですが、最上行（TitleやArtistなどが書かれている行）とそれ以外の行（この場合はアーティスト名が書かれている行）では横幅が異なる場合があります。
ちなみに横幅には簡単に言うと以下のようなスタイルシートが記載されています。

• 最上行：
  スクロールバーは表示されない前提で最大幅
• それ以外の行：
  最大幅からスクロールバーの表示予定分減らす

このため、最上行の「ゴミ箱」アイコンとそれ以外の行の「＋」アイコンの列並びがずれているのがお分かりになるかと思います。
（よく見ると最上行とその次の行の間に横線が書かれているのですが、それも長さが異なる線が②本見えます）

各デバイス・ブラウザでのスクロールバーの見え方を事前に確認し、
この「最大幅からスクロールバーの表示予定分減らす」を止められる場合、
スタイルシートの修正を提案したいと思います。
（ここの記述についてはスマホ向け・PC向け共通であるため全デバイス影響を受けるため
事前の調査が必要と考えました。）

動作確認結果（2020-03-08 21:00時点）

確認結果についてはこの書込に続いて返信頂けると幸いです。
資料がまとまり次第、上の表に記述を追加していきます。
ご協力お願いいたします。

@sunatomo さん

iPad Pro 9.7インチ Safali

縦持ち

横持ち

iPhone8 Safali

縦持ち

横持ち

@パパリウス さま
早速のご協力、有難うございます。

ご提供のスクリーンショットではこの現象が発生してないようですので「何のことだか？」という気になるかもしれませんが、
私の手元でOnePlus6では日常的に発生していることとと
PC上のブラウザでデベロッパーモードにした場合はそれなりの確率でズレることから
対策してみたいと思った次第です（ま、重箱の隅を突く感じになりますけどね）。

参考にOnePlus6でこの現象が発生している際のスクリーンショットを掲載します。

ブラウザのデベロッパーモードで各タグのプロパティを見ると、Titleのthタグの横幅と各楽曲名のtdタグの横幅でおおよそ12ピクセル差があります。

@sunatomo さん

Web UI改善の取り組みに大変感謝しております。

いろいろな端末・解像度・ブラウザの組み合わせでレイアウトの崩れが解消できれば素晴らしいことです。

iPhone/iPadでの確認はこちらでできますので、お申し付けください。

私の環境での表示を報告いたします。

Mac OS X El Capitan

Safari

画像では表示されていませんが、カーソルをリストの上に移動させるとスライダーが表示されます。

Chrome

こちらもSafari同様、画像では表示されていませんが、カーソルをリストの上に移動させるとスライダーが表示されます。

久々にFireFoxも起動させてみました。

メチャクチャですね(笑)

iPad OS 13.4（第6世代iPad）
Safari

こちらもリストをスライドさせると、スライダーが現れます。

以上です。

@ジャイアン さま、情報提供有難うございます。
2点ほど確認させて下さい。
①画像では表示されていませんが、カーソルをリストの上に移動させるとスライダーが表示されます。
→このときのスライダーは「＋」ボタンのすぐ右隣で私が提示したような段差に収まる形になりましたか？
　それとも、他の画像例のように「＋」ボタンの右隣かつ「＞」の左側でしたでしょうか？

②Firefoxについて
　推察ですが、かなり前のバージョンで使用されていませんか？Windows10でIE11で表示した場合とかなり似ているもので...
　（IE11で表示した場合、プラグインメニューのGoogle Material Iconsが英文表記され、通常操作アイコン・リンクも黒色のままでした。）

@sunatomo さん

それとも、他の画像例のように「＋」ボタンの右隣かつ「＞」の左側でしたでしょうか？

こちらのパターンになります。

②Firefoxについて
　推察ですが、かなり前のバージョンで使用されていませんか？

かなり古いバージョンでした！スイマセン！
最新バージョンでは正しく表示されます。

@sunatomo さま　遅ればせながら iPhone 11 Pro の場合です。

①楽曲名はカバーアートと同じからスタートしたほうが良いと思います。
②スクロールバーは出ません。（MACBOOKでは出てきますが、これをクリック出来ません）

アルバム選択画面でディレクトリ表示がカバーアートの上に表示されます、その高さ分だけスタート・ストップのアイコンが上にスクロールされ
カバーアートが隠れます。
スタート・ストップアイコンとディレクトリ表示のエリアを初めからとっておきカバーアートにかからないようにしてはどうかと思います。その広がったところに経過時間の数値だけでも表示できたらと思います。アイコンが上に乗っていないカバーアートの方が気持ちいいですよね。

@ジャイアン さま

かなり古いバージョンでした！スイマセン！
最新バージョンでは正しく表示されます。

スタイルは正しく読み込まれているようですが、逆にキューのデータが最上行より幅が広いという
謎の現象ですね...（このパターンは初めてみました）

@miyt さま
経過時間/トータル時間の表示だけならば、現状のタイトルで作ることの出来た高さ方向の余裕を上手く使うと実現出来るかもしれません。
カバーアートが隠れるのは「mpdのツリーを見せる」ために考えた仕様になります。
逆にボタンを押してキューのテーブルを下にずらすというのもアリかもしれませんが、ここらへんはデザインセンスが必要ですね。

@パパリウス さま
　メールを立て続けに送るとウザいのでこちらで。

結局Androidスマホで行幅がズレる原因、分かりました。
mpd.jsの205行目付近

  if (touchDevice)
    $("table.table-headerfixed tbody").css("padding-right", "12px");

が原因ですね。スマホのみpadding-right１２ｐｘが追加される仕様です。
これを消すことによりどういう影響が出るのか検証が出来ていないため、
「今はここまで」の調査ということにします。
↑
通常使っているVivaldiのDevelopper Toolでは分からず、
FireFoxのそれでGalaxyS9をエミュレートしたら掴むことが出来ました。

ちなみにスタイルの見栄えに協力頂いた方々やこちらをご覧の方々へ
成果としては上記に書いた「Androidスマホで位置がズレる」以外の対策を行ったソースコードを
パパリウスさまにお返ししました。
あと、2月の3連休で対応しきれなかった機能も追加しています。
どのタイミングでお目見えするかはお楽しみに。

今後のWebUI改善の方向性について

3連休でソースコードは手を入れていたのですが、ちょっと以下の問題が今日になって発生したので対応を考えているところです。

• 以下のエラーが計測されて一部のプラグインが動作しなくなった

WebSocket connection to 'ws://smpd.local//ws' failed: Could not decode a text frame as UTF-8.

手元で動かなくなったのはDISK USAGEなのですが、
ラズパイサーバのレスポンスをWebブラウザが受け取った時点でWebSocketが異常終了し、
上のエラーが記録されてしまいます。
対策としてはログの通り「WebSocketでの文字列を全てエンコードして送るしか無い」のかなぁと思っていますが...

ま、それはさておき、現状のWebUIで上記に書いた対応を含めて
「ここを改善したほうが良いかなぁ」というネタを以下で記載します。
（取り敢えず、当方でアイデアがありすぐ出来そうなものを中心に記載します。
技術的・画面サイズ的に困難なものは今後の検討ということで）

１）キューモード時の楽曲情報欄（カバーアート右側の文字列群）の修正について
　本件については以前も書きましたが、スマホの場合カバーアートの高さ一杯に楽曲名が表示されない仕様のためこれを修正したいと思います。

また、Another HTML Lintで現状のHTMLを採点した結果、
本件に関連したところで幾つか減点されている使い方がありました（H？タグを連続使用など）ので、
併せてそこを直していきます。

2)楽曲一覧の各カラムの幅が揃わないことがある点
　ほぼ解析は終わりました。あとは実際に落とし込みをしていきたいと思います。

いよいよ、ここからが本番領域となります。
3）PC・タブレット使用時の各モード切替ボタン領域の幅について
　キューモードと・カバーアートモードを切り替えするボタン領域（画面の左・右端）はPC・タブレットの解像度では画面幅の10%づつを使用するようにスタイルシートが既定されています。
　私はここの幅を「上限値を持たせて楽曲表示領域を広げる」ほうが良いと思いますが如何でしょうか？

4)キュー・プレイリストのページ切替ボタン（PREV・NEXT）のスタイルについて
　現在白地青文字になっているため、これもカスタムプロパティ対応としたい。
　原則他のボタンと同じ発色にして統一感を持たせたいと思いますが如何でしょうか？

5)optionで選択可能なテキストボックスへの消去ボタン対応について
　プラグインでパラメータを入力するテキストボックスには、複数の選択肢が用意されているものもありますが、既定値が格納されている場合、選択肢を選ぶことが出来ません。
他の選択肢表示のためには現在の値を一旦消去する必要がありますが、一度マウスカーソルで当該テキストボックスを選択してからDeleteキーで消す必要があります。

実は消去ボタン付きテキストボックスの試作を行ったのでこれを共通設定にして他のプラグインからでも使えるようにしてはということです。

試作中のプラグインの表示例
「ANY」と書かれているテキストボックス内の×を押すと中身が消去される。

6)楽曲情報のスクロール対応
キューモードのカバーアート右部分とカバーアートモードの上部に表示される楽曲情報の文字列をスクロールさせようかと考えています。
（キューモードの文字列は左揃え・カバーアートモードは中央揃えのため、
これに併せたスクロールが必要）

以下のネタはもう少し先の話になりそうですが、アイデアはあります。
（ただし対応には時間がかかりそう）
7)楽曲ファイル埋め込みカバーアート対応
　最新版のMPDとこれのライブラリでは楽曲ファイル埋込みカバーアートに対応したようです。
RaspberryPi４版ではMPDが最新版に刷新されたので、上手く行けば利用できそうです。

8)ローカルの楽曲を一時的にRasPiに複写して再生
　現在WebUIで使用しているHTTPサーバ(mongoose)のパッケージを最新版に差替すれば容易に対応しそうですが、差替の工数が今の所全然見えません。

もし皆さんもWebUIを使用してみて「こうしたら？」とかありましたら、お教え下さい。

@sunatomo さん

検討ありがとうございます。

1 )〜 8 )まで全て賛成です。

8 ) の機能は、音源をNASで管理していない人向け、、、でしょうか。NASに繋がらない環境で、ラズパイと端末だけで再生する、、、といった使い方もできるかもしれませんね。
想定されている利用シーンを教えてくださると、イメージが湧きそうです。