fix: Refactors Chromecast casting player

Refactors the Chromecast casting player for better compatibility, UI improvements, and stability. - Adds auto-selection of stereo audio tracks for improved Chromecast compatibility - Refactors episode list to filter out virtual episodes and allow season selection - Improves UI layout and styling - Removes connection quality indicator - Fixes progress reporting to Jellyfin - Updates volume control to use CastSession for device volume
feat: Enhances casting player with API data
2026-02-05 12:12:23 +00:00 · 2026-02-04 21:03:49 +01:00 · 2026-02-01 16:18:33 +01:00 · 2026-02-01 16:18:33 +01:00 · 2026-02-01 16:18:32 +01:00 · 2026-02-01 16:18:32 +01:00
30 changed files with 4250 additions and 110 deletions
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -3,7 +3,7 @@
 ## Project Overview

 Streamyfin is a cross-platform Jellyfin video streaming client built with Expo (React Native).  
-It supports mobile (iOS/Android) and TV platforms, integrates with Jellyfin and Jellyseerr APIs,
+It supports mobile (iOS/Android) and TV platforms, integrates with Jellyfin and Seerr APIs,
 and provides seamless media streaming with offline capabilities and Chromecast support.

 ## Main Technologies
@@ -40,9 +40,30 @@ and provides seamless media streaming with offline capabilities and Chromecast s
 - `scripts/` – Automation scripts (Node.js, Bash)
 - `plugins/` – Expo/Metro plugins

-## Coding Standards
+## Code Quality Standards

+**CRITICAL: Code must be production-ready, reliable, and maintainable**
+
+### Type Safety
 - Use TypeScript for ALL files (no .js files)
+- **NEVER use `any` type** - use proper types, generics, or `unknown` with type guards
+- Use `@ts-expect-error` with detailed comments only when necessary (e.g., library limitations)
+- When facing type issues, create proper type definitions and helper functions instead of using `any`
+- Use type assertions (`as`) only as a last resort with clear documentation explaining why
+- For Expo Router navigation: prefer string URLs with `URLSearchParams` over object syntax to avoid type conflicts
+- Enable and respect strict TypeScript compiler options
+- Define explicit return types for functions
+- Use discriminated unions for complex state
+
+### Code Reliability
+- Implement comprehensive error handling with try-catch blocks
+- Validate all external inputs (API responses, user input, query params)
+- Handle edge cases explicitly (empty arrays, null, undefined)
+- Use optional chaining (`?.`) and nullish coalescing (`??`) appropriately
+- Add runtime checks for critical operations
+- Implement proper loading and error states in components
+
+### Best Practices
 - Use descriptive English names for variables, functions, and components
 - Prefer functional React components with hooks
 - Use Jotai atoms for global state management
@@ -50,8 +71,10 @@ and provides seamless media streaming with offline capabilities and Chromecast s
 - Follow BiomeJS formatting and linting rules
 - Use `const` over `let`, avoid `var` entirely
 - Implement proper error boundaries
- Use React.memo() for performance optimization
+- Use React.memo() for performance optimization when needed
 - Handle both mobile and TV navigation patterns
+- Write self-documenting code with clear intent
+- Add comments only when code complexity requires explanation

 ## API Integration

@@ -85,6 +108,18 @@ Exemples:
 - `fix(auth): handle expired JWT tokens`
 - `chore(deps): update Jellyfin SDK`

+## Internationalization (i18n)
+
+- **Primary workflow**: Always edit `translations/en.json` for new translation keys or updates
+- **Translation files** (ar.json, ca.json, cs.json, de.json, etc.):
+  - **NEVER add or remove keys** - Crowdin manages the key structure
+  - **Editing translation values is safe** - Bidirectional sync handles merges
+  - Prefer letting Crowdin translators update values, but direct edits work if needed
+- **Crowdin workflow**:
+  - New keys added to `en.json` sync to Crowdin automatically
+  - Approved translations sync back to language files via GitHub integration
+  - The source of truth is `en.json` for structure, Crowdin for translations
+
 ## Special Instructions

 - Prioritize cross-platform compatibility (mobile + TV)
--- a/app/(auth)/(tabs)/(home)/settings/segment-skip/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/segment-skip/page.tsx
@@ -0,0 +1,233 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useNavigation } from "expo-router";
+import { TFunction } from "i18next";
+import { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import { useSettings } from "@/utils/atoms/settings";
+
+/**
+ * Factory function to create skip options for a specific segment type
+ * Reduces code duplication across all 5 segment types
+ */
+const useSkipOptions = (
+  settingKey:
+    | "skipIntro"
+    | "skipOutro"
+    | "skipRecap"
+    | "skipCommercial"
+    | "skipPreview",
+  settings: ReturnType<typeof useSettings>["settings"] | null,
+  updateSettings: ReturnType<typeof useSettings>["updateSettings"],
+  t: TFunction<"translation", undefined>,
+) => {
+  return useMemo(
+    () => [
+      {
+        options: SEGMENT_SKIP_OPTIONS(t).map((option) => ({
+          type: "radio" as const,
+          label: option.label,
+          value: option.value,
+          selected: option.value === settings?.[settingKey],
+          onPress: () => updateSettings({ [settingKey]: option.value }),
+        })),
+      },
+    ],
+    [settings?.[settingKey], updateSettings, t, settingKey],
+  );
+};
+
+export default function SegmentSkipPage() {
+  const { settings, updateSettings, pluginSettings } = useSettings();
+  const { t } = useTranslation();
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    navigation.setOptions({
+      title: t("home.settings.other.segment_skip_settings"),
+    });
+  }, [navigation, t]);
+
+  const skipIntroOptions = useSkipOptions(
+    "skipIntro",
+    settings,
+    updateSettings,
+    t,
+  );
+  const skipOutroOptions = useSkipOptions(
+    "skipOutro",
+    settings,
+    updateSettings,
+    t,
+  );
+  const skipRecapOptions = useSkipOptions(
+    "skipRecap",
+    settings,
+    updateSettings,
+    t,
+  );
+  const skipCommercialOptions = useSkipOptions(
+    "skipCommercial",
+    settings,
+    updateSettings,
+    t,
+  );
+  const skipPreviewOptions = useSkipOptions(
+    "skipPreview",
+    settings,
+    updateSettings,
+    t,
+  );
+
+  if (!settings) return null;
+
+  return (
+    <DisabledSetting disabled={false} className='px-4'>
+      <ListGroup>
+        <ListItem
+          title={t("home.settings.other.skip_intro")}
+          subtitle={t("home.settings.other.skip_intro_description")}
+          disabled={pluginSettings?.skipIntro?.locked}
+        >
+          <PlatformDropdown
+            groups={skipIntroOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(`home.settings.other.segment_skip_${settings.skipIntro}`)}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.skip_intro")}
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.other.skip_outro")}
+          subtitle={t("home.settings.other.skip_outro_description")}
+          disabled={pluginSettings?.skipOutro?.locked}
+        >
+          <PlatformDropdown
+            groups={skipOutroOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(`home.settings.other.segment_skip_${settings.skipOutro}`)}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.skip_outro")}
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.other.skip_recap")}
+          subtitle={t("home.settings.other.skip_recap_description")}
+          disabled={pluginSettings?.skipRecap?.locked}
+        >
+          <PlatformDropdown
+            groups={skipRecapOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(`home.settings.other.segment_skip_${settings.skipRecap}`)}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.skip_recap")}
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.other.skip_commercial")}
+          subtitle={t("home.settings.other.skip_commercial_description")}
+          disabled={pluginSettings?.skipCommercial?.locked}
+        >
+          <PlatformDropdown
+            groups={skipCommercialOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(
+                    `home.settings.other.segment_skip_${settings.skipCommercial}`,
+                  )}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.skip_commercial")}
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.other.skip_preview")}
+          subtitle={t("home.settings.other.skip_preview_description")}
+          disabled={pluginSettings?.skipPreview?.locked}
+        >
+          <PlatformDropdown
+            groups={skipPreviewOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(
+                    `home.settings.other.segment_skip_${settings.skipPreview}`,
+                  )}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.skip_preview")}
+          />
+        </ListItem>
+      </ListGroup>
+    </DisabledSetting>
+  );
+}
+
+const SEGMENT_SKIP_OPTIONS = (
+  t: TFunction<"translation", undefined>,
+): Array<{
+  label: string;
+  value: "none" | "ask" | "auto";
+}> => [
+  {
+    label: t("home.settings.other.segment_skip_auto"),
+    value: "auto",
+  },
+  {
+    label: t("home.settings.other.segment_skip_ask"),
+    value: "ask",
+  },
+  {
+    label: t("home.settings.other.segment_skip_none"),
+    value: "none",
+  },
+];
--- a/app/(auth)/(tabs)/_layout.tsx
+++ b/app/(auth)/(tabs)/_layout.tsx
@@ -11,6 +11,7 @@ import { withLayoutContext } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
+import { CastingMiniPlayer } from "@/components/casting/CastingMiniPlayer";
 import { MiniPlayerBar } from "@/components/music/MiniPlayerBar";
 import { MusicPlaybackEngine } from "@/components/music/MusicPlaybackEngine";
 import { Colors } from "@/constants/Colors";
@@ -118,6 +119,7 @@ export default function TabLayout() {
          }}
        />
      </NativeTabs>
+      <CastingMiniPlayer />
      <MiniPlayerBar />
      <MusicPlaybackEngine />
    </View>
--- a/app/(auth)/casting-player.tsx
+++ b/app/(auth)/casting-player.tsx
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
  "lockfileVersion": 1,
-  "configVersion": 0,
  "workspaces": {
    "": {
      "name": "streamyfin",
@@ -95,7 +94,7 @@
        "zod": "4.1.13",
      },
      "devDependencies": {
-        "@babel/core": "7.29.0",
+        "@babel/core": "7.28.6",
        "@biomejs/biome": "2.3.11",
        "@react-native-community/cli": "20.1.1",
        "@react-native-tvos/config-tv": "0.1.4",
@@ -120,13 +119,13 @@

    "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],

-    "@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+    "@babel/code-frame": ["@babel/code-frame@7.28.6", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q=="],

    "@babel/compat-data": ["@babel/compat-data@7.28.6", "", {}, "sha512-2lfu57JtzctfIrcGMz992hyLlByuzgIk58+hhGCxjKZ3rWI82NnVLjXcaTqkI2NvlcvOskZaiZ5kjUALo3Lpxg=="],

-    "@babel/core": ["@babel/core@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-compilation-targets": "^7.28.6", "@babel/helper-module-transforms": "^7.28.6", "@babel/helpers": "^7.28.6", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/traverse": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA=="],
+    "@babel/core": ["@babel/core@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/generator": "^7.28.6", "@babel/helper-compilation-targets": "^7.28.6", "@babel/helper-module-transforms": "^7.28.6", "@babel/helpers": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/template": "^7.28.6", "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw=="],

-    "@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+    "@babel/generator": ["@babel/generator@7.28.6", "", { "dependencies": { "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw=="],

    "@babel/helper-annotate-as-pure": ["@babel/helper-annotate-as-pure@7.27.3", "", { "dependencies": { "@babel/types": "^7.27.3" } }, "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg=="],

@@ -168,7 +167,7 @@

    "@babel/highlight": ["@babel/highlight@7.25.9", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.25.9", "chalk": "^2.4.2", "js-tokens": "^4.0.0", "picocolors": "^1.0.0" } }, "sha512-llL88JShoCsth8fF8R4SJnIn+WLvR6ccFxu1H3FlMhDontdcmZWf2HgIZ7AIqV3Xcck1idlohrN4EUBQz6klbw=="],

-    "@babel/parser": ["@babel/parser@7.29.0", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww=="],
+    "@babel/parser": ["@babel/parser@7.28.6", "", { "dependencies": { "@babel/types": "^7.28.6" }, "bin": "./bin/babel-parser.js" }, "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ=="],

    "@babel/plugin-proposal-decorators": ["@babel/plugin-proposal-decorators@7.28.0", "", { "dependencies": { "@babel/helper-create-class-features-plugin": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1", "@babel/plugin-syntax-decorators": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-zOiZqvANjWDUaUS9xMxbMcK/Zccztbe/6ikvUXaG9nsPH3w6qh5UaPGAnirI/WhIbZ8m3OHU0ReyPrknG+ZKeg=="],

@@ -302,11 +301,11 @@

    "@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],

-    "@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+    "@babel/traverse": ["@babel/traverse@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/generator": "^7.28.6", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.6", "@babel/template": "^7.28.6", "@babel/types": "^7.28.6", "debug": "^4.3.1" } }, "sha512-fgWX62k02qtjqdSNTAGxmKYY/7FSL9WAS1o2Hu5+I5m9T0yxZzr4cnrfXQ/MX0rIifthCSs6FKTlzYbJcPtMNg=="],

    "@babel/traverse--for-generate-function-map": ["@babel/traverse@7.28.5", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.5", "@babel/template": "^7.27.2", "@babel/types": "^7.28.5", "debug": "^4.3.1" } }, "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ=="],

-    "@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+    "@babel/types": ["@babel/types@7.28.6", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg=="],

    "@biomejs/biome": ["@biomejs/biome@2.3.11", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.3.11", "@biomejs/cli-darwin-x64": "2.3.11", "@biomejs/cli-linux-arm64": "2.3.11", "@biomejs/cli-linux-arm64-musl": "2.3.11", "@biomejs/cli-linux-x64": "2.3.11", "@biomejs/cli-linux-x64-musl": "2.3.11", "@biomejs/cli-win32-arm64": "2.3.11", "@biomejs/cli-win32-x64": "2.3.11" }, "bin": { "biome": "bin/biome" } }, "sha512-/zt+6qazBWguPG6+eWmiELqO+9jRsMZ/DBU3lfuU2ngtIQYzymocHhKiZRyrbra4aCOoyTg/BmY+6WH5mv9xmQ=="],

@@ -2058,8 +2057,6 @@

    "@babel/helper-module-transforms/@babel/helper-module-imports": ["@babel/helper-module-imports@7.28.6", "", { "dependencies": { "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw=="],

-    "@babel/helper-module-transforms/@babel/traverse": ["@babel/traverse@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/generator": "^7.28.6", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.6", "@babel/template": "^7.28.6", "@babel/types": "^7.28.6", "debug": "^4.3.1" } }, "sha512-fgWX62k02qtjqdSNTAGxmKYY/7FSL9WAS1o2Hu5+I5m9T0yxZzr4cnrfXQ/MX0rIifthCSs6FKTlzYbJcPtMNg=="],
-
    "@babel/helper-optimise-call-expression/@babel/types": ["@babel/types@7.28.5", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA=="],

    "@babel/helper-remap-async-to-generator/@babel/traverse": ["@babel/traverse@7.28.5", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.5", "@babel/template": "^7.27.2", "@babel/types": "^7.28.5", "debug": "^4.3.1" } }, "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ=="],
@@ -2076,8 +2073,6 @@

    "@babel/helper-wrap-function/@babel/types": ["@babel/types@7.28.5", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA=="],

-    "@babel/helpers/@babel/types": ["@babel/types@7.28.6", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg=="],
-
    "@babel/highlight/chalk": ["chalk@2.4.2", "", { "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", "supports-color": "^5.3.0" } }, "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ=="],

    "@babel/plugin-transform-async-generator-functions/@babel/traverse": ["@babel/traverse@7.28.5", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.5", "@babel/template": "^7.27.2", "@babel/types": "^7.28.5", "debug": "^4.3.1" } }, "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ=="],
@@ -2108,12 +2103,6 @@

    "@babel/plugin-transform-runtime/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],

-    "@babel/template/@babel/code-frame": ["@babel/code-frame@7.28.6", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q=="],
-
-    "@babel/template/@babel/parser": ["@babel/parser@7.28.6", "", { "dependencies": { "@babel/types": "^7.28.6" }, "bin": "./bin/babel-parser.js" }, "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ=="],
-
-    "@babel/template/@babel/types": ["@babel/types@7.28.6", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg=="],
-
    "@babel/traverse--for-generate-function-map/@babel/code-frame": ["@babel/code-frame@7.27.1", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg=="],

    "@babel/traverse--for-generate-function-map/@babel/generator": ["@babel/generator@7.28.5", "", { "dependencies": { "@babel/parser": "^7.28.5", "@babel/types": "^7.28.5", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ=="],
@@ -2518,16 +2507,6 @@

    "@babel/helper-member-expression-to-functions/@babel/traverse/@babel/template": ["@babel/template@7.27.2", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/parser": "^7.27.2", "@babel/types": "^7.27.1" } }, "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw=="],

-    "@babel/helper-module-transforms/@babel/helper-module-imports/@babel/types": ["@babel/types@7.28.6", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg=="],
-
-    "@babel/helper-module-transforms/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.28.6", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q=="],
-
-    "@babel/helper-module-transforms/@babel/traverse/@babel/generator": ["@babel/generator@7.28.6", "", { "dependencies": { "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw=="],
-
-    "@babel/helper-module-transforms/@babel/traverse/@babel/parser": ["@babel/parser@7.28.6", "", { "dependencies": { "@babel/types": "^7.28.6" }, "bin": "./bin/babel-parser.js" }, "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ=="],
-
-    "@babel/helper-module-transforms/@babel/traverse/@babel/types": ["@babel/types@7.28.6", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg=="],
-
    "@babel/helper-remap-async-to-generator/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.27.1", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg=="],

    "@babel/helper-remap-async-to-generator/@babel/traverse/@babel/generator": ["@babel/generator@7.28.5", "", { "dependencies": { "@babel/parser": "^7.28.5", "@babel/types": "^7.28.5", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ=="],
--- a/components/Chromecast.tsx
+++ b/components/Chromecast.tsx
@@ -1,5 +1,9 @@
 import { Feather } from "@expo/vector-icons";
-import { useCallback, useEffect } from "react";
+import type { PlaybackProgressInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
+import { router } from "expo-router";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useRef } from "react";
 import { Platform } from "react-native";
 import { Pressable } from "react-native-gesture-handler";
 import GoogleCast, {
@@ -10,6 +14,7 @@ import GoogleCast, {
  useMediaStatus,
  useRemoteMediaClient,
 } from "react-native-google-cast";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { RoundButton } from "./RoundButton";

 export function Chromecast({
@@ -18,23 +23,123 @@ export function Chromecast({
  background = "transparent",
  ...props
 }) {
-  const client = useRemoteMediaClient();
-  const castDevice = useCastDevice();
+  const _client = useRemoteMediaClient();
+  const _castDevice = useCastDevice();
  const devices = useDevices();
-  const sessionManager = GoogleCast.getSessionManager();
+  const _sessionManager = GoogleCast.getSessionManager();
  const discoveryManager = GoogleCast.getDiscoveryManager();
  const mediaStatus = useMediaStatus();
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);

+  const lastReportedProgressRef = useRef(0);
+  const discoveryAttempts = useRef(0);
+  const maxDiscoveryAttempts = 3;
+  const hasLoggedDevices = useRef(false);
+
+  // Enhanced discovery with retry mechanism - runs once on mount
  useEffect(() => {
-    (async () => {
+    let isSubscribed = true;
+    let retryTimeout: NodeJS.Timeout;
+
+    const startDiscoveryWithRetry = async () => {
      if (!discoveryManager) {
-        console.warn("DiscoveryManager is not initialized");
        return;
      }

-      await discoveryManager.startDiscovery();
-    })();
-  }, [client, devices, castDevice, sessionManager, discoveryManager]);
+      try {
+        // Stop any existing discovery first
+        try {
+          await discoveryManager.stopDiscovery();
+        } catch (_e) {
+          // Ignore errors when stopping
+        }
+
+        // Start fresh discovery
+        await discoveryManager.startDiscovery();
+        discoveryAttempts.current = 0; // Reset on success
+      } catch (error) {
+        console.error("[Chromecast Discovery] Failed:", error);
+
+        // Retry on error
+        if (discoveryAttempts.current < maxDiscoveryAttempts && isSubscribed) {
+          discoveryAttempts.current++;
+          retryTimeout = setTimeout(() => {
+            if (isSubscribed) {
+              startDiscoveryWithRetry();
+            }
+          }, 2000);
+        }
+      }
+    };
+
+    startDiscoveryWithRetry();
+
+    return () => {
+      isSubscribed = false;
+      if (retryTimeout) {
+        clearTimeout(retryTimeout);
+      }
+    };
+  }, [discoveryManager]); // Only re-run if discoveryManager changes
+
+  // Log device changes for debugging - only once per session
+  useEffect(() => {
+    if (devices.length > 0 && !hasLoggedDevices.current) {
+      console.log(
+        "[Chromecast] Found device(s):",
+        devices.map((d) => d.friendlyName || d.deviceId).join(", "),
+      );
+      hasLoggedDevices.current = true;
+    }
+  }, [devices]);
+
+  // Report video progress to Jellyfin server
+  useEffect(() => {
+    if (
+      !api ||
+      !user?.Id ||
+      !mediaStatus ||
+      !mediaStatus.mediaInfo?.contentId
+    ) {
+      return;
+    }
+
+    const streamPosition = mediaStatus.streamPosition || 0;
+
+    // Report every 10 seconds
+    if (Math.abs(streamPosition - lastReportedProgressRef.current) < 10) {
+      return;
+    }
+
+    const contentId = mediaStatus.mediaInfo.contentId;
+    const positionTicks = Math.floor(streamPosition * 10000000);
+    const isPaused = mediaStatus.playerState === "paused";
+    const streamUrl = mediaStatus.mediaInfo.contentUrl || "";
+    const isTranscoding = streamUrl.includes("m3u8");
+
+    const progressInfo: PlaybackProgressInfo = {
+      ItemId: contentId,
+      PositionTicks: positionTicks,
+      IsPaused: isPaused,
+      PlayMethod: isTranscoding ? "Transcode" : "DirectStream",
+      PlaySessionId: contentId,
+    };
+
+    getPlaystateApi(api)
+      .reportPlaybackProgress({ playbackProgressInfo: progressInfo })
+      .then(() => {
+        lastReportedProgressRef.current = streamPosition;
+      })
+      .catch((error) => {
+        console.error("Failed to report Chromecast progress:", error);
+      });
+  }, [
+    api,
+    user?.Id,
+    mediaStatus?.streamPosition,
+    mediaStatus?.mediaInfo?.contentId,
+  ]);

  // Android requires the cast button to be present for startDiscovery to work
  const AndroidCastButton = useCallback(
@@ -48,8 +153,11 @@ export function Chromecast({
      <Pressable
        className='mr-4'
        onPress={() => {
-          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
-          else CastContext.showCastDialog();
+          if (mediaStatus?.currentItemId) {
+            router.push("/casting-player");
+          } else {
+            CastContext.showCastDialog();
+          }
        }}
        {...props}
      >
@@ -66,8 +174,11 @@ export function Chromecast({
        className='mr-2'
        background={false}
        onPress={() => {
-          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
-          else CastContext.showCastDialog();
+          if (mediaStatus?.currentItemId) {
+            router.replace("/casting-player" as any);
+          } else {
+            CastContext.showCastDialog();
+          }
        }}
        {...props}
      >
@@ -80,8 +191,11 @@ export function Chromecast({
    <RoundButton
      size='large'
      onPress={() => {
-        if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
-        else CastContext.showCastDialog();
+        if (mediaStatus?.currentItemId) {
+          router.push("/casting-player");
+        } else {
+          CastContext.showCastDialog();
+        }
      }}
      {...props}
    >
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -176,6 +176,15 @@ export const PlayButton: React.FC<Props> = ({
                  });

                  console.log("URL: ", data?.url, enableH265);
+                  console.log("[PlayButton] Item before casting:", {
+                    Type: item.Type,
+                    Id: item.Id,
+                    Name: item.Name,
+                    ParentIndexNumber: item.ParentIndexNumber,
+                    IndexNumber: item.IndexNumber,
+                    SeasonId: item.SeasonId,
+                    SeriesId: item.SeriesId,
+                  });

                  if (!data?.url) {
                    console.warn("No URL returned from getStreamUrl", data);
@@ -195,6 +204,11 @@ export const PlayButton: React.FC<Props> = ({
                    ? item.RunTimeTicks / 10000000
                    : undefined;

+                  console.log("[PlayButton] Loading media with customData:", {
+                    hasCustomData: !!item,
+                    customDataType: item.Type,
+                  });
+
                  client
                    .loadMedia({
                      mediaInfo: {
@@ -203,6 +217,7 @@ export const PlayButton: React.FC<Props> = ({
                        contentType: "video/mp4",
                        streamType: MediaStreamType.BUFFERED,
                        streamDuration: streamDurationSeconds,
+                        customData: item,
                        metadata:
                          item.Type === "Episode"
                            ? {
@@ -261,7 +276,7 @@ export const PlayButton: React.FC<Props> = ({
                      if (isOpeningCurrentlyPlayingMedia) {
                        return;
                      }
-                      CastContext.showExpandedControls();
+                      router.push("/casting-player");
                    });
                } catch (e) {
                  console.log(e);
--- a/components/casting/CastingMiniPlayer.tsx
+++ b/components/casting/CastingMiniPlayer.tsx
@@ -0,0 +1,230 @@
+/**
+ * Unified Casting Mini Player
+ * Works with all supported casting protocols
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { Image } from "expo-image";
+import { router } from "expo-router";
+import { useAtomValue } from "jotai";
+import React, { useEffect, useMemo, useState } from "react";
+import { Pressable, View } from "react-native";
+import {
+  MediaPlayerState,
+  useCastDevice,
+  useMediaStatus,
+  useRemoteMediaClient,
+} from "react-native-google-cast";
+import Animated, { SlideInDown, SlideOutDown } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { formatTime, getPosterUrl } from "@/utils/casting/helpers";
+import { CASTING_CONSTANTS } from "@/utils/casting/types";
+
+export const CastingMiniPlayer: React.FC = () => {
+  const api = useAtomValue(apiAtom);
+  const insets = useSafeAreaInsets();
+  const castDevice = useCastDevice();
+  const mediaStatus = useMediaStatus();
+  const remoteMediaClient = useRemoteMediaClient();
+
+  const currentItem = useMemo(() => {
+    return mediaStatus?.mediaInfo?.customData as BaseItemDto | undefined;
+  }, [mediaStatus?.mediaInfo?.customData]);
+
+  // Live progress state that updates every second when playing
+  const [liveProgress, setLiveProgress] = useState(
+    mediaStatus?.streamPosition || 0,
+  );
+
+  // Sync live progress with mediaStatus and poll every second when playing
+  useEffect(() => {
+    if (mediaStatus?.streamPosition) {
+      setLiveProgress(mediaStatus.streamPosition);
+    }
+
+    // Update every second when playing
+    const interval = setInterval(() => {
+      if (
+        mediaStatus?.playerState === MediaPlayerState.PLAYING &&
+        mediaStatus?.streamPosition !== undefined
+      ) {
+        setLiveProgress((prev) => prev + 1);
+      } else if (mediaStatus?.streamPosition !== undefined) {
+        // Sync with actual position when paused/buffering
+        setLiveProgress(mediaStatus.streamPosition);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [mediaStatus?.playerState, mediaStatus?.streamPosition]);
+
+  const progress = liveProgress * 1000; // Convert to ms
+  const duration = (mediaStatus?.mediaInfo?.streamDuration || 0) * 1000;
+  const isPlaying = mediaStatus?.playerState === MediaPlayerState.PLAYING;
+
+  // For episodes, use season poster; for other content, use item poster
+  const posterUrl = useMemo(() => {
+    if (!api?.basePath || !currentItem) return null;
+
+    if (
+      currentItem.Type === "Episode" &&
+      currentItem.SeriesId &&
+      currentItem.ParentIndexNumber
+    ) {
+      // Build season poster URL using SeriesId and season number
+      return `${api.basePath}/Items/${currentItem.SeriesId}/Images/Primary?fillHeight=120&fillWidth=80&quality=96&tag=${currentItem.SeasonId}`;
+    }
+
+    // For non-episodes, use item's own poster
+    return getPosterUrl(
+      api.basePath,
+      currentItem.Id,
+      currentItem.ImageTags?.Primary,
+      80,
+      120,
+    );
+  }, [api?.basePath, currentItem]);
+
+  if (!castDevice || !currentItem || !mediaStatus) {
+    return null;
+  }
+
+  const progressPercent = duration > 0 ? (progress / duration) * 100 : 0;
+  const protocolColor = "#a855f7"; // Streamyfin purple
+  const TAB_BAR_HEIGHT = 80; // Standard tab bar height
+
+  const handlePress = () => {
+    router.push("/casting-player");
+  };
+
+  const handleTogglePlayPause = (e: any) => {
+    e.stopPropagation();
+    if (isPlaying) {
+      remoteMediaClient?.pause();
+    } else {
+      remoteMediaClient?.play();
+    }
+  };
+
+  return (
+    <Animated.View
+      entering={SlideInDown.duration(CASTING_CONSTANTS.ANIMATION_DURATION)}
+      exiting={SlideOutDown.duration(CASTING_CONSTANTS.ANIMATION_DURATION)}
+      style={{
+        position: "absolute",
+        bottom: TAB_BAR_HEIGHT + insets.bottom,
+        left: 0,
+        right: 0,
+        backgroundColor: "#1a1a1a",
+        borderTopWidth: 1,
+        borderTopColor: "#333",
+        zIndex: 100,
+      }}
+    >
+      <Pressable onPress={handlePress}>
+        {/* Progress bar */}
+        <View
+          style={{
+            height: 3,
+            backgroundColor: "#333",
+          }}
+        >
+          <View
+            style={{
+              height: "100%",
+              width: `${progressPercent}%`,
+              backgroundColor: protocolColor,
+            }}
+          />
+        </View>
+
+        {/* Content */}
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            padding: 12,
+            gap: 12,
+          }}
+        >
+          {/* Poster */}
+          {posterUrl && (
+            <Image
+              source={{ uri: posterUrl }}
+              style={{
+                width: 40,
+                height: 60,
+                borderRadius: 4,
+              }}
+              contentFit='cover'
+            />
+          )}
+
+          {/* Info */}
+          <View style={{ flex: 1 }}>
+            <Text
+              style={{
+                color: "white",
+                fontSize: 14,
+                fontWeight: "600",
+              }}
+              numberOfLines={1}
+            >
+              {currentItem.Name}
+            </Text>
+            {currentItem.SeriesName && (
+              <Text
+                style={{
+                  color: "#999",
+                  fontSize: 12,
+                }}
+                numberOfLines={1}
+              >
+                {currentItem.SeriesName}
+              </Text>
+            )}
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 8,
+                marginTop: 2,
+              }}
+            >
+              <Ionicons name='tv' size={12} color={protocolColor} />
+              <Text
+                style={{
+                  color: protocolColor,
+                  fontSize: 11,
+                }}
+                numberOfLines={1}
+              >
+                {castDevice.friendlyName || "Chromecast"}
+              </Text>
+              <Text
+                style={{
+                  color: "#666",
+                  fontSize: 11,
+                }}
+              >
+                {formatTime(progress)} / {formatTime(duration)}
+              </Text>
+            </View>
+          </View>
+
+          {/* Play/Pause button */}
+          <Pressable onPress={handleTogglePlayPause} style={{ padding: 8 }}>
+            <Ionicons
+              name={isPlaying ? "pause" : "play"}
+              size={28}
+              color='white'
+            />
+          </Pressable>
+        </View>
+      </Pressable>
+    </Animated.View>
+  );
+};
--- a/components/chromecast/ChromecastDeviceSheet.tsx
+++ b/components/chromecast/ChromecastDeviceSheet.tsx
@@ -0,0 +1,238 @@
+/**
+ * Chromecast Device Info Sheet
+ * Shows device details, volume control, and disconnect option
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import React, { useEffect, useState } from "react";
+import { Modal, Pressable, View } from "react-native";
+import { Slider } from "react-native-awesome-slider";
+import type { Device } from "react-native-google-cast";
+import { useCastSession, useRemoteMediaClient } from "react-native-google-cast";
+import { useSharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+
+interface ChromecastDeviceSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  device: Device | null;
+  onDisconnect: () => Promise<void>;
+  volume?: number;
+  onVolumeChange?: (volume: number) => Promise<void>;
+}
+
+export const ChromecastDeviceSheet: React.FC<ChromecastDeviceSheetProps> = ({
+  visible,
+  onClose,
+  device,
+  onDisconnect,
+  volume = 0.5,
+  onVolumeChange,
+}) => {
+  const insets = useSafeAreaInsets();
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+  const volumeValue = useSharedValue(volume * 100);
+  const minimumValue = useSharedValue(0);
+  const maximumValue = useSharedValue(100);
+  const castSession = useCastSession();
+  const remoteMediaClient = useRemoteMediaClient();
+
+  // Sync volume slider with prop changes (updates from physical buttons)
+  useEffect(() => {
+    volumeValue.value = volume * 100;
+  }, [volume, volumeValue]);
+
+  // Poll for volume updates when sheet is visible to catch physical button changes
+  useEffect(() => {
+    if (!visible || !remoteMediaClient) return;
+
+    // Request status update to get latest volume from device
+    const interval = setInterval(() => {
+      remoteMediaClient.requestStatus().catch(() => {
+        // Ignore errors - device might be disconnected
+      });
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [visible, remoteMediaClient]);
+
+  const handleDisconnect = async () => {
+    setIsDisconnecting(true);
+    try {
+      await onDisconnect();
+      onClose();
+    } catch (error) {
+      console.error("Failed to disconnect:", error);
+    } finally {
+      setIsDisconnecting(false);
+    }
+  };
+
+  const handleVolumeComplete = async (value: number) => {
+    const newVolume = value / 100;
+    try {
+      // Use CastSession.setVolume for DEVICE volume control
+      // This works even when no media is playing, unlike setStreamVolume
+      if (castSession) {
+        castSession.setVolume(newVolume);
+        console.log("[Volume] Set device volume via CastSession:", newVolume);
+      } else if (onVolumeChange) {
+        // Fallback to prop method if session not available
+        await onVolumeChange(newVolume);
+      }
+    } catch (error) {
+      console.error("[Volume] Error setting volume:", error);
+    }
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType='slide'
+      onRequestClose={onClose}
+    >
+      <Pressable
+        style={{
+          flex: 1,
+          backgroundColor: "rgba(0, 0, 0, 0.85)",
+          justifyContent: "flex-end",
+        }}
+        onPress={onClose}
+      >
+        <Pressable
+          style={{
+            backgroundColor: "#1a1a1a",
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            paddingBottom: insets.bottom + 16,
+          }}
+          onPress={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: 16,
+              borderBottomWidth: 1,
+              borderBottomColor: "#333",
+            }}
+          >
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+            >
+              <Ionicons name='tv' size={24} color='#a855f7' />
+              <Text style={{ color: "white", fontSize: 18, fontWeight: "600" }}>
+                Chromecast
+              </Text>
+            </View>
+            <Pressable onPress={onClose} style={{ padding: 8 }}>
+              <Ionicons name='close' size={24} color='white' />
+            </Pressable>
+          </View>
+
+          {/* Device info */}
+          <View style={{ padding: 16 }}>
+            <View style={{ marginBottom: 20 }}>
+              <Text style={{ color: "#999", fontSize: 12, marginBottom: 4 }}>
+                Device Name
+              </Text>
+              <Text style={{ color: "white", fontSize: 16, fontWeight: "500" }}>
+                {device?.friendlyName || device?.deviceId || "Unknown Device"}
+              </Text>
+            </View>
+            {device?.deviceId && (
+              <View style={{ marginBottom: 20 }}>
+                <Text style={{ color: "#999", fontSize: 12, marginBottom: 4 }}>
+                  Device ID
+                </Text>
+                <Text
+                  style={{ color: "white", fontSize: 14 }}
+                  numberOfLines={1}
+                >
+                  {device?.deviceId}
+                </Text>
+              </View>
+            )}
+            {/* Volume control */}
+            <View style={{ marginBottom: 24 }}>
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  marginBottom: 12,
+                }}
+              >
+                <Text style={{ color: "#999", fontSize: 12 }}>Volume</Text>
+                <Text style={{ color: "white", fontSize: 14 }}>
+                  {Math.round((volume || 0) * 100)}%
+                </Text>
+              </View>
+              <View
+                style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+              >
+                <Ionicons name='volume-low' size={20} color='#999' />
+                <View style={{ flex: 1 }}>
+                  <Slider
+                    style={{ width: "100%", height: 40 }}
+                    progress={volumeValue}
+                    minimumValue={minimumValue}
+                    maximumValue={maximumValue}
+                    theme={{
+                      disableMinTrackTintColor: "#333",
+                      maximumTrackTintColor: "#333",
+                      minimumTrackTintColor: "#a855f7",
+                      bubbleBackgroundColor: "#a855f7",
+                    }}
+                    onSlidingStart={() => {
+                      console.log(
+                        "[Volume] Sliding started",
+                        volumeValue.value,
+                      );
+                    }}
+                    onValueChange={(value) => {
+                      volumeValue.value = value;
+                      console.log("[Volume] Value changed", value);
+                    }}
+                    onSlidingComplete={handleVolumeComplete}
+                    panHitSlop={{ top: 20, bottom: 20, left: 0, right: 0 }}
+                  />
+                </View>
+                <Ionicons name='volume-high' size={20} color='#999' />
+              </View>
+            </View>
+            {/* Disconnect button */}
+            <Pressable
+              onPress={handleDisconnect}
+              disabled={isDisconnecting}
+              style={{
+                backgroundColor: "#a855f7",
+                padding: 16,
+                borderRadius: 8,
+                flexDirection: "row",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: 8,
+                opacity: isDisconnecting ? 0.5 : 1,
+              }}
+            >
+              <Ionicons
+                name='power'
+                size={20}
+                color='white'
+                style={{ marginTop: 2 }}
+              />
+              <Text style={{ color: "white", fontSize: 16, fontWeight: "600" }}>
+                {isDisconnecting ? "Disconnecting..." : "Stop Casting"}
+              </Text>
+            </Pressable>
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
--- a/components/chromecast/ChromecastEpisodeList.tsx
+++ b/components/chromecast/ChromecastEpisodeList.tsx
@@ -0,0 +1,307 @@
+/**
+ * Episode List for Chromecast Player
+ * Displays list of episodes for TV shows with thumbnails
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import type { Api } from "@jellyfin/sdk";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { Image } from "expo-image";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { FlatList, Modal, Pressable, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { truncateTitle } from "@/utils/casting/helpers";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+
+interface ChromecastEpisodeListProps {
+  visible: boolean;
+  onClose: () => void;
+  currentItem: BaseItemDto | null;
+  episodes: BaseItemDto[];
+  onSelectEpisode: (episode: BaseItemDto) => void;
+  api: Api | null;
+}
+
+export const ChromecastEpisodeList: React.FC<ChromecastEpisodeListProps> = ({
+  visible,
+  onClose,
+  currentItem,
+  episodes,
+  onSelectEpisode,
+  api,
+}) => {
+  const insets = useSafeAreaInsets();
+  const flatListRef = useRef<FlatList>(null);
+  const [selectedSeason, setSelectedSeason] = useState<number | null>(null);
+
+  // Get unique seasons from episodes
+  const seasons = useMemo(() => {
+    const seasonSet = new Set<number>();
+    for (const ep of episodes) {
+      if (ep.ParentIndexNumber !== undefined && ep.ParentIndexNumber !== null) {
+        seasonSet.add(ep.ParentIndexNumber);
+      }
+    }
+    return Array.from(seasonSet).sort((a, b) => a - b);
+  }, [episodes]);
+
+  // Filter episodes by selected season and exclude virtual episodes
+  const filteredEpisodes = useMemo(() => {
+    let eps = episodes;
+
+    // Filter by season if selected
+    if (selectedSeason !== null) {
+      eps = eps.filter((ep) => ep.ParentIndexNumber === selectedSeason);
+    }
+
+    // Filter out virtual episodes (episodes without actual video files)
+    // LocationType === "Virtual" means the episode doesn't have a media file
+    eps = eps.filter((ep) => ep.LocationType !== "Virtual");
+
+    return eps;
+  }, [episodes, selectedSeason]);
+
+  // Set initial season to current episode's season
+  useEffect(() => {
+    if (currentItem?.ParentIndexNumber !== undefined) {
+      setSelectedSeason(currentItem.ParentIndexNumber);
+    }
+  }, [currentItem]);
+
+  useEffect(() => {
+    if (visible && currentItem && filteredEpisodes.length > 0) {
+      const currentIndex = filteredEpisodes.findIndex(
+        (ep) => ep.Id === currentItem.Id,
+      );
+      if (currentIndex !== -1 && flatListRef.current) {
+        // Delay to ensure FlatList is rendered
+        setTimeout(() => {
+          flatListRef.current?.scrollToIndex({
+            index: currentIndex,
+            animated: true,
+            viewPosition: 0.5, // Center the item
+          });
+        }, 300);
+      }
+    }
+  }, [visible, currentItem, filteredEpisodes]);
+
+  const renderEpisode = ({ item }: { item: BaseItemDto }) => {
+    const isCurrentEpisode = item.Id === currentItem?.Id;
+
+    return (
+      <Pressable
+        onPress={() => {
+          onSelectEpisode(item);
+          onClose();
+        }}
+        style={{
+          flexDirection: "row",
+          padding: 12,
+          backgroundColor: isCurrentEpisode ? "#a855f7" : "transparent",
+          borderRadius: 8,
+          marginBottom: 8,
+        }}
+      >
+        {/* Thumbnail */}
+        <View
+          style={{
+            width: 120,
+            height: 68,
+            borderRadius: 4,
+            overflow: "hidden",
+            backgroundColor: "#1a1a1a",
+          }}
+        >
+          {api && item.Id && (
+            <Image
+              source={{
+                uri: getPrimaryImageUrl({ api, item }) || undefined,
+              }}
+              style={{ width: "100%", height: "100%" }}
+              contentFit='cover'
+            />
+          )}
+          {(!api || !item.Id) && (
+            <View
+              style={{
+                flex: 1,
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Ionicons name='film-outline' size={32} color='#333' />
+            </View>
+          )}
+        </View>
+
+        {/* Episode info */}
+        <View style={{ flex: 1, marginLeft: 12, justifyContent: "center" }}>
+          <Text
+            style={{
+              color: "white",
+              fontSize: 14,
+              fontWeight: "600",
+              marginBottom: 4,
+            }}
+            numberOfLines={1}
+          >
+            {item.IndexNumber}. {truncateTitle(item.Name || "Unknown", 30)}
+          </Text>
+          {item.Overview && (
+            <Text
+              style={{
+                color: "#999",
+                fontSize: 12,
+                marginBottom: 4,
+              }}
+              numberOfLines={2}
+            >
+              {item.Overview}
+            </Text>
+          )}
+          <View style={{ flexDirection: "row", gap: 8, alignItems: "center" }}>
+            {item.ParentIndexNumber !== undefined &&
+              item.IndexNumber !== undefined && (
+                <Text
+                  style={{ color: "#a855f7", fontSize: 11, fontWeight: "600" }}
+                >
+                  S{String(item.ParentIndexNumber).padStart(2, "0")}:E
+                  {String(item.IndexNumber).padStart(2, "0")}
+                </Text>
+              )}
+            {item.ProductionYear && (
+              <Text style={{ color: "#666", fontSize: 11 }}>
+                {item.ProductionYear}
+              </Text>
+            )}
+            {item.RunTimeTicks && (
+              <Text style={{ color: "#666", fontSize: 11 }}>
+                {Math.round(item.RunTimeTicks / 600000000)} min
+              </Text>
+            )}
+          </View>
+        </View>
+
+        {isCurrentEpisode && (
+          <View
+            style={{
+              justifyContent: "center",
+              marginLeft: 8,
+            }}
+          >
+            <Ionicons name='play-circle' size={24} color='white' />
+          </View>
+        )}
+      </Pressable>
+    );
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType='slide'
+      onRequestClose={onClose}
+    >
+      <Pressable
+        style={{
+          flex: 1,
+          backgroundColor: "rgba(0, 0, 0, 0.85)",
+        }}
+        onPress={onClose}
+      >
+        <Pressable
+          style={{
+            flex: 1,
+            paddingTop: insets.top,
+          }}
+          onPress={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <View
+            style={{
+              paddingHorizontal: 16,
+              paddingVertical: 12,
+              borderBottomWidth: 1,
+              borderBottomColor: "#333",
+            }}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: seasons.length > 1 ? 12 : 0,
+              }}
+            >
+              <Text style={{ color: "white", fontSize: 18, fontWeight: "600" }}>
+                Episodes
+              </Text>
+              <Pressable onPress={onClose} style={{ padding: 8 }}>
+                <Ionicons name='close' size={24} color='white' />
+              </Pressable>
+            </View>
+
+            {/* Season selector */}
+            {seasons.length > 1 && (
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={{ gap: 8 }}
+              >
+                {seasons.map((season) => (
+                  <Pressable
+                    key={season}
+                    onPress={() => setSelectedSeason(season)}
+                    style={{
+                      paddingHorizontal: 16,
+                      paddingVertical: 8,
+                      borderRadius: 20,
+                      backgroundColor:
+                        selectedSeason === season ? "#a855f7" : "#1a1a1a",
+                    }}
+                  >
+                    <Text
+                      style={{
+                        color: "white",
+                        fontSize: 14,
+                        fontWeight: selectedSeason === season ? "600" : "400",
+                      }}
+                    >
+                      Season {season}
+                    </Text>
+                  </Pressable>
+                ))}
+              </ScrollView>
+            )}
+          </View>
+
+          {/* Episode list */}
+          <FlatList
+            ref={flatListRef}
+            data={filteredEpisodes}
+            renderItem={renderEpisode}
+            keyExtractor={(item) => item.Id || ""}
+            contentContainerStyle={{
+              padding: 16,
+              paddingBottom: insets.bottom + 16,
+            }}
+            showsVerticalScrollIndicator={false}
+            onScrollToIndexFailed={(info) => {
+              // Fallback if scroll fails
+              setTimeout(() => {
+                flatListRef.current?.scrollToIndex({
+                  index: info.index,
+                  animated: true,
+                  viewPosition: 0.5,
+                });
+              }, 500);
+            }}
+          />
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
--- a/components/chromecast/ChromecastSettingsMenu.tsx
+++ b/components/chromecast/ChromecastSettingsMenu.tsx
@@ -0,0 +1,320 @@
+/**
+ * Chromecast Settings Menu
+ * Allows users to configure audio, subtitles, quality, and playback speed
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import React, { useState } from "react";
+import { Modal, Pressable, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import type {
+  AudioTrack,
+  MediaSource,
+  SubtitleTrack,
+} from "@/utils/casting/types";
+
+interface ChromecastSettingsMenuProps {
+  visible: boolean;
+  onClose: () => void;
+  item: BaseItemDto;
+  mediaSources: MediaSource[];
+  selectedMediaSource: MediaSource | null;
+  onMediaSourceChange: (source: MediaSource) => void;
+  audioTracks: AudioTrack[];
+  selectedAudioTrack: AudioTrack | null;
+  onAudioTrackChange: (track: AudioTrack) => void;
+  subtitleTracks: SubtitleTrack[];
+  selectedSubtitleTrack: SubtitleTrack | null;
+  onSubtitleTrackChange: (track: SubtitleTrack | null) => void;
+  playbackSpeed: number;
+  onPlaybackSpeedChange: (speed: number) => void;
+}
+
+const PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+
+export const ChromecastSettingsMenu: React.FC<ChromecastSettingsMenuProps> = ({
+  visible,
+  onClose,
+  item: _item, // Reserved for future use (technical info display)
+  mediaSources,
+  selectedMediaSource,
+  onMediaSourceChange,
+  audioTracks,
+  selectedAudioTrack,
+  onAudioTrackChange,
+  subtitleTracks,
+  selectedSubtitleTrack,
+  onSubtitleTrackChange,
+  playbackSpeed,
+  onPlaybackSpeedChange,
+}) => {
+  const insets = useSafeAreaInsets();
+  const [expandedSection, setExpandedSection] = useState<string | null>(null);
+
+  const toggleSection = (section: string) => {
+    setExpandedSection(expandedSection === section ? null : section);
+  };
+
+  const renderSectionHeader = (
+    title: string,
+    icon: keyof typeof Ionicons.glyphMap,
+    sectionKey: string,
+  ) => (
+    <Pressable
+      onPress={() => toggleSection(sectionKey)}
+      style={{
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: "#333",
+      }}
+    >
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+        <Ionicons name={icon} size={20} color='white' />
+        <Text style={{ color: "white", fontSize: 16, fontWeight: "500" }}>
+          {title}
+        </Text>
+      </View>
+      <Ionicons
+        name={expandedSection === sectionKey ? "chevron-up" : "chevron-down"}
+        size={20}
+        color='#999'
+      />
+    </Pressable>
+  );
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType='slide'
+      onRequestClose={onClose}
+    >
+      <Pressable
+        style={{
+          flex: 1,
+          backgroundColor: "rgba(0, 0, 0, 0.85)",
+          justifyContent: "flex-end",
+        }}
+        onPress={onClose}
+      >
+        <Pressable
+          style={{
+            backgroundColor: "#1a1a1a",
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            maxHeight: "80%",
+            paddingBottom: insets.bottom,
+          }}
+          onPress={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: 16,
+              borderBottomWidth: 1,
+              borderBottomColor: "#333",
+            }}
+          >
+            <Text style={{ color: "white", fontSize: 18, fontWeight: "600" }}>
+              Playback Settings
+            </Text>
+            <Pressable onPress={onClose} style={{ padding: 8 }}>
+              <Ionicons name='close' size={24} color='white' />
+            </Pressable>
+          </View>
+
+          <ScrollView>
+            {/* Quality/Media Source */}
+            {renderSectionHeader("Quality", "film-outline", "quality")}
+            {expandedSection === "quality" && (
+              <View style={{ paddingVertical: 8 }}>
+                {mediaSources.map((source) => (
+                  <Pressable
+                    key={source.id}
+                    onPress={() => {
+                      onMediaSourceChange(source);
+                      setExpandedSection(null);
+                    }}
+                    style={{
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      padding: 16,
+                      backgroundColor:
+                        selectedMediaSource?.id === source.id
+                          ? "#2a2a2a"
+                          : "transparent",
+                    }}
+                  >
+                    <View>
+                      <Text style={{ color: "white", fontSize: 15 }}>
+                        {source.name}
+                      </Text>
+                      {source.bitrate && (
+                        <Text
+                          style={{ color: "#999", fontSize: 13, marginTop: 2 }}
+                        >
+                          {Math.round(source.bitrate / 1000000)} Mbps
+                        </Text>
+                      )}
+                    </View>
+                    {selectedMediaSource?.id === source.id && (
+                      <Ionicons name='checkmark' size={20} color='#a855f7' />
+                    )}
+                  </Pressable>
+                ))}
+              </View>
+            )}
+
+            {/* Audio Tracks - only show if more than one track */}
+            {audioTracks.length > 1 &&
+              renderSectionHeader("Audio", "musical-notes", "audio")}
+            {audioTracks.length > 1 && expandedSection === "audio" && (
+              <View style={{ paddingVertical: 8 }}>
+                {audioTracks.map((track) => (
+                  <Pressable
+                    key={track.index}
+                    onPress={() => {
+                      onAudioTrackChange(track);
+                      setExpandedSection(null);
+                    }}
+                    style={{
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      padding: 16,
+                      backgroundColor:
+                        selectedAudioTrack?.index === track.index
+                          ? "#2a2a2a"
+                          : "transparent",
+                    }}
+                  >
+                    <View>
+                      <Text style={{ color: "white", fontSize: 15 }}>
+                        {track.displayTitle || track.language || "Unknown"}
+                      </Text>
+                      {track.codec && (
+                        <Text
+                          style={{ color: "#999", fontSize: 13, marginTop: 2 }}
+                        >
+                          {track.codec.toUpperCase()}
+                        </Text>
+                      )}
+                    </View>
+                    {selectedAudioTrack?.index === track.index && (
+                      <Ionicons name='checkmark' size={20} color='#a855f7' />
+                    )}
+                  </Pressable>
+                ))}
+              </View>
+            )}
+
+            {/* Subtitle Tracks - only show if subtitles available */}
+            {subtitleTracks.length > 0 &&
+              renderSectionHeader("Subtitles", "text", "subtitles")}
+            {subtitleTracks.length > 0 && expandedSection === "subtitles" && (
+              <View style={{ paddingVertical: 8 }}>
+                <Pressable
+                  onPress={() => {
+                    onSubtitleTrackChange(null);
+                    setExpandedSection(null);
+                  }}
+                  style={{
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    padding: 16,
+                    backgroundColor:
+                      selectedSubtitleTrack === null
+                        ? "#2a2a2a"
+                        : "transparent",
+                  }}
+                >
+                  <Text style={{ color: "white", fontSize: 15 }}>None</Text>
+                  {selectedSubtitleTrack === null && (
+                    <Ionicons name='checkmark' size={20} color='#a855f7' />
+                  )}
+                </Pressable>
+                {subtitleTracks.map((track) => (
+                  <Pressable
+                    key={track.index}
+                    onPress={() => {
+                      onSubtitleTrackChange(track);
+                      setExpandedSection(null);
+                    }}
+                    style={{
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      padding: 16,
+                      backgroundColor:
+                        selectedSubtitleTrack?.index === track.index
+                          ? "#2a2a2a"
+                          : "transparent",
+                    }}
+                  >
+                    <View>
+                      <Text style={{ color: "white", fontSize: 15 }}>
+                        {track.displayTitle || track.language || "Unknown"}
+                      </Text>
+                      {track.codec && (
+                        <Text
+                          style={{ color: "#999", fontSize: 13, marginTop: 2 }}
+                        >
+                          {track.codec.toUpperCase()}
+                          {track.isForced && " • Forced"}
+                        </Text>
+                      )}
+                    </View>
+                    {selectedSubtitleTrack?.index === track.index && (
+                      <Ionicons name='checkmark' size={20} color='#a855f7' />
+                    )}
+                  </Pressable>
+                ))}
+              </View>
+            )}
+
+            {/* Playback Speed */}
+            {renderSectionHeader("Playback Speed", "speedometer", "speed")}
+            {expandedSection === "speed" && (
+              <View style={{ paddingVertical: 8 }}>
+                {PLAYBACK_SPEEDS.map((speed) => (
+                  <Pressable
+                    key={speed}
+                    onPress={() => {
+                      onPlaybackSpeedChange(speed);
+                      setExpandedSection(null);
+                    }}
+                    style={{
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      padding: 16,
+                      backgroundColor:
+                        playbackSpeed === speed ? "#2a2a2a" : "transparent",
+                    }}
+                  >
+                    <Text style={{ color: "white", fontSize: 15 }}>
+                      {speed === 1 ? "Normal" : `${speed}x`}
+                    </Text>
+                    {playbackSpeed === speed && (
+                      <Ionicons name='checkmark' size={20} color='#a855f7' />
+                    )}
+                  </Pressable>
+                ))}
+              </View>
+            )}
+          </ScrollView>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
--- a/components/chromecast/hooks/useChromecastSegments.ts
+++ b/components/chromecast/hooks/useChromecastSegments.ts
@@ -0,0 +1,169 @@
+/**
+ * Hook for managing Chromecast segments (intro, credits, recap, commercial, preview)
+ * Integrates with autoskip API for segment detection
+ */
+
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useAtomValue } from "jotai";
+import { useCallback, useMemo } from "react";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { isWithinSegment } from "@/utils/casting/helpers";
+import type { ChromecastSegmentData } from "@/utils/chromecast/options";
+import { useSegments } from "@/utils/segments";
+
+export const useChromecastSegments = (
+  item: BaseItemDto | null,
+  currentProgressMs: number,
+  isOffline = false,
+) => {
+  const api = useAtomValue(apiAtom);
+  const { settings } = useSettings();
+
+  // Fetch segments from autoskip API
+  const { data: segmentData } = useSegments(
+    item?.Id || "",
+    isOffline,
+    undefined, // downloadedFiles parameter
+    api,
+  );
+
+  // Parse segments into usable format
+  const segments = useMemo<ChromecastSegmentData>(() => {
+    if (!segmentData) {
+      return {
+        intro: null,
+        credits: null,
+        recap: null,
+        commercial: [],
+        preview: [],
+      };
+    }
+
+    const intro =
+      segmentData.introSegments && segmentData.introSegments.length > 0
+        ? {
+            start: segmentData.introSegments[0].startTime,
+            end: segmentData.introSegments[0].endTime,
+          }
+        : null;
+
+    const credits =
+      segmentData.creditSegments && segmentData.creditSegments.length > 0
+        ? {
+            start: segmentData.creditSegments[0].startTime,
+            end: segmentData.creditSegments[0].endTime,
+          }
+        : null;
+
+    const recap =
+      segmentData.recapSegments && segmentData.recapSegments.length > 0
+        ? {
+            start: segmentData.recapSegments[0].startTime,
+            end: segmentData.recapSegments[0].endTime,
+          }
+        : null;
+
+    const commercial = (segmentData.commercialSegments || []).map((seg) => ({
+      start: seg.startTime,
+      end: seg.endTime,
+    }));
+
+    const preview = (segmentData.previewSegments || []).map((seg) => ({
+      start: seg.startTime,
+      end: seg.endTime,
+    }));
+
+    return { intro, credits, recap, commercial, preview };
+  }, [segmentData]);
+
+  // Check which segment we're currently in
+  const currentSegment = useMemo(() => {
+    if (isWithinSegment(currentProgressMs, segments.intro)) {
+      return { type: "intro" as const, segment: segments.intro };
+    }
+    if (isWithinSegment(currentProgressMs, segments.credits)) {
+      return { type: "credits" as const, segment: segments.credits };
+    }
+    if (isWithinSegment(currentProgressMs, segments.recap)) {
+      return { type: "recap" as const, segment: segments.recap };
+    }
+    for (const commercial of segments.commercial) {
+      if (isWithinSegment(currentProgressMs, commercial)) {
+        return { type: "commercial" as const, segment: commercial };
+      }
+    }
+    for (const preview of segments.preview) {
+      if (isWithinSegment(currentProgressMs, preview)) {
+        return { type: "preview" as const, segment: preview };
+      }
+    }
+    return null;
+  }, [currentProgressMs, segments]);
+
+  // Skip functions
+  const skipIntro = useCallback(
+    (seekFn: (positionMs: number) => Promise<void>) => {
+      if (segments.intro) {
+        return seekFn(segments.intro.end * 1000);
+      }
+    },
+    [segments.intro],
+  );
+
+  const skipCredits = useCallback(
+    (seekFn: (positionMs: number) => Promise<void>) => {
+      if (segments.credits) {
+        return seekFn(segments.credits.end * 1000);
+      }
+    },
+    [segments.credits],
+  );
+
+  const skipSegment = useCallback(
+    (seekFn: (positionMs: number) => Promise<void>) => {
+      if (currentSegment?.segment) {
+        return seekFn(currentSegment.segment.end * 1000);
+      }
+    },
+    [currentSegment],
+  );
+
+  // Auto-skip logic based on settings
+  const shouldAutoSkip = useMemo(() => {
+    if (!currentSegment) return false;
+
+    switch (currentSegment.type) {
+      case "intro":
+        return settings?.skipIntro === "auto";
+      case "credits":
+        return settings?.skipOutro === "auto";
+      case "recap":
+        return settings?.skipRecap === "auto";
+      case "commercial":
+        return settings?.skipCommercial === "auto";
+      case "preview":
+        return settings?.skipPreview === "auto";
+      default:
+        return false;
+    }
+  }, [
+    currentSegment,
+    settings?.skipIntro,
+    settings?.skipOutro,
+    settings?.skipRecap,
+    settings?.skipCommercial,
+    settings?.skipPreview,
+  ]);
+
+  return {
+    segments,
+    currentSegment,
+    skipIntro,
+    skipCredits,
+    skipSegment,
+    shouldAutoSkip,
+    hasIntro: !!segments.intro,
+    hasCredits: !!segments.credits,
+  };
+};
--- a/components/item/ItemPeopleSections.tsx
+++ b/components/item/ItemPeopleSections.tsx
@@ -47,7 +47,7 @@ export const ItemPeopleSections: React.FC<Props> = ({ item, ...props }) => {

      return (
        <MoreMoviesWithActor
-          key={person.Id}
+          key={`${person.Id}-${idx}`}
          currentItem={item}
          actorId={person.Id}
          actorName={person.Name}
--- a/components/settings/PlaybackControlsSettings.tsx
+++ b/components/settings/PlaybackControlsSettings.tsx
@@ -8,6 +8,7 @@ import { BITRATES } from "@/components/BitrateSelector";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { PLAYBACK_SPEEDS } from "@/components/PlaybackSpeedSelector";
 import DisabledSetting from "@/components/settings/DisabledSetting";
+import useRouter from "@/hooks/useAppRouter";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
@@ -15,6 +16,7 @@ import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";

 export const PlaybackControlsSettings: React.FC = () => {
+  const router = useRouter();
  const { settings, updateSettings, pluginSettings } = useSettings();
  const { t } = useTranslation();

@@ -248,6 +250,15 @@ export const PlaybackControlsSettings: React.FC = () => {
            title={t("home.settings.other.max_auto_play_episode_count")}
          />
        </ListItem>
+
+        {/* Media Segment Skip Settings */}
+        <ListItem
+          title={t("home.settings.other.segment_skip_settings")}
+          subtitle={t("home.settings.other.segment_skip_settings_description")}
+          onPress={() => router.push("/settings/segment-skip/page")}
+        >
+          <Ionicons name='chevron-forward' size={20} color='#8E8D91' />
+        </ListItem>
      </ListGroup>
    </DisabledSetting>
  );
--- a/components/video-player/controls/BottomControls.tsx
+++ b/components/video-player/controls/BottomControls.tsx
@@ -19,7 +19,9 @@ interface BottomControlsProps {
  currentTime: number;
  remainingTime: number;
  showSkipButton: boolean;
+  skipButtonText: string;
  showSkipCreditButton: boolean;
+  skipCreditButtonText: string;
  hasContentAfterCredits: boolean;
  skipIntro: () => void;
  skipCredit: () => void;
@@ -67,7 +69,9 @@ export const BottomControls: FC<BottomControlsProps> = ({
  currentTime,
  remainingTime,
  showSkipButton,
+  skipButtonText,
  showSkipCreditButton,
+  skipCreditButtonText,
  hasContentAfterCredits,
  skipIntro,
  skipCredit,
@@ -136,7 +140,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
          <SkipButton
            showButton={showSkipButton}
            onPress={skipIntro}
-            buttonText='Skip Intro'
+            buttonText={skipButtonText}
          />
          {/* Smart Skip Credits behavior:
              - Show "Skip Credits" if there's content after credits OR no next episode
@@ -146,7 +150,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
              showSkipCreditButton && (hasContentAfterCredits || !nextItem)
            }
            onPress={skipCredit}
-            buttonText='Skip Credits'
+            buttonText={skipCreditButtonText}
          />
          {settings.autoPlayNextEpisode !== false &&
            (settings.maxAutoPlayEpisodeCount.value === -1 ||
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -4,7 +4,15 @@ import type {
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
 import { useLocalSearchParams } from "expo-router";
-import { type FC, useCallback, useEffect, useState } from "react";
+import {
+  type FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
 import { StyleSheet, useWindowDimensions, View } from "react-native";
 import Animated, {
  Easing,
@@ -16,17 +24,17 @@ import Animated, {
 } from "react-native-reanimated";
 import ContinueWatchingOverlay from "@/components/video-player/controls/ContinueWatchingOverlay";
 import useRouter from "@/hooks/useAppRouter";
-import { useCreditSkipper } from "@/hooks/useCreditSkipper";
 import { useHaptic } from "@/hooks/useHaptic";
-import { useIntroSkipper } from "@/hooks/useIntroSkipper";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
+import { useSegmentSkipper } from "@/hooks/useSegmentSkipper";
 import { useTrickplay } from "@/hooks/useTrickplay";
 import type { TechnicalInfo } from "@/modules/mpv-player";
 import { DownloadedItem } from "@/providers/Downloads/types";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
-import { ticksToMs } from "@/utils/time";
+import { useSegments } from "@/utils/segments";
+import { msToSeconds, ticksToMs } from "@/utils/time";
 import { BottomControls } from "./BottomControls";
 import { CenterControls } from "./CenterControls";
 import { CONTROLS_CONSTANTS } from "./constants";
@@ -42,6 +50,9 @@ import { useControlsTimeout } from "./useControlsTimeout";
 import { PlaybackSpeedScope } from "./utils/playback-speed-settings";
 import { type AspectRatio } from "./VideoScalingModeSelector";

+// No-op function to avoid creating new references on every render
+const noop = () => {};
+
 interface Props {
  item: BaseItemDto;
  isPlaying: boolean;
@@ -110,6 +121,18 @@ export const Controls: FC<Props> = ({
  const [episodeView, setEpisodeView] = useState(false);
  const [showAudioSlider, setShowAudioSlider] = useState(false);

+  // Ref to track pending play timeout for cleanup and cancellation
+  const playTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Clean up timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (playTimeoutRef.current) {
+        clearTimeout(playTimeoutRef.current);
+      }
+    };
+  }, []);
+
  const { height: screenHeight, width: screenWidth } = useWindowDimensions();
  const { previousItem, nextItem } = usePlaybackManager({
    item,
@@ -300,27 +323,122 @@ export const Controls: FC<Props> = ({
    subtitleIndex: string;
  }>();

-  const { showSkipButton, skipIntro } = useIntroSkipper(
-    item.Id!,
-    currentTime,
-    seek,
-    play,
+  // Fetch all segments for the current item
+  const { data: segments } = useSegments(
+    item.Id ?? "",
    offline,
-    api,
    downloadedFiles,
+    api,
  );

-  const { showSkipCreditButton, skipCredit, hasContentAfterCredits } =
-    useCreditSkipper(
-      item.Id!,
-      currentTime,
-      seek,
-      play,
-      offline,
-      api,
-      downloadedFiles,
-      maxMs,
-    );
+  // Convert milliseconds to seconds for segment comparison
+  const currentTimeSeconds = msToSeconds(currentTime);
+  const maxSeconds = maxMs ? msToSeconds(maxMs) : undefined;
+
+  // Wrapper to convert segment skip from seconds to milliseconds
+  // Includes 200ms delay to allow seek operation to complete before resuming playback
+  const seekMs = useCallback(
+    (timeInSeconds: number) => {
+      // Cancel any pending play call to avoid race conditions
+      if (playTimeoutRef.current) {
+        clearTimeout(playTimeoutRef.current);
+      }
+      seek(timeInSeconds * 1000);
+      // Brief delay ensures the seek operation completes before resuming playback
+      // Without this, playback may resume from the old position
+      playTimeoutRef.current = setTimeout(() => {
+        play();
+        playTimeoutRef.current = null;
+      }, 200);
+    },
+    [seek, play],
+  );
+
+  // Use unified segment skipper for all segment types
+  const introSkipper = useSegmentSkipper({
+    segments: segments?.introSegments || [],
+    segmentType: "Intro",
+    currentTime: currentTimeSeconds,
+    seek: seekMs,
+    isPaused: !isPlaying,
+  });
+
+  const outroSkipper = useSegmentSkipper({
+    segments: segments?.creditSegments || [],
+    segmentType: "Outro",
+    currentTime: currentTimeSeconds,
+    totalDuration: maxSeconds,
+    seek: seekMs,
+    isPaused: !isPlaying,
+  });
+
+  const recapSkipper = useSegmentSkipper({
+    segments: segments?.recapSegments || [],
+    segmentType: "Recap",
+    currentTime: currentTimeSeconds,
+    seek: seekMs,
+    isPaused: !isPlaying,
+  });
+
+  const commercialSkipper = useSegmentSkipper({
+    segments: segments?.commercialSegments || [],
+    segmentType: "Commercial",
+    currentTime: currentTimeSeconds,
+    seek: seekMs,
+    isPaused: !isPlaying,
+  });
+
+  const previewSkipper = useSegmentSkipper({
+    segments: segments?.previewSegments || [],
+    segmentType: "Preview",
+    currentTime: currentTimeSeconds,
+    seek: seekMs,
+    isPaused: !isPlaying,
+  });
+
+  // Determine which segment button to show (priority order)
+  // Commercial > Recap > Intro > Preview > Outro
+  const activeSegment = useMemo(() => {
+    if (commercialSkipper.currentSegment)
+      return { type: "Commercial", ...commercialSkipper };
+    if (recapSkipper.currentSegment) return { type: "Recap", ...recapSkipper };
+    if (introSkipper.currentSegment) return { type: "Intro", ...introSkipper };
+    if (previewSkipper.currentSegment)
+      return { type: "Preview", ...previewSkipper };
+    if (outroSkipper.currentSegment) return { type: "Outro", ...outroSkipper };
+    return null;
+  }, [
+    commercialSkipper.currentSegment,
+    recapSkipper.currentSegment,
+    introSkipper.currentSegment,
+    previewSkipper.currentSegment,
+    outroSkipper.currentSegment,
+    commercialSkipper,
+    recapSkipper,
+    introSkipper,
+    previewSkipper,
+    outroSkipper,
+  ]);
+
+  // Legacy compatibility: map to old variable names
+  const showSkipButton = !!(
+    activeSegment &&
+    ["Intro", "Recap", "Commercial", "Preview"].includes(activeSegment.type)
+  );
+  const skipIntro = activeSegment?.skipSegment || noop;
+  const showSkipCreditButton = activeSegment?.type === "Outro";
+  const skipCredit = outroSkipper.skipSegment;
+  const hasContentAfterCredits =
+    outroSkipper.currentSegment && maxSeconds
+      ? outroSkipper.currentSegment.endTime < maxSeconds
+      : false;
+
+  // Get button text based on segment type using i18n
+  const { t } = useTranslation();
+  const skipButtonText = activeSegment
+    ? t(`player.skip_${activeSegment.type.toLowerCase()}`)
+    : t("player.skip_intro");
+  const skipCreditButtonText = t("player.skip_outro");

  const goToItemCommon = useCallback(
    (item: BaseItemDto) => {
@@ -534,7 +652,9 @@ export const Controls: FC<Props> = ({
              currentTime={currentTime}
              remainingTime={remainingTime}
              showSkipButton={showSkipButton}
+              skipButtonText={skipButtonText}
              showSkipCreditButton={showSkipCreditButton}
+              skipCreditButtonText={skipCreditButtonText}
              hasContentAfterCredits={hasContentAfterCredits}
              skipIntro={skipIntro}
              skipCredit={skipCredit}
--- a/components/video-player/controls/TechnicalInfoOverlay.tsx
+++ b/components/video-player/controls/TechnicalInfoOverlay.tsx
@@ -120,13 +120,7 @@ const formatTranscodeReason = (reason: string): string => {
 };

 export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
-  ({
-    showControls,
-    visible,
-    getTechnicalInfo,
-    playMethod,
-    transcodeReasons,
-  }) => {
+  ({ visible, getTechnicalInfo, playMethod, transcodeReasons }) => {
    const { settings } = useSettings();
    const insets = useSafeAreaInsets();
    const [info, setInfo] = useState<TechnicalInfo | null>(null);
--- a/hooks/useCasting.ts
+++ b/hooks/useCasting.ts
@@ -0,0 +1,424 @@
+/**
+ * Unified Casting Hook
+ * Protocol-agnostic casting interface - currently supports Chromecast
+ * Architecture allows for future protocol integrations
+ */
+
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  useCastDevice,
+  useCastSession,
+  useMediaStatus,
+  useRemoteMediaClient,
+} from "react-native-google-cast";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import type { CastPlayerState, CastProtocol } from "@/utils/casting/types";
+import { DEFAULT_CAST_STATE } from "@/utils/casting/types";
+
+/**
+ * Unified hook for managing casting
+ * Extensible architecture supporting multiple protocols
+ */
+export const useCasting = (item: BaseItemDto | null) => {
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  // const { settings } = useSettings(); // TODO: Use for preferences
+
+  // Chromecast hooks
+  const client = useRemoteMediaClient();
+  const castDevice = useCastDevice();
+  const mediaStatus = useMediaStatus();
+  const castSession = useCastSession();
+
+  // Local state
+  const [state, setState] = useState<CastPlayerState>(DEFAULT_CAST_STATE);
+  const progressIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const controlsTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const lastReportedProgressRef = useRef(0);
+  const volumeDebounceRef = useRef<NodeJS.Timeout | null>(null);
+  const hasReportedStartRef = useRef<string | null>(null); // Track which item we reported start for
+
+  // Detect which protocol is active
+  const chromecastConnected = castDevice !== null;
+  // Future: Add detection for other protocols here
+
+  const activeProtocol: CastProtocol | null = chromecastConnected
+    ? "chromecast"
+    : null;
+
+  const isConnected = chromecastConnected;
+
+  // Update current device
+  useEffect(() => {
+    if (chromecastConnected && castDevice) {
+      setState((prev) => ({
+        ...prev,
+        isConnected: true,
+        protocol: "chromecast",
+        currentDevice: {
+          id: castDevice.deviceId,
+          name: castDevice.friendlyName || castDevice.deviceId,
+          protocol: "chromecast",
+        },
+      }));
+    } else {
+      setState((prev) => ({
+        ...prev,
+        isConnected: false,
+        protocol: null,
+        currentDevice: null,
+      }));
+    }
+    // Future: Add device detection for other protocols
+  }, [chromecastConnected, castDevice]);
+
+  // Chromecast: Update playback state
+  useEffect(() => {
+    if (activeProtocol === "chromecast" && mediaStatus) {
+      setState((prev) => ({
+        ...prev,
+        isPlaying: mediaStatus.playerState === "playing",
+        progress: (mediaStatus.streamPosition || 0) * 1000,
+        duration: (mediaStatus.mediaInfo?.streamDuration || 0) * 1000,
+        isBuffering: mediaStatus.playerState === "buffering",
+      }));
+    }
+  }, [mediaStatus, activeProtocol]);
+
+  // Chromecast: Sync volume from device (both mediaStatus and CastSession)
+  useEffect(() => {
+    if (activeProtocol !== "chromecast") return;
+
+    // Sync from mediaStatus when available
+    if (mediaStatus?.volume !== undefined) {
+      setState((prev) => ({
+        ...prev,
+        volume: mediaStatus.volume,
+      }));
+    }
+
+    // Also poll CastSession for device volume to catch physical button changes
+    if (castSession) {
+      const volumeInterval = setInterval(() => {
+        castSession
+          .getVolume()
+          .then((deviceVolume) => {
+            if (deviceVolume !== undefined) {
+              setState((prev) => {
+                // Only update if significantly different to avoid jitter
+                if (Math.abs(prev.volume - deviceVolume) > 0.01) {
+                  return { ...prev, volume: deviceVolume };
+                }
+                return prev;
+              });
+            }
+          })
+          .catch(() => {
+            // Ignore errors - device might be disconnected
+          });
+      }, 500); // Check every 500ms
+
+      return () => clearInterval(volumeInterval);
+    }
+  }, [mediaStatus?.volume, castSession, activeProtocol]);
+
+  // Progress reporting to Jellyfin (matches native player behavior)
+  useEffect(() => {
+    if (!isConnected || !item?.Id || !user?.Id || !api) return;
+
+    const playStateApi = getPlaystateApi(api);
+
+    // Report playback start when media begins (only once per item)
+    if (hasReportedStartRef.current !== item.Id && state.progress > 0) {
+      playStateApi
+        .reportPlaybackStart({
+          playbackStartInfo: {
+            ItemId: item.Id,
+            PositionTicks: Math.floor(state.progress * 10000),
+            PlayMethod:
+              activeProtocol === "chromecast" ? "DirectStream" : "DirectPlay",
+            VolumeLevel: Math.floor(state.volume * 100),
+            IsMuted: state.volume === 0,
+            PlaySessionId: mediaStatus?.mediaInfo?.contentId,
+          },
+        })
+        .then(() => {
+          hasReportedStartRef.current = item.Id || null;
+        })
+        .catch((error) => {
+          console.error("[useCasting] Failed to report playback start:", error);
+        });
+    }
+
+    const reportProgress = () => {
+      // Don't report if no meaningful progress or if buffering
+      if (state.progress <= 0 || state.isBuffering) return;
+
+      const progressMs = Math.floor(state.progress);
+      const progressTicks = progressMs * 10000; // Convert ms to ticks
+      const progressSeconds = Math.floor(progressMs / 1000);
+
+      // When paused, always report to keep server in sync
+      // When playing, skip if progress hasn't changed significantly (less than 3 seconds)
+      if (
+        state.isPlaying &&
+        Math.abs(progressSeconds - lastReportedProgressRef.current) < 3
+      ) {
+        return;
+      }
+
+      lastReportedProgressRef.current = progressSeconds;
+
+      playStateApi
+        .reportPlaybackProgress({
+          playbackProgressInfo: {
+            ItemId: item.Id,
+            PositionTicks: progressTicks,
+            IsPaused: !state.isPlaying,
+            PlayMethod:
+              activeProtocol === "chromecast" ? "DirectStream" : "DirectPlay",
+            // Add volume level for server tracking
+            VolumeLevel: Math.floor(state.volume * 100),
+            IsMuted: state.volume === 0,
+            // Include play session ID if available
+            PlaySessionId: mediaStatus?.mediaInfo?.contentId,
+          },
+        })
+        .catch((error) => {
+          console.error("[useCasting] Failed to report progress:", error);
+        });
+    };
+
+    // Report immediately on play/pause state change
+    reportProgress();
+
+    // Report every 5 seconds when paused, every 10 seconds when playing
+    const interval = setInterval(
+      reportProgress,
+      state.isPlaying ? 10000 : 5000,
+    );
+    return () => clearInterval(interval);
+  }, [
+    api,
+    item?.Id,
+    user?.Id,
+    state.progress,
+    state.isPlaying,
+    state.isBuffering, // Add buffering state to dependencies
+    state.volume,
+    isConnected,
+    activeProtocol,
+    mediaStatus?.mediaInfo?.contentId,
+  ]);
+
+  // Play/Pause controls
+  const play = useCallback(async () => {
+    if (activeProtocol === "chromecast") {
+      // Check if there's an active media session
+      if (!client || !mediaStatus?.mediaInfo) {
+        console.warn(
+          "[useCasting] Cannot play - no active media session. Media needs to be loaded first.",
+        );
+        return;
+      }
+      try {
+        await client.play();
+      } catch (error) {
+        console.error("[useCasting] Error playing:", error);
+        throw error;
+      }
+    }
+    // Future: Add play control for other protocols
+  }, [client, mediaStatus, activeProtocol]);
+
+  const pause = useCallback(async () => {
+    if (activeProtocol === "chromecast") {
+      await client?.pause();
+    }
+    // Future: Add pause control for other protocols
+  }, [client, activeProtocol]);
+
+  const togglePlayPause = useCallback(async () => {
+    if (state.isPlaying) {
+      await pause();
+    } else {
+      await play();
+    }
+  }, [state.isPlaying, play, pause]);
+
+  // Seek controls
+  const seek = useCallback(
+    async (positionMs: number) => {
+      // Validate position
+      if (positionMs < 0 || !Number.isFinite(positionMs)) {
+        console.error("[useCasting] Invalid seek position (ms):", positionMs);
+        return;
+      }
+
+      const positionSeconds = positionMs / 1000;
+
+      // Additional validation for Chromecast
+      if (activeProtocol === "chromecast") {
+        if (positionSeconds > state.duration) {
+          console.warn(
+            "[useCasting] Seek position exceeds duration, clamping:",
+            positionSeconds,
+            "->",
+            state.duration,
+          );
+          await client?.seek({ position: state.duration });
+          return;
+        }
+        await client?.seek({ position: positionSeconds });
+      }
+      // Future: Add seek control for other protocols
+    },
+    [client, activeProtocol, state.duration],
+  );
+
+  const skipForward = useCallback(
+    async (seconds = 10) => {
+      const newPosition = state.progress + seconds * 1000;
+      await seek(Math.min(newPosition, state.duration));
+    },
+    [state.progress, state.duration, seek],
+  );
+
+  const skipBackward = useCallback(
+    async (seconds = 10) => {
+      const newPosition = state.progress - seconds * 1000;
+      await seek(Math.max(newPosition, 0));
+    },
+    [state.progress, seek],
+  );
+
+  // Stop and disconnect
+  const stop = useCallback(
+    async (onStopComplete?: () => void) => {
+      if (activeProtocol === "chromecast") {
+        await client?.stop();
+      }
+      // Future: Add stop control for other protocols
+
+      // Report stop to Jellyfin
+      if (api && item?.Id && user?.Id) {
+        const playStateApi = getPlaystateApi(api);
+        await playStateApi.reportPlaybackStopped({
+          playbackStopInfo: {
+            ItemId: item.Id,
+            PositionTicks: state.progress * 10000,
+          },
+        });
+      }
+
+      setState(DEFAULT_CAST_STATE);
+
+      // Call callback after stop completes (e.g., to navigate away)
+      if (onStopComplete) {
+        onStopComplete();
+      }
+    },
+    [client, api, item?.Id, user?.Id, state.progress, activeProtocol],
+  );
+
+  // Volume control (debounced to reduce API calls)
+  const setVolume = useCallback(
+    (volume: number) => {
+      const clampedVolume = Math.max(0, Math.min(1, volume));
+
+      // Update UI immediately
+      setState((prev) => ({ ...prev, volume: clampedVolume }));
+
+      // Debounce API call
+      if (volumeDebounceRef.current) {
+        clearTimeout(volumeDebounceRef.current);
+      }
+
+      volumeDebounceRef.current = setTimeout(async () => {
+        if (activeProtocol === "chromecast" && client && isConnected) {
+          // Use setStreamVolume for media stream volume (0.0 - 1.0)
+          // Physical volume buttons are handled automatically by the framework
+          await client.setStreamVolume(clampedVolume).catch((error) => {
+            console.log(
+              "[useCasting] Volume set failed (no session):",
+              error.message,
+            );
+          });
+        }
+        // Future: Add volume control for other protocols
+      }, 300);
+    },
+    [client, activeProtocol],
+  );
+
+  // Controls visibility
+  const showControls = useCallback(() => {
+    setState((prev) => ({ ...prev, showControls: true }));
+
+    if (controlsTimeoutRef.current) {
+      clearTimeout(controlsTimeoutRef.current);
+    }
+    controlsTimeoutRef.current = setTimeout(() => {
+      if (state.isPlaying) {
+        setState((prev) => ({ ...prev, showControls: false }));
+      }
+    }, 5000);
+  }, [state.isPlaying]);
+
+  const hideControls = useCallback(() => {
+    setState((prev) => ({ ...prev, showControls: false }));
+    if (controlsTimeoutRef.current) {
+      clearTimeout(controlsTimeoutRef.current);
+    }
+  }, []);
+
+  // Cleanup
+  useEffect(() => {
+    return () => {
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+      }
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+      if (volumeDebounceRef.current) {
+        clearTimeout(volumeDebounceRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    // State
+    isConnected,
+    protocol: activeProtocol,
+    isPlaying: state.isPlaying,
+    isBuffering: state.isBuffering,
+    currentItem: item,
+    currentDevice: state.currentDevice,
+    progress: state.progress,
+    duration: state.duration,
+    volume: state.volume,
+
+    // Availability
+    isChromecastAvailable: true, // Always available via react-native-google-cast
+    // Future: Add availability checks for other protocols
+
+    // Raw clients (for advanced operations)
+    remoteMediaClient: client,
+
+    // Controls
+    play,
+    pause,
+    togglePlayPause,
+    seek,
+    skipForward,
+    skipBackward,
+    stop,
+    setVolume,
+    showControls,
+    hideControls,
+  };
+};
--- a/hooks/useSegmentSkipper.ts
+++ b/hooks/useSegmentSkipper.ts
@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useRef } from "react";
+import { MediaTimeSegment } from "@/providers/Downloads/types";
+import { useSettings } from "@/utils/atoms/settings";
+import { useHaptic } from "./useHaptic";
+
+type SegmentType = "Intro" | "Outro" | "Recap" | "Commercial" | "Preview";
+
+interface UseSegmentSkipperProps {
+  segments: MediaTimeSegment[];
+  segmentType: SegmentType;
+  currentTime: number;
+  totalDuration?: number;
+  seek: (time: number) => void;
+  isPaused: boolean;
+}
+
+interface UseSegmentSkipperReturn {
+  currentSegment: MediaTimeSegment | null;
+  skipSegment: (notifyOrUseHaptics?: boolean) => void;
+}
+
+/**
+ * Generic hook to handle all media segment types (intro, outro, recap, commercial, preview)
+ * Supports three modes: 'none' (disabled), 'ask' (show button), 'auto' (auto-skip)
+ */
+export const useSegmentSkipper = ({
+  segments,
+  segmentType,
+  currentTime,
+  totalDuration,
+  seek,
+  isPaused,
+}: UseSegmentSkipperProps): UseSegmentSkipperReturn => {
+  const { settings } = useSettings();
+  const haptic = useHaptic();
+  const autoSkipTriggeredRef = useRef(false);
+
+  // Get skip mode based on segment type
+  const skipMode = (() => {
+    switch (segmentType) {
+      case "Intro":
+        return settings.skipIntro;
+      case "Outro":
+        return settings.skipOutro;
+      case "Recap":
+        return settings.skipRecap;
+      case "Commercial":
+        return settings.skipCommercial;
+      case "Preview":
+        return settings.skipPreview;
+      default:
+        return "none";
+    }
+  })();
+
+  // Find current segment
+  const currentSegment =
+    segments.find(
+      (segment) =>
+        currentTime >= segment.startTime && currentTime < segment.endTime,
+    ) || null;
+
+  // Skip function with optional haptic feedback
+  const skipSegment = useCallback(
+    (notifyOrUseHaptics = true) => {
+      if (!currentSegment) return;
+
+      // For Outro segments, prevent seeking past the end
+      if (segmentType === "Outro" && totalDuration) {
+        const seekTime = Math.min(currentSegment.endTime, totalDuration);
+        seek(seekTime);
+      } else {
+        seek(currentSegment.endTime);
+      }
+
+      // Only trigger haptic feedback if explicitly requested (manual skip)
+      if (notifyOrUseHaptics) {
+        haptic();
+      }
+    },
+    [currentSegment, segmentType, totalDuration, seek, haptic],
+  );
+  // Auto-skip logic when mode is 'auto'
+  useEffect(() => {
+    if (skipMode !== "auto" || isPaused) {
+      autoSkipTriggeredRef.current = false;
+      return;
+    }
+
+    if (currentSegment && !autoSkipTriggeredRef.current) {
+      autoSkipTriggeredRef.current = true;
+      skipSegment(false); // Don't trigger haptics for auto-skip
+    }
+
+    if (!currentSegment) {
+      autoSkipTriggeredRef.current = false;
+    }
+  }, [currentSegment, skipMode, isPaused, skipSegment]);
+
+  // Return null segment if skip mode is 'none'
+  return {
+    currentSegment: skipMode === "none" ? null : currentSegment,
+    skipSegment,
+  };
+};
--- a/package.json
+++ b/package.json
@@ -115,7 +115,7 @@
    "zod": "4.1.13"
  },
  "devDependencies": {
-    "@babel/core": "7.29.0",
+    "@babel/core": "7.28.6",
    "@biomejs/biome": "2.3.11",
    "@react-native-community/cli": "20.1.1",
    "@react-native-tvos/config-tv": "0.1.4",
--- a/providers/Downloads/types.ts
+++ b/providers/Downloads/types.ts
@@ -32,12 +32,6 @@ export interface MediaTimeSegment {
  text: string;
 }

-export interface Segment {
-  startTime: number;
-  endTime: number;
-  text: string;
-}
-
 /** Represents a single downloaded media item with all necessary metadata for offline playback. */
 export interface DownloadedItem {
  /** The Jellyfin item DTO. */
@@ -56,6 +50,12 @@ export interface DownloadedItem {
  introSegments?: MediaTimeSegment[];
  /** The credit segments for the item. */
  creditSegments?: MediaTimeSegment[];
+  /** The recap segments for the item. */
+  recapSegments?: MediaTimeSegment[];
+  /** The commercial segments for the item. */
+  commercialSegments?: MediaTimeSegment[];
+  /** The preview segments for the item. */
+  previewSegments?: MediaTimeSegment[];
  /** The user data for the item. */
  userData: UserData;
 }
@@ -144,6 +144,12 @@ export type JobStatus = {
  introSegments?: MediaTimeSegment[];
  /** Pre-downloaded credit segments (optional) - downloaded before video starts */
  creditSegments?: MediaTimeSegment[];
+  /** Pre-downloaded recap segments (optional) - downloaded before video starts */
+  recapSegments?: MediaTimeSegment[];
+  /** Pre-downloaded commercial segments (optional) - downloaded before video starts */
+  commercialSegments?: MediaTimeSegment[];
+  /** Pre-downloaded preview segments (optional) - downloaded before video starts */
+  previewSegments?: MediaTimeSegment[];
  /** The audio stream index selected for this download */
  audioStreamIndex?: number;
  /** The subtitle stream index selected for this download */
--- a/translations/en.json
+++ b/translations/en.json
@@ -24,6 +24,56 @@
    "too_old_server_text": "Unsupported Jellyfin Server Discovered",
    "too_old_server_description": "Please update Jellyfin to the latest version"
  },
+  "player": {
+    "skip_intro": "Skip Intro",
+    "skip_outro": "Skip Outro",
+    "skip_recap": "Skip Recap",
+    "skip_commercial": "Skip Commercial",
+    "skip_preview": "Skip Preview",
+    "error": "Error",
+    "failed_to_get_stream_url": "Failed to get the stream URL",
+    "an_error_occured_while_playing_the_video": "An error occurred while playing the video. Check logs in settings.",
+    "client_error": "Client Error",
+    "could_not_create_stream_for_chromecast": "Could not create a stream for Chromecast",
+    "message_from_server": "Message from Server: {{message}}",
+    "next_episode": "Next Episode",
+    "refresh_tracks": "Refresh Tracks",
+    "audio_tracks": "Audio Tracks:",
+    "playback_state": "Playback State:",
+    "index": "Index:",
+    "continue_watching": "Continue Watching",
+    "go_back": "Go Back",
+    "downloaded_file_title": "You have this file downloaded",
+    "downloaded_file_message": "Do you want to play the downloaded file?",
+    "downloaded_file_yes": "Yes",
+    "downloaded_file_no": "No",
+    "downloaded_file_cancel": "Cancel"
+  },
+  "casting_player": {
+    "buffering": "Buffering...",
+    "changing_audio": "Changing audio...",
+    "changing_subtitles": "Changing subtitles...",
+    "season_episode_format": "Season {{season}} • Episode {{episode}}",
+    "connection_quality": {
+      "excellent": "Excellent",
+      "good": "Good",
+      "fair": "Fair",
+      "poor": "Poor",
+      "disconnected": "Disconnected"
+    },
+    "error_title": "Chromecast Error",
+    "error_description": "Something went wrong with the cast session",
+    "retry": "Try Again",
+    "critical_error_title": "Multiple Errors Detected",
+    "critical_error_description": "Chromecast encountered multiple errors. Please disconnect and try casting again.",
+    "track_changed": "Track changed successfully",
+    "audio_track_changed": "Audio track changed",
+    "subtitle_track_changed": "Subtitle track changed",
+    "seeking": "Seeking...",
+    "seeking_error": "Failed to seek",
+    "load_failed": "Failed to load media",
+    "load_retry": "Retrying media load..."
+  },
  "server": {
    "enter_url_to_jellyfin_server": "Enter the URL to your Jellyfin server",
    "server_url_placeholder": "http(s)://your-server.com",
@@ -308,6 +358,21 @@
        "default_playback_speed": "Default Playback Speed",
        "auto_play_next_episode": "Auto-play Next Episode",
        "max_auto_play_episode_count": "Max Auto Play Episode Count",
+        "segment_skip_settings": "Segment Skip Settings",
+        "segment_skip_settings_description": "Configure skip behavior for intros, credits, and other segments",
+        "skip_intro": "Skip Intro",
+        "skip_intro_description": "Action when intro segment is detected",
+        "skip_outro": "Skip Outro/Credits",
+        "skip_outro_description": "Action when outro/credits segment is detected",
+        "skip_recap": "Skip Recap",
+        "skip_recap_description": "Action when recap segment is detected",
+        "skip_commercial": "Skip Commercial",
+        "skip_commercial_description": "Action when commercial segment is detected",
+        "skip_preview": "Skip Preview",
+        "skip_preview_description": "Action when preview segment is detected",
+        "segment_skip_none": "None",
+        "segment_skip_ask": "Show Skip Button",
+        "segment_skip_auto": "Auto Skip",
        "disabled": "Disabled"
      },
      "downloads": {
@@ -590,26 +655,6 @@
  "custom_links": {
    "no_links": "No Links"
  },
-  "player": {
-    "error": "Error",
-    "failed_to_get_stream_url": "Failed to get the stream URL",
-    "an_error_occured_while_playing_the_video": "An error occurred while playing the video. Check logs in settings.",
-    "client_error": "Client Error",
-    "could_not_create_stream_for_chromecast": "Could not create a stream for Chromecast",
-    "message_from_server": "Message from Server: {{message}}",
-    "next_episode": "Next Episode",
-    "refresh_tracks": "Refresh Tracks",
-    "audio_tracks": "Audio Tracks:",
-    "playback_state": "Playback State:",
-    "index": "Index:",
-    "continue_watching": "Continue Watching",
-    "go_back": "Go Back",
-    "downloaded_file_title": "You have this file downloaded",
-    "downloaded_file_message": "Do you want to play the downloaded file?",
-    "downloaded_file_yes": "Yes",
-    "downloaded_file_no": "No",
-    "downloaded_file_cancel": "Cancel"
-  },
  "item_card": {
    "next_up": "Next Up",
    "no_items_to_display": "No Items to Display",
--- a/utils/atoms/settings.ts
+++ b/utils/atoms/settings.ts
@@ -134,6 +134,9 @@ export enum VideoPlayer {
  MPV = 0,
 }

+// Segment skip behavior options
+export type SegmentSkipMode = "none" | "ask" | "auto";
+
 // Audio transcoding mode - controls how surround audio is handled
 // This controls server-side transcoding behavior for audio streams.
 // MPV decodes via FFmpeg and supports most formats, but mobile devices
@@ -181,6 +184,12 @@ export type Settings = {
  maxAutoPlayEpisodeCount: MaxAutoPlayEpisodeCount;
  autoPlayEpisodeCount: number;
  autoPlayNextEpisode: boolean;
+  // Media segment skip preferences
+  skipIntro: SegmentSkipMode;
+  skipOutro: SegmentSkipMode;
+  skipRecap: SegmentSkipMode;
+  skipCommercial: SegmentSkipMode;
+  skipPreview: SegmentSkipMode;
  // Playback speed settings
  defaultPlaybackSpeed: number;
  playbackSpeedPerMedia: Record<string, number>;
@@ -266,6 +275,12 @@ export const defaultValues: Settings = {
  maxAutoPlayEpisodeCount: { key: "3", value: 3 },
  autoPlayEpisodeCount: 0,
  autoPlayNextEpisode: true,
+  // Media segment skip defaults
+  skipIntro: "ask",
+  skipOutro: "ask",
+  skipRecap: "ask",
+  skipCommercial: "ask",
+  skipPreview: "ask",
  // Playback speed defaults
  defaultPlaybackSpeed: 1.0,
  playbackSpeedPerMedia: {},
--- a/utils/casting/helpers.ts
+++ b/utils/casting/helpers.ts
@@ -0,0 +1,160 @@
+/**
+ * Unified Casting Helper Functions
+ * Common utilities for casting protocols
+ */
+
+import type { CastProtocol, ConnectionQuality } from "./types";
+
+/**
+ * Format milliseconds to HH:MM:SS or MM:SS
+ */
+export const formatTime = (ms: number): string => {
+  const totalSeconds = Math.floor(ms / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  }
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+};
+
+/**
+ * Calculate ending time based on current progress and duration
+ */
+export const calculateEndingTime = (
+  currentMs: number,
+  durationMs: number,
+): string => {
+  const remainingMs = durationMs - currentMs;
+  const endTime = new Date(Date.now() + remainingMs);
+  const hours = endTime.getHours();
+  const minutes = endTime.getMinutes();
+  const ampm = hours >= 12 ? "PM" : "AM";
+  const displayHours = hours % 12 || 12;
+
+  return `${displayHours}:${minutes.toString().padStart(2, "0")} ${ampm}`;
+};
+
+/**
+ * Determine connection quality based on bitrate
+ */
+export const getConnectionQuality = (bitrate?: number): ConnectionQuality => {
+  if (!bitrate) return "good";
+  const mbps = bitrate / 1000000;
+
+  if (mbps >= 15) return "excellent";
+  if (mbps >= 8) return "good";
+  if (mbps >= 4) return "fair";
+  return "poor";
+};
+
+/**
+ * Get poster URL for item with specified dimensions
+ */
+export const getPosterUrl = (
+  baseUrl: string | undefined,
+  itemId: string | undefined,
+  tag: string | undefined,
+  width: number,
+  height: number,
+): string | null => {
+  if (!baseUrl || !itemId) return null;
+
+  const params = new URLSearchParams({
+    maxWidth: width.toString(),
+    maxHeight: height.toString(),
+    quality: "90",
+    ...(tag && { tag }),
+  });
+
+  return `${baseUrl}/Items/${itemId}/Images/Primary?${params.toString()}`;
+};
+
+/**
+ * Truncate title to max length with ellipsis
+ */
+export const truncateTitle = (title: string, maxLength: number): string => {
+  if (title.length <= maxLength) return title;
+  return `${title.substring(0, maxLength - 3)}...`;
+};
+
+/**
+ * Check if current time is within a segment
+ */
+export const isWithinSegment = (
+  currentMs: number,
+  segment: { start: number; end: number } | null,
+): boolean => {
+  if (!segment) return false;
+  const currentSeconds = currentMs / 1000;
+  return currentSeconds >= segment.start && currentSeconds <= segment.end;
+};
+
+/**
+ * Format bitrate to human-readable string
+ */
+export const formatBitrate = (bitrate: number): string => {
+  const mbps = bitrate / 1000000;
+  if (mbps >= 1) {
+    return `${mbps.toFixed(1)} Mbps`;
+  }
+  return `${(bitrate / 1000).toFixed(0)} Kbps`;
+};
+
+/**
+ * Get protocol display name
+ */
+export const getProtocolName = (protocol: CastProtocol): string => {
+  switch (protocol) {
+    case "chromecast":
+      return "Chromecast";
+    // Future: Add cases for other protocols
+  }
+};
+
+/**
+ * Get protocol icon name
+ */
+export const getProtocolIcon = (
+  protocol: CastProtocol,
+): "tv" | "logo-apple" => {
+  switch (protocol) {
+    case "chromecast":
+      return "tv";
+    // Future: Add icons for other protocols
+  }
+};
+
+/**
+ * Format episode info (e.g., "S1 E1" or "Episode 1")
+ */
+export const formatEpisodeInfo = (
+  seasonNumber?: number | null,
+  episodeNumber?: number | null,
+): string => {
+  if (
+    seasonNumber !== undefined &&
+    seasonNumber !== null &&
+    episodeNumber !== undefined &&
+    episodeNumber !== null
+  ) {
+    return `S${seasonNumber} E${episodeNumber}`;
+  }
+  if (episodeNumber !== undefined && episodeNumber !== null) {
+    return `Episode ${episodeNumber}`;
+  }
+  return "";
+};
+
+/**
+ * Check if we should show next episode countdown
+ */
+export const shouldShowNextEpisodeCountdown = (
+  remainingMs: number,
+  hasNextEpisode: boolean,
+  countdownStartSeconds: number,
+): boolean => {
+  return hasNextEpisode && remainingMs <= countdownStartSeconds * 1000;
+};
--- a/utils/casting/types.ts
+++ b/utils/casting/types.ts
@@ -0,0 +1,82 @@
+/**
+ * Unified Casting Types and Options
+ * Protocol-agnostic casting interface - currently supports Chromecast
+ * Architecture allows for future protocols (AirPlay, DLNA, etc.)
+ */
+
+export type CastProtocol = "chromecast";
+
+export interface CastDevice {
+  id: string;
+  name: string;
+  protocol: CastProtocol;
+  type?: string;
+}
+
+export interface CastPlayerState {
+  isConnected: boolean;
+  isPlaying: boolean;
+  currentItem: any | null;
+  currentDevice: CastDevice | null;
+  protocol: CastProtocol | null;
+  progress: number;
+  duration: number;
+  volume: number;
+  showControls: boolean;
+  isBuffering: boolean;
+}
+
+export interface CastSegmentData {
+  intro: { start: number; end: number } | null;
+  credits: { start: number; end: number } | null;
+  recap: { start: number; end: number } | null;
+  commercial: Array<{ start: number; end: number }>;
+  preview: Array<{ start: number; end: number }>;
+}
+
+export interface AudioTrack {
+  index: number;
+  language: string;
+  codec: string;
+  displayTitle: string;
+}
+
+export interface SubtitleTrack {
+  index: number;
+  language: string;
+  codec: string;
+  displayTitle: string;
+  isForced: boolean;
+}
+
+export interface MediaSource {
+  id: string;
+  name: string;
+  bitrate?: number;
+  container: string;
+}
+
+export const CASTING_CONSTANTS = {
+  POSTER_WIDTH: 300,
+  POSTER_HEIGHT: 450,
+  ANIMATION_DURATION: 300,
+  CONTROL_HIDE_DELAY: 5000,
+  PROGRESS_UPDATE_INTERVAL: 1000,
+  SEEK_FORWARD_SECONDS: 10,
+  SEEK_BACKWARD_SECONDS: 10,
+} as const;
+
+export const DEFAULT_CAST_STATE: CastPlayerState = {
+  isConnected: false,
+  isPlaying: false,
+  currentItem: null,
+  currentDevice: null,
+  protocol: null,
+  progress: 0,
+  duration: 0,
+  volume: 0.5,
+  showControls: true,
+  isBuffering: false,
+};
+
+export type ConnectionQuality = "excellent" | "good" | "fair" | "poor";
--- a/utils/chromecast/helpers.ts
+++ b/utils/chromecast/helpers.ts
@@ -0,0 +1,147 @@
+/**
+ * Chromecast utility helper functions
+ */
+
+import { CONNECTION_QUALITY, type ConnectionQuality } from "./options";
+
+/**
+ * Formats milliseconds to HH:MM:SS or MM:SS
+ */
+export const formatTime = (ms: number): string => {
+  const totalSeconds = Math.floor(ms / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  const pad = (num: number) => num.toString().padStart(2, "0");
+
+  if (hours > 0) {
+    return `${hours}:${pad(minutes)}:${pad(seconds)}`;
+  }
+  return `${minutes}:${pad(seconds)}`;
+};
+
+/**
+ * Calculates ending time based on current time and remaining duration
+ */
+export const calculateEndingTime = (
+  remainingMs: number,
+  use24Hour = true,
+): string => {
+  const endTime = new Date(Date.now() + remainingMs);
+  const hours = endTime.getHours();
+  const minutes = endTime.getMinutes();
+
+  if (use24Hour) {
+    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+  }
+
+  const period = hours >= 12 ? "PM" : "AM";
+  const displayHours = hours % 12 || 12;
+  return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`;
+};
+
+/**
+ * Determines connection quality based on bitrate and latency
+ */
+export const getConnectionQuality = (
+  bitrateMbps: number,
+  latencyMs?: number,
+): ConnectionQuality => {
+  // Prioritize bitrate, but factor in latency if available
+  let effectiveBitrate = bitrateMbps;
+
+  if (latencyMs !== undefined && latencyMs > 200) {
+    effectiveBitrate *= 0.7; // Reduce effective quality for high latency
+  }
+
+  if (effectiveBitrate >= CONNECTION_QUALITY.EXCELLENT.min) {
+    return "EXCELLENT";
+  }
+  if (effectiveBitrate >= CONNECTION_QUALITY.GOOD.min) {
+    return "GOOD";
+  }
+  if (effectiveBitrate >= CONNECTION_QUALITY.FAIR.min) {
+    return "FAIR";
+  }
+  return "POOR";
+};
+
+/**
+ * Checks if we should show next episode countdown
+ */
+export const shouldShowNextEpisodeCountdown = (
+  remainingMs: number,
+  hasNextEpisode: boolean,
+  countdownStartSeconds: number,
+): boolean => {
+  return hasNextEpisode && remainingMs <= countdownStartSeconds * 1000;
+};
+
+/**
+ * Truncates long titles with ellipsis
+ */
+export const truncateTitle = (title: string, maxLength: number): string => {
+  if (title.length <= maxLength) return title;
+  return `${title.substring(0, maxLength - 3)}...`;
+};
+
+/**
+ * Formats episode info (e.g., "S1 E1" or "Episode 1")
+ */
+export const formatEpisodeInfo = (
+  seasonNumber?: number | null,
+  episodeNumber?: number | null,
+): string => {
+  if (
+    seasonNumber !== undefined &&
+    seasonNumber !== null &&
+    episodeNumber !== undefined &&
+    episodeNumber !== null
+  ) {
+    return `S${seasonNumber} E${episodeNumber}`;
+  }
+  if (episodeNumber !== undefined && episodeNumber !== null) {
+    return `Episode ${episodeNumber}`;
+  }
+  return "";
+};
+
+/**
+ * Gets the appropriate poster URL (season for series, primary for movies)
+ */
+export const getPosterUrl = (
+  item: {
+    Type?: string | null;
+    ParentBackdropImageTags?: string[] | null;
+    SeriesId?: string | null;
+    Id?: string | null;
+  },
+  api: { basePath?: string },
+): string | null => {
+  if (!api.basePath) return null;
+
+  if (item.Type === "Episode" && item.SeriesId) {
+    // Use season poster for episodes
+    return `${api.basePath}/Items/${item.SeriesId}/Images/Primary`;
+  }
+
+  // Use primary image for movies and other types
+  if (item.Id) {
+    return `${api.basePath}/Items/${item.Id}/Images/Primary`;
+  }
+
+  return null;
+};
+
+/**
+ * Checks if currently within a segment (intro, credits, etc.)
+ */
+export const isWithinSegment = (
+  currentMs: number,
+  segment: { start: number; end: number } | null,
+): boolean => {
+  if (!segment) return false;
+  const currentSeconds = currentMs / 1000;
+  return currentSeconds >= segment.start && currentSeconds <= segment.end;
+};
--- a/utils/chromecast/options.ts
+++ b/utils/chromecast/options.ts
@@ -0,0 +1,70 @@
+/**
+ * Chromecast player configuration and constants
+ */
+
+export const CHROMECAST_CONSTANTS = {
+  // Timing
+  PROGRESS_REPORT_INTERVAL: 10, // seconds
+  CONTROLS_TIMEOUT: 5000, // ms
+  BUFFERING_THRESHOLD: 10, // seconds of buffer before hiding indicator
+  NEXT_EPISODE_COUNTDOWN_START: 30, // seconds before end
+  CONNECTION_CHECK_INTERVAL: 5000, // ms
+
+  // UI
+  POSTER_WIDTH: 300,
+  POSTER_HEIGHT: 450,
+  MINI_PLAYER_HEIGHT: 80,
+  SKIP_FORWARD_TIME: 15, // seconds (overridden by settings)
+  SKIP_BACKWARD_TIME: 15, // seconds (overridden by settings)
+
+  // Animation
+  ANIMATION_DURATION: 300, // ms
+  BLUR_RADIUS: 10,
+} as const;
+
+export const CONNECTION_QUALITY = {
+  EXCELLENT: { min: 50, label: "Excellent", icon: "signal" },
+  GOOD: { min: 30, label: "Good", icon: "signal" },
+  FAIR: { min: 15, label: "Fair", icon: "signal" },
+  POOR: { min: 0, label: "Poor", icon: "signal" },
+} as const;
+
+export type ConnectionQuality = keyof typeof CONNECTION_QUALITY;
+
+export interface ChromecastPlayerState {
+  isConnected: boolean;
+  deviceName: string | null;
+  isPlaying: boolean;
+  isPaused: boolean;
+  isStopped: boolean;
+  isBuffering: boolean;
+  progress: number; // milliseconds
+  duration: number; // milliseconds
+  volume: number; // 0-1
+  isMuted: boolean;
+  currentItemId: string | null;
+  connectionQuality: ConnectionQuality;
+}
+
+export interface ChromecastSegmentData {
+  intro: { start: number; end: number } | null;
+  credits: { start: number; end: number } | null;
+  recap: { start: number; end: number } | null;
+  commercial: { start: number; end: number }[];
+  preview: { start: number; end: number }[];
+}
+
+export const DEFAULT_CHROMECAST_STATE: ChromecastPlayerState = {
+  isConnected: false,
+  deviceName: null,
+  isPlaying: false,
+  isPaused: false,
+  isStopped: true,
+  isBuffering: false,
+  progress: 0,
+  duration: 0,
+  volume: 1,
+  isMuted: false,
+  currentItemId: null,
+  connectionQuality: "EXCELLENT",
+};
--- a/utils/profiles/chromecast.ts
+++ b/utils/profiles/chromecast.ts
@@ -13,6 +13,14 @@ export const chromecast: DeviceProfile = {
    {
      Type: "Audio",
      Codec: "aac,mp3,flac,opus,vorbis",
+      // Force transcode if audio has more than 2 channels (5.1, 7.1, etc)
+      Conditions: [
+        {
+          Condition: "LessThanEqual",
+          Property: "AudioChannels",
+          Value: "2",
+        },
+      ],
    },
  ],
  ContainerProfiles: [],
--- a/utils/profiles/chromecasth265.ts
+++ b/utils/profiles/chromecasth265.ts
@@ -12,7 +12,14 @@ export const chromecasth265: DeviceProfile = {
    },
    {
      Type: "Audio",
-      Codec: "aac,mp3,flac,opus,vorbis",
+      Codec: "aac,mp3,flac,opus,vorbis", // Force transcode if audio has more than 2 channels (5.1, 7.1, etc)
+      Conditions: [
+        {
+          Condition: "LessThanEqual",
+          Property: "AudioChannels",
+          Value: "2",
+        },
+      ],
    },
  ],
  ContainerProfiles: [],
--- a/utils/segments.ts
+++ b/utils/segments.ts
@@ -74,10 +74,16 @@ export const getSegmentsForItem = (
 ): {
  introSegments: MediaTimeSegment[];
  creditSegments: MediaTimeSegment[];
+  recapSegments: MediaTimeSegment[];
+  commercialSegments: MediaTimeSegment[];
+  previewSegments: MediaTimeSegment[];
 } => {
  return {
    introSegments: item.introSegments || [],
    creditSegments: item.creditSegments || [],
+    recapSegments: item.recapSegments || [],
+    commercialSegments: item.commercialSegments || [],
+    previewSegments: item.previewSegments || [],
  };
 };

@@ -95,6 +101,9 @@ const fetchMediaSegments = async (
 ): Promise<{
  introSegments: MediaTimeSegment[];
  creditSegments: MediaTimeSegment[];
+  recapSegments: MediaTimeSegment[];
+  commercialSegments: MediaTimeSegment[];
+  previewSegments: MediaTimeSegment[];
 } | null> => {
  try {
    const response = await api.axiosInstance.get<MediaSegmentsResponse>(
@@ -102,13 +111,22 @@ const fetchMediaSegments = async (
      {
        headers: getAuthHeaders(api),
        params: {
-          includeSegmentTypes: ["Intro", "Outro"],
+          includeSegmentTypes: [
+            "Intro",
+            "Outro",
+            "Recap",
+            "Commercial",
+            "Preview",
+          ],
        },
      },
    );

    const introSegments: MediaTimeSegment[] = [];
    const creditSegments: MediaTimeSegment[] = [];
+    const recapSegments: MediaTimeSegment[] = [];
+    const commercialSegments: MediaTimeSegment[] = [];
+    const previewSegments: MediaTimeSegment[] = [];

    response.data.Items.forEach((segment) => {
      const timeSegment: MediaTimeSegment = {
@@ -124,13 +142,27 @@ const fetchMediaSegments = async (
        case "Outro":
          creditSegments.push(timeSegment);
          break;
-        // Optionally handle other types like Recap, Commercial, Preview
+        case "Recap":
+          recapSegments.push(timeSegment);
+          break;
+        case "Commercial":
+          commercialSegments.push(timeSegment);
+          break;
+        case "Preview":
+          previewSegments.push(timeSegment);
+          break;
        default:
          break;
      }
    });

-    return { introSegments, creditSegments };
+    return {
+      introSegments,
+      creditSegments,
+      recapSegments,
+      commercialSegments,
+      previewSegments,
+    };
  } catch (_error) {
    // Return null to indicate we should try legacy endpoints
    return null;
@@ -146,6 +178,9 @@ const fetchLegacySegments = async (
 ): Promise<{
  introSegments: MediaTimeSegment[];
  creditSegments: MediaTimeSegment[];
+  recapSegments: MediaTimeSegment[];
+  commercialSegments: MediaTimeSegment[];
+  previewSegments: MediaTimeSegment[];
 }> => {
  const introSegments: MediaTimeSegment[] = [];
  const creditSegments: MediaTimeSegment[] = [];
@@ -184,7 +219,13 @@ const fetchLegacySegments = async (
    console.error("Failed to fetch legacy segments", error);
  }

-  return { introSegments, creditSegments };
+  return {
+    introSegments,
+    creditSegments,
+    recapSegments: [],
+    commercialSegments: [],
+    previewSegments: [],
+  };
 };

 export const fetchAndParseSegments = async (
@@ -193,6 +234,9 @@ export const fetchAndParseSegments = async (
 ): Promise<{
  introSegments: MediaTimeSegment[];
  creditSegments: MediaTimeSegment[];
+  recapSegments: MediaTimeSegment[];
+  commercialSegments: MediaTimeSegment[];
+  previewSegments: MediaTimeSegment[];
 }> => {
  // Try new API first (Jellyfin 10.11+)
  const newSegments = await fetchMediaSegments(itemId, api);
Author	SHA1	Message	Date
Uruk	f6a47b9867	fix: Refactors Chromecast casting player Refactors the Chromecast casting player for better compatibility, UI improvements, and stability. - Adds auto-selection of stereo audio tracks for improved Chromecast compatibility - Refactors episode list to filter out virtual episodes and allow season selection - Improves UI layout and styling - Removes connection quality indicator - Fixes progress reporting to Jellyfin - Updates volume control to use CastSession for device volume	2026-02-04 21:03:49 +01:00
Uruk	bc08df903f	feat: Enhances casting player with API data Enriches the casting player screen by fetching item details from the Jellyfin API for a more reliable and complete user experience. The casting player now prioritizes item data fetched directly from the API, providing richer metadata and ensuring accurate information display. - Fetches full item data based on content ID. - Uses fetched data as the primary source of item information, falling back to customData or minimal info if unavailable. - Improves UI by showing connection quality and bitrate. - Enhances episode list display and scrolling. - Adds a stop casting button. - Minor UI adjustments for better readability and aesthetics. This change enhances the accuracy and reliability of displayed information, improving the overall user experience of the casting player.	2026-02-01 16:18:33 +01:00
Uruk	4ad07d22bd	feat: Enhance Chromecast functionality and UI improvements - Implemented a retry mechanism for Chromecast device discovery with a maximum of 3 attempts. - Added logging for discovered devices to aid in debugging. - Updated Chromecast button interactions to streamline navigation to the casting player. - Changed the color scheme for Chromecast components to a consistent purple theme. - Modified the ChromecastDeviceSheet to sync volume slider with prop changes. - Improved the ChromecastSettingsMenu to conditionally render audio and subtitle tracks based on availability. - Updated translations for the casting player to include new strings for better user experience.	2026-02-01 16:18:33 +01:00
Uruk	da52b9c4b3	fix: use full route path for casting-player navigation	2026-02-01 16:18:32 +01:00
Uruk	14d0f53c07	debug: add logging to Chromecast button tap handler	2026-02-01 16:18:32 +01:00
Uruk	ef2cc19e21	fix: handle casting-player navigation when no back stack exists Use useEffect to check connection state and redirect properly. If no back stack exists, navigate to home tab instead of calling router.back().	2026-02-01 16:18:30 +01:00
Uruk	338f42b980	fix: route Chromecast button to custom casting-player instead of native UI	2026-02-01 16:18:28 +01:00
Uruk	9bf17dd96e	refactor(casting): remove AirPlay references, keep extensible architecture - Remove AirPlay from CastProtocol type union (Chromecast only for now) - Replace AirPlay TODOs with generic 'Future: Add X for other protocols' comments - Remove PROTOCOL_COLORS export, use hardcoded Chromecast color (#F9AB00) - Update all component headers to be protocol-agnostic - Keep switch statements extensible for future protocol additions - Maintain clean architecture for easy integration of new casting protocols Architecture remains flexible for future protocols (AirPlay, DLNA, etc.)	2026-02-01 16:18:28 +01:00
Uruk	b85fbc224b	chore: remove unnecessary AirPlay documentation	2026-02-01 16:18:27 +01:00
Uruk	da1b089075	feat(casting): complete all remaining TODOs - Expose RemoteMediaClient from useCasting for advanced operations - Implement episode fetching from Jellyfin API for TV shows - Add next episode detection with countdown UI showing episode name - Wire audio/subtitle track changes to RemoteMediaClient.setActiveTrackIds - Wire playback speed to RemoteMediaClient.setPlaybackRate - Add tap-to-seek functionality to progress bar - Update segment skip buttons to use remoteMediaClient seek wrapper - Create comprehensive AirPlay implementation documentation All casting system features are now complete before PR submission.	2026-02-01 16:18:27 +01:00
Uruk	b353d7acea	feat: optimize and complete casting system implementation Performance Optimizations: - Add progress tracking to skip redundant Jellyfin API calls (< 5s changes) - Debounce volume changes (300ms) to reduce API load - Memoize expensive calculations (protocol colors, icons, progress percent) - Remove dead useChromecastPlayer hook (redundant with useCasting) Feature Integrations: - Add ChromecastEpisodeList modal with Episodes button for TV shows - Add ChromecastDeviceSheet modal accessible via device indicator - Add ChromecastSettingsMenu modal with settings icon - Integrate segment detection with Skip Intro/Credits/Recap buttons - Add next episode countdown UI (30s before end) AirPlay Support: - Add comprehensive documentation for AirPlay detection approaches - Document integration requirements with AVRoutePickerView - Prepare infrastructure for native module or AVPlayer integration UI Improvements: - Make device indicator tappable to open device sheet - Add settings icon in header - Show segment skip buttons dynamically based on current playback - Display next episode countdown with cancel option - Optimize hook ordering to prevent conditional hook violations TODOs for future work: - Fetch actual episode list from Jellyfin API - Wire media source/audio/subtitle track selectors to player - Implement episode auto-play logic - Create native module for AirPlay state detection - Add RemoteMediaClient to segment skip functions	2026-02-01 16:18:26 +01:00
Uruk	c6bf16afdd	refactor: clean up dead code and consolidate casting utilities - Remove dead Chromecast files (ChromecastMiniPlayer, chromecast-player) - Remove dead AirPlay files (AirPlayMiniPlayer, airplay-player, useAirPlayPlayer) - Remove duplicate AirPlay utilities (options.ts, helpers.ts) - Consolidate unique Chromecast helpers into unified casting helpers - Add formatEpisodeInfo and shouldShowNextEpisodeCountdown - Update all imports to use unified casting utilities - Fix TypeScript errors: - Use correct MediaStatus properties (playerState vs isPaused/isBuffering) - Use getPlaystateApi from Jellyfin SDK - Use setStreamVolume for RemoteMediaClient - Fix calculateEndingTime signature - Fix segment auto-skip to use proper settings (skipIntro, skipOutro, etc) - Remove unused imports - Update ChromecastSettingsMenu to use unified types from casting/types.ts	2026-02-01 16:18:25 +01:00
Uruk	dc9750d7fc	feat(casting): unify Chromecast and AirPlay into single casting interface BREAKING CHANGE: Merged separate Chromecast and AirPlay implementations into unified casting system - Created unified casting types and helpers (utils/casting/) - Built useCasting hook that manages both protocols - Single CastingMiniPlayer component works with both Chromecast and AirPlay - Single casting-player modal for full-screen controls - Protocol-aware UI: Red for Chromecast, Blue for AirPlay - Shows device type icon (TV for Chromecast, Apple logo for AirPlay) - Detects active protocol automatically - Previous separate implementations (ChromecastMiniPlayer, AirPlayMiniPlayer) superseded Benefits: - Better UX: One cast button shows all available devices - Cleaner architecture: Protocol differences abstracted - Easier maintenance: Single UI codebase - Protocol-specific logic isolated in adapters	2026-02-01 16:18:25 +01:00
Uruk	49c4f2d7ad	feat(airplay): add complete AirPlay support for iOS - Created AirPlay utilities (options, helpers) - Built useAirPlayPlayer hook for state management - Created AirPlayMiniPlayer component (bottom bar when AirPlaying) - Built full AirPlay player modal with gesture controls - Integrated AirPlay mini player into app layout - iOS-only feature using native AVFoundation/ExpoAvRoutePickerView - Apple-themed UI with blue accents (#007AFF) - Supports swipe-down to dismiss - Shows device name, progress, and playback controls	2026-02-01 16:18:24 +01:00
Uruk	519b2aa72f	feat(chromecast): add modal components and integrate autoskip API	2026-02-01 16:18:24 +01:00
Uruk	4a2d365d31	feat(chromecast): integrate autoskip segments into chromecast player - Merge autoskip branch with segment detection - Update useChromecastSegments to use real segment API - Support intro, credits, recap, commercial, and preview segments - Add auto-skip support based on user settings - Ready for full testing	2026-02-01 16:18:23 +01:00
Uruk	a65ac939cc	refactor: optimize segment handling with useMemo and improve skip function fallback	2026-02-01 16:18:23 +01:00
Uruk	0ce6266c02	feat: add skip credit button text localization to BottomControls and Controls	2026-02-01 16:18:22 +01:00
Uruk	34f7eea76d	refactor: remove unused Segment interface from MediaTimeSegment	2026-02-01 16:18:21 +01:00
Uruk	78a132268e	fix: update dependencies in skipSegment callback for accurate state tracking	2026-02-01 16:18:21 +01:00
Uruk	aaca343327	fix: handle null settings in useSkipOptions for safer access	2026-02-01 16:18:20 +01:00
Uruk	25e20fe972	feat: add timeout management for playback to prevent race conditions	2026-02-01 16:18:20 +01:00
Uruk	61d322146a	fix: correct order of segment skip options in settings	2026-02-01 16:18:19 +01:00
Uruk	2c1a2a9583	refactor: move player translations to common section Relocates player-specific translation keys from the "player" namespace to the "common" namespace to improve reusability across different components. All player-related strings (error messages, playback controls, download prompts) are now accessible as common translations, enabling their use throughout the application without namespace-specific imports.	2026-02-01 16:17:10 +01:00
Uruk	441ede0641	feat: add i18n support for skip button text - Add player.skip_* translation keys for all 5 segment types - Enable proper localization of skip button text - Addresses GitHub Copilot review comment	2026-02-01 16:17:09 +01:00
Uruk	27e1dce1ca	refactor: address GitHub Copilot review comments - Remove unnecessary currentSegment from skipSegment dependency array - Remove redundant wrappedSeek wrapper (ref guard prevents issues) - Document 200ms setTimeout delay for seek operations - Improve code clarity and reduce unnecessary re-renders	2026-02-01 16:17:09 +01:00
Uruk	5f2d183459	refactor: apply CodeRabbit suggestions for segment skip feature - Add missing segment types (recap, commercial, preview) to JobStatus - Consolidate duplicate useMemo blocks with factory function - Improve code maintainability and consistency	2026-02-01 16:17:08 +01:00
Uruk	1b66541e2f	feat: add comprehensive segment skip with all 5 types and settings submenu - Add SegmentSkipMode type ('none', 'ask', 'auto') in settings.ts - Create 5 segment skip settings: skipIntro, skipOutro, skipRecap, skipCommercial, skipPreview - Update segments.ts to fetch all 5 segment types from Jellyfin MediaSegments API (10.11+) - Create unified useSegmentSkipper hook supporting all segment types with 3 modes - Update video player Controls.tsx with priority system (Commercial > Recap > Intro > Preview > Outro) - Add dynamic skip button text in BottomControls.tsx - Create dedicated settings submenu at settings/segment-skip/page.tsx - Simplify PlaybackControlsSettings.tsx with navigation to submenu - Extend DownloadedItem interface with all segment types for offline support - Add 13+ translation keys for segment skip UI	2026-02-01 16:17:08 +01:00
Uruk	e98e075572	fix(chromecast): resolve TypeScript errors and improve type safety - Fix deviceName property to use friendlyName - Update disconnect to use stop() instead of endSession() - Fix null handling in getPosterUrl and useTrickplay - Remove unused variables and imports - Add proper null checks in segment skipping - Disable auto-skip until settings are available	2026-02-01 16:17:07 +01:00
Uruk	c234755134	feat(chromecast): add new player UI with mini player, hooks, and utilities - Create ChromecastMiniPlayer component (bottom bar navigation) - Create chromecast-player modal route with full UI - Add useChromecastPlayer hook (playback controls & state) - Add useChromecastSegments hook (intro/credits/segments) - Add chromecast options (constants & config) - Add chromecast helpers (time formatting, quality checks) - Implement swipe-down gesture to dismiss - Add Netflix-style buffering indicator - Add progress tracking with trickplay support - Add next episode countdown - Ready for segments integration from autoskip branch	2026-02-01 16:17:06 +01:00
Uruk	86157c045c	fix: add Chromecast video progress tracking	2026-02-01 16:17:06 +01:00