Video: Notify user on unsupported formats (#3706)

src/api/gramjs/apiBuilders/messages.ts

@@ -48,7 +48,6 @@ import {
   SUPPORTED_AUDIO_CONTENT_TYPES,
   SUPPORTED_IMAGE_CONTENT_TYPES,
   SUPPORTED_VIDEO_CONTENT_TYPES,
-  VIDEO_MOV_TYPE,
   VIDEO_WEBM_TYPE,
 } from '../../../config';
 import { pick } from '../../../util/iteratees';
@@ -484,11 +483,6 @@ export function buildVideoFromDocument(document: GramJs.Document, isSpoiler?: bo
     return undefined;
   }
 
-  // eslint-disable-next-line no-restricted-globals
-  if (mimeType === VIDEO_MOV_TYPE && !(self as any).isMovSupported) {
-    return undefined;
-  }
-
   const videoAttr = attributes
     .find((a: any): a is GramJs.DocumentAttributeVideo => a instanceof GramJs.DocumentAttributeVideo);
 

src/api/gramjs/methods/client.ts

@@ -14,7 +14,7 @@ import type {
 } from '../../types';
 
 import {
-  DEBUG, DEBUG_GRAMJS, UPLOAD_WORKERS, IS_TEST, SUPPORTED_VIDEO_CONTENT_TYPES, VIDEO_MOV_TYPE,
+  DEBUG, DEBUG_GRAMJS, UPLOAD_WORKERS, IS_TEST,
 } from '../../../config';
 import {
   onRequestPhoneNumber, onRequestCode, onRequestPassword, onRequestRegistration,
@@ -64,16 +64,12 @@ export async function init(_onUpdate: OnApiUpdate, initialArgs: ApiInitialArgs)
   onUpdate = _onUpdate;
 
   const {
-    userAgent, platform, sessionData, isTest, isMovSupported, isWebmSupported, maxBufferSize, webAuthToken, dcId,
+    userAgent, platform, sessionData, isTest, isWebmSupported, maxBufferSize, webAuthToken, dcId,
     mockScenario, shouldForceHttpTransport, shouldAllowHttpTransport,
     shouldDebugExportedSenders,
   } = initialArgs;
   const session = new sessions.CallbackSession(sessionData, onSessionUpdate);
 
-  // eslint-disable-next-line no-restricted-globals
-  (self as any).isMovSupported = isMovSupported;
-  // Hacky way to update this set inside GramJS worker
-  if (isMovSupported) SUPPORTED_VIDEO_CONTENT_TYPES.add(VIDEO_MOV_TYPE);
   // eslint-disable-next-line no-restricted-globals
   (self as any).isWebmSupported = isWebmSupported;
   // eslint-disable-next-line no-restricted-globals

src/api/types/misc.ts

@@ -7,7 +7,6 @@ export interface ApiInitialArgs {
   platform?: string;
   sessionData?: ApiSessionData;
   isTest?: boolean;
-  isMovSupported?: boolean;
   isWebmSupported?: boolean;
   maxBufferSize?: number;
   webAuthToken?: string;
@@ -112,6 +111,7 @@ export type ApiNotification = {
   actionText?: string;
   action?: CallbackAction;
   className?: string;
+  duration?: number;
 };
 
 export type ApiError = {

src/components/main/Notifications.tsx

@@ -24,13 +24,14 @@ const Notifications: FC<StateProps> = ({ notifications }) => {
   return (
     <div id="Notifications">
       {notifications.map(({
-        message, className, localId, action, actionText, title,
+        message, className, localId, action, actionText, title, duration,
       }) => (
         <Notification
           title={title ? renderText(title, ['simple_markdown', 'emoji', 'br', 'links']) : undefined}
           action={action}
           actionText={actionText}
           className={className}
+          duration={duration}
           message={renderText(message, ['simple_markdown', 'emoji', 'br', 'links'])}
           // eslint-disable-next-line react/jsx-no-bind
           onDismiss={() => dismissNotification({ localId })}

src/components/mediaViewer/VideoPlayer.tsx

@@ -21,6 +21,7 @@ import useAppLayout from '../../hooks/useAppLayout';
 import useCurrentTimeSignal from './hooks/useCurrentTimeSignal';
 import useControlsSignal from './hooks/useControlsSignal';
 import useVideoWaitingSignal from './hooks/useVideoWaitingSignal';
+import useUnsupportedMedia from '../../hooks/media/useUnsupportedMedia';
 
 import Button from '../ui/Button';
 import ProgressSpinner from '../ui/ProgressSpinner';
@@ -120,22 +121,23 @@ const VideoPlayer: FC<OwnProps> = ({
   const {
     isReady, isBuffered, bufferedRanges, bufferingHandlers, bufferedProgress,
   } = useBuffering();
+  const isUnsupported = useUnsupportedMedia(videoRef, undefined, !url);
 
   const {
     shouldRender: shouldRenderSpinner,
     transitionClassNames: spinnerClassNames,
-  } = useShowTransition(!isBuffered, undefined, undefined, 'slow');
+  } = useShowTransition(!isBuffered && !isUnsupported, undefined, undefined, 'slow');
   const {
     shouldRender: shouldRenderPlayButton,
     transitionClassNames: playButtonClassNames,
-  } = useShowTransition(IS_IOS && !isPlaying && !shouldRenderSpinner, undefined, undefined, 'slow');
+  } = useShowTransition(IS_IOS && !isPlaying && !shouldRenderSpinner && !isUnsupported, undefined, undefined, 'slow');
 
   useEffect(() => {
     lockControls(shouldRenderSpinner);
   }, [lockControls, shouldRenderSpinner]);
 
   useEffect(() => {
-    if (noPlay || !isMediaViewerOpen) {
+    if (noPlay || !isMediaViewerOpen || isUnsupported) {
       videoRef.current!.pause();
     } else if (url && !IS_TOUCH_ENV) {
       // Chrome does not automatically start playing when `url` becomes available (even with `autoPlay`),
@@ -143,7 +145,7 @@ const VideoPlayer: FC<OwnProps> = ({
       // so we need to use `autoPlay` instead to allow pre-buffering.
       safePlay(videoRef.current!);
     }
-  }, [noPlay, isMediaViewerOpen, url, setMediaViewerMuted]);
+  }, [noPlay, isMediaViewerOpen, url, setMediaViewerMuted, isUnsupported]);
 
   useEffect(() => {
     videoRef.current!.volume = volume;
@@ -307,9 +309,8 @@ const VideoPlayer: FC<OwnProps> = ({
             bufferingHandlers.onPause(e);
           }}
           onTimeUpdate={handleTimeUpdate}
-        >
-          {url && <source src={url} />}
-        </video>
+          src={url}
+        />
       </div>
       {shouldRenderPlayButton && (
         <Button round className={`play-button ${playButtonClassNames}`} onClick={togglePlayState}>
@@ -327,7 +328,7 @@ const VideoPlayer: FC<OwnProps> = ({
           />
         </div>
       )}
-      {!isGif && (
+      {!isGif && !isUnsupported && (
         <VideoPlayerControls
           url={url}
           isPlaying={isPlaying}

src/components/middle/composer/helpers/buildAttachment.ts

@@ -63,11 +63,14 @@ export default async function buildAttachment(
       previewBlobUrl = blobUrl;
     }
   } else if (SUPPORTED_VIDEO_CONTENT_TYPES.has(mimeType)) {
-    const { videoWidth: width, videoHeight: height, duration } = await preloadVideo(blobUrl);
-    shouldSendAsFile = !validateAspectRatio(width, height);
-
-    if (!shouldSendAsFile) {
-      quick = { width, height, duration };
+    try {
+      const { videoWidth: width, videoHeight: height, duration } = await preloadVideo(blobUrl);
+      shouldSendAsFile = !validateAspectRatio(width, height);
+      if (!shouldSendAsFile) {
+        quick = { width: width!, height: height!, duration: duration! };
+      }
+    } catch (err) {
+      shouldSendAsFile = true;
     }
 
     previewBlobUrl = await createPosterForVideo(blobUrl);

src/components/middle/message/Video.tsx

@@ -31,6 +31,7 @@ import useMediaTransition from '../../../hooks/useMediaTransition';
 import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef';
 import useFlag from '../../../hooks/useFlag';
 import useAppLayout from '../../../hooks/useAppLayout';
+import useUnsupportedMedia from '../../../hooks/media/useUnsupportedMedia';
 
 import ProgressSpinner from '../../ui/ProgressSpinner';
 import OptimizedVideo from '../../ui/OptimizedVideo';
@@ -121,6 +122,7 @@ const Video: FC<OwnProps> = ({
 
   const isInline = fullMediaData && wasIntersectedRef.current;
 
+  const isUnsupported = useUnsupportedMedia(videoRef, true, !isInline);
   const { loadProgress: downloadProgress } = useMediaWithLoadProgress(
     getMessageMediaHash(message, 'download'),
     !isDownloading,
@@ -137,7 +139,7 @@ const Video: FC<OwnProps> = ({
   const {
     shouldRender: shouldRenderSpinner,
     transitionClassNames: spinnerClassNames,
-  } = useShowTransition(isTransferring, undefined, wasLoadDisabled);
+  } = useShowTransition(isTransferring && !isUnsupported, undefined, wasLoadDisabled);
   const {
     transitionClassNames: playButtonClassNames,
   } = useShowTransition(Boolean((isLoadAllowed || fullMediaData) && !isPlayAllowed && !shouldRenderSpinner));
@@ -147,7 +149,7 @@ const Video: FC<OwnProps> = ({
     setPlayProgress(Math.max(0, e.currentTarget.currentTime - 1));
   });
 
-  const duration = videoRef.current?.duration || video.duration || 0;
+  const duration = (Number.isFinite(videoRef.current?.duration) ? videoRef.current?.duration : video.duration) || 0;
 
   const isOwn = isOwnMessage(message);
   const isWebPageVideo = Boolean(getMessageWebPageVideo(message));
@@ -206,7 +208,7 @@ const Video: FC<OwnProps> = ({
           ref={videoRef}
           src={fullMediaData}
           className={buildClassName('full-media', withBlurredBackground && 'with-blurred-bg')}
-          canPlay={isPlayAllowed && isIntersectingForPlaying}
+          canPlay={isPlayAllowed && isIntersectingForPlaying && !isUnsupported}
           muted
           loop
           playsInline
@@ -247,13 +249,14 @@ const Video: FC<OwnProps> = ({
       {!isLoadAllowed && !fullMediaData && (
         <i className="icon icon-download" />
       )}
-      {isTransferring ? (
+      {isTransferring && (!isUnsupported || isDownloading) ? (
         <span className="message-transfer-progress">
           {(isUploading || isDownloading) ? `${Math.round(transferProgress * 100)}%` : '...'}
         </span>
       ) : (
         <div className="message-media-duration">
           {video.isGif ? 'GIF' : formatMediaDuration(Math.max(duration - playProgress, 0))}
+          {isUnsupported && <i className="icon icon-message-failed playback-failed" />}
         </div>
       )}
     </div>

src/components/middle/message/_message-content.scss

@@ -655,6 +655,8 @@
     border-radius: 0.75rem;
     line-height: 1.125rem;
     user-select: none;
+    display: flex;
+    align-items: center;
   }
 
   .message-media-duration .icon-muted {
@@ -662,6 +664,11 @@
     margin-left: 0.375rem;
     font-size: 1.0625rem;
   }
+
+  .message-media-duration .playback-failed {
+    margin-inline-start: 0.125rem;
+    font-size: 0.875rem;
+  }
 }
 
 .message-content.custom-shape {

src/config.ts

@@ -199,7 +199,6 @@ export const BASE_EMOJI_KEYWORD_LANG = 'en';
 export const MENU_TRANSITION_DURATION = 200;
 export const SLIDE_TRANSITION_DURATION = 450;
 
-export const VIDEO_MOV_TYPE = 'video/quicktime';
 export const VIDEO_WEBM_TYPE = 'video/webm';
 
 export const GIF_MIME_TYPE = 'image/gif';
@@ -209,7 +208,7 @@ export const SUPPORTED_IMAGE_CONTENT_TYPES = new Set([
 ]);
 
 export const SUPPORTED_VIDEO_CONTENT_TYPES = new Set([
-  'video/mp4', // video/quicktime added dynamically in environment.ts
+  'video/mp4', 'video/quicktime',
 ]);
 
 export const SUPPORTED_AUDIO_CONTENT_TYPES = new Set([

src/global/actions/api/initial.ts

@@ -16,7 +16,7 @@ import {
   LOCK_SCREEN_ANIMATION_DURATION_MS,
 } from '../../../config';
 import {
-  IS_MOV_SUPPORTED, IS_WEBM_SUPPORTED, MAX_BUFFER_SIZE, PLATFORM_ENV,
+  IS_WEBM_SUPPORTED, MAX_BUFFER_SIZE, PLATFORM_ENV,
 } from '../../../util/windowEnvironment';
 import { unsubscribe } from '../../../util/notifications';
 import * as cacheApi from '../../../util/cacheApi';
@@ -50,7 +50,6 @@ addActionHandler('initApi', async (global, actions): Promise<void> => {
     platform: PLATFORM_ENV,
     sessionData: loadStoredSession(),
     isTest: window.location.search.includes('test') || initialLocationHash?.tgWebAuthTest === '1',
-    isMovSupported: IS_MOV_SUPPORTED,
     isWebmSupported: IS_WEBM_SUPPORTED,
     maxBufferSize: MAX_BUFFER_SIZE,
     webAuthToken: initialLocationHash?.tgWebAuthToken,

src/global/types.ts

@@ -2296,6 +2296,7 @@ export interface ActionPayloads {
     title?: string;
     message: string;
     className?: string;
+    duration?: number;
     actionText?: string;
     action?: CallbackAction;
   } & WithTabId;

src/hooks/media/useUnsupportedMedia.ts

@@ -0,0 +1,63 @@
+import { useEffect, useState } from '../../lib/teact/teact';
+import { getActions } from '../../global';
+import useLastCallback from '../useLastCallback';
+import useLang from '../useLang';
+import { IS_MOBILE } from '../../util/windowEnvironment';
+
+const NOTIFICATION_DURATION = 8000;
+
+export default function useUnsupportedMedia(
+  ref: React.RefObject<HTMLVideoElement>, shouldDisableNotification?: boolean, isDisabled?: boolean,
+) {
+  const { showNotification } = getActions();
+  const lang = useLang();
+  const [isUnsupported, setIsUnsupported] = useState(false);
+
+  const handleUnsupported = useLastCallback(() => {
+    setIsUnsupported(true);
+    if (shouldDisableNotification) return;
+
+    showNotification({
+      message: IS_MOBILE ? lang('Video.Unsupported.Mobile') : lang('Video.Unsupported.Desktop'),
+      duration: NOTIFICATION_DURATION,
+    });
+  });
+
+  const onError = useLastCallback((event: Event) => {
+    const target = event.currentTarget as HTMLVideoElement;
+    const { error } = target;
+    if (!error) return;
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/MediaError/code
+    if (error.code === 3 || error.code === 4) {
+      handleUnsupported();
+    }
+  });
+
+  const onCanPlay = useLastCallback((event: Event) => {
+    const target = event.currentTarget as HTMLVideoElement;
+
+    if (!target.videoHeight || !target.videoWidth) {
+      handleUnsupported();
+    }
+  });
+
+  useEffect(() => {
+    if (isDisabled) return undefined;
+
+    const { current } = ref;
+    if (!current) {
+      return undefined;
+    }
+
+    current.addEventListener('error', onError);
+    current.addEventListener('canplay', onCanPlay);
+
+    return () => {
+      current.removeEventListener('error', onError);
+      current.removeEventListener('canplay', onCanPlay);
+    };
+  }, [isDisabled, ref]);
+
+  return isUnsupported;
+}

src/util/fallbackLangPack.ts

@@ -500,4 +500,6 @@ export default {
   'ChannelVisibility.Forwarding.Disabled': 'Restrict Forwarding',
   'Settings.TipsUsername': 'TelegramTips',
   FoldersAllChatsDesc: 'All unarchived chats',
+  'Video.Unsupported.Desktop': 'Unfortunately, this video can\'t be played on Telegram Web. Try opening it with our **desktop app** instead.',
+  'Video.Unsupported.Mobile': 'Unfortunately, this video can\'t be played on Telegram Web. Try opening it with our **mobile app** instead.',
 } as ApiLangPack;

src/util/files.ts

@@ -80,30 +80,34 @@ export function preloadVideo(url: string): Promise<HTMLVideoElement> {
 }
 
 export async function createPosterForVideo(url: string): Promise<string | undefined> {
-  const video = await preloadVideo(url);
+  try {
+    const video = await preloadVideo(url);
 
-  return Promise.race([
-    pause(2000) as Promise<undefined>,
-    new Promise<string | undefined>((resolve, reject) => {
-      video.onseeked = () => {
-        if (!video.videoWidth || !video.videoHeight) {
-          resolve(undefined);
-        }
+    return await Promise.race([
+      pause(2000) as Promise<undefined>,
+      new Promise<string | undefined>((resolve, reject) => {
+        video.onseeked = () => {
+          if (!video.videoWidth || !video.videoHeight) {
+            resolve(undefined);
+          }
 
-        const canvas = document.createElement('canvas');
-        canvas.width = video.videoWidth;
-        canvas.height = video.videoHeight;
-        const ctx = canvas.getContext('2d')!;
-        ctx.drawImage(video, 0, 0);
+          const canvas = document.createElement('canvas');
+          canvas.width = video.videoWidth;
+          canvas.height = video.videoHeight;
+          const ctx = canvas.getContext('2d')!;
+          ctx.drawImage(video, 0, 0);
 
-        canvas.toBlob((blob) => {
-          resolve(blob ? URL.createObjectURL(blob) : undefined);
-        });
-      };
-      video.onerror = reject;
-      video.currentTime = Math.min(video.duration, 1);
-    }),
-  ]);
+          canvas.toBlob((blob) => {
+            resolve(blob ? URL.createObjectURL(blob) : undefined);
+          });
+        };
+        video.onerror = reject;
+        video.currentTime = Math.min(video.duration, 1);
+      }),
+    ]);
+  } catch (e) {
+    return undefined;
+  }
 }
 
 export async function fetchBlob(blobUrl: string) {

src/util/windowEnvironment.ts

@@ -1,9 +1,6 @@
 import {
   IS_TEST,
   IS_ELECTRON,
-  SUPPORTED_VIDEO_CONTENT_TYPES,
-  VIDEO_MOV_TYPE,
-  CONTENT_TYPES_WITH_PREVIEW,
   PRODUCTION_HOSTNAME,
 } from '../config';
 
@@ -80,15 +77,6 @@ export const ARE_CALLS_SUPPORTED = !navigator.userAgent.includes('Firefox');
 export const LAYERS_ANIMATION_NAME = IS_ANDROID ? 'slideFade' : IS_IOS ? 'slideLayers' : 'pushSlide';
 
 const TEST_VIDEO = document.createElement('video');
-// `canPlayType(VIDEO_MOV_TYPE)` returns false negative at least for macOS Chrome and iOS Safari
-export const IS_MOV_SUPPORTED = Boolean(
-  TEST_VIDEO.canPlayType(VIDEO_MOV_TYPE).replace('no', '') || IS_IOS || IS_MAC_OS,
-);
-
-if (IS_MOV_SUPPORTED) {
-  SUPPORTED_VIDEO_CONTENT_TYPES.add(VIDEO_MOV_TYPE);
-  CONTENT_TYPES_WITH_PREVIEW.add(VIDEO_MOV_TYPE);
-}
 
 export const IS_WEBM_SUPPORTED = Boolean(TEST_VIDEO.canPlayType('video/webm; codecs="vp9"').replace('no', ''));