Skip to content

Commit

Permalink
Merge pull request #134 from MegaTheLEGEND/main
Browse files Browse the repository at this point in the history
add more features
  • Loading branch information
s-alad authored Aug 10, 2024
2 parents 4433c6e + cc9126f commit 6c58595
Show file tree
Hide file tree
Showing 6 changed files with 317 additions and 106 deletions.
64 changes: 63 additions & 1 deletion client/components/instant/instant.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -311,4 +311,66 @@
margin-right: 0px;
margin-bottom: 12px;
}
}

.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);
}



}

196 changes: 119 additions & 77 deletions client/components/instant/instant.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<string>("");
let [commentLoading, setCommentLoading] = useState<boolean>(false);
let [location, setLocation] = useState<string>("loading...");
let [music, setMusic] = useState<string>("loading...");

function sendComment() {
setCommentLoading(true);
Expand Down Expand Up @@ -91,28 +92,65 @@ export default function Instant({ instance, mymojis }: _Instant) {
else { return <div className={s.letter}>{instance.user.username.toUpperCase().charAt(0)}</div> }
}

async function getLocation() {
async function getLocation() {
if (instance.location == undefined) {
setLocation("No location data");
return;
}

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) */
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(
<div>
<p>{locationString}</p>
<a href={googleMapsLink} target="_blank" rel="noopener noreferrer">View on Google Maps</a>
</div>
);
} 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) */
setLocation(response.data.address.Address + ", " + response.data.address.City)
} catch (error) {
console.log(error);
setLocation("No location data");
}
async function getMusicData() {
if (instance.music === undefined) {
setMusic( <p className={s.noMusicTitle}>No music data</p> );
return;
}

const { artwork: coverArt, track: songTitle, artist: songArtist, provider: musicProvider, openUrl: musicUrl } = instance.music;

try {
setMusic(
<div
className={s.musicContainer}
onClick={() => window.open(musicUrl, '_blank')}
title={`Open in ${musicProvider}`}
>
<img src={coverArt} alt="Cover Art" className={s.musicCoverArt} />
<div className={s.musicDetails}>
<p className={s.musicTitle}>🎵 {songTitle}</p>
<p className={s.musicArtist}>by {songArtist}</p>
</div>
</div>
);
} catch (error) {
console.log(error);
setMusic( <p className={s.noMusicTitle}>No music data</p> );
}
}

let [reactionSuccess, setReactionSuccess] = useState<boolean>(false);
let [reactionFailure, setReactionFailure] = useState<boolean>(false);
Expand Down Expand Up @@ -184,6 +222,7 @@ export default function Instant({ instance, mymojis }: _Instant) {

useEffect(() => {
getLocation();
getMusicData();
}, [])

let carouselRef = createRef<Carousel>();
Expand All @@ -197,6 +236,7 @@ export default function Instant({ instance, mymojis }: _Instant) {
</div>
<div className={s.details}>
<div className={s.username}><Link href={profile_link}> @{instance.user.username} </Link></div>
<div> {music} </div>
<div className={s.location}> {location} </div>
<div className={s.timeposted}>{instance.creationdate}</div>
</div>
Expand Down Expand Up @@ -234,63 +274,65 @@ export default function Instant({ instance, mymojis }: _Instant) {
{
!addingmoji ?
<div className={s.realmojis}>
{
instance.realmojis.length > 5 ?
<div className={s.nextlast}>
<div className={s.add} onClick={() => carouselRef.current?.previous(carouselRef.current.state.currentSlide)}>
<FontAwesomeIcon icon={faCaretLeft} />
</div>
</div>
: null
}
{
<Carousel
responsive={{
main: {
breakpoint: {
max: 3000,
min: 1
},
items: 5,
},
}}
className={s.carousel}
slidesToSlide={2}
draggable
swipeable
renderButtonGroupOutside

arrows={false}
ref={carouselRef}
>
{
instance.realmojis.map((realmoji) => {
return (
<Link
href={realmoji.owner.uid == localStorage.getItem("uid") ?
"/me" : `/profile/${realmoji.owner.uid}`
}
key={realmoji.emoji_id}
>
<div className={s.realmoji} key={realmoji.emoji_id}>
<div className={s.moji}>{realmoji.emoji}</div>
<img src={realmoji.uri} />
</div>
</Link>
)
})
}
</Carousel>
}
{
instance.realmojis.length > 5 ?
<div className={s.nextlast}>
<div className={s.add} onClick={() => carouselRef.current?.next(carouselRef.current.state.currentSlide)}>
<FontAwesomeIcon icon={faCaretRight} />
</div>
</div> : null
}
</div>
{
instance.realmojis.length > 5 ?
<div className={s.nextlast}>
<div className={s.add} onClick={() => carouselRef.current?.previous(carouselRef.current.state.currentSlide)}>
<FontAwesomeIcon icon={faCaretLeft} />
</div>
</div>
: null
}
{
<Carousel
responsive={{
main: {
breakpoint: {
max: 3000,
min: 1
},
items: 5,
},
}}
className={s.carousel}
slidesToSlide={2}
draggable
swipeable
renderButtonGroupOutside
arrows={false}
ref={carouselRef}
>
{
instance.realmojis.map((realmoji) => {
return (
<Link
href={realmoji.owner.uid == localStorage.getItem("uid") ?
"/me" : `/profile/${realmoji.owner.uid}`
}
key={realmoji.emoji_id}
>
<div className={s.realmoji} key={realmoji.emoji_id}>
<div className={s.moji}>{realmoji.emoji}</div>
<img
src={realmoji.uri}
title={realmoji.owner.username}
/>
</div>
</Link>
)
})
}
</Carousel>
}
{
instance.realmojis.length > 5 ?
<div className={s.nextlast}>
<div className={s.add} onClick={() => carouselRef.current?.next(carouselRef.current.state.currentSlide)}>
<FontAwesomeIcon icon={faCaretRight} />
</div>
</div> : null
}
</div>
:
<div className={s.realmojis}>
{/* <div className={s.addmojis}>
Expand Down
22 changes: 20 additions & 2 deletions client/components/navbar/navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,16 @@ export default function Navbar() {
<div className={s.fake}>&nbsp;</div>
{/* <div className={s.sep}></div> */}
<span className={s.logout}>
<button onClick={() => { logout(router, localStorage); setMenu(false) }}>logout</button>
<button
onClick={() => {
const confirmLogout = window.confirm("Are you sure you want to logout?");
if (confirmLogout) {
logout(router, localStorage);
}
}}
>
Logout
</button>
</span>
<Link href={"/post"} className={s.logout}>
<button>post</button>
Expand All @@ -91,7 +100,16 @@ export default function Navbar() {
<button >realmojis</button>
</Link>
<span className={s.item}>
<button onClick={() => logout(router, localStorage)}>logout</button>
<button
onClick={() => {
const confirmLogout = window.confirm("Are you sure you want to logout?");
if (confirmLogout) {
logout(router, localStorage);
}
}}
>
Logout
</button>
</span>
<Link href={"/post"} className={s.post}>
<button>post</button>
Expand Down
Loading

0 comments on commit 6c58595

Please sign in to comment.