feat: support mov file type rendering only in Safari browser (#1114)

Addresses
https://sendbird.atlassian.net/browse/SBISSUE-16031?focusedCommentId=270601

Quoted a comment left by @jayden-lee-sb
>Not supporting ‘MOV’: This is not a bug since we display ‘MOV’ as a
normal file message exactly described in the changelog(v3.13.2) → But we
need to consider supporting ‘ThumbnailMessage’ only for some browser
environments like Safari where MOV can be displayed without any problem

#### .mov file in Chrome browser
<img width="500" alt="Screenshot 2024-05-29 at 5 24 43 PM"
src="https://github.com/sendbird/sendbird-uikit-react/assets/10060731/07733c66-dd6f-4007-a127-c8d6853d8b5a">

#### .mov file in Safari browser 
<img width="500" alt="Screenshot 2024-05-29 at 5 25 43 PM"
src="https://github.com/sendbird/sendbird-uikit-react/assets/10060731/529be97e-146f-489b-8625-3fdb8098a4a2">

Author: AhyoungRyu

src/modules/GroupChannel/components/FileViewer/FileViewerView.tsx

@@ -7,7 +7,7 @@ import type { FileViewerProps } from '.';
 import type { CoreMessageType, SendableMessageType } from '../../../../utils';
 import Avatar from '../../../../ui/Avatar';
 import Icon, { IconColors, IconTypes } from '../../../../ui/Icon';
-import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
+import Label, { LabelColors, LabelTypography, LabelStringSet } from '../../../../ui/Label';
 import { isImage, isSupportedFileView, isVideo } from '../../../../utils';
 import { MODAL_ROOT } from '../../../../hooks/useModal';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
@@ -135,7 +135,7 @@ export const FileViewerComponent = ({
       {!isSupportedFileView(type) && (
         <div className="sendbird-fileviewer__content__unsupported">
           <Label type={LabelTypography.H_1} color={LabelColors.ONBACKGROUND_1}>
-            Unsupoprted message
+            {LabelStringSet.UI__FILE_VIEWER__UNSUPPORT}
           </Label>
         </div>
       )}

src/modules/OpenChannel/components/OpenChannelMessage/utils.ts

@@ -1,6 +1,5 @@
 import { FileMessage } from '@sendbird/chat/message';
-import { isImage, isVideo } from '../../../../ui/FileViewer/types';
-import { CoreMessageType } from '../../../../utils';
+import { CoreMessageType, isImage, isVideo } from '../../../../utils';
 
 export const MessageTypes = {
   ADMIN: 'ADMIN',

src/ui/FileViewer/types.ts

@@ -1,40 +1,7 @@
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
 
 // TODO: refactor this to -> as const pattern
-import { KeyboardEvent, MouseEvent } from 'react';
-
-export type SupportedImageMimesType = 'image/jpeg' | 'image/jpg' | 'image/png' | 'image/gif' | 'image/svg+xml' | 'image/webp';
-export type SupportedVideoMimesType = 'video/mpeg' | 'video/ogg' | 'video/webm' | 'video/mp4';
-export type SupportedMimesType = SupportedImageMimesType | SupportedVideoMimesType;
-
-const SUPPORTED_MIMES = {
-  IMAGE: [
-    'image/jpeg',
-    'image/jpg',
-    'image/png',
-    'image/gif',
-    'image/svg+xml',
-    'image/webp',
-  ],
-  VIDEO: [
-    'video/mpeg',
-    'video/ogg',
-    'video/webm',
-    'video/mp4',
-  ],
-};
-
-export const isImage = (type: string): boolean => SUPPORTED_MIMES.IMAGE.indexOf(type) >= 0;
-export const isVideo = (type: string): boolean => SUPPORTED_MIMES.VIDEO.indexOf(type) >= 0;
-export const isGif = (type: string): boolean => type === 'image/gif';
-export const unSupported = (type: string): boolean => (
-  !(
-    isImage(type as SupportedImageMimesType)
-    || isVideo(type as SupportedVideoMimesType)
-  )
-);
-
-export default { ...SUPPORTED_MIMES };
+import { MouseEvent } from 'react';
 
 export const ViewerTypes = {
   SINGLE: 'SINGLE',

src/ui/MessageInput/index.tsx

@@ -19,7 +19,8 @@ import { tokenizeMessage } from '../../modules/Message/utils/tokens/tokenize';
 import { USER_MENTION_PREFIX } from '../../modules/Message/consts';
 import { TOKEN_TYPES } from '../../modules/Message/utils/tokens/types';
 import { checkIfFileUploadEnabled } from './messageInputUtils';
-import { classnames, isMobileIOS } from '../../utils/utils';
+import { classnames } from '../../utils/utils';
+import { isMobileIOS } from '../../utils/browser';
 
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { User } from '@sendbird/chat';

src/ui/ThumbnailMessageItemBody/__tests__/ThumbnailMessageItemBody.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import ThumbnailMessageItemBody from "../index";
 

src/utils/__tests__/utils.spec.ts

@@ -6,7 +6,8 @@ import {
   isMultipleFilesMessage,
 } from '../index';
 import { AdminMessage, FileMessage, MultipleFilesMessage, UserMessage } from '@sendbird/chat/message';
-import { deleteNullish, isMobileIOS } from '../utils';
+import { deleteNullish } from '../utils';
+import { isMobileIOS } from '../browser';
 
 describe('Global-utils: verify message type util functions', () => {
   it('should return true for each message', () => {

src/utils/browser.ts

@@ -0,0 +1,7 @@
+const isIOS = (userAgent: string) => /iPhone|iPad|iPod/i.test(userAgent);
+const isWebkit = (userAgent: string) => /WebKit/i.test(userAgent);
+const isChrome = (userAgent: string) => /Chrome/i.test(userAgent);
+export const isSafari = (userAgent: string) => !isChrome(userAgent) && /Safari/i.test(userAgent);
+export const isMobileIOS = (userAgent: string) => {
+  return isIOS(userAgent) && (isWebkit(userAgent) || isSafari(userAgent));
+};

src/utils/index.ts

@@ -11,11 +11,12 @@ import {
   UserMessage,
 } from '@sendbird/chat/message';
 import { OpenChannel, SendbirdOpenChat } from '@sendbird/chat/openChannel';
+import { SendableMessage } from '@sendbird/chat/lib/__definition';
 
 import { getOutgoingMessageState, OutgoingMessageStates } from './exports/getOutgoingMessageState';
 import { MessageContentMiddleContainerType, Nullable } from '../types';
+import { isSafari } from './browser';
 import { match } from 'ts-pattern';
-import { SendableMessage } from '@sendbird/chat/lib/__definition';
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
 export const SUPPORTED_MIMES = {
@@ -190,8 +191,15 @@ export const isTextuallyNull = (text: string): boolean => {
   return false;
 };
 
+export const isMOVType = (type: string): boolean => type === 'video/quicktime';
+/**
+ * @link: https://sendbird.atlassian.net/browse/SBISSUE-16031?focusedCommentId=270601
+ * We limitedly support .mov file type for ThumbnailMessage only in Safari browser.
+ * */
+export const isSupportedVideoFileTypeInSafari = (type: string): boolean => isSafari(navigator.userAgent) && isMOVType(type);
 export const isImage = (type: string): boolean => SUPPORTED_MIMES.IMAGE.indexOf(type) >= 0;
-export const isVideo = (type: string): boolean => SUPPORTED_MIMES.VIDEO.indexOf(type) >= 0;
+export const isVideo = (type: string): boolean => SUPPORTED_MIMES.VIDEO.indexOf(type) >= 0
+  || isSupportedVideoFileTypeInSafari(type);
 export const isGif = (type: string): boolean => type === 'image/gif';
 export const isSupportedFileView = (type: string): boolean => isImage(type) || isVideo(type);
 export const isAudio = (type: string): boolean => SUPPORTED_MIMES.AUDIO.indexOf(type) >= 0;

src/utils/utils.ts

@@ -6,13 +6,6 @@ export const noop = () => {
 export const getSenderProfileUrl = (message: SendableMessageType) => message.sender && message.sender.profileUrl;
 export const getSenderName = (message: SendableMessageType) => message.sender && (message.sender.friendName || message.sender.nickname || message.sender.userId);
 export const isAboutSame = (a: number, b: number, px: number) => Math.abs(a - b) <= px;
-export const isMobileIOS = (userAgent: string) => {
-  const isIOS = /iPhone|iPad|iPod/i.test(userAgent);
-  const isWebkit = /WebKit/i.test(userAgent);
-  const isSafari = /Safari/i.test(userAgent);
-
-  return isIOS && (isWebkit || isSafari);
-};
 
 export const deleteNullish = <T>(obj: T): T => {
   const cleaned = {} as T;