Port post embeds to new arch (#7408)

* Direct port of embeds to new arch

(cherry picked from commit cc3fa1f6cea396dd9222486c633a508bfee1ecd6)

* Re-org

* Split out ListEmbed and FeedEmbed

* Split out ImageEmbed

* DRY up a bit

* Port over ExternalLinkEmbed

* Port over Player and Gif embeds

* Migrate ComposerReplyTo

* Replace other usages of old post-embeds

* Migrate view contexts

* Copy pasta VideoEmbed

* Copy pasta GifEmbed

* Swap in new file location

* Clean up

* Fix up native

* Add back in correct moderation on List and Feed embeds

* Format

* Prettier

* delete old video utils

* move bandwidth-estimate.ts

* Remove log

* Add LazyQuoteEmbed for composer use

* Clean up unused things

* Remove remaining items

* Prettier

* Fix imports

* Handle nested quotes same as prod

* Add back silenced error handling

* Fix lint

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

1 files changed, 42 insertions, 0 deletions

diff --git a/src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/ControlButton.tsx b/src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/ControlButton.tsx
new file mode 100644
index 000000000..1b69a3e25
--- /dev/null
+++ b/src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/ControlButton.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import {SvgProps} from 'react-native-svg'
+
+import {PressableWithHover} from '#/view/com/util/PressableWithHover'
+import {atoms as a, useTheme, web} from '#/alf'
+
+export function ControlButton({
+  active,
+  activeLabel,
+  inactiveLabel,
+  activeIcon: ActiveIcon,
+  inactiveIcon: InactiveIcon,
+  onPress,
+}: {
+  active: boolean
+  activeLabel: string
+  inactiveLabel: string
+  activeIcon: React.ComponentType<Pick<SvgProps, 'fill' | 'width'>>
+  inactiveIcon: React.ComponentType<Pick<SvgProps, 'fill' | 'width'>>
+  onPress: () => void
+}) {
+  const t = useTheme()
+  return (
+    <PressableWithHover
+      accessibilityRole="button"
+      accessibilityLabel={active ? activeLabel : inactiveLabel}
+      accessibilityHint=""
+      onPress={onPress}
+      style={[
+        a.p_xs,
+        a.rounded_full,
+        web({transition: 'background-color 0.1s'}),
+      ]}
+      hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.2)'}}>
+      {active ? (
+        <ActiveIcon fill={t.palette.white} width={20} aria-hidden />
+      ) : (
+        <InactiveIcon fill={t.palette.white} width={20} aria-hidden />
+      )}
+    </PressableWithHover>
+  )
+}