fix: remember lightbox video volume

ts/components/lightbox/Lightbox.tsx

@@ -23,6 +23,7 @@ import { AriaLabels } from '../../util/hardcodedAriaLabels';
 import { LUCIDE_ICONS_UNICODE } from '../icon/lucide';
 import { SessionLucideIconButton } from '../icon/SessionIconButton';
 import { SessionFocusTrap } from '../SessionFocusTrap';
+import { LightboxVideo } from './LightboxVideo';
 
 type Props = {
   contentType: MIME.MIMEType | undefined;
@@ -443,9 +444,12 @@ const LightboxObject = ({
     }
 
     return (
-      <video role="button" ref={renderedRef} controls={true} style={styles.object} key={urlToLoad}>
-        <source src={urlToLoad} />
-      </video>
+      <LightboxVideo
+        key={urlToLoad}
+        renderedRef={renderedRef}
+        style={styles.object}
+        urlToLoad={urlToLoad}
+      />
     );
   }
 

ts/components/lightbox/LightboxVideo.tsx

@@ -0,0 +1,39 @@
+import type { CSSProperties, Ref, SyntheticEvent } from 'react';
+
+import { SettingsKey } from '../../data/settings-key';
+
+type Props = {
+  renderedRef: Ref<HTMLVideoElement>;
+  style: CSSProperties;
+  urlToLoad: string | undefined;
+};
+
+const isValidVolume = (volume: unknown): volume is number =>
+  typeof volume === 'number' && Number.isFinite(volume) && volume >= 0 && volume <= 1;
+
+export const LightboxVideo = ({ renderedRef, style, urlToLoad }: Props) => {
+  const handleLoadedMetadata = (event: SyntheticEvent<HTMLVideoElement>) => {
+    const savedVolume = window.getSettingValue(SettingsKey.lightboxVideoVolume);
+    if (isValidVolume(savedVolume)) {
+      const video = event.currentTarget;
+      video.volume = savedVolume;
+    }
+  };
+
+  const handleVolumeChange = (event: SyntheticEvent<HTMLVideoElement>) => {
+    void window.setSettingValue(SettingsKey.lightboxVideoVolume, event.currentTarget.volume);
+  };
+
+  return (
+    <video
+      role="button"
+      ref={renderedRef}
+      controls={true}
+      style={style}
+      onLoadedMetadata={handleLoadedMetadata}
+      onVolumeChange={handleVolumeChange}
+    >
+      <source src={urlToLoad} />
+    </video>
+  );
+};

ts/data/settings-key.ts

@@ -63,6 +63,7 @@ export const SettingsKey = {
   proLongerMessagesSent,
   proBadgesSent,
   audioAutoplay: 'audioAutoplay',
+  lightboxVideoVolume: 'lightboxVideoVolume',
   showRecoveryPhrasePrompt: 'showRecoveryPhrasePrompt',
   dismissedRecoveryPhrasePrompt: 'dismissedRecoveryPhrasePrompt',
   hideMessageRequests: 'hideMessageRequests',

ts/test/components/LightboxVideo_test.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { fireEvent } from '@testing-library/react';
+import { expect } from 'chai';
+import { createRef } from 'react';
+import Sinon from 'sinon';
+
+import { LightboxVideo } from '../../components/lightbox/LightboxVideo';
+import { SettingsKey } from '../../data/settings-key';
+import { findAllByTagName, renderComponent } from './renderComponent';
+
+describe('LightboxVideo', () => {
+  const getSettingValue = Sinon.stub();
+  const setSettingValue = Sinon.stub().resolves();
+  const originalGetSettingValue = window.getSettingValue;
+  const originalSetSettingValue = window.setSettingValue;
+
+  beforeEach(() => {
+    getSettingValue.reset();
+    setSettingValue.resetHistory();
+    window.getSettingValue = getSettingValue;
+    window.setSettingValue = setSettingValue;
+  });
+
+  afterEach(() => {
+    window.getSettingValue = originalGetSettingValue;
+    window.setSettingValue = originalSetSettingValue;
+  });
+
+  const renderVideo = () => {
+    const result = renderComponent(
+      <LightboxVideo renderedRef={createRef()} style={{}} urlToLoad="attachment.mp4" />
+    );
+    const [video] = findAllByTagName<HTMLVideoElement>(result, 'video');
+    return { result, video };
+  };
+
+  it('restores the saved volume when the video metadata loads', () => {
+    getSettingValue.withArgs(SettingsKey.lightboxVideoVolume).returns(0.35);
+    const { result, video } = renderVideo();
+
+    fireEvent.loadedMetadata(video);
+
+    expect(video.volume).to.equal(0.35);
+    result.unmount();
+  });
+
+  it('ignores an invalid saved volume', () => {
+    getSettingValue.withArgs(SettingsKey.lightboxVideoVolume).returns(2);
+    const { result, video } = renderVideo();
+
+    fireEvent.loadedMetadata(video);
+
+    expect(video.volume).to.equal(1);
+    result.unmount();
+  });
+
+  it('saves volume changes', () => {
+    const { result, video } = renderVideo();
+    video.volume = 0.42;
+
+    fireEvent.volumeChange(video);
+
+    expect(setSettingValue.calledWithExactly(SettingsKey.lightboxVideoVolume, 0.42)).to.equal(true);
+    result.unmount();
+  });
+});