Merge pull request #584 from arabcoders/dev

fix: video player responsiveness

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 ?? ',');

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('');

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 => ({

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"

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' },
+    ])
+  })
+})

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"
+  ]
+}