initial: bootstrap from BukidBountyApp base
This commit is contained in:
Jonathan Sykes
206
resources/js/Pages/PhotoViewer.vue
Normal file
206
resources/js/Pages/PhotoViewer.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<script setup>
|
||||
import { usePageTitle } from '../composables/Core/usePageTitle';
|
||||
usePageTitle('Photo Viewer');
|
||||
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useNavigate } from '../composables/Core/useNavigate'
|
||||
import { useFileBlobCache } from '../composables/useFileBlobCache'
|
||||
|
||||
const props = defineProps({
|
||||
target: { type: String, default: null }
|
||||
})
|
||||
|
||||
const { navigate } = useNavigate()
|
||||
import BackButton from '../Components/Core/BackButton.vue'
|
||||
const { getFile } = useFileBlobCache()
|
||||
|
||||
// Data state
|
||||
const imageUrl = ref('')
|
||||
const photoHash = ref('')
|
||||
const isLoading = ref(true)
|
||||
|
||||
// Initialize component
|
||||
onMounted(async () => {
|
||||
document.title = 'Photo Viewer'
|
||||
|
||||
// Get photo hash from prop first, then fallback to query params for direct URL access
|
||||
const urlParams = new URL(window.location.href).searchParams
|
||||
photoHash.value = props.target || urlParams.get('hash') || urlParams.get('photo_hash')
|
||||
|
||||
if (!photoHash.value) {
|
||||
console.error('Photo hash not found')
|
||||
isLoading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
imageUrl.value = await getFile(photoHash.value)
|
||||
isLoading.value = false
|
||||
})
|
||||
|
||||
// Go back
|
||||
const goBack = () => {
|
||||
window.history.back() || navigate({ page: 'Home' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="photo-viewer-page min-vh-100 d-flex flex-column">
|
||||
<div class="viewer-header p-3 d-flex align-items-center justify-content-between">
|
||||
<BackButton
|
||||
fallback="Home"
|
||||
className="photo-viewer-back"
|
||||
text=""
|
||||
/>
|
||||
<h5 class="m-0 fw_6 text-white">Photo Details</h5>
|
||||
<div style="width: 40px;"></div> <!-- Spacer for balance -->
|
||||
</div>
|
||||
|
||||
<div class="viewer-content flex-grow-1 d-flex align-items-center justify-content-center p-3">
|
||||
<!-- Loading State -->
|
||||
<div v-if="isLoading" class="text-center">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Photo Display -->
|
||||
<transition name="zoom">
|
||||
<div v-if="!isLoading && imageUrl" class="photo-frame shadow-2xl">
|
||||
<img
|
||||
:src="imageUrl"
|
||||
alt="Viewed Photo"
|
||||
class="full-photo"
|
||||
>
|
||||
<div class="photo-actions">
|
||||
<a :href="imageUrl" :download="`photo-${photoHash}.jpg`" class="btn-action">
|
||||
<i class="fas fa-download"></i> Save
|
||||
</a>
|
||||
<button @click="goBack" class="btn-action">
|
||||
<i class="fas fa-times"></i> Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-if="!isLoading && !imageUrl" class="text-center text-muted">
|
||||
<i class="fas fa-exclamation-circle fa-4x mb-3 opacity-20"></i>
|
||||
<h5>Unable to display photo</h5>
|
||||
<button @click="goBack" class="btn btn-primary mt-3">Go Back</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.photo-viewer-page {
|
||||
background: #000;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.viewer-header {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.viewer-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.photo-frame {
|
||||
max-width: 95vw;
|
||||
max-height: 85vh;
|
||||
position: relative;
|
||||
background: #111;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.full-photo {
|
||||
max-width: 100%;
|
||||
max-height: 85vh;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.photo-actions {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
background: linear-gradient(transparent, rgba(0,0,0,0.8));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.photo-frame:hover .photo-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(5px);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 8px 20px;
|
||||
border-radius: 30px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.zoom-enter-active, .zoom-leave-active {
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.zoom-enter-from, .zoom-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
:deep(.photo-viewer-back) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
:deep(.photo-viewer-back .icon-container) {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.photo-actions {
|
||||
opacity: 1; /* Always show buttons on mobile */
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user