Improvements to the MyStories row

ts/components/StoriesAddStoryButton.tsx

@@ -0,0 +1,90 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import type { LocalizerType } from '../types/Util';
+import type { ShowToastActionCreatorType } from '../state/ducks/toast';
+import { ContextMenu } from './ContextMenu';
+import { Theme } from '../util/theme';
+import { ToastType } from '../state/ducks/toast';
+import {
+  isVideoGoodForStories,
+  ReasonVideoNotGood,
+} from '../util/isVideoGoodForStories';
+
+export type PropsType = {
+  children?: ReactNode;
+  i18n: LocalizerType;
+  moduleClassName?: string;
+  onAddStory: (file?: File) => unknown;
+  showToast: ShowToastActionCreatorType;
+};
+
+export const StoriesAddStoryButton = ({
+  children,
+  i18n,
+  moduleClassName,
+  onAddStory,
+  showToast,
+}: PropsType): JSX.Element => {
+  return (
+    <ContextMenu
+      ariaLabel={i18n('Stories__add')}
+      i18n={i18n}
+      menuOptions={[
+        {
+          label: i18n('Stories__add-story--media'),
+          onClick: () => {
+            const input = document.createElement('input');
+            input.accept = 'image/*,video/mp4';
+            input.type = 'file';
+            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();
+          },
+        },
+        {
+          label: i18n('Stories__add-story--text'),
+          onClick: () => onAddStory(),
+        },
+      ]}
+      moduleClassName={moduleClassName}
+      popperOptions={{
+        placement: 'bottom',
+        strategy: 'absolute',
+      }}
+      theme={Theme.Dark}
+    >
+      {children}
+    </ContextMenu>
+  );
+};