BarangaySystem/resources/js/Pages/PhotoViewer.vue

<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>