Various webui fix

fixes #742 Add save button for reordering instead of auto saving
2025-05-21 00:44:38 +08:00
parent 056c6f4693
commit 6571c11098
6 changed files with 85 additions and 65 deletions
--- a/src_assets/common/assets/web/PlatformLayout.vue
+++ b/src_assets/common/assets/web/PlatformLayout.vue
@@ -8,17 +8,9 @@ const props = defineProps({
 </script>

 <template>
-  <template v-if="$slots.windows && platform === 'windows'">
-    <slot name="windows"></slot>
-  </template>
-
-  <template v-if="$slots.linux && platform === 'linux'">
-    <slot name="linux"></slot>
-  </template>
-
-  <template v-if="$slots.macos && platform === 'macos'">
-    <slot name="macos"></slot>
-  </template>
+  <slot name="windows" v-if="$slots.windows && platform === 'windows'"></slot>
+  <slot name="linux" v-if="$slots.linux && platform === 'linux'"></slot>
+  <slot name="macos" v-if="$slots.macos && platform === 'macos'"></slot>
 </template>


--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -96,7 +96,7 @@
            :key="app.uuid"
            :class="{dragover: app.dragover}"
            draggable="true"
-            @dragstart="onDragStart(i)"
+            @dragstart="onDragStart($event, i)"
            @dragenter="onDragEnter($event, app)"
            @dragover="onDragOver($event)"
            @dragleave="onDragLeave(app)"
@@ -179,18 +179,17 @@
            <option value="disabled">{{ $t('_common.disabled') }}</option>
            <option value="auto">{{ $t('_common.auto') }}</option>

-            <Platformlayout :platform="platform">
-              <template #linux>
-                <option value="ds5">{{ $t("config.gamepad_ds5") }}</option>
-                <option value="switch">{{ $t("config.gamepad_switch") }}</option>
-                <option value="xone">{{ $t("config.gamepad_xone") }}</option>
-              </template>
+            <template v-if="platform === 'linux'">
+              <option value="ds5">{{ $t("config.gamepad_ds5") }}</option>
+              <option value="switch">{{ $t("config.gamepad_switch") }}</option>
+              <option value="xone">{{ $t("config.gamepad_xone") }}</option>
+            </template>
+
+            <template v-if="platform === 'windows'">
+              <option value="ds4">{{ $t('config.gamepad_ds4') }}</option>
+              <option value="x360">{{ $t('config.gamepad_x360') }}</option>
+            </template>

-              <template #windows>
-                <option value="ds4">{{ $t('config.gamepad_ds4') }}</option>
-                <option value="x360">{{ $t('config.gamepad_x360') }}</option>
-              </template>
-            </Platformlayout>
          </select>
          <div class="form-text">{{ $t('config.gamepad_desc') }}</div>
        </div>
@@ -427,44 +426,53 @@
            </tr>
          </table>

-          <div class="alert alert-info">
-            <i class="fa-solid fa-xl fa-circle-info"></i> {{ $t('apps.env_sunshine_compatibility') }}
-          </div>
+          <template v-if="platform === 'windows'">
+            <div class="form-text"><b>{{ $t('apps.env_rtss_cli_example') }}</b>
+              <pre>cmd /C \path\to\rtss-cli.exe limit:set %APOLLO_CLIENT_FPS%</pre>
+            </div>
+          </template>
+          <template v-if="platform === 'linux'">
+            <div class="form-text"><b>{{ $t('apps.env_xrandr_example') }}</b>
+              <pre>sh -c "xrandr --output HDMI-1 --mode \"${APOLLO_CLIENT_WIDTH}x${APOLLO_CLIENT_HEIGHT}\" --rate ${APOLLO_CLIENT_FPS}"</pre>
+            </div>
+          </template>
+          <template v-if="platform === 'macos'">
+            <div class="form-text"><b>{{ $t('apps.env_displayplacer_example') }}</b>
+              <pre>sh -c "displayplacer "id:&lt;screenId&gt; res:${APOLLO_CLIENT_WIDTH}x${APOLLO_CLIENT_HEIGHT} hz:${APOLLO_CLIENT_FPS} scaling:on origin:(0,0) degree:0""</pre>
+            </div>
+          </template>

-          <Platformlayout v-bind:platform="platform">
-            <template #windows>
-              <div class="form-text"><b>{{ $t('apps.env_rtss_cli_example') }}</b>
-                <pre>cmd /C \path\to\rtss-cli.exe limit:set %APOLLO_CLIENT_FPS%</pre>
-              </div>
-            </template>
-            <template #linux>
-              <div class="form-text"><b>{{ $t('apps.env_xrandr_example') }}</b>
-                <pre>sh -c "xrandr --output HDMI-1 --mode \"${APOLLO_CLIENT_WIDTH}x${APOLLO_CLIENT_HEIGHT}\" --rate ${APOLLO_CLIENT_FPS}"</pre>
-              </div>
-            </template>
-            <template #macos>
-              <div class="form-text"><b>{{ $t('apps.env_displayplacer_example') }}</b>
-                <pre>sh -c "displayplacer "id:&lt;screenId&gt; res:${APOLLO_CLIENT_WIDTH}x${APOLLO_CLIENT_HEIGHT} hz:${APOLLO_CLIENT_FPS} scaling:on origin:(0,0) degree:0""</pre>
-              </div>
-            </template>
-          </Platformlayout>
-          <div class="form-text"><a
+          <div class="form-text">
+            <a
              href="https://docs.lizardbyte.dev/projects/sunshine/latest/md_docs_2app__examples.html"
-              target="_blank">{{ $t('_common.see_more') }}</a></div>
+              target="_blank"
+              class="text-decoration-none"
+            >
+              {{ $t('_common.see_more') }}
+            </a>
+          </div>
        </div>
+
+        <div class="alert alert-info">
+          <i class="fa-solid fa-xl fa-circle-info"></i> {{ $t('apps.env_sunshine_compatibility') }}
+        </div>
+
        <!-- Save buttons -->
        <div class="d-flex">
          <button @click="showEditForm = false" class="btn btn-secondary m-2">
            {{ $t('_common.cancel') }}
          </button>
-          <button class="btn btn-primary m-2" :disabled="!editForm.name.trim()" @click="save">{{ $t('_common.save') }}</button>
+          <button class="btn btn-primary m-2" :disabled="actionDisabled || !editForm.name.trim()" @click="save">{{ $t('_common.save') }}</button>
        </div>
      </div>
    </div>
    <div class="mt-2" v-else>
-      <button class="btn btn-primary" @click="newApp">
+      <button class="btn btn-primary" @click="newApp" :disabled="actionDisabled">
        <i class="fas fa-plus"></i> {{ $t('apps.add_new') }}
      </button>
+      <button class="btn btn-warning float-end" @click="saveOrder" :disabled="actionDisabled" v-if="listReordered">
+        <i class="fas fa-floppy-disk"></i> {{ $t('apps.save_order') }}
+      </button>
    </div>
  </div>
 </body>
@@ -473,7 +481,6 @@
  import { initApp } from './init'
  import Navbar from './Navbar.vue'
  import Checkbox from './Checkbox.vue'
-  import Platformlayout from './PlatformLayout.vue'
  import { Dropdown } from 'bootstrap/dist/js/bootstrap'

  const newApp = {
@@ -496,13 +503,10 @@
    "gamepad": ""
  }

-  console.log(Platformlayout)
-
  const app = createApp({
    components: {
      Navbar,
-      Checkbox,
-      Platformlayout
+      Checkbox
    },
    data() {
      return {
@@ -516,7 +520,8 @@
        coverCandidates: [],
        platform: "",
        currentApp: "",
-        draggingApp: -1
+        draggingApp: -1,
+        listReordered: false
      };
    },
    created() {
@@ -529,7 +534,12 @@
        .then(r => this.platform = r.platform);
    },
    methods: {
-      onDragStart(idx) {
+      onDragStart(e, idx) {
+        if (this.showEditForm) {
+          e.preventDefault();
+          return;
+        }
+
        this.draggingApp = idx;
        this.apps.push({})
      },
@@ -575,8 +585,17 @@

        this.apps.splice(idx, 0, draggedApp);

-        const reorderedUUIDs = this.apps.map(i => i.uuid);
-        reorderedUUIDs.pop();
+        this.listReordered = true;
+      },
+      saveOrder() {
+        this.actionDisabled = true;
+
+        const reorderedUUIDs = this.apps.reduce((reordered, i) => {
+          if (i.uuid) {
+            reordered.push(i.uuid)
+          }
+          return reordered
+        }, [])

        fetch("./api/apps/reorder", {
          credentials: 'include',
@@ -590,18 +609,23 @@
          }
        })
        .finally(() => {
-          this.loadApps();
-        });
+          return this.loadApps();
+        })
+        .finally(() => {
+          this.actionDisabled = false;
+        })
+
      },
      loadApps() {
-        fetch("./api/apps", {
+        return fetch("./api/apps", {
          credentials: 'include'
        })
-          .then(r => r.json())
-          .then(r => {
-            this.apps = r.apps.filter(i => i.uuid).map(i => ({...i, launching: false, dragover: false}));
-            this.currentApp = r.current_app;
-          });
+        .then(r => r.json())
+        .then(r => {
+          this.apps = r.apps.filter(i => i.uuid).map(i => ({...i, launching: false, dragover: false}));
+          this.currentApp = r.current_app;
+          this.listReordered = false;
+        });
      },
      newApp() {
        this.editForm = Object.assign({}, newApp);
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -185,6 +185,7 @@
              "install_steam_audio_drivers": "enabled",
              "keep_sink_default": "enabled",
              "auto_capture_sink": "enabled",
+              "stream_audio": "enabled",
              "adapter_name": "",
              "output_name": "",
              "fallback_mode": "",
--- a/src_assets/common/assets/web/configs/tabs/General.vue
+++ b/src_assets/common/assets/web/configs/tabs/General.vue
@@ -126,6 +126,7 @@ onMounted(() => {
            <Checkbox :id="'prep-cmd-admin-' + i"
                      label="_common.elevated"
                      desc=""
+                      default="false"
                      v-model="c.elevated"
            ></Checkbox>
          </td>
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -39,7 +39,7 @@
    "app_name": "Application Name",
    "app_name_desc": "Application Name, as shown on Moonlight",
    "applications_desc": "Applications are refreshed when a session is terminated.",
-    "applications_reorder_desc": "Drag and drop apps to reorder them. Any changes made will terminate the current running app.",
+    "applications_reorder_desc": "Drag and drop apps to reorder the apps. Any changes made will terminate the current running app.",
    "applications_title": "Applications",
    "auto_detach": "Continue streaming if the application exits quickly",
    "auto_detach_desc": "This will attempt to automatically detect launcher-type apps that close quickly after launching another program or instance of themselves. When a launcher-type app is detected, it is treated as a detached app.",
@@ -102,6 +102,7 @@
    "resolution_scale_factor_desc": "Scale the client requested resolution based on this factor. e.g. 2000x1000 with a factor of 120% will become 2400x1200. Overrides client requested factor when the number isn't 100%. This option won't affect client requested streaming resolution.",
    "run_as_desc": "This can be necessary for some applications that require administrator permissions to run properly. Might cause URL schemes to fail.",
    "save_failed": "Failed to save app: ",
+    "save_order": "Save Order",
    "use_app_identity": "Use App Identity",
    "use_app_identity_desc": "Use the app's own identity while creating virtual displays instead of client's. This is useful when you want display configuration for each APP separately.",
    "virtual_display": "Always use Virtual Display",
--- a/src_assets/common/assets/web/public/assets/locale/zh.json
+++ b/src_assets/common/assets/web/public/assets/locale/zh.json
@@ -103,6 +103,7 @@
    "resolution_scale_factor_desc": "基于此比例缩放客户端请求的分辨率。例如 2000x1000 缩放 120% 将变成 2400x1200。当此项为非 100% 时覆盖客户端请求的缩放比例。此选项不会影响客户端请求的串流分辨率。",
    "run_as_desc": "这可能是某些需要管理员权限才能正常运行的应用程序所必需的。可能会导致 URL schemes 无法正常启动。",
    "save_failed": "保存APP失败：",
+    "save_order": "保存排序",
    "use_app_identity": "使用 App 身份",
    "use_app_identity_desc": "在创建虚拟显示器时使用 App 自身的身份，而非客户端的。这样可以针对 APP 进行单独的显示器组合配置。",
    "virtual_display": "总是使用虚拟显示器",