Merge pull request #879 from roflcoopter/feautre/docs-download-screen…

…shots

add screenshots and videos to event download instructions

docs/docs/documentation/configuration/recordings.mdx

@@ -54,9 +54,20 @@ ffmpeg: # or any other camera component
       recorder:
         // highlight-start
         continuous_recording: true
+        continuous: # Example of setting a max size of 10 GB for this individual camera
+          max_size:
+            gb: 10
         // highlight-end
 ```
 
+:::info
+
+In order to use `continuous_recording: true`, retention rules have to be set.
+
+There are several ways to set retention rules. See the [retention rules section](#retention-rules) for more information.
+
+:::
+
 ## Retention rules
 
 There are a number of ways to control the retention of recordings.
@@ -69,16 +80,16 @@ See the [storage component tiers documentation](/components-explorer/components/
 
 :::
 
+### Setting retention rules for all cameras
+
+To use the same retention rules for all cameras it is recommended to use the [storage component](/components-explorer/components/storage).
+
 :::warning
 
 Size based retention rules are calculated **per camera**, meaning that if you have 2 cameras and set a `max_size` of 1 GB, each camera can store 1 GB of recordings for a total of 2 GB.
 
 :::
 
-### Setting retention rules for all cameras
-
-To use the same retention rules for all cameras it is recommended to use the [storage component](/components-explorer/components/storage).
-
 Example configuration to set retention rules for all cameras:
 
 ```yaml /config/config.yaml
@@ -179,24 +190,40 @@ When you request a recording in the web interface, the server API will generate
 
 :::warning
 
-The recordings are not playable on their own since they are fragmented. If you want to play the recordings outside of the web interface you will need to [export the recordings](#exporting-recordings).
+The recordings are not playable on their own since they are fragmented. If you want to play the recordings outside of the web interface you will need to [download the recordings](#downloading-recordings).
 
 Alternatively you can point your media player to the HLS playlist URL (the same used by the web interface), but this is currently not documented.
 
 :::
 
-## Exporting recordings
+## Downloading recordings
 
-From the web interface you can export recordings to an `.mp4` file.
+From the web interface you can download recordings to an `.mp4` file.
 
-### Exporting an event recording
+### Downloading an event recording
 
-By using the `Export` button on the `Events` tab you can export an event recording. It will export the selected event to an `.mp4` file.
+To download an event recording, you use the `Download Recording` button in the event details popup on the `Events` tab. It will download the selected event to an `.mp4` file.
 
-TODO: Add a screenshot here
+<img
+  src="/img/screenshots/Viseron-Events-download-recording.png"
+  alt-text="Download Recording"
+  width={700}
+/>
 
-### Exporting a continuous recording
+### Downloading a continuous recording
 
-By using the `Export` button on the `Timeline` tab you can export a continuous recording. It will export the selected time range to an `.mp4` file.
+By using the `Download` button on the `Events` or `Timeline` tab you can download a continuous recording. It will download the selected time range to an `.mp4` file.
+
+:::info
+
+If you have multiple cameras selected, one file per camera will be downloaded.
+
+:::
 
-TODO: Add a screenshot here
+<video controls muted autoPlay loop style={{ maxWidth: 700, width: "100%" }}>
+  <source
+    src="/img/videos/Viseron-Events-download-timespan.mp4"
+    type="video/mp4"
+  />
+  Your browser does not support the video tag.
+</video>

docs/docs/documentation/configuration/snapshots.md

@@ -4,8 +4,6 @@ Snapshots are images taken when events are triggered or when a post processor fi
 
 The snapshots are saved to disk and can be viewed in the web interface on the `Events` and `Timeline` tab on the `Events` page.
 
-TODO: Add screenshot here
-
 ## Object detector snapshots
 
 Snapshots are stored based on the `store` option under `label` in the object detector configuration.
@@ -138,3 +136,15 @@ storage:
             max_age:
               days: 7
 ```
+
+## Downloading snapshots
+
+From the web interface you can download snapshots.
+
+To download a snapshot, you use the `Download Snapshot` button in the event details popup on the `Events` tab. It will download the selected snapshot to a `.jpg` file.
+
+<img
+  src="/img/screenshots/Viseron-Events-download-snapshot.png"
+  alt-text="Download Snapshot"
+  width={700}
+/>

frontend/src/components/events/FloatingMenu.tsx

@@ -61,7 +61,7 @@ export const FloatingMenu = memo(
               <CalendarMonthIcon />
             </Fab>
           </Tooltip>
-          <Tooltip title="Export">
+          <Tooltip title="Download">
             <Fab
               size="small"
               color="primary"

frontend/src/components/events/SnapshotEvent.tsx

@@ -214,14 +214,14 @@ export const SnapshotIcon = ({ events }: { events: types.CameraEvent[] }) => {
               justifyContent: "center",
               padding: "5px",
               cursor: "pointer",
-              "&:hover": {
+              ...(popupState.isOpen && {
                 borderRadius: 1, // theme.shape.borderRadius * 1
                 backgroundColor: theme.palette.primary[200],
 
                 ...theme.applyStyles("dark", {
                   backgroundColor: theme.palette.primary[900],
                 }),
-              },
+              }),
             })}
           >
             <Icon