feat: add alpha version of watchos variant of ReactTube and add YT Mu…

…sic sections to phone variant(alpha) (#29)
Duell10111 · Aug 19, 2024 · cff8418 · cff8418
1 parent 9f03411
commit cff8418
Show file tree

Hide file tree

Showing 110 changed files with 7,857 additions and 3,021 deletions.
diff --git a/.gitignore b/.gitignore
@@ -76,3 +76,6 @@ buck-out/
 /ios
 
 .expo
+
+# Local building
+fastlane
diff --git a/App.tsx b/App.tsx
@@ -7,23 +7,26 @@ import {StatusBar, useColorScheme} from "react-native";
 import FlashMessage from "react-native-flash-message";
 import {GestureHandlerRootView} from "react-native-gesture-handler";
 import {btoa, atob} from "react-native-quick-base64";
-
-// import "react-native/tvos-types.d";
 import {SafeAreaProvider} from "react-native-safe-area-context";
 
 import AccountContextProvider from "./src/context/AccountContext";
 import AppDataContextProvider from "./src/context/AppDataContext";
 import AppStyleProvider from "./src/context/AppStyleContext";
+import {DownloaderContext} from "./src/context/DownloaderContext";
+import {MusicPlayerContext} from "./src/context/MusicPlayerContext";
 import YoutubeContextProvider from "./src/context/YoutubeContext";
 import Navigation from "./src/navigation/Navigation";
 import BackgroundWrapper from "./src/utils/BackgroundWrapper";
+import {setupMusicPlayer} from "./src/utils/music/MusicInit";
 
 // Polyfill for youtube.js
 Object.assign(global, {
   btoa,
   atob,
 });
 
+setupMusicPlayer();
+
 const App = () => {
   const isDarkMode = useColorScheme() === "dark";
 
@@ -34,14 +37,18 @@ const App = () => {
           <AppDataContextProvider>
             <YoutubeContextProvider>
               <AccountContextProvider>
-                <StatusBar
-                  // TODO: Currently only dark-mode exists
-                  barStyle={isDarkMode ? "light-content" : "light-content"}
-                />
-                <SafeAreaProvider>
-                  <Navigation />
-                  <FlashMessage position={"top"} />
-                </SafeAreaProvider>
+                <DownloaderContext>
+                  <StatusBar
+                    // TODO: Currently only dark-mode exists
+                    barStyle={isDarkMode ? "light-content" : "light-content"}
+                  />
+                  <SafeAreaProvider>
+                    <MusicPlayerContext>
+                      <Navigation />
+                    </MusicPlayerContext>
+                    <FlashMessage position={"top"} />
+                  </SafeAreaProvider>
+                </DownloaderContext>
               </AccountContextProvider>
             </YoutubeContextProvider>
           </AppDataContextProvider>

diff --git a/app.json b/app.json
@@ -36,6 +36,26 @@
             "topShelfWide2x": "./assets/images/tv/app_store_icon_topshelf.png"
           }
         }
+      ],
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "pickFirst": [
+              "lib/arm64-v8a/libcrypto.so",
+              "lib/x86/libcrypto.so",
+              "lib/x86_64/libcrypto.so",
+              "lib/armeabi-v7a/libcrypto.so"
+            ]
+          }
+        }
+      ],
+      [
+        "@duell10111/apple-targets",
+        {
+          "appleTeamId": "XXXXXXXXXX",
+          "isTV": true
+        }
       ]
     ],
     "name": "reacttube",

diff --git a/babel.config.js b/babel.config.js
@@ -19,6 +19,11 @@ module.exports = function (api) {
           },
         },
       ],
+      ["inline-import", {extensions: [".sql"]}],
+      [
+        "@babel/plugin-syntax-import-attributes",
+        {deprecatedAssertSyntax: true},
+      ],
     ],
   };
 };
diff --git a/drizzle.config.ts b/drizzle.config.ts
@@ -0,0 +1,8 @@
+import type {Config} from "drizzle-kit";
+
+export default {
+  schema: "./src/downloader/schema.ts",
+  out: "./src/downloader/drizzle",
+  dialect: "sqlite",
+  driver: "expo",
+} satisfies Config;
diff --git a/metro.config.js b/metro.config.js
@@ -1,6 +1,8 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
 const {getDefaultConfig} = require("expo/metro-config");
 
+const appJSONConfig = require("./app.json");
+
 // eslint-disable-next-line no-undef
 const config = getDefaultConfig(__dirname);
 
@@ -22,4 +24,17 @@ if (process.env?.EXPO_TV === '1') {
 }
  */
 
+// TODO: Load app.json and check if expoTV true?
+
+if (appJSONConfig.expo.plugins[0][1].isTV) {
+  config.resolver.sourceExts.unshift(
+    ...config.resolver.sourceExts.map(e => `tv.${e}`),
+  );
+}
+
+config.resolver.sourceExts.push("sql");
+config.resolver.unstable_enablePackageExports = true;
+
+// console.log(config.resolver.sourceExts);
+
 module.exports = config;
diff --git a/package.json b/package.json
@@ -3,28 +3,37 @@
   "version": "0.0.2",
   "dependencies": {
     "@craftzdog/react-native-buffer": "^6.0.5",
+    "@duell10111/apple-targets": "^0.0.6-alpha.1",
+    "@duell10111/react-native-watch-connectivity": "^1.1.2",
     "@gorhom/bottom-sheet": "4.4.7",
     "@react-native-clipboard/clipboard": "^1.11.2",
+    "@react-native-community/slider": "4.4.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.8",
     "@rneui/themed": "^4.0.0-rc.8",
     "crypto-browserify": "^3.12.0",
+    "drizzle-orm": "^0.31.2",
     "eslint-config-universe": "^12.0.0",
     "event-target-polyfill": "^0.0.3",
     "events": "^3.3.0",
     "expo": "^50.0.6",
+    "expo-av": "~13.10.6",
     "expo-build-properties": "~0.11.1",
+    "expo-file-system": "~16.0.9",
     "expo-splash-screen": "~0.26.3",
+    "expo-sqlite": "~13.4.0",
     "expo-status-bar": "~1.11.1",
+    "expo-watch-connectivity": "^0.1.1",
     "fast-text-encoding": "^1.0.6",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "npm:react-native-tvos@^0.73.7-1",
+    "react-native-awesome-slider": "^2.5.3",
     "react-native-device-info": "^10.8.0",
     "react-native-fast-image": "^8.6.3",
     "react-native-flash-message": "^0.4.2",
@@ -33,12 +42,15 @@
     "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-quick-crypto": "^0.7.3",
     "react-native-reanimated": "~3.6.2",
     "react-native-reanimated-carousel": "^3.5.1",
     "react-native-redash": "^18.1.0",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "^3.29.0",
+    "react-native-super-grid": "^6.0.1",
     "react-native-svg": "14.1.0",
+    "react-native-track-player": "^4.1.1",
     "react-native-url-polyfill": "^1.3.0",
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^9.2.0",
@@ -47,7 +59,7 @@
     "rn-native-search-bar": "^1.0.0-beta.10",
     "stream-browserify": "^3.0.0",
     "web-streams-polyfill": "^3.2.1",
-    "youtubei.js": "10.2.0"
+    "youtubei.js": "10.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -64,7 +76,9 @@
     "@types/react": "~18.2.14",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
+    "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-module-resolver": "^5.0.0",
+    "drizzle-kit": "^0.22.6",
     "eslint": "^8.56.0",
     "eslint-plugin-prettier": "^5.1.3",
     "prettier": "^3.2.5",
@@ -77,6 +91,9 @@
       ]
     }
   },
+  "resolutions": {
+    "tslib": "2.6.2"
+  },
   "private": true,
   "scripts": {
     "start": "expo start",

diff --git a/src/components/GridView.tsx b/src/components/GridView.tsx
@@ -21,6 +21,7 @@ interface Props extends Omit<FlatListProps<any>, "renderItem" | "data"> {
   columns?: number;
   onEndReached?: () => void;
   onElementFocused?: () => void;
+  horizontalListSegmentStyle?: StyleProp<ViewStyle>;
 }
 
 export default function GridView({
@@ -33,23 +34,32 @@ export default function GridView({
 }: Props) {
   const sorted = useGrid(shelfItem, columns);
 
-  const renderItem = useCallback(({item}: {item: (typeof sorted)[number]}) => {
-    if (Array.isArray(item)) {
+  const renderItem = useCallback(
+    ({item}: {item: (typeof sorted)[number]}) => {
+      if (Array.isArray(item)) {
+        return (
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-around",
+              alignItems: "flex-start",
+            }}>
+            {item.map((v, index) => (
+              <VideoSegment key={`${v.id}-${index}`} element={v} />
+            ))}
+          </View>
+        );
+      }
       return (
-        <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "space-around",
-            alignItems: "flex-start",
-          }}>
-          {item.map((v, index) => (
-            <VideoSegment key={`${v.id}-${index}`} element={v} />
-          ))}
-        </View>
+        <PageSectionList
+          headerText={item.title}
+          content={item}
+          horizontalListSegmentStyle={props.horizontalListSegmentStyle}
+        />
       );
-    }
-    return <PageSectionList headerText={item.title} content={item} />;
-  }, []);
+    },
+    [props.horizontalListSegmentStyle],
+  );
   const keyExtractor = useCallback(
     (item: (typeof sorted)[number], index: number) =>
       Array.isArray(item)

diff --git a/src/components/HorizontalVideoList.tsx b/src/components/HorizontalVideoList.tsx
@@ -11,6 +11,7 @@ import {Helpers, YTNodes} from "../utils/Youtube";
 const LOGGER = Logger.extend("SEGMENT");
 
 interface Props {
+  videoSegmentStyle?: StyleProp<ViewStyle>;
   containerStyle?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   nodes: (Helpers.YTNode | ElementData)[];
@@ -19,6 +20,7 @@ interface Props {
 
 export default function HorizontalVideoList({
   nodes,
+  videoSegmentStyle,
   textStyle,
   onEndReached,
   containerStyle,
@@ -29,7 +31,13 @@ export default function HorizontalVideoList({
         if (item.type === "channel") {
           return <ChannelSegment element={item.originalNode} />;
         } else {
-          return <VideoSegment element={item} textStyle={textStyle} />;
+          return (
+            <VideoSegment
+              element={item}
+              textStyle={textStyle}
+              style={videoSegmentStyle}
+            />
+          );
         }
       } else {
         console.error("! Old Way Horizontal List");
@@ -53,7 +61,7 @@ export default function HorizontalVideoList({
       }
       return null;
     },
-    [textStyle],
+    [textStyle, videoSegmentStyle],
   );
 
   const keyExtractor = useCallback((item: Helpers.YTNode | ElementData) => {

diff --git a/src/components/VideoSegment.tsx b/src/components/VideoSegment.tsx
@@ -38,6 +38,7 @@ export default function VideoSegment({
           date={element.publishDate}
           livestream={element.livestream}
           navEndpoint={element.navEndpoint}
+          music={element.music}
         />
       );
     } else if (element.type === "mix") {
@@ -53,6 +54,7 @@ export default function VideoSegment({
           author={element.author}
           thumbnail={element.thumbnailImage}
           date={element.publishDate}
+          music={element.music}
           mix
         />
       );
@@ -66,6 +68,7 @@ export default function VideoSegment({
           thumbnail={element.thumbnailImage}
           videoCount={element.videoCount}
           author={element.author}
+          music={element.music}
         />
       );
     } else {

diff --git a/src/components/channel/SectionList.tsx b/src/components/channel/SectionList.tsx
@@ -1,7 +1,8 @@
 import React, {useCallback} from "react";
 import {FlatList, StyleProp, ViewStyle} from "react-native";
-import PageSegment from "../PageSegment";
+
 import {HorizontalData} from "../../extraction/ShelfExtraction";
+import PageSegment from "../PageSegment";
 
 interface Props {
   style?: StyleProp<ViewStyle>;
@@ -10,8 +11,6 @@ interface Props {
 }
 
 export default function SectionList({node, ...otherProps}: Props) {
-  console.log(node);
-
   return <ItemList nodes={node} {...otherProps} />;
 }
 

diff --git a/src/components/downloader/ActiveDownloadListItem.tsx b/src/components/downloader/ActiveDownloadListItem.tsx
@@ -0,0 +1,17 @@
+import {ListItem} from "@rneui/base";
+import {Text} from "react-native";
+
+import {DownloadObject} from "../../hooks/downloader/useDownloadProcessor";
+
+interface Props {
+  download: DownloadObject;
+}
+
+export default function ActiveDownloadListItem({download}: Props) {
+  return (
+    <ListItem>
+      <Text style={{color: "black"}}>{download.id ?? "Test"}</Text>
+      <Text style={{color: "black"}}>{download.process}</Text>
+    </ListItem>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -76,3 +76,6 @@ buck-out/ @@
     /ios
     .expo
+    # Local building
+    fastlane