chore: further fixes and improvements (Duell10111#7)

Add Loading screen and phone tablet adaptions and playlist lists support
MorningStarGG · Sep 8, 2023 · b66f8d2 · b66f8d2
1 parent 2424e5c
commit b66f8d2
Show file tree

Hide file tree

Showing 42 changed files with 1,309 additions and 293 deletions.
diff --git a/App.tsx b/App.tsx
@@ -20,6 +20,7 @@ import BackgroundWrapper from "./src/utils/BackgroundWrapper";
 import AppDataContextProvider from "./src/context/AppDataContext";
 import AccountContextProvider from "./src/context/AccountContext";
 import {SafeAreaProvider} from "react-native-safe-area-context";
+import {GestureHandlerRootView} from "react-native-gesture-handler";
 
 // Polyfill for youtube.js
 Object.assign(global, {
@@ -31,22 +32,24 @@ const App = () => {
   const isDarkMode = useColorScheme() === "dark";
 
   return (
-    <AppStyleProvider>
-      <BackgroundWrapper>
-        <AppDataContextProvider>
-          <YoutubeContextProvider>
-            <AccountContextProvider>
-              <StatusBar
-                barStyle={isDarkMode ? "light-content" : "dark-content"}
-              />
-              <SafeAreaProvider>
-                <Navigation />
-              </SafeAreaProvider>
-            </AccountContextProvider>
-          </YoutubeContextProvider>
-        </AppDataContextProvider>
-      </BackgroundWrapper>
-    </AppStyleProvider>
+    <GestureHandlerRootView style={{flex: 1}}>
+      <AppStyleProvider>
+        <BackgroundWrapper>
+          <AppDataContextProvider>
+            <YoutubeContextProvider>
+              <AccountContextProvider>
+                <StatusBar
+                  barStyle={isDarkMode ? "light-content" : "dark-content"}
+                />
+                <SafeAreaProvider>
+                  <Navigation />
+                </SafeAreaProvider>
+              </AccountContextProvider>
+            </YoutubeContextProvider>
+          </AppDataContextProvider>
+        </BackgroundWrapper>
+      </AppStyleProvider>
+    </GestureHandlerRootView>
   );
 };
 

diff --git a/assets/icon-512-maskable.png b/assets/icon-512-maskable.png
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -425,6 +425,8 @@ PODS:
     - React-jsi (= 0.71.12-0)
     - React-logger (= 0.71.12-0)
     - React-perflogger (= 0.71.12-0)
+  - RNCClipboard (1.11.2):
+    - React-Core
   - RNDeviceInfo (10.8.0):
     - React-Core
   - RNFastImage (8.6.3):
@@ -433,9 +435,9 @@ PODS:
     - SDWebImageWebPCoder (~> 0.8.4)
   - RNFS (2.20.0):
     - React-Core
-  - RNGestureHandler (2.9.0):
+  - RNGestureHandler (2.12.1):
     - React-Core
-  - RNReanimated (3.0.2):
+  - RNReanimated (3.4.2):
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
@@ -543,6 +545,7 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNFastImage (from `../node_modules/react-native-fast-image`)
   - RNFS (from `../node_modules/react-native-fs`)
@@ -653,6 +656,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCClipboard:
+    :path: "../node_modules/@react-native-clipboard/clipboard"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
   RNFastImage:
@@ -726,11 +731,12 @@ SPEC CHECKSUMS:
   React-RCTText: 73a8151c2fc1c6a2b5329ddd569d39051fede43f
   React-runtimeexecutor: b2df3ae123833935b4b57a3e8638227624800f41
   ReactCommon: ebabc58ce77fb38274c1659471d6d46549ab69db
+  RNCClipboard: 3f0451a8100393908bea5c5c5b16f96d45f30bfc
   RNDeviceInfo: 5795b418ed3451ebcaf39384e6cf51f60cb931c9
   RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
-  RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
-  RNReanimated: d62d813d08a29d33a275d44613e56bfc2396c465
+  RNGestureHandler: c0d04458598fcb26052494ae23dda8f8f5162b13
+  RNReanimated: a2f74e01d5087dc479719982799d262b2464b810
   RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
   RNSVG: 53c661b76829783cdaf9b7a57258f3d3b4c28315
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8

diff --git a/ios/reacttube.xcodeproj/project.pbxproj b/ios/reacttube.xcodeproj/project.pbxproj
@@ -795,6 +795,7 @@
 				SWIFT_OBJC_BRIDGING_HEADER = "reacttube-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -821,6 +822,7 @@
 				PRODUCT_NAME = reacttube;
 				SWIFT_OBJC_BRIDGING_HEADER = "reacttube-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;

diff --git a/package.json b/package.json
@@ -12,12 +12,14 @@
   },
   "dependencies": {
     "@craftzdog/react-native-buffer": "^6.0.5",
+    "@gorhom/bottom-sheet": "4.4.7",
+    "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/drawer": "^6.6.2",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
-    "@rneui/base": "^4.0.0-rc.7",
-    "@rneui/themed": "^4.0.0-rc.7",
+    "@rneui/base": "^4.0.0-rc.8",
+    "@rneui/themed": "^4.0.0-rc.8",
     "crypto-browserify": "^3.12.0",
     "event-target-polyfill": "^0.0.3",
     "events": "^3.3.0",
@@ -29,11 +31,12 @@
     "react-native-device-info": "^10.8.0",
     "react-native-fast-image": "^8.6.3",
     "react-native-fs": "^2.20.0",
-    "react-native-gesture-handler": "^2.9.0",
+    "react-native-gesture-handler": "2.12.1",
     "react-native-logs": "^5.0.1",
     "react-native-orientation-locker": "github:Duell10111/react-native-orientation-locker#fix-nativeeventemitter",
     "react-native-qrcode-svg": "^6.2.0",
-    "react-native-reanimated": "^3.0.2",
+    "react-native-reanimated": "3.4.2",
+    "react-native-reanimated-carousel": "^3.5.1",
     "react-native-redash": "^18.1.0",
     "react-native-safe-area-context": "^4.5.0",
     "react-native-screens": "^3.20.0",
@@ -45,7 +48,7 @@
     "react-native-vlc-media-player": "^1.0.60",
     "stream-browserify": "^3.0.0",
     "web-streams-polyfill": "^3.2.1",
-    "youtubei.js": "6.0.0"
+    "youtubei.js": "6.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/src/components/GridView.tsx b/src/components/GridView.tsx
@@ -1,13 +1,20 @@
 import React, {useCallback} from "react";
 import {Helpers} from "../utils/Youtube";
-import {FlatList, Platform, StyleProp, View, ViewStyle} from "react-native";
+import {
+  FlatList,
+  FlatListProps,
+  Platform,
+  StyleProp,
+  View,
+  ViewStyle,
+} from "react-native";
 import ShelfVideoSelectorProvider from "../context/ShelfVideoSelector";
 import VideoMenu from "./general/VideoMenu";
 import useGrid from "../hooks/home/useGrid";
 import PageSectionList from "./segments/PageSectionList";
 import VideoSegment from "./VideoSegment";
 
-interface Props {
+interface Props extends Omit<FlatListProps<any>, "renderItem" | "data"> {
   style?: StyleProp<ViewStyle>;
   shelfItem: Helpers.YTNode[];
   columns?: number;
@@ -21,6 +28,7 @@ export default function GridView({
   style,
   columns,
   onElementFocused,
+  ...props
 }: Props) {
   const sorted = useGrid(shelfItem, columns);
 
@@ -53,6 +61,7 @@ export default function GridView({
     <ShelfVideoSelectorProvider onElementFocused={onElementFocused}>
       <>
         <FlatList
+          {...props}
           style={style}
           data={sorted}
           renderItem={renderItem}

diff --git a/src/components/PageSegment.tsx b/src/components/PageSegment.tsx
@@ -9,7 +9,6 @@ interface Props {
 
 export default function PageSegment({segment}: Props) {
   if (!(segment instanceof Helpers.YTNode)) {
-    console.log("Title: ", segment.title);
     return <PageSectionList content={segment} headerText={segment.title} />;
   } else {
     console.error("Page Segment: OLD WAY!");

diff --git a/src/components/VideoComponent.tsx b/src/components/VideoComponent.tsx
@@ -24,6 +24,10 @@ interface Props {
     width: number;
     height: number;
   }) => void;
+  // Reels controls
+  paused?: boolean;
+  controls?: boolean;
+  repeat?: boolean;
 }
 
 export default function VideoComponent({
@@ -32,6 +36,9 @@ export default function VideoComponent({
   videoInfo,
   fullscreen,
   style,
+  paused,
+  controls,
+  repeat,
   ...callbacks
 }: Props) {
   // const player = useRef<Video>();
@@ -67,9 +74,10 @@ export default function VideoComponent({
         style={
           (style as any) ?? [styles.fullScreen, StyleSheet.absoluteFillObject]
         }
-        controls
-        paused={!isFocused}
+        controls={controls !== undefined ? controls : true}
+        paused={paused !== undefined ? paused : !isFocused}
         fullscreen={fullscreen ?? true}
+        repeat={repeat}
         resizeMode={"contain"}
         // @ts-ignore Own version
         chapters={parsedChapters}

diff --git a/src/components/VideoSegment.tsx b/src/components/VideoSegment.tsx
@@ -37,6 +37,23 @@ export default function VideoSegment({
           thumbnail={element.thumbnailImage}
           date={element.publishDate}
           livestream={element.livestream}
+          navEndpoint={element.navEndpoint}
+        />
+      );
+    } else if (element.type === "mix") {
+      return (
+        <VideoCard
+          style={style}
+          textStyle={textStyle}
+          videoId={element.id}
+          navEndpoint={element.navEndpoint}
+          title={element.title}
+          views={element.short_views}
+          duration={element.duration}
+          author={element.author}
+          thumbnail={element.thumbnailImage}
+          date={element.publishDate}
+          mix
         />
       );
     } else if (element.type === "playlist") {

diff --git a/src/components/general/VideoMenu.tsx b/src/components/general/VideoMenu.tsx
@@ -9,10 +9,6 @@ import useVideoElementData from "../../hooks/video/useVideoElementData";
 
 const Logger = LOGGER.extend("VIDEOMENU");
 
-interface Props {
-  selectedVideoId?: string;
-}
-
 // TODO: Add focus feedback
 
 export default function VideoMenu() {

diff --git a/src/components/segments/VideoCard.tsx b/src/components/segments/VideoCard.tsx
@@ -8,25 +8,28 @@ import VideoCardPhone from "./phone/VideoCardPhone";
 import {Author, Thumbnail} from "../../extraction/Types";
 import ReelCardPhone from "./phone/ReelCardPhone";
 import DeviceInfo from "react-native-device-info";
+import {YTNodes} from "youtubei.js";
 
 const LOGGER = Logger.extend("VIDEOCARD");
 
 interface Props {
   textStyle?: StyleProp<TextStyle>;
   style?: StyleProp<ViewStyle>;
   videoId: string;
+  navEndpoint?: YTNodes.NavigationEndpoint;
   title: string;
-  views: string;
+  views?: string;
   reel?: boolean;
   duration?: string;
   thumbnail?: Thumbnail;
   author?: Author;
   date?: string;
   disabled?: boolean;
   livestream?: boolean;
+  mix?: boolean;
 }
 
-export default function VideoCard({...data}: Props) {
+export default function VideoCard({style, ...data}: Props) {
   const navigation = useNavigation<NativeStackProp>();
   const route = useRoute<RootRouteProp>();
 
@@ -36,9 +39,14 @@ export default function VideoCard({...data}: Props) {
     }
     LOGGER.debug("State: ", navigation.getState());
     LOGGER.debug("Route name: ", route.name);
+    LOGGER.debug("Nav Endpoint: ", data.navEndpoint);
     if (route.name === "VideoScreen") {
       LOGGER.debug("Replacing Video Screen");
-      navigation.replace("VideoScreen", {videoId: data.videoId});
+      navigation.replace("VideoScreen", {
+        videoId: data.videoId,
+        navEndpoint: data.navEndpoint,
+        reel: data.reel,
+      });
     } else if (
       // @ts-ignore
       navigation.getState().routes.find(r => r.name === "VideoScreen")
@@ -51,7 +59,11 @@ export default function VideoCard({...data}: Props) {
           // @ts-ignore
           name: "VideoScreen",
           // @ts-ignore
-          params: {videoId: data.videoId},
+          params: {
+            videoId: data.videoId,
+            navEndpoint: data.navEndpoint,
+            reel: data.reel,
+          },
         });
 
         return CommonActions.reset({
@@ -61,7 +73,11 @@ export default function VideoCard({...data}: Props) {
         });
       });
     } else {
-      navigation.navigate("VideoScreen", {videoId: data.videoId});
+      navigation.navigate("VideoScreen", {
+        videoId: data.videoId,
+        navEndpoint: data.navEndpoint,
+        reel: data.reel,
+      });
     }
   };
 
@@ -83,7 +99,10 @@ export default function VideoCard({...data}: Props) {
     <VideoCardPhone
       {...data}
       onPress={onPress}
-      style={DeviceInfo.isTablet() ? {width: 375, padding: 10} : undefined}
+      style={[
+        style,
+        DeviceInfo.isTablet() ? {width: 375, padding: 10} : undefined,
+      ]}
       imageContainerStyle={
         DeviceInfo.isTablet() ? {borderRadius: 25} : undefined
       }

diff --git a/src/components/segments/phone/ReelCardPhone.tsx b/src/components/segments/phone/ReelCardPhone.tsx
@@ -18,7 +18,6 @@ interface Props {
   onPress?: () => void;
   videoId: string;
   title: string;
-  views: string;
   duration?: string;
   thumbnail?: Thumbnail;
   author?: Author;