2.0.0-migration.md

Migration guide for 2.0.0 version.

We just released 2.0.0 version! Our main goal was to standardize naming in internal functionality, API methods and reduce configuration object for player constructor. Here is list of all breaking changes:

Player config

We have new structure of config object.

interface IPlayerConfig {
  src?: PlayableMediaSource;
  poster?: string;
  title?: string;

  width?: number;
  height?: number;
  fillAllSpace?: boolean;

  preload?: PreloadTypes;
  autoplay?: boolean;
  loop?: boolean;
  muted?: boolean;
  volume?: number;
  playsinline?: boolean;
  crossOrigin?: CrossOriginValue;
  nativeBrowserControls?: boolean;

  disableControlWithClickOnPlayer?: boolean;
  disableControlWithKeyboard?: boolean;

  hideMainUI?: boolean;
  hideOverlay?: boolean;

  disableFullScreen?: boolean;

  texts?: ITextMapConfig;
}

And changes we made:

• size object removed, now just pass width and height.

//Before
const config = {
  size: {
    width: 400,
    height: 200,
  },
};

//After
const config = {
  width: 400,
  height: 200,
};

• showInteractionIndicator property removed.

//Before
const config = {
  showInteractionIndicator: false,
};

//After
const config = {};

• screen object removed.

//Before
const config = {
  screen: {
    nativeControls: true,
    disableClickProcessing: true,
  },
};

//After
const config = {
  nativeBrowserControls: true,
  disableControlWithClickOnPlayer: true,
};

• title object removed.

//Before
const config = {
  title: {
    text: 'Title',
    callback: () => console.log('Title click'),
  },
};

//After
const config = {
  title: 'Text',
};
const player = Playable.create(config);
player.setTitleClickCallback(() => console.log('Title click'));

• controls object removed.

//Before
const config = {
  controls: {
    setShouldAlwaysShow: true,
  },
};

//After
const player = Playable.create();
player.setMainUIShouldAlwaysShow(true);

• overlay object removed.

//Before
const config = {
  overlay: false,
};

//After
const config = {
  hideOverlay: true,
};

// -------

//Before
const config = {
  overlay: {
    poster: 'IMAGE_URL',
  },
};

//After
const config = {
  poster: 'IMAGE_URL',
};

• fullScreen object removed.

//Before
const config = {
  fullScreen: false,
};

//After
const config = {
  disableFullScreen: true,
};

• logo object removed.

//Before
const config = {
  logo: {
    src: 'LOGO_URL',
    shouldAlwaysShow: true,
    callback: () => console.log('Logo click'),
  },
};

//After
const player = Playable.create();
player.setLogo('LOGO_URL');
player.setAlwaysShowLogo(true);
player.setLogoClickCallback(() => console.log('Logo clicl'));

• loader property removed.

//Before
const config = {
  loader: false,
};

//After
const config = {};

• autoPlay -> autoplay.

//Before
const config = {
  autoPlay: true,
};

//After
const config = {
  autoplay: true,
};

• playInline -> playsinline.

//Before
const config = {
  playInline: true,
};

//After
const config = {
  playsinline: true,
};

New properties:

• hideMainUI for hidding all UI except overlay.
• hideOverlay for hidding overlay.

Player API

We focused almost only on renaming for consistency.

Just renaming:

• getter isVideoPaused -> getter isPaused.

//Before
console.log(player.isVideoPaused);

//After
console.log(player.isPaused);

• getter isVideoEnded -> getter isEnded.

//Before
console.log(player.isVideoEnded);

//After
console.log(player.isEnded);

• goForward() -> seekForward().

//Before
player.goForward(10);

//After
player.seekForward(10);

• goBackward() -> seekBackward().

//Before
player.goBackward(10);

//After
player.seekBackward(10);

• goTo() -> seekTo().

//Before
player.goTo(50);

//After
player.seekTo(50);

• getDurationTime() -> getDuration().

//Before
console.log(player.getDurationTime());

//After
console.log(player.getDuration());

• setAutoPlay() -> setAutoplay().

//Before
player.setAutoPlay(true);

//After
player.setAutoplay(true);

• getAutoPlay() -> getAutoplay().

//Before
console.log(player.getAutoPlay());

//After
console.log(player.getAutoplay());

• setPlayInline() -> setPlaysinline().

//Before
player.setPlayInline(true);

//After
player.setPlaysinline(true);

• getPlayInline() -> getPlaysinline().

//Before
console.log(player.getPlayInline());

//After
console.log(player.getPlaysinline());

• getCurrentPlaybackState() -> getPlaybackState().

//Before
console.log(player.getCurrentPlaybackState());

//After
console.log(player.getPlaybackState());

• setControlsShouldAlwaysShow() -> setMainUIShouldAlwaysShow().

//Before
player.setControlsShouldAlwaysShow(true);

//After
player.setMainUIShouldAlwaysShow(true);

• setLogoAlwaysShowFlag() -> setAlwaysShowLogo().

//Before
player.setLogoAlwaysShowFlag(true);

//After
player.setAlwaysShowLogo(true);

Changed usage:

• getter node -> getElement().

//Before
console.log(player.node); //DOM Element

//After
console.log(player.getElement()); //DOM Element

• setMute() removed, added mute() and unmute().

//Before
player.setMute(true);
player.setMute(false);

//After
player.mute();
player.unmute();

• getMuted() -> getter isMuted.

//Before
player.setMute(true);
console.log(player.getMuted()); //true

//After
player.mute();
console.log(player.isMuted); //true

Events

Video events

Just renaming:

• VOLUME_STATUS_CHANGED -> SOUND_STATE_CHANGED.
• PLAY_REQUEST_TRIGGERED -> PLAY_REQUEST.

UI events

Just renaming:

• PLAY_TRIGGERED -> PLAY_CLICK.
• PLAY_OVERLAY_TRIGGERED -> PLAY_OVERLAY_CLICK.
• PAUSE_TRIGGERED -> PAUSE_CLICK.
• PROGRESS_CHANGE_TRIGGERED -> PROGRESS_CHANGE.
• PROGRESS_SYNC_BUTTON_MOUSE_ENTER_TRIGGERED -> PROGRESS_SYNC_BUTTON_MOUSE_ENTER.
• PROGRESS_SYNC_BUTTON_MOUSE_LEAVE_TRIGGERED -> PROGRESS_SYNC_BUTTON_MOUSE_LEAVE.
• VOLUME_CHANGE_TRIGGERED -> VOLUME_CHANGE.
• FULLSCREEN_STATUS_CHANGED -> FULL_SCREEN_STATE_CHANGED. Also added ENTER_FULL_SCREEN_CLICK and EXIT_FULL_SCREEN_CLICK for clicks on full screen control.
• MOUSE_ENTER_ON_PLAYER_TRIGGERED -> MOUSE_ENTER_ON_PLAYER.
• MOUSE_MOVE_ON_PLAYER_TRIGGERED -> MOUSE_MOVE_ON_PLAYER.
• MOUSE_LEAVE_ON_PLAYER_TRIGGERED -> MOUSE_LEAVE_ON_PLAYER.
• MAIN_BLOCK_HIDE_TRIGGERED -> MAIN_BLOCK_HIDE.
• MAIN_BLOCK_SHOW_TRIGGERED -> MAIN_BLOCK_SHOW.
• PROGRESS_MANIPULATION_STARTED -> PROGRESS_DRAG_STARTED.
• PROGRESS_MANIPULATION_ENDED -> PROGRESS_DRAG_ENDED.
• LOADER_SHOW_TRIGGERED -> LOADER_SHOW.
• LOADER_HIDE_TRIGGERED -> LOADER_HIDE.
• LOADING_COVER_SHOW_TRIGGERED -> LOADING_COVER_SHOW.
• LOADING_COVER_HIDE_TRIGGERED -> LOADING_COVER_HIDE.
• TOGGLE_PLAYBACK_WITH_KEYBOARD_TRIGGERED -> TOGGLE_PLAYBACK_WITH_KEYBOARD.
• GO_BACKWARD_WITH_KEYBOARD_TRIGGERED -> GO_BACKWARD_WITH_KEYBOARD.
• GO_FORWARD_WITH_KEYBOARD_TRIGGERED -> GO_FORWARD_WITH_KEYBOARD.
• INCREASE_VOLUME_WITH_KEYBOARD_TRIGGERED -> INCREASE_VOLUME_WITH_KEYBOARD.
• DECREASE_VOLUME_WITH_KEYBOARD_TRIGGERED -> DECREASE_VOLUME_WITH_KEYBOARD.
• MUTE_SOUND_WITH_KEYBOARD_TRIGGERED -> MUTE_SOUND_WITH_KEYBOARD.
• UNMUTE_SOUND_WITH_KEYBOARD_TRIGGERED -> UNMUTE_SOUND_WITH_KEYBOARD.
• HIDE_INTERACTION_INDICATOR_TRIGGERED -> HIDE_INTERACTION_INDICATOR.
• PLAY_WITH_SCREEN_CLICK_TRIGGERED -> PLAY_WITH_SCREEN_CLICK.
• PAUSE_WITH_SCREEN_CLICK_TRIGGERED -> PAUSE_WITH_SCREEN_CLICK.

Removed events:

• PLAYER_WIDTH_CHANGE_TRIGGERED and PLAYER_HEIGHT_CHANGE_TRIGGERED removed. Use RESIZE.
• MUTE_STATUS_TRIGGERED removed, now use MUTE_CLICK and UNMUTE_CLICK.
• CONTROL_BLOCK_HIDE_TRIGGERED and CONTROL_BLOCK_SHOW_TRIGGERED removed. Use MAIN_BLOCK_HIDE and MAIN_BLOCK_SHOW.

Data attributes

We changes all names of all internal data attributes. We just added prefix playable after data, so there would be no potential conflicts with other libraries (lol yes, ofc).

• data-focus-source -> data-playable-focus-source.
• data-hook -> data-playable-hook (values we left same).
• data-in-full-screen -> data-playable-in-full-screen.
• data-is-playing -> data-playable-is-playing.
• data-played-percent -> data-playable-played-percent.
• data-is-muted -> data-playable-is-muted.
• data-volume-percent -> data-playable-volume-percent

New prefix for element queries functionality! data -> data-playable (for example instead of data-max-width use now data-playable-max-width).

New data attributes:

• data-playable-duration - we set here duration of video.
• data-playable-current-time - we set here current time of video.

Internal modules API

Main changes - we renamed in all our modules getNode() -> getElement().