From 84bd552cc5a37dbe80373bb1f332e4e236282b0b Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Fri, 10 Dec 2021 16:21:48 -0800
Subject: [PATCH] Fix crashes when playing media on legacy OS

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
---
 app/main.ts                                 |  1 +
 preload.js                                  |  1 +
 ts/OS.ts                                    | 13 +++++++++++++
 ts/components/Lightbox.tsx                  | 21 +++++++++++++++++++++
 ts/components/conversation/GIF.tsx          |  2 +-
 ts/components/conversation/MessageAudio.tsx |  7 +++++++
 ts/window.d.ts                              |  1 +
 7 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/app/main.ts b/app/main.ts
index b1ccb651e..6b9d61bb7 100644
--- a/app/main.ts
+++ b/app/main.ts
@@ -317,6 +317,7 @@ function prepareUrl(
     appStartInitialSpellcheckSetting,
     userDataPath: app.getPath('userData'),
     downloadsPath: app.getPath('downloads'),
+    isLegacyOS: OS.isLegacy(),
     homePath: app.getPath('home'),
     ...moreKeys,
   }).href;
diff --git a/preload.js b/preload.js
index c82c5c919..bb55385b9 100644
--- a/preload.js
+++ b/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');
   };
diff --git a/ts/OS.ts b/ts/OS.ts
index 73598af01..7714dc718 100644
--- a/ts/OS.ts
+++ b/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;
+};
diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index 4b4ef1406..ca564a8c5 100644
--- a/ts/components/Lightbox.tsx
+++ b/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;
 
diff --git a/ts/components/conversation/GIF.tsx b/ts/components/conversation/GIF.tsx
index cab70bffb..ceac789f7 100644
--- a/ts/components/conversation/GIF.tsx
+++ b/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)}
diff --git a/ts/components/conversation/MessageAudio.tsx b/ts/components/conversation/MessageAudio.tsx
index 7a99b909c..5edcef14f 100644
--- a/ts/components/conversation/MessageAudio.tsx
+++ b/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) {
diff --git a/ts/window.d.ts b/ts/window.d.ts
index 59e771bee..5dda420e2 100644
--- a/ts/window.d.ts
+++ b/ts/window.d.ts
@@ -169,6 +169,7 @@ declare global {
     imageToBlurHash: typeof imageToBlurHash;
     loadImage: any;
     isBehindProxy: () => boolean;
+    isLegacyOS: () => boolean;
     getAutoLaunch: () => Promise<boolean>;
     setAutoLaunch: (value: boolean) => Promise<void>;