wip

components/AudioTrackSelector.tsx

@@ -1,7 +1,7 @@
 import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
 import { useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "@/components/DropdownMenu";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 import { useTranslation } from "react-i18next";
 
@@ -39,7 +39,9 @@ export const AudioTrackSelector: React.FC<Props> = ({
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <View className="flex flex-col" {...props}>
-            <Text className="opacity-50 mb-1 text-xs">{t("item_card.audio")}</Text>
+            <Text className="opacity-50 mb-1 text-xs">
+              {t("item_card.audio")}
+            </Text>
             <TouchableOpacity className="bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
               <Text className="" numberOfLines={1}>
                 {selectedAudioSteam?.DisplayTitle}

components/BitrateSelector.tsx

@@ -1,5 +1,5 @@
 import { TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "@/components/DropdownMenu";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -77,7 +77,9 @@ export const BitrateSelector: React.FC<Props> = ({
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <View className="flex flex-col" {...props}>
-            <Text className="opacity-50 mb-1 text-xs">{t("item_card.quality")}</Text>
+            <Text className="opacity-50 mb-1 text-xs">
+              {t("item_card.quality")}
+            </Text>
             <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
               <Text style={{}} className="" numberOfLines={1}>
                 {BITRATES.find((b) => b.value === selected?.value)?.key}

components/DropdownMenu.ts

@@ -1 +0,0 @@
-export * from "zeego/dropdown-menu";

components/ItemContent.tsx

@@ -3,7 +3,8 @@ import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
 import { DownloadSingleItem } from "@/components/DownloadItem";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
-const PlayButton = !Platform.isTV ? require("@/components/PlayButton") : null;
+// const PlayButton = !Platform.isTV ? require("@/components/PlayButton") : null;
+import { PlayButton } from "@/components/PlayButton";
 import { PlayedStatus } from "@/components/PlayedStatus";
 import { SimilarItems } from "@/components/SimilarItems";
 import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
@@ -192,9 +193,10 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
           }
         >
           <View className="flex flex-col bg-transparent shrink">
+            {/* {!Platform.isTV && ( */}
             <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
               <ItemHeader item={item} className="mb-4" />
-              {item.Type !== "Program" && (
+              {item.Type !== "Program" && !Platform.isTV && (
                 <View className="flex flex-row items-center justify-start w-full h-16">
                   <BitrateSelector
                     className="mr-1"
@@ -249,6 +251,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                   />
                 </View>
               )}
+
               {!Platform.isTV && (
                 <PlayButton
                   className="grow"

components/MediaSourceSelector.tsx

@@ -4,7 +4,7 @@ import {
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "@/components/DropdownMenu";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 import { useTranslation } from "react-i18next";
 
@@ -61,7 +61,9 @@ export const MediaSourceSelector: React.FC<Props> = ({
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <View className="flex flex-col" {...props}>
-            <Text className="opacity-50 mb-1 text-xs">{t("item_card.video")}</Text>
+            <Text className="opacity-50 mb-1 text-xs">
+              {t("item_card.video")}
+            </Text>
             <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center">
               <Text numberOfLines={1}>{selectedName}</Text>
             </TouchableOpacity>

components/SubtitleTrackSelector.tsx

@@ -2,7 +2,7 @@ import { tc } from "@/utils/textTools";
 import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
 import { useMemo } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "@/components/DropdownMenu";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 import { SubtitleHelper } from "@/utils/SubtitleHelper";
 import { useTranslation } from "react-i18next";
@@ -51,7 +51,9 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <View className="flex flex-col " {...props}>
-            <Text className="opacity-50 mb-1 text-xs">{t("item_card.subtitles")}</Text>
+            <Text className="opacity-50 mb-1 text-xs">
+              {t("item_card.subtitles")}
+            </Text>
             <TouchableOpacity className="bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
               <Text className=" ">
                 {selectedSubtitleSteam

components/series/SeasonDropdown.tsx

@@ -1,7 +1,7 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useEffect, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "@/components/DropdownMenu";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { t } from "i18next";
 
@@ -92,7 +92,9 @@ export const SeasonDropdown: React.FC<Props> = ({
       <DropdownMenu.Trigger>
         <View className="flex flex-row">
           <TouchableOpacity className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-            <Text>{t("item_card.season")} {seasonIndex}</Text>
+            <Text>
+              {t("item_card.season")} {seasonIndex}
+            </Text>
           </TouchableOpacity>
         </View>
       </DropdownMenu.Trigger>

components/settings/AudioToggles.tsx

@@ -1,5 +1,5 @@
 import { TouchableOpacity, View, ViewProps } from "react-native";
-import * as DropdownMenu from "@/components/DropdownMenu";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { useMedia } from "./MediaContext";
 import { Switch } from "react-native-gesture-handler";
@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 import { Ionicons } from "@expo/vector-icons";
-import {useSettings} from "@/utils/atoms/settings";
+import { useSettings } from "@/utils/atoms/settings";
 
 interface Props extends ViewProps {}
 
@@ -47,7 +47,8 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
             <DropdownMenu.Trigger>
               <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3 ">
                 <Text className="mr-1 text-[#8E8D91]">
-                  {settings?.defaultAudioLanguage?.DisplayName || t("home.settings.audio.none")}
+                  {settings?.defaultAudioLanguage?.DisplayName ||
+                    t("home.settings.audio.none")}
                 </Text>
                 <Ionicons
                   name="chevron-expand-sharp"
@@ -65,7 +66,9 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
               collisionPadding={8}
               sideOffset={8}
             >
-              <DropdownMenu.Label>{t("home.settings.audio.language")}</DropdownMenu.Label>
+              <DropdownMenu.Label>
+                {t("home.settings.audio.language")}
+              </DropdownMenu.Label>
               <DropdownMenu.Item
                 key={"none-audio"}
                 onSelect={() => {
@@ -74,7 +77,9 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
                   });
                 }}
               >
-                <DropdownMenu.ItemTitle>{t("home.settings.audio.none")}</DropdownMenu.ItemTitle>
+                <DropdownMenu.ItemTitle>
+                  {t("home.settings.audio.none")}
+                </DropdownMenu.ItemTitle>
               </DropdownMenu.Item>
               {cultures?.map((l) => (
                 <DropdownMenu.Item

components/video-player/controls/dropdown/DropdownViewDirect.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { View, TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import * as DropdownMenu from "@/components/DropdownMenu";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";
 import { EmbeddedSubtitle, ExternalSubtitle } from "../types";

components/video-player/controls/dropdown/DropdownViewTranscoding.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { View, TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import * as DropdownMenu from "@/components/DropdownMenu";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";
 import { TranscodedSubtitle } from "../types";