Merge pull request #310 from dermotduffy/unmute

Don't autoplay on visibility unless autoplay option is enabled

src/components/embla-plugins/automedia.ts

@@ -1,19 +1,27 @@
 import { EmblaCarouselType, EmblaPluginType } from 'embla-carousel';
 import { FrigateCardMediaPlayer } from '../../types.js';
 
-export type MediaAutoPlayPauseOptionsType = {
+export type AutoMediaPluginOptionsType = {
   playerSelector: string;
+  autoplayWhenVisible?: boolean;
 };
 
-export const defaultOptions: Partial<MediaAutoPlayPauseOptionsType> = {};
+export const defaultOptions: Partial<AutoMediaPluginOptionsType> = {
+  autoplayWhenVisible: true,
+};
 
-export type MediaAutoPlayPauseType = EmblaPluginType<MediaAutoPlayPauseOptionsType> & {
+export type AutoMediaPluginType = EmblaPluginType<AutoMediaPluginOptionsType> & {
   play: () => void;
 }
 
-export function MediaAutoPlayPause(
-  userOptions?: MediaAutoPlayPauseOptionsType,
-): MediaAutoPlayPauseType {
+/**
+ * An Embla plugin to take automated actions on media (e.g. pause, unmute, etc).
+ * @param userOptions 
+ * @returns 
+ */
+export function AutoMediaPlugin(
+  userOptions?: AutoMediaPluginOptionsType,
+): AutoMediaPluginType {
   const options = Object.assign({}, defaultOptions, userOptions);
 
   let carousel: EmblaCarouselType;
@@ -50,7 +58,7 @@ export function MediaAutoPlayPause(
    function visibilityHandler(): void {
     if (document.visibilityState == 'hidden') {
       pause();
-    } else if (document.visibilityState == 'visible') {
+    } else if (document.visibilityState == 'visible' && options.autoplayWhenVisible) {
       play();
     }
   }
@@ -65,7 +73,7 @@ export function MediaAutoPlayPause(
   }
 
   /**
-   * Pause all clips.
+   * Pause all slides.
    */
   function pauseAllHandler(): void {
     slides.forEach((slide) => getPlayer(slide)?.pause());
@@ -88,12 +96,12 @@ export function MediaAutoPlayPause(
   /**
    * Autopause the previous slide.
    */
-   function pausePrevious(): void {
+  function pausePrevious(): void {
     getPlayer(slides[carousel.previousScrollSnap()])?.pause();
   }
 
-  const self: MediaAutoPlayPauseType = {
-    name: 'MediaAutoPlayPause',
+  const self: AutoMediaPluginType = {
+    name: 'AutoMediaPlugin',
     options,
     init,
     destroy,

src/components/live.ts

@@ -27,12 +27,12 @@ import { Task } from '@lit-labs/task';
 import { customElement, property, state } from 'lit/decorators.js';
 import { until } from 'lit/directives/until.js';
 
+import { AutoMediaPlugin } from './embla-plugins/automedia.js';
 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 { Lazyload } from './embla-plugins/lazyload.js';
-import { MediaAutoPlayPause } from './embla-plugins/media-autoplay.js';
 import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
 import { View } from '../view.js';
 import { localize } from '../localize/localize.js';
@@ -308,7 +308,7 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
           ? (...args) => this._lazyloadOrUnloadSlide('unload', ...args)
           : undefined,
       }),
-      MediaAutoPlayPause({
+      AutoMediaPlugin({
         playerSelector: 'frigate-card-live-provider',
       }),
     ];

src/components/media-carousel.ts

@@ -16,7 +16,7 @@ import mediaCarouselStyle from '../scss/media-carousel.scss';
 
 import { FrigateCardNextPreviousControl } from './next-prev-control.js';
 import { FrigateCardTitleControl } from './title-control.js';
-import { MediaAutoPlayPauseType } from './embla-plugins/media-autoplay.js';
+import { AutoMediaPluginType } from './embla-plugins/automedia.js';
 
 const getEmptyImageSrc = (width: number, height: number) =>
   `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"%3E%3C/svg%3E`;
@@ -35,7 +35,7 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
    * autoplay should happen.
    */
   protected _autoplayHandler(): void {
-    (this._plugins['MediaAutoPlayPause'] as MediaAutoPlayPauseType | undefined)?.play();
+    (this._plugins['MediaAutoPlayPause'] as AutoMediaPluginType | undefined)?.play();
   }
 
   /**

src/components/viewer.ts

@@ -14,6 +14,7 @@ import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
+import { AutoMediaPlugin } from './embla-plugins/automedia.js';
 import type {
   BrowseMediaNeighbors,
   BrowseMediaQueryParameters,
@@ -29,7 +30,6 @@ import {
   FrigateCardThumbnailCarousel,
   ThumbnailCarouselTap,
 } from './thumbnail-carousel.js';
-import { MediaAutoPlayPause } from './embla-plugins/media-autoplay.js';
 import { Lazyload, LazyloadType } from './embla-plugins/lazyload.js';
 import { ResolvedMediaCache, ResolvedMediaUtil } from '../resolved-media.js';
 import { View } from '../view.js';
@@ -320,8 +320,9 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
       // Don't need autoplay/pause for snapshots.
       ...(this.view?.is('clip')
         ? [
-            MediaAutoPlayPause({
+            AutoMediaPlugin({
               playerSelector: 'frigate-card-ha-hls-player',
+              autoplayWhenVisible: !!this.viewerConfig?.autoplay_clip,
             }),
           ]
         : []),