diff options
| -rw-r--r-- | app.rb | 29 | ||||
| -rw-r--r-- | public/js/album.js | 18 | ||||
| -rw-r--r-- | views/album.erb | 2 |
3 files changed, 30 insertions, 19 deletions
@@ -170,17 +170,9 @@ helpers do end def og_image_url - first_img = Array(@entries).find { |e| e[:type] == :image } - if first_img - fr = @rel.to_s.empty? ? first_img[:name] : "#{@rel}/#{first_img[:name]}" - return "#{request.base_url}/thumb/#{fr}" - end - first_album = Array(@albums).first - if first_album&.dig(:cover) - cr = @rel.to_s.empty? ? "#{first_album[:name]}/#{first_album[:cover]}" : "#{@rel}/#{first_album[:name]}/#{first_album[:cover]}" - return "#{request.base_url}/thumb/#{cr}" - end - nil + return nil unless @og_image_rel + type = @og_use_media ? 'media' : 'thumb' + "#{request.base_url}/#{type}/#{@og_image_rel}" end end @@ -214,6 +206,21 @@ def browse_album(rel) @albums = child_albums(dir, data) @entries = album_files(dir, data) @crumbs = breadcrumbs(rel) + + if params[:photo] && !params[:photo].empty? + photo_name = File.basename(params[:photo]) + @og_image_rel = rel.empty? ? photo_name : "#{rel}/#{photo_name}" + @og_use_media = true + else + first_img = @entries.find { |e| %i[image video].include?(e[:type]) } + @og_image_rel = if first_img + rel.empty? ? first_img[:name] : "#{rel}/#{first_img[:name]}" + else + cover = cover_candidates(dir).first + cover ? (rel.empty? ? cover : "#{rel}/#{cover}") : nil + end + end + erb :album end diff --git a/public/js/album.js b/public/js/album.js index d83cb5f..a2301c9 100644 --- a/public/js/album.js +++ b/public/js/album.js @@ -18,7 +18,10 @@ function closeLightbox() { const el = document.getElementById(id); el.pause && el.pause(); }); - history.replaceState(null, '', location.pathname + location.search); + const closeUrl = new URL(location.href); + closeUrl.searchParams.delete('photo'); + const closeQs = closeUrl.searchParams.toString(); + history.replaceState(null, '', closeUrl.pathname + (closeQs ? '?' + closeQs : '')); } function lbNav(delta) { @@ -78,8 +81,10 @@ function renderLightbox() { dl.href = e.src; dl.download = e.name; - // Update URL hash so the address bar is the shareable link - history.replaceState(null, '', location.pathname + location.search + '#photo=' + encodeURIComponent(e.name)); + // Update URL so the address bar is the shareable link + const photoUrl = new URL(location.href); + photoUrl.searchParams.set('photo', e.name); + history.replaceState(null, '', photoUrl.pathname + photoUrl.search); } function lbCopyLink() { @@ -107,10 +112,9 @@ function lbKey(ev) { // Restore lightbox from URL hash on page load window.addEventListener('DOMContentLoaded', () => { - const m = location.hash.match(/^#photo=(.+)$/); - if (m) { - const name = decodeURIComponent(m[1]); - const idx = ENTRIES.findIndex(e => e.name === name); + const photoName = new URLSearchParams(location.search).get('photo'); + if (photoName) { + const idx = ENTRIES.findIndex(e => e.name === photoName); if (idx >= 0) openLightbox(idx); } }); diff --git a/views/album.erb b/views/album.erb index 993b4d1..603aa80 100644 --- a/views/album.erb +++ b/views/album.erb @@ -106,4 +106,4 @@ const ENTRIES = <%= @entries.map { |e| e.merge(src: "/media/#{file_rel}") }.to_json %>; </script> -<script src="/js/album.js?v=5"></script> +<script src="/js/album.js?v=6"></script> |