PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-30 14:57:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

Pause spoilered videos on image pages, unpause on unspoiler (#259)

Browse source 
* Pause spoilered videos on image pages, unpause on unspoiler

* Add test

* Fix comment
This commit is contained in:
Eliot Partridge 2024-05-14 21:32:45 -04:00 committed by GitHub
parent 7592b0f4d9
commit 65da36369d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/js/image_expansion.js
View file

@ -87,11 +87,12 @@ function pickAndResize(elem) {
}
const muted = store.get('unmute_videos') ? '' : 'muted';
const autoplay = elem.classList.contains('hidden') ? '' : 'autoplay'; // Fix for spoilered image pages
if (imageFormat === 'mp4') {
elem.classList.add('full-height');
elem.insertAdjacentHTML('afterbegin',
`<video controls autoplay loop ${muted} playsinline preload="auto" id="image-display"
`<video controls ${autoplay} loop ${muted} playsinline preload="auto" id="image-display"
width="${imageWidth}" height="${imageHeight}">
<source src="${uris.webm}" type="video/webm">
<source src="${uris.mp4}" type="video/mp4">
@ -104,7 +105,7 @@ function pickAndResize(elem) {
}
else if (imageFormat === 'webm') {
elem.insertAdjacentHTML('afterbegin',
`<video controls autoplay loop ${muted} playsinline id="image-display">
`<video controls ${autoplay} loop ${muted} playsinline id="image-display">
<source src="${uri}" type="video/webm">
<source src="${uri.replace(/webm$/, 'mp4')}" type="video/mp4">
<p class="block block--fixed block--warning">

13
assets/js/utils/__tests__/image.spec.ts
View file

@ -369,6 +369,19 @@ describe('Image utils', () => {
expect(mockShowElement).toHaveClass(spoilerPendingClass);
});
it('should play the video if it is present', () => {
const mockElement = document.createElement('div');
const { mockShowElement } = createImageShowElement(mockElement);
const mockVideo = document.createElement('video');
mockShowElement.appendChild(mockVideo);
const playSpy = vi.spyOn(mockVideo, 'play').mockReturnValue(Promise.resolve());
showBlock(mockElement);
expect(playSpy).toHaveBeenCalledTimes(1);
});
it('should not throw if image-filtered element is missing', () => {
const mockElement = document.createElement('div');
createImageShowElement(mockElement);

6
assets/js/utils/image.ts
View file

@ -64,9 +64,15 @@ export function showThumb(img: HTMLDivElement) {
export function showBlock(img: HTMLDivElement) {
img.querySelector('.image-filtered')?.classList.add('hidden');
const imageShowClasses = img.querySelector('.image-show')?.classList;
if (imageShowClasses) {
imageShowClasses.remove('hidden');
imageShowClasses.add('spoiler-pending');
const vidEl = img.querySelector('video');
if (vidEl) {
vidEl.play();
}
}
}