chore: switch to released yti.js v13 version and some minor fixes inc…

…luding new watch playing info for phone plays (#37)
Duell10111 · Jan 25, 2025 · 25990a3 · 25990a3
1 parent d3ed9c5
commit 25990a3
Show file tree

Hide file tree

Showing 76 changed files with 1,375 additions and 2,376 deletions.
diff --git a/App.tsx b/App.tsx
@@ -43,9 +43,9 @@ const App = () => {
             <AppDataContextProvider>
               <YoutubeContextProvider>
                 <AccountContextProvider>
-                  <DownloaderContext>
-                    <PlaylistManagerContext>
-                      <MusicPlayerContext>
+                  <MusicPlayerContext>
+                    <DownloaderContext>
+                      <PlaylistManagerContext>
                         <StatusBar
                           // TODO: Currently only dark-mode exists
                           barStyle={
@@ -56,9 +56,9 @@ const App = () => {
                           <Navigation />
                         </VideoProvider>
                         <FlashMessage position={"top"} />
-                      </MusicPlayerContext>
-                    </PlaylistManagerContext>
-                  </DownloaderContext>
+                      </PlaylistManagerContext>
+                    </DownloaderContext>
+                  </MusicPlayerContext>
                 </AccountContextProvider>
               </YoutubeContextProvider>
             </AppDataContextProvider>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,25 +17,25 @@
     "drizzle-orm": "0.38.1",
     "event-target-polyfill": "0.0.3",
     "events": "3.3.0",
-    "expo": "~52.0.20",
-    "expo-av": "~15.0.1",
-    "expo-build-properties": "~0.13.1",
-    "expo-file-system": "~18.0.5",
-    "expo-image": "~2.0.3",
-    "expo-linking": "~7.0.3",
-    "expo-screen-orientation": "~8.0.2",
-    "expo-sensors": "~14.0.1",
-    "expo-splash-screen": "~0.29.18",
-    "expo-sqlite": "~15.0.5",
-    "expo-status-bar": "~2.0.0",
-    "expo-system-ui": "~4.0.6",
-    "expo-watch-connectivity": "0.1.1",
+    "expo": "~52.0.26",
+    "expo-av": "~15.0.2",
+    "expo-build-properties": "~0.13.2",
+    "expo-file-system": "~18.0.7",
+    "expo-image": "~2.0.4",
+    "expo-linking": "~7.0.4",
+    "expo-screen-orientation": "~8.0.4",
+    "expo-sensors": "~14.0.2",
+    "expo-splash-screen": "~0.29.21",
+    "expo-sqlite": "~15.0.6",
+    "expo-status-bar": "~2.0.1",
+    "expo-system-ui": "~4.0.7",
+    "expo-watch-connectivity": "0.1.6",
     "fast-text-encoding": "1.0.6",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "npm:react-native-tvos@^0.76.5-0",
+    "react-native": "npm:react-native-tvos@^0.76.6-0",
     "react-native-awesome-slider": "2.9.0",
     "react-native-device-info": "14.0.2",
     "react-native-flash-message": "0.4.2",
@@ -60,7 +60,7 @@
     "rn-native-search-bar": "1.0.0-beta.13",
     "stream-browserify": "^3.0.0",
     "web-streams-polyfill": "3.3.3",
-    "youtubei.js": "github:Duell10111/YouTube.js#playlist-like"
+    "youtubei.js": "13.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/src/components/VideoComponent.tsx b/src/components/VideoComponent.tsx
@@ -62,9 +62,9 @@ export default function VideoComponent({
 
   useEffect(() => {
     if (fullscreen) {
-      playerRef.current.presentFullscreenPlayer();
+      playerRef.current?.presentFullscreenPlayer();
     } else {
-      playerRef.current.dismissFullscreenPlayer();
+      playerRef.current?.dismissFullscreenPlayer();
     }
   }, [fullscreen]);
 
@@ -87,6 +87,7 @@ export default function VideoComponent({
       <ActivityIndicator style={styles.activityIndicator} size={"large"} />
       <Video
         key={videoURL}
+        // @ts-ignore
         ref={playerRef}
         source={{
           // uri: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",

diff --git a/src/components/channel/phone/Channel.tsx b/src/components/channel/phone/Channel.tsx
@@ -11,7 +11,7 @@ export function Channel({channel}: Props) {
   return (
     <>
       <ChannelHeader
-        channelName={channel.title}
+        channelName={channel.title ?? "Unknown Channel title"}
         imgURL={channel.thumbnail.url}
       />
       <ChannelContext channel={channel}>

diff --git a/src/components/corner-video/VideoProvider.tsx b/src/components/corner-video/VideoProvider.tsx
@@ -32,6 +32,7 @@ export const VideoProvider = (props: VideoProviderProps) => {
       left: 0,
     },
     videoProps: {
+      // @ts-ignore
       source: {uri: ""},
     },
   });
@@ -50,6 +51,7 @@ export const VideoProvider = (props: VideoProviderProps) => {
     setPositions(_pos);
     setCornerProps({
       cornerProps: _cornerProps.cornerProps,
+      // @ts-ignore
       videoProps: {source: {uri: _videoUri}},
     });
     setCurrentTime(_currentTime);

diff --git a/src/components/corner-video/components/CornerVideo.tsx b/src/components/corner-video/components/CornerVideo.tsx
@@ -8,7 +8,6 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import {Measure} from "react-native-corner-video";
 import {Gesture, GestureDetector} from "react-native-gesture-handler";
 import Animated, {
   useAnimatedStyle,
@@ -19,7 +18,7 @@ import Video, {VideoRef} from "react-native-video";
 
 import {handler} from "../handler";
 
-import {CornerVideoProps} from "@/components/corner-video/types";
+import {CornerVideoProps, Measure} from "@/components/corner-video/types";
 
 interface Props {
   currentTime: number;
@@ -153,12 +152,13 @@ const CornerVideo = ({currentTime, props, positions, onClose}: Props) => {
         ]}>
         <View style={styles.videoContainer}>
           <Video
+            // @ts-ignore Ignore Mutable Ref type issue
             ref={ref}
             style={styles.videoPlayer}
             resizeMode={"cover"}
             onReadyForDisplay={() => {
               setLoaded(true);
-              ref.current.seek(currentTime);
+              ref.current?.seek(currentTime);
             }}
             source={{
               // @ts-ignore
@@ -195,8 +195,8 @@ const CornerVideo = ({currentTime, props, positions, onClose}: Props) => {
             size={24}
             color={"white"}
             onPress={() => {
-              ref.current.getCurrentPosition().then(position => {
-                ref.current.seek(position - 15);
+              ref.current?.getCurrentPosition().then(position => {
+                ref.current?.seek(position - 15);
               });
             }}
           />
@@ -211,8 +211,8 @@ const CornerVideo = ({currentTime, props, positions, onClose}: Props) => {
             size={24}
             color={"white"}
             onPress={() => {
-              ref.current.getCurrentPosition().then(position => {
-                ref.current.seek(position + 15);
+              ref.current?.getCurrentPosition().then(position => {
+                ref.current?.seek(position + 15);
               });
             }}
           />

diff --git a/src/components/corner-video/components/VideoWrapper.tsx b/src/components/corner-video/components/VideoWrapper.tsx
@@ -23,6 +23,7 @@ const VideoWrapper = React.forwardRef<VideoRef, CornerVideoProps>(
     const onProgress = (data: OnProgressData) => {
       currentTime = data.currentTime;
       props.videoProps.onVideoProgress &&
+        // @ts-ignore Ignore strict type issue
         props.videoProps.onVideoProgress(data);
     };
 
@@ -39,6 +40,7 @@ const VideoWrapper = React.forwardRef<VideoRef, CornerVideoProps>(
         ref={cornerRef}
         activeOpacity={1}
         onLongPress={onPress}>
+        {/* @ts-ignore */}
         <Video
           style={props.style}
           ref={ref}

diff --git a/src/components/downloader/ActiveUploadListItem.tsx b/src/components/downloader/ActiveUploadListItem.tsx
@@ -0,0 +1,52 @@
+import {StyleSheet, Text, View} from "react-native";
+import {ProgressBar} from "react-native-paper";
+
+import {useAppStyle} from "@/context/AppStyleContext";
+import {WatchFileTransferInfo} from "@/context/DownloaderContext";
+
+interface Props {
+  upload: WatchFileTransferInfo;
+}
+
+export default function ActiveUploadListItem({upload}: Props) {
+  const {style} = useAppStyle();
+
+  return (
+    <>
+      <View style={styles.container}>
+        <View style={styles.textContainer}>
+          <Text style={{color: style.textColor}}>
+            {upload?.uri.split("/").reverse()?.[1]}
+          </Text>
+          {/*<Text*/}
+          {/*  style={{*/}
+          {/*    color: style.textColor,*/}
+          {/*  }}>{`${author} - ${data.originalNode.type}`}</Text>*/}
+        </View>
+      </View>
+      <ProgressBar animatedValue={upload.process} color={"blue"} />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: 50,
+  },
+  imageStyle: {
+    borderRadius: 5,
+    width: 50,
+    height: 50,
+  },
+  textContainer: {
+    justifyContent: "center",
+    flex: 1,
+    marginLeft: 15,
+  },
+  titleStyle: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+});
diff --git a/src/components/library/LibrarySectionItem.tsx b/src/components/library/LibrarySectionItem.tsx
@@ -40,9 +40,10 @@ export function LibrarySectionItem({
   const onPress = useMemo(() => {
     if (section.playlistId) {
       return () => {
-        navigation.navigate("PlaylistScreen", {
-          playlistId: section.playlistId,
-        });
+        section.playlistId &&
+          navigation.navigate("PlaylistScreen", {
+            playlistId: section.playlistId,
+          });
       };
     } else if (section.type === "history") {
       return () => {

diff --git a/src/components/music/MusicPlaylistHeader.tsx b/src/components/music/MusicPlaylistHeader.tsx
@@ -6,7 +6,7 @@ import {useAppStyle} from "@/context/AppStyleContext";
 import {Thumbnail} from "@/extraction/Types";
 
 interface MusicPlaylistHeaderProps {
-  image: Thumbnail;
+  image?: Thumbnail;
   title: string;
   subtitle: string;
   saved?: boolean;
@@ -26,7 +26,7 @@ export function MusicPlaylistHeader({
 
   return (
     <View style={styles.metadataContainer}>
-      <Image style={styles.imageStyle} source={{uri: image.url}} />
+      <Image style={styles.imageStyle} source={{uri: image?.url}} />
       <Text style={[styles.titleText, {color: style.textColor}]}>{title}</Text>
       <Text
         style={[styles.subtitleText, {fontSize: 15, color: style.textColor}]}>

diff --git a/src/components/music/MusicSearchDetailsList.tsx b/src/components/music/MusicSearchDetailsList.tsx
@@ -9,7 +9,7 @@ import {ElementData, YTChipCloud, YTChipCloudChip} from "@/extraction/Types";
 
 interface MusicSearchDetailsListProps {
   data: ElementData[];
-  header: YTChipCloud;
+  header?: YTChipCloud;
   onFetchMore?: () => void;
   onClose?: () => void;
   onClick?: (chip: YTChipCloudChip) => void;
@@ -36,12 +36,14 @@ export function MusicSearchDetailsList({
         contentInsetAdjustmentBehavior={"automatic"}
         onEndReached={onFetchMore}
         ListHeaderComponent={
-          <MusicSearchFilterHeader
-            data={header}
-            closeable
-            onClose={onClose}
-            onClick={onClick}
-          />
+          header ? (
+            <MusicSearchFilterHeader
+              data={header}
+              closeable
+              onClose={onClose}
+              onClick={onClick}
+            />
+          ) : undefined
         }
       />
       <MusicBottomPlayerBar />

diff --git a/src/components/music/MusicSearchFilterHeader.tsx b/src/components/music/MusicSearchFilterHeader.tsx
@@ -39,7 +39,7 @@ export function MusicSearchFilterHeader({
             key={chip.text}
             text={chip.text}
             selected={chip.isSelected}
-            onPress={() => onClick(chip)}
+            onPress={() => onClick?.(chip)}
           />
         ))}
       </ScrollView>

diff --git a/src/components/music/elements/MusicPlaylistCard.tsx b/src/components/music/elements/MusicPlaylistCard.tsx
@@ -25,6 +25,7 @@ export function MusicPlaylistCard({data, style}: MusicPlaylistCardProps) {
     const routeName =
       data.type === "album" ? "MusicAlbumScreen" : "MusicPlaylistScreen";
     if (route.name === routeName) {
+      // @ts-ignore TODO: fix
       navigation.replace(routeName, {playlistId: data.id, albumId: data.id});
     } else {
       // @ts-ignore As Unknown Parameter is not used

diff --git a/src/components/music/horizontal/MusicHorizontalNRowShelf.tsx b/src/components/music/horizontal/MusicHorizontalNRowShelf.tsx
@@ -69,6 +69,7 @@ function NGrid({data, numRows, renderData}: NGridProps) {
     return (
       <View style={{rowGap: 2}}>
         {item.map((itemData, index) =>
+          // @ts-ignore
           renderData({item: itemData, index, separators: null}),
         )}
       </View>

diff --git a/src/components/playlists/PlaylistManagerCreatePanel.tsx b/src/components/playlists/PlaylistManagerCreatePanel.tsx
@@ -23,7 +23,7 @@ export function PlaylistManagerCreatePanel({
         style={styles.createButton}
         mode={"contained"}
         dark
-        onPress={() => onPlaylistCreate(name)}>
+        onPress={() => name && name.length > 0 && onPlaylistCreate(name)}>
         {"Create Playlist"}
       </Button>
     </View>

diff --git a/src/components/playlists/PlaylistManagerList.tsx b/src/components/playlists/PlaylistManagerList.tsx
@@ -1,4 +1,3 @@
-import {Button} from "@rneui/base";
 import React, {useCallback} from "react";
 import {FlatList, ListRenderItem, Text} from "react-native";
 
@@ -13,7 +12,7 @@ interface PlaylistManagerListProps {
 export function PlaylistManagerList({data, onPress}: PlaylistManagerListProps) {
   const renderItem = useCallback<ListRenderItem<ElementData>>(({item}) => {
     return (
-      <PlaylistManagerListItem data={item} onPress={() => onPress(item)} />
+      <PlaylistManagerListItem data={item} onPress={() => onPress?.(item)} />
     );
   }, []);
 

diff --git a/src/components/playlists/phone/PlaylistHeader.tsx b/src/components/playlists/phone/PlaylistHeader.tsx
@@ -24,7 +24,7 @@ export function PlaylistHeader({
     <View style={styles.container}>
       <Image
         style={styles.imageStyle}
-        source={{uri: playlist.thumbnailImage.url}}
+        source={{uri: playlist.thumbnailImage?.url}}
       />
       <View style={styles.titleContainer}>
         <Text style={[styles.titleStyle, {color: appStyle.textColor}]}>

diff --git a/src/components/playlists/tv/PlaylistHeader.tsx b/src/components/playlists/tv/PlaylistHeader.tsx
@@ -26,7 +26,7 @@ export function PlaylistHeader({
       </Text>
       <View style={styles.subtitleContainer}>
         <Text style={[styles.subtitleStyle, {color: style.textColor}]}>
-          {[playlist.author.name, `${playlist.items.length} Videos`].join(
+          {[playlist.author?.name, `${playlist.items.length} Videos`].join(
             " - ",
           )}
         </Text>
@@ -46,7 +46,7 @@ export function PlaylistHeader({
           iconName={saved ? "bookmark" : "bookmark-o"}
           iconType={"font-awesome"}
           text={`${saved ? "Remove" : "Save"} playlist`}
-          onPress={() => onSavePlaylist?.(saved)}
+          onPress={() => onSavePlaylist?.(!!saved)}
         />
       </View>
     </View>

diff --git a/src/components/segments/VideoCard.tsx b/src/components/segments/VideoCard.tsx
@@ -46,6 +46,7 @@ export default function VideoCard({style, ...data}: Props) {
     }
 
     if (data.music) {
+      // @ts-ignore
       setPlaylistViaEndpoint(data.navEndpoint);
       navigation.navigate("MusicPlayerScreen");
       return;