imagerepo/app/templates/reader.html

{% extends "layout.html" %}
{% block title %}{{ series_name }} - Reader{% endblock %}

{% block content %}
<div class="reader-container">
  <!-- Reader Header -->
  <div class="reader-header">
    <div class="reader-header-left">
      <a href="{{ url_for('main.gallery', tag=tag.name) }}" class="reader-back-btn" title="Back to gallery">
        <span class="back-arrow">&larr;</span>
      </a>
      <h1 class="reader-title">{{ series_name }}</h1>
      <span class="reader-page-count">{{ total_pages }} pages</span>
    </div>
    <div class="reader-header-right">
      <div class="reader-jump">
        <label for="pageJumpSelect">Jump to:</label>
        <select id="pageJumpSelect" class="reader-jump-select">
          {% for page in pages %}
            <option value="{{ page.page_number }}" {% if page.page_number == start_page %}selected{% endif %}>
              Page {{ page.page_number }}
            </option>
          {% endfor %}
        </select>
      </div>
      <button id="toggleNavBtn" class="reader-toggle-nav" title="Toggle navigation panel">
        <span class="nav-icon">&#9776;</span>
      </button>
    </div>
  </div>

  <div class="reader-body">
    <!-- Navigation Sidebar (toggleable) -->
    <aside id="readerNav" class="reader-nav">
      <div class="reader-nav-header">
        <h3>Pages</h3>
        <button id="closeNavBtn" class="reader-nav-close">&times;</button>
      </div>
      <div class="reader-nav-thumbs">
        {% for page in pages %}
          <div class="reader-nav-thumb" data-page="{{ page.page_number }}">
            <img src="{{ url_for('main.serve_image', filename=(page.image.thumb_path or page.image.filepath) | replace('/images/', '')) }}" alt="Page {{ page.page_number }}" loading="lazy">
            <span class="thumb-page-num">{{ page.page_number }}</span>
          </div>
        {% endfor %}
      </div>
    </aside>

    <!-- Main Reading Area -->
    <main id="readerMain" class="reader-main">
      <div id="readerContent" class="reader-content">
        {% if pages %}
          {% for page in pages %}
            <div class="reader-page" id="page-{{ page.page_number }}" data-page="{{ page.page_number }}">
              <img src="{{ url_for('main.serve_image', filename=page.image.filepath | replace('/images/', '')) }}"
                   alt="Page {{ page.page_number }}"
                   loading="lazy"
                   data-image-id="{{ page.image.id }}">
              <div class="page-indicator">{{ page.page_number }} / {{ total_pages }}</div>
            </div>
          {% endfor %}
        {% else %}
          <div class="reader-empty">
            <p>No pages in this series yet.</p>
            <a href="{{ url_for('main.gallery', tag=tag.name) }}" class="btn primary-btn">
              Go to gallery to add pages
            </a>
          </div>
        {% endif %}
      </div>

      <!-- Floating page indicator -->
      <div id="floatingPageIndicator" class="floating-page-indicator">
        <span id="currentPageNum">1</span> / {{ total_pages }}
      </div>

      <!-- Quick jump buttons -->
      <div class="reader-quick-nav">
        <button id="scrollToTopBtn" class="reader-quick-btn" title="Go to first page">&uarr; First</button>
        <button id="scrollToBottomBtn" class="reader-quick-btn" title="Go to last page">Last &darr;</button>
      </div>
    </main>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const readerContent = document.getElementById('readerContent');
  const pageJumpSelect = document.getElementById('pageJumpSelect');
  const floatingIndicator = document.getElementById('floatingPageIndicator');
  const currentPageNum = document.getElementById('currentPageNum');
  const readerNav = document.getElementById('readerNav');
  const toggleNavBtn = document.getElementById('toggleNavBtn');
  const closeNavBtn = document.getElementById('closeNavBtn');
  const navThumbs = document.querySelectorAll('.reader-nav-thumb');
  const scrollToTopBtn = document.getElementById('scrollToTopBtn');
  const scrollToBottomBtn = document.getElementById('scrollToBottomBtn');
  const pages = document.querySelectorAll('.reader-page');

  const startPage = {{ start_page }};
  let currentPage = startPage;
  let isNavOpen = false;

  // Scroll to starting page on load
  if (startPage > 1) {
    const targetPage = document.getElementById('page-' + startPage);
    if (targetPage) {
      setTimeout(() => {
        targetPage.scrollIntoView({ behavior: 'auto' });
      }, 100);
    }
  }

  // Track current page while scrolling
  function updateCurrentPage() {
    const scrollTop = readerContent.scrollTop;
    const viewportHeight = readerContent.clientHeight;
    const viewportCenter = scrollTop + (viewportHeight / 3);

    let newCurrentPage = 1;
    pages.forEach(page => {
      const pageTop = page.offsetTop;
      const pageBottom = pageTop + page.offsetHeight;
      if (viewportCenter >= pageTop && viewportCenter < pageBottom) {
        newCurrentPage = parseInt(page.dataset.page);
      }
    });

    if (newCurrentPage !== currentPage) {
      currentPage = newCurrentPage;
      currentPageNum.textContent = currentPage;
      pageJumpSelect.value = currentPage;

      // Update nav thumb highlight
      navThumbs.forEach(thumb => {
        thumb.classList.toggle('active', parseInt(thumb.dataset.page) === currentPage);
      });

      // Update URL without reload
      const url = new URL(window.location);
      url.searchParams.set('page', currentPage);
      history.replaceState({}, '', url);
    }
  }

  // Throttled scroll handler
  let scrollTimeout;
  readerContent.addEventListener('scroll', () => {
    if (scrollTimeout) return;
    scrollTimeout = setTimeout(() => {
      updateCurrentPage();
      scrollTimeout = null;
    }, 50);
  });

  // Jump to page from select
  pageJumpSelect.addEventListener('change', (e) => {
    const pageNum = parseInt(e.target.value);
    const targetPage = document.getElementById('page-' + pageNum);
    if (targetPage) {
      targetPage.scrollIntoView({ behavior: 'smooth' });
    }
  });

  // Toggle navigation sidebar
  toggleNavBtn.addEventListener('click', () => {
    isNavOpen = !isNavOpen;
    readerNav.classList.toggle('open', isNavOpen);
  });

  closeNavBtn.addEventListener('click', () => {
    isNavOpen = false;
    readerNav.classList.remove('open');
  });

  // Click thumbnail to jump
  navThumbs.forEach(thumb => {
    thumb.addEventListener('click', () => {
      const pageNum = parseInt(thumb.dataset.page);
      const targetPage = document.getElementById('page-' + pageNum);
      if (targetPage) {
        targetPage.scrollIntoView({ behavior: 'smooth' });
      }
      // Close nav on mobile
      if (window.innerWidth < 768) {
        isNavOpen = false;
        readerNav.classList.remove('open');
      }
    });
  });

  // Quick nav buttons
  scrollToTopBtn.addEventListener('click', () => {
    readerContent.scrollTo({ top: 0, behavior: 'smooth' });
  });

  scrollToBottomBtn.addEventListener('click', () => {
    readerContent.scrollTo({ top: readerContent.scrollHeight, behavior: 'smooth' });
  });

  // Keyboard navigation
  document.addEventListener('keydown', (e) => {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;

    switch (e.key) {
      case 'Home':
        e.preventDefault();
        readerContent.scrollTo({ top: 0, behavior: 'smooth' });
        break;
      case 'End':
        e.preventDefault();
        readerContent.scrollTo({ top: readerContent.scrollHeight, behavior: 'smooth' });
        break;
      case 'PageUp':
        e.preventDefault();
        readerContent.scrollBy({ top: -readerContent.clientHeight * 0.9, behavior: 'smooth' });
        break;
      case 'PageDown':
      case ' ':
        e.preventDefault();
        readerContent.scrollBy({ top: readerContent.clientHeight * 0.9, behavior: 'smooth' });
        break;
      case 'n':
        isNavOpen = !isNavOpen;
        readerNav.classList.toggle('open', isNavOpen);
        break;
    }
  });

  // Initial state
  updateCurrentPage();
});
</script>
{% endblock %}