diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js index 869d0dee5..d45420255 100644 --- a/web/source/frontend/index.js +++ b/web/source/frontend/index.js @@ -76,6 +76,7 @@ lightbox.addFilter('itemData', (item) => { width: parseInt(el.dataset.pswpWidth), height: parseInt(el.dataset.pswpHeight), parentStatus: el.dataset.pswpParentStatus, + attachmentId: el.dataset.pswpAttachmentId, }; } return item; @@ -180,29 +181,40 @@ Array.from(document.getElementsByClassName("plyr-video")).forEach((video) => { let player = new Plyr(video, { title: video.title, - settings: ["loop"], + settings: [], + controls: ['play-large', 'play', 'progress', 'current-time', 'volume', 'mute', 'fullscreen'], disableContextMenu: false, hideControls: false, tooltips: { controls: true, seek: true }, iconUrl: "/assets/plyr.svg", + invertTime: false, listeners: { fullscreen: () => { + // Check if the photoswipe lightbox is + // open with this as the current slide. + const alreadyInLightbox = ( + lightbox.pswp !== undefined && + video.dataset.pswpAttachmentId === lightbox.pswp.currSlide.data.attachmentId + ); - if (lightbox.pswp !== undefined) { - console.log(lightbox.pswp.currSlide); + if (alreadyInLightbox) { + // If this video is already open as the + // current photoswipe slide, the fullscreen + // button toggles proper fullscreen. + player.fullscreen.toggle(); + } else { + // Otherwise the fullscreen button opens + // the video as current photoswipe slide. + // + // (Don't pause the video while it's + // being transitioned to a slide.) + if (player.playing) { + setTimeout(() => player.play(), 1); + } + lightbox.loadAndOpen(parseInt(video.dataset.pswpIndex), { + gallery: video.closest(".photoswipe-gallery") + }); } - - // Continue playing the video - // after it's been fullscreened. - if (player.playing) { - setTimeout(() => player.play(), 1); - } - - // Open the video as a photoswipe slide. - lightbox.loadAndOpen(parseInt(video.dataset.pswpIndex), { - gallery: video.closest(".photoswipe-gallery") - }); - return false; } } diff --git a/web/template/status_attachment.tmpl b/web/template/status_attachment.tmpl index efe30c37f..bdfafa96f 100644 --- a/web/template/status_attachment.tmpl +++ b/web/template/status_attachment.tmpl @@ -99,6 +99,7 @@ playsinline data-pswp-index="{{- .Index -}}" data-pswp-parent-status="{{- .Item.ParentStatusLink -}}" + data-pswp-attachment-id="{{- .Item.ID -}}" poster="{{- .Item.PreviewURL -}}" data-pswp-width="{{- .Item.Meta.Original.Width -}}px" data-pswp-height="{{- .Item.Meta.Original.Height -}}px" @@ -117,6 +118,7 @@ playsinline data-pswp-index="{{- .Index -}}" data-pswp-parent-status="{{- .Item.ParentStatusLink -}}" + data-pswp-attachment-id="{{- .Item.ID -}}" {{- if and .Item.PreviewURL .Item.Meta.Small.Width }} poster="{{- .Item.PreviewURL -}}" data-pswp-width="{{- .Item.Meta.Small.Width -}}px" @@ -138,6 +140,7 @@ class="photoswipe-slide" data-pswp-index="{{- .Index -}}" data-pswp-parent-status="{{- .Item.ParentStatusLink -}}" + data-pswp-attachment-id="{{- .Item.ID -}}" href="{{- .Item.URL -}}" target="_blank" data-pswp-width="{{- .Item.Meta.Original.Width -}}px"