From 846e89f58eb13d13ed0527797d89fafc8ea92476 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Sun, 5 Apr 2026 22:59:50 +0300
Subject: [PATCH 1/2] fix: video player responsiveness

---
 ui/app/components/VideoPlayer.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/ui/app/components/VideoPlayer.vue b/ui/app/components/VideoPlayer.vue
index 6fc4c0cc..e74b19f4 100644
--- a/ui/app/components/VideoPlayer.vue
+++ b/ui/app/components/VideoPlayer.vue
@@ -1,12 +1,16 @@
 <style scoped>
+.player-shell {
+  position: relative;
+  width: 100%;
+}
+
 .player {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  display: block;
+  width: 100%;
   height: auto;
   max-height: 80vh;
   max-width: 100%;
-  position: relative;
+  object-fit: contain;
 }
 
 .keyboard-help {
@@ -83,7 +87,7 @@
 
 <template>
   <div v-if="infoLoaded">
-    <div style="position: relative">
+    <div class="player-shell">
       <video
         class="player"
         ref="video"

From 6553d0d9574b9d202ce007529d90822f31a192d4 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Wed, 8 Apr 2026 01:10:43 +0300
Subject: [PATCH 2/2] fix: use custom-first in presets

---
 ui/app/components/NewDownload.vue             |  4 +-
 ui/app/components/Simple.vue                  |  2 +-
 ui/app/components/TaskForm.vue                |  4 +-
 ui/tests/composables/usePresetOptions.test.ts | 58 +++++++++++++++++++
 ui/tests/tsconfig.json                        | 16 +++++
 5 files changed, 77 insertions(+), 7 deletions(-)
 create mode 100644 ui/tests/composables/usePresetOptions.test.ts
 create mode 100644 ui/tests/tsconfig.json

diff --git a/ui/app/components/NewDownload.vue b/ui/app/components/NewDownload.vue
index 42078657..c93933f6 100644
--- a/ui/app/components/NewDownload.vue
+++ b/ui/app/components/NewDownload.vue
@@ -523,9 +523,7 @@ const emitter = defineEmits<{
 const config = useConfigStore();
 const toast = useNotification();
 const dialog = useDialog();
-const { findPreset, hasPreset, selectItems, getPresetDefault } = usePresetOptions(undefined, {
-  order: 'default-first',
-});
+const { findPreset, hasPreset, selectItems, getPresetDefault } = usePresetOptions();
 
 const showAdvanced = useStorage<boolean>('show_advanced', false);
 const separator = useStorage<string>('url_separator', separators[0]?.value ?? ',');
diff --git a/ui/app/components/Simple.vue b/ui/app/components/Simple.vue
index eaf2fd27..aae4dc1e 100644
--- a/ui/app/components/Simple.vue
+++ b/ui/app/components/Simple.vue
@@ -475,7 +475,7 @@ const box = useConfirm();
 const app = toRef(configStore, 'app');
 const paused = toRef(configStore, 'paused');
 const presets = toRef(configStore, 'presets');
-const { selectItems: presetItems } = usePresetOptions(presets, { order: 'custom-first' });
+const { selectItems: presetItems } = usePresetOptions(presets);
 const { queue, history } = storeToRefs(stateStore);
 
 const embedUrl = ref('');
diff --git a/ui/app/components/TaskForm.vue b/ui/app/components/TaskForm.vue
index 370dfa6e..d03ba673 100644
--- a/ui/app/components/TaskForm.vue
+++ b/ui/app/components/TaskForm.vue
@@ -521,9 +521,7 @@ const emitter = defineEmits<{
 const toast = useNotification();
 const config = useConfigStore();
 const dialog = useDialog();
-const { findPreset, getPresetDefault, selectItems } = usePresetOptions(undefined, {
-  order: 'default-first',
-});
+const { findPreset, getPresetDefault, selectItems } = usePresetOptions();
 const showImport = useStorage('showTaskImport', false);
 
 const createDefaultTask = (source?: Partial<Task>): Task => ({
diff --git a/ui/tests/composables/usePresetOptions.test.ts b/ui/tests/composables/usePresetOptions.test.ts
new file mode 100644
index 00000000..d2f018c6
--- /dev/null
+++ b/ui/tests/composables/usePresetOptions.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'bun:test'
+
+import { usePresetOptions } from '~/composables/usePresetOptions'
+import type { Preset } from '~/types/presets'
+
+const buildPreset = (name: string, isDefault: boolean): Preset => ({
+  name,
+  default: isDefault,
+  description: '',
+  folder: '',
+  template: '',
+  cookies: '',
+  cli: '',
+  priority: 0,
+})
+
+const setConfigStore = (presets: Preset[]) => {
+  ;(globalThis as any).useConfigStore = () => ({
+    presets,
+    app: {
+      download_path: '/downloads',
+    },
+  })
+}
+
+describe('usePresetOptions', () => {
+  it('groups custom presets before default presets by default', () => {
+    setConfigStore([
+      buildPreset('default_video', true),
+      buildPreset('custom_audio', false),
+    ])
+
+    const { selectItems } = usePresetOptions()
+
+    expect(selectItems.value).toEqual([
+      { type: 'label', label: 'Custom presets' },
+      { label: 'Custom Audio', value: 'custom_audio' },
+      { type: 'label', label: 'Default presets' },
+      { label: 'Default Video', value: 'default_video' },
+    ])
+  })
+
+  it('supports default-first grouping when requested', () => {
+    setConfigStore([
+      buildPreset('default_video', true),
+      buildPreset('custom_audio', false),
+    ])
+
+    const { selectItems } = usePresetOptions(undefined, { order: 'default-first' })
+
+    expect(selectItems.value).toEqual([
+      { type: 'label', label: 'Default presets' },
+      { label: 'Default Video', value: 'default_video' },
+      { type: 'label', label: 'Custom presets' },
+      { label: 'Custom Audio', value: 'custom_audio' },
+    ])
+  })
+})
diff --git a/ui/tests/tsconfig.json b/ui/tests/tsconfig.json
new file mode 100644
index 00000000..be9d3eda
--- /dev/null
+++ b/ui/tests/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "bun-types",
+      "../app/types/globals"
+    ]
+  },
+  "include": [
+    "./**/*.ts",
+    "../app/**/*.ts",
+    "../app/**/*.d.ts",
+    "../app/**/*.vue",
+    "../.nuxt/**/*.d.ts"
+  ]
+}
\ No newline at end of file