From ede73ff931cb90d256fa4262d07c3317df3c69c9 Mon Sep 17 00:00:00 2001 From: Sean <83432253+MegaTheLEGEND@users.noreply.github.com> Date: Fri, 9 Aug 2024 19:18:59 -0700 Subject: [PATCH 1/3] add stuff add open in google maps and confirm on close --- client/components/instant/instant.tsx | 49 +++++++++------- client/components/navbar/navbar.tsx | 22 ++++++- client/package-lock.json | 83 ++++++++++++++++++++++++--- client/package.json | 3 + 4 files changed, 128 insertions(+), 29 deletions(-) diff --git a/client/components/instant/instant.tsx b/client/components/instant/instant.tsx index 6a44d80..a07626a 100644 --- a/client/components/instant/instant.tsx +++ b/client/components/instant/instant.tsx @@ -91,28 +91,37 @@ export default function Instant({ instance, mymojis }: _Instant) { else { return
{instance.user.username.toUpperCase().charAt(0)}
} } - async function getLocation() { - - if (instance.location == undefined) { - setLocation("No location data"); - return; - } + async function getLocation() { + if (instance.location == undefined) { + setLocation("No location data"); + return; + } - let lat = instance.location.latitude; - let long = instance.location.longitude; - /* console.log(lat, long); */ - - try { - let response = await axios.get( - `https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode?location=${long},${lat}&outSR=&forStorage=false&f=pjson` - ) - /* console.log(response.data) */ - setLocation(response.data.address.Address + ", " + response.data.address.City) - } catch (error) { - console.log(error); - setLocation("No location data"); - } + let lat = instance.location.latitude; + let long = instance.location.longitude; + /* console.log(lat, long); */ + + try { + let response = await axios.get( + `https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode?location=${long},${lat}&outSR=&forStorage=false&f=pjson` + ) + /* console.log(response.data) */ + const address = response.data.address.Address; + const city = response.data.address.City; + const locationString = `${address}, ${city}`; + const googleMapsLink = `https://www.google.com/maps?q=${lat},${long}`; + + setLocation( +
+

{locationString}

+ View on Google Maps +
+ ); + } catch (error) { + console.log(error); + setLocation("No location data"); } +} let [reactionSuccess, setReactionSuccess] = useState(false); let [reactionFailure, setReactionFailure] = useState(false); diff --git a/client/components/navbar/navbar.tsx b/client/components/navbar/navbar.tsx index 043eed5..4de2579 100644 --- a/client/components/navbar/navbar.tsx +++ b/client/components/navbar/navbar.tsx @@ -65,7 +65,16 @@ export default function Navbar() {
 
{/*
*/} - + @@ -91,7 +100,16 @@ export default function Navbar() { - + diff --git a/client/package-lock.json b/client/package-lock.json index 5bdeb22..21cfb26 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -18,6 +18,7 @@ "@types/react-dom": "18.2.5", "@vercel/analytics": "^1.0.1", "axios": "^1.4.0", + "cropperjs": "^1.6.2", "file-saver": "^2.0.5", "formidable": "^3.4.0", "happy-headers": "^1.5.0", @@ -30,8 +31,10 @@ "next-i18next": "^14.0.0", "nextjs-google-analytics": "^2.3.3", "react": "18.2.0", + "react-cropper": "^2.3.3", "react-dom": "18.2.0", "react-draggable": "^4.4.5", + "react-easy-crop": "^5.0.8", "react-i18next": "^13.0.1", "react-multi-carousel": "^2.8.4", "react-phone-input-2": "^2.15.1", @@ -2016,9 +2019,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001504", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001504.tgz", - "integrity": "sha512-5uo7eoOp2mKbWyfMXnGO9rJWOGU8duvzEiYITW+wivukL7yHH4gX9yuRaobu6El4jPxo6jKZfG+N6fB621GD/Q==", + "version": "1.0.30001651", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz", + "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==", "funding": [ { "type": "opencollective", @@ -2032,7 +2035,8 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ] + ], + "license": "CC-BY-4.0" }, "node_modules/chokidar": { "version": "3.5.3", @@ -2146,6 +2150,12 @@ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" }, + "node_modules/cropperjs": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz", + "integrity": "sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==", + "license": "MIT" + }, "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", @@ -2980,6 +2990,12 @@ "node": ">=0.10.0" } }, + "node_modules/normalize-wheel": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz", + "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==", + "license": "BSD-3-Clause" + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -3238,6 +3254,18 @@ "node": ">=0.10.0" } }, + "node_modules/react-cropper": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/react-cropper/-/react-cropper-2.3.3.tgz", + "integrity": "sha512-zghiEYkUb41kqtu+2jpX2Ntigf+Jj1dF9ew4lAobPzI2adaPE31z0p+5TcWngK6TvmWQUwK3lj4G+NDh1PDQ1w==", + "license": "MIT", + "dependencies": { + "cropperjs": "^1.5.13" + }, + "peerDependencies": { + "react": ">=17.0.2" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -3263,6 +3291,20 @@ "react-dom": ">= 16.3.0" } }, + "node_modules/react-easy-crop": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.0.8.tgz", + "integrity": "sha512-KjulxXhR5iM7+ATN2sGCum/IyDxGw7xT0dFoGcqUP+ysaPU5Ka7gnrDa2tUHFHUoMNyPrVZ05QA+uvMgC5ym/g==", + "license": "MIT", + "dependencies": { + "normalize-wheel": "^1.0.1", + "tslib": "^2.0.1" + }, + "peerDependencies": { + "react": ">=16.4.0", + "react-dom": ">=16.4.0" + } + }, "node_modules/react-i18next": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.0.1.tgz", @@ -5356,9 +5398,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001504", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001504.tgz", - "integrity": "sha512-5uo7eoOp2mKbWyfMXnGO9rJWOGU8duvzEiYITW+wivukL7yHH4gX9yuRaobu6El4jPxo6jKZfG+N6fB621GD/Q==" + "version": "1.0.30001651", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz", + "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==" }, "chokidar": { "version": "3.5.3", @@ -5444,6 +5486,11 @@ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" }, + "cropperjs": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz", + "integrity": "sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==" + }, "csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", @@ -6032,6 +6079,11 @@ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" }, + "normalize-wheel": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz", + "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==" + }, "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -6229,6 +6281,14 @@ "loose-envify": "^1.1.0" } }, + "react-cropper": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/react-cropper/-/react-cropper-2.3.3.tgz", + "integrity": "sha512-zghiEYkUb41kqtu+2jpX2Ntigf+Jj1dF9ew4lAobPzI2adaPE31z0p+5TcWngK6TvmWQUwK3lj4G+NDh1PDQ1w==", + "requires": { + "cropperjs": "^1.5.13" + } + }, "react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -6247,6 +6307,15 @@ "prop-types": "^15.8.1" } }, + "react-easy-crop": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.0.8.tgz", + "integrity": "sha512-KjulxXhR5iM7+ATN2sGCum/IyDxGw7xT0dFoGcqUP+ysaPU5Ka7gnrDa2tUHFHUoMNyPrVZ05QA+uvMgC5ym/g==", + "requires": { + "normalize-wheel": "^1.0.1", + "tslib": "^2.0.1" + } + }, "react-i18next": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.0.1.tgz", diff --git a/client/package.json b/client/package.json index df0e314..01afbe9 100644 --- a/client/package.json +++ b/client/package.json @@ -19,6 +19,7 @@ "@types/react-dom": "18.2.5", "@vercel/analytics": "^1.0.1", "axios": "^1.4.0", + "cropperjs": "^1.6.2", "file-saver": "^2.0.5", "formidable": "^3.4.0", "happy-headers": "^1.5.0", @@ -31,8 +32,10 @@ "next-i18next": "^14.0.0", "nextjs-google-analytics": "^2.3.3", "react": "18.2.0", + "react-cropper": "^2.3.3", "react-dom": "18.2.0", "react-draggable": "^4.4.5", + "react-easy-crop": "^5.0.8", "react-i18next": "^13.0.1", "react-multi-carousel": "^2.8.4", "react-phone-input-2": "^2.15.1", From 0472fbfb0ed1d774f50476d29be9080768b6fe9a Mon Sep 17 00:00:00 2001 From: Sean <83432253+MegaTheLEGEND@users.noreply.github.com> Date: Fri, 9 Aug 2024 21:48:09 -0700 Subject: [PATCH 2/3] music add and time fix Add current music and make the time signature of each instant match that of the app. --- client/components/instant/instant.module.scss | 64 ++++++++++++++++++- client/components/instant/instant.tsx | 33 +++++++++- client/models/instance.ts | 55 ++++++++++------ 3 files changed, 131 insertions(+), 21 deletions(-) diff --git a/client/components/instant/instant.module.scss b/client/components/instant/instant.module.scss index 7e6e0c3..7e2db91 100644 --- a/client/components/instant/instant.module.scss +++ b/client/components/instant/instant.module.scss @@ -311,4 +311,66 @@ margin-right: 0px; margin-bottom: 12px; } -} \ No newline at end of file + + .musicContainer { + display: flex; + align-items: center; + gap: 15px; + padding: 4px; + border-radius: 5px; + background-color: #0e1b29; + cursor: pointer; /* Indicate that it is clickable */ + position: relative; /* For tooltip positioning */ + + &:hover::after { + content: attr(title); /* Use the title attribute for the tooltip */ + position: absolute; + bottom: 100%; /* Position above the element */ + left: 50%; + transform: translateX(-50%); + background-color: #333; + color: #fff; + padding: 5px; + border-radius: 5px; + white-space: nowrap; /* Prevent text wrapping */ + font-size: 12px; + z-index: 10; + opacity: 0.9; + } + } + + + .musicCoverArt { + width: 40px; + height: 40px; + border-radius: 10%; + object-fit: cover; + } + + .musicDetails { + display: flex; + flex-direction: column; + } + + .musicTitle { + margin: 0; + font-size: 10px; + font-weight: bold; + } + + .musicArtist { + margin: 0; + font-size: 9px; + color: #555; + } + + + .noMusicTitle { + font-size: 10px; + color: rgb(158, 158, 158); + } + + + +} + diff --git a/client/components/instant/instant.tsx b/client/components/instant/instant.tsx index a07626a..43fdff2 100644 --- a/client/components/instant/instant.tsx +++ b/client/components/instant/instant.tsx @@ -21,13 +21,14 @@ interface _Instant { } export default function Instant({ instance, mymojis }: _Instant) { - console.log(instance.user.uid) + console.log(instance.user.uid + " aka " + instance.user.username) let router = useRouter(); let [comment, setComment] = useState(""); let [commentLoading, setCommentLoading] = useState(false); let [location, setLocation] = useState("loading..."); + let [music, setMusic] = useState("loading..."); function sendComment() { setCommentLoading(true); @@ -122,6 +123,34 @@ export default function Instant({ instance, mymojis }: _Instant) { setLocation("No location data"); } } + +async function getMusicData() { + if (instance.music === undefined) { + setMusic(

No music data

); + return; + } + + const { artwork: coverArt, track: songTitle, artist: songArtist, provider: musicProvider, openUrl: musicUrl } = instance.music; + + try { + setMusic( +
window.open(musicUrl, '_blank')} + title={`Open in ${musicProvider}`} + > + Cover Art +
+

🎵 {songTitle}

+

by {songArtist}

+
+
+ ); + } catch (error) { + console.log(error); + setMusic(

No music data

); + } +} let [reactionSuccess, setReactionSuccess] = useState(false); let [reactionFailure, setReactionFailure] = useState(false); @@ -193,6 +222,7 @@ export default function Instant({ instance, mymojis }: _Instant) { useEffect(() => { getLocation(); + getMusicData(); }, []) let carouselRef = createRef(); @@ -206,6 +236,7 @@ export default function Instant({ instance, mymojis }: _Instant) {
@{instance.user.username}
+
{music}
{location}
{instance.creationdate}
diff --git a/client/models/instance.ts b/client/models/instance.ts index e0d44e6..662b39e 100644 --- a/client/models/instance.ts +++ b/client/models/instance.ts @@ -17,9 +17,22 @@ class Instance { primary: string; secondary: string; btsMedia: string | undefined; - - // make a constructor - constructor(user: User, realmojis: Realmoji[], comments: Comment[], location: { latitude: number, longitude: number } | undefined, creationdate: string ,caption: string, instanceid: string, primary: string, secondary: string, btsMedia: string | undefined) { + music: any; + + + constructor( + user: User, + realmojis: Realmoji[], + comments: Comment[], + location: { latitude: number, longitude: number } | undefined, + creationdate: string, + caption: string, + instanceid: string, + primary: string, + secondary: string, + btsMedia: string | undefined, + music: any + ) { this.user = user; this.realmojis = realmojis; this.comments = comments; @@ -30,6 +43,7 @@ class Instance { this.primary = primary; this.secondary = secondary; this.btsMedia = btsMedia; + this.music = music; } // static method to create instances (old api) @@ -38,10 +52,11 @@ class Instance { let caption = raw.caption; let instanceid = raw.id; - let primary = raw.photoURL; - let secondary = raw.secondaryPhotoURL; - let creationdate = new Date(raw.creationDate).toLocaleString(undefined, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }); - + let primary = raw.primary.url; + let secondary = raw.secondary.url; + + let creationdate = raw.takenAt ? new Date(raw.takenAt).toLocaleString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit', month: 'short', day: 'numeric' }) : "no date available"; + let raw_realmojis = raw.realMojis; let realmojis: Realmoji[] = []; for (let raw_moji of raw_realmojis) { @@ -52,29 +67,30 @@ class Instance { if (raw.location) { let lat = raw.location._latitude; let long = raw.location._longitude; - - initial_location = { latitude: lat, longitude: long} + initial_location = { latitude: lat, longitude: long }; } - let location = initial_location + let location = initial_location; let comments: Comment[] = []; for (let raw_comment of raw.comment) { comments.push(Comment.create(raw_comment)); } - return new Instance(user, realmojis, comments, location, creationdate, caption, instanceid, primary, secondary, ""); + + let music: any = raw.music ? raw.music : undefined; + + return new Instance(user, realmojis, comments, location, creationdate, caption, instanceid, primary, secondary, "", music); } // same but new api static async moment(raw: any, rawuser: any) { let user = User.create(rawuser); - let caption = raw.caption; let instanceid = raw.id; let primary = raw.primary.url; let secondary = raw.secondary.url; - let creationdate = - raw.creationDate ? new Date(raw.creationDate).toLocaleString(undefined, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }) : "no date available" + + let creationdate = raw.takenAt ? new Date(raw.takenAt).toLocaleString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit', month: 'short', day: 'numeric' }) : "no date available"; let raw_realmojis = raw.realMojis; let realmojis: Realmoji[] = []; @@ -86,10 +102,9 @@ class Instance { if (raw.location) { let lat = raw.location.latitude; let long = raw.location.longitude; - - initial_location = { latitude: lat, longitude: long} + initial_location = { latitude: lat, longitude: long }; } - let location = initial_location + let location = initial_location; let comments: Comment[] = []; for (let raw_comment of raw.comments) { @@ -101,8 +116,10 @@ class Instance { bts = raw.btsMedia.url; } - return new Instance(user, realmojis, comments, location, creationdate ,caption, instanceid, primary, secondary, bts); + let music: any = raw.music ? raw.music : undefined; + + return new Instance(user, realmojis, comments, location, creationdate, caption, instanceid, primary, secondary, bts, music); } } -export default Instance; \ No newline at end of file +export default Instance; From cc9126f1dc832a9b4b44566a199886d5cf0526f0 Mon Sep 17 00:00:00 2001 From: Sean <83432253+MegaTheLEGEND@users.noreply.github.com> Date: Fri, 9 Aug 2024 22:01:34 -0700 Subject: [PATCH 3/3] fix realmoji names make the realmoji pfp show the name of the sender on hover --- client/components/instant/instant.tsx | 116 +++++++++++++------------- 1 file changed, 59 insertions(+), 57 deletions(-) diff --git a/client/components/instant/instant.tsx b/client/components/instant/instant.tsx index 43fdff2..a2aea87 100644 --- a/client/components/instant/instant.tsx +++ b/client/components/instant/instant.tsx @@ -274,63 +274,65 @@ async function getMusicData() { { !addingmoji ?
- { - instance.realmojis.length > 5 ? -
-
carouselRef.current?.previous(carouselRef.current.state.currentSlide)}> - -
-
- : null - } - { - - { - instance.realmojis.map((realmoji) => { - return ( - -
-
{realmoji.emoji}
- -
- - ) - }) - } - - } - { - instance.realmojis.length > 5 ? -
-
carouselRef.current?.next(carouselRef.current.state.currentSlide)}> - -
-
: null - } -
+ { + instance.realmojis.length > 5 ? +
+
carouselRef.current?.previous(carouselRef.current.state.currentSlide)}> + +
+
+ : null + } + { + + { + instance.realmojis.map((realmoji) => { + return ( + +
+
{realmoji.emoji}
+ +
+ + ) + }) + } + + } + { + instance.realmojis.length > 5 ? +
+
carouselRef.current?.next(carouselRef.current.state.currentSlide)}> + +
+
: null + } + :
{/*