Add danmaku setting for html

2 weeks ago · 226e8792a9
parent 36a6766541
commit 226e8792a9
3 changed files with 136 additions and 11 deletions
--- a/app/src/main/assets/css/ui.css
+++ b/app/src/main/assets/css/ui.css
@ -319,6 +319,53 @@ html, body {

 .md-dialog-body .md-input { margin-top: 8px; }

+.md-dialog-list {
+    padding: 8px 0 16px;
+}
+
+.md-dialog-list-item {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 14px 24px;
+    font-size: 16px;
+    line-height: 24px;
+    color: var(--md-on-surface);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.md-dialog-list-item::before {
+    content: '';
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 2px solid var(--md-outline);
+    flex-shrink: 0;
+    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+}
+
+.md-dialog-list-item::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--md-primary);
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.md-dialog-list-item:hover::after  { opacity: 0.08; }
+.md-dialog-list-item:active::after { opacity: 0.12; }
+
+.md-dialog-list-item.active { color: var(--md-primary); font-weight: 500; }
+
+.md-dialog-list-item.active::before {
+    border-color: var(--md-primary);
+    background: var(--md-primary);
+    box-shadow: inset 0 0 0 4px var(--md-surface-container-high);
+}
+
 .md-dialog-actions {
    display: flex;
    justify-content: flex-end;
--- a/app/src/main/assets/index.html
+++ b/app/src/main/assets/index.html
@ -36,6 +36,20 @@
            <!-- 彈幕 -->
            <div id="panel3" class="tab-panel">
                <div class="panel-content">
+                    <div class="field-row">
+                        <div class="md-field">
+                            <button class="md-btn md-btn-tonal md-btn-full" onclick="showDanmakuModeDialog()">
+                                <span id="danmaku_mode_label">滾動</span>
+                                <svg style="margin-left:auto;flex-shrink:0" width="18" height="18" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5z" fill="currentColor"/></svg>
+                            </button>
+                        </div>
+                        <div class="md-field">
+                            <button class="md-btn md-btn-tonal md-btn-full" onclick="showDanmakuSizeDialog()">
+                                <span id="danmaku_size_label">預設</span>
+                                <svg style="margin-left:auto;flex-shrink:0" width="18" height="18" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5z" fill="currentColor"/></svg>
+                            </button>
+                        </div>
+                    </div>
                    <div class="md-field">
                        <input id="danmaku_text" class="md-input" type="text" placeholder="請輸入彈幕內容..." />
                    </div>
@ -100,6 +114,29 @@
            </div>
        </nav>
    </div>
+    <!-- Dialog: 彈幕模式 -->
+    <div id="danmakuModeDialog" class="md-dialog-overlay">
+        <div class="md-dialog">
+            <div class="md-dialog-title">模式</div>
+            <div class="md-dialog-list">
+                <div class="md-dialog-list-item active" data-val="1" onclick="setDanmakuMode(1,'滾動')"><span>滾動</span></div>
+                <div class="md-dialog-list-item" data-val="5" onclick="setDanmakuMode(5,'頂部')"><span>頂部</span></div>
+                <div class="md-dialog-list-item" data-val="4" onclick="setDanmakuMode(4,'底部')"><span>底部</span></div>
+                <div class="md-dialog-list-item" data-val="6" onclick="setDanmakuMode(6,'反向')"><span>反向</span></div>
+            </div>
+        </div>
+    </div>
+    <!-- Dialog: 彈幕大小 -->
+    <div id="danmakuSizeDialog" class="md-dialog-overlay">
+        <div class="md-dialog">
+            <div class="md-dialog-title">大小</div>
+            <div class="md-dialog-list">
+                <div class="md-dialog-list-item" data-val="18" onclick="setDanmakuSize(18,'小')"><span>小</span></div>
+                <div class="md-dialog-list-item active" data-val="25" onclick="setDanmakuSize(25,'預設')"><span>預設</span></div>
+                <div class="md-dialog-list-item" data-val="36" onclick="setDanmakuSize(36,'大')"><span>大</span></div>
+            </div>
+        </div>
+    </div>
    <!-- Dialog: 本地路徑 -->
    <div id="fileInfoDialog" class="md-dialog-overlay">
        <div class="md-dialog">
--- a/app/src/main/assets/js/script.js
+++ b/app/src/main/assets/js/script.js
@ -7,6 +7,9 @@ let longPressTimer = null;
 let longPressTriggered = false;
 let pendingDelFolder = null;
 let warnToastTimer = null;
+let danmakuMode = 1;
+let danmakuSize = 25;
+let dialogClosing = false;

 function search() {
    doAction('search', { word: $('#keyword').val() });
@ -23,14 +26,49 @@ function setting() {
 function sendDanmaku() {
    const text = $('#danmaku_text').val().trim();
    if (!text) return;
-    doAction('danmaku', { text });
+    doAction('danmaku', { text: `[0.0,${danmakuMode},${danmakuSize},16777215]${text}` });
    $('#danmaku_text').val('');
 }

+function showDanmakuModeDialog() {
+    $('#danmakuModeDialog .md-dialog-list-item').removeClass('active');
+    $(`#danmakuModeDialog .md-dialog-list-item[data-val="${danmakuMode}"]`).addClass('active');
+    openDialog('danmakuModeDialog');
+}
+
+function setDanmakuMode(val, label) {
+    danmakuMode = val;
+    $('#danmaku_mode_label').text(label);
+    closeDialog('danmakuModeDialog');
+}
+
+function showDanmakuSizeDialog() {
+    $('#danmakuSizeDialog .md-dialog-list-item').removeClass('active');
+    $(`#danmakuSizeDialog .md-dialog-list-item[data-val="${danmakuSize}"]`).addClass('active');
+    openDialog('danmakuSizeDialog');
+}
+
+function setDanmakuSize(val, label) {
+    danmakuSize = val;
+    $('#danmaku_size_label').text(label);
+    closeDialog('danmakuSizeDialog');
+}
+
 function doAction(action, kv) {
    $.post('/action', { ...kv, do: action });
 }

+function openDialog(id) {
+    $('#' + id).show();
+    history.pushState({ dialog: id }, '');
+}
+
+function closeDialog(id) {
+    dialogClosing = true;
+    $('#' + id).hide();
+    history.back();
+}
+
 function startLongPress(callback) {
    longPressTriggered = false;
    longPressTimer = setTimeout(() => {
@ -81,11 +119,11 @@ function addFile(node) {
 function selectFile(path) {
    currentFile = path;
    $("#fileUrl").text("file:/" + path);
-    $("#fileInfoDialog").show();
+    openDialog('fileInfoDialog');
 }

 function pushFile(yes) {
-    $("#fileInfoDialog").hide();
+    closeDialog('fileInfoDialog');
    if (yes === 1) doAction('file', { path: "file:/" + currentFile });
 }

@ -130,11 +168,11 @@ function onFileSelected() {
    if (files.length === 0) return;
    const tip = Array.from(files).map(f => f.name).join(', ');
    $('#uploadTipContent').text(tip);
-    $('#uploadTip').show();
+    openDialog('uploadTip');
 }

 function confirmUpload(yes) {
-    $('#uploadTip').hide();
+    closeDialog('uploadTip');
    if (yes !== 1) return;
    const files = $('#file_uploader')[0].files;
    if (files.length === 0) return;
@ -157,11 +195,11 @@ function confirmUpload(yes) {
 }

 function showNewFolderDialog() {
-    $('#newFolder').show();
+    openDialog('newFolder');
 }

 function confirmNewFolder(yes) {
-    $('#newFolder').hide();
+    closeDialog('newFolder');
    const name = $('#newFolderContent').val().trim();
    $('#newFolderContent').val('');
    if (yes !== 1 || name.length === 0) return;
@ -178,11 +216,11 @@ function confirmNewFolder(yes) {
 function showDelFolderDialog(path, refreshPath) {
    pendingDelFolder = { path, refreshPath };
    $('#delFolderContent').text('是否刪除 ' + path);
-    $('#delFolder').show();
+    openDialog('delFolder');
 }

 function confirmDelFolder(yes) {
-    $('#delFolder').hide();
+    closeDialog('delFolder');
    if (yes !== 1 || !pendingDelFolder) { pendingDelFolder = null; return; }
    const { path, refreshPath } = pendingDelFolder;
    pendingDelFolder = null;
@ -199,11 +237,11 @@ function confirmDelFolder(yes) {
 function showDelFileDialog(path) {
    currentFile = path;
    $('#delFileContent').text('是否刪除 ' + path);
-    $('#delFile').show();
+    openDialog('delFile');
 }

 function confirmDelFile(yes) {
-    $('#delFile').hide();
+    closeDialog('delFile');
    if (yes !== 1) return;
    $('#loadingToast').show();
    $.post('/delFile', { path: currentFile }, function () {
@ -235,5 +273,8 @@ history.replaceState(null, '');
 showPanel(tab);

 window.addEventListener('popstate', function () {
+    if (dialogClosing) { dialogClosing = false; return; }
+    const visible = $('.md-dialog-overlay:visible');
+    if (visible.length) { visible.first().hide(); return; }
    listFile(currentParent);
 });