From 4d7ef7986f5bbec27b9de9e0f60d998d1f8a27cc Mon Sep 17 00:00:00 2001 From: robygolee Date: Wed, 22 May 2024 09:10:59 +0200 Subject: [PATCH 1/8] gitignore --- .gitignore | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index ae6d12e..4b1331f 100644 --- a/.gitignore +++ b/.gitignore @@ -43,4 +43,6 @@ expo-env.d.ts storage/** /ios -/android \ No newline at end of file +/android + +.idea From 37dce81f1a6663965e9d240d92e78f40b7042240 Mon Sep 17 00:00:00 2001 From: robygolee Date: Wed, 22 May 2024 09:32:40 +0200 Subject: [PATCH 2/8] 1 - share btn --- app/works/[id]/index.tsx | 12 +++++-- app/works/[id]/share.tsx | 69 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 app/works/[id]/share.tsx diff --git a/app/works/[id]/index.tsx b/app/works/[id]/index.tsx index 40af1d8..e3ce32f 100644 --- a/app/works/[id]/index.tsx +++ b/app/works/[id]/index.tsx @@ -14,6 +14,7 @@ import { useFavStatusMutation } from "@/data/hooks/useFavStatusMutation"; import colors from "@/constants/colors"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { LoadingShade } from "@/components/LoadingShade"; +import * as Sharing from "expo-sharing"; export default function DisplayWork() { const dimensions = useWindowDimensions(); @@ -35,6 +36,10 @@ export default function DisplayWork() { // update fav status const favMutation = useFavStatusMutation(); + async function share() { + await Sharing.shareAsync(work.images.web.url); + } + return ( {work?.title} - + + + + @@ -111,4 +119,4 @@ export default function DisplayWork() { function stripTags(htmlish: string) { return htmlish.replace(/<[^>]*>?/gm, ""); -} \ No newline at end of file +} diff --git a/app/works/[id]/share.tsx b/app/works/[id]/share.tsx new file mode 100644 index 0000000..ed57bcf --- /dev/null +++ b/app/works/[id]/share.tsx @@ -0,0 +1,69 @@ +import { View, Text, useWindowDimensions, Pressable } from "react-native"; +import { Stack, useLocalSearchParams } from "expo-router"; +import { Image } from "expo-image"; +import { useWorkByIdQuery } from "@/data/hooks/useWorkByIdQuery"; +import { LoadingShade } from "@/components/LoadingShade"; + +export default function ShareWork() { + const dimensions = useWindowDimensions(); + const { id } = useLocalSearchParams<{ id: string }>(); + const { data: work, isLoading } = useWorkByIdQuery(id!); + + return ( + + + + + Share a clip of this work with your friends. + + + + + { + // Share the work + }} + /> + + + + ); +} + +function RoundButton({ + title, + onPress, + disabled = false, + }: { + title: string; + onPress: () => void; + disabled?: boolean; +}) { + return ( + + {title} + + ); +} From 86e5d35743e34da33ac1513dfd1b39367428e0b6 Mon Sep 17 00:00:00 2001 From: robygolee Date: Wed, 22 May 2024 09:46:24 +0200 Subject: [PATCH 3/8] 2 - crop --- app.json | 3 ++- app/works/[id]/index.tsx | 1 + app/works/[id]/share.tsx | 55 ++++++++++++++++++++++++++++++---------- 3 files changed, 45 insertions(+), 14 deletions(-) diff --git a/app.json b/app.json index aac748c..e25b6d7 100644 --- a/app.json +++ b/app.json @@ -33,7 +33,8 @@ "plugins": [ [ "expo-router" - ] + ], + "react-native-image-marker" ], "experiments": { "typedRoutes": true diff --git a/app/works/[id]/index.tsx b/app/works/[id]/index.tsx index e3ce32f..7d440d2 100644 --- a/app/works/[id]/index.tsx +++ b/app/works/[id]/index.tsx @@ -15,6 +15,7 @@ import colors from "@/constants/colors"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { LoadingShade } from "@/components/LoadingShade"; import * as Sharing from "expo-sharing"; +import ImagePicker from "react-native-image-crop-picker"; export default function DisplayWork() { const dimensions = useWindowDimensions(); diff --git a/app/works/[id]/share.tsx b/app/works/[id]/share.tsx index ed57bcf..35df8ad 100644 --- a/app/works/[id]/share.tsx +++ b/app/works/[id]/share.tsx @@ -1,13 +1,42 @@ -import { View, Text, useWindowDimensions, Pressable } from "react-native"; -import { Stack, useLocalSearchParams } from "expo-router"; -import { Image } from "expo-image"; -import { useWorkByIdQuery } from "@/data/hooks/useWorkByIdQuery"; -import { LoadingShade } from "@/components/LoadingShade"; +import {View, Text, useWindowDimensions, Pressable, Platform} from "react-native"; +import {Stack, useLocalSearchParams} from "expo-router"; +import {Image} from "expo-image"; +import {useWorkByIdQuery} from "@/data/hooks/useWorkByIdQuery"; +import {LoadingShade} from "@/components/LoadingShade"; +import ImagePicker from "react-native-image-crop-picker"; +import {useState} from "react"; +import * as Sharing from "expo-sharing"; export default function ShareWork() { const dimensions = useWindowDimensions(); - const { id } = useLocalSearchParams<{ id: string }>(); - const { data: work, isLoading } = useWorkByIdQuery(id!); + const {id} = useLocalSearchParams<{ id: string }>(); + const {data: work, isLoading} = useWorkByIdQuery(id!); + + function normalizeFilePath(path: string) { + if (Platform.OS === "android" && !path.startsWith("file://")) { + return `file://${path}`; + } + return path; + } + + const [editedImagePath, setEditedImagePath] = useState( + undefined + ); + + async function crop() { + const image = await ImagePicker.openCropper({ + path: work.images.web.url, + width: 300, + height: 300, + mediaType: "photo", + }); + setEditedImagePath(normalizeFilePath(image.path)); + } + + async function share() { + editedImagePath && await Sharing.shareAsync(editedImagePath); + } + return ( @@ -28,20 +57,20 @@ export default function ShareWork() { }} > + { - // Share the work - }} + onPress={share} + disabled={!editedImagePath} /> - + ); } From 7e1fcb26379aefe4cf534490e84ac47cc31b867a Mon Sep 17 00:00:00 2001 From: robygolee Date: Wed, 22 May 2024 10:46:46 +0200 Subject: [PATCH 4/8] 3 - eas --- app.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/app.json b/app.json index e25b6d7..30c4432 100644 --- a/app.json +++ b/app.json @@ -41,6 +41,18 @@ }, "runtimeVersion": { "policy": "appVersion" + }, + "extra": { + "router": { + "origin": false + }, + "eas": { + "projectId": "b19fc96e-91a2-416a-a658-9271e4d93855" + } + }, + "owner": "robertogolee", + "updates": { + "url": "https://u.expo.dev/b19fc96e-91a2-416a-a658-9271e4d93855" } } } From 3af02e2b8d5597aa9520d41a0f28ca68aa24272a Mon Sep 17 00:00:00 2001 From: robygolee Date: Wed, 22 May 2024 10:53:23 +0200 Subject: [PATCH 5/8] add github workflow --- .github/workflows/eas-update.yml | 40 ++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 .github/workflows/eas-update.yml diff --git a/.github/workflows/eas-update.yml b/.github/workflows/eas-update.yml new file mode 100644 index 0000000..c8ac563 --- /dev/null +++ b/.github/workflows/eas-update.yml @@ -0,0 +1,40 @@ +name: preview +on: pull_request + +jobs: + update: + name: EAS Update + runs-on: ubuntu-latest + permissions: + contents: read + pull-requests: write + steps: + - name: Check for EXPO_TOKEN + run: | + if [ -z "${{ secrets.EXPO_TOKEN }}" ]; then + echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions" + exit 1 + fi + + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version: 18.x + cache: 'npm' + + - name: Setup EAS + uses: expo/expo-github-action@v8 + with: + eas-version: latest + token: ${{ secrets.EXPO_TOKEN }} + + - name: Install dependencies + run: npm install + + - name: Create preview + uses: expo/expo-github-action/preview@v8 + with: + command: eas update --auto From dabca8a93fb16db39f36b054869a34bd280cc113 Mon Sep 17 00:00:00 2001 From: robygolee Date: Wed, 22 May 2024 11:03:02 +0200 Subject: [PATCH 6/8] empty --- app.json | 1 + 1 file changed, 1 insertion(+) diff --git a/app.json b/app.json index 30c4432..c013f44 100644 --- a/app.json +++ b/app.json @@ -54,5 +54,6 @@ "updates": { "url": "https://u.expo.dev/b19fc96e-91a2-416a-a658-9271e4d93855" } + } } From cd30492b8390c4619ab06e7f9b2d49bf41998f70 Mon Sep 17 00:00:00 2001 From: robygolee Date: Wed, 22 May 2024 11:08:29 +0200 Subject: [PATCH 7/8] add watermarks --- app/works/[id]/share.tsx | 33 ++++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/app/works/[id]/share.tsx b/app/works/[id]/share.tsx index 35df8ad..22910d4 100644 --- a/app/works/[id]/share.tsx +++ b/app/works/[id]/share.tsx @@ -6,6 +6,7 @@ import {LoadingShade} from "@/components/LoadingShade"; import ImagePicker from "react-native-image-crop-picker"; import {useState} from "react"; import * as Sharing from "expo-sharing"; +import Marker, {ImageFormat, Position, TextBackgroundType} from "react-native-image-marker"; export default function ShareWork() { const dimensions = useWindowDimensions(); @@ -24,13 +25,43 @@ export default function ShareWork() { ); async function crop() { + const image = await ImagePicker.openCropper({ path: work.images.web.url, width: 300, height: 300, mediaType: "photo", }); - setEditedImagePath(normalizeFilePath(image.path)); + + const markedImagePath = await Marker.markText({ + backgroundImage: { + src: image.path, + scale: 1, + }, + watermarkTexts: [ + { + text: "#cma", + position: { + position: Position.bottomRight, + }, + style: { + color: "#fff", + fontSize: 20, + textBackgroundStyle: { + type: TextBackgroundType.none, + color: "#000", + paddingX: 16, + paddingY: 6, + }, + }, + }, + ], + quality: 100, + filename: image.filename, + saveFormat: ImageFormat.jpg, + }); + + setEditedImagePath(normalizeFilePath(markedImagePath)); } async function share() { From 050b48c94fa2860fc5ca3a3197e66fe10fb66fc5 Mon Sep 17 00:00:00 2001 From: robygolee Date: Wed, 22 May 2024 11:16:35 +0200 Subject: [PATCH 8/8] empty 2 --- app/works/[id]/share.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/works/[id]/share.tsx b/app/works/[id]/share.tsx index 22910d4..f813a82 100644 --- a/app/works/[id]/share.tsx +++ b/app/works/[id]/share.tsx @@ -38,6 +38,7 @@ export default function ShareWork() { src: image.path, scale: 1, }, + watermarkTexts: [ { text: "#cma",