[ 1.0.8 ] * Added exception processing for various media controls: seek, volume set, mute.

  * Fixed code in the `buildMediaBrowserItems` method that was causing exceptions to be logged for null content.

Author: thlucas1

CHANGELOG.md

@@ -6,6 +6,11 @@ Change are listed in reverse chronological order (newest to oldest).
 
 <span class="changelog">
 
+###### [ 1.0.8 ] - 2024/10/27
+
+  * Added exception processing for various media controls: seek, volume set, mute.
+  * Fixed code in the `buildMediaBrowserItems` method that was causing exceptions to be logged for null content.
+
 ###### [ 1.0.7 ] - 2024/10/25
 
   * Added an outline to the player progress bar.

src/card.ts

@@ -181,7 +181,7 @@ export class Card extends LitElement {
               class="spc-card-footer"
               .config=${this.config}
               .section=${this.section}
-              @show-section=${this.OnFooterShowSection}
+              @show-section=${this.onFooterShowSection}
             ></spc-footer>
           </div>`
         )}
@@ -402,7 +402,7 @@ export class Card extends LitElement {
     if (isCardInEditPreview(this)) {
 
       // add document level event listeners.
-      document.addEventListener(EDITOR_CONFIG_AREA_SELECTED, this.OnEditorConfigAreaSelectedEventHandler);
+      document.addEventListener(EDITOR_CONFIG_AREA_SELECTED, this.onEditorConfigAreaSelectedEventHandler);
 
     }
 
@@ -430,7 +430,7 @@ export class Card extends LitElement {
     // return a different value than when the event was added in connectedCallback!
 
     // remove document level event listeners.
-    document.removeEventListener(EDITOR_CONFIG_AREA_SELECTED, this.OnEditorConfigAreaSelectedEventHandler);
+    document.removeEventListener(EDITOR_CONFIG_AREA_SELECTED, this.onEditorConfigAreaSelectedEventHandler);
 
     // invoke base class method.
     super.disconnectedCallback();
@@ -572,7 +572,7 @@ export class Card extends LitElement {
    * 
    * @param ev Event definition and arguments.
   */
-  protected OnEditorConfigAreaSelectedEventHandler = (ev: Event) => {
+  protected onEditorConfigAreaSelectedEventHandler = (ev: Event) => {
 
     // map event arguments.
     const evArgs = (ev as CustomEvent).detail as EditorConfigAreaSelectedEventArgs;
@@ -599,7 +599,7 @@ export class Card extends LitElement {
    * 
    * @param args Event arguments that contain the section to show.
   */
-  protected OnFooterShowSection = (args: CustomEvent) => {
+  protected onFooterShowSection = (args: CustomEvent) => {
 
     const section = args.detail;
     if (!this.config.sections || this.config.sections.indexOf(section) > -1) {

src/components/footer.ts

@@ -40,84 +40,84 @@ export class Footer extends LitElement {
       <ha-icon-button
         .path=${mdiPlayCircle}
         label="Player"
-        @click=${() => this.OnSectionClick(Section.PLAYER)}
+        @click=${() => this.onSectionClick(Section.PLAYER)}
         selected=${this.getSectionSelected(Section.PLAYER)}
         hide=${this.getSectionEnabled(Section.PLAYER)}
       ></ha-icon-button>
       <ha-icon-button
         .path=${mdiSpeaker}
         label="Devices"
-        @click=${() => this.OnSectionClick(Section.DEVICES)}
+        @click=${() => this.onSectionClick(Section.DEVICES)}
         selected=${this.getSectionSelected(Section.DEVICES)}
         hide=${this.getSectionEnabled(Section.DEVICES)}
       ></ha-icon-button>
       <ha-icon-button
         .path=${mdiBookmarkMusicOutline}
         label="User Presets"
-        @click=${() => this.OnSectionClick(Section.USERPRESETS)}
+        @click=${() => this.onSectionClick(Section.USERPRESETS)}
         selected=${this.getSectionSelected(Section.USERPRESETS)}
         hide=${this.getSectionEnabled(Section.USERPRESETS)}
       ></ha-icon-button>
       <ha-icon-button
         .path=${mdiHistory}
         label="Recently Played"
-        @click=${() => this.OnSectionClick(Section.RECENTS)}
+        @click=${() => this.onSectionClick(Section.RECENTS)}
         selected=${this.getSectionSelected(Section.RECENTS)}
         hide=${this.getSectionEnabled(Section.RECENTS)}
       ></ha-icon-button>
       <ha-icon-button
         .path=${mdiPlaylistPlay}
         label='Playlist Favorites'
-        @click=${() => this.OnSectionClick(Section.PLAYLIST_FAVORITES)}
+        @click=${() => this.onSectionClick(Section.PLAYLIST_FAVORITES)}
         selected=${this.getSectionSelected(Section.PLAYLIST_FAVORITES)}
         hide=${this.getSectionEnabled(Section.PLAYLIST_FAVORITES)}
       ></ha-icon-button>
       <ha-icon-button
         .path=${mdiAlbum}
         label='Album Favorites'
-        @click=${() => this.OnSectionClick(Section.ALBUM_FAVORITES)}
+        @click=${() => this.onSectionClick(Section.ALBUM_FAVORITES)}
         selected=${this.getSectionSelected(Section.ALBUM_FAVORITES)}
         hide=${this.getSectionEnabled(Section.ALBUM_FAVORITES)}
       ></ha-icon-button>
       <ha-icon-button
         .path=${mdiAccountMusic}
         label='Artist Favorites'
-        @click=${() => this.OnSectionClick(Section.ARTIST_FAVORITES)}
+        @click=${() => this.onSectionClick(Section.ARTIST_FAVORITES)}
         selected=${this.getSectionSelected(Section.ARTIST_FAVORITES)}
         hide=${this.getSectionEnabled(Section.ARTIST_FAVORITES)}
       ></ha-icon-button>
       <ha-icon-button
         .path=${mdiMusic}
         label='Track Favorites'
-        @click=${() => this.OnSectionClick(Section.TRACK_FAVORITES)}
+        @click=${() => this.onSectionClick(Section.TRACK_FAVORITES)}
         selected=${this.getSectionSelected(Section.TRACK_FAVORITES)}
         hide=${this.getSectionEnabled(Section.TRACK_FAVORITES)}
       ></ha-icon-button>
       <ha-icon-button
         .path=${mdiBookOpenVariant}
         label='Audiobook Favorites'
-        @click=${() => this.OnSectionClick(Section.AUDIOBOOK_FAVORITES)}
+        @click=${() => this.onSectionClick(Section.AUDIOBOOK_FAVORITES)}
         selected=${this.getSectionSelected(Section.AUDIOBOOK_FAVORITES)}
         hide=${this.getSectionEnabled(Section.AUDIOBOOK_FAVORITES)}
       ></ha-icon-button>
       <ha-icon-button
         .path=${mdiPodcast}
         label='Show Favorites'
-        @click=${() => this.OnSectionClick(Section.SHOW_FAVORITES)}
+        @click=${() => this.onSectionClick(Section.SHOW_FAVORITES)}
         selected=${this.getSectionSelected(Section.SHOW_FAVORITES)}
         hide=${this.getSectionEnabled(Section.SHOW_FAVORITES)}
       ></ha-icon-button>
       <ha-icon-button
         .path=${mdiMicrophone}
         label='Episode Favorites'
-        @click=${() => this.OnSectionClick(Section.EPISODE_FAVORITES)}
+        @click=${() => this.onSectionClick(Section.EPISODE_FAVORITES)}
         selected=${this.getSectionSelected(Section.EPISODE_FAVORITES)}
         hide=${this.getSectionEnabled(Section.EPISODE_FAVORITES)}
       ></ha-icon-button>
       <ha-icon-button
         .path=${mdiSearchWeb}
         label='Search Spotify'
-        @click=${() => this.OnSectionClick(Section.SEARCH_MEDIA)}
+        @click=${() => this.onSectionClick(Section.SEARCH_MEDIA)}
         selected=${this.getSectionSelected(Section.SEARCH_MEDIA)}
         hide=${this.getSectionEnabled(Section.SEARCH_MEDIA)}
       ></ha-icon-button>
@@ -151,7 +151,7 @@ export class Footer extends LitElement {
    * 
    * @param section Event arguments.
    */
-  private OnSectionClick(section: Section) {
+  private onSectionClick(section: Section) {
 
     this.dispatchEvent(customEvent(SHOW_SECTION, section));
 

src/components/player-controls.ts

@@ -155,7 +155,7 @@ class PlayerControls extends LitElement {
   }
 
   // bound event listeners for event handlers that need access to "this" object.
-  private OnKeyDown_EventListenerBound;
+  private onKeyDown_EventListenerBound;
 
   /**
    * Initializes a new instance of the class.
@@ -166,7 +166,7 @@ class PlayerControls extends LitElement {
     super();
 
     // create bound event listeners for event handlers that need access to "this" object.
-    this.OnKeyDown_EventListenerBound = this.OnKeyDown.bind(this);
+    this.onKeyDown_EventListenerBound = this.OnKeyDown.bind(this);
   }
 
 
@@ -184,7 +184,7 @@ class PlayerControls extends LitElement {
     super.connectedCallback();
 
     // add document level event listeners.
-    document.addEventListener("keydown", this.OnKeyDown_EventListenerBound);
+    document.addEventListener("keydown", this.onKeyDown_EventListenerBound);
 
     // determine if card configuration is being edited.
     this.isCardInEditPreview = isCardInEditPreview(this.store.card);
@@ -205,7 +205,7 @@ class PlayerControls extends LitElement {
   public disconnectedCallback() {
 
     // remove document level event listeners.
-    document.removeEventListener("keydown", this.OnKeyDown_EventListenerBound);
+    document.removeEventListener("keydown", this.onKeyDown_EventListenerBound);
 
     // invoke base class method.
     super.disconnectedCallback();
@@ -309,27 +309,23 @@ class PlayerControls extends LitElement {
 
         await this.mediaControlService.turn_on(this.player);
 
-      } else {
-
-        // no action selected - hide progress indicator.
-        this.progressHide();
-
       }
 
-      // hide progress indicator.
-      this.progressHide();
       return true;
 
     }
     catch (error) {
 
-      // clear the progress indicator and set alert error message.
-      this.progressHide();
+      // set alert error message.
       this.alertErrorSet("Control action failed: \n" + (error as Error).message);
       return true;
 
     }
     finally {
+
+      // hide progress indicator.
+      this.progressHide();
+
     }
 
   }

src/components/player-progress.ts

@@ -6,27 +6,32 @@ import { styleMap } from 'lit-html/directives/style-map.js';
 // our imports.
 import { Store } from '../model/store';
 import { MediaPlayer } from '../model/media-player';
+import { ProgressStartedEvent } from '../events/progress-started';
+import { ProgressEndedEvent } from '../events/progress-ended';
+import { closestElement } from '../utils/utils';
+import { Player } from '../sections/player';
+
 
 class Progress extends LitElement {
 
-  /** Application common storage area. */
+  // public state properties.
   @property({ attribute: false }) store!: Store;
 
+  // private state properties.
+  @state() private playingProgress!: number;
+
   /** MediaPlayer instance created from the configuration entity id. */
   private player!: MediaPlayer;
 
-  /** Current position (in seconds) of the currently playing media. */
-  @state() private playingProgress!: number;
-
   /** Callback function that calculates the current progress (executed every 1 second). */
   private tracker?: NodeJS.Timeout;
 
-  /** Progress bar HTMLElement control. */
-  @query('.bar') private progressBar?: HTMLElement;
-
   /** Current media duration value. */
   private mediaDuration = 0;
 
+  /** Progress bar HTMLElement control. */
+  @query('.bar') private progressBar?: HTMLElement;
+
 
   /**
    * Invoked on each update to perform rendering tasks. 
@@ -97,13 +102,68 @@ class Progress extends LitElement {
    */
   private async onSeekBarClick(args: MouseEvent) {
 
-    // calculate the desired position based on the mouse pointer position.
-    const progressWidth = this.progressBar!.offsetWidth;
-    const percent = args.offsetX / progressWidth;
-    const position = this.mediaDuration * percent;
+    try {
+
+      // calculate the desired position based on the mouse pointer position.
+      const progressWidth = this.progressBar!.offsetWidth;
+      const percent = args.offsetX / progressWidth;
+      const position = this.mediaDuration * percent;
+
+      // show progress indicator.
+      this.progressShow();
+
+      // call service to seek to track position.
+      await this.store.mediaControlService.media_seek(this.player, position);
+      return true;
+
+    }
+    catch (error) {
+
+      // set alert error message.
+      this.alertErrorSet("Seek position failed: \n" + (error as Error).message);
+      return true;
+
+    }
+    finally {
+
+      // hide progress indicator.
+      this.progressHide();
+
+    }
+
+  }
+
+
+  /**
+   * Hide visual progress indicator.
+   */
+  protected progressHide(): void {
+    this.store.card.dispatchEvent(ProgressEndedEvent());
+  }
+
+
+  /**
+   * Show visual progress indicator.
+   */
+  protected progressShow(): void {
+    this.store.card.dispatchEvent(ProgressStartedEvent());
+  }
+
+
+  /**
+   * Sets the alert error message in the parent player.
+   * 
+   * @param message alert message text.
+   */
+  private alertErrorSet(message: string): void {
+
+    // find the parent player reference, and update the message.
+    // we have to do it this way due to the shadowDOM between this element and the player element.
+    const spcPlayer = closestElement('#spcPlayer', this) as Player;
+    if (spcPlayer) {
+      spcPlayer.alertErrorSet(message);
+    }
 
-    // call service to seek to track position.
-    await this.store.mediaControlService.media_seek(this.player, position);
   }
 
 
@@ -181,6 +241,7 @@ class Progress extends LitElement {
         margin-right: 2px;
         height: 50%;
         transition: width 0.1s linear;
+        border-radius: 0.18rem;
       }
 
       .progress-time {