From ee6c364e324b6ed3a408e5a391572c5f04ef08b7 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sun, 6 Feb 2022 12:30:44 -0800 Subject: [PATCH 1/3] Main live camera carousel should loop. --- src/components/live.ts | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/src/components/live.ts b/src/components/live.ts index 4db05626..ad2d3b6e 100644 --- a/src/components/live.ts +++ b/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`
` : 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]; } From 90e742c6177e36637b50a3a6499cc97d941ce06a Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sun, 6 Feb 2022 12:36:15 -0800 Subject: [PATCH 2/3] README update. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 48f2561d..e8c26b72 100644 --- a/README.md +++ b/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. | From 4b26ba78d42d32b5666c444dcbd73363d952c5f7 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sun, 6 Feb 2022 12:37:02 -0800 Subject: [PATCH 3/3] Missed README update. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e8c26b72..28c6c51d 100644 --- a/README.md +++ b/README.md @@ -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. |