Only accept video/mp4 for story uploads

ts/components/Stories.stories.tsx

@@ -48,6 +48,7 @@ export default {
     renderStoryViewer: { action: true },
     showConversation: { action: true },
     showStoriesSettings: { action: true },
+    showToast: { action: true },
     stories: {
       defaultValue: [],
     },

ts/components/Stories.tsx

@@ -15,6 +15,7 @@ import type {
 import type { LocalizerType } from '../types/Util';
 import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import type { PropsType as SmartStoryCreatorPropsType } from '../state/smart/StoryCreator';
+import type { ShowToastActionCreatorType } from '../state/ducks/toast';
 import type { ViewStoryActionCreatorType } from '../state/ducks/stories';
 import { MyStories } from './MyStories';
 import { StoriesPane } from './StoriesPane';
@@ -35,6 +36,7 @@ export type PropsType = {
   renderStoryCreator: (props: SmartStoryCreatorPropsType) => JSX.Element;
   showConversation: ShowConversationType;
   showStoriesSettings: () => unknown;
+  showToast: ShowToastActionCreatorType;
   stories: Array<ConversationStoryType>;
   toggleHideStories: (conversationId: string) => unknown;
   toggleStoriesView: () => unknown;
@@ -64,6 +66,7 @@ export const Stories = ({
   renderStoryCreator,
   showConversation,
   showStoriesSettings,
+  showToast,
   stories,
   toggleHideStories,
   toggleStoriesView,
@@ -118,6 +121,7 @@ export const Stories = ({
             onStoriesSettings={showStoriesSettings}
             queueStoryDownload={queueStoryDownload}
             showConversation={showConversation}
+            showToast={showToast}
             stories={stories}
             toggleHideStories={toggleHideStories}
             toggleStoriesView={toggleStoriesView}

ts/components/StoriesPane.tsx

@@ -16,12 +16,18 @@ import type {
 } from '../types/Stories';
 import type { LocalizerType } from '../types/Util';
 import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
+import type { ShowToastActionCreatorType } from '../state/ducks/toast';
 import { ContextMenu } from './ContextMenu';
 import { MyStoriesButton } from './MyStoriesButton';
 import { SearchInput } from './SearchInput';
 import { StoryListItem } from './StoryListItem';
 import { Theme } from '../util/theme';
+import { ToastType } from '../state/ducks/toast';
 import { isNotNil } from '../util/isNotNil';
+import {
+  isVideoGoodForStories,
+  ReasonVideoNotGood,
+} from '../util/isVideoGoodForStories';
 
 const FUSE_OPTIONS: Fuse.IFuseOptions<ConversationStoryType> = {
   getFn: (story, path) => {
@@ -70,6 +76,7 @@ export type PropsType = {
   onStoriesSettings: () => unknown;
   queueStoryDownload: (storyId: string) => unknown;
   showConversation: ShowConversationType;
+  showToast: ShowToastActionCreatorType;
   stories: Array<ConversationStoryType>;
   toggleHideStories: (conversationId: string) => unknown;
   toggleStoriesView: () => unknown;
@@ -87,6 +94,7 @@ export const StoriesPane = ({
   onStoriesSettings,
   queueStoryDownload,
   showConversation,
+  showToast,
   stories,
   toggleHideStories,
   toggleStoriesView,
@@ -125,15 +133,35 @@ export const StoriesPane = ({
               label: i18n('Stories__add-story--media'),
               onClick: () => {
                 const input = document.createElement('input');
-                input.accept = 'image/*,video/*';
+                input.accept = 'image/*,video/mp4';
                 input.type = 'file';
-                input.onchange = () => {
+                input.onchange = async () => {
                   const file = input.files ? input.files[0] : undefined;
 
                   if (!file) {
                     return;
                   }
 
+                  const result = await isVideoGoodForStories(file);
+
+                  if (
+                    result === ReasonVideoNotGood.UnsupportedCodec ||
+                    result === ReasonVideoNotGood.UnsupportedContainer
+                  ) {
+                    showToast(ToastType.StoryVideoUnsupported);
+                    return;
+                  }
+
+                  if (result === ReasonVideoNotGood.TooLong) {
+                    showToast(ToastType.StoryVideoTooLong);
+                    return;
+                  }
+
+                  if (result !== ReasonVideoNotGood.AllGoodNevermind) {
+                    showToast(ToastType.StoryVideoError);
+                    return;
+                  }
+
                   onAddStory(file);
                 };
                 input.click();

ts/components/ToastManager.stories.tsx

@@ -50,3 +50,18 @@ export const MessageBodyTooLong = Template.bind({});
 MessageBodyTooLong.args = {
   toastType: ToastType.MessageBodyTooLong,
 };
+
+export const StoryVideoTooLong = Template.bind({});
+StoryVideoTooLong.args = {
+  toastType: ToastType.StoryVideoTooLong,
+};
+
+export const StoryVideoUnsupported = Template.bind({});
+StoryVideoUnsupported.args = {
+  toastType: ToastType.StoryVideoUnsupported,
+};
+
+export const StoryVideoError = Template.bind({});
+StoryVideoError.args = {
+  toastType: ToastType.StoryVideoError,
+};

ts/components/ToastManager.tsx

@@ -63,6 +63,30 @@ export const ToastManager = ({
     );
   }
 
+  if (toastType === ToastType.StoryVideoTooLong) {
+    return (
+      <Toast onClose={hideToast}>
+        {i18n('StoryCreator__error--video-too-long')}
+      </Toast>
+    );
+  }
+
+  if (toastType === ToastType.StoryVideoUnsupported) {
+    return (
+      <Toast onClose={hideToast}>
+        {i18n('StoryCreator__error--video-unsupported')}
+      </Toast>
+    );
+  }
+
+  if (toastType === ToastType.StoryVideoError) {
+    return (
+      <Toast onClose={hideToast}>
+        {i18n('StoryCreator__error--video-error')}
+      </Toast>
+    );
+  }
+
   strictAssert(
     toastType === undefined,
     `Unhandled toast of type: ${toastType}`