webui-plus開発/サポート（webui-plus development/support)

Castle

@sunatomo I think that in your future support plans item 4(b) is a nice to have but not a necessity, and likely difficult to implement. Thank you for considering this feature request.

sunatomo

リリース遅れのお詫び

9月25日リリースなどと書いていましたが、以下の理由で少し時間を頂きたくお願いいたします（なるべく早めに対応します）。

１．今回のソースコード変更による影響
　色気を出して ESlint によるコードチェックと書式統一まで有効化した結果、
　従来のループで使用していた "this" の取扱でエラーが発生し、これのバグ対策が必要になったため。
　（これについては、「いつかは通らねばならない道」だったのですが、今になって発現したというのが本当のところです．．．）

２．前回リリースでバグを発生させた機能のフィックス対応
　@kaamura さまご報告以外にも、何点か見つかりました。
　（スタイルに起因する問題があり、少しだけ時間が必要そうなため）

３．AoEプラグインの拡張対応
　@Castle さまご提案の Mac アドレス指定での vsound.service 対応の初期版を今回同梱したいと思います。
（今回提供するプラグインでは Mac アドレスは @ゴンザエモンさまにヒントを頂いた lsaoe コマンドで各自手動取得して頂き、
コピーアンドペーストで一番下の「Setting the vsound.service」のmac-address テキストボックスに貼り付けして頂きます。
貼り付け後に、「Setup」ボタンを押すとテキストボックスの値で /lib/systemd/system/vsound.service を書替後 vsound.service を再起動します。）

※lsaoe で返される Mac アドレスでは１６進数部分が”0f”(10進数で１５)以下の場合は一桁目が丸められるため、
そのまま貼り付けした場合は正常に動作しないかもしれません。
(例えば画面例の場合、私の環境では１６進数の６桁目が lsaoe の出力結果では "c" と返されていますが、貼付後に"0c"に書替しました。)

なお、入力された Mac アドレスの検査機能を実装できそうです。
(Mac アドレスの表記はいろいろありますが、 lsaoe コマンドの Target に準拠し「16進数の区切りは ":" 、2桁の16進数(a〜fは小文字)が 6個全て揃う場合」は正規の Mac アドレスと判断し、 -d オプションを指定し動作する。
Mac アドレスが空欄の場合はオプション無指定で動作する。)

sunatomo

すいません、どなたか lsaoe の複数バックエンド接続状態での出力をご提示頂けませんか?
もし、現在接続中のバックエンドの全 Mac アドレスが確認出来るならば、 lsaoe コマンドからvsound.service の -d オプション向け対象リストを生成出来るかもしれません。

udosan

@sunatomo さん
こんな感じです。
頭の0がなくなるのでちょっと判定が必要です。
うちの例だと
0fがfと表示されますが指定は0fである必要があります。

[root@archlinux ~]# lsaoe
TARGET [dc:a6:32:4:bd:8f]

  AoE STATUS : CLOSED
  AoE SESSION:      0
  AoE VSOUND : OPEN(0) (timeout:6 eof:0 intr:0)
  PCM PARAM  : S32_LE 96000 2 chunk_bytes:1280 period_us:1666
  AoE STATS  : aoe.dreq=16 aoe.recv=16  (count:18360327 timeout:12 recover:12)

TARGET [dc:a6:32:de:d8:f]

  AoE STATUS : CLOSED
  AoE SESSION:      0
  AoE VSOUND : OPEN(0) (timeout:6 eof:0 intr:0)
  PCM PARAM  : S24_LE 88200 2 chunk_bytes:1176 period_us:1666
  AoE STATS  : aoe.dreq=16 aoe.recv=16  (count:4080010 timeout:2 recover:2)

Castle

@sunatomo It will be a couple of days before I can do that.

sunatomo

@udosan さま
有難うございます。予想通りバックエンドの数量分だけ、”TARGET”部分は存在するんですね。

という訳で、以下の通り仕様を実装します。
１．プラグインを起動後 lsaoe コマンドを投入すると、その出力結果に基づいて mac-address テキストボックス向けの選択オプションが自動的に実装される（TARGET部分から自動抽出 Macアドレスの桁補正も自動で行う）。
２．無指定の場合向けに＜＜none＞＞も追加で実装される。
３．選択オプションで Mac アドレスを選択すると、vsound.service の -d オプションに指定の Mac アドレスが付与される。
＜＜none＞＞を指定した場合はvsound.service のオプションは無指定となる。
４．万が一リストにMacアドレスが存在しない場合、mac-address テキストボックスに直接文字列を入力可能。

sunatomo

@Castle
@udosan Provided the result.
I would appreciate your cooperation next time.

sunatomo

2021-09-28 版webui-plusの配信について

※本日8:27頃に最下行で記載したカバーアート以下が上部にずれるバグの修正版をアップしましたので、２８日にアップデートされた方は再度のインストールをお願いします。

リリースノートは以下のとおりです。

9-11版でのバグの修正
トラック名やアルバム名に ' が含まれている際のキューからの削除に失敗する件など、リリース後に判明したバグの修正を行いました。
リストモードでのカバーアート表示への対応
webuiプラグインでの「Cover Art in List View」をOnにして頂けると、
従来リストの表左端に表示されていたアイコン部分がカバーアートに変わります。
aoeプラグインでのvsound.service 対応
先の投稿の通り、lsaoeの素の状態で接続中のbackend端末の Mac アドレスを取得し、
このリストを元に接続先のbackendを選択可能にしました。
（当方環境では正常動作していますが、念のためお試しして動作報告頂けると幸いです。）
さらなるブラウザ上でのプログラム（JavaScript）の見直し
今後はESlintとlshintの双方を利用して、プログラムの整形と開発初期でのバグ混入を防止していきたいと思います。
また、グローバル変数を一部を除きconfigというオブジェクトに格納することで、開発中に各関数のローカル変数と誤認しないよう対策を行っています。

※一点だけ注意事項があります。私の動作環境の一部（linux版vivaldi 4.2.2406.48)特有かもしれませんが、
リストモードの表示切替を行っている際にメニューバーとカバーアートの余白が詰まってしまうという現象が発生しています。
いろいろ調査はしてみましたが、発生する原因については今の所不明です（webuiをリロードすれば元に戻りますが、スッキリしないのは事実です）。

ゴンザエモン

sunatomoさん

Web-UIのAoE CONFIG機能について、Arch Linux AoEの方でテストしようと思いますので、9月28日版のダウンロード先URLを教えていただけますでしょうか。

（9月12日版の日付を28日に変えただけでは「Not Found」になってしまうようです）

mgroovy

@sunatomo さん
【調査協力依頼】アドレスバーにより表示領域の下部がはみ出る場合についてですが、最新のwebui-plusで実施したところ下のところが表示されず、横棒バーと時間のところが表示されません。
iPhone SE のiOS15.0で最新のSafariです。
（追記：Safariの設定で85%表示にすると表示されました）

ちなみに以前の問題の件で一点気づいたのですが、最初にカバーアートが表示されるものを再生して、次の曲にカバーアートが表示できないものを再生した場合、最初のカバーアートが表示されたままで、
デフォルトの女の人の絵には戻りませんでした。
（追記：ブラウザをリフレッシュすると女の人の絵になりました。）

なお、リストモードのカバーアート表示の方は問題なく表示されています。
ご参考になれば。

sunatomo

@ゴンザエモンさま
先程Arch Linux AoE の方アップしましたのでよろしくおねがいします。

@mgroovy さま
iPhone SE での表示ですね。調整してみます。
（余白とカバーアートのサイズ変更で対応出来ると思います。）

カバーアートがない曲の初期化については思い当たる節がありますので、ソースコード追いかけてみます。

sunatomo

@mgroovy さま
お手数ですが、以下の２点対応できればお願いしたいのですが

iPhone SEでのカバーアートモードでプログレスバーと時間表示が切れる件、
実機のスクリーンショットこちらに貼り付け出来ますでしょうか？
（開発用PCでテスト表示した限りでは正常に表示されているため、
ちょっと現象が掴みづらい状況です）
WebuiプラグインでのCoverArt Filenameで現在指定しているチェックボックスの設定をお教え下さい。
あと、「カバーアートが表示されない楽曲」の場合、上記の設定では「同一フォルダ内にカバーアートとなるjpgファイルがない」状態ということで間違いありませんか?

mgroovy

@sunatomo さん
まず最初に85%縮小モードと100%モードでのスクリーンショットです。
85%縮小モード

100%モード

次にチェックボックスの設定内容のスクリーンショットです。

それで、「同一フォルダ内にカバーアートとなるjpgファイルがない」状態ではありません。ちゃんと同一フォルダ内にjpgファイルは置いてあります。リストモードの表示も張り付けておきます。
（24,25,26が再生中にカバーアートが表示されないもので、3,4は表示されるものです）

sunatomo

@mgroovy さま
ios15でのアドレスバーの件、正直高さの少ない画面上で全表示を可能にするには現状よりカバーアートを縮小させるか
スライダー他をカバーアートにかぶせる形で対応するしか無いかもしれませんね。

また、今回webuiプラグインのカバーアート関係のオプション開示（埋め込み以外全て）して頂き、
ソースコードを改めて確認した所 1点気づいた点がありました。

実は再生中のカバーアートが書替される条件としては「MPD から楽曲が変更した旨通知されたタイミング」なのですが、
現状のソースコードでは新しい楽曲の情報（タイトル・アルバム名・アーティスト名）と合わせて「当該楽曲のURLがMPDから返された場合はカバーアートが変更される」という処理でした。
テスト版として「URLの有無にかかわらず楽曲の変更時にカバーアートを書替えする」ように修正したものをリリースしてみます。

mgroovy

@sunatomo さん
アドレスバーの件ですが、一番上の曲名、アルバム名、アーティスト名の改行間隔を少なくしてみたらいかがでしょうか？そうしたら絵の部分も上にずれ、一番下のアドレスバーも入るようになるかもです。

sunatomo

PCでwebuiを使用している場合向けの試作レイアウトについて

日頃PCのブラウザにてwebuiを使用していて「Cantataなどの専用クライアンより余白が広くて表示を持て余しているなぁ」と感じている方はおられると思います。

という訳で、試作ですがこういうのも手元でちょろっと対応して見ました。
スクリーンショット 2021-10-03 11-48-50.png
最終版では調整がいろいろ必要な箇所も有ると思いますが、
リスト（もしくはグリッド）とカバーアートを1画面で左右に表示することが可能でした（修正したのは元のHTMLにスタイルシートを少々追加 + 不要なクラスの削除のみです。）

本日webui-plusのパッケージ入替(今回はaoeプラグインの差替と曲変更時のカバーアート書替処理の修正のみですが）時に、この試作版を入れてみますので、
お試し頂けると幸いです。

sunatomo

2021/10/04 版の webui-plus リリースについて

リリースログは以下の通り

aoeプラグインの差替について
arch linux aoe のスレッド通り、lsaoe の出力結果（Macアドレス）を各端末の Cookie に保存する仕様としました。
(Cookie の Macアドレス保存の有無に関わらず、aoeプラグインを画面上に表示した時点で「＜＜none＞＞」という選択肢が追加されます。
これを選択した場合、aoeの起動オプションは無指定になります。）
楽曲変更時のカバーアート書替アルゴリズムの変更
@mgroovy さまご指摘で処理を見直した結果、カバーアートの書替を曲変更時に必ず行うように処理を見直ししました。
（従来は mpd から当該楽曲のURIを受信した場合にのみカバーアート書替を実施していたが、内部的タイミングで URI が空のまま楽曲が変更されたと伝送される可能性が有ったため。）
PC向け表示（リスト＋カバーアート）の試作版同梱
お試しになりたい場合は以下の通りURLを入れてみて下さい。

http://(webuiのipアドレス)/index2.html
　もしくは
http://smpd.local/index2.html

とりあえず当方環境では（フルHDの解像度）では左右画面両立していますが、これよりも縦解像度が少ないとカバーアート側の表示が崩れると思います。
（今後開発継続の場合は縦768ピクセルまではちゃんと動作するようサポート予定。）

norinori

@sunatomo さん (cc @ゴンザエモンさん)

いつも精力的な対応ありがとうございます。aoe バックエンドの切り替え機能の UI 提供、誠にありがとうございます。パパリウスさんに本機能をお願いした張本人として、rpi4 フロントエンド v1.0 にて試してみたのですが、あいにくうまく動作しませんでした。以下、rpi4 フロントエンドにて実施した作業です。

(1) web-plus のインストール
(2) Web UI の PLUGINS 設定にて AoE CONFIG プラグインの有効化
(3) バックエンド1 (BE1) を起動後、NAS の音源を再生開始 (バックエンドとして BE1 しか起動されていないため、当然 BE1 にて再生される) した上で再生終了。
(4) バックエンド2 (BE2) を起動。
(5) Web UI の AoE CONFIG 設定にて leaoe を実行し、BE1 及び BE2 がどちらも表示されることを確認した上で、BE2 を "Setting the vsound.service" の mac-address にて選択し、"Setup" をクリック。
(6) "vsound.service restart success" のメッセージを確認後、"OK" をクリック。

上記操作の結果、てっきり、”/lib/systemd/system/vsound.service" の ”ExecStart=/usr/bin/aoe” に "-d <BE2 の mac-address>" が追加されているのではないかと想像していたのですが、変更されておらず、また、その後再生しても、前回再生していた BE1 で再生される状況となりました。
書き込み権限の問題もあるかと思い、"chmod 777 /lib/systemd/system/vsound.service" を実施してから (5) (6) の作業を繰り返してみましたが、結果は同じでした。

念のため、vsound.service を手動で変更し、"-d <BE2 の mac-address>" を aoe 起動時のパラメタとして追加してフロントエンドをリブートしたところ、期待通り、BE2 で再生できることは確認しています。

何か見落としている作業などありましたら、ご教授いただけますでしょうか。

sunatomo

@norinori さま
やり方としては上記でOKです。

すいません。同梱のファイルセット、 /usr/local/bin/vsound-setup.sh のパーミッション誤りで動作しないと思います。
パーミッションを以下の通り755に変更いただけませんか?

chmod 755 /usr/local/bin/vsound-setup.sh

（言い訳になりますが、aoeについては私の環境では arch linux aoe で検証を行っているため必要なファイルをそちらから複写していたのですが、
作業手順の忘れが発生したためでした。）

差替版のパッケージはこの後直ちに作成してアップします。

mgroovy

@sunatomo さん

楽曲変更時のカバーアート書替アルゴリズムの変更

こちらですが、同じ結果で直りませんでした。

そこで色々と試行錯誤したのですが、分かりました！
CoverArt Filename の指定のところの一番最後の
"last.fm's API"のチェックボックスを外してみたらちゃんと表示されるようになりました。
もう少し早くここに気づければ良かったのですが。。。
すみません。