Various webui fix

fixes #742
Add save button for reordering instead of auto saving

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

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 v-if="platform === 'linux'">
-              <template #linux>
+              <option value="ds5">{{ $t("config.gamepad_ds5") }}</option>
-                <option value="ds5">{{ $t("config.gamepad_ds5") }}</option>
+              <option value="switch">{{ $t("config.gamepad_switch") }}</option>
-                <option value="switch">{{ $t("config.gamepad_switch") }}</option>
+              <option value="xone">{{ $t("config.gamepad_xone") }}</option>
-                <option value="xone">{{ $t("config.gamepad_xone") }}</option>
+            </template>
-              </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">
+          <template v-if="platform === 'windows'">
-            <i class="fa-solid fa-xl fa-circle-info"></i> {{ $t('apps.env_sunshine_compatibility') }}
+            <div class="form-text"><b>{{ $t('apps.env_rtss_cli_example') }}</b>
-          </div>
+              <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">
+          <div class="form-text">
-            <template #windows>
+            <a
-              <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
               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,
+      Checkbox
-      Platformlayout
     },
     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);
+        this.listReordered = true;
-        reorderedUUIDs.pop();
+      },
+      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 => r.json())
-          .then(r => {
+        .then(r => {
-            this.apps = r.apps.filter(i => i.uuid).map(i => ({...i, launching: false, dragover: false}));
+          this.apps = r.apps.filter(i => i.uuid).map(i => ({...i, launching: false, dragover: false}));
-            this.currentApp = r.current_app;
+          this.currentApp = r.current_app;
-          });
+          this.listReordered = false;
+        });
       },
       newApp() {
         this.editForm = Object.assign({}, newApp);

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": "",

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>

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",

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": "总是使用虚拟显示器",