jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(photos): simplify photo components

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-05-13 12:59:01 -04:00
parent b36084e090
commit 0733a0ec1c
3 changed files with 85 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/views/creators/AboutCreator.vue
View File

@@ -1,4 +1,4 @@
<template>
<template>
<div class="p-4 relative"
@mouseenter="showEditButtons = isLoggedIn && creatorProfileStore.creator?.id === brandingStore.value.id"
@mouseleave="showEditButtons = false">
@@ -46,7 +46,7 @@
{{ t('creator.sections.about.title') }}
</h1>
<div>
<div>
<!-- Description Section -->
<div>
<div v-if="!isEditMode">
@@ -68,9 +68,9 @@
rows="5"
variant="outlined"></v-textarea>
</div>
<!-- Video Section -->
<div v-if="videoUrl || isEditMode"
<div v-if="videoUrl || isEditMode"
:class="['content-section', {
'rounded-t-xl': hasImages && !isEditMode,
'rounded-xl': !hasImages && !isEditMode
@@ -98,18 +98,21 @@
</div>
<!-- Photos Section using Album component -->
<Album
v-if="hasImages || isEditMode"
:is-edit-mode="isEditMode"
:images="imageUrls"
@update:images="updateImages"
@update:isEditMode="isEditMode = $event"
:class="['content-section', {
'rounded-b-xl': videoUrl && !isEditMode,
'rounded-xl': !videoUrl && !isEditMode
}]"
/>
<div>
<!-- Use AlbumView for display mode -->
<AlbumView v-if="!isEditMode && hasImages"
:images="imageUrls"
:class="['content-section', {
'rounded-b-xl': videoUrl && !isEditMode,
'rounded-xl': !videoUrl && !isEditMode
}]"/>
<!-- Use AlbumEditor for edit mode -->
<AlbumEditor v-if="isEditMode"
:images="imageUrls"
@update:images="updateImages"/>
</div>
<!-- Contact Information Section -->
<div v-if="phoneNumber || email" class="contact-info mt-6">
<!-- Phone Number -->
@@ -135,6 +138,8 @@ import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
import {useI18n} from 'vue-i18n';
import Album from './Album.vue';
import {buildEmbedUrl, isValidYouTubeUrlOrId, extractVideoId} from '@/utils/youtube';
import AlbumEditor from "@/views/creators/AlbumEditor.vue";
import AlbumView from "@/views/creators/AlbumView.vue";
const {t} = useI18n();
const creatorProfileStore = useCreatorProfileStore();
@@ -167,17 +172,17 @@ const canSave = computed(() => {
if (!editableDescription.value || editableDescription.value.trim() === '') {
return false;
}
// Check if description is too long
if (editableDescription.value.length > 2000) {
return false;
}
// Check if video URL is invalid (if one is provided)
if (editableVideoUrl.value && !validateVideoUrl(editableVideoUrl.value)) {
return false;
}
return true;
});
@@ -199,12 +204,12 @@ function validateVideoUrl(url) {
videoUrlError.value = "";
return true;
}
if (!isValidYouTubeUrlOrId(url)) {
videoUrlError.value = t('creator.validation.invalidYoutubeUrl');
return false;
}
videoUrlError.value = "";
return true;
}
@@ -228,13 +233,13 @@ function toggleEditMode() {
// Fetch album data
async function fetchAlbumData() {
if (!brandingStore.value?.id) return;
albumId.value = brandingStore.value.id;
try {
// Try to get the album
const response = await client.get(`/api/albums/${albumId.value}`);
if (response.data && response.data.photos) {
// Store original photos for comparison
originalPhotos.value = response.data.photos;
@@ -315,7 +320,7 @@ async function saveChanges() {
if (imageUrls.value.length > 0) {
// Create or update the album
const albumId = brandingStore.value.id;
try {
// Try to create the album first (it will fail if it already exists)
await client.post('/api/albums', {
@@ -327,13 +332,13 @@ async function saveChanges() {
// Album might already exist, which is fine
console.log("Album might already exist:", error);
}
// Check for deleted photos
const deletedPhotos = originalPhotos.value.filter(originalPhoto => {
// If the photo URL is not in the current images array, it was deleted
return !imageUrls.value.includes(originalPhoto.photoUrl);
});
// Delete removed photos
for (const photo of deletedPhotos) {
try {
@@ -342,7 +347,7 @@ async function saveChanges() {
console.error("Error deleting photo:", error);
}
}
// Now add or update photos
for (let i = 0; i < imageUrls.value.length; i++) {
const imageUrl = imageUrls.value[i];
@@ -350,14 +355,14 @@ async function saveChanges() {
// This is a new image that needs to be uploaded
const photoId = crypto.randomUUID();
const formData = new FormData();
// Convert data URL to file
const response = await fetch(imageUrl);
const blob = await response.blob();
const file = new File([blob], `photo-${i}.jpg`, { type: 'image/jpeg' });
const file = new File([blob], `photo-${i}.jpg`, {type: 'image/jpeg'});
formData.append('file', file);
await client.post(`/api/albums/${albumId}/photos`, formData, {
headers: {
'Content-Type': 'multipart/form-data'
@@ -368,7 +373,7 @@ async function saveChanges() {
});
}
}
// Refresh album data after changes
await fetchAlbumData();
}

9
frontend/src/views/creators/Album.vue
View File

@@ -2,14 +2,7 @@
<div v-if="hasImages || isEditMode"
class="creator-album"
@click="handleAlbumClick">
<!-- Use AlbumView for display mode -->
<AlbumView v-if="!isEditMode"
:images="images" />
<!-- Use AlbumEditor for edit mode -->
<AlbumEditor v-if="isEditMode"
:images="images"
@update:images="updateImages" />
</div>
</template>

102
frontend/src/views/creators/AlbumEditor.vue
View File

@@ -35,7 +35,7 @@
@end="handleReorder"
>
<template #item="{ element, index }">
<div class="photo-wrapper">
<div class="photo-wrapper" @click.stop="toggleMobileControls(index)">
<div class="index-bubble">{{ index + 1 }}</div>
<img :src="element.url" :alt="'Image ' + (index + 1)" />
<!-- Processing spinner overlay -->
@@ -52,20 +52,23 @@
<button @click.stop="moveImage(index, 'up')"
class="action-btn left-btn"
:disabled="index === 0"
:title="t('moveUp')">
:title="t('moveUp')"
:class="{'mobile-active': activePhotoIndex === index}">
<v-icon>mdi-arrow-left</v-icon>
</button>
<!-- Right arrow -->
<button @click.stop="moveImage(index, 'down')"
class="action-btn right-btn"
:disabled="index === localImages.length - 1"
:title="t('moveDown')">
:title="t('moveDown')"
:class="{'mobile-active': activePhotoIndex === index}">
<v-icon>mdi-arrow-right</v-icon>
</button>
<!-- Delete button -->
<button @click.stop="deleteImage(index)"
class="action-btn delete-btn"
:title="t('delete')">
:title="t('delete')"
:class="{'mobile-active': activePhotoIndex === index}">
<v-icon>mdi-delete</v-icon>
</button>
</div>
@@ -77,7 +80,7 @@
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, onMounted, onUnmounted } from "vue";
import { useI18n } from 'vue-i18n';
import draggable from 'vuedraggable';
@@ -93,6 +96,7 @@ const emit = defineEmits(['update:images']);
const { t } = useI18n();
const fileInput = ref(null);
const localImages = ref([]);
const activePhotoIndex = ref(null); // Track which photo is currently active for mobile
onMounted(() => {
// Initialize local images with IDs and states
@@ -103,8 +107,32 @@ onMounted(() => {
isUploading: false,
file: null // Store the actual file for upload
}));
// Add event listener to close active controls when clicking outside
document.addEventListener('click', closeActiveControls);
});
// Close active controls when component is unmounted
onUnmounted(() => {
document.removeEventListener('click', closeActiveControls);
});
// Function to handle mobile control visibility
function toggleMobileControls(index) {
// If clicking the same photo, toggle the controls
if (activePhotoIndex.value === index) {
activePhotoIndex.value = null;
} else {
// Otherwise, set this photo as active
activePhotoIndex.value = index;
}
}
// Close active controls when clicking outside
function closeActiveControls() {
activePhotoIndex.value = null;
}
// Trigger file input click
function triggerFileInput() {
fileInput.value.click();
@@ -161,11 +189,13 @@ function handleFileUpload(event) {
// Delete an image
function deleteImage(index) {
localImages.value.splice(index, 1);
activePhotoIndex.value = null; // Reset active photo
emit('update:images', localImages.value.map(img => img.url));
}
// Handle reorder after drag and drop
function handleReorder() {
activePhotoIndex.value = null; // Reset active photo
emit('update:images', localImages.value.map(img => img.url));
}
@@ -176,6 +206,7 @@ function moveImage(index, direction) {
const temp = localImages.value[index];
localImages.value[index] = localImages.value[newIndex];
localImages.value[newIndex] = temp;
activePhotoIndex.value = newIndex; // Keep the moved image active
emit('update:images', localImages.value.map(img => img.url));
}
}
@@ -229,6 +260,7 @@ function moveImage(index, direction) {
@apply rounded-lg;
@apply overflow-hidden;
@apply bg-gray-100;
@apply cursor-pointer;
}
.photo-wrapper img {
@@ -253,7 +285,15 @@ function moveImage(index, direction) {
@apply z-10;
}
.photo-wrapper:hover .action-btn {
/* Show buttons on hover for desktop */
@media (hover: hover) {
.photo-wrapper:hover .action-btn {
@apply opacity-100;
}
}
/* For mobile, show buttons when photo is active */
.action-btn.mobile-active {
@apply opacity-100;
}
@@ -325,52 +365,4 @@ function moveImage(index, direction) {
.loading-overlay.uploading {
@apply bg-opacity-75;
}
</style>
<i18n>
{
"en": {
"upload": "Upload Photos",
"delete": "Delete",
"dropzoneText": "Click or drag photos here to upload",
"moveUp": "Move Left",
"moveDown": "Move Right",
"uploading": "Uploading...",
"creator": {
"sections": {
"album": {
"title": "Photos"
}
}
}
},
"fr": {
"upload": "Télécharger des photos",
"delete": "Supprimer",
"dropzoneText": "Cliquez ou glissez-déposez les photos ici",
"moveUp": "Déplacer à gauche",
"moveDown": "Déplacer à droite",
"creator": {
"sections": {
"album": {
"title": "Photos"
}
}
}
},
"es": {
"upload": "Subir fotos",
"delete": "Eliminar",
"dropzoneText": "Haga clic o arrastre las fotos aquí",
"moveUp": "Mover a la izquierda",
"moveDown": "Mover a la derecha",
"creator": {
"sections": {
"album": {
"title": "Fotos"
}
}
}
}
}
</i18n>
</style>