/*!
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the Microsoft Live Share SDK License.
 */
import { UserMeetingRole } from "@microsoft/live-share";
import React from "react";
import { ExtendedMediaMetadata, IMediaPlayer } from "@microsoft/live-share-media";
import { IUseMediaSynchronizerResults } from "../types/index.js";
/**
 * React hook for using a Live Share media `MediaPlayerSynchronizer`.
 *
 * @remarks
 * Use this hook if you want to synchronize the playback position of a video or audio element during a Live Share session.
 * This hook can only be used in a child component of `<LiveShareProvider>` or `<AzureProvider>`.
 *
 * @param uniqueKey uniqueKey value for the `LiveMediaSession` DDS object used by `MediaPlayerSynchronizer`.
 * @param mediaPlayerElement React RefObject containing object/element conforming to IMediaPlayer interface, `IMediaPlayer` object, or string id for <video> / <audio> element.
 * @param initialTrack initial track to load. Either ExtendedMediaMetadata, trackId string, or null.
 * @param allowedRoles Optional. Array of user roles that are eligible to modify group playback state.
 * @param viewOnly Optional. Flag for whether or not the media synchronizer should be in viewOnly mode.
 * @param canSendPositionUpdates Optional. Controls whether or not the local client is allowed to send position updates to the group.
 * @returns IUseMediaSynchronizerResults object.
 *
 * @example
 ```jsx
import { useMediaSynchronizer } from "@microsoft/live-share-react";
import { UserMeetingRole } from "@microsoft/live-share";
import { MediaPlayerSynchronizerEvents } from "@microsoft/live-share-media";
import { useRef, useEffect } from "react";

const ALLOWED_ROLES = [UserMeetingRole.organizer, UserMeetingRole.presenter];

const INITIAL_TRACK = "<YOUR_VIDEO_URL>";

// Define a unique key that distinguishes this `useMediaSynchronizer` from others in your app
const UNIQUE_KEY = "MEDIA-SESSION-ID";

export function VideoPlayer() {
  const videoRef = useRef(null);
  const { play, pause, seekTo, mediaSynchronizer } = useMediaSynchronizer(
    UNIQUE_KEY,
    videoRef,
    INITIAL_TRACK,
    ALLOWED_ROLES
  );

  // Listen for groupaction events (optional)
  useEffect(() => {
    // Listen for player group actions for errors (e.g., play error)
    const onGroupAction = (evt: IMediaPlayerSynchronizerEvent) => {
      // See which user made the change (e.g., to display a notification)
      const clientInfo = await synchronizer.mediaSession.getClientInfo(evt.details.clientId);
    };
    mediaSynchronizer?.addEventListener(
      MediaPlayerSynchronizerEvents.groupaction,
      onGroupAction
    );
    return () => {
      mediaSynchronizer?.removeEventListener(
        MediaPlayerSynchronizerEvents.groupaction,
        onGroupAction
      );
    };
  }, [mediaSynchronizer]);

  return (
    <div>
      <video ref={videoRef} />
      <button onClick={play}>
        Play
      </button>
      <button onClick={pause}>
        Pause
      </button>
      <button onClick={() => {
        seekTo(0);
      }}>
        Start over
      </button>
    </div>
  );
}
 ```
 */
export declare function useMediaSynchronizer(uniqueKey: string, mediaPlayerElement: React.RefObject<IMediaPlayer> | IMediaPlayer | string | null, initialTrack: Partial<ExtendedMediaMetadata> | string | null, allowedRoles?: UserMeetingRole[], viewOnly?: boolean, canSendPositionUpdates?: boolean): IUseMediaSynchronizerResults;
//# sourceMappingURL=useMediaSynchronizer.d.ts.map