wip

components/AudioTrackSelector.tsx

@@ -5,6 +5,7 @@ import { atom, useAtom } from "jotai";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useEffect, useMemo } from "react";
 import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
+import { tc } from "@/utils/textTools";
 
 interface Props extends React.ComponentProps<typeof View> {
   item: BaseItemDto;
@@ -18,10 +19,6 @@ export const AudioTrackSelector: React.FC<Props> = ({
   selected,
   ...props
 }) => {
-  console.log(
-    item.MediaSources?.[0].MediaStreams?.filter((x) => x.Type === "Audio"),
-  );
-
   const audioStreams = useMemo(
     () =>
       item.MediaSources?.[0].MediaStreams?.filter((x) => x.Type === "Audio"),
@@ -33,15 +30,20 @@ export const AudioTrackSelector: React.FC<Props> = ({
     [audioStreams, selected],
   );
 
+  useEffect(() => {
+    console.log(audioStreams, selected);
+  }, [audioStreams, selected]);
   return (
     <View className="flex flex-row items-center justify-between" {...props}>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <View className="flex flex-col mb-2">
-            <Text className="opacity-50 mb-1 text-xs">Bitrate</Text>
+            <Text className="opacity-50 mb-1 text-xs">Audio streams</Text>
             <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>{selectedAudioSteam?.DisplayTitle}</Text>
+              <TouchableOpacity className="bg-neutral-900 max-w-32 h-12 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                <Text className="">
+                  {tc(selectedAudioSteam?.DisplayTitle, 13)}
+                </Text>
               </TouchableOpacity>
             </View>
           </View>
@@ -55,7 +57,7 @@ export const AudioTrackSelector: React.FC<Props> = ({
           collisionPadding={8}
           sideOffset={8}
         >
-          <DropdownMenu.Label>Bitrates</DropdownMenu.Label>
+          <DropdownMenu.Label>Audio streams</DropdownMenu.Label>
           {audioStreams?.map((audio, index: number) => (
             <DropdownMenu.Item
               key={index.toString()}

components/BitrateSelector.tsx

@@ -44,7 +44,7 @@ export const BitrateSelector: React.FC<Props> = ({
           <View className="flex flex-col mb-2">
             <Text className="opacity-50 mb-1 text-xs">Bitrate</Text>
             <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">
+              <TouchableOpacity className="bg-neutral-900 h-12 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
                 <Text>
                   {BITRATES.find((b) => b.value === selected.value)?.key}
                 </Text>