Migrate INTERNAL components for video effects (#5023)

packages/storybook8/stories/INTERNAL/VideoEffects/Docs.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta } from '@storybook/addon-docs';
+import * as VideoEffectsStories from './index.stories';
+import SelectableVideoEffectsExample from '!!raw-loader!./snippets/SelectableVideoEffects.snippet.tsx';
+import VideoBackgroundEffectsPickerExample from '!!raw-loader!./snippets/VideoBackgroundEffectsPicker.snippet.tsx';
+
+<Meta of={VideoEffectsStories} />
+
+# Video Background Effects
+
+Components to allow a user to select video background effects.
+
+## Video Background Effects Item
+
+A selection of premade video effects items.
+
+<Canvas
+  of={VideoEffectsStories.SelectableVideoEffectsExampleDocsOnly}
+  source={{ code: SelectableVideoEffectsExample }}
+/>
+
+## Video Background Effects Picker
+
+The picker can be used as a choice group to allow users to select backgrounds.
+
+<Canvas
+  of={VideoEffectsStories.VideoBackgroundEffectsPickerExampleDocsOnly}
+  source={{ code: VideoBackgroundEffectsPickerExample }}
+/>

packages/storybook8/stories/INTERNAL/VideoEffects/VideoEffects.story.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { registerIcons } from '@fluentui/react';
+import { ImageAdd20Regular, VideoBackgroundEffect20Regular, VideoPerson20Filled } from '@fluentui/react-icons';
+import {
+  _VideoEffectsItemNoBackground,
+  _VideoEffectsItemBlur,
+  _VideoEffectsItemAddImage
+} from '@internal/react-components';
+import React from 'react';
+import { VideoBackgroundEffectsPicker } from './snippets/VideoBackgroundEffectsPicker.snippet';
+
+registerIcons({
+  icons: {
+    VideoEffectsNone: <VideoPerson20Filled />,
+    VideoEffectsBlur: <VideoBackgroundEffect20Regular />,
+    VideoEffectsAddImage: <ImageAdd20Regular />
+  }
+});
+
+export const VideoEffects = VideoBackgroundEffectsPicker.bind({});

packages/storybook8/stories/INTERNAL/VideoEffects/index.stories.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Meta } from '@storybook/react';
+import { SelectableVideoEffects } from './snippets/SelectableVideoEffects.snippet';
+import { VideoBackgroundEffectsPicker } from './snippets/VideoBackgroundEffectsPicker.snippet';
+
+export { VideoEffects } from './VideoEffects.story';
+
+export const VideoBackgroundEffectsPickerExampleDocsOnly = {
+  render: VideoBackgroundEffectsPicker
+};
+
+export const SelectableVideoEffectsExampleDocsOnly = {
+  render: SelectableVideoEffects
+};
+
+const meta: Meta = {
+  title: 'Components/Internal/Video Effects',
+  component: VideoBackgroundEffectsPicker,
+  argTypes: {}
+};
+
+export default meta;

packages/storybook8/stories/INTERNAL/VideoEffects/snippets/SelectableVideoEffects.snippet.tsx

@@ -0,0 +1,63 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { registerIcons, Stack } from '@fluentui/react';
+import { ImageAdd20Regular, VideoBackgroundEffect20Regular, VideoPerson20Filled } from '@fluentui/react-icons';
+import {
+  _VideoEffectsItemNoBackground,
+  _VideoEffectsItemBlur,
+  _VideoEffectsItemAddImage,
+  _VideoEffectsItem
+} from '@internal/react-components';
+import React from 'react';
+
+registerIcons({
+  icons: {
+    VideoEffectsNone: <VideoPerson20Filled />,
+    VideoEffectsBlur: <VideoBackgroundEffect20Regular />,
+    VideoEffectsAddImage: <ImageAdd20Regular />
+  }
+});
+
+const sampleBackgrounds = [
+  'images/video-background-effects/bg1.jpg',
+  'images/video-background-effects/bg2.jpg',
+  'images/video-background-effects/bg3.jpg'
+];
+
+export const SelectableVideoEffects = (): JSX.Element => {
+  const [selectedEffect, setSelectedEffect] = React.useState<string>('none');
+  return (
+    <Stack tokens={{ childrenGap: '1rem' }}>
+      <Stack horizontal tokens={{ childrenGap: '1rem' }}>
+        <_VideoEffectsItemNoBackground
+          isSelected={selectedEffect === 'none'}
+          onSelect={() => setSelectedEffect('none')}
+          itemKey={'none'}
+        />
+        <_VideoEffectsItemBlur
+          isSelected={selectedEffect === 'blur'}
+          onSelect={() => setSelectedEffect('blur')}
+          itemKey={'blur'}
+        />
+        <_VideoEffectsItemAddImage
+          isSelected={selectedEffect === 'addImage'}
+          onSelect={() => setSelectedEffect('addImage')}
+          itemKey={'addImage'}
+          disabled
+        />
+      </Stack>
+      <Stack horizontal tokens={{ childrenGap: '1rem' }}>
+        {sampleBackgrounds.slice(0, 3).map((url, index) => (
+          <_VideoEffectsItem
+            key={`customBackground${index}`}
+            isSelected={selectedEffect === `bg${index}`}
+            onSelect={() => setSelectedEffect(`bg${index}`)}
+            itemKey={`customBackground${index}`}
+            backgroundProps={{ url }}
+          />
+        ))}
+      </Stack>
+    </Stack>
+  );
+};

packages/storybook8/stories/INTERNAL/VideoEffects/snippets/VideoBackgroundEffectsPicker.snippet.tsx

@@ -0,0 +1,112 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { registerIcons } from '@fluentui/react';
+import { ImageAdd20Regular, VideoBackgroundEffect20Regular, VideoPerson20Filled } from '@fluentui/react-icons';
+import { _VideoBackgroundEffectsPicker, _VideoBackgroundEffectChoiceOption } from '@internal/react-components';
+import React from 'react';
+
+registerIcons({
+  icons: {
+    VideoEffectsNone: <VideoPerson20Filled />,
+    VideoEffectsBlur: <VideoBackgroundEffect20Regular />,
+    VideoEffectsAddImage: <ImageAdd20Regular />
+  }
+});
+
+export const VideoBackgroundEffectsPicker = (): JSX.Element => {
+  return (
+    <_VideoBackgroundEffectsPicker
+      options={selectableVideoEffects}
+      label={'Background'}
+      defaultSelectedEffectKey={'blur'}
+    />
+  );
+};
+
+const selectableVideoEffects: _VideoBackgroundEffectChoiceOption[] = [
+  {
+    itemKey: 'none',
+    iconProps: {
+      iconName: 'VideoEffectsNone'
+    },
+    title: 'None',
+    tooltipProps: {
+      content: 'Remove Background'
+    }
+  },
+  {
+    itemKey: 'blur',
+    iconProps: {
+      iconName: 'VideoEffectsBlur'
+    },
+    title: 'Blurred',
+    tooltipProps: {
+      content: 'Blur Background'
+    }
+  },
+  {
+    itemKey: 'addImage',
+    iconProps: {
+      iconName: 'VideoEffectsAddImage'
+    },
+    title: 'Image',
+    tooltipProps: {
+      content: 'Upload Background Image'
+    }
+  },
+  {
+    itemKey: 'customBackground1',
+    backgroundProps: {
+      url: 'images/video-background-effects/bg1.jpg'
+    },
+    tooltipProps: {
+      content: 'Custom Background 1'
+    }
+  },
+  {
+    itemKey: 'customBackground2',
+    backgroundProps: {
+      url: 'images/video-background-effects/bg2.jpg'
+    },
+    tooltipProps: {
+      content: 'Custom Background 2'
+    }
+  },
+  {
+    itemKey: 'customBackground3',
+    backgroundProps: {
+      url: 'images/video-background-effects/bg3.jpg'
+    },
+    tooltipProps: {
+      content: 'Custom Background 3'
+    }
+  },
+  {
+    itemKey: 'customBackground4',
+    backgroundProps: {
+      url: 'images/video-background-effects/bg4.png'
+    },
+    tooltipProps: {
+      content: 'Custom Background 4'
+    }
+  },
+  {
+    itemKey: 'customBackground5',
+    backgroundProps: {
+      url: 'images/video-background-effects/bg5.png'
+    },
+    tooltipProps: {
+      content: 'Custom Background 5'
+    }
+  },
+  {
+    itemKey: 'customBackground6',
+    backgroundProps: {
+      url: 'images/video-background-effects/bg6.png'
+    },
+    tooltipProps: {
+      content: 'Custom Background 6'
+    }
+  }
+];