設定頁 v3 改版：外觀對齊面板、ⓘ 就地說明、四語在地化#5
Open
LCY000 wants to merge 30 commits into
Open
Conversation
- settingItems 加入 EnableMessageVoice（預設開），對應前端 getEnableMessageVoice() 控制 TTS 語音播報 - 新增 localization/zh-tw.json，並在 languageDicts 與語言選單註冊繁中 - 四語系補上 EnableMessageVoiceLabel / EnableMessageVoiceLabelHelp Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…查新版本更新」、密碼保護說明寫清楚、修語言下拉載入閃爍
- 主題藍改為更沉穩的深藍 #21509c（頂列漸層、開關、文字按鈕） - 說明圖示 ? → info ⓘ，點了在該列下方就地展開（取代會自動消失的 snackbar） - 標籤「介面在右下角預設最小化」→「浮動面板預設收合（停靠右下角）」（四語） - 密碼房說明改寫得更清楚（四語） - v2.buildme.html → v3.buildme.html（建構出 v3.html）；v2.html 改為轉址到 v3 - 移除無用頁面 v2.beta.html、v2_website.html 與對應 vercel 規則 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- 主題藍 #21509c → #3568c9（比原本淺藍深、又比深藍沉穩；保留漸層） - 每排「文字／ⓘ／開關」改 flex 上下置中對齊 - 語言下拉補上「日本語」選項，並讓語言清單預設含四語 - 文字訊息語音播報預設改為關（對齊新安裝預設配置） - 移除無用的 index.html（其引用的 /sw.js 本就不存在）+ 清掉 vercel sw.js 規則 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- 設定頁改為自己記住顯示語言（localStorage）：切換後立即變、刷新後保持， 不再依賴擴充回傳（修正「切了語言頁面卻不變」） - 文字聊天加上 ⓘ 說明（房內即時文字訊息） Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- 開關改精緻款（C）：飽滿膠囊、內陰影軌道、knob 微光（整體略高） - 「關閉原生 M3U8」加 ⓘ 說明並鎖定為開（關掉會無法同步 m3u8，且實際上一律停用原生） - 「檢查新版本更新」提示從貼螢幕底部的 snackbar 改成頂部置中膠囊 toast - 補上中英雙語 README（架構／建構／部署／新增開關／上游改動點） Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- 更新提示膠囊改用主題藍（與整體一致） - 語言下拉首選改「Auto（自動偵測）」；空值/auto 一律自動偵測瀏覽器語言（修正選空白變英文） - 「檢查更新」提示文案改為「已要求更新，重新整理後生效」（四語，較貼切） - README 改寫：中立專案口吻、中英以跳轉連結分隔、移除上游遷移段落與 repo 名稱 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Auto 選項移除「（自動偵測）」中文（其他語系使用者不會看到中文字） - 文字訊息語音播報預設改回開（文字聊天 UI 未做，語音是目前唯一的接收輸出） - 補充說明改為「開啟後會自動念出收到的訊息」（移除不正確的『只顯示通知』） Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
每秒 PostStorage 觸發的 message handler 原本無條件重設 MDUI 語言 select， 會把使用者展開中的選單關掉。改成只有語言值真的改變時才重設 select＋handleUpdate。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- 說明設定頁靠共用 storage 與前端連動，最佳開發方式是 clone 進前端 source/setting 一起跑、即時驗證連動（端到端） - 指向前端 repo 的 docs/<語言>/settings-linkage.md 與 development.md - 提醒這是獨立 git：commit/push 只動設定頁；build 會對 source/setting 做 git pull，本地未 commit 修改請先 commit 或用 disable_network Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
b836498 當初只改了成品 v3.html、未同步來源，導致一次建構後整段被舊來源覆蓋。 - localization/*.json：補 WaitForLoaddingLabelHelp、EnableMiniBarLabelHelp， MinimiseDefaultLabelHelp 改回詳細版，順過中文標點（少用分號） - v3.buildme.html：補 EnableMiniBar / WaitForLoadding 兩列的 ⓘ help-trigger 標記 - README：新增疑難排解，說明手改 v3.html 會被建構還原 已驗證 buildme + localization 可原樣重建出 v3.html。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VWMV8o6wrSQP8VcS3hcnEV
整理 2026-06-14~18 設定頁改版內容、與前端 PR（LCY000/VideoTogether → VideoTogether/VideoTogether）的搭配關係，以及上游化時可調整處（fork 提及、 vt.panghair.com 後端依賴、部署）。此檔僅供溝通，合併時可改寫或刪除。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VWMV8o6wrSQP8VcS3hcnEV
JS 仍引用早已從 UI 移除的 #EasyShare / #SuperEasyShare：querySelector 抓到 null， 後面的 .addEventListener / .checked 直接丟例外，使「掛監聽器」與「初始化 handler」 兩段 script 在抵達 settingItems 迴圈前就中斷。結果小窗顯示 / 文字聊天 / 文字訊息語音 播報三個開關完全沒掛上 change 監聽 → 切換不送 type 15、不寫入 storage → 影片頁讀到 undefined → getter 一律回傳預設 true，三個設定全失效。 移除這 4 行死引用即可讓兩段 script 跑完、settingItems 迴圈正常註冊。 Chrome headless before/after 實測：舊版三個開關皆不觸發且報 null 例外；新版三個皆 觸發 type 15、零載入錯誤。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DLPzZG5HthZcpk1BBm8C4i
在設定頁底部新增一張全寬「使用小技巧」卡片，內含兩則就地展開（預設展開、教學性質）的說明： ① 📌 把擴充釘選到工具列：點瀏覽器右上拼圖選單 🧩 → 圖釘 📌，之後一鍵打開小面板、隨時開關。 ② ⏸️ 暫時停用擴充：點工具列圖示打開小面板 → 把開關切到關 → 圖示變灰、不再於任何網頁出現；切回開即恢復（已開分頁可能需刷新）。 四語言（zh-tw / zh-cn / en-us / ja-jp）皆已撰寫，中文標點與語句通順。走 buildme + localization 來源後重 build v3.html，不手改成品。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DLPzZG5HthZcpk1BBm8C4i
把「使用小技巧」說明裡代表 Chrome UI 的兩個 emoji 換成單色內嵌 SVG，跟瀏覽器實際圖示一致： - 🧩 → Material `extension`（拼圖／擴充按鈕） - 📌 → Material `push_pin`（圖釘） 採內嵌 SVG 而非字型字符：實測 mdui 1.0.2 內附的 Material Icons 字型有 `extension` 但「沒有」`push_pin`（會顯示成文字），SVG 則與字型版本無關、用 currentColor 跟隨文字色、以 em 隨字級縮放。⏸️／💡 為通用符號故保留。四語言皆已替換，headless 渲染驗證對齊正常。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DLPzZG5HthZcpk1BBm8C4i
把上一版手寫近似的 SVG 換成官方 @material-design-icons 的 outlined 路徑： - 拼圖 extension（outlined）——對齊 Chrome 工具列那顆空心拼圖按鈕 - 圖釘 push_pin（outlined）——比手寫版更像真的釘子 兩個都用 outline、線條風格一致，跟隨文字色、em 縮放。四語言皆已替換，headless 渲染驗證對齊正常。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DLPzZG5HthZcpk1BBm8C4i
- 兩則小技巧（釘選／停用）的說明改為「預設收起」：移除 vt-help-open，點 ⓘ 才就地展開，跟其他設定的說明一致、頁面更乾淨。 - 「暫時停用」的藍色 ⏸️ emoji 換成官方 Material `toggle_off`（outlined）——語意就是教學講的「把開關切到關」，且與拼圖／圖釘同為 outline 線條風格。 四語言皆已替換，headless 渲染驗證收起狀態與圖示對齊正常。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DLPzZG5HthZcpk1BBm8C4i
圖釘窄、開關（toggle_off）寬，導致「把擴充…」與「暫時不用…」兩列文字起點錯開。 加 CSS 把 #PinTipLabel / #DisableTipLabel 的前導 SVG 固定成 1.35em 同寬同垂直對齊。 headless 實測兩圖示 left/right/width 完全一致（75.2 / 94.1 / 18.9px，diff=0）。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DLPzZG5HthZcpk1BBm8C4i
把兩列前導圖示包進固定寬度 .vt-tip-ico（1.9em）置中： - 留白：文字起點往右移，圖示與文字之間空間變大。 - 重心一致：圖釘高瘦、開關矮寬，原本視覺高度差很多（15.7 vs 9.4px）；改成圖釘 1.2em、開關 1.85em，實測視覺高度拉近到 14 vs 12.9px，並同軸置中、各自垂直置中於文字。 - 文字起點仍完全對齊（textLeft diff=0）。 四語言皆已套用，headless 量測 + 渲染驗證。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DLPzZG5HthZcpk1BBm8C4i
上一版把開關放大成一大一小（難看），改回： - 兩圖示同尺寸（1.35em），放固定 slot 置中 → 水平中心完全對齊（實測 icoCx diff=0，圖釘不再偏左）。 - 間距加大（margin-right 0.5em）。 - 前導圖示與行尾 ⓘ 都垂直置中於文字（實測 icon/ⓘ 與文字中心差 ≤0.8px）。 headless 量測 + 渲染驗證。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DLPzZG5HthZcpk1BBm8C4i
行尾的 ⓘ 原本 18px，比 14px 的中文字高一截，看起來不同高。 只把小技巧兩列的 ⓘ 縮到 15px（實測高度 15px 對文字 14px、中心差 0.56px，近乎等高對齊）， 其他設定的 ⓘ 維持 18px 不動。 headless 量測 + 渲染驗證。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DLPzZG5HthZcpk1BBm8C4i
撤回上一版把小技巧 ⓘ 縮成 15px 的做法。 實測比對「VideoTogether 設定」區與小技巧：兩者 ⓘ 都是 18px，但設定區 ⓘ 完美置中（center diff 0）， 小技巧因前導圖示(1.35em)撐高行高，使 ⓘ 偏低 0.6px。改用 position 上移 0.6px， 實測小技巧 ⓘ 變成 18px、center diff 0，與設定區完全一致（不縮小）。 headless 量測（設定區/小技巧 ⓘ 皆 18px、diff 0）+ 渲染驗證。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DLPzZG5HthZcpk1BBm8C4i
|
@LCY000 is attempting to deploy a commit to the VideoTogether Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
3. 超级无敌牛的轻松分享也被删掉了，这个会开启一个强力的资源嗅探
|
Contributor
这样的ui上的文字更像是代码注释，可以通过调整prompt让AI把界面上的文字表述调整成更像是给用户看的文字 |
Contributor
|
我的一个建议是第一个PR先引入style相关的改动，不改动item排列等等内容 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
哈囉，感謝維護 VideoTogether 🙏
這是設定頁（
v3）的一次較大改版（2026-06-14 ～ 06-18），期間很大一部分是在 Claude 協助下完成的，已盡量沿用上游架構。要不要採用、採用哪些，完全尊重你的決定。設定頁透過共用的擴充 storage 與前端連動。這裡新增／調整的開關（
EnableMiniBar、EnableMessageVoice、WaitForLoadding、MinimiseDefault…）需要前端對應讀取，建議兩個一起合：主要改動（摘要）
#5b8def、深色模式、列對齊zh-cn/en-uslocalStorage為準、修語言選單約 1 秒自動關閉的 bugzh-cn / zh-tw / en-us / ja-jp四語同步v3.html會被 rebuild 覆蓋，已把改動同步回v3.buildme.html+localization/*.json，README 補上疑難排解合併前可留意（詳見 UPSTREAM-NOTES）
videotogether.github.io、unpkg的 MDUI CDN、vt.panghair.com:5000語音後端），沒有任何 fork 部署網址；只有README.md兩處標了 fork 指路，可留可拿。v3.html由v3.buildme.html+localization/*.json建構，可照 NOTES 的方法驗證一致。感謝 🙏 — CYouuu（LCY000）