Merge pull request #290 from dermotduffy/comment-update

Update README for combination of lazy-{unload,load} flags

README.md

@@ -191,7 +191,7 @@ live:
 | - | - | - | - |
 | `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. |
 | `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 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. |
+| `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. |
 | `provider` | `frigate` | :white_check_mark: | The means through which the live camera view is displayed. See [Live Provider](#live-provider) below.|
 | `actions` | | :white_check_mark: | Actions to use for the `live` view. See [actions](#actions) below.|

src/components/embla-plugins/lazyload.ts

@@ -1,7 +1,8 @@
 import { EmblaCarouselType, EmblaEventType, EmblaPluginType } from 'embla-carousel';
 
 export type LazyloadOptionsType = {
-  // Number of slides to lazyload left/right of selected (0 == only selected slide).
+  // Number of slides to lazyload left/right of selected (0 == only selected
+  // slide).
   lazyloadCount?: number;
 
   lazyloadCallback?: (index: number, slide: HTMLElement) => void;
@@ -59,9 +60,9 @@ export function Lazyload(userOptions?: LazyloadOptionsType): LazyloadType {
    * Handle document visibility changes.
    */
   function visibilityHandler(): void {
-    if (document.visibilityState == 'hidden' && lazyunloadHandler)  {
+    if (document.visibilityState == 'hidden' && lazyunloadHandler) {
       lazyunloadHandler();
-    } else if (document.visibilityState == 'visible' && lazyloadHandler)  {
+    } else if (document.visibilityState == 'visible' && lazyloadHandler) {
       lazyloadHandler();
     }
   }
@@ -107,10 +108,10 @@ export function Lazyload(userOptions?: LazyloadOptionsType): LazyloadType {
   /**
    * Lazily unload media in the carousel.
    */
-   function lazyunloadHandler(): void {
+  function lazyunloadHandler(): void {
     const index = carousel.previousScrollSnap();
 
-    // Only lazy unload slides that are loaded.
+    // Only lazy unload slides that are lazy loaded.
     if (!isSlideLazyloaded[index]) {
       return;
     }

src/components/live.ts

@@ -857,6 +857,9 @@ export class FrigateCardLiveJSMPEG extends LitElement {
           canvas: this._jsmpegCanvasElement,
         },
         {
+          // The media carousel automatically pauses when the browser tab is
+          // inactive, JSMPEG does not need to also do so independently.
+          pauseWhenHidden: false,
           protocols: [],
           audio: false,
           videoBufferSize: 1024 * 1024 * 4,