fix: fixing #1163 (#1167)

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

components/TrackSheet.tsx

@@ -33,12 +33,27 @@ export const TrackSheet: React.FC<Props> = ({
     () => streams?.find((x) => x.Index === selected),
     [streams, selected],
   );
+
+  const noneOption = useMemo(
+    () => ({ Index: -1, DisplayTitle: t("common.none") }),
+    [t],
+  );
+
+  // Creates a modified data array that includes a "None" option for subtitles
+  // We might want to possibly do this for other places, like audio?
+  const addNoneToSubtitles = useMemo(() => {
+    if (streamType === "Subtitle") {
+      const result = streams ? [noneOption, ...streams] : [noneOption];
+      return result;
+    }
+    return streams;
+  }, [streams, streamType, noneOption]);
   const [open, setOpen] = useState(false);
 
   if (isTv || (streams && streams.length === 0)) return null;
 
   return (
-    <View className='flex shrink' style={{ minWidth: 25 }} {...props}>
+    <View className='flex shrink' style={{ minWidth: 60 }} {...props}>
       <View className='flex flex-col'>
         <Text className='opacity-50 mb-1 text-xs'>{title}</Text>
         <TouchableOpacity
@@ -46,7 +61,9 @@ export const TrackSheet: React.FC<Props> = ({
           onPress={() => setOpen(true)}
         >
           <Text numberOfLines={1}>
-            {selectedSteam?.DisplayTitle || t("common.select", "Select")}
+            {selected === -1 && streamType === "Subtitle"
+              ? t("common.none")
+              : selectedSteam?.DisplayTitle || t("common.select", "Select")}
           </Text>
         </TouchableOpacity>
       </View>
@@ -54,8 +71,14 @@ export const TrackSheet: React.FC<Props> = ({
         open={open}
         setOpen={setOpen}
         title={title}
-        data={streams || []}
+        data={addNoneToSubtitles || []}
-        values={selectedSteam ? [selectedSteam] : []}
+        values={
+          selected === -1 && streamType === "Subtitle"
+            ? [{ Index: -1, DisplayTitle: t("common.none") }]
+            : selectedSteam
+              ? [selectedSteam]
+              : []
+        }
         multiple={false}
         searchFilter={(item, query) => {
           const label = (item as any).DisplayTitle || "";

components/filters/FilterSheet.tsx

@@ -109,11 +109,22 @@ export const FilterSheet = <T,>({
   // to implement efficient "load more" functionality
   useEffect(() => {
     if (!_data || _data.length === 0) return;
-    const tmp = new Set(data);
+
+    const newData = [...data];
+
     for (let i = offset; i < Math.min(_data.length, offset + LIMIT); i++) {
-      tmp.add(_data[i]);
+      const item = _data[i];
+      // Check if this item already exists in our data array
+      // some dups happened with re-renders during testing
+      const exists = newData.some((existingItem) =>
+        isEqual(existingItem, item),
+      );
+      if (!exists) {
+        newData.push(item);
+      }
     }
-    setData(Array.from(tmp));
+
+    setData(newData);
   }, [offset, _data]);
 
   useEffect(() => {
@@ -233,7 +244,7 @@ export const FilterSheet = <T,>({
           {data.length < (_data?.length || 0) && (
             <Button
               onPress={() => {
-                setOffset(offset + 100);
+                setOffset(offset + LIMIT);
               }}
             >
               Load more

translations/en.json

@@ -318,7 +318,8 @@
     "video": "Video",
     "audio": "Audio",
     "subtitle": "Subtitle",
-    "play": "Play"
+    "play": "Play",
+    "none": "None"
   },
   "search": {
     "search": "Search...",