Merge remote-tracking branch 'upstream/master'

assets/js/image_expansion.js

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

assets/js/utils/__tests__/image.spec.ts

@@ -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);

assets/js/utils/image.ts

@@ -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();
+    }
   }
 }
 

docker-compose.yml

@@ -2,6 +2,10 @@ version: '3'
 volumes:
   postgres_data: {}
   elastic_data: {}
+  app_cargo_data: {}
+  app_build_data: {}
+  app_deps_data: {}
+  app_native_data: {}
 
 services:
   app:
@@ -44,6 +48,10 @@ services:
     tty: true
     volumes:
       - .:/srv/philomena
+      - app_cargo_data:/srv/philomena/.cargo
+      - app_build_data:/srv/philomena/_build
+      - app_deps_data:/srv/philomena/deps
+      - app_native_data:/srv/philomena/priv/native
     depends_on:
       - postgres
       - elasticsearch

lib/philomena_web/plugs/user_attribution_plug.ex

@@ -24,7 +24,7 @@ defmodule PhilomenaWeb.UserAttributionPlug do
     attributes = [
       ip: remote_ip,
       fingerprint: fingerprint(conn, conn.path_info),
-      referrer: conn.assigns.referrer,
+      referrer: referrer(conn.assigns.referrer),
       user: user,
       user_agent: user_agent(conn)
     ]
@@ -47,4 +47,7 @@ defmodule PhilomenaWeb.UserAttributionPlug do
   defp fingerprint(conn, _) do
     conn.cookies["_ses"]
   end
+
+  defp referrer(nil), do: nil
+  defp referrer(r), do: String.slice(r, 0, 255)
 end