Revert "add remaining videos"

This reverts commit 4e436bb.

Author: reidbarber

packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx

@@ -10,9 +10,6 @@ governing permissions and limitations under the License. */}
 import comboboxExampleImageUrl from 'url:../../../../docs/pages/assets/combobox-example.png';
 import screenreaderSpreadsheetImageUrl from 'url:../../../../docs/pages/assets/screenreader-spreadsheet-combobox.png';
 import comboboxAccessibilityUrl from 'url:../../../../docs/pages/assets/combobox-accessibility.mp4';
-import comboboxVideoUrl from 'url:../../../../docs/pages/assets/combobox.mp4';
-import comboboxVisualViewportUrl from 'url:../../../../docs/pages/assets/combobox-visual-viewport.mp4';
-import comboboxScrollingUrl from 'url:../../../../docs/pages/assets/combobox-scrolling-safari.mp4';
 
 import {BlogPostLayout} from '../../../src/Layout';
 export default BlogPostLayout;
@@ -36,7 +33,7 @@ After many months of research, development, and extensive testing across browser
 - **Asynchronous loading** — Autocomplete suggestions can be loaded asynchronously, and large lists can be loaded on demand through infinite scrolling.
 - **Customizability** — React Aria hooks allow full control over the rendering and styling of your ComboBox component, while letting us take care of the behavioral complexities for you. Use our default filter or you can provide custom filtering for complete control.
 
-<video src={comboboxVideoUrl} loop autoPlay muted style={{maxWidth: 'min(100%, 1920px)', display: 'block', margin: '40px auto'}} />
+TODO: Add comboboxVideoUrl video
 
 ## Building a ComboBox
 
@@ -68,7 +65,7 @@ Luckily for us, iOS 13 added support for the [VisualViewport](https://developer.
 when the onscreen keyboard was opened or dismissed by listening to the VisualViewport's `resize` event. Leveraging these two allowed us to create a tray that properly adjusts to the presence of iOS onscreen keyboard. Check out the video below
 to see how the ComboBox tray worked before and after we switched to the VisualViewport API. If you'd like to track the visual viewport size in your own app, you can use the [useViewportSize](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/useViewportSize.ts) hook available in the `@react-aria/utils` package.
 
-<video src={comboboxVisualViewportUrl} loop autoPlay muted style={{maxWidth: 'min(80%, 350px)', display: 'block', margin: '20px auto'}} />
+TODO: Add comboboxVisualViewportUrl video
 
 ### Page Scrolling
 
@@ -77,7 +74,7 @@ now that our ComboBox tray sizes itself to fit in the visual viewport, users cou
 or root element of the document. This preserves the user's ability to scroll through the options in the tray but blocks any attempt to scroll the page itself until the tray is closed. The video below
 illustrates the difference in scrolling behavior before and after our fix. If you are building your own overlays and would like to prevent this kind of document scrolling behavior, check out the [usePreventScroll](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts) hook in the `react-aria/overlays` package.
 
-<video src={comboboxScrollingUrl} loop autoPlay muted style={{maxWidth: 'min(80%, 350px)', display: 'block', margin: '20px auto'}} />
+TODO: Add comboboxScrollingUrl video
 
 ## Accessibility
 

packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx

@@ -10,9 +10,6 @@ governing permissions and limitations under the License. */}
 import Anatomy from '../../../../docs/pages/assets/daterangepicker-anatomy.svg';
 import calendarMobileScreenReader from 'url:../../../../docs/pages/assets/calendar-mobile-screen-reader.mp4';
 import calendarMobileScreenReaderVTT from 'url:../../../../docs/pages/assets/calendar-mobile-screen-reader.vtt';
-import datepickerVideo from 'url:../../../../docs/pages/assets/datepicker.mp4';
-import datepickerScreenReader from 'url:../../../../docs/pages/assets/datepicker-screen-reader.mp4';
-
 import {BlogPostLayout} from '../../../src/Layout';
 export default BlogPostLayout;
 
@@ -41,7 +38,7 @@ In building these components, we have focused on the following areas:
 - **Accessibility** – All of our date and time picker components have been tested across desktop and mobile devices, and with many different input methods including mouse, touch, and keyboard. We have worked hard to ensure screen reader announcements are clear and consistent.
 - **Customizability** – As with all of React Aria, our hooks give you full control over the rendering and styling of your components, while letting us handle the internationalization and accessibility challenges for you. We have examples using many different styling libraries, such as Tailwind CSS, Styled Components, CSS modules, and Chakra UI.
 
-<video src={datepickerVideo} loop autoPlay muted style={{maxWidth: 'min(100%, 1920px)', display: 'block', margin: '40px auto'}} />
+TODO: Add datepickerVideoUrl video
 
 ## User experience
 
@@ -63,7 +60,7 @@ We took a different approach, and followed the lead of native date picker UIs on
 
 This approach has benefits for internationalization and accessibility, as well as usability on mobile. For internationalization, individual segments avoid the problem of parsing dates in various formats entirely. The date format is automatically determined based on the locale, and the user only needs to fill in the values and not worry about messing up the separators or getting the order wrong. Each segment is also individually labeled for accessibility, so users always know which field they are on (e.g. "year", "month", "day", etc.). This is much easier to use for screen reader users than a plain text field where the expected format is unknown. Finally, on mobile, we can take advantage of the numeric software keyboard, which is nicer to use than a full QWERTY keyboard.
 
-<video src={datepickerScreenReader} loop autoPlay muted style={{maxWidth: 'min(100%, 1920px)', display: 'block', margin: '40px auto'}} />
+TODO: Add datefieldVideoUrl video
 
 The [useDateField](../useDateField.html) and [useTimeField](../useTimeField.html) hooks (or the [DateField](../../s2/DateField.html) and [TimeField](../../s2/TimeField.html) React Spectrum components) may be used standalone in cases where the user is likely to already know the date they need to enter, or the date is far in the past or future, e.g. a birthday or passport expiration date. In these cases, browsing through a calendar UI to find a date is tedious, and entering the date with a keyboard is much more efficient.
 

packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx

@@ -11,10 +11,6 @@ import Anatomy from '@react-aria/dnd/docs/Anatomy.svg';
 import BetweenDropPosition from '@react-aria/dnd/docs/BetweenDropPosition.svg';
 import OnDropPosition from '@react-aria/dnd/docs/OnDropPosition.svg';
 import RootDropPosition from '@react-aria/dnd/docs/RootDropPosition.svg';
-import heroVideo from 'url:../../../../docs/pages/assets/dnd.mp4';
-import dndKeyboard from 'url:../../../../docs/pages/assets/dnd-keyboard.mp4';
-import dndMobile from 'url:../../../../docs/pages/assets/dnd-mobile.mp4';
-import dndMobileVTT from 'url:../../../../docs/pages/assets/dnd-mobile.vtt';
 import DragBetweenListsExample from './DragBetweenListsExample';
 
 import {BlogPostLayout} from '../../../src/Layout';
@@ -39,7 +35,7 @@ We are excited to announce the release of drag and drop support in [React Aria](
 - **Interoperability** – Drag data can be provided in multiple data formats for compatibility with many targets and external applications via the native HTML drag and drop API. Drag and drop integrates with multiple selection to allow dragging many objects at once.
 - **Customizability** – Interactions such as hit testing, keyboard navigation, and drop operations can be customized, as well as UIs for drag previews and drop indicators.
 
-<video src={heroVideo} loop autoPlay muted style={{maxWidth: 'min(100%, 1920px)', display: 'block', margin: '40px auto'}} />
+TODO: Add heroVideo video
 
 ## Introduction
 
@@ -61,15 +57,13 @@ For mouse and touch screen users, React Aria uses the native [HTML drag and drop
 
 In addition to native drag and drop, we have also implemented keyboard and screen reader accessible interactions from scratch. Keyboard users can focus a draggable element and press the `Enter` key to start dragging it. This enters a drag and drop mode across the whole page, which allows the user to press `Tab` to navigate only between drop targets that accept the dragged data, while skipping over all other elements. This reduces the number of elements on the page that must be traversed to find a drop target, and removes the guess work often found with other alternatives such as copy and paste. Once a target is chosen, pressing the `Enter` key again performs the drop.
 
-<video src={dndKeyboard} loop autoPlay muted style={{maxWidth: 'min(100%, 1920px)', display: 'block', margin: '40px auto'}} />
+TODO: Add video showing drag and drop using a keyboard
 
 For screen reader users, the interactions are similar. We've taken great care to include prompts and announcements to help guide the user through the process, which adapt to the device, and are localized into over 30 languages. Drag sources and drop targets include ARIA descriptions indicating that the user can press `Enter` or double tap to drag or drop, depending on their device. We also use an ARIA live region to announce when a drag starts, with instructions on how to navigate and perform a drop, and to announce when a drop is completed successfully or canceled by the user.
 
 In addition, while in drag and drop mode, all elements other than valid drop targets are hidden from screen readers. Desktop screen reader users can use the `Tab` key to navigate as described earlier, but touch screen readers navigate by swiping through elements using a virtual cursor, and double tapping to drop. Hiding all non-drop target elements makes it much easier to find valid places to drop, without needing to swipe through potentially hundreds of unrelated elements.
 
-<video src={dndMobile} loop autoPlay muted style={{maxWidth: 'min(100%, 1920px)', display: 'block', margin: '40px auto'}}>
-  <Track src={dndMobileVTT} default kind="captions" label="English Captions" srclang="en-us" type="text/vtt" />
-</video>
+TODO: Add video showing drag and drop using VoiceOver on iOS
 
 All of these accessibility features are implemented behind the scenes using the same API as for mouse and touch interactions. There is no additional effort required by the developer to make drag and drop accessible.