Complete documentation overhaul.

docs/screenshots.md

@@ -0,0 +1,142 @@
+# Screenshots
+
+## 2-way audio
+
+![](images/microphone.gif "2-way audio support :size=400")
+
+## Cast media from card
+
+![](images/cast-your-events.gif "Cast media from the card :size=400")
+
+## Cast whole card
+
+A dashboard with the card can be cast onto a suitable device (such as the Nest Hub shown below).
+
+![](images/card-on-nest-hub.jpg "Card casting :size=400")
+
+## Dark mode
+
+![](images/dark-mode.gif "Dark mode :size=400")
+
+## Editing
+
+![](images/editor.gif "Card editing :size=400")
+
+## Events
+
+![](images/gallery.png "Full Viewing Of Events :size=400")
+
+## Expanded mode
+
+![](images/expanded.gif "Expanded mode :size=400")
+
+## Favoriting events
+
+![](images/star.gif "Card casting :size=400")
+
+## Filtering
+
+![](images/media-filtering.gif "Media filtering :size=400")
+
+## Grid
+
+![](images/grid-small.gif "Interacting with a camera grid :size=400")
+
+## Media layout
+
+Pan around a large camera view to only show part of the video feed in the card at a different aspect ratio:
+
+### Before
+
+![](images/media-layout-a.png "Before :size=400")
+
+### After
+
+![](images/media-layout-b.png "After :size=400")
+
+## Menu hovering
+
+![](images/viewer-with-thumbnail-next-prev.gif "Hover menu / Next & Previous controls :size=400")
+
+## Menu media control
+
+![](images/native-media-control.png "In-menu media / mute control :size=400")
+
+## Mixed engines
+
+![](images/motioneye.gif "Different camera sources/engines :size=400")
+
+## Multiple cameras
+
+Scroll through your live cameras, or choose from a menu. Seamlessly supports
+cameras of different dimensions, and custom submenus per camera.
+
+![](images/camera-carousel.gif "Live viewing of multiple cameras :size=400")
+
+## PTZ
+
+![](images/native-ptz.gif "PTZ control :size=400")
+
+## Recordings
+
+### Recordings single
+
+![](images/recording-seek.gif "Single camera recordings :size=400")
+
+### Recordings multiple
+
+![](images/recording-seek-all-cameras.gif "Multiple camera recordings :size=400")
+
+## Scrubbing
+
+![](images/video-scrubbing.gif "Video scrubbing :size=400")
+
+## Submenus
+
+![](images/submenu.gif "Configurable submenus :size=400")
+
+## Submenus with `select` entities
+
+![](images/submenu-select.gif "select entity submenus :size=400")
+
+## Substreams
+
+![](images/substream.gif "Substreams :size=400")
+
+## Thumbnail drawers
+
+![](images/thumbnails-in-drawer.gif "Thumbnail drawers :size=400")
+
+## Thumbnails in live
+
+![](images/live-thumbnails.gif "Live viewing with thumbnail carousel :size=400")
+
+## Thumbnails in media viewer
+
+![](images/viewer-thumbnails.gif "Clip viewing with thumbnail carousel :size=400")
+
+## Timeline
+
+![](images/timeline.gif "Event timeline :size=400")
+
+## Timeline date picking
+
+![](images/date-picker.gif "Timeline date picking :size=400")
+
+## Timeline `ribbon`
+
+![](images/ribbon-timeline.png "Ribbon timeline :size=400")
+
+## Triggering
+
+Automatically choose the camera with the action!
+
+![](images/triggered.gif "Triggered! :size=400")
+
+## URL actions
+
+![](images/navigate-picture-elements.gif "Taking card actions via the URL :size=400")
+
+## Zoom
+
+![](images/zoom.gif "Zoom support :size=400")