Fix crashes when playing media on legacy OS

app/main.ts

@@ -324,6 +324,7 @@ function prepareUrl(
     appStartInitialSpellcheckSetting,
     userDataPath: app.getPath('userData'),
     downloadsPath: app.getPath('downloads'),
+    isLegacyOS: OS.isLegacy(),
     homePath: app.getPath('home'),
     ...moreKeys,
   }).href;

preload.js

@@ -70,6 +70,7 @@ try {
   window.getServerPublicParams = () => config.serverPublicParams;
   window.getSfuUrl = () => config.sfuUrl;
   window.isBehindProxy = () => Boolean(config.proxyUrl);
+  window.isLegacyOS = () => config.isLegacyOS === 'true';
   window.getAutoLaunch = () => {
     return ipc.invoke('get-auto-launch');
   };

ts/OS.ts

@@ -16,3 +16,16 @@ export const isWindows = (minVersion?: string): boolean => {
 
   return is.undefined(minVersion) ? true : semver.gte(osRelease, minVersion);
 };
+
+export const isLegacy = (): boolean => {
+  if (process.platform === 'darwin') {
+    // 17.0.0 - is macOS 10.13
+    return semver.lt(os.release(), '17.0.0');
+  }
+
+  if (process.platform === 'win32') {
+    return semver.lt(os.release(), '9.0.0');
+  }
+
+  return false;
+};

ts/components/Lightbox.tsx

@@ -18,8 +18,10 @@ import { IMAGE_PNG, isImage, isVideo } from '../types/MIME';
 import type { LocalizerType } from '../types/Util';
 import type { MediaItemType, MessageAttributesType } from '../types/MediaItem';
 import { formatDuration } from '../util/formatDuration';
+import { showToast } from '../util/showToast';
 import { useRestoreFocus } from '../hooks/useRestoreFocus';
 import * as log from '../logging/log';
+import { ToastUnableToLoadAttachment } from './ToastUnableToLoadAttachment';
 
 export type PropsType = {
   children?: ReactNode;
@@ -453,6 +455,25 @@ export function Lightbox({
           />
         );
       }
+    } else if (isVideoTypeSupported && window.isLegacyOS()) {
+      const onLegacyClick = (event: React.MouseEvent<HTMLVideoElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        showToast(ToastUnableToLoadAttachment);
+      };
+
+      content = (
+        <video
+          className="Lightbox__object"
+          controls={false}
+          key={objectURL}
+          loop={false}
+          onClick={onLegacyClick}
+        >
+          <source src={objectURL} />
+        </video>
+      );
     } else if (isVideoTypeSupported) {
       const shouldLoop = loop || isAttachmentGIF || isViewOnce;
 

ts/components/conversation/GIF.tsx

@@ -178,7 +178,7 @@ export const GIF: React.FC<Props> = props => {
   }
 
   let gif: JSX.Element | undefined;
-  if (isNotDownloaded || isPending) {
+  if (isNotDownloaded || isPending || window.isLegacyOS()) {
     gif = (
       <Blurhash
         hash={attachment.blurHash || defaultBlurHash(theme)}

ts/components/conversation/MessageAudio.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { noop } from 'lodash';
 
 import { assert } from '../../util/assert';
+import { showToast } from '../../util/showToast';
 import type { LocalizerType } from '../../types/Util';
 import type { AttachmentType } from '../../types/Attachment';
 import { hasNotDownloaded } from '../../types/Attachment';
@@ -13,6 +14,7 @@ import type { DirectionType, MessageStatusType } from './Message';
 
 import type { ComputePeaksResult } from '../GlobalAudioContext';
 import { MessageMetadata } from './MessageMetadata';
+import { ToastUnableToLoadAttachment } from '../ToastUnableToLoadAttachment';
 import * as log from '../../logging/log';
 
 export type Props = {
@@ -350,6 +352,11 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
   }, [id, audio, isActive, isPlaying, currentTime]);
 
   const toggleIsPlaying = () => {
+    if (window.isLegacyOS()) {
+      showToast(ToastUnableToLoadAttachment);
+      return;
+    }
+
     setIsPlaying(!isPlaying);
 
     if (!isActive && !isPlaying) {

ts/window.d.ts

@@ -170,6 +170,7 @@ declare global {
     imageToBlurHash: typeof imageToBlurHash;
     loadImage: any;
     isBehindProxy: () => boolean;
+    isLegacyOS: () => boolean;
     getAutoLaunch: () => Promise<boolean>;
     setAutoLaunch: (value: boolean) => Promise<void>;