chore: release v0.3.4

feat(format-selector): exclude HLS, sort and improve labels for formats (#13 )
feat(update): add download action and guide users to download page when (#12 )
2025-11-03 20:20:41 +08:00 · 2025-11-03 20:13:18 +08:00 · 2025-11-02 19:35:49 +08:00 · 2025-11-02 17:59:39 +08:00 · 2025-11-02 17:59:30 +08:00 · 2025-11-02 17:42:33 +08:00
44 changed files with 2075 additions and 383 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -0,0 +1,133 @@
+name: Build
+
+on:
+  workflow_call:
+    inputs:
+      upload_artifacts:
+        required: false
+        type: boolean
+        default: false
+        description: 'Whether to upload build artifacts'
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        include:
+          - platform: windows
+            os: windows-latest
+            build_script: pnpm run build:win
+            ytdlp_asset: yt-dlp.exe
+            ytdlp_output: yt-dlp.exe
+            ffmpeg_url: https://github.com/yt-dlp/FFmpeg-Builds/releases/latest/download/ffmpeg-master-latest-win64-gpl.zip
+            ffmpeg_inner_path: ffmpeg-master-latest-win64-gpl\bin\ffmpeg.exe
+            ffmpeg_output: ffmpeg.exe
+          - platform: macos
+            os: macos-latest
+            build_script: pnpm run build:mac
+            ytdlp_asset: yt-dlp_macos
+            ytdlp_output: yt-dlp_macos
+            ffmpeg_arm_url: https://github.com/eko5624/mpv-mac/releases/download/2025-10-25/ffmpeg-arm64-defd5f3f64.zip
+            ffmpeg_x86_url: https://github.com/eko5624/mpv-mac/releases/download/2025-10-25/ffmpeg-x86_64-defd5f3f64.zip
+            ffmpeg_inner_path: ffmpeg/ffmpeg
+            ffmpeg_output: ffmpeg_macos
+          - platform: linux
+            os: ubuntu-latest
+            build_script: pnpm run build:linux
+            ytdlp_asset: yt-dlp
+            ytdlp_output: yt-dlp_linux
+            ffmpeg_url: https://github.com/yt-dlp/FFmpeg-Builds/releases/latest/download/ffmpeg-master-latest-linux64-gpl.tar.xz
+            ffmpeg_inner_path: ffmpeg-master-latest-linux64-gpl/bin/ffmpeg
+            ffmpeg_output: ffmpeg_linux
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 8
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Download ffmpeg binary (Windows)
+        if: matrix.platform == 'windows'
+        shell: pwsh
+        run: |
+          $ErrorActionPreference = 'Stop'
+          $ffmpegUrl = '${{ matrix.ffmpeg_url }}'
+          Invoke-WebRequest -Uri $ffmpegUrl -OutFile ffmpeg.zip
+          Expand-Archive ffmpeg.zip -DestinationPath ffmpeg -Force
+          $source = Join-Path 'ffmpeg' '${{ matrix.ffmpeg_inner_path }}'
+          $destination = Join-Path 'resources' '${{ matrix.ffmpeg_output }}'
+          Copy-Item -Path $source -Destination $destination -Force
+
+      - name: Download ffmpeg binary (macOS)
+        if: matrix.platform == 'macos'
+        shell: bash
+        env:
+          FFMPEG_OUTPUT: ${{ matrix.ffmpeg_output }}
+        run: |
+          set -euo pipefail
+          curl -L "${{ matrix.ffmpeg_arm_url }}" -o ffmpeg-arm.zip
+          unzip -q ffmpeg-arm.zip -d ffmpeg-arm
+
+          curl -L "${{ matrix.ffmpeg_x86_url }}" -o ffmpeg-x86.zip
+          unzip -q ffmpeg-x86.zip -d ffmpeg-x86
+
+          arm_bin="ffmpeg-arm/${{ matrix.ffmpeg_inner_path }}"
+          x86_bin="ffmpeg-x86/${{ matrix.ffmpeg_inner_path }}"
+
+          if [[ ! -f "$arm_bin" ]]; then
+            echo "::error::Missing arm64 ffmpeg binary at $arm_bin"
+            exit 1
+          fi
+          if [[ ! -f "$x86_bin" ]]; then
+            echo "::error::Missing x86_64 ffmpeg binary at $x86_bin"
+            exit 1
+          fi
+
+          lipo -create "$arm_bin" "$x86_bin" -output "resources/$FFMPEG_OUTPUT"
+          chmod +x "resources/$FFMPEG_OUTPUT"
+          rm -rf ffmpeg-arm ffmpeg-x86 ffmpeg-arm.zip ffmpeg-x86.zip
+
+      - name: Download ffmpeg binary (Linux)
+        if: matrix.platform == 'linux'
+        shell: bash
+        run: |
+          set -euo pipefail
+          curl -L "${{ matrix.ffmpeg_url }}" -o ffmpeg.tar.xz
+          mkdir ffmpeg
+          tar -xf ffmpeg.tar.xz -C ffmpeg
+          cp "ffmpeg/${{ matrix.ffmpeg_inner_path }}" "resources/${{ matrix.ffmpeg_output }}"
+          chmod +x "resources/${{ matrix.ffmpeg_output }}"
+
+      - name: Download yt-dlp binary
+        shell: bash
+        run: |
+          curl -L "https://github.com/yt-dlp/yt-dlp/releases/latest/download/${{ matrix.ytdlp_asset }}" -o "resources/${{ matrix.ytdlp_output }}"
+          if [[ "${{ matrix.platform }}" == "linux" ]] || [[ "${{ matrix.platform }}" == "macos" ]]; then
+            chmod +x "resources/${{ matrix.ytdlp_output }}"
+          fi
+
+      - name: Lint and format check
+        run: pnpm run check && pnpm run typecheck
+
+      - name: Build application
+        run: ${{ matrix.build_script }}
+
+      - name: Upload build artifacts
+        if: inputs.upload_artifacts == true
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist-${{ matrix.os }}
+          path: dist/
+          retention-days: 1
+
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -5,33 +5,5 @@ on:
    branches: [ main ]

 jobs:
-  test:
-    runs-on: windows-latest
-
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v4
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 8
-
-      - name: Install Dependencies
-        run: pnpm install
-
-      - name: Download yt-dlp binaries
-        run: |
-          # Download yt-dlp.exe for Windows
-          curl -L https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp.exe -o resources/yt-dlp.exe
-
-      - name: Lint and format check
-        run: pnpm run check
-
-      - name: build-win
-        run: pnpm run build:win
+  build:
+    uses: ./.github/workflows/build.yml
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -6,59 +6,26 @@ on:
      - v*.*.*

 jobs:
+  build:
+    uses: ./.github/workflows/build.yml
+    with:
+      upload_artifacts: true
+
  release:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [windows-latest, macos-latest]
-
+    needs: [build]
+    runs-on: ubuntu-latest
    steps:
      - name: Check out Git repository
        uses: actions/checkout@v4

-      - name: Install Node.js
-        uses: actions/setup-node@v4
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
        with:
-          node-version: 20
+          pattern: dist-*
+          merge-multiple: true
+          path: dist/

-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 8
-
-      - name: Install Dependencies
-        run: pnpm install
-
-      - name: Download yt-dlp binaries
-        run: |
-          # Download yt-dlp.exe for Windows
-          curl -L https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp.exe -o resources/yt-dlp.exe
-
-          # Download yt-dlp for macOS (for cross-platform builds)
-          curl -L https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp_macos -o resources/yt-dlp_macos
-          chmod +x resources/yt-dlp_macos
-
-          # Download yt-dlp for Linux (for cross-platform builds)
-          # curl -L https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp -o resources/yt-dlp_linux
-          # chmod +x resources/yt-dlp_linux
-
-      - name: Lint and format check
-        run: pnpm run check
-
-      # - name: build-linux
-      #   if: matrix.os == 'ubuntu-latest'
-      #   run: pnpm run build:linux
-
-      - name: build-mac
-        if: matrix.os == 'macos-latest'
-        run: pnpm run build:mac
-
-      - name: build-win
-        if: matrix.os == 'windows-latest'
-        run: pnpm run build:win
-
-      - name: release
+      - name: Release
        uses: softprops/action-gh-release@v1
        with:
          generate_release_notes: true
@@ -75,4 +42,3 @@ jobs:
            dist/*.blockmap
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-
--- a/.github/workflows/translator.yaml
+++ b/.github/workflows/translator.yaml
@@ -0,0 +1,29 @@
+name: 'translator'
+on:
+  issues:
+    types: [opened, edited]
+  issue_comment:
+    types: [created, edited]
+  discussion:
+    types: [created, edited]
+  discussion_comment:
+    types: [created, edited]
+  pull_request_target:
+    types: [opened, edited]
+  pull_request_review_comment:
+    types: [created, edited]
+
+jobs:
+  translate:
+    permissions:
+      issues: write
+      discussions: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: lizheming/github-translate-action@c55aac477e98562d4faed9f77c54ab8306ae6ebf
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          IS_MODIFY_TITLE: true
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -58,6 +58,7 @@ src/
 - Build production bundles with `pnpm build`.
 - Create platform-specific artifacts with `pnpm build:win`, `pnpm build:mac`, or `pnpm build:linux`.
 - Use `pnpm build:unpack` to generate unpacked directories under `dist/` for manual inspection.
+- Bundle platform binaries of `yt-dlp` and `ffmpeg` under `resources/` (or set `YTDLP_PATH`/`FFMPEG_PATH`) before packaging so merges and audio extraction work out of the box.

 ## Working on Changes
 - Keep each pull request focused on a single problem or feature.
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -21,14 +21,17 @@ nsis:
 mac:
  entitlementsInherit: build/entitlements.mac.plist
  notarize: false
-dmg:
-  artifactName: ${name}-${version}.${ext}
+  artifactName: ${name}-${version}-${arch}.${ext}
+  target:
+    - target: dmg
+      arch:
+        - arm64
+        - x64
 linux:
  target:
    - AppImage
-    - snap
    - deb
-  maintainer: yourname@example.com
+  maintainer: nexmoex@gmail.com
  category: Utility
 appImage:
  artifactName: ${name}-${version}.${ext}
--- a/entitlements.mac.plist
+++ b/entitlements.mac.plist
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-  <dict>
-    <key>com.apple.security.cs.allow-jit</key>
-    <true/>
-    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
-    <true/>
-    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
-    <true/>
-  </dict>
-</plist>
--- a/icon.icns
+++ b/icon.icns
--- a/icon.ico
+++ b/icon.ico
--- a/icon.png
+++ b/icon.png
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vidbee",
-  "version": "0.2.2",
+  "version": "0.3.4",
  "description": "A modern Electron application for downloading videos and audios",
  "main": "./out/main/index.js",
  "author": "VidBee",
@@ -12,13 +12,14 @@
    "typecheck": "pnpm run typecheck:node && pnpm run typecheck:web",
    "start": "electron-vite preview",
    "dev": "node scripts/set-console-encoding.js && electron-vite dev",
-    "build": "pnpm run typecheck && electron-vite build",
-    "postinstall": "electron-builder install-app-deps",
+    "build": "electron-vite build",
+    "setup": "node scripts/setup-dev-binaries.js",
+    "postinstall": "node scripts/setup-dev-binaries.js && electron-builder install-app-deps",
    "build:unpack": "pnpm run build && electron-builder --dir",
    "build:win": "node scripts/check-ytdlp.js win && pnpm run build && electron-builder --win",
-    "build:mac": "node scripts/check-ytdlp.js mac && pnpm run build && electron-builder --mac",
+    "build:mac": "node scripts/check-ytdlp.js mac && pnpm run build && electron-builder --mac --x64 --arm64",
    "build:linux": "node scripts/check-ytdlp.js linux && pnpm run build && electron-builder --linux",
-    "release": "pnpm run check && bumpp"
+    "release": "git checkout main && git pull && pnpm run check && bumpp"
  },
  "dependencies": {
    "@electron-toolkit/preload": "^3.0.2",
--- a/resources/.gitignore
+++ b/resources/.gitignore
@@ -2,8 +2,11 @@
 yt-dlp.exe
 yt-dlp_macos
 yt-dlp_linux
+ffmpeg.exe
+ffmpeg_macos
+ffmpeg_linux
+ffmpeg

 # But keep the README
 !README.md
 !.gitignore
-
--- a/resources/README.md
+++ b/resources/README.md
@@ -48,8 +48,24 @@ Invoke-WebRequest -Uri "https://github.com/yt-dlp/yt-dlp/releases/latest/downloa
 Invoke-WebRequest -Uri "https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp" -OutFile "resources/yt-dlp_linux"
 ```

+## ffmpeg Binaries
+
+ffmpeg is required for merging audio/video streams and audio extraction. Bundle the matching binary for each target platform:
+
+### Required Files
+
+1. **Windows**: `ffmpeg.exe`
+2. **macOS**: `ffmpeg_macos`
+3. **Linux**: `ffmpeg_linux`
+
+### How to Download
+
+- **Windows / Linux**: Grab static builds from <https://ffmpeg.org/download.html> (or <https://github.com/yt-dlp/FFmpeg-Builds/releases>) and rename the binary to match the filenames above.
+- **macOS**: Download the `ffmpeg-arm64*.zip` and `ffmpeg-x86_64*.zip` assets from <https://github.com/eko5624/mpv-mac/releases/latest>. Extract them and merge into a universal binary with `lipo -create`, then save the result as `resources/ffmpeg_macos`.
+- On macOS/Linux ensure the final binary is executable: `chmod +x resources/ffmpeg_macos` (or `ffmpeg_linux`).
+
 ### Note

- If you don't place binaries here, the app will attempt to download them at runtime
- The app will automatically use the bundled version if available
- File sizes: ~10-15 MB per binary
+- Bundled binaries are required for Windows builds. On macOS/Linux the app can also use ffmpeg/yt-dlp from the system PATH.
+- You can override the lookup paths via the `YTDLP_PATH` or `FFMPEG_PATH` environment variables if you prefer custom locations.
+- File sizes: ~10-15 MB per yt-dlp binary, ~40-80 MB per ffmpeg binary
--- a/scripts/check-ytdlp.js
+++ b/scripts/check-ytdlp.js
@@ -3,38 +3,6 @@
 const fs = require('node:fs')
 const path = require('node:path')

-/**
- * Check if yt-dlp binary exists in resources directory
- * Usage: node scripts/check-ytdlp.js [platform]
- * Platform options: win, mac, linux
- * Exit with error code 1 if not found
- */
-function checkYtDlpExists(platform) {
-  const platformMap = {
-    win: 'yt-dlp.exe',
-    mac: 'yt-dlp_macos',
-    linux: 'yt-dlp_linux'
-  }
-
-  const filename = platformMap[platform]
-  if (!filename) {
-    console.error('❌ Error: Invalid platform specified!')
-    console.error('Usage: node scripts/check-ytdlp.js [win|mac|linux]')
-    process.exit(1)
-  }
-
-  const ytdlpPath = path.join(__dirname, '..', 'resources', filename)
-
-  if (!fs.existsSync(ytdlpPath)) {
-    console.error(`❌ Error: resources/${filename} not found!`)
-    console.error(`Please download ${filename} to the resources/ directory first.`)
-    console.error('You can download it from: https://github.com/yt-dlp/yt-dlp/releases/latest')
-    process.exit(1)
-  }
-
-  console.log(`✅ ${filename} found in resources/ directory`)
-}
-
 // Get platform from command line arguments
 const platform = process.argv[2]

@@ -44,5 +12,61 @@ if (!platform) {
  process.exit(1)
 }

-// Run the check
-checkYtDlpExists(platform)
+const supportedPlatforms = ['win', 'mac', 'linux']
+
+if (!supportedPlatforms.includes(platform)) {
+  console.error('❌ Error: Invalid platform specified!')
+  console.error('Usage: node scripts/check-ytdlp.js [win|mac|linux]')
+  process.exit(1)
+}
+
+const binaries = [
+  {
+    label: 'yt-dlp',
+    filenameMap: {
+      win: 'yt-dlp.exe',
+      mac: 'yt-dlp_macos',
+      linux: 'yt-dlp_linux'
+    },
+    help: {
+      default: 'https://github.com/yt-dlp/yt-dlp/releases/latest'
+    }
+  },
+  {
+    label: 'ffmpeg',
+    filenameMap: {
+      win: 'ffmpeg.exe',
+      mac: 'ffmpeg_macos',
+      linux: 'ffmpeg_linux'
+    },
+    help: {
+      win: 'https://ffmpeg.org/download.html',
+      linux: 'https://ffmpeg.org/download.html',
+      mac: 'https://github.com/eko5624/mpv-mac/releases/latest'
+    }
+  }
+]
+
+let hasMissingBinary = false
+
+for (const binary of binaries) {
+  const filename = binary.filenameMap[platform]
+  const binaryPath = path.join(__dirname, '..', 'resources', filename)
+
+  if (!fs.existsSync(binaryPath)) {
+    console.error(`❌ Error: resources/${filename} not found!`)
+    console.error(`Please download ${filename} to the resources/ directory first.`)
+    const help =
+      typeof binary.help === 'string' ? binary.help : binary.help[platform] || binary.help.default
+    if (help) {
+      console.error(`See ${help}`)
+    }
+    hasMissingBinary = true
+  } else {
+    console.log(`✅ ${filename} found in resources/ directory`)
+  }
+}
+
+if (hasMissingBinary) {
+  process.exit(1)
+}
--- a/scripts/setup-dev-binaries.js
+++ b/scripts/setup-dev-binaries.js
@@ -0,0 +1,343 @@
+#!/usr/bin/env node
+
+/**
+ * Development environment setup script
+ * Automatically downloads yt-dlp and ffmpeg binaries based on the current system
+ */
+
+const fs = require('node:fs')
+const path = require('node:path')
+const os = require('node:os')
+const { execSync } = require('node:child_process')
+const https = require('node:https')
+const http = require('node:http')
+
+// Configuration
+const RESOURCES_DIR = path.join(__dirname, '..', 'resources')
+const YTDLP_BASE_URL = 'https://github.com/yt-dlp/yt-dlp/releases/latest/download'
+
+// Platform configuration
+const PLATFORM_CONFIG = {
+  win32: {
+    ytdlp: {
+      asset: 'yt-dlp.exe',
+      output: 'yt-dlp.exe'
+    },
+    ffmpeg: {
+      url: 'https://github.com/yt-dlp/FFmpeg-Builds/releases/latest/download/ffmpeg-master-latest-win64-gpl.zip',
+      innerPath: 'ffmpeg-master-latest-win64-gpl/bin/ffmpeg.exe',
+      output: 'ffmpeg.exe',
+      extract: 'unzip'
+    }
+  },
+  darwin: {
+    ytdlp: {
+      asset: 'yt-dlp_macos',
+      output: 'yt-dlp_macos'
+    },
+    ffmpeg: {
+      // For development, download only the architecture matching current system
+      arm64: {
+        url: 'https://github.com/eko5624/mpv-mac/releases/download/2025-10-25/ffmpeg-arm64-defd5f3f64.zip',
+        innerPath: 'ffmpeg/ffmpeg',
+        output: 'ffmpeg_macos',
+        extract: 'unzip'
+      },
+      x64: {
+        url: 'https://github.com/eko5624/mpv-mac/releases/download/2025-10-25/ffmpeg-x86_64-defd5f3f64.zip',
+        innerPath: 'ffmpeg/ffmpeg',
+        output: 'ffmpeg_macos',
+        extract: 'unzip'
+      }
+    }
+  },
+  linux: {
+    ytdlp: {
+      asset: 'yt-dlp',
+      output: 'yt-dlp_linux'
+    },
+    ffmpeg: {
+      url: 'https://github.com/yt-dlp/FFmpeg-Builds/releases/latest/download/ffmpeg-master-latest-linux64-gpl.tar.xz',
+      innerPath: 'ffmpeg-master-latest-linux64-gpl/bin/ffmpeg',
+      output: 'ffmpeg_linux',
+      extract: 'tar'
+    }
+  }
+}
+
+// Utility functions
+function log(message, type = 'info') {
+  const icons = {
+    info: '📦',
+    success: '✅',
+    error: '❌',
+    warn: '⚠️',
+    download: '⬇️'
+  }
+  console.log(`${icons[type] || 'ℹ️'} ${message}`)
+}
+
+function ensureDir(dir) {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true })
+  }
+}
+
+function downloadFile(url, dest) {
+  return new Promise((resolve, reject) => {
+    const protocol = url.startsWith('https') ? https : http
+    const file = fs.createWriteStream(dest)
+
+    protocol
+      .get(url, (response) => {
+        if (response.statusCode === 302 || response.statusCode === 301) {
+          // Handle redirect
+          file.close()
+          fs.unlinkSync(dest)
+          return downloadFile(response.headers.location, dest).then(resolve).catch(reject)
+        }
+
+        if (response.statusCode !== 200) {
+          file.close()
+          fs.unlinkSync(dest)
+          return reject(new Error(`Failed to download: ${response.statusCode}`))
+        }
+
+        response.pipe(file)
+        file.on('finish', () => {
+          file.close()
+          resolve()
+        })
+      })
+      .on('error', (err) => {
+        file.close()
+        fs.unlinkSync(dest)
+        reject(err)
+      })
+  })
+}
+
+function extractZip(zipPath, extractDir) {
+  const platform = os.platform()
+  ensureDir(extractDir)
+
+  if (platform === 'win32') {
+    // Use PowerShell Expand-Archive on Windows
+    try {
+      const zipAbsPath = path.resolve(zipPath)
+      const extractAbsDir = path.resolve(extractDir)
+      execSync(
+        `powershell -NoProfile -Command "Expand-Archive -Path '${zipAbsPath.replace(/'/g, "''")}' -DestinationPath '${extractAbsDir.replace(/'/g, "''")}' -Force"`,
+        { stdio: 'inherit' }
+      )
+    } catch (error) {
+      throw new Error(`Failed to extract zip: ${error.message}`)
+    }
+  } else {
+    // Use unzip command on macOS/Linux
+    try {
+      execSync(`unzip -q "${zipPath}" -d "${extractDir}"`, { stdio: 'inherit' })
+    } catch (error) {
+      throw new Error(`Failed to extract zip: ${error.message}`)
+    }
+  }
+}
+
+function extractTarXz(tarPath, extractDir) {
+  ensureDir(extractDir)
+  execSync(`tar -xf "${tarPath}" -C "${extractDir}"`, { stdio: 'inherit' })
+}
+
+function setExecutable(filePath) {
+  if (os.platform() !== 'win32') {
+    fs.chmodSync(filePath, 0o755)
+  }
+}
+
+function fileExists(filePath) {
+  return fs.existsSync(filePath)
+}
+
+// Main download functions
+async function downloadYtDlp(config) {
+  const { asset, output } = config.ytdlp
+  const outputPath = path.join(RESOURCES_DIR, output)
+
+  if (fileExists(outputPath)) {
+    log(`${output} already exists, skipping download`, 'info')
+    return
+  }
+
+  log(`Downloading ${asset}...`, 'download')
+  const url = `${YTDLP_BASE_URL}/${asset}`
+  const tempPath = path.join(RESOURCES_DIR, `.${asset}.tmp`)
+
+  try {
+    await downloadFile(url, tempPath)
+    fs.renameSync(tempPath, outputPath)
+    setExecutable(outputPath)
+    log(`Downloaded ${output} successfully`, 'success')
+  } catch (error) {
+    if (fs.existsSync(tempPath)) {
+      fs.unlinkSync(tempPath)
+    }
+    throw error
+  }
+}
+
+async function downloadFfmpegWindows(config) {
+  const { url, innerPath, output } = config.ffmpeg
+  const outputPath = path.join(RESOURCES_DIR, output)
+
+  if (fileExists(outputPath)) {
+    log(`${output} already exists, skipping download`, 'info')
+    return
+  }
+
+  log(`Downloading ffmpeg for Windows...`, 'download')
+  const tempZip = path.join(RESOURCES_DIR, 'ffmpeg-temp.zip')
+  const extractDir = path.join(RESOURCES_DIR, 'ffmpeg-temp')
+
+  try {
+    await downloadFile(url, tempZip)
+    log('Extracting ffmpeg...', 'info')
+    extractZip(tempZip, extractDir)
+
+    const sourcePath = path.join(extractDir, innerPath.replace(/\\/g, path.sep))
+    if (!fileExists(sourcePath)) {
+      throw new Error(`ffmpeg binary not found at ${sourcePath}`)
+    }
+
+    fs.copyFileSync(sourcePath, outputPath)
+    log(`Downloaded ${output} successfully`, 'success')
+
+    // Cleanup
+    fs.unlinkSync(tempZip)
+    fs.rmSync(extractDir, { recursive: true, force: true })
+  } catch (error) {
+    if (fs.existsSync(tempZip)) fs.unlinkSync(tempZip)
+    if (fs.existsSync(extractDir)) fs.rmSync(extractDir, { recursive: true, force: true })
+    throw error
+  }
+}
+
+async function downloadFfmpegMac(config) {
+  const arch = os.arch()
+  const ffmpegConfig = config.ffmpeg[arch === 'arm64' ? 'arm64' : 'x64']
+
+  if (!ffmpegConfig) {
+    throw new Error(`Unsupported architecture: ${arch}`)
+  }
+
+  const { url, innerPath, output } = ffmpegConfig
+  const outputPath = path.join(RESOURCES_DIR, output)
+
+  if (fileExists(outputPath)) {
+    log(`${output} already exists, skipping download`, 'info')
+    return
+  }
+
+  log(`Downloading ffmpeg for macOS (${arch})...`, 'download')
+  const tempZip = path.join(RESOURCES_DIR, 'ffmpeg-temp.zip')
+  const extractDir = path.join(RESOURCES_DIR, 'ffmpeg-temp')
+
+  try {
+    await downloadFile(url, tempZip)
+    log('Extracting ffmpeg...', 'info')
+    extractZip(tempZip, extractDir)
+
+    const sourcePath = path.join(extractDir, innerPath)
+    if (!fileExists(sourcePath)) {
+      throw new Error(`ffmpeg binary not found at ${sourcePath}`)
+    }
+
+    fs.copyFileSync(sourcePath, outputPath)
+    setExecutable(outputPath)
+    log(`Downloaded ${output} successfully`, 'success')
+
+    // Cleanup
+    fs.unlinkSync(tempZip)
+    fs.rmSync(extractDir, { recursive: true, force: true })
+  } catch (error) {
+    if (fs.existsSync(tempZip)) fs.unlinkSync(tempZip)
+    if (fs.existsSync(extractDir)) fs.rmSync(extractDir, { recursive: true, force: true })
+    throw error
+  }
+}
+
+async function downloadFfmpegLinux(config) {
+  const { url, innerPath, output } = config.ffmpeg
+  const outputPath = path.join(RESOURCES_DIR, output)
+
+  if (fileExists(outputPath)) {
+    log(`${output} already exists, skipping download`, 'info')
+    return
+  }
+
+  log(`Downloading ffmpeg for Linux...`, 'download')
+  const tempTar = path.join(RESOURCES_DIR, 'ffmpeg-temp.tar.xz')
+  const extractDir = path.join(RESOURCES_DIR, 'ffmpeg-temp')
+
+  try {
+    await downloadFile(url, tempTar)
+    log('Extracting ffmpeg...', 'info')
+    extractTarXz(tempTar, extractDir)
+
+    const sourcePath = path.join(extractDir, innerPath)
+    if (!fileExists(sourcePath)) {
+      throw new Error(`ffmpeg binary not found at ${sourcePath}`)
+    }
+
+    fs.copyFileSync(sourcePath, outputPath)
+    setExecutable(outputPath)
+    log(`Downloaded ${output} successfully`, 'success')
+
+    // Cleanup
+    fs.unlinkSync(tempTar)
+    fs.rmSync(extractDir, { recursive: true, force: true })
+  } catch (error) {
+    if (fs.existsSync(tempTar)) fs.unlinkSync(tempTar)
+    if (fs.existsSync(extractDir)) fs.rmSync(extractDir, { recursive: true, force: true })
+    throw error
+  }
+}
+
+// Main setup function
+async function setup() {
+  const platform = os.platform()
+  const config = PLATFORM_CONFIG[platform]
+
+  if (!config) {
+    log(`Unsupported platform: ${platform}`, 'error')
+    process.exit(1)
+  }
+
+  log(`Setting up development binaries for ${platform}...`, 'info')
+  ensureDir(RESOURCES_DIR)
+
+  try {
+    // Download yt-dlp
+    await downloadYtDlp(config)
+
+    // Download ffmpeg
+    if (platform === 'win32') {
+      await downloadFfmpegWindows(config)
+    } else if (platform === 'darwin') {
+      await downloadFfmpegMac(config)
+    } else if (platform === 'linux') {
+      await downloadFfmpegLinux(config)
+    }
+
+    log('Development environment setup completed!', 'success')
+  } catch (error) {
+    log(`Setup failed: ${error.message}`, 'error')
+    process.exit(1)
+  }
+}
+
+// Run setup
+if (require.main === module) {
+  setup()
+}
+
+module.exports = { setup }
--- a/src/main/download-engine/args-builder.ts
+++ b/src/main/download-engine/args-builder.ts
@@ -14,7 +14,8 @@ export const resolveVideoFormatSelector = (options: DownloadOptions): string =>
      return 'bestvideo+none'
    }
    if (!audioFormat || audioFormat === 'best') {
-      return 'best'
+      // Use bestvideo+bestaudio to ensure video and audio are merged into a single file
+      return 'bestvideo+bestaudio'
    }
    return `bestvideo+${audioFormat}`
  }
@@ -53,7 +54,11 @@ export const buildDownloadArgs = (

  // Format selection
  if (options.type === 'video') {
-    args.push('-f', resolveVideoFormatSelector(options))
+    const formatSelector = resolveVideoFormatSelector(options)
+    args.push('-f', formatSelector)
+    // Let yt-dlp automatically choose the best merge format (mkv/webm/mp4)
+    // based on codec compatibility. Forcing MP4 can cause failures
+    // when codecs are incompatible (e.g., VP9+Opus requires mkv/webm)
  } else if (options.type === 'audio') {
    args.push('-f', resolveAudioFormatSelector(options))
  } else if (options.type === 'extract') {
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -1,15 +1,17 @@
 import { join } from 'node:path'
 import { electronApp, optimizer } from '@electron-toolkit/utils'
-import { app, BrowserWindow, shell } from 'electron'
+import { app, BrowserWindow, type BrowserWindowConstructorOptions, shell } from 'electron'
 import log from 'electron-log/main'
 import { autoUpdater } from 'electron-updater'
 import appIcon from '../../build/icon.png?asset'
 import { configureLogger } from './config/logger-config'
 import { services } from './ipc'
 import { downloadEngine } from './lib/download-engine'
+import { ffmpegManager } from './lib/ffmpeg-manager'
 import { ytdlpManager } from './lib/ytdlp-manager'
 import { settingsManager } from './settings'
 import { createTray, destroyTray } from './tray'
+import { applyDockVisibility } from './utils/dock'

 // Initialize electron-log for main process
 log.initialize()
@@ -21,17 +23,16 @@ let mainWindow: BrowserWindow | null = null
 let isQuitting = false

 export function createWindow(): void {
-  // Create the browser window
-  mainWindow = new BrowserWindow({
+  const isMac = process.platform === 'darwin'
+  const isWindows = process.platform === 'win32'
+
+  const windowOptions: BrowserWindowConstructorOptions = {
    width: 1200,
    height: 800,
    show: false,
-    titleBarStyle: 'hidden', // Hide title bar on macOS
    autoHideMenuBar: true,
    icon: appIcon, // Set application icon
    frame: false,
-    vibrancy: 'fullscreen-ui', // on MacOS
-    backgroundMaterial: 'acrylic', // on Windows 11
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
@@ -39,7 +40,20 @@ export function createWindow(): void {
      nodeIntegration: false,
      webSecurity: false // Allow drag regions to work
    }
-  })
+  }
+
+  if (isMac) {
+    windowOptions.titleBarStyle = 'hidden'
+    windowOptions.trafficLightPosition = { x: 12.5, y: 10 }
+    windowOptions.vibrancy = 'fullscreen-ui'
+  }
+
+  if (isWindows) {
+    windowOptions.backgroundMaterial = 'acrylic'
+  }
+
+  // Create the browser window
+  mainWindow = new BrowserWindow(windowOptions)

  mainWindow.on('close', (event) => {
    const closeToTray = settingsManager.get('closeToTray')
@@ -93,13 +107,8 @@ function setupDownloadEvents(): void {
 }

 function initAutoUpdater(): void {
-  if (process.env.NODE_ENV !== 'production') {
-    console.log('Skipping auto-updater initialization in development mode')
-    return
-  }
-
  try {
-    console.log('Initializing auto-updater...')
+    log.info('Initializing auto-updater...')

    log.transports.file.level = 'info'
    autoUpdater.logger = log
@@ -108,31 +117,32 @@ function initAutoUpdater(): void {

    autoUpdater.on('update-available', (info) => {
      log.info('Update available:', info.version)
-      console.log('Update available:', info.version)
      mainWindow?.webContents.send('update:available', info)
+
+      // If auto-update is enabled, the update will be downloaded automatically
+      // because autoDownload is set to true
+      if (settingsManager.get('autoUpdate')) {
+        log.info('Auto-update is enabled, update will be downloaded automatically')
+      }
    })

    autoUpdater.on('update-not-available', (info) => {
      log.info('Update not available:', info.version)
-      console.log('Update not available:', info.version)
      mainWindow?.webContents.send('update:not-available', info)
    })

    autoUpdater.on('error', (err) => {
      log.error('Update error:', err)
-      console.error('Update error:', err)
      mainWindow?.webContents.send('update:error', err.message)
    })

    autoUpdater.on('download-progress', (progressObj) => {
      log.info('Download progress:', progressObj.percent)
-      console.log('Download progress:', progressObj.percent)
      mainWindow?.webContents.send('update:download-progress', progressObj)
    })

    autoUpdater.on('update-downloaded', (info) => {
      log.info('Update downloaded:', info.version)
-      console.log('Update downloaded:', info.version)
      mainWindow?.webContents.send('update:downloaded', info)

      if (mainWindow) {
@@ -144,17 +154,20 @@ function initAutoUpdater(): void {
      }
    })

-    if (settingsManager.get('autoUpdate')) {
-      log.info('Auto-update is enabled, checking for updates...')
-      console.log('Auto-update is enabled, checking for updates...')
-      void autoUpdater.checkForUpdatesAndNotify()
-    }
-
    log.info('Auto-updater initialized successfully')
-    console.log('Auto-updater initialized successfully')
+
+    // Check for updates immediately if auto-update is enabled
+    const autoUpdateEnabled = settingsManager.get('autoUpdate')
+    if (autoUpdateEnabled) {
+      log.info('Auto-update is enabled, checking for updates immediately...')
+      // Use checkForUpdates instead of checkForUpdatesAndNotify
+      // because we have our own notification system and want to ensure immediate download
+      void autoUpdater.checkForUpdates()
+    } else {
+      log.info('Auto-update is disabled, skipping automatic update check')
+    }
  } catch (error) {
    log.error('Failed to initialize auto-updater:', error)
-    console.error('Failed to initialize auto-updater:', error)
  }
 }

@@ -174,6 +187,15 @@ app.whenReady().then(async () => {
  // IPC services are automatically registered by electron-ipc-decorator when imported
  log.info('IPC services available:', Object.keys(services))

+  // Initialize ffmpeg
+  try {
+    log.info('Initializing ffmpeg...')
+    await ffmpegManager.initialize()
+    log.info('ffmpeg initialized successfully')
+  } catch (error) {
+    log.error('Failed to initialize ffmpeg:', error)
+  }
+
  // Initialize yt-dlp
  try {
    log.info('Initializing yt-dlp...')
@@ -183,6 +205,8 @@ app.whenReady().then(async () => {
    log.error('Failed to initialize yt-dlp:', error)
  }

+  applyDockVisibility(settingsManager.get('hideDockIcon'))
+
  createWindow()

  initAutoUpdater()
--- a/src/main/ipc/services/download-service.ts
+++ b/src/main/ipc/services/download-service.ts
@@ -3,6 +3,7 @@ import type {
  DownloadItem,
  DownloadOptions,
  PlaylistDownloadOptions,
+  PlaylistDownloadResult,
  PlaylistInfo,
  VideoInfo
 } from '../../../shared/types'
@@ -45,7 +46,7 @@ class DownloadService extends IpcService {
  async startPlaylistDownload(
    _context: IpcContext,
    options: PlaylistDownloadOptions
-  ): Promise<string[]> {
+  ): Promise<PlaylistDownloadResult> {
    return downloadEngine.startPlaylistDownload(options)
  }
 }
--- a/src/main/ipc/services/file-system-service.ts
+++ b/src/main/ipc/services/file-system-service.ts
@@ -1,4 +1,4 @@
-import { execFile } from 'node:child_process'
+import { execFile, execSync } from 'node:child_process'
 import fs from 'node:fs/promises'
 import os from 'node:os'
 import path from 'node:path'
@@ -40,7 +40,20 @@ class FileSystemService extends IpcService {

  @IpcMethod()
  getDefaultDownloadPath(_context: IpcContext): string {
-    return `${os.homedir()}/Downloads`
+    const fallbackPath = path.join(os.homedir(), 'Downloads')
+
+    if (process.platform === 'linux' || process.platform === 'freebsd') {
+      try {
+        const xdgPath = execSync('xdg-user-dir DOWNLOAD', { encoding: 'utf8' }).trim()
+        if (xdgPath) {
+          return xdgPath
+        }
+      } catch (error) {
+        console.warn('Unable to resolve XDG download directory, falling back to default:', error)
+      }
+    }
+
+    return fallbackPath
  }

  @IpcMethod()
--- a/src/main/ipc/services/settings-service.ts
+++ b/src/main/ipc/services/settings-service.ts
@@ -2,6 +2,7 @@ import { type IpcContext, IpcMethod, IpcService } from 'electron-ipc-decorator'
 import type { AppSettings } from '../../../shared/types'
 import { settingsManager } from '../../settings'
 import { updateTrayMenu } from '../../tray'
+import { applyDockVisibility } from '../../utils/dock'

 class SettingsService extends IpcService {
  static readonly groupName = 'settings'
@@ -18,6 +19,10 @@ class SettingsService extends IpcService {
    if (key === 'language') {
      updateTrayMenu()
    }
+
+    if (key === 'hideDockIcon') {
+      applyDockVisibility(value as AppSettings['hideDockIcon'])
+    }
  }

  @IpcMethod()
@@ -32,11 +37,16 @@ class SettingsService extends IpcService {
    if (settings.language) {
      updateTrayMenu()
    }
+
+    if (typeof settings.hideDockIcon === 'boolean') {
+      applyDockVisibility(settings.hideDockIcon)
+    }
  }

  @IpcMethod()
  reset(_context: IpcContext): void {
    settingsManager.reset()
+    applyDockVisibility(settingsManager.get('hideDockIcon'))
  }
 }

--- a/src/main/lib/download-engine.ts
+++ b/src/main/lib/download-engine.ts
@@ -7,11 +7,12 @@ import type {
  DownloadOptions,
  DownloadProgress,
  PlaylistDownloadOptions,
+  PlaylistDownloadResult,
  PlaylistInfo,
  VideoFormat,
  VideoInfo
 } from '../../shared/types'
-import { buildDownloadArgs } from '../download-engine/args-builder'
+import { buildDownloadArgs, resolveVideoFormatSelector } from '../download-engine/args-builder'
 import {
  findFormatByIdCandidates,
  parseSizeToBytes,
@@ -20,6 +21,7 @@ import {
 import { settingsManager } from '../settings'
 import { scopedLoggers } from '../utils/logger'
 import { DownloadQueue } from './download-queue'
+import { ffmpegManager } from './ffmpeg-manager'
 import { historyManager } from './history-manager'
 import { ytdlpManager } from './ytdlp-manager'

@@ -51,6 +53,11 @@ class DownloadEngine extends EventEmitter {
    // Add encoding support for proper handling of non-ASCII characters
    args.push('--encoding', 'utf-8')

+    // Note: Some sites (e.g., YouTube) may not provide filesize information
+    // in the initial request. This is normal behavior and filesize may be null/undefined
+    // for many formats. File size information might require additional HTTP HEAD requests
+    // which would significantly slow down info extraction, so yt-dlp doesn't fetch it by default.
+
    // Add proxy if configured
    if (settings.proxy) {
      args.push('--proxy', settings.proxy)
@@ -90,6 +97,27 @@ class DownloadEngine extends EventEmitter {
        if (code === 0 && stdout) {
          try {
            const info = JSON.parse(stdout)
+
+            // Calculate estimated file size for formats missing filesize information
+            // Using tbr (total bitrate in kbps) and duration (in seconds)
+            // Formula: (tbr * 1000) / 8 * duration = size in bytes
+            if (info.formats && Array.isArray(info.formats) && info.duration) {
+              const duration = info.duration
+              for (const format of info.formats) {
+                if (
+                  !format.filesize &&
+                  !format.filesize_approx &&
+                  format.tbr &&
+                  typeof format.tbr === 'number' &&
+                  duration > 0
+                ) {
+                  // Calculate estimated size: tbr (kbps) * 1000 / 8 bits per byte * duration (seconds)
+                  const estimatedSize = Math.round(((format.tbr * 1000) / 8) * duration)
+                  format.filesize_approx = estimatedSize
+                }
+              }
+            }
+
            scopedLoggers.download.info('Successfully retrieved video info for:', url)
            resolve(info)
          } catch (error) {
@@ -120,7 +148,7 @@ class DownloadEngine extends EventEmitter {
    const ytdlp = ytdlpManager.getInstance()
    const settings = settingsManager.getAll()

-    const args = ['-j', '--flat-playlist', '--no-warnings']
+    const args = ['-J', '--flat-playlist', '--no-warnings']

    // Add encoding support for proper handling of non-ASCII characters
    args.push('--encoding', 'utf-8')
@@ -140,8 +168,52 @@ class DownloadEngine extends EventEmitter {
      args.push('--cookies', cookiesPath)
    }

+    // Add config file if configured
+    if (settings.configPath) {
+      args.push('--config-location', `"${settings.configPath}"`)
+    }
+
    args.push(url)

+    type RawPlaylistEntry = {
+      id?: string
+      title?: string
+      url?: string
+      webpage_url?: string
+      original_url?: string
+      ie_key?: string
+    }
+
+    const resolveEntryUrl = (entry: RawPlaylistEntry): string => {
+      if (entry.url && typeof entry.url === 'string' && entry.url.startsWith('http')) {
+        return entry.url
+      }
+      if (entry.webpage_url && typeof entry.webpage_url === 'string') {
+        return entry.webpage_url
+      }
+      if (entry.original_url && typeof entry.original_url === 'string') {
+        return entry.original_url
+      }
+      if (entry.url && typeof entry.url === 'string') {
+        if (entry.ie_key && typeof entry.ie_key === 'string') {
+          const extractor = entry.ie_key.toLowerCase()
+          if (extractor.includes('youtube')) {
+            return `https://www.youtube.com/watch?v=${entry.url}`
+          }
+          if (extractor.includes('youtubemusic')) {
+            return `https://music.youtube.com/watch?v=${entry.url}`
+          }
+        }
+        if (entry.url.startsWith('https://') || entry.url.startsWith('http://')) {
+          return entry.url
+        }
+      }
+      if (entry.id && typeof entry.id === 'string') {
+        return entry.id
+      }
+      return ''
+    }
+
    return new Promise((resolve, reject) => {
      const process = ytdlp.exec(args)
      let stdout = ''
@@ -158,51 +230,107 @@ class DownloadEngine extends EventEmitter {
      process.on('close', (code) => {
        if (code === 0 && stdout) {
          try {
-            const lines = stdout.trim().split('\n')
-            const entries = lines.map((line) => JSON.parse(line))
-            const playlistEntry = entries[0]
+            const parsed = JSON.parse(stdout) as {
+              id?: string
+              title?: string
+              entries?: RawPlaylistEntry[]
+            }
+            const rawEntries = Array.isArray(parsed.entries) ? parsed.entries : []
+            const entries = rawEntries
+              .map((entry, index) => {
+                const resolvedUrl = resolveEntryUrl(entry)
+                return {
+                  id: entry.id || `${index}`,
+                  title: entry.title || `Entry ${index + 1}`,
+                  url: resolvedUrl,
+                  index: index + 1
+                }
+              })
+              .filter((entry) => entry.url)

+            scopedLoggers.download.info(
+              'Successfully retrieved playlist info for:',
+              url,
+              'entries:',
+              entries.length
+            )
            resolve({
-              id: playlistEntry.id || '',
-              title: playlistEntry.title || 'Playlist',
-              entries: entries.map((entry) => ({
-                id: entry.id || '',
-                title: entry.title || 'Unknown',
-                url: entry.url || entry.webpage_url || ''
-              })),
+              id: parsed.id || url,
+              title: parsed.title || 'Playlist',
+              entries,
              entryCount: entries.length
            })
          } catch (error) {
+            scopedLoggers.download.error('Failed to parse playlist info for:', url, error)
            reject(new Error(`Failed to parse playlist info: ${error}`))
          }
        } else {
+          scopedLoggers.download.error(
+            'Failed to fetch playlist info for:',
+            url,
+            'Exit code:',
+            code,
+            'Error:',
+            stderr
+          )
          reject(new Error(stderr || 'Failed to fetch playlist info'))
        }
      })

      process.on('error', (error) => {
+        scopedLoggers.download.error('yt-dlp process error while fetching playlist info:', error)
        reject(error)
      })
    })
  }

-  async startPlaylistDownload(options: PlaylistDownloadOptions): Promise<string[]> {
+  async startPlaylistDownload(options: PlaylistDownloadOptions): Promise<PlaylistDownloadResult> {
    const playlistInfo = await this.getPlaylistInfo(options.url)
-    const downloadIds: string[] = []
+    const downloadEntries: PlaylistDownloadResult['entries'] = []
+    const groupId = `playlist_group_${Date.now()}_${Math.random().toString(36).substring(2, 8)}`

    // Calculate the range of entries to download
-    const startIndex = (options.startIndex || 1) - 1 // Convert to 0-based index
-    const endIndex = options.endIndex ? options.endIndex - 1 : playlistInfo.entries.length - 1
-    const entriesToDownload = playlistInfo.entries.slice(startIndex, endIndex + 1)
+    const totalEntries = playlistInfo.entries.length
+    if (totalEntries === 0) {
+      scopedLoggers.download.warn('Playlist has no entries:', options.url)
+      return {
+        groupId,
+        playlistId: playlistInfo.id,
+        playlistTitle: playlistInfo.title,
+        type: options.type,
+        totalCount: 0,
+        startIndex: 0,
+        endIndex: 0,
+        entries: []
+      }
+    }
+
+    const requestedStart = Math.max((options.startIndex ?? 1) - 1, 0)
+    const requestedEnd = options.endIndex
+      ? Math.min(options.endIndex - 1, totalEntries - 1)
+      : totalEntries - 1
+    const rangeStart = Math.min(requestedStart, requestedEnd)
+    const rangeEnd = Math.max(requestedStart, requestedEnd)
+    const rawEntries = playlistInfo.entries.slice(rangeStart, rangeEnd + 1)
+    const settings = settingsManager.getAll()
+
+    const selectedEntries = rawEntries.filter((entry) => {
+      if (!entry.url) {
+        scopedLoggers.download.warn('Skipping playlist entry with missing URL:', entry)
+        return false
+      }
+      return true
+    })
+
+    const selectionSize = selectedEntries.length

    scopedLoggers.download.info(
-      `Starting playlist download: ${entriesToDownload.length} videos from "${playlistInfo.title}"`
+      `Starting playlist download: ${selectionSize} items from "${playlistInfo.title}"`
    )

    // Create download items for each video in the playlist
-    for (const entry of entriesToDownload) {
-      const downloadId = `playlist_${Date.now()}_${Math.random().toString(36).substring(7)}`
-      downloadIds.push(downloadId)
+    for (const entry of selectedEntries) {
+      const downloadId = `${groupId}_${Math.random().toString(36).substring(2, 10)}`

      const downloadOptions: DownloadOptions = {
        url: entry.url,
@@ -212,6 +340,13 @@ class DownloadEngine extends EventEmitter {
      }

      const createdAt = Date.now()
+      downloadEntries.push({
+        downloadId,
+        entryId: entry.id,
+        title: entry.title,
+        url: entry.url,
+        index: entry.index
+      })

      // Add to queue
      this.queue.add(downloadId, downloadOptions, {
@@ -221,17 +356,35 @@ class DownloadEngine extends EventEmitter {
        type: options.type,
        status: 'pending',
        progress: { percent: 0 },
-        createdAt
+        createdAt,
+        playlistId: groupId,
+        playlistTitle: playlistInfo.title,
+        playlistIndex: entry.index,
+        playlistSize: selectionSize
      })

      this.upsertHistoryEntry(downloadId, downloadOptions, {
        title: entry.title,
        status: 'pending',
-        downloadedAt: createdAt
+        downloadedAt: createdAt,
+        downloadPath: settings.downloadPath,
+        playlistId: groupId,
+        playlistTitle: playlistInfo.title,
+        playlistIndex: entry.index,
+        playlistSize: selectionSize
      })
    }

-    return downloadIds
+    return {
+      groupId,
+      playlistId: playlistInfo.id,
+      playlistTitle: playlistInfo.title,
+      type: options.type,
+      totalCount: selectionSize,
+      startIndex: selectedEntries[0]?.index ?? rangeStart + 1,
+      endIndex: selectedEntries[selectedEntries.length - 1]?.index ?? rangeEnd + 1,
+      entries: downloadEntries
+    }
  }

  startDownload(id: string, options: DownloadOptions): void {
@@ -370,6 +523,46 @@ class DownloadEngine extends EventEmitter {

    const args = buildDownloadArgs(options, downloadPath, settings)

+    // Check if format selector contains '+' which means video and audio will be merged
+    const formatSelector =
+      options.type === 'video' ? resolveVideoFormatSelector(options) : undefined
+    const willMerge = formatSelector?.includes('+') ?? false
+
+    const urlArg = args.pop()
+    if (!urlArg) {
+      const missingUrlError = new Error('Download arguments missing URL.')
+      scopedLoggers.download.error('Missing URL argument for download ID:', id)
+      this.updateDownloadInfo(id, {
+        status: 'error',
+        completedAt: Date.now(),
+        error: missingUrlError.message
+      })
+      this.queue.downloadCompleted(id)
+      this.emit('download-error', id, missingUrlError)
+      this.addToHistory(id, options, 'error', missingUrlError.message)
+      return
+    }
+
+    let ffmpegPath: string
+    try {
+      ffmpegPath = ffmpegManager.getPath()
+    } catch (error) {
+      const ffmpegError = error instanceof Error ? error : new Error(String(error))
+      scopedLoggers.download.error('Failed to resolve ffmpeg for download ID:', id, ffmpegError)
+      this.updateDownloadInfo(id, {
+        status: 'error',
+        completedAt: Date.now(),
+        error: ffmpegError.message
+      })
+      this.queue.downloadCompleted(id)
+      this.emit('download-error', id, ffmpegError)
+      this.addToHistory(id, options, 'error', ffmpegError.message)
+      return
+    }
+
+    args.push('--ffmpeg-location', ffmpegPath)
+    args.push(urlArg)
+
    const controller = new AbortController()
    const ytdlpProcess = ytdlp.exec(args, {
      signal: controller.signal
@@ -467,23 +660,81 @@ class DownloadEngine extends EventEmitter {
        // Generate file path using downloadPath + title + ext
        const title = videoInfo?.title || 'Unknown'
        const sanitizedTitle = title.replace(/[<>:"/\\|?*]/g, '_').substring(0, 50)
-        const extension =
-          options.type === 'audio' ? options.extractFormat || 'mp3' : actualFormat || 'mp4'
+
+        // Determine file extension based on download type and format
+        // yt-dlp automatically chooses the best merge format (mkv/webm/mp4)
+        // based on codec compatibility, so we should use actualFormat when available
+        let extension: string
+        if (options.type === 'audio') {
+          extension = options.extractFormat || 'mp3'
+        } else if (willMerge) {
+          // For merged files, yt-dlp auto-selects format (mkv/webm/mp4)
+          // Use actualFormat if available, otherwise default to mkv (most compatible)
+          extension = actualFormat || 'mkv'
+        } else {
+          extension = actualFormat || 'mp4'
+        }
+
        const fileName = `${sanitizedTitle}.${extension}`
        const finalOutputPath = path.join(downloadPath, fileName)

-        scopedLoggers.download.info('Generated file path for ID:', id, 'Path:', finalOutputPath)
+        scopedLoggers.download.info(
+          'Generated file path for ID:',
+          id,
+          'Path:',
+          finalOutputPath,
+          'Will merge:',
+          willMerge
+        )

        let fileSize: number | undefined
+        let actualFilePath = finalOutputPath
        try {
          const fs = await import('node:fs/promises')
+          // Try to find the actual file - yt-dlp may generate files with slightly different names
          const stats = await fs.stat(finalOutputPath)
          fileSize = stats.size
+          actualFilePath = finalOutputPath
        } catch (error) {
-          if (latestKnownSizeBytes !== undefined) {
-            fileSize = latestKnownSizeBytes
-          } else {
-            scopedLoggers.download.warn('Failed to get file size for ID:', id, error)
+          // If the expected file doesn't exist, try to find it by scanning the directory
+          try {
+            const fs = await import('node:fs/promises')
+            const files = await fs.readdir(downloadPath)
+            // Look for files matching the title pattern with the correct extension
+            const matchingFiles = files.filter((file) => {
+              const baseName = file.replace(/\.[^.]+$/, '')
+              const fileExt = file.split('.').pop()?.toLowerCase()
+              return (
+                (baseName === sanitizedTitle || baseName.startsWith(sanitizedTitle)) &&
+                fileExt === extension.toLowerCase()
+              )
+            })
+
+            if (matchingFiles.length > 0) {
+              // Use the most recently modified file if multiple matches
+              const fileStats = await Promise.all(
+                matchingFiles.map(async (file) => {
+                  const filePath = path.join(downloadPath, file)
+                  const stats = await fs.stat(filePath)
+                  return { file, path: filePath, mtime: stats.mtime, size: stats.size }
+                })
+              )
+              const mostRecent = fileStats.sort((a, b) => b.mtime.getTime() - a.mtime.getTime())[0]
+              actualFilePath = mostRecent.path
+              fileSize = mostRecent.size
+              scopedLoggers.download.info('Found actual file:', actualFilePath, 'Size:', fileSize)
+            } else if (latestKnownSizeBytes !== undefined) {
+              fileSize = latestKnownSizeBytes
+              scopedLoggers.download.warn('File not found, using estimated size:', fileSize)
+            } else {
+              scopedLoggers.download.warn('Failed to find file for ID:', id, error)
+            }
+          } catch (scanError) {
+            if (latestKnownSizeBytes !== undefined) {
+              fileSize = latestKnownSizeBytes
+            } else {
+              scopedLoggers.download.warn('Failed to get file size for ID:', id, scanError)
+            }
          }
        }

@@ -495,7 +746,7 @@ class DownloadEngine extends EventEmitter {
          status: 'completed',
          completedAt: Date.now(),
          fileSize,
-          format: actualFormat || undefined,
+          format: willMerge ? 'mp4' : actualFormat || undefined,
          quality: actualQuality || undefined,
          codec: actualCodec || undefined
        })
@@ -607,6 +858,18 @@ class DownloadEngine extends EventEmitter {
    if (updates.tags !== undefined) {
      historyUpdates.tags = updates.tags
    }
+    if (updates.playlistId !== undefined) {
+      historyUpdates.playlistId = updates.playlistId
+    }
+    if (updates.playlistTitle !== undefined) {
+      historyUpdates.playlistTitle = updates.playlistTitle
+    }
+    if (updates.playlistIndex !== undefined) {
+      historyUpdates.playlistIndex = updates.playlistIndex
+    }
+    if (updates.playlistSize !== undefined) {
+      historyUpdates.playlistSize = updates.playlistSize
+    }
    if (updates.status !== undefined) {
      historyUpdates.status = updates.status
    }
@@ -651,7 +914,11 @@ class DownloadEngine extends EventEmitter {
      channel: completedDownload?.item.channel,
      uploader: completedDownload?.item.uploader,
      viewCount: completedDownload?.item.viewCount,
-      tags: completedDownload?.item.tags
+      tags: completedDownload?.item.tags,
+      playlistId: completedDownload?.item.playlistId,
+      playlistTitle: completedDownload?.item.playlistTitle,
+      playlistIndex: completedDownload?.item.playlistIndex,
+      playlistSize: completedDownload?.item.playlistSize
    })
  }

@@ -683,7 +950,11 @@ class DownloadEngine extends EventEmitter {
      viewCount: updates.viewCount,
      tags: updates.tags,
      // Download-specific format info
-      selectedFormat: updates.selectedFormat
+      selectedFormat: updates.selectedFormat,
+      playlistId: updates.playlistId,
+      playlistTitle: updates.playlistTitle,
+      playlistIndex: updates.playlistIndex,
+      playlistSize: updates.playlistSize
    }

    const merged: DownloadHistoryItem = {
--- a/src/main/lib/ffmpeg-manager.ts
+++ b/src/main/lib/ffmpeg-manager.ts
@@ -0,0 +1,101 @@
+import { execSync } from 'node:child_process'
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+
+class FfmpegManager {
+  private ffmpegPath: string | null = null
+
+  async initialize(): Promise<void> {
+    this.ffmpegPath = await this.findFfmpegBinary()
+    console.log('ffmpeg initialized at:', this.ffmpegPath)
+  }
+
+  getPath(): string {
+    if (!this.ffmpegPath) {
+      throw new Error('ffmpeg not initialized. Call initialize() first.')
+    }
+    return this.ffmpegPath
+  }
+
+  private getResourcesPath(): string {
+    if (process.env.NODE_ENV === 'development') {
+      return path.join(process.cwd(), 'resources')
+    }
+    return path.join(process.resourcesPath, 'app.asar.unpacked', 'resources')
+  }
+
+  private async findFfmpegBinary(): Promise<string> {
+    const platform = os.platform()
+    const resourceCandidates: string[] = []
+
+    if (process.env.FFMPEG_PATH && fs.existsSync(process.env.FFMPEG_PATH)) {
+      console.log('Using ffmpeg from FFMPEG_PATH:', process.env.FFMPEG_PATH)
+      return process.env.FFMPEG_PATH
+    }
+
+    if (platform === 'win32') {
+      resourceCandidates.push('ffmpeg.exe')
+    } else if (platform === 'darwin') {
+      resourceCandidates.push('ffmpeg_macos', 'ffmpeg')
+    } else {
+      resourceCandidates.push('ffmpeg_linux', 'ffmpeg')
+    }
+
+    const resourcesPath = this.getResourcesPath()
+    for (const candidate of resourceCandidates) {
+      const fullPath = path.join(resourcesPath, candidate)
+      if (fs.existsSync(fullPath)) {
+        if (platform !== 'win32') {
+          try {
+            fs.chmodSync(fullPath, 0o755)
+          } catch (error) {
+            console.warn('Failed to set executable permission on ffmpeg binary:', error)
+          }
+        }
+        console.log('Using bundled ffmpeg:', fullPath)
+        return fullPath
+      }
+    }
+
+    if (platform === 'darwin') {
+      const commonPaths = ['/opt/homebrew/bin/ffmpeg', '/usr/local/bin/ffmpeg']
+      for (const candidate of commonPaths) {
+        if (fs.existsSync(candidate)) {
+          console.log('Using system ffmpeg:', candidate)
+          return candidate
+        }
+      }
+    }
+
+    if (platform === 'linux' || platform === 'freebsd') {
+      try {
+        const systemPath = execSync('which ffmpeg').toString().trim()
+        if (systemPath && fs.existsSync(systemPath)) {
+          console.log('Using system ffmpeg:', systemPath)
+          return systemPath
+        }
+      } catch (_error) {
+        // Ignore error and continue
+      }
+    }
+
+    if (platform === 'win32') {
+      try {
+        const output = execSync('where ffmpeg').toString().split(/\r?\n/)[0]
+        if (output && fs.existsSync(output)) {
+          console.log('Using system ffmpeg:', output)
+          return output
+        }
+      } catch (_error) {
+        // Ignore error and continue
+      }
+    }
+
+    throw new Error(
+      'ffmpeg not found. Bundle it under resources/ (asarUnpack) or set the FFMPEG_PATH environment variable.'
+    )
+  }
+}
+
+export const ffmpegManager = new FfmpegManager()
--- a/src/main/utils/dock.ts
+++ b/src/main/utils/dock.ts
@@ -0,0 +1,16 @@
+import { app } from 'electron'
+
+/**
+ * Apply Dock visibility preference on macOS.
+ */
+export function applyDockVisibility(hideDockIcon: boolean): void {
+  if (process.platform !== 'darwin' || !app.dock) {
+    return
+  }
+
+  if (hideDockIcon) {
+    app.dock.hide()
+  } else {
+    app.dock.show()
+  }
+}
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -2,19 +2,27 @@ import { ScrollArea } from '@renderer/components/ui/scroll-area'
 import { Sidebar } from '@renderer/components/ui/sidebar'
 import { Toaster } from '@renderer/components/ui/sonner'
 import { TitleBar } from '@renderer/components/ui/title-bar'
+import { useAtom } from 'jotai'
 import { ThemeProvider } from 'next-themes'
-import { useEffect, useState } from 'react'
-import { ipcServices } from './lib/ipc'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { ipcEvents, ipcServices } from './lib/ipc'
 import { About } from './pages/About'
 import { Home } from './pages/Home'
 import { Settings } from './pages/Settings'
 import { SupportedSites } from './pages/SupportedSites'
+import { settingsAtom } from './store/settings'

 type Page = 'home' | 'settings' | 'about' | 'sites'

 function AppContent() {
  const [currentPage, setCurrentPage] = useState<Page>('home')
  const [platform, setPlatform] = useState<string>('')
+  const [settings] = useAtom(settingsAtom)
+  const { t } = useTranslation()
+  const autoUpdateEnabled = settings.autoUpdate
+  const updateDownloadInProgressRef = useRef(false)

  useEffect(() => {
    // Get platform info to determine if we should show title bar
@@ -31,6 +39,117 @@ function AppContent() {
    getPlatform()
  }, [])

+  useEffect(() => {
+    if (!window?.api) {
+      return
+    }
+
+    const showRestartPrompt = () => {
+      toast.info(t('about.notifications.restartToUpdate'), {
+        action: {
+          label: t('about.notifications.restartNowAction'),
+          onClick: () => {
+            void ipcServices.update.quitAndInstall()
+          }
+        }
+      })
+    }
+
+    const resetDownloadState = () => {
+      if (updateDownloadInProgressRef.current) {
+        updateDownloadInProgressRef.current = false
+      }
+    }
+
+    const handleGoToDownloadPage = () => {
+      if (typeof window !== 'undefined') {
+        window.open('https://vidbee.org/download/', '_blank', 'noopener,noreferrer')
+      }
+    }
+
+    const handleUpdateAvailable = (rawInfo: unknown) => {
+      const info = (rawInfo ?? {}) as { version?: string }
+      const versionLabel = info.version ?? ''
+
+      if (autoUpdateEnabled) {
+        // Update will be downloaded automatically because autoDownload is enabled in main process
+        toast.success(t('about.notifications.updateAvailable', { version: versionLabel }), {
+          action: {
+            label: t('about.actions.goToDownload'),
+            onClick: handleGoToDownloadPage
+          }
+        })
+        // No need to manually call downloadUpdate() because autoDownload is true
+      } else {
+        toast.success(t('about.notifications.updateAvailable', { version: versionLabel }), {
+          action: {
+            label: t('about.actions.goToDownload'),
+            onClick: handleGoToDownloadPage
+          }
+        })
+      }
+    }
+
+    const handleUpdateDownloaded = (rawInfo: unknown) => {
+      const info = (rawInfo ?? {}) as { version?: string }
+      resetDownloadState()
+
+      const versionLabel = info?.version ?? ''
+      const downloadedMessage = versionLabel
+        ? t('about.notifications.updateDownloadedVersion', { version: versionLabel })
+        : t('about.notifications.updateDownloaded')
+      toast.success(downloadedMessage)
+
+      showRestartPrompt()
+    }
+
+    const handleUpdateError = (rawMessage: unknown) => {
+      const message = typeof rawMessage === 'string' ? rawMessage : ''
+      resetDownloadState()
+
+      const errorMessage = message || t('about.notifications.unknownErrorFallback')
+      toast.error(t('about.notifications.updateError', { error: errorMessage }))
+    }
+
+    const handleDownloadProgress = (rawProgress: unknown) => {
+      const progress = (rawProgress ?? {}) as { percent?: number }
+      if (typeof progress?.percent === 'number') {
+        console.info('Update download progress:', progress.percent.toFixed(2))
+      }
+    }
+
+    const handleUpdateNotification = (rawPayload: unknown) => {
+      const payload = (rawPayload ?? {}) as { body?: string; version?: string }
+      const versionLabel = payload.version ?? ''
+      const downloadedMessage = versionLabel
+        ? t('about.notifications.updateDownloadedVersion', { version: versionLabel })
+        : t('about.notifications.updateDownloaded')
+
+      toast.info(payload?.body ?? downloadedMessage, {
+        action: {
+          label: t('about.notifications.restartNowAction'),
+          onClick: () => {
+            void ipcServices.update.quitAndInstall()
+          }
+        }
+      })
+    }
+
+    ipcEvents.on('update:available', handleUpdateAvailable)
+    ipcEvents.on('update:downloaded', handleUpdateDownloaded)
+    ipcEvents.on('update:error', handleUpdateError)
+    ipcEvents.on('update:download-progress', handleDownloadProgress)
+    ipcEvents.on('update:show-notification', handleUpdateNotification)
+
+    return () => {
+      ipcEvents.removeListener('update:available', handleUpdateAvailable)
+      ipcEvents.removeListener('update:downloaded', handleUpdateDownloaded)
+      ipcEvents.removeListener('update:error', handleUpdateError)
+      ipcEvents.removeListener('update:download-progress', handleDownloadProgress)
+      ipcEvents.removeListener('update:show-notification', handleUpdateNotification)
+    }
+  }, [autoUpdateEnabled, t])
+
  const renderPage = () => {
    switch (currentPage) {
      case 'home':
--- a/src/renderer/src/components/download/DownloadItem.tsx
+++ b/src/renderer/src/components/download/DownloadItem.tsx
@@ -214,6 +214,28 @@ export function DownloadItem({ download }: DownloadItemProps) {
                  </div>
                )}
              </div>
+              {download.playlistId && (
+                <div className="flex w-full flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                  <Badge
+                    variant="secondary"
+                    className="bg-blue-500/10 text-blue-700 dark:text-blue-200"
+                  >
+                    {t('playlist.badgeLabel')}
+                  </Badge>
+                  <span className="truncate">
+                    {download.playlistTitle || t('playlist.untitled')}
+                    {download.playlistIndex !== undefined &&
+                      download.playlistSize !== undefined && (
+                        <span className="ml-1 text-muted-foreground/80">
+                          {t('playlist.positionLabel', {
+                            index: download.playlistIndex,
+                            total: download.playlistSize
+                          })}
+                        </span>
+                      )}
+                  </span>
+                </div>
+              )}
              <div className="flex w-full min-w-0 flex-wrap items-center gap-2 text-xs text-muted-foreground">
                {timestamp ? (
                  <span className="truncate max-w-[120px]">{formatDate(timestamp)}</span>
--- a/src/renderer/src/components/download/PlaylistDownloadGroup.tsx
+++ b/src/renderer/src/components/download/PlaylistDownloadGroup.tsx
@@ -0,0 +1,59 @@
+import { useTranslation } from 'react-i18next'
+import type { DownloadRecord } from '../../store/downloads'
+import { DownloadItem } from './DownloadItem'
+
+interface PlaylistDownloadGroupProps {
+  groupId: string
+  title: string
+  records: DownloadRecord[]
+  totalCount: number
+}
+
+export function PlaylistDownloadGroup({
+  groupId,
+  title,
+  records,
+  totalCount
+}: PlaylistDownloadGroupProps) {
+  const { t } = useTranslation()
+
+  const completedCount = records.filter((record) => record.status === 'completed').length
+  const errorCount = records.filter((record) => record.status === 'error').length
+  const activeCount = records.filter((record) =>
+    ['downloading', 'processing', 'pending'].includes(record.status)
+  ).length
+
+  const displayTitle = title || t('playlist.untitled')
+
+  return (
+    <div className="space-y-2 rounded-md border border-border/60 bg-muted/20 p-3">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="min-w-0">
+          <p className="truncate text-sm font-semibold text-foreground">{displayTitle}</p>
+          <p className="text-xs text-muted-foreground">
+            {t('playlist.groupSummary', { completed: completedCount, total: totalCount })}
+          </p>
+        </div>
+        <div className="flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
+          {activeCount > 0 && <span>{t('playlist.groupActive', { count: activeCount })}</span>}
+          {errorCount > 0 && (
+            <span className="text-destructive">
+              {t('playlist.groupErrors', { count: errorCount })}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {records.map((record) => (
+          <div
+            key={`${groupId}:${record.entryType}:${record.id}`}
+            className="border-l border-border/50 pl-3"
+          >
+            <DownloadItem download={record} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
--- a/src/renderer/src/components/download/UnifiedDownloadHistory.tsx
+++ b/src/renderer/src/components/download/UnifiedDownloadHistory.tsx
@@ -6,8 +6,10 @@ import { History as HistoryIcon } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useHistorySync } from '../../hooks/use-history-sync'
+import type { DownloadRecord } from '../../store/downloads'
 import { clearCompletedAtom, downloadStatsAtom, downloadsArrayAtom } from '../../store/downloads'
 import { DownloadItem } from './DownloadItem'
+import { PlaylistDownloadGroup } from './PlaylistDownloadGroup'

 type StatusFilter = 'all' | 'active' | 'completed' | 'error'

@@ -47,6 +49,56 @@ export function UnifiedDownloadHistory() {
    { key: 'error', label: t('download.error'), count: downloadStats.error }
  ]

+  const groupedView = useMemo(() => {
+    const groups = new Map<
+      string,
+      { id: string; title: string; totalCount: number; records: DownloadRecord[] }
+    >()
+    const order: Array<{ type: 'group'; id: string } | { type: 'single'; record: DownloadRecord }> =
+      []
+
+    for (const record of filteredRecords) {
+      if (record.playlistId) {
+        let group = groups.get(record.playlistId)
+        if (!group) {
+          group = {
+            id: record.playlistId,
+            title: record.playlistTitle || record.title,
+            totalCount: record.playlistSize || 0,
+            records: []
+          }
+          groups.set(record.playlistId, group)
+          order.push({ type: 'group', id: record.playlistId })
+        }
+        group.records.push(record)
+        if (!group.title && record.playlistTitle) {
+          group.title = record.playlistTitle
+        }
+        if (!group.totalCount && record.playlistSize) {
+          group.totalCount = record.playlistSize
+        }
+      } else {
+        order.push({ type: 'single', record })
+      }
+    }
+
+    for (const group of groups.values()) {
+      group.records.sort((a, b) => {
+        const aIndex = a.playlistIndex ?? Number.MAX_SAFE_INTEGER
+        const bIndex = b.playlistIndex ?? Number.MAX_SAFE_INTEGER
+        if (aIndex !== bIndex) {
+          return aIndex - bIndex
+        }
+        return b.createdAt - a.createdAt
+      })
+      if (!group.totalCount) {
+        group.totalCount = group.records.length
+      }
+    }
+
+    return { order, groups }
+  }, [filteredRecords])
+
  const hasCompletedActive = allRecords.some(
    (item) => item.entryType === 'active' && item.status === 'completed'
  )
@@ -110,10 +162,32 @@ export function UnifiedDownloadHistory() {
            <p className="text-sm font-medium">{t('download.noItems')}</p>
          </div>
        ) : (
-          <div className="space-y-2 sm:space-y-4 overflow-hidden w-full">
-            {filteredRecords.map((record) => (
-              <DownloadItem key={`${record.entryType}:${record.id}`} download={record} />
-            ))}
+          <div className="space-y-3 sm:space-y-4 overflow-hidden w-full">
+            {groupedView.order.map((item) => {
+              if (item.type === 'single') {
+                return (
+                  <DownloadItem
+                    key={`${item.record.entryType}:${item.record.id}`}
+                    download={item.record}
+                  />
+                )
+              }
+
+              const group = groupedView.groups.get(item.id)
+              if (!group) {
+                return null
+              }
+
+              return (
+                <PlaylistDownloadGroup
+                  key={`group:${group.id}`}
+                  groupId={group.id}
+                  title={group.title}
+                  totalCount={group.totalCount}
+                  records={group.records}
+                />
+              )
+            })}
          </div>
        )}
      </CardContent>
--- a/src/renderer/src/components/playlist/PlaylistPreviewCard.tsx
+++ b/src/renderer/src/components/playlist/PlaylistPreviewCard.tsx
@@ -0,0 +1,94 @@
+import { Button } from '@renderer/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@renderer/components/ui/card'
+import { ScrollArea } from '@renderer/components/ui/scroll-area'
+import type { PlaylistEntry, PlaylistInfo } from '@shared/types'
+import { useTranslation } from 'react-i18next'
+
+interface PlaylistPreviewCardProps {
+  playlist: PlaylistInfo
+  entries: PlaylistEntry[]
+  onClear?: () => void
+}
+
+export function PlaylistPreviewCard({ playlist, entries, onClear }: PlaylistPreviewCardProps) {
+  const { t } = useTranslation()
+
+  const totalCount = playlist.entryCount
+  const selectedCount = entries.length
+  const firstIndex = entries[0]?.index ?? null
+  const lastIndex = entries[entries.length - 1]?.index ?? firstIndex ?? null
+
+  return (
+    <Card className="border border-border/60 bg-background/80 shadow-sm overflow-hidden">
+      <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
+        <div className="min-w-0 flex-1 space-y-1">
+          <CardTitle
+            className="truncate text-base font-semibold sm:text-lg wrap-break-word"
+            title={playlist.title}
+          >
+            {playlist.title || t('playlist.untitled')}
+          </CardTitle>
+          <CardDescription className="text-xs text-muted-foreground sm:text-sm">
+            <div className="flex min-w-0 flex-wrap items-center gap-3 text-xs text-muted-foreground sm:text-sm">
+              <span className="truncate">{t('playlist.totalVideos', { count: totalCount })}</span>
+              {firstIndex !== null && lastIndex !== null ? (
+                <span className="truncate">
+                  {t('playlist.selectedRange', {
+                    start: firstIndex,
+                    end: lastIndex
+                  })}
+                </span>
+              ) : (
+                <span className="truncate">{t('playlist.noRangeSelected')}</span>
+              )}
+              <span className="truncate">
+                {t('playlist.showingCount', { count: selectedCount })}
+              </span>
+            </div>
+          </CardDescription>
+        </div>
+        {onClear && (
+          <Button variant="ghost" size="sm" onClick={onClear} className="shrink-0">
+            {t('playlist.clearPreview')}
+          </Button>
+        )}
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="rounded-md border border-border/60 bg-muted/20">
+          <ScrollArea className="max-h-64 w-full pr-1 overflow-y-auto overflow-x-hidden">
+            <ol className="w-full min-w-0 divide-y divide-border/60 text-sm leading-snug">
+              {entries.length === 0 ? (
+                <li className="px-4 py-6 text-center text-xs text-muted-foreground">
+                  {t('playlist.noEntriesInRange')}
+                </li>
+              ) : (
+                entries.map((entry) => (
+                  <li
+                    key={`${entry.index}-${entry.id}`}
+                    className="flex items-start gap-3 px-4 py-2 min-w-0 w-full max-w-full overflow-hidden"
+                  >
+                    <span className="w-12 shrink-0 text-xs font-semibold text-muted-foreground text-center">
+                      #{entry.index}
+                    </span>
+                    <span
+                      className="min-w-0 flex-1 truncate text-sm overflow-hidden wrap-break-word"
+                      title={entry.title}
+                    >
+                      {entry.title}
+                    </span>
+                  </li>
+                ))
+              )}
+            </ol>
+          </ScrollArea>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
--- a/src/renderer/src/components/video/AudioExtractor.tsx
+++ b/src/renderer/src/components/video/AudioExtractor.tsx
@@ -41,44 +41,46 @@ export function AudioExtractor({ onExtract }: AudioExtractorProps) {
  ]

  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('audioExtract.title')}</CardTitle>
+    <Card className="border-2 border-dashed">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg">{t('audioExtract.title')}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
-        <div className="space-y-2">
-          <Label>{t('audioExtract.selectFormat')}</Label>
-          <Select value={extractFormat} onValueChange={setExtractFormat}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {audioFormats.map((format) => (
-                <SelectItem key={format.value} value={format.value}>
-                  {format.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div className="space-y-2.5">
+            <Label className="text-sm font-semibold">{t('audioExtract.selectFormat')}</Label>
+            <Select value={extractFormat} onValueChange={setExtractFormat}>
+              <SelectTrigger className="h-10">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {audioFormats.map((format) => (
+                  <SelectItem key={format.value} value={format.value}>
+                    {format.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2.5">
+            <Label className="text-sm font-semibold">{t('audioExtract.selectQuality')}</Label>
+            <Select value={extractQuality} onValueChange={setExtractQuality}>
+              <SelectTrigger className="h-10">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {qualities.map((quality) => (
+                  <SelectItem key={quality.value} value={quality.value}>
+                    {quality.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
        </div>

-        <div className="space-y-2">
-          <Label>{t('audioExtract.selectQuality')}</Label>
-          <Select value={extractQuality} onValueChange={setExtractQuality}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {qualities.map((quality) => (
-                <SelectItem key={quality.value} value={quality.value}>
-                  {quality.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-        <Button onClick={() => onExtract('extract')} className="w-full">
+        <Button onClick={() => onExtract('extract')} className="w-full" size="lg">
          {t('audioExtract.extract')}
        </Button>
      </CardContent>
--- a/src/renderer/src/components/video/FormatSelector.tsx
+++ b/src/renderer/src/components/video/FormatSelector.tsx
@@ -73,9 +73,22 @@ export function FormatSelector({

  useEffect(() => {
    // Filter and sort formats
-    const videos = formats.filter((f) => f.video_ext !== 'none' && f.vcodec && f.vcodec !== 'none')
+    // Exclude m3u8/HLS formats as they are streaming formats not suitable for direct download
+    const videos = formats.filter(
+      (f) =>
+        f.video_ext !== 'none' &&
+        f.vcodec &&
+        f.vcodec !== 'none' &&
+        f.protocol !== 'm3u8' &&
+        f.protocol !== 'm3u8_native'
+    )
    const audios = formats.filter(
-      (f) => f.acodec && f.acodec !== 'none' && (f.video_ext === 'none' || !f.video_ext)
+      (f) =>
+        f.acodec &&
+        f.acodec !== 'none' &&
+        (f.video_ext === 'none' || !f.video_ext) &&
+        f.protocol !== 'm3u8' &&
+        f.protocol !== 'm3u8_native'
    )

    // Apply showMoreFormats filter
@@ -87,6 +100,48 @@ export function FormatSelector({
      ? audios
      : audios.filter((f) => f.ext !== 'webm')

+    // Sort formats by quality (best first)
+    const sortVideoFormatsByQuality = (a: VideoFormat, b: VideoFormat) => {
+      // Sort by height (higher is better)
+      const aHeight = a.height ?? 0
+      const bHeight = b.height ?? 0
+      if (aHeight !== bHeight) {
+        return bHeight - aHeight
+      }
+      // If same height, sort by fps (higher is better)
+      const aFps = a.fps ?? 0
+      const bFps = b.fps ?? 0
+      if (aFps !== bFps) {
+        return bFps - aFps
+      }
+      // If same quality, prefer formats with file size information
+      const aHasSize = !!(a.filesize || a.filesize_approx)
+      const bHasSize = !!(b.filesize || b.filesize_approx)
+      if (aHasSize !== bHasSize) {
+        return bHasSize ? 1 : -1
+      }
+      return 0
+    }
+
+    const sortAudioFormatsByQuality = (a: VideoFormat, b: VideoFormat) => {
+      // Sort by bitrate/quality if available
+      const aQuality = a.tbr ?? a.quality ?? 0
+      const bQuality = b.tbr ?? b.quality ?? 0
+      if (aQuality !== bQuality) {
+        return bQuality - aQuality
+      }
+      // If same quality, prefer formats with file size information
+      const aHasSize = !!(a.filesize || a.filesize_approx)
+      const bHasSize = !!(b.filesize || b.filesize_approx)
+      if (aHasSize !== bHasSize) {
+        return bHasSize ? 1 : -1
+      }
+      return 0
+    }
+
+    filteredVideos.sort(sortVideoFormatsByQuality)
+    filteredAudios.sort(sortAudioFormatsByQuality)
+
    setVideoFormats(filteredVideos)
    setAudioFormats(filteredAudios)

@@ -121,25 +176,50 @@ export function FormatSelector({
  }

  const formatVideoLabel = (format: VideoFormat) => {
-    const quality = `${format.height || '???'}p${format.fps === 60 ? '60' : ''}`
-    const codec = settings.showMoreFormats ? ` | ${format.vcodec?.split('.')[0]}` : ''
+    const parts: string[] = []
+    // Resolution
+    if (format.height) {
+      parts.push(`${format.height}p${format.fps === 60 ? '60' : ''}`)
+    }
+    // Format extension
+    parts.push(format.ext.toUpperCase())
+    // Codec (if showMoreFormats is enabled)
+    if (settings.showMoreFormats && format.vcodec) {
+      parts.push(format.vcodec.split('.')[0])
+    }
+    // Audio indicator
+    if (format.acodec !== 'none') {
+      parts.push('🔊')
+    }
+    // File size
    const size = formatSize(format.filesize || format.filesize_approx)
-    const hasAudio = format.acodec !== 'none' ? ' 🔊' : ''
-    return `${quality} | ${format.ext} ${codec} | ${size}${hasAudio}`
+    if (size !== t('download.unknownSize')) {
+      parts.push(size)
+    }
+    return parts.join(' • ')
  }

  const formatAudioLabel = (format: VideoFormat) => {
+    const parts: string[] = []
+    // Quality
    const quality = format.format_note || t('download.unknownQuality')
+    parts.push(quality)
+    // Format extension
    const ext = format.ext === 'webm' ? 'opus' : format.ext
+    parts.push(ext.toUpperCase())
+    // File size
    const size = formatSize(format.filesize || format.filesize_approx)
-    return `${quality} | ${ext} | ${size}`
+    if (size !== t('download.unknownSize')) {
+      parts.push(size)
+    }
+    return parts.join(' • ')
  }

  if (type === 'video') {
    return (
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <Label>{t('download.selectVideoFormat')}</Label>
+      <div className="space-y-5">
+        <div className="space-y-3">
+          <Label className="text-sm font-semibold">{t('download.selectVideoFormat')}</Label>
          <Select
            value={selectedVideo}
            onValueChange={(value) => {
@@ -147,25 +227,25 @@ export function FormatSelector({
              onVideoFormatChange?.(value)
            }}
          >
-            <SelectTrigger>
+            <SelectTrigger className="h-11">
              <SelectValue />
            </SelectTrigger>
-            <SelectContent>
+            <SelectContent className="max-h-[300px] p-1.5">
              {videoFormats.map((format) => (
                <SelectItem
                  key={format.format_id}
                  value={format.format_id}
-                  className="font-mono text-xs"
+                  className="cursor-pointer py-2.5"
                >
-                  {formatVideoLabel(format)}
+                  <span className="text-sm">{formatVideoLabel(format)}</span>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

-        <div className="space-y-2">
-          <Label>{t('download.selectAudioFormat')}</Label>
+        <div className="space-y-3">
+          <Label className="text-sm font-semibold">{t('download.selectAudioFormat')}</Label>
          <Select
            value={selectedAudio}
            onValueChange={(value) => {
@@ -173,18 +253,20 @@ export function FormatSelector({
              onAudioFormatChange?.(value)
            }}
          >
-            <SelectTrigger>
+            <SelectTrigger className="h-11">
              <SelectValue />
            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="none">{t('download.noAudio')}</SelectItem>
+            <SelectContent className="max-h-[300px] p-1.5">
+              <SelectItem value="none" className="cursor-pointer py-2.5">
+                <span className="text-sm">{t('download.noAudio')}</span>
+              </SelectItem>
              {audioFormats.map((format) => (
                <SelectItem
                  key={format.format_id}
                  value={format.format_id}
-                  className="font-mono text-xs"
+                  className="cursor-pointer py-2.5"
                >
-                  {formatAudioLabel(format)}
+                  <span className="text-sm">{formatAudioLabel(format)}</span>
                </SelectItem>
              ))}
            </SelectContent>
@@ -196,8 +278,8 @@ export function FormatSelector({

  // Audio only
  return (
-    <div className="space-y-2">
-      <Label>{t('download.selectFormat')}</Label>
+    <div className="space-y-3">
+      <Label className="text-sm font-semibold">{t('download.selectFormat')}</Label>
      <Select
        value={selectedAudio}
        onValueChange={(value) => {
@@ -205,17 +287,17 @@ export function FormatSelector({
          onAudioFormatChange?.(value)
        }}
      >
-        <SelectTrigger>
+        <SelectTrigger className="h-11">
          <SelectValue />
        </SelectTrigger>
-        <SelectContent>
+        <SelectContent className="max-h-[300px] p-1.5">
          {audioFormats.map((format) => (
            <SelectItem
              key={format.format_id}
              value={format.format_id}
-              className="font-mono text-xs"
+              className="cursor-pointer py-2.5"
            >
-              {formatAudioLabel(format)}
+              <span className="text-sm">{formatAudioLabel(format)}</span>
            </SelectItem>
          ))}
        </SelectContent>
--- a/src/renderer/src/components/video/VideoInfoCard.tsx
+++ b/src/renderer/src/components/video/VideoInfoCard.tsx
@@ -115,53 +115,59 @@ export function VideoInfoCard({ videoInfo }: VideoInfoCardProps) {
  }

  return (
-    <div className="space-y-4">
-      <Button variant="ghost" onClick={() => clearVideoInfo()} className="gap-2">
+    <div className="space-y-5">
+      <Button variant="ghost" onClick={() => clearVideoInfo()} className="gap-2 -ml-2" size="sm">
        <ArrowLeft className="h-4 w-4" />
        {t('download.back')}
      </Button>

-      <Card>
-        <CardHeader>
+      <Card className="overflow-hidden">
+        <CardHeader className="pb-4">
          <div className="flex flex-col md:flex-row gap-6">
            {/* Thumbnail */}
            <div className="shrink-0">
              <ImageWithPlaceholder
                src={cachedThumbnail}
                alt={title}
-                className="w-full md:w-80 rounded-lg aspect-video"
+                className="w-full md:w-80 rounded-lg aspect-video object-cover shadow-sm"
                fallbackIcon={<Play className="h-12 w-12" />}
              />
            </div>

            {/* Video Metadata */}
-            <div className="flex-1 space-y-3">
-              <div>
-                <CardTitle className="text-xl mb-2">{t('download.videoInfo')}</CardTitle>
+            <div className="flex-1 space-y-4 min-w-0">
+              <div className="space-y-3">
+                <CardTitle className="text-2xl leading-tight">{t('download.videoInfo')}</CardTitle>
                <CardDescription className="flex flex-wrap gap-2 items-center">
                  {videoInfo.duration && (
-                    <Badge variant="secondary" className="gap-1">
-                      <Clock className="h-3 w-3" />
-                      {formatDuration(videoInfo.duration)}
+                    <Badge variant="secondary" className="gap-1.5 px-2.5 py-1">
+                      <Clock className="h-3.5 w-3.5" />
+                      <span>{formatDuration(videoInfo.duration)}</span>
                    </Badge>
                  )}
                  {videoInfo.view_count && (
-                    <Badge variant="secondary" className="gap-1">
-                      <Eye className="h-3 w-3" />
-                      {formatViews(videoInfo.view_count)}
+                    <Badge variant="secondary" className="gap-1.5 px-2.5 py-1">
+                      <Eye className="h-3.5 w-3.5" />
+                      <span>{formatViews(videoInfo.view_count)}</span>
+                    </Badge>
+                  )}
+                  {videoInfo.uploader && (
+                    <Badge variant="outline" className="px-2.5 py-1">
+                      {videoInfo.uploader}
                    </Badge>
                  )}
-                  {videoInfo.uploader && <Badge variant="outline">{videoInfo.uploader}</Badge>}
                </CardDescription>
              </div>

-              <div className="space-y-2">
-                <Label htmlFor={titleId}>{t('download.title')}</Label>
+              <div className="space-y-2.5">
+                <Label htmlFor={titleId} className="text-sm font-semibold">
+                  {t('download.title')}
+                </Label>
                <Input
                  id={titleId}
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
-                  className="font-medium"
+                  className="font-medium h-10"
                />
              </div>
            </div>
@@ -170,14 +176,18 @@ export function VideoInfoCard({ videoInfo }: VideoInfoCardProps) {

        <Separator />

-        <CardContent className="pt-6 space-y-6">
+        <CardContent className="pt-6 pb-6">
          <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'video' | 'audio')}>
-            <TabsList className="grid w-full grid-cols-2">
-              <TabsTrigger value="video">{t('download.video')}</TabsTrigger>
-              <TabsTrigger value="audio">{t('download.audio')}</TabsTrigger>
+            <TabsList className="grid w-full grid-cols-2 mb-6">
+              <TabsTrigger value="video" className="text-sm font-medium">
+                {t('download.video')}
+              </TabsTrigger>
+              <TabsTrigger value="audio" className="text-sm font-medium">
+                {t('download.audio')}
+              </TabsTrigger>
            </TabsList>

-            <TabsContent value="video" className="space-y-4 mt-4">
+            <TabsContent value="video" className="space-y-5 mt-0">
              <FormatSelector
                formats={videoInfo.formats || []}
                type="video"
@@ -194,13 +204,18 @@ export function VideoInfoCard({ videoInfo }: VideoInfoCardProps) {
                onDownloadSubsChange={setDownloadSubs}
              />

-              <Button onClick={() => handleDownload('video')} className="w-full" size="lg">
+              <Button
+                onClick={() => handleDownload('video')}
+                className="w-full"
+                size="lg"
+                variant="default"
+              >
                <DownloadIcon className="mr-2 h-5 w-5" />
                {t('download.downloadVideo')}
              </Button>
            </TabsContent>

-            <TabsContent value="audio" className="space-y-4 mt-4">
+            <TabsContent value="audio" className="space-y-5 mt-0">
              <FormatSelector
                formats={videoInfo.formats || []}
                type="audio"
@@ -218,7 +233,12 @@ export function VideoInfoCard({ videoInfo }: VideoInfoCardProps) {
                onDownloadSubsChange={setDownloadSubs}
              />

-              <Button onClick={() => handleDownload('audio')} className="w-full" size="lg">
+              <Button
+                onClick={() => handleDownload('audio')}
+                className="w-full"
+                size="lg"
+                variant="default"
+              >
                <DownloadIcon className="mr-2 h-5 w-5" />
                {t('download.downloadAudio')}
              </Button>
--- a/src/renderer/src/locales/en.json
+++ b/src/renderer/src/locales/en.json
@@ -2,8 +2,10 @@
  "about": {
    "actions": {
      "checkUpdates": "Check updates",
+      "download": "Download",
      "email": "Email",
      "feedback": "Feedback",
+      "goToDownload": "Go to download page",
      "openRepo": "Open GitHub repository",
      "view": "View",
      "visit": "Visit"
@@ -27,11 +29,16 @@
      "downloadError": "Failed to download update",
      "downloadStarted": "Download started...",
      "downloadUpdate": "Download and install update {{version}}?",
+      "manualDownloadAction": "Download now",
      "noUpdatesAvailable": "You're using the latest version",
      "restartToUpdate": "Restart now to install update?",
+      "restartNowAction": "Restart now",
      "updateAvailable": "Update available: {{version}}",
+      "updateAvailableMessage": "A new version {{version}} is available. Please download it from the official website.",
      "updateDownloaded": "Update downloaded, restart to install",
-      "updateError": "Failed to check for updates: {{error}}"
+      "updateDownloadedVersion": "Update {{version}} downloaded, restart to install",
+      "updateError": "Failed to check for updates: {{error}}",
+      "unknownErrorFallback": "Unknown error"
    },
    "preferencesDescription": "Tune update settings without leaving this page.",
    "preferencesTitle": "Quick Toggles",
@@ -60,7 +67,6 @@
    "shareSupport": "Recommend VidBee to your friends to support our growth and updates.",
    "shareTitle": "Spread the word",
    "sourceCode": "Source Code is available",
-    "tagline": "An AI-friendly download helper for every creator",
    "title": "About",
    "version": "Version",
    "versionLabel": "v{{version}}",
@@ -227,6 +233,8 @@
    "videoCopied": "Video copied to clipboard"
  },
  "playlist": {
+    "badgeLabel": "Playlist",
+    "clearPreview": "Clear preview",
    "comingSoon": "Playlist download feature coming soon!",
    "completed": "Playlist downloaded",
    "description": "Download all videos from a YouTube playlist or channel",
@@ -241,12 +249,27 @@
    "filenameFormat": "Filename format for playlists",
    "folderFormat": "Folder name format for playlists",
    "foundVideos": "Found {{count}} videos in playlist",
+    "groupActive": "{{count}} active",
+    "groupErrors": "{{count}} failed",
+    "groupSummary": "{{completed}} / {{total}} completed",
    "linkLabel": "Playlist URL",
+    "noEntries": "No videos were found in this playlist",
+    "noEntriesInRange": "No videos in the selected range",
+    "noRangeSelected": "No end set - full playlist selected",
    "playlistUrlDescription": "Download all videos from a playlist in bulk",
+    "positionLabel": "Item {{index}} of {{total}}",
+    "previewButton": "Preview playlist",
+    "previewFailed": "Failed to preview playlist",
+    "previewSummary": "Preview playlist items before downloading.",
+    "previewRequired": "Preview the playlist before downloading.",
    "range": "Range (Optional)",
    "resetToDefault": "Reset to default",
+    "selectedRange": "Range: {{start}}-{{end}}",
+    "showingCount": "Showing {{count}} videos",
    "startIndex": "Start (1)",
-    "title": "Download Playlist"
+    "title": "Download Playlist",
+    "totalVideos": "Total videos: {{count}}",
+    "untitled": "Untitled playlist"
  },
  "settings": {
    "aboutTab": "About",
@@ -281,6 +304,8 @@
    "general": "General",
    "language": "Language",
    "light": "Light",
+    "hideDockIcon": "Hide Dock icon",
+    "hideDockIconDescription": "Remove VidBee from the macOS Dock. Use the menu bar or tray icon to reopen the app.",
    "maxConcurrentDownloads": "Maximum number of active downloads",
    "maxConcurrentDownloadsDescription": "Maximum number of simultaneous downloads",
    "none": "None",
--- a/src/renderer/src/locales/fr.json
+++ b/src/renderer/src/locales/fr.json
@@ -60,7 +60,6 @@
    "shareSupport": "Recommandez VidBee à vos amis pour soutenir notre croissance et nos mises à jour.",
    "shareTitle": "Faites passer le mot",
    "sourceCode": "Le code source est disponible",
-    "tagline": "Un assistant de téléchargement convivial pour l'IA pour chaque créateur",
    "title": "À propos",
    "version": "Version",
    "versionLabel": "v{{version}}",
--- a/src/renderer/src/locales/it.json
+++ b/src/renderer/src/locales/it.json
@@ -60,7 +60,6 @@
    "shareSupport": "Raccomanda VidBee ai tuoi amici per sostenere la nostra crescita e aggiornamenti.",
    "shareTitle": "Passa parola",
    "sourceCode": "Il codice sorgente è disponibile",
-    "tagline": "Un assistente di download amichevole per l'IA per ogni creatore",
    "title": "Informazioni",
    "version": "Versione",
    "versionLabel": "v{{version}}",
--- a/src/renderer/src/locales/ja.json
+++ b/src/renderer/src/locales/ja.json
@@ -60,7 +60,6 @@
    "shareSupport": "私たちの成長とアップデートをサポートするために、友達にVidBeeを推奨してください。",
    "shareTitle": "口コミを広める",
    "sourceCode": "ソースコードが利用可能",
-    "tagline": "すべてのクリエイターのためのAIフレンドリーなダウンロードアシスタント",
    "title": "について",
    "version": "バージョン",
    "versionLabel": "v{{version}}",
--- a/src/renderer/src/locales/ko.json
+++ b/src/renderer/src/locales/ko.json
@@ -60,7 +60,6 @@
    "shareSupport": "우리의 성장과 업데이트를 지원하기 위해 친구들에게 VidBee를 추천하세요.",
    "shareTitle": "소문을 퍼뜨리세요",
    "sourceCode": "소스 코드 사용 가능",
-    "tagline": "모든 크리에이터를 위한 AI 친화적 다운로드 도우미",
    "title": "정보",
    "version": "버전",
    "versionLabel": "v{{version}}",
--- a/src/renderer/src/locales/pt.json
+++ b/src/renderer/src/locales/pt.json
@@ -60,7 +60,6 @@
    "shareSupport": "Recomende VidBee aos seus amigos para apoiar nosso crescimento e atualizações.",
    "shareTitle": "Espalhe a palavra",
    "sourceCode": "Código fonte disponível",
-    "tagline": "Um assistente de download amigável à IA para cada criador",
    "title": "Sobre",
    "version": "Versão",
    "versionLabel": "v{{version}}",
--- a/src/renderer/src/locales/zh-TW.json
+++ b/src/renderer/src/locales/zh-TW.json
@@ -22,6 +22,12 @@
    "followAuthorTitle": "關注開發者",
    "here": "此處",
    "homepage": "首頁",
+    "latestVersionBadge": "最新版本：v{{version}}",
+    "latestVersionStatus": {
+      "available": "有新版本可用",
+      "error": "無法取得最新版本",
+      "uptodate": "您已是最新版本"
+    },
    "notifications": {
      "checkingUpdates": "正在搜尋更新...",
      "downloadError": "下載更新失敗",
@@ -60,16 +66,9 @@
    "shareSupport": "向您的朋友推薦 VidBee 以支援我們的成長和更新。",
    "shareTitle": "廣為宣傳",
    "sourceCode": "原始碼已開放",
-    "tagline": "面向每位創作者的 AI 友善下載助手",
    "title": "關於",
    "version": "版本",
-    "versionLabel": "v{{version}}",
-    "latestVersionBadge": "最新版本：v{{version}}",
-    "latestVersionStatus": {
-      "available": "有新版本可用",
-      "uptodate": "您已是最新版本",
-      "error": "無法取得最新版本"
-    }
+    "versionLabel": "v{{version}}"
  },
  "advancedOptions": {
    "closeWhenDone": "下載完成後關閉應用程式",
@@ -227,6 +226,7 @@
    "videoCopied": "影片已複製到剪貼簿"
  },
  "playlist": {
+    "clearPreview": "清晰預覽",
    "comingSoon": "播放清單下載功能即將推出！",
    "completed": "播放清單已下載",
    "description": "下載 YouTube 播放清單或頻道中的全部影片",
@@ -241,12 +241,27 @@
    "filenameFormat": "播放清單檔案名稱格式",
    "folderFormat": "播放清單資料夾命名格式",
    "foundVideos": "在播放清單中找到 {{count}} 個影片",
+    "groupActive": "{{count}} 個活躍",
+    "groupErrors": "{{count}} 失敗",
+    "groupSummary": "{{已完成}} / {{總計}}已完成",
    "linkLabel": "播放清單連結",
+    "noEntries": "在此播放列表中找不到視頻",
+    "noEntriesInRange": "所選範圍內沒有視頻",
+    "noRangeSelected": "沒有結束設置 - 已選擇完整播放列表",
    "playlistUrlDescription": "批量下載播放清單中的所有影片",
+    "positionLabel": "第 {{index}} 項，共 {{total}} 項",
+    "previewButton": "預覽播放列表",
+    "previewFailed": "預覽播放列表失敗",
+    "previewRequired": "下載前預覽播放列表。",
+    "previewSummary": "下載前預覽播放列表項目。",
    "range": "範圍（可選）",
    "resetToDefault": "恢復預設",
+    "selectedRange": "範圍：{{開始}}-{{結束}}",
+    "showingCount": "顯示 {{count}} 個視頻",
    "startIndex": "開始（1）",
-    "title": "下載播放清單"
+    "title": "下載播放清單",
+    "totalVideos": "視頻總數：{{count}}",
+    "untitled": "無標題播放列表"
  },
  "settings": {
    "aboutTab": "關於",
@@ -262,8 +277,15 @@
      "firefox": "Firefox",
      "safari": "Safari"
    },
+    "clearCookiesFile": "清除",
    "configFile": "使用設定檔",
    "configFileDescription": "yt-dlp 的自訂設定檔",
+    "cookiesFile": "餅乾文件",
+    "cookiesFileDescription": "要加載以進行身份驗證的 Netscape 格式的 cookie 文件",
+    "cookiesHelpBrowser": "選擇上面的瀏覽器以自動重用其登錄會話。",
+    "cookiesHelpFaq": "打開 yt-dlp cookies 常見問題解答",
+    "cookiesHelpFile": "導出 Netscape cookies 文件（請參閱 yt-dlp FAQ）並在需要時在此處選擇它。",
+    "cookiesHelpTitle": "使用cookie",
    "dark": "深色",
    "description": "設定下載偏好和應用程式設定",
    "directorySelectError": "選擇目錄失敗",
@@ -290,6 +312,7 @@
      "normal": "標準",
      "worst": "最差"
    },
+    "openLinkError": "無法打開鏈接",
    "proxy": "代理伺服器",
    "proxyDescription": "網路請求的代理伺服器",
    "proxyPlaceholder": "http://proxy:port",
--- a/src/renderer/src/locales/zh.json
+++ b/src/renderer/src/locales/zh.json
@@ -52,7 +52,6 @@
    "resourcesDescription": "了解 VidBee 并保持关注的实用链接。",
    "resourcesTitle": "资源",
    "sourceCode": "源代码已开放",
-    "tagline": "面向每位创作者的 AI 友好下载助手",
    "title": "关于",
    "version": "版本",
    "versionLabel": "v{{version}}",
--- a/src/renderer/src/pages/About.tsx
+++ b/src/renderer/src/pages/About.tsx
@@ -11,6 +11,7 @@ import { Switch } from '@renderer/components/ui/switch'
 import { useAtom, useSetAtom } from 'jotai'
 import type { LucideIcon } from 'lucide-react'
 import {
+  Download,
  Facebook,
  FileText,
  Github,
@@ -48,7 +49,7 @@ export function About() {
  const [appVersion, setAppVersion] = useState<string>('—')
  const [latestVersionState, setLatestVersionState] = useState<LatestVersionState>(null)
  const saveSetting = useSetAtom(saveSettingAtom)
-  const shareTargetUrl = 'https://github.com/nexmoe/VidBee'
+  const shareTargetUrl = 'https://vidbee.org'

  useEffect(() => {
    let isActive = true
@@ -77,6 +78,47 @@ export function About() {
  ) => {
    await saveSetting({ key, value })
    toast.success(t('notifications.settingsSaved'))
+
+    // If auto-update is enabled, check for updates immediately
+    if (key === 'autoUpdate' && value === true) {
+      try {
+        toast.info(t('about.notifications.checkingUpdates'))
+        const result = await ipcServices.update.checkForUpdates()
+
+        if (result.available) {
+          // The update will be downloaded automatically because autoDownload is enabled
+          toast.success(t('about.notifications.updateAvailable', { version: result.version }), {
+            action: {
+              label: t('about.actions.goToDownload'),
+              onClick: handleGoToDownload
+            }
+          })
+          setLatestVersionState({
+            status: 'available',
+            version: result.version ?? ''
+          })
+        } else if (result.error) {
+          toast.error(t('about.notifications.updateError', { error: result.error }))
+          setLatestVersionState({
+            status: 'error',
+            error: result.error
+          })
+        } else {
+          toast.success(t('about.notifications.noUpdatesAvailable'))
+          setLatestVersionState({
+            status: 'uptodate',
+            version: result.version ?? appVersion
+          })
+        }
+      } catch (error) {
+        console.error('Failed to check for updates:', error)
+        toast.error(t('about.notifications.updateError', { error: 'Unknown error' }))
+      }
+    }
+  }
+
+  const handleGoToDownload = () => {
+    openShareUrl('https://vidbee.org/download/')
  }

  const handleCheckForUpdates = async () => {
@@ -85,7 +127,12 @@ export function About() {
      const result = await ipcServices.update.checkForUpdates()

      if (result.available) {
-        toast.success(t('about.notifications.updateAvailable', { version: result.version }))
+        toast.success(t('about.notifications.updateAvailable', { version: result.version }), {
+          action: {
+            label: t('about.actions.goToDownload'),
+            onClick: handleGoToDownload
+          }
+        })
        setLatestVersionState({
          status: 'available',
          version: result.version ?? ''
@@ -114,7 +161,7 @@ export function About() {

  const shareLinks = useMemo(() => {
    const encodedUrl = encodeURIComponent(shareTargetUrl)
-    const encodedText = encodeURIComponent(t('about.tagline'))
+    const encodedText = encodeURIComponent(t('about.description'))

    return {
      facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
@@ -207,11 +254,6 @@ export function About() {
  return (
    <div className="h-full bg-background">
      <div className="container mx-auto max-w-5xl p-6 space-y-6">
-        <div className="space-y-2">
-          <h1 className="text-3xl font-bold tracking-tight">{t('about.title')}</h1>
-          <p className="text-muted-foreground">{t('about.description')}</p>
-        </div>
-
        <Card>
          <CardContent className="pt-6">
            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
@@ -220,7 +262,7 @@ export function About() {
                <div className="space-y-2">
                  <div>
                    <h2 className="text-2xl font-semibold leading-tight">{t('about.appName')}</h2>
-                    <p className="text-sm text-muted-foreground">{t('about.tagline')}</p>
+                    <p className="text-sm text-muted-foreground">{t('about.description')}</p>
                  </div>
                  <div className="flex flex-wrap items-center gap-2">
                    <Badge variant="secondary">
@@ -252,6 +294,12 @@ export function About() {
                    <Github className="h-4 w-4" />
                  </a>
                </Button>
+                {latestVersionState?.status === 'available' ? (
+                  <Button onClick={handleGoToDownload} variant="default" className="gap-2">
+                    <Download className="h-4 w-4" />
+                    {t('about.actions.goToDownload')}
+                  </Button>
+                ) : null}
                <Button onClick={handleCheckForUpdates} className="gap-2">
                  <RefreshCw className="h-4 w-4" />
                  {t('about.actions.checkUpdates')}
--- a/src/renderer/src/pages/Home.tsx
+++ b/src/renderer/src/pages/Home.tsx
@@ -15,15 +15,16 @@ import {
  SelectTrigger,
  SelectValue
 } from '@renderer/components/ui/select'
-import { Tabs, TabsContent } from '@renderer/components/ui/tabs'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@renderer/components/ui/tabs'
 import { popularSites } from '@renderer/data/popularSites'
-import type { AppSettings, OneClickQualityPreset } from '@shared/types'
+import type { AppSettings, OneClickQualityPreset, PlaylistInfo } from '@shared/types'
 import { useAtom, useSetAtom } from 'jotai'
-import { AlertCircle, Download, Loader2, Search } from 'lucide-react'
-import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { AlertCircle, Download, ListVideo, Loader2, Search } from 'lucide-react'
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { UnifiedDownloadHistory } from '../components/download/UnifiedDownloadHistory'
+import { PlaylistPreviewCard } from '../components/playlist/PlaylistPreviewCard'
 import { VideoInfoCard } from '../components/video/VideoInfoCard'
 import { ipcEvents, ipcServices } from '../lib/ipc'
 import {
@@ -75,18 +76,20 @@ const getQualityPreset = (settings: AppSettings): OneClickQualityPreset =>

 const buildAudioSelectors = (preset: OneClickQualityPreset): string[] => {
  if (preset === 'worst') {
-    return ['worstaudio', 'worst']
+    return ['worstaudio']
  }

  const abrLimit = qualityPresetToAudioAbr[preset]
-  return dedupe([abrLimit ? `bestaudio[abr<=${abrLimit}]` : undefined, 'bestaudio', 'best'])
+  // Remove 'best' fallback to ensure merging - only use 'bestaudio' variants
+  return dedupe([abrLimit ? `bestaudio[abr<=${abrLimit}]` : undefined, 'bestaudio'])
 }

 const buildVideoFormatPreference = (settings: AppSettings): string => {
  const preset = getQualityPreset(settings)

  if (preset === 'worst') {
-    return 'worstvideo+worstaudio/worst'
+    // Use worstvideo+worstaudio as fallback instead of 'worst' to ensure merging
+    return 'worstvideo+worstaudio'
  }

  const maxHeight = qualityPresetToVideoHeight[preset]
@@ -109,7 +112,8 @@ const buildVideoFormatPreference = (settings: AppSettings): string => {
      combinations.push(video)
    }
  } else {
-    combinations.push('best')
+    // Use bestvideo+bestaudio as fallback instead of 'best' to ensure merging
+    combinations.push('bestvideo+bestaudio')
  }

  return dedupe(combinations).join('/')
@@ -148,10 +152,41 @@ export function Home({ onOpenSupportedSites }: HomeProps) {
  const playlistUrlId = useId()
  const downloadTypeId = useId()
  const [playlistUrl, setPlaylistUrl] = useState('')
-  const [playlistLoading, setPlaylistLoading] = useState(false)
  const [downloadType, setDownloadType] = useState<'video' | 'audio'>('video')
  const [startIndex, setStartIndex] = useState('1')
  const [endIndex, setEndIndex] = useState('')
+  const [playlistInfo, setPlaylistInfo] = useState<PlaylistInfo | null>(null)
+  const [playlistPreviewLoading, setPlaylistPreviewLoading] = useState(false)
+  const [playlistDownloadLoading, setPlaylistDownloadLoading] = useState(false)
+  const [playlistPreviewError, setPlaylistPreviewError] = useState<string | null>(null)
+  const playlistBusy = playlistPreviewLoading || playlistDownloadLoading
+
+  const computePlaylistRange = useCallback(
+    (info: PlaylistInfo) => {
+      const parsedStart = Math.max(parseInt(startIndex, 10) || 1, 1)
+      const rawEnd = endIndex ? Math.max(parseInt(endIndex, 10), parsedStart) : undefined
+      const start = info.entryCount > 0 ? Math.min(parsedStart, info.entryCount) : parsedStart
+      const endValue =
+        rawEnd !== undefined
+          ? info.entryCount > 0
+            ? Math.min(rawEnd, info.entryCount)
+            : rawEnd
+          : undefined
+      return { start, end: endValue }
+    },
+    [startIndex, endIndex]
+  )
+
+  const selectedPlaylistEntries = useMemo(() => {
+    if (!playlistInfo) {
+      return []
+    }
+    const range = computePlaylistRange(playlistInfo)
+    const previewEnd = range.end ?? playlistInfo.entryCount
+    return playlistInfo.entries.filter(
+      (entry) => entry.index >= range.start && entry.index <= previewEnd
+    )
+  }, [playlistInfo, computePlaylistRange])

  const syncHistoryItem = useCallback(
    async (id: string) => {
@@ -366,70 +401,131 @@ export function Home({ onOpenSupportedSites }: HomeProps) {

  // Playlist handlers
  const handlePastePlaylistUrl = useCallback(async () => {
+    if (playlistBusy) return
    try {
      const text = await navigator.clipboard.readText()
      if (!text.trim()) {
        toast.error(t('errors.clipboardEmpty'))
        return
      }
-      setPlaylistUrl(text.trim())
+      const trimmed = text.trim()
+      setPlaylistUrl(trimmed)
+      setPlaylistInfo(null)
+      setPlaylistPreviewError(null)
    } catch (error) {
      console.error('Failed to paste URL:', error)
      toast.error(t('errors.pasteFromClipboard'))
    }
-  }, [t])
+  }, [playlistBusy, t])

-  const handleDownloadPlaylist = useCallback(async () => {
+  const handleClearPlaylistPreview = useCallback(() => {
+    setPlaylistInfo(null)
+    setPlaylistPreviewError(null)
+  }, [])
+
+  const handlePreviewPlaylist = useCallback(async () => {
    if (!playlistUrl.trim()) {
      toast.error(t('errors.emptyUrl'))
      return
    }
-
-    setPlaylistLoading(true)
+    setPlaylistPreviewError(null)
+    setPlaylistPreviewLoading(true)
    try {
-      // Get playlist info first to show user what will be downloaded
-      const playlistInfo = await ipcServices.download.getPlaylistInfo(playlistUrl)
+      const trimmedUrl = playlistUrl.trim()
+      const info = await ipcServices.download.getPlaylistInfo(trimmedUrl)
+      setPlaylistInfo(info)
+      if (info.entryCount === 0) {
+        toast.error(t('playlist.noEntries'))
+        return
+      }
+      toast.success(t('playlist.foundVideos', { count: info.entryCount }))
+    } catch (error) {
+      console.error('Failed to fetch playlist info:', error)
+      const message =
+        error instanceof Error && error.message ? error.message : t('playlist.previewFailed')
+      setPlaylistPreviewError(message)
+      setPlaylistInfo(null)
+      toast.error(t('playlist.previewFailed'))
+    } finally {
+      setPlaylistPreviewLoading(false)
+    }
+  }, [playlistUrl, t])

-      toast.success(t('playlist.foundVideos', { count: playlistInfo.entryCount }))
+  const handleDownloadPlaylist = useCallback(async () => {
+    const trimmedUrl = playlistUrl.trim()
+    if (!trimmedUrl) {
+      toast.error(t('errors.emptyUrl'))
+      return
+    }
+
+    if (!playlistInfo) {
+      toast.error(t('playlist.previewRequired'))
+      return
+    }
+
+    setPlaylistPreviewError(null)
+    setPlaylistDownloadLoading(true)
+    try {
+      const info = playlistInfo
+      setPlaylistInfo(info)
+
+      if (info.entryCount === 0) {
+        toast.error(t('playlist.noEntries'))
+        return
+      }
+
+      const range = computePlaylistRange(info)
+      const previewEnd = range.end ?? info.entryCount
+
+      if (previewEnd < range.start || previewEnd === 0) {
+        toast.error(t('playlist.noEntriesInRange'))
+        return
+      }

-      // Build format preference based on settings
      const format =
        downloadType === 'video'
          ? buildVideoFormatPreference(settings)
          : buildAudioFormatPreference(settings)

-      // Start playlist download
-      const downloadIds = await ipcServices.download.startPlaylistDownload({
-        url: playlistUrl.trim(),
+      const result = await ipcServices.download.startPlaylistDownload({
+        url: trimmedUrl,
        type: downloadType,
        format,
-        startIndex: parseInt(startIndex, 10) || 1,
-        endIndex: endIndex ? parseInt(endIndex, 10) : undefined
+        startIndex: range.start,
+        endIndex: range.end
      })

-      // Add all downloads to the renderer state
-      for (const id of downloadIds) {
+      if (result.totalCount === 0) {
+        toast.error(t('playlist.noEntriesInRange'))
+        return
+      }
+
+      const baseCreatedAt = Date.now()
+      result.entries.forEach((entry, index) => {
        const downloadItem = {
-          id,
-          url: playlistUrl.trim(),
-          title: t('download.fetchingVideoInfo'),
+          id: entry.downloadId,
+          url: entry.url,
+          title: entry.title || t('download.fetchingVideoInfo'),
          type: downloadType,
          status: 'pending' as const,
          progress: { percent: 0 },
-          createdAt: Date.now()
+          createdAt: baseCreatedAt + index,
+          playlistId: result.groupId,
+          playlistTitle: result.playlistTitle,
+          playlistIndex: entry.index,
+          playlistSize: result.totalCount
        }
        addDownload(downloadItem)
-      }
+      })

-      toast.success(t('playlist.downloadStarted', { count: downloadIds.length }))
-      setPlaylistUrl('') // Clear the URL after starting download
+      toast.success(t('playlist.downloadStarted', { count: result.totalCount }))
    } catch (error) {
      console.error('Failed to start playlist download:', error)
      toast.error(t('playlist.downloadFailed'))
    } finally {
-      setPlaylistLoading(false)
+      setPlaylistDownloadLoading(false)
    }
-  }, [playlistUrl, downloadType, startIndex, endIndex, settings, addDownload, t])
+  }, [playlistUrl, playlistInfo, computePlaylistRange, downloadType, settings, addDownload, t])

  // Auto-focus input on mount
  useEffect(() => {
@@ -442,7 +538,7 @@ export function Home({ onOpenSupportedSites }: HomeProps) {
      style={{ maxWidth: '100%' }}
    >
      <Tabs defaultValue="single" className="w-full">
-        {/* <TabsList className="grid w-full grid-cols-2">
+        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="single" className="flex items-center gap-2">
            <Download className="h-4 w-4" />
            {t('download.singleVideo')}
@@ -451,7 +547,7 @@ export function Home({ onOpenSupportedSites }: HomeProps) {
            <ListVideo className="h-4 w-4" />
            {t('playlist.title')}
          </TabsTrigger>
-        </TabsList> */}
+        </TabsList>

        {/* Single Video Download Tab */}
        <TabsContent value="single" className="space-y-6">
@@ -580,14 +676,18 @@ export function Home({ onOpenSupportedSites }: HomeProps) {
                    id={playlistUrlId}
                    placeholder="https://www.youtube.com/playlist?list=..."
                    value={playlistUrl}
-                    onChange={(e) => setPlaylistUrl(e.target.value)}
+                    onChange={(e) => {
+                      setPlaylistUrl(e.target.value)
+                      setPlaylistInfo(null)
+                      setPlaylistPreviewError(null)
+                    }}
                    className="flex-1"
-                    disabled={playlistLoading}
+                    disabled={playlistBusy}
                  />
                  <Button
                    onClick={handlePastePlaylistUrl}
                    variant="outline"
-                    disabled={playlistLoading}
+                    disabled={playlistBusy}
                  >
                    {t('download.paste')}
                  </Button>
@@ -600,7 +700,7 @@ export function Home({ onOpenSupportedSites }: HomeProps) {
                  <Select
                    value={downloadType}
                    onValueChange={(v) => setDownloadType(v as 'video' | 'audio')}
-                    disabled={playlistLoading}
+                    disabled={playlistBusy}
                  >
                    <SelectTrigger id={downloadTypeId}>
                      <SelectValue />
@@ -621,7 +721,7 @@ export function Home({ onOpenSupportedSites }: HomeProps) {
                      value={startIndex}
                      onChange={(e) => setStartIndex(e.target.value)}
                      min="1"
-                      disabled={playlistLoading}
+                      disabled={playlistBusy}
                    />
                    <Input
                      type="number"
@@ -629,29 +729,68 @@ export function Home({ onOpenSupportedSites }: HomeProps) {
                      value={endIndex}
                      onChange={(e) => setEndIndex(e.target.value)}
                      min="1"
-                      disabled={playlistLoading}
+                      disabled={playlistBusy}
                    />
                  </div>
                </div>
              </div>

-              <Button
-                onClick={handleDownloadPlaylist}
-                className="w-full"
-                size="lg"
-                disabled={playlistLoading || !playlistUrl.trim()}
-              >
-                {playlistLoading ? (
-                  <>
-                    <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                    {t('download.loading')}
-                  </>
-                ) : (
-                  t('playlist.downloadPlaylist')
+              <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+                <Button
+                  onClick={handlePreviewPlaylist}
+                  variant="outline"
+                  className="w-full sm:w-auto"
+                  disabled={playlistBusy || !playlistUrl.trim()}
+                >
+                  {playlistPreviewLoading ? (
+                    <>
+                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                      {t('download.loading')}
+                    </>
+                  ) : (
+                    <>
+                      <Search className="mr-2 h-5 w-5" />
+                      {t('playlist.previewButton')}
+                    </>
+                  )}
+                </Button>
+                {playlistInfo && (
+                  <Button
+                    onClick={handleDownloadPlaylist}
+                    className="w-full sm:flex-1"
+                    size="lg"
+                    disabled={playlistDownloadLoading || !playlistUrl.trim()}
+                  >
+                    {playlistDownloadLoading ? (
+                      <>
+                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                        {t('download.loading')}
+                      </>
+                    ) : (
+                      t('playlist.downloadPlaylist')
+                    )}
+                  </Button>
                )}
-              </Button>
+              </div>
+
+              {playlistUrl.trim() && !playlistInfo && !playlistPreviewError && !playlistBusy && (
+                <p className="text-xs text-muted-foreground">{t('playlist.previewRequired')}</p>
+              )}
+
+              {playlistPreviewError && (
+                <div className="rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+                  {playlistPreviewError}
+                </div>
+              )}
            </CardContent>
          </Card>
+          {playlistInfo && (
+            <PlaylistPreviewCard
+              playlist={playlistInfo}
+              entries={selectedPlaylistEntries}
+              onClear={handleClearPlaylistPreview}
+            />
+          )}
        </TabsContent>
      </Tabs>

--- a/src/renderer/src/pages/Settings.tsx
+++ b/src/renderer/src/pages/Settings.tsx
@@ -21,7 +21,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@renderer/components/u
 import type { OneClickQualityPreset } from '@shared/types'
 import { useAtom, useSetAtom } from 'jotai'
 import { useTheme } from 'next-themes'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { loadSettingsAtom, saveSettingAtom, settingsAtom } from '../store/settings'
@@ -32,11 +32,26 @@ export function Settings() {
  const [settings, _setSettings] = useAtom(settingsAtom)
  const loadSettings = useSetAtom(loadSettingsAtom)
  const saveSetting = useSetAtom(saveSettingAtom)
+  const [platform, setPlatform] = useState<string>('')

  useEffect(() => {
    loadSettings()
  }, [loadSettings])

+  useEffect(() => {
+    const fetchPlatform = async () => {
+      try {
+        const { ipcServices } = await import('../lib/ipc')
+        const platformInfo = await ipcServices.app.getPlatform()
+        setPlatform(platformInfo)
+      } catch (error) {
+        console.error('Failed to get platform info:', error)
+      }
+    }
+
+    fetchPlatform()
+  }, [])
+
  const handleSettingChange = async (
    key: keyof typeof settings,
    value: (typeof settings)[keyof typeof settings]
@@ -263,6 +278,23 @@ export function Settings() {
          </TabsContent>

          <TabsContent value="advanced" className="space-y-4 mt-2">
+            {platform === 'darwin' && (
+              <ItemGroup>
+                <Item variant="muted">
+                  <ItemContent>
+                    <ItemTitle>{t('settings.hideDockIcon')}</ItemTitle>
+                    <ItemDescription>{t('settings.hideDockIconDescription')}</ItemDescription>
+                  </ItemContent>
+                  <ItemActions>
+                    <Switch
+                      checked={settings.hideDockIcon}
+                      onCheckedChange={(value) => handleSettingChange('hideDockIcon', value)}
+                    />
+                  </ItemActions>
+                </Item>
+              </ItemGroup>
+            )}
+
            <ItemGroup>
              <Item variant="muted">
                <ItemContent>
--- a/src/renderer/src/store/downloads.ts
+++ b/src/renderer/src/store/downloads.ts
@@ -39,6 +39,10 @@ const toHistoryRecord = (item: DownloadHistoryItem): DownloadRecord => ({
  viewCount: item.viewCount,
  tags: item.tags,
  selectedFormat: item.selectedFormat,
+  playlistId: item.playlistId,
+  playlistTitle: item.playlistTitle,
+  playlistIndex: item.playlistIndex,
+  playlistSize: item.playlistSize,
  entryType: 'history',
  downloadedAt: item.downloadedAt
 })
--- a/src/shared/types/index.ts
+++ b/src/shared/types/index.ts
@@ -17,6 +17,7 @@ export interface VideoFormat {
  audio_ext?: string
  tbr?: number
  quality?: number
+  protocol?: string // http, https, m3u8, m3u8_native, etc.
 }

 export interface VideoInfo {
@@ -76,6 +77,11 @@ export interface DownloadItem {
  tags?: string[]
  // Download-specific format info
  selectedFormat?: VideoFormat
+  // Playlist context (optional)
+  playlistId?: string
+  playlistTitle?: string
+  playlistIndex?: number
+  playlistSize?: number
 }

 export interface DownloadHistoryItem {
@@ -103,6 +109,11 @@ export interface DownloadHistoryItem {
  tags?: string[]
  // Download-specific format info
  selectedFormat?: VideoFormat
+  // Playlist context (optional)
+  playlistId?: string
+  playlistTitle?: string
+  playlistIndex?: number
+  playlistSize?: number
 }

 export interface DownloadOptions {
@@ -117,14 +128,17 @@ export interface DownloadOptions {
  downloadSubs?: boolean
 }

+export interface PlaylistEntry {
+  id: string
+  title: string
+  url: string
+  index: number
+}
+
 export interface PlaylistInfo {
  id: string
  title: string
-  entries: Array<{
-    id: string
-    title: string
-    url: string
-  }>
+  entries: PlaylistEntry[]
  entryCount: number
 }

@@ -138,6 +152,25 @@ export interface PlaylistDownloadOptions {
  folderFormat?: string
 }

+export interface PlaylistDownloadEntry {
+  downloadId: string
+  entryId: string
+  title: string
+  url: string
+  index: number
+}
+
+export interface PlaylistDownloadResult {
+  groupId: string
+  playlistId: string
+  playlistTitle: string
+  type: 'video' | 'audio'
+  totalCount: number
+  startIndex: number
+  endIndex: number
+  entries: PlaylistDownloadEntry[]
+}
+
 // Settings types
 export type OneClickQualityPreset = 'auto' | 'best' | 'good' | 'normal' | 'bad' | 'worst'

@@ -156,6 +189,7 @@ export interface AppSettings {
  oneClickDownloadType: 'video' | 'audio'
  oneClickQuality: OneClickQualityPreset
  closeToTray: boolean
+  hideDockIcon: boolean
  autoUpdate: boolean
 }

@@ -174,5 +208,6 @@ export const defaultSettings: AppSettings = {
  oneClickDownloadType: 'video',
  oneClickQuality: 'auto',
  closeToTray: false,
+  hideDockIcon: false,
  autoUpdate: true
 }
Author	SHA1	Message	Date
Nexmoe	612800bef2	chore: release v0.3.4	2025-11-03 20:20:41 +08:00
Nexmoe	41b58a6f70	feat(format-selector): exclude HLS, sort and improve labels for formats (#13 )	2025-11-03 20:13:18 +08:00
Nexmoe	1a8e26a847	feat(update): add download action and guide users to download page when (#12 ) * feat(update): add download action and guide users to download page when * fix(updater): always initialize auto-updater in non-prod builds for testing	2025-11-02 19:35:49 +08:00
Nexmoe	0bcddddc37	chore: release v0.3.3	2025-11-02 17:59:39 +08:00
Nexmoe	99163865e2	fix(release): update release script to ensure main branch is checked out and up-to-date before running checks	2025-11-02 17:59:30 +08:00
Nexmoe	40113a2b53	feat(ffmpeg): add ffmpeg manager, bundle/download ffmpeg in CI and (#11 ) * feat(ffmpeg): add ffmpeg manager, bundle/download ffmpeg in CI and * fix(download-engine): let yt-dlp merge format to avoid codec conflicts and use actual format for filenames * chore(ci): replace monolithic job with platform-specific reusable jobs * chore(ci): run build matrix for windows, macos, linux in one to * feat(ci): remove platform matrix and platform gating to simplify build * chore(ci): pin github-translate-action to specific commit to ensure	2025-11-02 17:42:33 +08:00
Nexmoe	75c8b19f31	feat: add GitHub Actions workflow for translation automation Create a new workflow to automate translation tasks for issues, comments, discussions, and pull requests. This includes permissions for writing to issues and discussions, and utilizes the github-translate-action for title modifications.	2025-10-31 20:27:59 +08:00
Nexmoe	2a28b0db85	chore: release v0.3.2	2025-10-31 20:21:46 +08:00
Nexmoe	ca4b851ba4	Update mac build script to output separate mac packages (#9 ) * build: produce separate mac binaries * chore(build): add artifactName for mac builds to include arch in file name	2025-10-31 20:20:51 +08:00
Nexmoe	0742dac057	chore: release v0.3.1	2025-10-30 22:36:50 +08:00
Nexmoe	9d2e35c322	chore: update maintainer email in electron-builder configuration	2025-10-30 22:35:42 +08:00
Nexmoe	526bd994d8	feat(updates): add auto-update notifications and handlers (#8 ) Add update-related UI and IPC handling to App. Integrate i18n and sonner to show localized toast notifications update lifecycle events (available, download started, progress, downloaded, errors, and restart prompt). Use a ref to guard against concurrent download attempts and read auto-update preference from settings atom. Wire IPC event names and services, and ensure graceful error handling and user-triggered download/restart actions. This enables better user feedback for updates and supports both automatic and manual update flows.	2025-10-30 22:25:02 +08:00
Nexmoe	37c1f22aee	Improve Linux compatibility (#6 ) * Improve Linux compatibility * Run CI on Linux builds * Update release workflow for Linux builds	2025-10-30 21:36:00 +08:00
Nexmoe	10a97b1f4a	support of macOS x64 packing (#7 )	2025-10-30 21:31:42 +08:00
Nexmoe	11eaaf0f88	chore: release v0.3.0	2025-10-29 20:34:05 +08:00
Nexmoe	512b9d1175	feat: playlist (#2 ) * feat: implement playlist download feature with UI components, enhance download service for playlist handling, and update translations for playlist-related terms * refactor: replace console logs with log.info for auto-updater events and enhance zh-TW translations with new keys and updates	2025-10-29 20:32:27 +08:00
Nexmoe	a1307bdd0b	feat: add hide-dock setting and fix about text handling (#3 ) - Add "hideDockIcon" setting label and description to English locale, enabling users to remove VidBee from the macOS Dock and rely on the menu bar/tray icon. - Apply dock visibility changes when settings change, when settings are loaded, and after settings are reset by calling applyDockVisibility from the settings service. - Update About page to use about.description for share text and display content, replacing the removed tagline key usage. - Remove unused "tagline" entries from multiple locale files (en, fr, it, pt, ja, zh) to keep translations in sync with UI text changes. These changes add OS integration for hiding the dock icon and ensure UI copy is consistent and correctly internationalized.	2025-10-29 20:32:03 +08:00