wip

app/(auth)/items/[id]/page.tsx

@@ -46,6 +46,8 @@ const page: React.FC = () => {
     value: undefined,
   });
 
+  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(0);
+
   const { data: item, isLoading: l1 } = useQuery({
     queryKey: ["item", id],
     queryFn: async () =>
@@ -224,7 +226,11 @@ const page: React.FC = () => {
             onChange={(val) => setMaxBitrate(val)}
             selected={maxBitrate}
           />
-          <AudioTrackSelector item={item} onChange={() => {}} selected={null} />
+          <AudioTrackSelector
+            item={item}
+            onChange={setSelectedAudioStream}
+            selected={selectedAudioStream}
+          />
         </View>
         <PlayButton item={item} chromecastReady={false} onPress={onPressPlay} />
       </View>

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>

utils/textTools.ts

@@ -0,0 +1,7 @@
+/*
+ * Truncate a text longer than a certain length
+ */
+export const tc = (text: string | null | undefined, length: number = 20) => {
+  if (!text) return "";
+  return text.length > length ? text.substr(0, length) + "..." : text;
+};