feat: Native video display (#5866)

shared/editor/components/ResizeHandle.tsx

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import { s } from "../../styles";
+
+export const ResizeLeft = styled.div<{ $dragging: boolean }>`
+  cursor: ew-resize;
+  position: absolute;
+  left: -4px;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  user-select: none;
+  opacity: ${(props) => (props.$dragging ? 1 : 0)};
+  transition: opacity 150ms ease-in-out;
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 6px;
+    height: 15%;
+    min-height: 20px;
+    border-radius: 4px;
+    background: ${s("menuBackground")};
+    box-shadow: 0 0 0 1px ${s("textSecondary")};
+    opacity: 0.75;
+  }
+`;
+
+export const ResizeRight = styled(ResizeLeft)`
+  left: initial;
+  right: -4px;
+
+  &:after {
+    left: initial;
+    right: 8px;
+  }
+`;