refactor(ui): break down config.html into smaller pieces (#2491)

Co-authored-by: ReenigneArcher <[email protected]>

.gitignore

@@ -48,3 +48,6 @@ package-lock.json
 # Translations
 *.mo
 *.pot
+
+# Dummy macOS files
+.DS_Store

package.json

@@ -1,6 +1,7 @@
 {
   "scripts": {
     "build": "vite build --debug",
+    "build-clean": "vite build --debug --emptyOutDir",
     "dev": "vite build --watch"
   },
   "dependencies": {

src_assets/common/assets/web/PlatformLayout.vue

@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+  platform: {
+    type: String,
+    required: true
+  }
+})
+</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>
+</template>
+
+
+<style scoped>
+
+</style>

src_assets/common/assets/web/apps.html

@@ -356,7 +356,7 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
 </body>
 <script type="module">
   import { createApp } from 'vue';
-  import i18n from './locale.js'
+  import { initApp } from './init'
   import Navbar from './Navbar.vue'
   import {Dropdown} from 'bootstrap'
 
@@ -561,9 +561,5 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
     }
   });
 
-  //Wait for locale initialization, then render
-  i18n().then(i18n => {
-    app.use(i18n);
-    app.mount('#app');
-  });
+  initApp(app);
 </script>

src_assets/common/assets/web/configs/tabs/Advanced.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { ref } from 'vue'
+import PlatformLayout from '../../PlatformLayout.vue'
+
+const props = defineProps([
+  'platform',
+  'config',
+  'global_prep_cmd'
+])
+
+const config = ref(props.config)
+</script>
+
+<template>
+  <div class="config-page">
+    <!-- FEC Percentage -->
+    <div class="mb-3">
+      <label for="fec_percentage" class="form-label">{{ $t('config.fec_percentage') }}</label>
+      <input type="text" class="form-control" id="fec_percentage" placeholder="20" v-model="config.fec_percentage" />
+      <div class="form-text">{{ $t('config.fec_percentage_desc') }}</div>
+    </div>
+
+    <!-- Quantization Parameter -->
+    <div class="mb-3">
+      <label for="qp" class="form-label">{{ $t('config.qp') }}</label>
+      <input type="number" class="form-control" id="qp" placeholder="28" v-model="config.qp" />
+      <div class="form-text">{{ $t('config.qp_desc') }}</div>
+    </div>
+
+    <!-- Min Threads -->
+    <div class="mb-3">
+      <label for="min_threads" class="form-label">{{ $t('config.min_threads') }}</label>
+      <input type="number" class="form-control" id="min_threads" placeholder="2" min="1" v-model="config.min_threads" />
+      <div class="form-text">{{ $t('config.min_threads_desc') }}</div>
+    </div>
+
+    <!-- HEVC Support -->
+    <div class="mb-3">
+      <label for="hevc_mode" class="form-label">{{ $t('config.hevc_mode') }}</label>
+      <select id="hevc_mode" class="form-select" v-model="config.hevc_mode">
+        <option value="0">{{ $t('config.hevc_mode_0') }}</option>
+        <option value="1">{{ $t('config.hevc_mode_1') }}</option>
+        <option value="2">{{ $t('config.hevc_mode_2') }}</option>
+        <option value="3">{{ $t('config.hevc_mode_3') }}</option>
+      </select>
+      <div class="form-text">{{ $t('config.hevc_mode_desc') }}</div>
+    </div>
+
+    <!-- AV1 Support -->
+    <div class="mb-3">
+      <label for="av1_mode" class="form-label">{{ $t('config.av1_mode') }}</label>
+      <select id="av1_mode" class="form-select" v-model="config.av1_mode">
+        <option value="0">{{ $t('config.av1_mode_0') }}</option>
+        <option value="1">{{ $t('config.av1_mode_1') }}</option>
+        <option value="2">{{ $t('config.av1_mode_2') }}</option>
+        <option value="3">{{ $t('config.av1_mode_3') }}</option>
+      </select>
+      <div class="form-text">{{ $t('config.av1_mode_desc') }}</div>
+    </div>
+
+    <!-- Capture -->
+    <div class="mb-3" v-if="platform === 'linux'">
+      <label for="capture" class="form-label">{{ $t('config.capture') }}</label>
+      <select id="capture" class="form-select" v-model="config.capture">
+        <option value="">{{ $t('_common.autodetect') }}</option>
+        <option value="nvfbc">NvFBC</option>
+        <option value="wlr">wlroots</option>
+        <option value="kms">KMS</option>
+        <option value="x11">X11</option>
+      </select>
+      <div class="form-text">{{ $t('config.capture_desc') }}</div>
+    </div>
+
+    <!-- Encoder -->
+    <div class="mb-3">
+      <label for="encoder" class="form-label">{{ $t('config.encoder') }}</label>
+      <select id="encoder" class="form-select" v-model="config.encoder">
+        <option value="">{{ $t('_common.autodetect') }}</option>
+        <PlatformLayout :platform="platform">
+          <template #windows>
+            <option value="nvenc">NVIDIA NVENC</option>
+            <option value="quicksync">Intel QuickSync</option>
+            <option value="amdvce">AMD AMF/VCE</option>
+          </template>
+          <template #linux>
+            <option value="nvenc">NVIDIA NVENC</option>
+            <option value="vaapi">VA-API</option>
+          </template>
+          <template #macos>
+            <option value="videotoolbox">VideoToolbox</option>
+          </template>
+        </PlatformLayout>
+        <option value="software">{{ $t('config.encoder_software') }}</option>
+      </select>
+      <div class="form-text">{{ $t('config.encoder_desc') }}</div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src_assets/common/assets/web/configs/tabs/AudioVideo.vue

@@ -0,0 +1,89 @@
+<script setup>
+import {ref} from 'vue'
+import {$tp} from '../../platform-i18n'
+import PlatformLayout from '../../PlatformLayout.vue'
+import AdapterNameSelector from './audiovideo/AdapterNameSelector.vue'
+import LegacyDisplayOutputSelector from './audiovideo/LegacyDisplayOutputSelector.vue'
+import NewDisplayOutputSelector from './audiovideo/NewDisplayOutputSelector.vue'
+import DisplayDeviceOptions from "./audiovideo/DisplayDeviceOptions.vue";
+import DisplayModesSettings from "./audiovideo/DisplayModesSettings.vue";
+
+const props = defineProps([
+  'platform',
+  'config',
+  'resolutions',
+  'fps',
+])
+
+const config = ref(props.config)
+</script>
+
+<template>
+  <div id="audio-video" class="config-page">
+    <!-- Audio Sink -->
+    <div class="mb-3">
+      <label for="audio_sink" class="form-label">{{ $t('config.audio_sink') }}</label>
+      <input type="text" class="form-control" id="audio_sink"
+             :placeholder="$tp('config.audio_sink_placeholder', 'alsa_output.pci-0000_09_00.3.analog-stereo')"
+             v-model="config.audio_sink" />
+      <div class="form-text">
+        {{ $tp('config.audio_sink_desc') }}<br>
+        <PlatformLayout :platform="platform">
+          <template #windows>
+            <pre>tools\audio-info.exe</pre>
+          </template>
+          <template #linux>
+            <pre>pacmd list-sinks | grep "name:"</pre>
+            <pre>pactl info | grep Source</pre>
+          </template>
+          <template #macos>
+            <a href="https://github.com/mattingalls/Soundflower" target="_blank">Soundflower</a><br>
+            <a href="https://github.com/ExistentialAudio/BlackHole" target="_blank">BlackHole</a>.
+          </template>
+        </PlatformLayout>
+      </div>
+    </div>
+
+
+    <PlatformLayout :platform="platform">
+      <template #windows>
+        <!-- Virtual Sink -->
+        <div class="mb-3">
+          <label for="virtual_sink" class="form-label">{{ $t('config.virtual_sink') }}</label>
+          <input type="text" class="form-control" id="virtual_sink" :placeholder="$t('config.virtual_sink_placeholder')"
+                 v-model="config.virtual_sink" />
+          <div class="form-text">{{ $t('config.virtual_sink_desc') }}</div>
+        </div>
+
+        <!-- Install Steam Audio Drivers -->
+        <div class="mb-3">
+          <label for="install_steam_audio_drivers" class="form-label">{{ $t('config.install_steam_audio_drivers') }}</label>
+          <select id="install_steam_audio_drivers" class="form-select" v-model="config.install_steam_audio_drivers">
+            <option value="disabled">{{ $t('_common.disabled') }}</option>
+            <option value="enabled">{{ $t('_common.enabled_def') }}</option>
+          </select>
+          <div class="form-text">{{ $t('config.install_steam_audio_drivers_desc') }}</div>
+        </div>
+      </template>
+    </PlatformLayout>
+
+    <AdapterNameSelector
+        :platform="platform"
+        :config="config"
+    />
+
+    <LegacyDisplayOutputSelector
+      :platform="platform"
+      :config="config"
+    />
+
+    <!-- Display Modes -->
+    <DisplayModesSettings
+        :platform="platform"
+        :config="config"
+        :resolutions="resolutions"
+        :fps="fps"
+    />
+
+  </div>
+</template>

src_assets/common/assets/web/configs/tabs/ContainerEncoders.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue'
+import NvidiaNvencEncoder from './encoders/NvidiaNvencEncoder.vue'
+import IntelQuickSyncEncoder from './encoders/IntelQuickSyncEncoder.vue'
+import AmdAmfEncoder from './encoders/AmdAmfEncoder.vue'
+import VideotoolboxEncoder from './encoders/VideotoolboxEncoder.vue'
+import SoftwareEncoder from './encoders/SoftwareEncoder.vue'
+
+const props = defineProps([
+  'platform',
+  'config',
+  'currentTab'
+])
+
+const config = ref(props.config)
+</script>
+
+<template>
+
+  <!-- NVIDIA NVENC Encoder Tab -->
+  <NvidiaNvencEncoder
+      v-if="currentTab === 'nv'"
+      :platform="platform"
+      :config="config"
+  />
+
+  <!-- Intel QuickSync Encoder Tab -->
+  <IntelQuickSyncEncoder
+      v-if="currentTab === 'qsv'"
+      :platform="platform"
+      :config="config"
+  />
+
+  <!-- AMD AMF Encoder Tab -->
+  <AmdAmfEncoder
+      v-if="currentTab === 'amd'"
+      :platform="platform"
+      :config="config"
+  />
+
+  <!-- VideoToolbox Encoder Tab -->
+  <VideotoolboxEncoder
+      v-if="currentTab === 'vt'"
+      :platform="platform"
+      :config="config"
+  />
+
+  <!-- Software Encoder Tab -->
+  <SoftwareEncoder
+      v-if="currentTab === 'sw'"
+      :platform="platform"
+      :config="config"
+  />
+
+</template>
+
+<style scoped>
+</style>

src_assets/common/assets/web/configs/tabs/Files.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps([
+  'platform',
+  'config'
+])
+
+const config = ref(props.config)
+</script>
+
+<template>
+  <div id="files" class="config-page">
+    <!-- Apps File -->
+    <div class="mb-3">
+      <label for="file_apps" class="form-label">{{ $t('config.file_apps') }}</label>
+      <input type="text" class="form-control" id="file_apps" placeholder="apps.json" v-model="config.file_apps" />
+      <div class="form-text">{{ $t('config.file_apps_desc') }}</div>
+    </div>
+
+    <!-- Credentials File -->
+    <div class="mb-3">
+      <label for="credentials_file" class="form-label">{{ $t('config.credentials_file') }}</label>
+      <input type="text" class="form-control" id="credentials_file" placeholder="sunshine_state.json" v-model="config.credentials_file" />
+      <div class="form-text">{{ $t('config.credentials_file_desc') }}</div>
+    </div>
+
+    <!-- Log Path -->
+    <div class="mb-3">
+      <label for="log_path" class="form-label">{{ $t('config.log_path') }}</label>
+      <input type="text" class="form-control" id="log_path" placeholder="sunshine.log" v-model="config.log_path" />
+      <div class="form-text">{{ $t('config.log_path_desc') }}</div>
+    </div>
+
+    <!-- Private Key -->
+    <div class="mb-3">
+      <label for="pkey" class="form-label">{{ $t('config.pkey') }}</label>
+      <input type="text" class="form-control" id="pkey" placeholder="/dir/pkey.pem" v-model="config.pkey" />
+      <div class="form-text">{{ $t('config.pkey_desc') }}</div>
+    </div>
+
+    <!-- Certificate -->
+    <div class="mb-3">
+      <label for="cert" class="form-label">{{ $t('config.cert') }}</label>
+      <input type="text" class="form-control" id="cert" placeholder="/dir/cert.pem" v-model="config.cert" />
+      <div class="form-text">{{ $t('config.cert_desc') }}</div>
+    </div>
+
+    <!-- State File -->
+    <div class="mb-3">
+      <label for="file_state" class="form-label">{{ $t('config.file_state') }}</label>
+      <input type="text" class="form-control" id="file_state" placeholder="sunshine_state.json"
+             v-model="config.file_state" />
+      <div class="form-text">{{ $t('config.file_state_desc') }}</div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>