feat: implement default quality setting

apps/expo/src/app/(tabs)/settings.tsx

@@ -91,7 +91,7 @@ export default function SettingsScreen() {
   };
 
   const clearCacheDirectory = async () => {
-    const cacheDirectory = FileSystem.cacheDirectory + "movie-web";
+    const cacheDirectory = `${FileSystem.cacheDirectory}movie-web`;
     if (!cacheDirectory) return;
 
     try {

apps/expo/src/components/player/DownloadButton.tsx

@@ -1,7 +1,7 @@
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useTheme } from "tamagui";
 
-import { findHighestQuality } from "@movie-web/provider-utils";
+import { findQuality } from "@movie-web/provider-utils";
 
 import { useDownloadManager } from "~/hooks/useDownloadManager";
 import { convertMetaToScrapeMedia } from "~/lib/meta";
@@ -21,7 +21,7 @@ export const DownloadButton = () => {
   let url: string | undefined | null = null;
 
   if (stream?.type === "file") {
-    const highestQuality = findHighestQuality(stream);
+    const highestQuality = findQuality(stream);
     url = highestQuality ? stream.qualities[highestQuality]?.url : null;
   } else if (stream?.type === "hls") {
     url = stream.playlist;

apps/expo/src/components/player/ScraperProcess.tsx

@@ -4,19 +4,14 @@ import { ScrollView } from "react-native-gesture-handler";
 import { useRouter } from "expo-router";
 import { View } from "tamagui";
 
-import type {
-  HlsBasedStream,
-  RunOutput,
-  ScrapeMedia,
-} from "@movie-web/provider-utils";
+import type { RunOutput, ScrapeMedia } from "@movie-web/provider-utils";
 import {
-  constructFullUrl,
   extractTracksFromHLS,
-  findHighestQuality,
+  filterAudioTracks,
+  findQuality,
 } from "@movie-web/provider-utils";
 
 import type { ItemData } from "../item/item";
-import type { AudioTrack } from "./AudioTrackSelector";
 import type { PlayerMeta } from "~/stores/player/slices/video";
 import { useMeta } from "~/hooks/player/useMeta";
 import { useScrape } from "~/hooks/player/useSourceScrape";
@@ -76,9 +71,9 @@ export const ScraperProcess = ({
       if (!streamResult) return router.back();
       if (download) {
         if (streamResult.stream.type === "file") {
-          const highestQuality = findHighestQuality(streamResult.stream);
-          const url = highestQuality
-            ? streamResult.stream.qualities[highestQuality]?.url
+          const quality = findQuality(streamResult.stream);
+          const url = quality
+            ? streamResult.stream.qualities[quality]?.url
             : null;
           if (!url) return;
           startDownload(url, "mp4", scrapeMedia).catch(console.error);
@@ -89,6 +84,7 @@ export const ScraperProcess = ({
         }
         return router.back();
       }
+
       setStream(streamResult.stream);
 
       if (streamResult.stream.type === "hls") {
@@ -103,28 +99,9 @@ export const ScraperProcess = ({
         if (tracks) setHlsTracks(tracks);
 
         if (tracks?.audio.length) {
-          const audioTracks: AudioTrack[] = tracks.audio.map((track) => ({
-            uri: constructFullUrl(
-              (streamResult?.stream as HlsBasedStream).playlist,
-              track.uri,
-            ),
-            name: track.properties[0]?.attributes.name?.toString() ?? "Unknown",
-            language:
-              track.properties[0]?.attributes.language?.toString() ?? "Unknown",
-            active: Boolean(track.properties[0]?.attributes.default) ?? false,
-          }));
-
-          const uniqueTracks = new Set(audioTracks.map((t) => t.language));
-
-          const filteredAudioTracks = audioTracks.filter((track) => {
-            if (uniqueTracks.has(track.language)) {
-              uniqueTracks.delete(track.language);
-              return true;
-            }
-            return false;
-          });
-
-          setAudioTracks(filteredAudioTracks);
+          setAudioTracks(
+            filterAudioTracks(tracks, streamResult.stream.playlist),
+          );
         }
       }
       setPlayerStatus(PlayerStatus.READY);

apps/expo/src/components/player/VideoPlayer.tsx

@@ -12,12 +12,13 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ResizeMode, Video } from "expo-av";
 import * as Haptics from "expo-haptics";
 import * as NavigationBar from "expo-navigation-bar";
+import * as Network from "expo-network";
 import { useRouter } from "expo-router";
 import * as StatusBar from "expo-status-bar";
 import { Feather } from "@expo/vector-icons";
 import { Spinner, useTheme, View } from "tamagui";
 
-import { findHighestQuality } from "@movie-web/provider-utils";
+import { findHLSQuality, findQuality } from "@movie-web/provider-utils";
 
 import { useAudioTrack } from "~/hooks/player/useAudioTrack";
 import { useBrightness } from "~/hooks/player/useBrightness";
@@ -32,6 +33,8 @@ import {
 import { useAudioTrackStore } from "~/stores/audio";
 import { usePlayerStore } from "~/stores/player/store";
 import {
+  DefaultQuality,
+  useNetworkSettingsStore,
   usePlayerSettingsStore,
   useWatchHistoryStore,
 } from "~/stores/settings";
@@ -76,6 +79,8 @@ export const VideoPlayer = () => {
   const { gestureControls, autoPlay } = usePlayerSettingsStore();
   const { updateWatchHistory, removeFromWatchHistory, getWatchHistoryItem } =
     useWatchHistoryStore();
+  const { wifiDefaultQuality, mobileDataDefaultQuality } =
+    useNetworkSettingsStore();
 
   const updateResizeMode = (newMode: ResizeMode) => {
     setResizeMode(newMode);
@@ -158,15 +163,22 @@ export const VideoPlayer = () => {
       }
       setIsLoading(true);
 
+      const { type: networkType } = await Network.getNetworkStateAsync();
+      const defaultQuality =
+        networkType === Network.NetworkStateType.WIFI
+          ? wifiDefaultQuality
+          : mobileDataDefaultQuality;
+      const highest = defaultQuality === DefaultQuality.Highest;
+
       let url = null;
 
       if (stream.type === "hls") {
-        url = stream.playlist;
+        url = await findHLSQuality(stream.playlist, stream.headers, highest);
       }
 
       if (stream.type === "file") {
-        const highestQuality = findHighestQuality(stream);
-        url = highestQuality ? stream.qualities[highestQuality]?.url : null;
+        const chosenQuality = findQuality(stream, highest);
+        url = chosenQuality ? stream.qualities[chosenQuality]?.url : null;
       }
 
       if (!url) {
@@ -219,6 +231,8 @@ export const VideoPlayer = () => {
     updateWatchHistory,
     videoRef?.props.positionMillis,
     videoSrc?.uri,
+    wifiDefaultQuality,
+    mobileDataDefaultQuality,
   ]);
 
   const onVideoLoadStart = () => {

apps/expo/src/hooks/useDownloadManager.tsx

@@ -184,11 +184,11 @@ export const useDownloadManager = () => {
       lastTimestamp = currentTime;
     };
 
-    const fileUri =
-      FileSystem.cacheDirectory + "movie-web"
-        ? FileSystem.cacheDirectory + "movie-web" + url.split("/").pop()
-        : null;
-    if (!fileUri) {
+    const fileUri = `${FileSystem.cacheDirectory}movie-web${url.split("/").pop()}`;
+    if (
+      !(await FileSystem.getInfoAsync(`${FileSystem.cacheDirectory}movie-web`))
+        .exists
+    ) {
       console.error("Cache directory is unavailable");
       return;
     }
@@ -238,7 +238,7 @@ export const useDownloadManager = () => {
     const totalSegments = segments.length;
     let segmentsDownloaded = 0;
 
-    const segmentDir = FileSystem.cacheDirectory + "movie-web/segments/";
+    const segmentDir = `${FileSystem.cacheDirectory}movie-web/segments/`;
     await ensureDirExists(segmentDir);
 
     const updateProgress = () => {

apps/expo/src/stores/settings/index.ts

@@ -223,13 +223,18 @@ export const useWatchHistoryStore = create<
   ),
 );
 
+export enum DefaultQuality {
+  Lowest = "Lowest",
+  Highest = "Highest",
+}
+
 interface NetworkSettingsStoreState {
   allowMobileData: boolean;
   setAllowMobileData: (enabled: boolean) => void;
-  wifiDefaultQuality: string;
-  setWifiDefaultQuality: (quality: string) => void;
-  mobileDataDefaultQuality: string;
-  setMobileDataDefaultQuality: (quality: string) => void;
+  wifiDefaultQuality: DefaultQuality;
+  setWifiDefaultQuality: (quality: DefaultQuality) => void;
+  mobileDataDefaultQuality: DefaultQuality;
+  setMobileDataDefaultQuality: (quality: DefaultQuality) => void;
 }
 
 export const useNetworkSettingsStore = create<
@@ -240,9 +245,9 @@ export const useNetworkSettingsStore = create<
     (set) => ({
       allowMobileData: false,
       setAllowMobileData: (enabled) => set({ allowMobileData: enabled }),
-      wifiDefaultQuality: "Highest",
+      wifiDefaultQuality: DefaultQuality.Highest,
       setWifiDefaultQuality: (quality) => set({ wifiDefaultQuality: quality }),
-      mobileDataDefaultQuality: "Lowest",
+      mobileDataDefaultQuality: DefaultQuality.Lowest,
       setMobileDataDefaultQuality: (quality) =>
         set({ mobileDataDefaultQuality: quality }),
     }),

packages/provider-utils/src/util.ts

@@ -2,7 +2,8 @@ import type { AppendToResponse, MovieDetails, TvShowDetails } from "tmdb-ts";
 
 import type { ScrapeMedia } from "@movie-web/providers";
 
-import { providers } from "./video";
+import type { HLSTracks } from "./video";
+import { constructFullUrl, providers } from "./video";
 
 export function getMetaData() {
   return [...providers.listSources(), ...providers.listEmbeds()];
@@ -59,3 +60,31 @@ export function transformSearchResultToScrapeMedia<T extends "tv" | "movie">(
 
   throw new Error("Invalid type parameter");
 }
+
+interface AudioTrack {
+  uri: string;
+  name: string;
+  language: string;
+  active?: boolean;
+}
+
+export function filterAudioTracks(tracks: HLSTracks, playlist: string) {
+  const audioTracks: AudioTrack[] = tracks.audio.map((track) => ({
+    uri: constructFullUrl(playlist, track.uri),
+    name: track.properties[0]?.attributes.name?.toString() ?? "Unknown",
+    language: track.properties[0]?.attributes.language?.toString() ?? "Unknown",
+    active: Boolean(track.properties[0]?.attributes.default) ?? false,
+  }));
+
+  const uniqueTracks = new Set(audioTracks.map((t) => t.language));
+
+  const filteredAudioTracks = audioTracks.filter((track) => {
+    if (uniqueTracks.has(track.language)) {
+      uniqueTracks.delete(track.language);
+      return true;
+    }
+    return false;
+  });
+
+  return filteredAudioTracks;
+}

packages/provider-utils/src/video.ts

@@ -149,8 +149,9 @@ export async function getVideoStreamFromEmbed({
   }
 }
 
-export function findHighestQuality(
+export function findQuality(
   stream: FileBasedStream,
+  highest = true,
 ): Qualities | undefined {
   const qualityOrder: Qualities[] = [
     "4k",
@@ -160,6 +161,9 @@ export function findHighestQuality(
     "360",
     "unknown",
   ];
+  if (!highest) {
+    qualityOrder.reverse();
+  }
   for (const quality of qualityOrder) {
     if (stream.qualities[quality]) {
       return quality;
@@ -193,9 +197,10 @@ export async function extractTracksFromHLS(
   }
 }
 
-export async function extractSegmentsFromHLS(
+export async function findHLSQuality(
   playlistUrl: string,
-  headers: Record<string, string>,
+  headers?: Record<string, string>,
+  highest = true,
 ) {
   try {
     const response = await fetch(playlistUrl, { headers }).then((res) =>
@@ -220,17 +225,29 @@ export async function extractSegmentsFromHLS(
         return widthB * heightB - widthA * heightA;
       });
 
-    const highestQuality = sortedStreams[0];
-    if (!highestQuality) return null;
+    const chosenQuality = sortedStreams[highest ? 0 : sortedStreams.length - 1];
+    if (!chosenQuality) return null;
 
-    const highestQualityUri = constructFullUrl(playlistUrl, highestQuality.uri);
-    const highestQualityResponse = await fetch(highestQualityUri, {
-      headers,
-    }).then((res) => res.text());
-    const highestQualityPlaylist = hls.parse(highestQualityResponse);
+    return chosenQuality.uri;
+  } catch (e) {
+    return null;
+  }
+}
 
-    return highestQualityPlaylist.segments.map((segment) =>
-      constructFullUrl(highestQualityUri, segment.uri),
+export async function extractSegmentsFromHLS(
+  playlistUrl: string,
+  headers: Record<string, string>,
+) {
+  try {
+    const highestQualityUrl = await findHLSQuality(playlistUrl, headers);
+    if (!highestQualityUrl) return null;
+    const response = await fetch(highestQualityUrl, { headers }).then((res) =>
+      res.text(),
+    );
+    const playlist = hls.parse(response);
+
+    return playlist.segments.map((segment) =>
+      constructFullUrl(highestQualityUrl, segment.uri),
     );
   } catch (e) {
     return null;

tooling/eslint/base.js

@@ -32,6 +32,8 @@ const config = {
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unsafe-argument": "off",
     "@typescript-eslint/no-unsafe-enum-comparison": "off",
+    "@typescript-eslint/no-useless-template-literals": "error",
+    "prefer-template": "error",
   },
   ignorePatterns: [
     "**/*.config.js",