Merge pull request 'pfp cropping' (#12) from pfp-cropping into main

Reviewed-on: #12
Reviewed-by: SauceyRed <saucey@saucey.red>

components/CropPopup.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="fullscreen-container">
+    <div id="crop-preview">
+      <img ref="image" :src="imageSrc" style="min-height: 35dvh;">
+      <Button text="Crop" :callback="cropImage"></Button>
+      <Button text="Cancel" :callback="closePopup"></Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Cropper from 'cropperjs';
+
+const props = defineProps({
+  imageSrc: String,
+  onCrop: Function,
+  onClose: Function,
+});
+
+const image = ref<HTMLImageElement | null>(null);
+const cropper = ref<Cropper | null>(null);
+
+watch(image, (newValue) => {
+  if (newValue) {
+    cropper.value = new Cropper(newValue)
+    const cropperCanvas = cropper.value.getCropperCanvas()
+    const cropperSelection = cropper.value.getCropperSelection()
+    
+    if (cropperCanvas) {
+      cropperCanvas.background = false
+    }
+
+    if (cropperSelection) {
+      cropperSelection.precise = true
+      cropperSelection.aspectRatio = 1
+      cropperSelection.initialCoverage = 1
+    }
+  }
+});
+
+async function cropImage() {
+  if (cropper) {
+    const selection = cropper.value?.getCropperSelection();
+    if (selection) {
+      const canvas = await selection.$toCanvas({width: 256, height: 256})
+
+      canvas.toBlob((blob) => {
+        if (blob && props.onCrop) {
+          const reader = new FileReader();
+          reader.addEventListener("load", () => {
+            if (reader.result && typeof reader.result === 'string') {
+              if (props.onCrop) {
+                props.onCrop(blob, reader.result)
+              }
+            }
+          });
+          const file = new File([blob], 'preview.png', { type: 'image/png' })
+          reader.readAsDataURL(file)
+        }
+      });
+    }
+  }
+}
+
+function closePopup() {
+  if (props.onClose) {
+    props.onClose();
+  }
+}
+</script>
+
+<style scoped>
+.button {
+  margin: 0.2em
+}
+
+#fullscreen-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+#crop-preview {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

components/MemberEntry.vue

@@ -3,7 +3,7 @@
         <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
         <Icon v-else class="member-avatar" name="lucide:user" />
         <span class="member-display-name">{{ props.member.user.display_name ?? props.member.user.username }}</span>
-        <UserPopup v-if="isPopupVisible" :user="props.member.user" class="profile-popup" />
+        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
 </template>
 
@@ -32,9 +32,4 @@ const hidePopup = () => {
 .member-item {
     position: relative; /* Set the position to relative for absolute positioning of the popup */
 }
-
-.profile-popup {
-    position: absolute; /* Use absolute positioning */
-    left: -100px; /* Adjust this value to position the popup to the left */
-}
 </style>

components/Settings/UserSettings/Account.vue

@@ -86,8 +86,4 @@ async function deleteAccount() {
   color: var(--text-color);
   background-color: var(--accent-color);
 }
-
-.profile-popup {
-  margin-left: 2dvw;
-}
 </style>

components/Settings/UserSettings/Profile.vue

@@ -20,15 +20,25 @@
         <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
       </div>
 
-      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
+      <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
+
     </div>
   </div>
+  <CropPopup
+    v-if="isCropPopupVisible"
+    :imageSrc="cropImageSrc"
+    :onCrop="handleCrop"
+    :onClose="closeCropPopup"
+  />
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/Button.vue';
 import type { UserResponse } from '~/types/interfaces';
 
+let newPfpFile: File;
+const isCropPopupVisible = ref(false);
+const cropImageSrc = ref("")
+;
 const { fetchUser } = useAuth();
 
 const user: UserResponse | undefined = await fetchUser()
@@ -36,8 +46,6 @@ if (!user) {
   alert("could not fetch user info, aborting :(")
 }
 
-let newPfpFile: File;
-
 async function saveChanges() {
   if (!user) return;
   
@@ -64,7 +72,7 @@ async function saveChanges() {
     alert('success!!')
   } catch (error: any) {
     if (error?.response?.status !== 200) {
-      alert(`error ${error?.response?.status} met whilst trying to update profile info`)
+      alert(`error ${error?.response?.status} met whilst trying to update profile info\n"${error?.response._data?.message}"`)
     }
   }
 };
@@ -87,12 +95,11 @@ async function changeAvatar() {
       const file = input.files[0];
       if (!file) return;
 
-      newPfpFile = file
-      
       const reader = new FileReader();
-      reader.addEventListener("onload", () => {
+      reader.addEventListener("load", () => {
         if (reader.result && typeof reader.result === 'string') {
-          user.avatar = reader.result;
+          cropImageSrc.value = reader.result;
+          isCropPopupVisible.value = true;
         }
       });
       reader.readAsDataURL(file);
@@ -101,6 +108,19 @@ async function changeAvatar() {
 
   input.click()
 }
+
+
+function handleCrop(blob: Blob, url: string) {
+  if (!user) return;
+
+  user.avatar = url;
+  newPfpFile = new File([blob], 'avatar.png', { type: 'image/png' })
+  closeCropPopup()
+}
+
+function closeCropPopup() {
+  isCropPopupVisible.value = false
+}
 </script>
 
 <style scoped>
@@ -125,7 +145,7 @@ async function changeAvatar() {
   background-color: var(--accent-color);
 }
 
-.profile-popup {
+#profile-popup {
   margin-left: 2dvw;
 }
 </style>

components/UserPopup.vue

@@ -59,12 +59,14 @@ const props = defineProps<{
   width: 96px;
   height: 96px;
   border: 5px solid #4b3018;
+  background-color: var(--secondary-color);
   border-radius: 100%;
   position: absolute;
   left: 16px;
   top: 16px;
 }
 
+
 #display-name {
   margin-top: 60px;
   margin-bottom: 0;