didStopPlayingClip

Indicates that a clip has stopped playing.

Overview

Call this method when your video player completes playback of a clip. This allows the SDK to update its UI to reflect the current playback state, including removing the progress indicator and possibly preparing for the next clip.

Method Signature

didStopPlayingClip(index: number): void

Parameters

Parameter	Type	Description
index	number	The index of the clip that has stopped playing, corresponding to its position in the flattened key plays array

Return Value

This method does not return a value.

Example Usage

import SDK from '@maestro_io/maestro-web-sdk';

// Example of handling clip completion
function handleClipCompleted(clipIndex: number) {
  // Get the event view model
  const event = SDK.getMaestroEventViewModel();
  
  // Notify the SDK that playback has completed
  event.didStopPlayingClip(clipIndex);
  
  // Clean up any progress reporting
  if (progressInterval) {
    clearInterval(progressInterval);
    progressInterval = null;
  }
  
  // Optional: Auto-play the next clip
  const totalClips = event.getKeyPlaysCount();
  if (clipIndex + 1 < totalClips) {
    playClip(clipIndex + 1);
  } else {
    // All clips have been played
    showCompletionUI();
  }
}

// Integration with a video player
function setupVideoPlayer(videoElement, clipIndex) {
  // Get the event view model
  const event = SDK.getMaestroEventViewModel();
  
  // Set up event listener for completion
  videoElement.addEventListener('ended', () => {
    // Notify the SDK that the clip has completed
    event.didStopPlayingClip(clipIndex);
  });
  
  // Other setup...
}

Integration with Different Video Player Libraries

HTML5 Video

import SDK from '@maestro_io/maestro-web-sdk';

// Example with HTML5 video element
function setupHtml5VideoPlayer() {
  const videoElement = document.getElementById('video-player') as HTMLVideoElement;
  const event = SDK.getMaestroEventViewModel();
  
  videoElement.addEventListener('ended', () => {
    const currentClipIndex = event.getCurrentlyPlayingClipIndex();
    if (currentClipIndex !== null) {
      event.didStopPlayingClip(currentClipIndex);
    }
  });
}

Shaka Player

import SDK from '@maestro_io/maestro-web-sdk';
import shaka from 'shaka-player';

// Example with Shaka Player
function setupShakaPlayer() {
  const videoElement = document.getElementById('video-player') as HTMLVideoElement;
  const player = new shaka.Player(videoElement);
  const event = SDK.getMaestroEventViewModel();
  
  videoElement.addEventListener('ended', () => {
    const currentClipIndex = event.getCurrentlyPlayingClipIndex();
    if (currentClipIndex !== null) {
      event.didStopPlayingClip(currentClipIndex);
    }
  });
}

Video.js

import SDK from '@maestro_io/maestro-web-sdk';
import videojs from 'video.js';

// Example with Video.js
function setupVideoJs() {
  const player = videojs('video-player');
  const event = SDK.getMaestroEventViewModel();
  
  player.on('ended', () => {
    const currentClipIndex = event.getCurrentlyPlayingClipIndex();
    if (currentClipIndex !== null) {
      event.didStopPlayingClip(currentClipIndex);
    }
  });
}

Internal Behavior

When didStopPlayingClip() is called, the SDK updates several state properties in the KeyPlaysViewModel:

didStopPlayingClip(index: number): void {
  this.keyPlaysViewModel.lastPlayedClipIndex.value = index;
  this.keyPlaysViewModel.currentlyPlayingClipIndex.value = null;
  this.keyPlaysViewModel.currentClipPlaybackProgress.value = null;
}

These state updates trigger UI changes in the key plays panel, such as:

1. Removing the progress indicator
2. Unhighlighting the clip that was playing
3. Updating the "last played" state, which may affect the UI

Notes

• Call this method when the clip has fully completed playing, not when it's paused or stopped mid-playback.
• This method should be called even if the clip plays to the end naturally, not just when the user manually stops it.
• The index parameter should match the index that was passed to didStartPlayingClip().
• If you're implementing auto-play functionality, call this method before starting the next clip.
• This method is synchronous and doesn't perform any network operations.
• Make sure to clean up any progress reporting intervals or timers when calling this method.