From 925b28019f2f0efb759bd28ea277da1adbeb594c Mon Sep 17 00:00:00 2001 From: Jorrin Date: Tue, 2 Apr 2024 17:25:24 +0200 Subject: [PATCH] improved settings design --- apps/expo/src/app/(tabs)/settings.tsx | 134 ++++++++++++++---- .../components/player/CaptionsSelector.tsx | 9 ++ apps/expo/src/components/ui/Separator.tsx | 14 ++ packages/provider-utils/package.json | 2 +- pnpm-lock.yaml | 47 +++++- 5 files changed, 173 insertions(+), 33 deletions(-) create mode 100644 apps/expo/src/components/ui/Separator.tsx diff --git a/apps/expo/src/app/(tabs)/settings.tsx b/apps/expo/src/app/(tabs)/settings.tsx index 7c9efcc..efaed6d 100644 --- a/apps/expo/src/app/(tabs)/settings.tsx +++ b/apps/expo/src/app/(tabs)/settings.tsx @@ -11,12 +11,13 @@ import { MaterialIcons, } from "@expo/vector-icons"; import { useToastController } from "@tamagui/toast"; +import { useMutation } from "@tanstack/react-query"; import { Adapt, ScrollView, Select, - Separator, Sheet, + Spinner, Text, useTheme, View, @@ -28,6 +29,7 @@ import type { ThemeStoreOption } from "~/stores/theme"; import ScreenLayout from "~/components/layout/ScreenLayout"; import { MWButton } from "~/components/ui/Button"; import { MWSelect } from "~/components/ui/Select"; +import { MWSeparator } from "~/components/ui/Separator"; import { MWSwitch } from "~/components/ui/Switch"; import { checkForUpdate } from "~/lib/update"; import { usePlayerSettingsStore } from "~/stores/settings"; @@ -50,6 +52,30 @@ export default function SettingsScreen() { const [updateMarkdownContent, setUpdateMarkdownContent] = useState(""); const [downloadUrl, setDownloadUrl] = useState(""); + const mutation = useMutation({ + mutationKey: ["checkForUpdate"], + mutationFn: checkForUpdate, + onSuccess: (res) => { + if (res) { + setUpdateMarkdownContent(res.data.body!); + setDownloadUrl( + res.data.assets.find( + (asset) => + asset.name === + `movie-web.${Platform.select({ ios: "ipa", android: "apk" })}`, + )?.browser_download_url ?? "", + ); + setShowUpdateSheet(true); + } else { + toastController.show("No updates available", { + burntOptions: { preset: "none" }, + native: true, + duration: 500, + }); + } + }, + }); + const handleGestureControlsToggle = async (isEnabled: boolean) => { if (isEnabled) { const { status } = await Brightness.requestPermissionsAsync(); @@ -61,32 +87,90 @@ export default function SettingsScreen() { } }; - const handleVersionPress = async () => { - const res = await checkForUpdate(); - if (res) { - setUpdateMarkdownContent(res.data.body!); - setDownloadUrl( - res.data.assets.find( - (asset) => - asset.name === - `movie-web.${Platform.select({ ios: "ipa", android: "apk" })}`, - )?.browser_download_url ?? "", - ); - setShowUpdateSheet(true); - } else { - toastController.show("No updates available", { - burntOptions: { preset: "none" }, - native: true, - duration: 500, - }); - } - }; - return ( - - + + + + Appearance + + + + + + Theme + + + + + + + + + Player + + + + + + Gesture controls + + + + + + + + Autoplay + + + + + + + + + + + App + + + + + + Version v{Application.nativeApplicationVersion} + + + } + iconAfter={ + <>{mutation.isPending && } + } + disabled={mutation.isPending} + onPress={() => mutation.mutate()} + animation="quicker" + > + Update + + + + + + {/* Theme @@ -125,7 +209,7 @@ export default function SettingsScreen() { > Update - + */} { + const toast = useToastController(); const theme = useTheme(); const [open, setOpen] = useState(false); const captions = usePlayerStore( @@ -94,6 +96,13 @@ export const CaptionsSelector = () => { color="$playerSettingsUnactiveText" fontWeight="bold" chromeless + onPress={() => { + toast.show("Work in progress", { + burntOptions: { preset: "none" }, + native: true, + duration: 500, + }); + }} > Customize diff --git a/apps/expo/src/components/ui/Separator.tsx b/apps/expo/src/components/ui/Separator.tsx new file mode 100644 index 0000000..fb04ab7 --- /dev/null +++ b/apps/expo/src/components/ui/Separator.tsx @@ -0,0 +1,14 @@ +import { Separator, styled } from "tamagui"; + +export const MWSeparator = styled(Separator, { + variants: { + type: { + settings: { + borderColor: "$shade300", + }, + }, + }, + defaultVariants: { + type: "settings", + }, +}); diff --git a/packages/provider-utils/package.json b/packages/provider-utils/package.json index 135f43b..10dbe2e 100644 --- a/packages/provider-utils/package.json +++ b/packages/provider-utils/package.json @@ -29,7 +29,7 @@ }, "prettier": "@movie-web/prettier-config", "dependencies": { - "@movie-web/providers": "^2.2.4", + "@movie-web/providers": "^2.2.7", "parse-hls": "^1.0.7", "srt-webvtt": "^2.0.0", "tmdb-ts": "^1.6.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 65f740d..e9e49d1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -265,8 +265,8 @@ importers: packages/provider-utils: dependencies: '@movie-web/providers': - specifier: ^2.2.4 - version: 2.2.4 + specifier: ^2.2.7 + version: 2.2.7 parse-hls: specifier: ^1.0.7 version: 1.0.7 @@ -2894,8 +2894,9 @@ packages: tslib: 2.6.2 dev: false - /@movie-web/providers@2.2.4: - resolution: {integrity: sha512-c10ffR7/oPMbVwpD+Lw0/k5jvx51NbywGJtogzRjeXqDr01o5+pitPeN1qSGaqTg5FBlipn7NSesrd+cczDDQw==} + /@movie-web/providers@2.2.7: + resolution: {integrity: sha512-XwU1IkXrF7e99JtC5Tna00/yuRECqEyBo8bhTtVE6ZFLYj3YQXVm2sdHjcyerjbyAsXvKGeikWEkrvHofTUjDA==} + requiresBuild: true dependencies: cheerio: 1.0.0-rc.12 cookie: 0.6.0 @@ -2903,11 +2904,9 @@ packages: form-data: 4.0.0 iso-639-1: 3.1.2 nanoid: 3.3.7 - node-fetch: 2.7.0 + node-fetch: 3.3.2 set-cookie-parser: 2.6.0 unpacker: 1.0.1 - transitivePeerDependencies: - - encoding dev: false /@nodelib/fs.scandir@2.1.5: @@ -6890,6 +6889,11 @@ packages: engines: {node: '>= 6'} dev: false + /data-uri-to-buffer@4.0.1: + resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==} + engines: {node: '>= 12'} + dev: false + /data-uri-to-buffer@6.0.1: resolution: {integrity: sha512-MZd3VlchQkp8rdend6vrx7MmVDJzSNTBvghvKjirLkD+WTChA3KUf0jkE68Q4UyctNqI11zZO9/x2Yx+ub5Cvg==} engines: {node: '>= 14'} @@ -8118,6 +8122,14 @@ packages: - encoding dev: false + /fetch-blob@3.2.0: + resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==} + engines: {node: ^12.20 || >= 14.13} + dependencies: + node-domexception: 1.0.0 + web-streams-polyfill: 3.3.2 + dev: false + /fetch-retry@4.1.1: resolution: {integrity: sha512-e6eB7zN6UBSwGVwrbWVH+gdLnkW9WwHhmq2YDK1Sh30pzx1onRVGBvogTlUeWxwTa+L86NYdo4hFkh7O8ZjSnA==} dev: false @@ -8288,6 +8300,13 @@ packages: mime-types: 2.1.35 dev: false + /formdata-polyfill@4.0.10: + resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==} + engines: {node: '>=12.20.0'} + dependencies: + fetch-blob: 3.2.0 + dev: false + /framer-motion@6.5.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==} peerDependencies: @@ -10465,6 +10484,11 @@ packages: minimatch: 3.1.2 dev: false + /node-domexception@1.0.0: + resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==} + engines: {node: '>=10.5.0'} + dev: false + /node-fetch@2.7.0: resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==} engines: {node: 4.x || >=6.0.0} @@ -10477,6 +10501,15 @@ packages: whatwg-url: 5.0.0 dev: false + /node-fetch@3.3.2: + resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dependencies: + data-uri-to-buffer: 4.0.1 + fetch-blob: 3.2.0 + formdata-polyfill: 4.0.10 + dev: false + /node-forge@1.3.1: resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==} engines: {node: '>= 6.13.0'}