Fix crashes when playing media on legacy OS

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) {