diff --git a/front/packages/native/.expo-shared/assets.json b/front/apps/mobile/.expo-shared/assets.json similarity index 100% rename from front/packages/native/.expo-shared/assets.json rename to front/apps/mobile/.expo-shared/assets.json diff --git a/front/packages/native/app.json b/front/apps/mobile/app.json similarity index 100% rename from front/packages/native/app.json rename to front/apps/mobile/app.json diff --git a/front/packages/native/assets/adaptive-icon.png b/front/apps/mobile/assets/adaptive-icon.png similarity index 100% rename from front/packages/native/assets/adaptive-icon.png rename to front/apps/mobile/assets/adaptive-icon.png diff --git a/front/packages/native/assets/favicon.png b/front/apps/mobile/assets/favicon.png similarity index 100% rename from front/packages/native/assets/favicon.png rename to front/apps/mobile/assets/favicon.png diff --git a/front/packages/native/assets/icon.png b/front/apps/mobile/assets/icon.png similarity index 100% rename from front/packages/native/assets/icon.png rename to front/apps/mobile/assets/icon.png diff --git a/front/packages/native/assets/splash.png b/front/apps/mobile/assets/splash.png similarity index 100% rename from front/packages/native/assets/splash.png rename to front/apps/mobile/assets/splash.png diff --git a/front/packages/native/babel.config.js b/front/apps/mobile/babel.config.js similarity index 100% rename from front/packages/native/babel.config.js rename to front/apps/mobile/babel.config.js diff --git a/front/packages/native/metro.config.js b/front/apps/mobile/metro.config.js similarity index 100% rename from front/packages/native/metro.config.js rename to front/apps/mobile/metro.config.js diff --git a/front/packages/native/package.json b/front/apps/mobile/package.json similarity index 86% rename from front/packages/native/package.json rename to front/apps/mobile/package.json index 1419fbde..68e4326d 100644 --- a/front/packages/native/package.json +++ b/front/apps/mobile/package.json @@ -1,5 +1,5 @@ { - "name": "native", + "name": "mobile", "version": "1.0.0", "main": "src/app.tsx", "scripts": { @@ -9,7 +9,7 @@ "web": "expo start --web" }, "dependencies": { - "app": "^0.1.0", + "@kyoo/ui": "workspace:^", "expo": "~46.0.16", "expo-status-bar": "~1.4.0", "react": "18.0.0", @@ -18,7 +18,7 @@ "react-native-web": "~0.18.7" }, "devDependencies": { - "@babel/core": "^7.12.9", + "@babel/core": "^7.19.6", "@types/react": "~18.0.14", "@types/react-native": "~0.69.1", "typescript": "~4.3.5" diff --git a/front/packages/native/src/app.tsx b/front/apps/mobile/src/app.tsx similarity index 94% rename from front/packages/native/src/app.tsx rename to front/apps/mobile/src/app.tsx index 59170797..e72feeee 100644 --- a/front/packages/native/src/app.tsx +++ b/front/apps/mobile/src/app.tsx @@ -1,7 +1,7 @@ import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View } from "react-native"; import { registerRootComponent } from "expo"; -import { Toto } from "app"; +import { Toto } from "@kyoo/ui"; function App() { return ( diff --git a/front/packages/native/tsconfig.json b/front/apps/mobile/tsconfig.json similarity index 100% rename from front/packages/native/tsconfig.json rename to front/apps/mobile/tsconfig.json diff --git a/front/apps/web/next.config.js b/front/apps/web/next.config.js index a309bd9e..98594286 100755 --- a/front/apps/web/next.config.js +++ b/front/apps/web/next.config.js @@ -18,11 +18,10 @@ * along with Kyoo. If not, see . */ -const path = require("path") +const path = require("path"); const CopyPlugin = require("copy-webpack-plugin"); const withTM = require("next-transpile-modules")(["@kyoo/ui"]); - const suboctopus = path.dirname(require.resolve("@jellyfin/libass-wasm")); /** @@ -45,6 +44,14 @@ const nextConfig = { ], }), ]; + config.resolve = { + ...config.resolve, + alias: { + ...config.resolve.alias, + "react-native$": "react-native-web", + }, + extensions: [".web.tsx", ".tsx", ...config.resolve.extensions], + }; return config; }, async redirects() { diff --git a/front/apps/web/package.json b/front/apps/web/package.json index 83a8340e..dcde1c2e 100644 --- a/front/apps/web/package.json +++ b/front/apps/web/package.json @@ -29,6 +29,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-infinite-scroll-component": "^6.1.0", + "react-native-web": "^0.18.9", "superjson": "^1.9.1", "zod": "^3.18.0" }, diff --git a/front/apps/web/src/pages/_document.tsx b/front/apps/web/src/pages/_document.tsx index d2fd3388..2bfdd793 100644 --- a/front/apps/web/src/pages/_document.tsx +++ b/front/apps/web/src/pages/_document.tsx @@ -19,6 +19,48 @@ */ import { Html, Main, Head, NextScript } from "next/document"; +import { Children } from "react"; +import { AppRegistry } from "react-native"; + +export const style = ` +/** + * Building on the RNWeb reset: + * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js + */ +html, body, #__next { + width: 100%; + /* To smooth any scrolling behavior */ + -webkit-overflow-scrolling: touch; + margin: 0px; + padding: 0px; + /* Allows content to fill the viewport and go beyond the bottom */ + min-height: 100%; +} +#__next { + flex-shrink: 0; + flex-basis: auto; + flex-direction: column; + flex-grow: 1; + display: flex; + flex: 1; +} +html { + scroll-behavior: smooth; + /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */ + -webkit-text-size-adjust: 100%; + height: 100%; +} +body { + display: flex; + /* Allows you to scroll below the viewport; default value is visible */ + overflow-y: auto; + overscroll-behavior-y: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -ms-overflow-style: scrollbar; +} +`; const Document = () => { return ( @@ -38,4 +80,14 @@ const Document = () => { ); }; +// Enables SSR for react-native-web styles. +Document.getInitialProps = async ({ renderPage }: any) => { + AppRegistry.registerComponent("Main", () => Main); + // @ts-ignore + const { getStyleElement } = AppRegistry.getApplication("Main"); + const page = await renderPage(); + const styles = [