From ceffab182d01bc83209bdcd9eb740ca96ddef975 Mon Sep 17 00:00:00 2001 From: Jorrin Date: Sun, 24 Mar 2024 20:41:09 +0100 Subject: [PATCH] fix theme selector not working, add input styling --- .../withRemoveiOSNotificationEntitlement.js | 5 --- apps/expo/src/app/(tabs)/settings.tsx | 21 ++++++---- apps/expo/src/components/ui/Input.tsx | 25 ++++++++++++ apps/expo/src/components/ui/Searchbar.tsx | 17 +++------ apps/expo/src/components/ui/Select.tsx | 38 +++++++++++++++++++ apps/expo/src/components/ui/Switch.tsx | 4 +- apps/expo/src/hooks/player/useSourceScrape.ts | 7 ---- apps/expo/src/settings/index.ts | 14 ++++--- apps/expo/tamagui.config.ts | 18 ++++++--- apps/expo/tsconfig.json | 3 +- tooling/eslint/base.js | 17 +++++++++ 11 files changed, 124 insertions(+), 45 deletions(-) create mode 100644 apps/expo/src/components/ui/Input.tsx create mode 100644 apps/expo/src/components/ui/Select.tsx diff --git a/apps/expo/config-plugins/withRemoveiOSNotificationEntitlement.js b/apps/expo/config-plugins/withRemoveiOSNotificationEntitlement.js index f47ec1e..ce5068f 100644 --- a/apps/expo/config-plugins/withRemoveiOSNotificationEntitlement.js +++ b/apps/expo/config-plugins/withRemoveiOSNotificationEntitlement.js @@ -1,8 +1,3 @@ -/* eslint-disable @typescript-eslint/no-unsafe-call */ -/* eslint-disable @typescript-eslint/no-unsafe-return */ -/* eslint-disable @typescript-eslint/no-unsafe-member-access */ -/* eslint-disable @typescript-eslint/no-var-requires */ -/* eslint-disable @typescript-eslint/no-unsafe-assignment */ const withEntitlementsPlist = require("@expo/config-plugins").withEntitlementsPlist; diff --git a/apps/expo/src/app/(tabs)/settings.tsx b/apps/expo/src/app/(tabs)/settings.tsx index 8670d79..2ceb02e 100644 --- a/apps/expo/src/app/(tabs)/settings.tsx +++ b/apps/expo/src/app/(tabs)/settings.tsx @@ -20,6 +20,7 @@ import { import type { ThemeStoreOption } from "~/stores/theme"; import ScreenLayout from "~/components/layout/ScreenLayout"; +import { MWSelect } from "~/components/ui/Select"; import { MWSwitch } from "~/components/ui/Switch"; import { checkForUpdate } from "~/lib/update"; import { getGestureControls, saveGestureControls } from "~/settings"; @@ -102,19 +103,20 @@ export function ThemeSelector(props: SelectProps) { const setTheme = useThemeStore((s) => s.setTheme); return ( - + ); } diff --git a/apps/expo/src/components/ui/Input.tsx b/apps/expo/src/components/ui/Input.tsx new file mode 100644 index 0000000..5406e52 --- /dev/null +++ b/apps/expo/src/components/ui/Input.tsx @@ -0,0 +1,25 @@ +import { Input, styled } from "tamagui"; + +export const MWInput = styled(Input, { + variants: { + type: { + default: { + backgroundColor: "$inputBackground", + color: "$inputText", + placeholderTextColor: "$placeHolderText", + borderColor: "$inputBorder", + outlineStyle: "none", + }, + search: { + backgroundColor: "$searchBackground", + borderColor: "$colorTransparent", + placeholderTextColor: "$searchPlaceholder", + outlineStyle: "none", + focusStyle: { + borderColor: "$colorTransparent", + backgroundColor: "$searchFocused", + }, + }, + }, + }, +}); diff --git a/apps/expo/src/components/ui/Searchbar.tsx b/apps/expo/src/components/ui/Searchbar.tsx index de1a24a..2587d76 100644 --- a/apps/expo/src/components/ui/Searchbar.tsx +++ b/apps/expo/src/components/ui/Searchbar.tsx @@ -1,19 +1,11 @@ +import type { Input } from "tamagui"; import { useEffect, useRef, useState } from "react"; import { Keyboard } from "react-native"; import { FontAwesome5 } from "@expo/vector-icons"; import { useIsFocused } from "@react-navigation/native"; -import { Input, styled, useTheme, View } from "tamagui"; +import { useTheme, View } from "tamagui"; -const SearchInput = styled(Input, { - backgroundColor: "$searchBackground", - borderColor: "$colorTransparent", - placeholderTextColor: "$searchPlaceholder", - outlineStyle: "none", - focusStyle: { - borderColor: "$colorTransparent", - backgroundColor: "$searchFocused", - }, -}); +import { MWInput } from "./Input"; export function SearchBar({ onSearchChange, @@ -69,7 +61,8 @@ export function SearchBar({ - { @@ -18,7 +18,7 @@ const MWSwitch = (props: SwitchProps) => { ); }; -const MWSwitchThumb = (props: any) => { +const MWSwitchThumb = (props: SwitchThumbProps) => { return ; }; diff --git a/apps/expo/src/hooks/player/useSourceScrape.ts b/apps/expo/src/hooks/player/useSourceScrape.ts index dcfa88c..0e096a9 100644 --- a/apps/expo/src/hooks/player/useSourceScrape.ts +++ b/apps/expo/src/hooks/player/useSourceScrape.ts @@ -232,19 +232,12 @@ export const useSourceScrape = (sourceId: string | null) => { const query = useQuery({ queryKey: ["sourceScrape", meta, sourceId], queryFn: async () => { - console.log("useSourceScrape", meta, sourceId); if (!meta || !sourceId) return; const scrapeMedia = convertMetaToScrapeMedia(meta); const result = await getVideoStreamFromSource({ sourceId, media: scrapeMedia, - events: { - update(evt) { - console.log("update useSourceScrape", evt); - }, - }, }); - console.log("useSourceScrape result", result); if (result?.stream) { setCurrentStream(result.stream[0]!); diff --git a/apps/expo/src/settings/index.ts b/apps/expo/src/settings/index.ts index be7ab95..b1293cb 100644 --- a/apps/expo/src/settings/index.ts +++ b/apps/expo/src/settings/index.ts @@ -12,8 +12,8 @@ interface PlayerSettings { } interface Settings { - themes: ThemeSettings; - player: PlayerSettings; + themes?: ThemeSettings; + player?: PlayerSettings; } const settingsKey = "settings"; @@ -35,8 +35,12 @@ export const getTheme = async (): Promise => { }; export const saveTheme = async (newTheme: ThemeStoreOption) => { - const settings = (await loadSettings()) ?? { themes: { theme: newTheme } }; - settings.themes.theme = newTheme; + const existingSettings = await loadSettings(); + const settings: Settings = existingSettings?.themes?.theme + ? { + themes: { theme: newTheme }, + } + : { themes: { theme: "main" } }; await saveSettings(settings); }; @@ -69,7 +73,7 @@ export const getGestureControls = async (): Promise => { }; export const saveGestureControls = async (gestureControls: boolean) => { - const settings = (await loadSettings()) ?? ({} as Settings); + const settings = (await loadSettings()) ?? {}; if (!settings.player) { settings.player = { gestureControls: true }; diff --git a/apps/expo/tamagui.config.ts b/apps/expo/tamagui.config.ts index d2e2265..186e8d6 100644 --- a/apps/expo/tamagui.config.ts +++ b/apps/expo/tamagui.config.ts @@ -20,12 +20,6 @@ type Tokens = const createThemeConfig = (tokens: Tokens) => ({ screenBackground: tokens.shade.c900, - searchIcon: tokens.shade.c100, - searchBackground: tokens.shade.c600, - searchHoverBackground: tokens.shade.c600, - searchFocused: tokens.shade.c400, - searchPlaceholder: tokens.shade.c100, - tabBarBackground: tokens.shade.c700, tabBarIcon: tokens.shade.c300, tabBarIconFocused: tokens.purple.c200, @@ -77,6 +71,18 @@ const createThemeConfig = (tokens: Tokens) => ({ switchActiveTrackColor: tokens.purple.c300, switchInactiveTrackColor: tokens.ash.c500, switchThumbColor: tokens.white, + + searchIcon: tokens.shade.c100, + searchBackground: tokens.shade.c600, + searchHoverBackground: tokens.shade.c600, + searchFocused: tokens.shade.c400, + searchPlaceholder: tokens.shade.c100, + + inputBackground: tokens.shade.c600, + inputBorder: tokens.shade.c600, + inputPlaceholderText: tokens.shade.c300, + inputText: tokens.white, + inputIconColor: tokens.shade.c50, }); const openSansFace = { diff --git a/apps/expo/tsconfig.json b/apps/expo/tsconfig.json index 7e1b928..2e1fbf7 100644 --- a/apps/expo/tsconfig.json +++ b/apps/expo/tsconfig.json @@ -2,6 +2,7 @@ "extends": ["@movie-web/tsconfig/base.json"], "compilerOptions": { "incremental": true, + "allowJs": true, "baseUrl": ".", "paths": { "~/*": ["./src/*"], @@ -10,6 +11,6 @@ "jsx": "react-native", "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json", }, - "include": ["src", "*.ts", "*.js", ".expo/types/**/*.ts", "expo-env.d.ts"], + "include": ["src", "*.ts", "*.js", ".expo/types/**/*.ts", "expo-env.d.ts", "config-plugins/*"], "exclude": ["node_modules"], } diff --git a/tooling/eslint/base.js b/tooling/eslint/base.js index 58f75b0..0241486 100644 --- a/tooling/eslint/base.js +++ b/tooling/eslint/base.js @@ -41,6 +41,23 @@ const config = { "tamagui-web.css", ], reportUnusedDisableDirectives: true, + // disable all typescript rules for js files + overrides: [ + { + files: ["*.js", "*.cjs", "*.mjs"], + rules: { + "@typescript-eslint/no-var-requires": "off", + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/no-unsafe-assignment": "off", + "@typescript-eslint/no-unsafe-member-access": "off", + "@typescript-eslint/no-unsafe-call": "off", + "@typescript-eslint/no-unsafe-return": "off", + "@typescript-eslint/no-floating-promises": "off", + "@typescript-eslint/require-await": "off", + "@typescript-eslint/no-misused-promises": "off", + }, + }, + ], }; module.exports = config;