Merge pull request #325 from dermotduffy/camera-loop

Loop the live camera carousel

README.md

@@ -191,7 +191,7 @@ live:
 | Option | Default | Overridable | Description |
 | - | - | - | - |
 | `preload` | `false` | :heavy_multiplication_x: | Whether or not to preload the live view. Preloading causes the live view to render in the background regardless of what view is actually shown, so it's instantly available when requested. This consumes additional network/CPU resources continually. |
-| `auto_unmute` | `false` | :heavy_multiplication_x: | Whether or not to automatically unmute live cameras.|
+| `auto_unmute` | `false` | :heavy_multiplication_x: | Whether or not to automatically unmute live cameras. Note that some browsers will not allow automated unmute until the user has interacted with the page in some way -- if the user has not then the browser may pause the media instead. |
 | `lazy_load` | `true` | :heavy_multiplication_x: | Whether or not to lazily load cameras in the camera carousel. Setting this will `false` will cause all cameras to load simultaneously when the `live` carousel is opened (or cause all cameras to load continually if both `lazy_load` and `preload` are `true`). This will result in a smoother carousel experience at a cost of (potentially) a substantial amount of continually streamed data. |
 | `lazy_unload` | `false` | :heavy_multiplication_x: | Whether or not to lazily **un**load lazyily-loaded cameras in the camera carousel, or just leave the camera paused. Setting this to `true` will cause cameras to be entirely unloaded when they are no longer visible (either because the carousel has scrolled past them, or because the document has been marked hidden/inactive by the browser). This will cause a reloading delay on revisiting that camera in the carousel but will save the streaming network resources that are otherwise consumed. This option has no effect if `lazy_load` is false. |
 | `draggable` | `true` | :heavy_multiplication_x: | Whether or not the live carousel can be dragged left or right, via touch/swipe and mouse dragging. |
@@ -300,7 +300,7 @@ event_viewer:
 | Option | Default | Overridable | Description |
 | - | - | - | - |
 | `auto_play` | `true` | :heavy_multiplication_x: | Whether or not to autoplay clips.|
-| `auto_unmute` | `false` | :heavy_multiplication_x: | Whether or not to automatically unmute clips.|
+| `auto_unmute` | `false` | :heavy_multiplication_x: | Whether or not to automatically unmute clips. Note that some browsers will not allow automated unmute until the user has interacted with the page in some way -- if the user has not then the browser may pause the media instead. |
 | `lazy_load` | `true` | :heavy_multiplication_x: | Whether or not to lazily load media in the event viewer carousel. Setting this will false will fetch all media immediately which may make the carousel experience smoother at a cost of (potentially) a substantial number of simultaneous media fetches on load. |
 | `draggable` | `true` | :heavy_multiplication_x: | Whether or not the event viewer carousel can be dragged left or right, via touch/swipe and mouse dragging. |
 | `controls` | | :heavy_multiplication_x: | Configuration for the event viewer. See below. |

src/components/live.ts

@@ -34,7 +34,10 @@ import { BrowseMediaUtil } from '../browse-media-util.js';
 import { ConditionState, getOverriddenConfig } from '../card-condition.js';
 import { FrigateCardMediaCarousel } from './media-carousel.js';
 import { FrigateCardNextPreviousControl } from './next-prev-control.js';
-import { FrigateCardThumbnailCarousel, ThumbnailCarouselTap } from './thumbnail-carousel.js';
+import {
+  FrigateCardThumbnailCarousel,
+  ThumbnailCarouselTap,
+} from './thumbnail-carousel.js';
 import { Lazyload } from './embla-plugins/lazyload.js';
 import { View } from '../view.js';
 import { localize } from '../localize/localize.js';
@@ -174,10 +177,10 @@ export class FrigateCardLive extends LitElement {
     // up/down as the thumbnails disappear and re-appear. Instead, if there was
     // previously a thumbnail carousel rendered, use a filler that is the same
     // size until it is replaced with a real carousel (or empty, if no carousel
-    // is rendered for the next camera).    
+    // is rendered for the next camera).
     return html`${until(
       fetchThumbnailsThenRender(),
-      this._thumbnailCarousel 
+      this._thumbnailCarousel
         ? html` <div style="${styleMap(fillerStyle)}"></div>`
         : html``,
     )}`;
@@ -324,6 +327,7 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
     return {
       startIndex: startIndex < 0 ? undefined : startIndex,
       draggable: this.liveConfig?.draggable,
+      loop: true,
     };
   }
 
@@ -474,14 +478,14 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
       return [null, null];
     }
 
-    let prev: CameraConfig | null = null,
-      next: CameraConfig | null = null;
-    if (currentIndex > 0) {
-      prev = this.cameras.get(keys[currentIndex - 1]) ?? null;
-    }
-    if (currentIndex + 1 < this.cameras.size) {
-      next = this.cameras.get(keys[currentIndex + 1]) ?? null;
-    }
+    const prev =
+      this.cameras.get(
+        keys[currentIndex > 0 ? currentIndex - 1 : this.cameras.size - 1],
+      ) ?? null;
+    const next =
+      this.cameras.get(
+        keys[currentIndex + 1 < this.cameras.size ? currentIndex + 1 : 0],
+      ) ?? null;
     return [prev, next];
   }